/* WooCommerce 11.1 uses a div instead of figure. Target its stable class. */
#qodef-woo-page.qodef--single .woocommerce-product-gallery__wrapper {
    position: relative;
    margin: 0;
}
#qodef-woo-page.qodef--single .woocommerce-product-gallery__wrapper a,
#qodef-woo-page.qodef--single .woocommerce-product-gallery__wrapper img:not(.zoomImg) {
    display: block;
    width: 100%;
    height: auto;
}
#qodef-woo-page.qodef--single .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image,
#qodef-woo-page.qodef--single .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image--placeholder {
    width: 100% !important;
    margin: 0;
    position: relative;
    overflow: hidden;
    align-self: start;
}
#qodef-woo-page.qodef--single .woocommerce-product-gallery.qodef-position--left .woocommerce-product-gallery__wrapper {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 12px;
}
#qodef-woo-page.qodef--single .woocommerce-product-gallery.qodef-position--left .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
    width: calc(80% - 6px) !important;
}
#qodef-woo-page.qodef--single .woocommerce-product-gallery.qodef-position--left .qodef-woo-thumbnails-wrapper {
    width: calc(20% - 6px);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
#qodef-woo-page.qodef--single .woocommerce-product-gallery.qodef-position--left .qodef-woo-thumbnails-wrapper .woocommerce-product-gallery__image {
    width: 100% !important;
    height: auto;
    margin: 0;
    padding: 0;
}
#qodef-woo-page.qodef--single .woocommerce-product-gallery.qodef-position--below .qodef-woo-thumbnails-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin: 12px -6px 0;
}
#qodef-woo-page.qodef--single .woocommerce-product-gallery.qodef-position--below .qodef-woo-thumbnails-wrapper > * {
    padding: 0 6px;
    margin-bottom: 12px;
}
@media (max-width: 680px) {
    #qodef-woo-page.qodef--single .woocommerce-product-gallery.qodef-position--left .woocommerce-product-gallery__wrapper {
        flex-direction: column;
    }
    #qodef-woo-page.qodef--single .woocommerce-product-gallery.qodef-position--left .woocommerce-product-gallery__wrapper > .woocommerce-product-gallery__image {
        width: 100% !important;
    }
    #qodef-woo-page.qodef--single .woocommerce-product-gallery.qodef-position--left .qodef-woo-thumbnails-wrapper {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
    #qodef-woo-page.qodef--single .woocommerce-product-gallery.qodef-position--left .qodef-woo-thumbnails-wrapper .woocommerce-product-gallery__image {
        width: calc((100% - 24px) / 3) !important;
    }
}

/* Keep WooCommerce's accessible description out of the visible icon row. */
.qodef-woo-product-list .qodef-woo-product-button-holder > .screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.qodef-woo-product-list .qodef-woo-product-image .drape-product-hover-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.qodef-woo-product-list .qodef-woo-product-inner:hover .drape-product-hover-image,
.qodef-woo-product-list .qodef-woo-product-inner:focus-within .drape-product-hover-image {
    opacity: 1;
}
.qodef-woo-product-list .qodef-woo-product-inner:hover .qodef-woo-product-image-inner:after,
.qodef-woo-product-list .qodef-woo-product-inner:focus-within .qodef-woo-product-image-inner:after {
    opacity: 0;
}
.qodef-woo-product-list .qodef-woo-product-button-holder {
    background: rgba(255, 255, 255, .94);
    padding: 5px;
}
.qodef-woo-product-list .qodef-woo-product-inner:focus-within .qodef-woo-product-image-inner,
.qodef-woo-product-list .qodef-woo-product-inner:focus-within .qodef-woo-product-button-holder > :not(.screen-reader-text) {
    opacity: 1;
    visibility: visible;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    .qodef-woo-product-list .qodef-woo-product-image .drape-product-hover-image {
        transition: none;
    }
}