/* Make the catalog homepage image render as a square (1:1).
   Faircamp renders the home image with class "home_image" (underscore),
   so target that class. We force a square container and use object-fit:cover
   so the original image is cropped client-side to a 1:1 presentation. */
.home_image {
    display: block;
    aspect-ratio: 1 / 1 !important;
    max-width: 600px; /* limits size on wide screens */
    width: 100% !important;
    margin: 0 auto;   /* centers the image */
    overflow: hidden;
    height: auto !important; /* unset any explicit heights from site.css */
    background: transparent !important;
}

/* picture element should fill the container */
.home_image picture,
.home_image img.home_image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important; /* crop to square without distortion */
}

@media (max-width: 600px) {
    .home_image {
        max-width: 90%;
    }
}

/* Stronger, specific rules targeting the span container that Faircamp
   generates for the homepage image so we override theme defaults. */

/* Use padding trick to force a true square container regardless of theme rules.
   This avoids conflicts with Faircamp's height/width rules and keeps the
   picture/img absolutely positioned and cropped via object-fit:cover. */
span.home_image {
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
    /* base width (what Faircamp would use) */
    --home-w: min(27rem, calc(100vw - 2rem));
    /* Show at 70% of that width */
    width: calc(var(--home-w) * 0.7) !important;
    max-width: calc(27rem * 0.7) !important;
    margin: 0 auto !important;
    padding: 0 !important;
    background: transparent !important;
    overflow: visible !important; /* container uses pseudo element for aspect */
}

/* Create a square using padding-top on a pseudo element so height is derived
   from width, independent of theme rules that set explicit heights. */
span.home_image::before {
    content: "";
    display: block;
    padding-top: 100%; /* 1:1 ratio */
}

/* Position the picture/img to completely cover the square */
span.home_image > picture,
span.home_image > img.home_image {
    position: absolute !important;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Also target the img when it's nested inside the picture element (common
   markup: span.home_image > picture > img). This ensures the <img> itself is
   absolutely positioned and covered. */
span.home_image picture img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    background: transparent !important;
}

/* On very small viewports use more of the width */
@media (max-width: 30rem) {
    /* on very small screens keep a 75% scaled width based on viewport */
    span.home_image { --home-w: calc(100vw - 2rem); width: calc(var(--home-w) * 0.7) !important; max-width: none !important; }
}