/**
 * ZOOM AMIGO ECOM BANNER (zaebaner)
 * Desktop: 4.5 | Mobile: 2.5 | Вертикальні банери
 */

/* ========================================
   Container
   ======================================== */
.zaebaner {
    position: relative;
    width: 100%;
    overflow: hidden;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    touch-action: pan-y pinch-zoom;
}

/* ========================================
   Track
   ======================================== */
.zaebaner__track {
    display: flex;
    gap: 16px;
    cursor: grab;
    will-change: transform;
}

.zaebaner__track.is-dragging {
    cursor: grabbing;
}

/* ========================================
   Slide - Initial width to prevent layout shift
   ======================================== */
.zaebaner__slide {
    position: relative;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #f5f5f5;
    /* Aspect ratio 305:171 = 1.783 (як на reference) */
    aspect-ratio: 171 / 305;
    /* Desktop: 4.5 slides, 16px gap (3.5 gaps) */
    width: calc((100% - 56px) / 4.5);
}

.zaebaner__link {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* ========================================
   Image
   ======================================== */
.zaebaner__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    border-radius: inherit;
}

/* Lazy load blur */
.zaebaner__image[data-src] {
    filter: blur(10px);
    transition: filter 0.3s ease;
}

.zaebaner__image.is-loaded {
    filter: blur(0);
}

.zaebaner__image:not(.is-loaded):not([src]) {
    background: linear-gradient(135deg, #f0f0f0 0%, #e8e8e8 100%);
}

/* ========================================
   Responsive - Tablet (768-1024px)
   ======================================== */
@media (max-width: 1024px) {
    .zaebaner__track {
        gap: 12px;
    }
    
    .zaebaner__slide {
        border-radius: 14px;
        /* Tablet: 3 slides, 12px gap (2 gaps) */
        width: calc((100% - 24px) / 3);
    }
}

/* ========================================
   Responsive - Mobile (<768px)
   ======================================== */
@media (max-width: 768px) {
    .zaebaner {
        margin-left: 12px;
    }
    
    .zaebaner__track {
        gap: 8px;
    }
    
    .zaebaner__slide {
        border-radius: 12px;
        /* Mobile: 2.5 slides, 8px gap (1.5 gaps) */
        width: calc((100% - 12px) / 2.5);
    }
}

/* ========================================
   Responsive - Small Mobile (<480px)
   ======================================== */
@media (max-width: 480px) {
    .zaebaner {
        margin-left: 8px;
    }
    
    .zaebaner__track {
        gap: 6px;
    }
    
    .zaebaner__slide {
        border-radius: 10px;
        /* Small Mobile: 2.5 slides, 6px gap */
        width: calc((100% - 9px) / 2.5);
    }
}

/* ========================================
   Cloned slides (infinite loop)
   ======================================== */
.zaebaner__slide.is-clone {
    /* Клони візуально ідентичні оригіналам */
}

/* ========================================
   Accessibility
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .zaebaner__track {
        transition: none !important;
    }
    
    .zaebaner__image[data-src] {
        filter: none;
        transition: none;
    }
}

.zaebaner__link:focus-visible {
    outline: 3px solid #ff6b00;
    outline-offset: -3px;
}

/* ========================================
   Top Strip Banner
   ======================================== */
.zaebaner-topstrip {
    display: block;
    width: 100%;
    line-height: 0;
    font-size: 0;
}

.zaebaner-topstrip__item {
    display: block;
    width: 100%;
    text-decoration: none;
    line-height: 0;
}

.zaebaner-topstrip__img {
    display: block;
    width: 100%;
    height: 45px;
    object-fit: cover;
    object-position: center;
}

@media (max-width: 767px) {
    .zaebaner-topstrip__img {
        height: 42px;
    }
}

/* ========================================
   Promo Strip (benefits bar above slider)
   ======================================== */
.amg-promo-strip{padding:0;background:#fafaf9;margin-bottom:8px}
.amg-promo-strip__scroll{display:flex;overflow:hidden}
.amg-promo-strip__scroll.is-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}
.amg-promo-strip__item{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:6px 14px;text-decoration:none!important;white-space:nowrap;border-right:1px solid #ebebeb}
.amg-promo-strip__item:last-child{border-right:0}
.amg-promo-strip__item:active{background:#f0efed}
.amg-promo-strip__item .amg-icon{flex-shrink:0;opacity:.45}
.amg-promo-strip__item--personal .amg-icon{opacity:.7}
.amg-promo-strip__body{display:flex;flex-direction:column;gap:1px}
.amg-promo-strip__title{font-size:12px;font-weight:600;line-height:1.2;color:#333}
.amg-promo-strip__sub{font-size:10px;font-weight:400;line-height:1.2;color:#888}
.amg-promo-strip__item--personal .amg-promo-strip__title{color:#b45309}
.amg-promo-strip__item--order .amg-promo-strip__sub{color:#16a34a}
@media(min-width:1025px){
    .amg-promo-strip__item{padding:6px 16px}
    .amg-promo-strip__item:hover{background:#f0efed}
}