/* Mobile UX fixes */

/* Book badges - absolute positioning to avoid overlap */
.book-badge {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    white-space: nowrap;
    margin-bottom: 0;
}

/* Pack ribbon mobile fix */
@media (max-width: 768px) {
    .pack-ribbon {
        position: static;
        transform: none;
        display: block;
        width: fit-content;
        padding: 5px 16px;
        border-radius: 20px;
        text-align: center;
        margin: 0 auto 8px;
        right: auto;
    }

    .pack-card {
        overflow: visible;
    }

    .preview-label {
        position: static;
        display: inline-block;
        margin: 12px 12px 0;
    }

    .preview-caption {
        padding: 14px 16px;
    }

    /* Footer compact mobile */
    .footer-grid {
        gap: 24px;
    }

    .footer-brand p {
        font-size: 0.8rem;
    }

    .footer-links h4 {
        margin-bottom: 8px;
    }

    .footer-links li {
        padding: 3px 0;
    }

    .footer-links a {
        font-size: 0.82rem;
    }

    .footer-contact p {
        font-size: 0.82rem;
    }

    .footer {
        padding: 40px 0 24px;
    }
}

/* Sticky CTA mobile - compact */
@media (max-width: 768px) {
    .sticky-cta {
        padding: 8px 12px;
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }

    .sticky-cta-btn {
        padding: 11px 16px;
        font-size: 0.85rem;
    }
}