/* ==========================================================================
   JT-15 — one shape for every product photo.

   The problem, straight from the client's recording: the main gallery image was
   wide on one slide and square on the next, so the PAGE JUMPED as you moved
   between them, and the thumbnail strip underneath was three different shapes
   and sizes. On a phone it looked different again.

   Cause: nothing constrained the image containers. Each <img> rendered at its
   natural size, so the layout was whatever the photographs happened to be.

   Fix: fixed-ratio boxes with `object-fit: contain`. Every product gets the same
   footprint on every screen, and NOTHING IS CROPPED — `cover` would fill the box
   more prettily but would cut the top off a tall toy box, which is worse for a
   shop than a little white space.

   Loaded after the theme stylesheet, so this file owns the sizing and a theme
   re-export cannot silently undo it.
   ========================================================================== */

/* -------------------------------------------------- product cards in grids */

.product-item .product-thumb {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: #fff;
    /* The theme sets display:flex here; keep the image centred inside the box. */
    justify-content: center;
}

.product-item .product-thumb > a,
.product-item .product-thumb > img,
.product-item .product-thumb > a > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* -------------------------------------------- product page — main gallery */

.single-product-thumb .thumb-item {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
}

.single-product-thumb .thumb-item > a,
.single-product-thumb .thumb-item > a.lightbox-image {
    display: block;
    width: 100%;
    height: 100%;
    cursor: zoom-in;
}

.single-product-thumb .thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* --------------------------------------- product page — thumbnail strip */

.single-product-nav .nav-item {
    aspect-ratio: 1 / 1;
    width: 100%;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    cursor: pointer;
    transition: border-color .15s ease;
}

.single-product-nav .nav-item:hover,
.single-product-nav .swiper-slide-thumb-active .nav-item {
    border-color: #7470b5;
}

.single-product-nav .nav-item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ------------------------------------------------------------- phones */

@media (max-width: 767px) {
    /* A square gallery eats most of a phone screen before the price is even
       visible, so give it a slightly shorter box on small screens. */
    .single-product-thumb .thumb-item {
        aspect-ratio: 4 / 3;
    }
}

/* ------------------------------- fallback for browsers without aspect-ratio */

@supports not (aspect-ratio: 1 / 1) {
    .product-item .product-thumb,
    .single-product-thumb .thumb-item,
    .single-product-nav .nav-item {
        position: relative;
        height: 0;
        padding-top: 100%;
    }

    .product-item .product-thumb > a,
    .product-item .product-thumb > img,
    .single-product-thumb .thumb-item > a,
    .single-product-nav .nav-item img {
        position: absolute;
        inset: 0;
    }

    @media (max-width: 767px) {
        .single-product-thumb .thumb-item { padding-top: 75%; }
    }
}