/* Force product images to show without cropping */
.product-item img,
.topbar-product-card img,
.product-image,
img.product-image,
.product-item .product-image,
.topbar-product-card .product-image {
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-position: center !important;
}

/* Fix container heights and remove grey background. Default 250px so product images (e.g. "You may also like") are not tiny.
   When a block has a fixed height set in settings, the block's scoped CSS (with data-block-id) overrides this.
   Brand logo blocks reuse .topbar-product-card + .product-image-container but must NOT get 250px — that caused huge gaps on mobile. */
.product-item .position-relative,
.topbar-product-card .position-relative:not(.brand-img-wrap),
.product-image-container:not(.brand-img-wrap) {
    height: 250px !important;
    min-height: 250px !important;
    max-height: none !important;
    background-color: transparent !important;
}

/* ProductList block: default 250px when no custom height. When block has fixed height set, productsList.blade.php injects
   rules with data-block-id that override (no min-height 250px there). */
section[data-block-type="product_list"] .topbar-product-card .product-image-container,
section[data-block-type="product_list"] .topbar-product-card .position-relative.product-image-container,
section[data-block-type="product_list"] .product-image-container {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
}

/* Category / search with filters: same default cell height as Product List (block inline CSS can override per settings) */
section[data-block-type="productswithfilters"] .topbar-product-card .product-image-container,
section[data-block-type="productswithfilters"] .topbar-product-card .position-relative.product-image-container,
section[data-block-type="productswithfilters"] .product-image-container {
    height: 250px !important;
    min-height: 250px !important;
    max-height: 250px !important;
}

/* Override any inline styles */
.product-item img[style*="object-fit"],
.topbar-product-card img[style*="object-fit"],
.product-image[style*="object-fit"] {
    object-fit: contain !important;
}

/* Override any width/height inline styles */
.product-item img[style*="width"],
.product-item img[style*="height"],
.topbar-product-card img[style*="width"],
.topbar-product-card img[style*="height"] {
    width: auto !important;
    height: auto !important;
}

/* Remove any grey backgrounds from product containers */
.product-item,
.topbar-product-card,
.product-item .position-relative,
.topbar-product-card .position-relative:not(.brand-img-wrap),
.product-item .product-image-container,
.topbar-product-card .product-image-container:not(.brand-img-wrap),
.brand-img-wrap,
.topbar-product-card .brand-img-wrap {
    background-color: transparent !important;
}

/* Quick view modal: global .product-view-img { height: 660px } and 250px containers must not apply — causes vertical stretch on iPhone */
#quickViewModel .product-image-container {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}
#quickViewModel .carousel-inner,
#quickViewModel .carousel-item {
    min-height: 0 !important;
}
#quickViewModel .quickview-product-view-img,
#quickViewModel .product-view-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 75vh !important;
    object-fit: contain !important;
    object-position: center !important;
}

