/*
 * Token-based presentation for the WooCommerce Core product gallery.
 * Core continues to own the gallery markup, controls, zoom and lightbox.
 */

body.single-product .bhw-single-product-main div.product div.images {
    position: relative;
    align-self: start;
}

.bhw-single-product-main .woocommerce-product-gallery__wrapper {
    overflow: hidden;
    border: var(--bhw-border-thin) solid var(--bhw-color-border);
    border-radius: var(--bhw-radius-large);
    background: var(--bhw-color-background-secondary);
}

.bhw-single-product-main .woocommerce-product-gallery__image {
    min-width: 0;
}

body.single-product .bhw-single-product-main div.product div.images img {
    width: 100%;
    aspect-ratio: 4 / 3;
    margin: 0;
    background: var(--bhw-color-background-secondary);
    object-fit: contain;
}

body.single-product .bhw-single-product-main div.product div.images .flex-control-thumbs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bhw-space-3);
    margin-block-start: var(--bhw-space-3);
    padding: 0;
}

body.single-product .bhw-single-product-main div.product div.images .flex-control-thumbs li {
    float: none;
    width: 100%;
    min-width: 0;
    margin: 0;
}

body.single-product .bhw-single-product-main div.product div.images .flex-control-thumbs img {
    min-width: var(--bhw-control-min-size);
    min-height: var(--bhw-control-min-size);
    border: var(--bhw-border-thin) solid var(--bhw-color-border);
    border-radius: var(--bhw-radius-medium);
    opacity: 0.72;
}

body.single-product .bhw-single-product-main div.product div.images .flex-control-thumbs img.flex-active {
    border-color: var(--bhw-color-accent);
    opacity: 1;
}

body.single-product .bhw-single-product-main span.onsale {
    z-index: 2;
    top: var(--bhw-space-4);
    left: var(--bhw-space-4);
    min-width: auto;
    min-height: auto;
    padding: var(--bhw-space-2) var(--bhw-space-3);
    border: var(--bhw-border-thin) solid var(--bhw-color-accent);
    border-radius: var(--bhw-radius-pill);
    background: var(--bhw-color-accent);
    color: var(--bhw-color-focus-contrast);
    font-size: var(--bhw-text-sm);
    font-weight: var(--bhw-weight-bold);
    line-height: var(--bhw-leading-body);
}