/* ==========================================================================
   _modals.css — v1.1
   Všetky navbarové overlay modály: Contact, Profile, Cart, NotLogged.
   Desktop: dropdown panel | Tablet+Mobile: bottom sheet

   Zmeny v v1.1:
   - body.no-scroll: bez position:fixed, len overflow:hidden + padding-right
   - Desktop: position bez translate(-50%) — JS (navbar.js) nastavuje right:
   - Opravená visibility transition — žiadny delay pri otváraní
   - Kartový .cartWrapp: width:auto na tablet/mobile
   - Profil mobile: extra padding-bottom pre bottom nav bar
   ========================================================================== */

/* ==========================================================================
   0. SCROLL LOCK
   ========================================================================== */
body.no-scroll {
    overflow: hidden;
    /* POZOR: bez position:fixed — zamedzí page-jump pri zmiznutí scrollbaru.
       Kompenzáciu scrollbaru rieši scrollLock.js cez padding-right. */
}

/* ==========================================================================
   1. SPOLOČNÝ ZÁKLAD — Desktop dropdown wrapper
   position: fixed s right: positioning (JS nastaví presné right: px)
   ========================================================================== */
:root {
    --modal-close-ms: 240;
    --bottom-nav-h:   64px;  /* Výška bottom nav baru */
}

.headWrapp .contactWrappTop,
.headWrapp .profileWrappTop,
.headWrapp .cartSectionWrappTop {
    /* Pozícia */
    position:   fixed;
    top:        var(--navbar-bottom, 80px);
    right:      16px;   /* Fallback — JS prepíše */
    left:       auto;
    z-index:    300;

    /* Rozmery */
    width:     auto;
    max-width: none;
    padding:   0;

    /* Skrytý stav */
    visibility:     hidden;
    opacity:        0;
    pointer-events: none;
    transform:      translateY(-10px) scale(0.98);

    /* Prechodová animácia — visibility BEZ delay v base stave
       (delay sa pridá len pri zatváraní cez is-closing) */
    transition:
        opacity   0.22s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
        visibility 0s linear 0.22s;
}

/* Otvorený stav — okamžite viditeľný, plynulý vstup */
.headWrapp .contactWrappTop.is-open,
.headWrapp .profileWrappTop.is-open,
.headWrapp .cartSectionWrappTop.is-open {
    visibility:     visible;
    opacity:        1;
    pointer-events: auto;
    transform:      translateY(0) scale(1);
    /* DÔLEŽITÉ: visibility tu BEZ delay → zobrazí sa okamžite (nie po 220ms) */
    transition:
        opacity   0.22s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s;
}

/* Zatvárací stav — exit animácia */
.headWrapp .contactWrappTop.is-closing,
.headWrapp .profileWrappTop.is-closing,
.headWrapp .cartSectionWrappTop.is-closing {
    visibility:     visible;
    opacity:        0;
    pointer-events: none;
    transform:      translateY(-8px) scale(0.98);
    transition:
        opacity   0.2s cubic-bezier(0.4, 0, 1, 1),
        transform 0.2s cubic-bezier(0.4, 0, 1, 1),
        visibility 0s;
}

/* ==========================================================================
   2. KONTAKT DROPDOWN — Desktop panel (pilulkový / kartový dizajn)
   ========================================================================== */
.headWrapp .contactWrappTop .contact {
    background-color: var(--text-white);
    border-radius:    16px;
    border:           1px solid var(--border-primary);
    box-shadow:       0 12px 40px rgba(0, 0, 0, 0.15);
    padding:          14px;
    min-width:        300px;
    max-width:        340px;
    display:          flex;
    flex-direction:   column;
    gap:              10px;
    margin-top:       8px;
}

/* Skupina kontaktu = jemná karta */
.headWrapp .contactWrappTop .contact > div {
    display:         flex;
    flex-direction:  column;
    align-items:     flex-start;
    gap:             3px;
    background:      var(--surface-smoke);
    border:          1px solid var(--border-primary);
    border-radius:   12px;
    padding:         12px 14px;
}

.headWrapp .contactWrappTop .contact > div span {
    font-family:    'VolteSemibold', sans-serif;
    font-size:      11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color:          var(--text-secondary);
    margin:         0;
}

