/* ===== Полоса акций (главная и разделы каталога): листается пальцем, колесом, перетаскиванием и стрелками ===== */
.action-strip { position: relative; }
.action-strip .action__list {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.action-strip .action__list::-webkit-scrollbar { display: none; }
.action-strip .action__list.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.action-strip .action__list.is-dragging .action { pointer-events: none; }
.action-strip .action,
.action-strip .action:first-child { margin: 15px; scroll-snap-align: start; vertical-align: middle; transition: box-shadow .3s ease; }
.action-strip .action__list .clear { display: none; }

/* стрелки — круглые кнопки поверх полосы; край, за которым есть ещё карточки, плавно растворяется */
.action-strip .action__list { margin: 0; padding: 0; scroll-padding: 0 15px; }
.action-strip.can-right .action__list { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 70px), transparent); }
.action-strip.can-left .action__list { -webkit-mask-image: linear-gradient(90deg, transparent, #000 70px); mask-image: linear-gradient(90deg, transparent, #000 70px); }
.action-strip.can-left.can-right .action__list { -webkit-mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent); mask-image: linear-gradient(90deg, transparent, #000 70px, #000 calc(100% - 70px), transparent); }
.action-strip .action__list__left,
.action-strip .action__list__right,
.action-strip .action__list__left:hover,
.action-strip .action__list__right:hover {
    top: 50%; width: 44px; height: 44px; margin-top: -22px;
    border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
    opacity: 1; transition: opacity .2s ease, background-color .2s ease, transform .2s ease;
}
.action-strip .action__list__left { left: 0; }
.action-strip .action__list__right { right: 0; }
.action-strip .action__list__left::before,
.action-strip .action__list__right::before {
    content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px;
    border-top: 2.5px solid #3D8635; border-right: 2.5px solid #3D8635;
}
.action-strip .action__list__right::before { transform: translate(-65%, -50%) rotate(45deg); }
.action-strip .action__list__left::before { transform: translate(-35%, -50%) rotate(-135deg); }
.action-strip .action__list__left:hover,
.action-strip .action__list__right:hover { background-color: #4FAE3C; transform: scale(1.06); }
.action-strip .action__list__left:hover::before,
.action-strip .action__list__right:hover::before { border-color: #fff; }
.action-strip .action__list__left.is-off,
.action-strip .action__list__right.is-off { opacity: 0; pointer-events: none; }
@media (hover: none) {
    .action-strip .action__list__left,
    .action-strip .action__list__right { display: none; }
}

/* ===== Карточка-баннер (картинка с текстом): админка → Акции → «Баннер целиком» ===== */
.action.action_banner {
    width: auto;
    aspect-ratio: 840 / 248;
    padding: 0;
    border: 0;
    border-radius: 12px;
    background: none;
}
.action.action_banner .action__title,
.action.action_banner .action__desc,
.action.action_banner .action__btn,
.action.action_banner .action__fon,
.action.action_banner .action__fon_hover { display: none; }
.action__banner {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block; border-radius: 12px;
    transition: transform .3s ease;
    -webkit-user-drag: none;
}
.action.action_banner:hover { border: 0; box-shadow: 0 6px 14px rgba(0, 0, 0, .15); }
.action.action_banner:hover .action__banner { transform: scale(1.02); }

@media screen and (max-width: 900px) {
    .action-strip .action__list { scroll-padding: 0 15px; }
    .action.action_banner { height: 100px; }   /* следующая карточка выглядывает справа — видно, что можно листать */
}
