/* S3-only single-product gallery.
   v1.5.5: the active theme lays direct product children out in its own grid.
   The UAS wrapper must span the entire parent grid/flex row first; otherwise
   width:100% is only 100% of one theme column and the summary collapses. */
body.uas-s3-gallery-active.single-product .uas-s3-product-top {
    /* Span any parent CSS grid used by the active WooCommerce theme. */
    grid-column: 1 / -1 !important;
    grid-row: auto !important;

    /* Also claim the full row when the theme uses flex instead of grid. */
    flex: 0 0 100% !important;
    align-self: stretch !important;

    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: flex-start !important;
    gap: clamp(20px, 3vw, 42px) !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    clear: both !important;
}

body.uas-s3-gallery-active.single-product .uas-s3-product-top > .woocommerce-product-gallery.uas-s3-native-gallery-wrapper,
body.uas-s3-gallery-active.single-product .uas-s3-product-top > div.images.uas-s3-native-gallery-wrapper {
    display: block !important;
    float: none !important;
    clear: none !important;
    flex: 0 0 44% !important;
    width: 44% !important;
    min-width: 0 !important;
    max-width: 44% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    opacity: 1 !important;
}

body.uas-s3-gallery-active.single-product .uas-s3-product-top > .summary,
body.uas-s3-gallery-active.single-product .uas-s3-product-top > .entry-summary {
    display: block !important;
    float: none !important;
    clear: none !important;
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* Do not let theme content-width rules squeeze the heading or summary children. */
body.uas-s3-gallery-active.single-product .uas-s3-product-top > .summary > *,
body.uas-s3-gallery-active.single-product .uas-s3-product-top > .entry-summary > * {
    max-width: 100% !important;
}

body.uas-s3-gallery-active.single-product .uas-s3-product-top .product_title {
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
    hyphens: none !important;
}

body.uas-s3-gallery-active.single-product .uas-s3-native-gallery-wrapper .woocommerce-product-gallery__wrapper {
    margin: 0;
    width: 100%;
}

.uas-s3-native-gallery {
    width: 100%;
    max-width: 100%;
}

.uas-s3-gallery-main {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.uas-s3-gallery-main a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    padding: 3%;
    box-sizing: border-box;
}

/* Force the entire remote S3 image to remain visible even when the active
   theme applies width/height/object-fit rules to product images. */
.uas-s3-gallery-main img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: auto !important;
    background: #fff;
}

.uas-s3-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.uas-s3-gallery-thumb {
    appearance: none;
    -webkit-appearance: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1 / 1;
    padding: 7px;
    margin: 0;
    border: 1px solid #e1e1e1;
    background: #fff;
    cursor: pointer;
    overflow: hidden;
}

.uas-s3-gallery-thumb.is-active {
    outline: 2px solid currentColor;
    outline-offset: 1px;
}

.uas-s3-gallery-thumb img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: auto !important;
    background: #fff;
}


/* v1.15.0: keep long multi-link galleries compact until the shopper asks to
   see the remaining images. Four columns x three rows = 12 initial thumbs. */
.uas-s3-gallery-thumb[hidden] {
    display: none !important;
}

.uas-s3-gallery-toggle {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin: 12px 0 0;
    padding: 11px 16px;
    border: 1px solid #cfd5db;
    border-radius: 6px;
    background: #fff;
    color: #2c3338;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.uas-s3-gallery-toggle:hover,
.uas-s3-gallery-toggle:focus-visible {
    border-color: #8c99a5;
    background: #f7f8f9;
    box-shadow: 0 0 0 2px rgba(44, 51, 56, .08);
}

.uas-s3-gallery-toggle-count {
    font-weight: 500;
    opacity: .72;
}

.uas-s3-product-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain !important;
    object-position: center center !important;
    background: #fff;
}

/* WooCommerce product-loop images, including Related Products, use the first
   S3 URL and keep the whole part visible inside the card image area. */
.woocommerce ul.products li.product img.uas-s3-loop-product-image,
.related.products img.uas-s3-loop-product-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: contain !important;
    object-position: center center !important;
    background: #fff;
}

@media (max-width: 980px) {
    body.uas-s3-gallery-active.single-product .uas-s3-product-top {
        gap: 24px !important;
    }

    body.uas-s3-gallery-active.single-product .uas-s3-product-top > .woocommerce-product-gallery.uas-s3-native-gallery-wrapper,
    body.uas-s3-gallery-active.single-product .uas-s3-product-top > div.images.uas-s3-native-gallery-wrapper {
        flex-basis: 42% !important;
        width: 42% !important;
        max-width: 42% !important;
    }
}

@media (max-width: 768px) {
    body.uas-s3-gallery-active.single-product .uas-s3-product-top {
        flex-direction: column !important;
        gap: 24px !important;
        width: 100% !important;
    }

    body.uas-s3-gallery-active.single-product .uas-s3-product-top > .woocommerce-product-gallery.uas-s3-native-gallery-wrapper,
    body.uas-s3-gallery-active.single-product .uas-s3-product-top > div.images.uas-s3-native-gallery-wrapper,
    body.uas-s3-gallery-active.single-product .uas-s3-product-top > .summary,
    body.uas-s3-gallery-active.single-product .uas-s3-product-top > .entry-summary {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .uas-s3-gallery-thumbs {
        gap: 6px;
    }
}

/* v1.9.1: S3 product thumbnails in WooCommerce Cart / Checkout. */
.uas-s3-cart-thumbnail {
    display: block;
    width: 80px !important;
    height: 80px !important;
    max-width: 80px !important;
    margin: 0 !important;
    padding: 4px;
    object-fit: contain !important;
    object-position: center !important;
    box-sizing: border-box;
    background: #fff;
}

.uas-checkout-item-with-thumbnail {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.uas-checkout-item-thumbnail {
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border: 1px solid #e1e4e7;
}

.uas-checkout-item-thumbnail img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 4px;
    object-fit: contain !important;
    object-position: center !important;
    box-sizing: border-box;
}

.uas-checkout-item-name {
    min-width: 0;
}