/* Customer-provided category artwork is the entire card, with no graphic overlays. */
.sf-storefront .sf-category-card--configured {
    display: block;
    min-height: 0;
    padding: 0;
    background: var(--surface);
}

.sf-storefront .sf-category-card--configured::before,
.sf-storefront .sf-category-card--configured::after,
.sf-storefront .sf-product-image-link::before,
.sf-storefront .sf-product-image-link::after {
    display: none;
    content: none;
}

/* Natural aspect ratios keep every part of the configured image visible. */
.sf-storefront .sf-category-card--configured .sf-category-photo,
.sf-storefront .sf-product-image-link .sf-product-image {
    display: block;
    position: static;
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: auto;
    object-fit: contain;
    object-position: center;
    opacity: 1;
    filter: none;
    mix-blend-mode: normal;
    transform: none;
    transition: none;
}

.sf-storefront .sf-product-image-link {
    aspect-ratio: auto;
    background: var(--surface);
}

/* Card hover motion must not zoom or crop the image itself. */
.sf-storefront .sf-category-card--configured:hover .sf-category-photo,
.sf-storefront .sf-product-card:hover .sf-product-image {
    transform: none;
    filter: none;
    opacity: 1;
}

/* A neutral message replaces only missing or failed photos. */
.sf-storefront .sf-category-card--configured > .sf-image-placeholder {
    aspect-ratio: 1640 / 500;
}

/* Final responsive artwork fit: banner-like images fill the frame, odd ratios stay clean. */
.sf-storefront .sf-hero--configured .sf-hero-slide {
    --sf-slide-ratio-number: 3.28;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: var(--sf-slide-ratio-number) / 1 !important;
    display: block;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--main) 12%, transparent), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--main) 6%), var(--surface));
}
.sf-storefront .sf-hero--configured .sf-hero-slide::before {
    content: "";
    position: absolute;
    inset: -18px;
    z-index: 0;
    background-image: var(--sf-slide-bg);
    background-size: cover;
    background-position: center;
    filter: blur(18px) saturate(1.08);
    opacity: .18;
    transform: scale(1.04);
    pointer-events: none;
}
.sf-storefront .sf-hero--configured .sf-hero-slide > img {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-position: center center;
    background: transparent;
}
.sf-storefront .sf-hero--configured .sf-hero-slide.sf-slide-fit-cover > img,
.sf-storefront .sf-hero--configured .sf-hero-slide:not(.sf-slide-fit-contain) > img {
    object-fit: cover !important;
}
.sf-storefront .sf-hero--configured .sf-hero-slide.sf-slide-fit-contain {
    aspect-ratio: 16 / 9 !important;
}
.sf-storefront .sf-hero--configured .sf-hero-slide.sf-slide-fit-contain > img {
    object-fit: contain !important;
    padding: clamp(8px, 1.4vw, 18px);
}
.sf-storefront .sf-hero--configured .sf-hero-slide.sf-slide-is-square,
.sf-storefront .sf-hero--configured .sf-hero-slide.sf-slide-is-tall {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
}
.sf-storefront .sf-hero--configured .sf-image-placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;
    min-height: 0;
}

.sf-storefront .sf-category-card--configured {
    --sf-category-ratio-number: 3.28;
    display: block;
    width: 100%;
    height: auto;
    min-height: 0 !important;
    aspect-ratio: var(--sf-category-ratio-number) / 1;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--main) 6%), var(--surface));
}
.sf-storefront .sf-category-card--configured::before {
    content: "";
    position: absolute;
    inset: -14px;
    z-index: 0;
    background-image: var(--sf-category-bg);
    background-size: cover;
    background-position: center;
    filter: blur(14px) saturate(1.04);
    opacity: .12;
    transform: scale(1.04);
    pointer-events: none;
}
.sf-storefront .sf-category-card--configured .sf-category-photo {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1;
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: inherit;
    object-position: center center;
    background: transparent;
}
.sf-storefront .sf-category-card--configured.sf-category-fit-cover .sf-category-photo,
.sf-storefront .sf-category-card--configured:not(.sf-category-fit-contain) .sf-category-photo {
    object-fit: cover !important;
}
.sf-storefront .sf-category-card--configured.sf-category-fit-contain .sf-category-photo {
    object-fit: contain !important;
    padding: clamp(6px, 1.2vw, 14px);
}
.sf-storefront .sf-category-card--configured > .sf-image-placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;
    min-height: 0;
    aspect-ratio: auto;
}
@media (max-width: 760px) {
    .sf-storefront .sf-hero--configured .sf-hero-slide,
    .sf-storefront .sf-category-card--configured {
        border-radius: 16px;
    }
}

/* Auto banner final: no manual arrows/dots on top of the slide. */
.sf-storefront .sf-hero--configured .sf-carousel-controls {
    display: none !important;
}