.headWrapp .contactWrappTop .contact > div h3 {
    font-size: 15px;
    margin:    2px 0;
    color:     var(--text-primary);
}

.headWrapp .contactWrappTop .contact > div a {
    color:           var(--primary-color, #F39200);
    text-decoration: none;
    font-size:       14px;
    margin:          0;
}

.headWrapp .contactWrappTop .contact > div a:hover {
    text-decoration: underline;
}

.headWrapp .contactWrappTop .contact .primary-btn {
    width:         100%;
    text-align:    center;
    border-radius: 999px;
    margin-top:    2px;
}

/* ==========================================================================
   3. PROFIL DROPDOWN — Desktop panel (pilulkový dizajn)
   ========================================================================== */
.headWrapp .profileWrappTop .profile {
    background-color: var(--text-white);
    border-radius:    16px;
    border:           1px solid var(--border-primary);
    box-shadow:       0 12px 40px rgba(0, 0, 0, 0.15);
    padding:          12px;
    min-width:        290px;
    max-width:        310px;
    display:          flex;
    flex-direction:   column;
    gap:              6px;
    margin-top:       8px;
}

/* Hlavička sheetu (názov prevádzky) — len mobil/tablet, na desktope skrytá */
.headWrapp .profileWrappTop .profile .mobileHead,
.headWrapp .contactWrappTop .contact .mobileHead {
    display: none;
}

/* Zmena prevádzky — karta */
.headWrapp .profileWrappTop .profile .branchWrapp {
    border:          1px solid var(--border-primary);
    border-radius:   12px;
    background:      var(--surface-smoke);
    display:         flex;
    gap:             10px;
    padding:         12px 14px;
    align-items:     center;
    font-size:       14px;
    text-decoration: none;
    color:           var(--text-primary);
    cursor:          pointer;
    transition:      background-color 0.15s ease, border-color 0.15s ease;
    margin-bottom:   2px;
}

@media (hover: hover) and (pointer: fine) {
    .headWrapp .profileWrappTop .profile .branchWrapp:hover {
        background-color: rgba(243, 146, 0, 0.08);
        border-color:     rgba(243, 146, 0, 0.4);
    }
}

.headWrapp .profileWrappTop .profile .branchWrapp .branchWrappMobileText {
    display: none;
}
.headWrapp .profileWrappTop .profile .branchWrapp .branchWrappDesktopText {
    display: block;
}

.headWrapp .profileWrappTop .profile .links {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}

/* Odkazy ako pilulkové riadky */
.headWrapp .profileWrappTop .profile .links a {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         10px 14px;
    border-radius:   999px;
    text-decoration: none;
    font-size:       14px;
    color:           var(--text-primary);
    transition:      background-color 0.15s ease, color 0.15s ease;
}

/* .active = aktuálna stránka (drží sa stále); hover len pre myš (na dotyku by „prilepol") */
.headWrapp .profileWrappTop .profile .links a.active {
    background-color: rgba(243, 146, 0, 0.08);
    color:            var(--text-primary);
}

.headWrapp .profileWrappTop .profile .links a svg path {
    transition: stroke 0.15s ease;
}
.headWrapp .profileWrappTop .profile .links a.active svg path {
    stroke: var(--primary-color, #F39200);
}

@media (hover: hover) and (pointer: fine) {
    .headWrapp .profileWrappTop .profile .links a:hover {
        background-color: rgba(243, 146, 0, 0.08);
        color:            var(--text-primary);
    }
    .headWrapp .profileWrappTop .profile .links a:hover svg path {
        stroke: var(--primary-color, #F39200);
    }
}

/* Opakovať poslednú objednávku — zvýraznená zelená akcia navrchu profil sheetu */
.headWrapp .profileWrappTop .profile .links a.is-reorder {
    border:      1px solid var(--surface-green, #65B22E);
    color:       var(--surface-green, #65B22E);
    font-family: 'VolteSemibold', sans-serif;
}

.headWrapp .profileWrappTop .profile .links a.is-reorder svg path {
    stroke: var(--surface-green, #65B22E);
}

@media (hover: hover) and (pointer: fine) {
    .headWrapp .profileWrappTop .profile .links a.is-reorder:hover {
        background-color: rgba(101, 178, 46, 0.10);
        color:           var(--surface-green, #65B22E);
    }

    .headWrapp .profileWrappTop .profile .links a.is-reorder:hover svg path {
        stroke: var(--surface-green, #65B22E);
    }
}

/* Na desktope (profil = dropdown) skryjeme „Opakovať" a „Kontakt" — obe sú dostupné
   priamo v navbare. Na mobile/tablete (profil = bottom sheet) ostávajú viditeľné. */
@media (min-width: 1281px) {
    .headWrapp .profileWrappTop .profile .links a.is-reorder,
    .headWrapp .profileWrappTop .profile .links #profileContactLink {
        display: none;
    }
}

.headWrapp .profileWrappTop .profile .darkLine {
    background-color: var(--border-primary);
    height:           1px;
    width:            100%;
    margin:           4px 0;
}

/* Odhlásenie — červená obrysová pilulka */
.headWrapp .profileWrappTop .profile .logout {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         10px 14px;
    border-radius:   999px;
    border:          1px solid #E53012;
    color:           #E53012;
    text-decoration: none;
    font-size:       14px;
    transition:      background-color 0.15s ease;
}

.headWrapp .profileWrappTop .profile .logout svg path {
    stroke: #E53012;
}

@media (hover: hover) and (pointer: fine) {
    .headWrapp .profileWrappTop .profile .logout:hover {
        background-color: #FEF0ED;
    }
}

/* ==========================================================================
   4. KOŠÍK DROPDOWN — Desktop panel
   ========================================================================== */
.headWrapp .cartSectionWrappTop .cartWrapp {
    background-color: white;
    border-radius:    12px;
    border:           1px solid var(--border-primary);
    box-shadow:       0 8px 32px rgba(0, 0, 0, 0.14);
    width:            400px;
    max-height:       72vh;
    display:          flex;
    flex-direction:   column;
    overflow:         hidden;
    margin-top:       6px;
    /* Containing block pre loading overlay (.is-updating .cartWrapp::after).
       Na tablet/mobile je .cartWrapp position:absolute (slide panel) — preto
       loading rule NESMIE prepisovať position (inak sheet vyskočí hore). */
    position:         relative;
}

/* Cart header */
.cart-header-actions {
    display:          flex;
    align-items:      center;
    justify-content:  space-between;
    padding:          16px 20px 12px;
    border-bottom:    1px solid var(--border-primary);
    flex-shrink:      0;
    gap:              8px;
}

.cart-header-actions .title {
    margin:      0;
    font-size:   17px;
    font-family: 'VolteSemibold', sans-serif;
    flex:        1;
}

/* Mobilný close button — skrytý na desktope */
.cart-sheet-close {
    display:          none;
    align-items:      center;
    justify-content:  center;
    width:            32px;
    height:           32px;
    border:           none;
    background:       transparent;
    border-radius:    999px;
    cursor:           pointer;
    color:            var(--text-primary);
    padding:          0;
    flex-shrink:      0;
    transition:       background-color 0.15s ease;
}

@media (hover: hover) and (pointer: fine) {
    .cart-sheet-close:hover {
        background-color: var(--surface-smoke);
    }
}

/* Cart list scroll area */
.headWrapp .cartSectionWrappTop .cartList {
    flex:       1;
    overflow-y: auto;
    padding:    0 20px;
    scrollbar-width: thin;
    scrollbar-color: var(--border-primary) transparent;
}
.headWrapp .cartSectionWrappTop .cartList::-webkit-scrollbar { width: 4px; }
.headWrapp .cartSectionWrappTop .cartList::-webkit-scrollbar-thumb { background: var(--border-primary); border-radius: 4px; }

/* Cart footer */
.headWrapp .cartSectionWrappTop .cartFoot {
    padding:     16px 20px;
    border-top:  1px solid var(--border-primary);
    flex-shrink: 0;
    background:  white;
}

/* ==========================================================================
   5. NOT LOGGED MODAL — Centered overlay
   ========================================================================== */
.notLoggedWrappBg {
    position:    fixed;
    inset:       0;
    z-index:     600;
    display:     flex;
    align-items: center;
    justify-content: center;
    padding:     16px;

    background-color: transparent;
    visibility:       hidden;
    pointer-events:   none;

    transition:
        background-color 0.25s ease,
        visibility       0s linear 0.25s;
    --modal-close-ms: 220;
}

.notLoggedWrappBg.is-open {
    background-color: var(--popup-bg);
    visibility:       visible;
    pointer-events:   auto;
    transition:
        background-color 0.25s ease,
        visibility       0s;
}

.notLoggedWrappBg.is-closing {
    background-color: transparent;
    visibility:       visible;
    pointer-events:   none;
    transition:
        background-color 0.2s ease,
        visibility       0s;
}

/* Vnútorný panel — scale animácia */
.notLoggedWrappBg .notLoggedWrapp {
    background-color: white;
    padding:          24px 24px 28px;
    max-width:        360px;
    width:            100%;
    border-radius:    16px;
    display:          flex;
    flex-direction:   column;
    gap:              20px;
    align-items:      center;
    color:            var(--text-primary);
    box-shadow:       0 20px 60px rgba(0, 0, 0, 0.20);

    transform:    scale(0.94) translateY(8px);
    opacity:      0;
    transition:
        transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
        opacity   0.25s ease;
}

.notLoggedWrappBg.is-open .notLoggedWrapp {
    transform: scale(1) translateY(0);
    opacity:   1;
}

.notLoggedWrappBg.is-closing .notLoggedWrapp {
    transform:  scale(0.96) translateY(4px);
    opacity:    0;
    transition:
        transform 0.2s cubic-bezier(0.4, 0, 1, 1),
        opacity   0.2s ease;
}

.notLoggedWrappBg .notLoggedWrapp h5 {
    font-size: 26px; text-align: center;
}
.notLoggedWrappBg .notLoggedWrapp .desc {
    text-align: center; font-size: 14px; color: var(--text-secondary); margin: 0;
}
.notLoggedWrappBg .notLoggedWrapp div {
    display: flex; flex-direction: column; gap: 16px; width: 100%; align-items: center;
}
.notLoggedWrappBg .notLoggedWrapp .primary-btn {
    text-decoration: none; width: 100%; display: block; text-align: center;
}
.notLoggedWrappBg .notLoggedWrapp .cancel {
    text-decoration: underline; cursor: pointer; font-size: 14px;
    color: var(--text-secondary); background: none; border: none; padding: 0;
}

/* ==========================================================================
   6. TABLET — Bottom Sheet transformácia (max-width: 1280px)
   Vonkajší wrapper = backdrop. Vnútorný panel vyjízdí zdola.
   ========================================================================== */
@media (max-width: 1280px) {

    /* ── Wrapper = fullscreen backdrop ── */
    .headWrapp .contactWrappTop,
    .headWrapp .profileWrappTop,
    .headWrapp .cartSectionWrappTop {
        top:        0;
        bottom:     0;
        left:       0;
        right:      0;
        max-width:  none;
        width:      100%;
        padding:    0;
        transform:  none;
        
        /* PRIDANÉ: Musí to byť nad .bottom-nav (ktorý má 400) */
        z-index:    450; 

        background-color: transparent;
        transition:
            background-color 0.3s ease,
            visibility       0s linear 0.35s;
        --modal-close-ms: 320;
    }
    .headWrapp .contactWrappTop.is-open,
    .headWrapp .profileWrappTop.is-open,
    .headWrapp .cartSectionWrappTop.is-open {
        background-color: rgba(0, 0, 0, 0.5);
        opacity:    1;
        transform:  none;
        visibility: visible;
        transition:
            background-color 0.3s ease,
            visibility       0s;
    }

    .headWrapp .contactWrappTop.is-closing,
    .headWrapp .profileWrappTop.is-closing,
    .headWrapp .cartSectionWrappTop.is-closing {
        background-color: transparent;
        visibility:  visible;
        pointer-events: none;
        transform:   none;
        transition:
            background-color 0.3s ease,
            visibility       0s linear 0.32s;
    }

    /* ── Vnútorný panel — slide-up zo spodu ── */
    .headWrapp .contactWrappTop .contact,
    .headWrapp .profileWrappTop .profile,
    .headWrapp .cartSectionWrappTop .cartWrapp {
        position:       absolute;
        bottom:         0;
        left:           0;
        right:          0;
        top:            auto;
        /* FIX: bez explicitnej šírky sa panel roztiahne cez left+right */
        width:          auto !important;
        max-width:      100% !important;
        min-width:      0 !important;
        margin:         0 !important;
        border-radius:  20px 20px 0 0;
        box-shadow:     0 -8px 40px rgba(0, 0, 0, 0.18);
        padding-bottom: env(safe-area-inset-bottom, 0px);

        transform:  translateY(110%);
        transition: transform 0.38s cubic-bezier(0.34, 1.2, 0.64, 1);
    }

    .headWrapp .contactWrappTop.is-open .contact,
    .headWrapp .profileWrappTop.is-open .profile,
    .headWrapp .cartSectionWrappTop.is-open .cartWrapp {
        transform: translateY(0);
    }

    .headWrapp .contactWrappTop.is-closing .contact,
    .headWrapp .profileWrappTop.is-closing .profile,
    .headWrapp .cartSectionWrappTop.is-closing .cartWrapp {
        transform:  translateY(110%);
        transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1);
    }

 

    /* ── KONTAKT — tablet/mobile bottom sheet ── */
    .headWrapp .contactWrappTop .contact {
        max-height:     80svh;
        overflow-y:     auto;
        padding:        0 20px calc(env(safe-area-inset-bottom, 0px) + 24px);
        display:        flex;
        flex-direction: column;
        gap:            14px;
    }

    .headWrapp .contactWrappTop .contact > div:not(.mobileHead) {
        background:    var(--surface-smoke);
        border-radius: 12px;
        border:        1px solid var(--border-primary);
        padding:       14px 16px;
        margin-bottom: 4px;
        align-items:   flex-start;
    }

    .headWrapp .contactWrappTop .contact > div:not(.mobileHead) span {
        font-size:      11px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom:  6px;
    }

    .headWrapp .contactWrappTop .contact > div:not(.mobileHead) h3 {
        font-size:     15px;
        margin-bottom: 5px;
    }

    .headWrapp .contactWrappTop .contact .primary-btn {
        display:         flex !important;
        justify-content: center;
        width:           100%;
        margin-top:      6px;
        padding:         14px 20px;
        border-radius:   999px;
    }

    /* ── PROFIL — tablet/mobile bottom sheet ── */
    .headWrapp .profileWrappTop .profile {
        max-height:     92svh;
        overflow-y:     auto;
        padding:        0 20px calc(env(safe-area-inset-bottom, 0px) + 24px);
        display:        flex;
        flex-direction: column;
        gap:            14px;
    }

    /* Hlavička bottom sheetu (kontakt aj profil): názov prevádzky vľavo + zavrieť vpravo */
    .headWrapp .contactWrappTop .contact .mobileHead,
    .headWrapp .profileWrappTop .profile .mobileHead {
        display:         flex !important;
        justify-content: space-between;
        align-items:     center;
        gap:             12px;
        padding:         8px 0 14px;
        border-bottom:   1px solid var(--border-primary);
    }

    /* Profil sheet: názov org/prevádzky je až v .account-head nižšie → hlavička (iba zavrieť „×")
       nepotrebuje deliacu čiaru ani veľkú spodnú medzeru (zbytočné skrolovanie). „×" ostáva. */
    .headWrapp .profileWrappTop .profile .mobileHead {
        padding:       8px 0 0;
        border-bottom: none;
    }

    .headWrapp .profileWrappTop .profile .mobileHead .logo { display: none !important; }

    .sheet-branch {
        font-family:   'VolteSemibold', sans-serif;
        font-size:     16px;
        color:         var(--text-primary);
        line-height:   1.25;
        overflow:      hidden;
        text-overflow: ellipsis;
        white-space:   nowrap;
        flex:          1;
        min-width:     0;
    }

    .headWrapp .profileWrappTop .profile .branchWrapp {
        display:         flex !important;
        align-items:     center !important;
        gap:             12px !important;
        padding:         14px 16px !important;
        border-radius:   12px !important;
        border:          1px solid var(--border-primary) !important;
        background:      var(--surface-smoke) !important;
        text-decoration: none !important;
        color:           var(--text-primary) !important;
        justify-content: flex-start !important;
    }

    /* Názov prevádzky je teraz v hlavičke sheetu (.sheet-branch), preto tlačidlo
       ukazuje len akciu "Zmeniť prevádzku" — žiadne duplikovanie názvu. */
    .headWrapp .profileWrappTop .profile .branchWrappDesktopText { display: block !important; }
    .headWrapp .profileWrappTop .profile .branchWrappMobileText  { display: none !important; }

    .headWrapp .profileWrappTop .profile .links {
        display:        flex !important;
        flex-direction: column !important;
        gap:            8px !important;
    }

    .headWrapp .profileWrappTop .profile .links a {
        padding:       14px 16px !important;
        border-radius: 12px !important;
        border:        1px solid var(--border-primary) !important;
        background:    var(--text-white) !important;
        font-size:     15px !important;
        transition:    background-color 0.15s ease !important;
    }

    .headWrapp .profileWrappTop .profile .links a:active {
        background: var(--blue-200) !important;
    }

    .headWrapp .profileWrappTop .profile .darkLine {
        margin: 6px 0 !important;
    }

    .headWrapp .profileWrappTop .profile .logout {
        padding:       14px 16px !important;
        border-radius: 12px !important;
        border:        1px solid #E53012 !important;
        color:         #E53012 !important;
        font-size:     15px !important;
        transition:    background-color 0.15s ease !important;
    }

    .headWrapp .profileWrappTop .profile .logout:active { background: #FEF0ED !important; }
    .headWrapp .profileWrappTop .profile .logout svg path { stroke: #E53012 !important; }

    /* ── KOŠÍK — tablet/mobile bottom sheet ── */
    .cart-sheet-close { display: flex; }

    .headWrapp .cartSectionWrappTop .cartWrapp {
        max-height:    88svh;
        border-radius: 20px 20px 0 0;
        overflow-y:    auto;
        /* Explicitne prepíšeme desktop width */
        width:         auto !important;
        max-width:     100% !important;
    }

    .cart-header-actions {
        padding: 8px 20px 14px;
    }

    /* Cart list na tablet/mobile */
    .headWrapp .cartSectionWrappTop .cartList {
        padding: 0 16px;
    }
}

/* ==========================================================================
   7. MOBILE — Doplnkové úpravy (< 768px)
   ========================================================================== */
@media (max-width: 767px) {

    /* Kontakt — panel musí sedieť NAD bottom navom (rovnako ako košík).
       .headWrapp je stacking context (z-index 200), takže bottom-nav (400) by inak
       prekryl spodok sheetu — preto ho zdvihneme o jeho výšku. */
    .headWrapp .contactWrappTop .contact {
        bottom:     calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100svh - var(--bottom-nav-h) - env(safe-area-inset-bottom, 0px) - 20px) !important;
    }

    /* Profil — panel musí sedieť NAD bottom navom (rovnako ako kontakt/košík), inak je
       spodok sheetu vrátane „Odhlásiť sa" prekrytý bottom navom a nedá sa k nemu doskrolovať
       (.headWrapp je stacking context, viď §5). */
    .headWrapp .profileWrappTop .profile {
        bottom:     calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100svh - var(--bottom-nav-h) - env(safe-area-inset-bottom, 0px) - 20px) !important;
    }

    /* Not Logged — bottom sheet na mobile */
    .notLoggedWrappBg {
        align-items: flex-end;
        padding:     0;
    }

    .notLoggedWrappBg .notLoggedWrapp {
        max-width:     none;
        width:         100%;
        border-radius: 20px 20px 0 0;
        padding:       0 20px calc(env(safe-area-inset-bottom, 0px) + 24px);

        transform:  translateY(110%);
        opacity:    1;
        transition: transform 0.38s cubic-bezier(0.34, 1.2, 0.64, 1);
    }

    .notLoggedWrappBg .notLoggedWrapp::before {
        content:       '';
        display:       block;
        width:         40px;
        height:        4px;
        background:    var(--border-primary);
        border-radius: 2px;
        margin:        12px auto 4px;
    }

    .notLoggedWrappBg.is-open .notLoggedWrapp {
        transform: translateY(0);
        opacity:   1;
    }

    .notLoggedWrappBg.is-closing .notLoggedWrapp {
        transform:  translateY(110%);
        opacity:    1;
        transition: transform 0.28s cubic-bezier(0.4, 0, 1, 1);
    }

    .notLoggedWrappBg .notLoggedWrapp h5 {
        margin-top: 8px;
    }

    .headWrapp .cartSectionWrappTop .cartWrapp {
        bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
        max-height: calc(100svh - var(--bottom-nav-h) - env(safe-area-inset-bottom, 0px) - 20px) !important;
    }
}

/* ==========================================================================
   8. ANIMÁCIE
   ========================================================================== */
@keyframes enterAnimation {
    from { transform: translateX(-100vw); }
    to   { transform: translateX(0); }
}

@keyframes animateCart {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.25); }
    100% { transform: scale(1); }
}

#cartWrappTopBtn svg {
    transition: 0.2s ease;
    animation:  animateCart 1s;
    animation-play-state: paused;
}

body.addedToCart #cartWrappTopBtn svg {
    animation-play-state: running;
}

/* ==========================================================================
   9. CART SNIPPET WRAPPERY — transparentné pre layout
   Minikošík redrawuje cez AJAX len {snippet cartTrigger} a {snippet cartBody}.
   Nette ich obalí do <div id="snippet-...">; display:contents zaručí, že tieto
   obaly nezasahujú do flex layoutu (#cartWrappTopBtn, resp. .cartWrapp) — deti
   (trigger <a>, resp. header/list/foot) participujú priamo v rodičovi.
   Statický panel #cartWrappTop (position:fixed) je MIMO snippetov → otvorený
   stav (.is-open + pozícia + mobilný transform) prežije každý redraw.
   ========================================================================== */
.cart-snip {
    display: contents;
}

/* ==========================================================================
   10. KOŠÍK — DESKTOP panel padajúci ZHORA od tlačidla košíka (dropdown štýl)
   --------------------------------------------------------------------------
   .cartSectionWrappTop = stmavený backdrop pod navbarom; .cartWrapp = panel
   pri pravom okraji (s odstupom), ktorý sa "rozbalí" z pravého horného rohu
   (transform-origin: top right + translateY) — ladí s tlačidlom košíka a jeho
   šípkou v navbare. Výška podľa obsahu → pri málo položkách žiadny prázdny priestor.
   Blok je za base pravidlami → prebije ich pre ≥1281px (mobil/tablet ≤1280 = bottom sheet).
   ========================================================================== */
@media (min-width: 1281px) {
    .headWrapp .cartSectionWrappTop {
        top: var(--navbar-bottom, 80px);  /* pod navbarom — navbar ostáva prístupný a nestmavený */
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-width: none;
        z-index: 500;                 /* nad obsahom */
        background-color: transparent;
        opacity: 1;                   /* dim rieši background-color, nie opacity */
        transform: none;
        visibility: hidden;
        pointer-events: none;
        --modal-close-ms: 250;
        transition: background-color 0.25s ease, visibility 0s linear 0.25s;
    }

    .headWrapp .cartSectionWrappTop.is-open {
        background-color: var(--popup-bg, rgba(0, 0, 0, 0.45));
        visibility: visible;
        pointer-events: auto;
        transition: background-color 0.25s ease, visibility 0s;
    }

    .headWrapp .cartSectionWrappTop.is-closing {
        background-color: transparent;
        visibility: visible;
        pointer-events: none;
        transition: background-color 0.25s ease, visibility 0s linear 0.25s;
    }

    /* Panel — vpravo s odstupom od okraja, padá zhora (od tlačidla košíka).
       Výška podľa obsahu (max-height) → málo položiek = krátky panel bez prázdneho miesta. */
    .headWrapp .cartSectionWrappTop .cartWrapp {
        position: absolute;
        top: 8px;
        right: 16px;
        bottom: auto;
        left: auto;
        width: 420px;
        max-width: calc(100vw - 32px);
        height: auto;
        max-height: calc(100vh - var(--navbar-bottom, 80px) - 24px);
        margin: 0;
        border: 1px solid var(--border-primary);
        border-radius: 14px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
        transform-origin: top right;
        transform: translateY(-12px) scale(0.98);
        opacity: 0;
        transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;
    }

    .headWrapp .cartSectionWrappTop.is-open .cartWrapp {
        transform: translateY(0) scale(1);
        opacity: 1;
    }

    .headWrapp .cartSectionWrappTop.is-closing .cartWrapp {
        transform: translateY(-8px) scale(0.98);
        opacity: 0;
        transition: transform 0.18s ease, opacity 0.18s ease;
    }

    /* Zatváracie X je viditeľné aj na desktope */
    .headWrapp .cartSectionWrappTop .cart-sheet-close {
        display: flex;
    }
}