/* ============================================================
   FLOATING CART — persistent pink basket button, bottom-right.
   Only visible when the cart has items; nudges conversions by
   keeping the path back to /cart in view on long pages.
============================================================ */

.floating-cart {
    position: fixed;
    right: 1.5rem;
    bottom: max(1.5rem, env(safe-area-inset-bottom));
    z-index: 200;

    width: 3.5rem;
    height: 3.5rem;
    display: grid;
    place-items: center;

    background: var(--pink);
    color: var(--cream);
    border-radius: var(--border-radius-lg);
    box-shadow: 0 12px 32px oklch(16.5% 0.007 50 / 0.35);

    transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.floating-cart:hover,
.floating-cart:focus-visible {
    background: var(--pink-deep);
    transform: translateY(-2px);
    box-shadow: 0 16px 40px oklch(16.5% 0.007 50 / 0.45);
    color: var(--cream);
}

/* Hidden state: scale/fade out and remove from the layout + tab order. */
.floating-cart--hidden {
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
    visibility: hidden;
}

/* Count badge — inverted from the button (ink on cream) so it reads
   against the pink fill. Mirrors the nav badge geometry. */
.floating-cart__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: grid;
    place-items: center;

    background: var(--ink);
    color: var(--cream);
    border: 2px solid var(--cream);
    border-radius: 999px;

    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

@media (max-width: 600px) {
    .floating-cart {
        right: 1rem;
        bottom: max(1rem, env(safe-area-inset-bottom));
        width: 3.25rem;
        height: 3.25rem;
    }
}