.ag-responsive-picture { display: block; }
.ag-banner-media {
    display: block;
    position: relative;
    aspect-ratio: var(--ag-banner-ratio, auto);
}
.ag-responsive-picture > img,
.ag-banner-media > img { display: block; width: 100%; height: auto; }
.ag-banner-loading { background-color: #f6f6f6; }
.ag-banner-loading::after, .ag-deferred-loading::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -14px 0 0 -14px;
    box-sizing: border-box;
    border: 3px solid rgba(90, 90, 90, .2);
    border-top-color: #666;
    border-radius: 50%;
    pointer-events: none;
    animation: ag-banner-spin .8s linear infinite;
}
@keyframes ag-banner-spin { to { transform: rotate(360deg); } }
@media (max-width: 767px) {
    .ag-banner-media { aspect-ratio: var(--ag-banner-mobile-ratio, var(--ag-banner-ratio, auto)); }
}
@media (prefers-reduced-motion: reduce) {
    .ag-banner-loading::after, .ag-deferred-loading::after { animation: none; }
}
[data-ag-gallery] .big-photo > img { aspect-ratio: 1 / 1; }
/* Owl waits for window.load; expose the first banner while its image loads. */
.site-main-slider.owl-carousel:not(.owl-loaded) { display: block; }
.site-main-slider.owl-carousel:not(.owl-loaded) > .item:not(:first-child) { display: none; }

[data-ag-lazy-products] { position: relative; }
.ag-product-skeletons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.ag-product-skeletons > span { display: block; aspect-ratio: .82; background: #fff; }
.ag-section-button-space { height: 80px; }
@media (max-width: 1199px) {
    .ag-product-skeletons { grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .ag-product-skeletons > span:nth-child(4) { display: none; }
}
@media (max-width: 767px) {
    .ag-product-skeletons { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .ag-product-skeletons > span:nth-child(3) { display: none; }
}

/* Banner anchors are flex containers: reserve width before any image exists. */
.ag-banner-media { width: 100%; }

/* Only the inner class is isolated from legacy JS; keep the theme's height. */
.ag-thumbnail-carousel { height: 100%; }
.ag-thumbnail-carousel .thumbnail:focus-visible { outline: 2px solid #ce1f40; outline-offset: 2px; }

@media (min-width: 768px) {
    [data-ag-gallery] .big-item:focus-within > .item_thumbnail_carousel_outer { opacity: 1; left: -100px; z-index: 10; }
}