/*
 * Dekorativni listovi u shop i category hero sekcijama.
 *
 * Jedan izvor za obje strane: ::before koristi sliku kakva jeste,
 * ::after istu sliku horizontalno preslikanu. Jedan HTTP request umjesto dva,
 * i jedno mjesto za izmjenu umjesto duplikata u hero-shop.css i hero-category.css.
 *
 * Ranije: dva SVG-a od po 9.2 MB (embedovani raster + Gaussian blur filteri).
 * Sada: jedan WebP od 31 KB.
 *
 * Okvir 137x246 je zadržan iz originalnog SVG viewBox-a da pozicije ostanu iste.
 */

.shop-hero .container::before,
.shop-hero .container::after,
.category-hero .container::before,
.category-hero .container::after {
    content: "";
    position: absolute;
    top: var(--space-2);
    z-index: 2;
    width: 137px;
    height: 246px;
    background-image: url('../../icons/tarafarm_dekorativni_listovi.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}

.shop-hero .container::before,
.category-hero .container::before {
    left: var(--space-5);
}

.shop-hero .container::after,
.category-hero .container::after {
    right: var(--space-5);
    transform: scaleX(-1);
}

/* Ispod 1200px dekoracija se ne prikazuje, pa se slika ni ne preuzima. */
@media (max-width: 1199px) {
    .shop-hero .container::before,
    .shop-hero .container::after,
    .category-hero .container::before,
    .category-hero .container::after {
        display: none;
    }
}