.bammat-ec-wrap {
        margin: 0;
        padding: 16px 0 24px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
        text-align: center;
    }
    .bammat-ec-wrap::-webkit-scrollbar { display: none; }

    .bammat-ec-carousel {
        display: inline-flex;
        gap: 14px;
        padding: 6px 20px 10px;
        cursor: grab;
        touch-action: pan-x pan-y;
    }
    .bammat-ec-carousel:active { cursor: grabbing; }

    /* ── Horizontal carousels must not trap vertical page scroll on touch ──
     * `pan-x` alone hijacks the vertical gesture; `pan-x pan-y` lets the
     * browser route by dominant direction — sideways scrolls the carousel,
     * downward scrolls the page. */
    .grocery-category-carousel,
    .unified-categories-carousel,
    .compact-categories-carousel,
    .unified-subcategory-tags,
    .unified-subsubcategory-tags,
    .bammat-ec-carousel,
    .bammat-ec-wrap {
        touch-action: pan-x pan-y !important;
    }

    .bammat-ec-card {
        flex: 0 0 140px;
        width: 140px;
        height: 200px;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding: 0 12px 16px;
        text-align: center;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        transition: transform 0.2s;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        border: 1px solid rgba(0,0,0,0.06);
    }
    .bammat-ec-card:hover { transform: scale(1.04) translateY(-3px); }
    .bammat-ec-card:active { transform: scale(0.97); }

    .bammat-ec-bg-emojis {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
    }
    .bammat-ec-bg-em {
        position: absolute;
        font-size: 28px;
        opacity: 0.12;
        line-height: 1;
        user-select: none;
    }

    /* Карточка выравнена по низу, поэтому длина названия двигала эмодзи
       вверх — и на французском с немецким они вставали на разной высоте.
       Под название отведено ровно три строки: короткое название держит
       место, длинное обрезается. Эмодзи и подпись оказываются на одной
       высоте у всех карточек и на всех языках. */
    .bammat-ec-card-emoji {
        position: relative;
        z-index: 2;
        font-size: 44px;
        line-height: 1;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
    }
    .bammat-ec-card-title {
        position: relative;
        z-index: 2;
        font-size: 12px;
        font-weight: 700;
        color: #1a1a1a;
        line-height: 1.3;
        height: 3.9em;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        text-wrap: balance;
    }
    .bammat-ec-card-hint {
        position: relative;
        z-index: 2;
        margin-top: 5px;
        font-size: 9px;
        color: rgba(0,0,0,0.35);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 3px;
        letter-spacing: 0.2px;
    }
    .bammat-ec-card-hint::before { content: '▶'; font-size: 7px; }

    #bammat-stories-overlay {
        position: fixed;
        inset: 0;
        z-index: 999999;
        background: rgba(0,0,0,0.7);
        display: none;
        align-items: center;
        justify-content: center;
    }
    #bammat-stories-overlay.active { display: flex; }

    #bammat-story-container {
        position: relative;
        width: 100%;
        max-width: 390px;
        height: 100%;
        max-height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: background 0.3s ease;
        border-radius: 0;
    }
    @media (min-width: 460px) {
        #bammat-story-container {
            border-radius: 22px;
            height: 86vh;
            max-height: 760px;
            box-shadow: 0 32px 80px rgba(0,0,0,0.5);
        }
    }

    #bammat-story-bg {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 0;
        overflow: hidden;
    }
    .bammat-story-bg-em {
        position: absolute;
        font-size: 36px;
        opacity: 0.08;
        line-height: 1;
        user-select: none;
    }

    #bammat-story-bars {
        display: flex;
        gap: 4px;
        padding: 14px 14px 0;
        flex-shrink: 0;
        position: relative;
        z-index: 10;
    }
    .bammat-story-bar-track {
        flex: 1;
        height: 3px;
        background: rgba(0,0,0,0.15);
        border-radius: 2px;
        overflow: hidden;
    }
    .bammat-story-bar-fill {
        height: 100%;
        background: rgba(0,0,0,0.5);
        border-radius: 2px;
        width: 0%;
    }
    .bammat-story-bar-fill.done { width: 100% !important; }
    .bammat-story-bar-fill.running {
        animation: bammatEcFill var(--ec-dur, 5s) linear forwards;
    }
    @keyframes bammatEcFill { from { width: 0% } to { width: 100% } }

    #bammat-story-topbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 16px 0;
        flex-shrink: 0;
        position: relative;
        z-index: 10;
    }
    #bammat-story-brand { font-size: 14px; font-weight: 800; color: #1a1a1a; letter-spacing: 0.3px; }
    #bammat-story-close {
        background: rgba(0,0,0,0.08); border: none;
        width: 32px; height: 32px; border-radius: 50%;
        color: #333; font-size: 18px; cursor: pointer;
        display: flex; align-items: center; justify-content: center;
        padding: 0; line-height: 32px;
        transition: background 0.15s; flex-shrink: 0;
        box-sizing: border-box;
        aspect-ratio: 1 / 1;
        min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px;
    }
    #bammat-story-close:hover { background: rgba(0,0,0,0.15); }

    #bammat-story-slide-area {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20px 32px 56px;
        text-align: center;
        position: relative;
        z-index: 2;
        overflow: hidden;
    }
    #bammat-story-emoji {
        font-size: 86px;
        line-height: 1;
        margin-bottom: 26px;
        filter: drop-shadow(0 4px 10px rgba(0,0,0,0.15));
    }
    #bammat-story-step {
        font-size: 11px; font-weight: 700;
        letter-spacing: 1.5px; text-transform: uppercase;
        margin-bottom: 10px; color: rgba(0,0,0,0.4);
    }
    #bammat-story-title {
        font-size: 26px; font-weight: 800;
        color: #1a1a1a; line-height: 1.25; margin-bottom: 14px;
    }
    #bammat-story-desc {
        font-size: 15px;
        color: rgba(0,0,0,0.6);
        line-height: 1.65; max-width: 290px;
    }

    .bammat-anim-emoji { animation: bammatEcSlideEmoji 0.45s cubic-bezier(0.34,1.56,0.64,1) both; }
    .bammat-anim-text  { animation: bammatEcSlideText  0.38s ease 0.1s both; }
    @keyframes bammatEcSlideEmoji { from { transform: scale(0.55) translateY(14px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
    @keyframes bammatEcSlideText  { from { transform: translateY(10px); opacity: 0; }             to { transform: translateY(0); opacity: 1; } }

    #bammat-story-tap-left,
    #bammat-story-tap-right {
        position: absolute;
        top: 80px; bottom: 0;
        width: 38%; z-index: 5; cursor: pointer;
    }
    #bammat-story-tap-left  { left: 0; }
    #bammat-story-tap-right { right: 0; }

    #bammat-story-dots {
        position: absolute;
        bottom: 18px; left: 0; right: 0;
        display: flex; justify-content: center;
        gap: 6px; z-index: 10;
    }
    .bammat-story-dot {
        width: 6px; height: 6px; border-radius: 50%;
        background: rgba(0,0,0,0.2); cursor: pointer;
        transition: all 0.2s; flex-shrink: 0;
    }
    .bammat-story-dot.active { background: rgba(0,0,0,0.5); width: 20px; border-radius: 3px; }

    @media (max-width: 460px) {
        #bammat-story-title { font-size: 22px; }
        #bammat-story-emoji { font-size: 72px; }
        #bammat-story-slide-area { padding: 16px 22px 52px; }
        .bammat-ec-card { flex: 0 0 125px; width: 125px; height: 180px; }
    }