/* =====================================================================
   Floating cart icon for the navbar.
   Lives in its own file so the existing pages (index.html, bags.html...)
   can add the cart with one <link> tag, without touching their inline CSS.
   ===================================================================== */

.nav-cart {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--brown, #4A3F35);
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
    z-index: 10;
}

[dir="ltr"] .nav-cart {
    right: auto;
    left: 20px;
}

.nav-cart svg {
    width: 22px;
    height: 22px;
    stroke: var(--brown, #4A3F35);
    fill: none;
    stroke-width: 1.5;
    transition: stroke 0.3s ease;
}

.nav-cart:hover { color: var(--gold, #B5A064); }
.nav-cart:hover svg { stroke: var(--gold, #B5A064); }

.nav-cart .cart-count {
    background: var(--gold, #B5A064);
    color: var(--white, #FFFFFF);
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 0.7rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.nav-cart .cart-count:empty { display: none; }

@media (max-width: 768px) {
    .nav-cart {
        top: 12px;
        right: 14px;
        transform: none;
        font-size: 0.85rem;
    }
    [dir="ltr"] .nav-cart {
        right: auto;
        left: 14px;
    }
    .nav-cart svg { width: 20px; height: 20px; }
    /* Icon + count is enough on small screens — hide the "עגלה" label */
    .nav-cart span:not(.cart-count) { display: none; }
}