/* Styles for crossway category product carousels */
.product-swiper { min-height: 180px; position: relative; }
.product-swiper.swiper { height: auto !important; min-height: 180px !important; }
.product-swiper .swiper-wrapper { align-items: center; }
.product-swiper .swiper-slide { display:flex; align-items:center; justify-content:center; }
.product-swiper img, .product-swiper video { display:block; max-width:100%; max-height:320px; height:auto; margin:0 auto; }

/* Arrows: smaller and placed outside image area */
.product-swiper .arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display:flex; align-items:center; justify-content:center;
    z-index:30;
    padding:0;
}
.product-swiper .arrow svg { width: 16px !important; height: 16px !important; fill: currentColor; }
.product-swiper .arrow-left { left: -30px; }
.product-swiper .arrow-right { right: -30px; }

@media (max-width: 768px) {
    .product-swiper .arrow { width: 40px; height: 40px; }
    .product-swiper .arrow svg { width: 20px !important; height: 20px !important; }
    .product-swiper .arrow-left { left: 0.5rem; }
    .product-swiper .arrow-right { right: 0.5rem; }
}

/* Allow arrows to show outside of .list-img at desktop */
@media (min-width: 48em) {
    .list-img { overflow: visible !important; }
}
/* The file intentionally keeps a single consistent arrow/style block above.
   If you need different sizing per breakpoint, adjust the @media rules above. */