/* Product detail page: main image max-width 100%, no stretching */
.product-detail-main-image,
.productMain .thumbnail-container img,
.productMain .product-detail-main-image-wrap img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
}
.productMain .thumbnail-container.product-detail-main-image-wrap {
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* PDP slideshow: vertical thumbs left on desktop, horizontal strip + dots on mobile */
.pdp-gallery-slideshow__row {
    align-items: flex-start;
}
/* Do not use height:100% — parent col has no explicit height and collapses the thumb strip */
.pdp-gallery-slideshow .productSmall {
    height: min(560px, 70vh);
    min-height: 280px;
}
.pdp-gallery-slideshow .productSmall .swiper-slide {
    opacity: 0.55;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}
.pdp-gallery-slideshow .productSmall .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain !important;
    object-position: center;
}
@media (min-width: 1200px) {
    .pdp-gallery-slideshow__thumbs {
        min-height: min(560px, 70vh);
    }
}
.pdp-gallery-slideshow .productSmall .swiper-slide-thumb-active {
    opacity: 1;
    outline: 2px solid #222;
    outline-offset: 1px;
}
.pdp-gallery-slideshow .productMain {
    min-height: 280px;
}
.pdp-gallery-slideshow .pdp-gallery-slideshow__pagination {
    position: relative;
    margin-top: 0.75rem;
}
@media (min-width: 1200px) {
    .pdp-gallery-slideshow .pdp-gallery-slideshow__pagination {
        display: none;
    }
}
@media (max-width: 1199.98px) {
    .pdp-gallery-slideshow .productSmall {
        height: auto;
        max-height: none;
        margin-top: 0.75rem;
    }
    .pdp-gallery-slideshow .productSmall .swiper-wrapper .swiper-slide {
        width: 72px !important;
        height: auto !important;
        aspect-ratio: 1 / 1;
    }
    .pdp-gallery-slideshow .productSmall .swiper-wrapper .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: contain !important;
    }
    .pdp-gallery-slideshow .productMain {
        height: auto;
        min-height: min(70vw, 420px);
        max-height: 75vh;
    }
}
@media (max-width: 767.98px) {
    .pdp-gallery-slideshow .productMain .swiper-button-next,
    .pdp-gallery-slideshow .productMain .swiper-button-prev {
        width: 36px;
        height: 36px;
        background: rgba(255, 255, 255, 0.85);
        border-radius: 50%;
    }
    .pdp-gallery-slideshow .productMain .swiper-button-next::after,
    .pdp-gallery-slideshow .productMain .swiper-button-prev::after {
        font-size: 14px;
        font-weight: 700;
    }
    .pdp-gallery-slideshow .p_i_zoom .detail {
        touch-action: none;
    }
}

/*
 | Product badges (New / Hot): filter-functions.js injects .product-tag inside .product-image-container.
 | The container is a flex row; without position:absolute the badge stays in document flow and appears
 | between grid columns or clipped at the viewport edge. Same markup as Blade partials — keep styles global.
 */
.topbar-product-card .product-image-container {
    isolation: isolate;
}
.topbar-product-card .product-image-container > .product-tag {
    position: absolute;
    top: 46px;
    left: 10px;
    padding: 5px 10px;
    color: #fff;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    z-index: 40;
    border-radius: 4px;
    letter-spacing: 0.04em;
    line-height: 1.2;
    pointer-events: none;
}
.topbar-product-card .product-image-container > .product-tag.hot-tag {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    box-shadow: 0 2px 6px rgba(238, 90, 36, 0.35);
}
.topbar-product-card .product-image-container > .product-tag.new-tag {
    background: linear-gradient(135deg, #54a0ff, #2e86de);
    box-shadow: 0 2px 6px rgba(46, 134, 222, 0.35);
}
@media (max-width: 767px) {
    .topbar-product-card .product-image-container > .product-tag {
        font-size: 10px;
        padding: 4px 8px;
        top: 42px;
        left: 8px;
    }
}

/* PDP: prevent theme zoom pane / fixed gallery height from hiding size/cart on phones */
@media (max-width: 1199.98px) {
    section.edit_product .product-details {
        position: relative;
        z-index: 2;
        background: #fff;
        overflow: visible !important;
    }

    section.edit_product .product-details .p_i_zoom,
    section.edit_product .product-details .p_i_zoom.active {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        min-height: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
    }

    section.edit_product .productMain {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }

    section.edit_product .productMain .swiper-wrapper,
    section.edit_product .productMain .swiper-slide,
    section.edit_product .productMain .swiper-slide img {
        height: auto !important;
        max-height: 75vh !important;
        object-fit: contain !important;
    }

    section.edit_product .pdp-purchase-stack,
    section.edit_product .pdp-purchase-stack .pdp-core-purchase-options,
    section.edit_product .pdp-purchase-stack #add-to-cart-form,
    section.edit_product .pdp-purchase-stack .social-share {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    section.edit_product .pdp-purchase-stack .product-size-list.size-grid {
        display: grid !important;
    }

    section.edit_product .pdp-purchase-stack #add-to-cart-form .d-flex {
        display: flex !important;
    }
}