/* ============================================================
   Kreshaa Prodigy — Mobile Fixes
   Add this AFTER style.css in your header.php:
   <link rel="stylesheet" href="/assets/css/mobile-fix.css">
   ============================================================ */

/* === GLOBAL IMAGE FIX === */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* === PRODUCT CARD IMAGES — constrain on all screens === */
.product-card .card-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 22px;
    margin-bottom: 16px;
    background: linear-gradient(155deg, #FFF3D2, #DFF6F7);
}

/* === MOBILE BREAKPOINT === */
@media (max-width: 768px) {

    /* --- HERO: stack text + orbit vertically --- */
    .hero-magnetic {
        grid-template-columns: 1fr !important;
        padding: 24px 16px 20px !important;
        min-height: auto !important;
        gap: 10px !important;
    }

    /* --- MAGNETIC ORBIT: replace floating animation with a tidy grid --- */
    .magnetic-orbit {
        min-height: auto !important;
        overflow: visible !important;
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
        justify-items: center !important;
        align-items: center !important;
        padding: 10px 0 !important;
        order: -1 !important;
    }

    /* Hide the center mascot + glow on mobile to save space */
    .orbit-center {
        display: none !important;
    }

    /* Turn orbit items from absolute-positioned to static grid children */
    .orbit-item {
        position: static !important;
        transform: none !important;
        opacity: 1 !important;
        margin: 0 !important;
        left: auto !important;
        top: auto !important;
    }

    .orbit-product {
        width: 70px !important;
        height: 70px !important;
        border-width: 2px !important;
    }

    .orbit-emoji-item {
        width: 60px !important;
        height: 60px !important;
        font-size: 24px !important;
    }

    /* --- Product Detail Page: stack image + info --- */
    .container > div[style*="grid-template-columns: 1fr 1fr"][style*="gap:48px"],
    .container > div[style*="grid-template-columns:1fr 1fr"][style*="gap:48px"] {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    /* Product detail image container */
    .container > div[style*="grid-template-columns"] > div:first-child > div[style*="aspect-ratio"] {
        max-width: 100% !important;
        border-radius: 18px !important;
    }

    /* Product detail title */
    .container h1[style*="clamp(24px"] {
        font-size: 24px !important;
    }

    /* --- Product Grid: proper 2-col on mobile --- */
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .product-card {
        padding: 10px 10px 14px !important;
        border-radius: 18px !important;
    }

    .product-card .card-img {
        border-radius: 14px !important;
        margin-bottom: 10px !important;
    }

    .product-card .card-title {
        font-size: 14px !important;
        line-height: 1.3 !important;
        margin-bottom: 3px !important;
    }

    .product-card .card-meta {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    .product-card .card-price {
        font-size: 15px !important;
    }

    .product-card .card-price .compare {
        font-size: 11px !important;
    }

    .product-card .card-price .rating {
        font-size: 11px !important;
        display: block !important;
        margin-left: 0 !important;
        margin-top: 2px !important;
    }

    .product-card .card-tag {
        top: 20px !important;
        left: 20px !important;
        font-size: 10px !important;
        padding: 4px 10px !important;
    }

    .product-card .card-gst-note {
        font-size: 10px !important;
    }

    .product-card .card-add-btn {
        font-size: 13px !important;
        padding: 10px 12px !important;
    }

    .product-card .card-actions {
        flex-direction: column !important;
        gap: 6px !important;
    }

    /* --- Category Grid --- */
    .category-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .category-blob {
        padding: 20px 14px !important;
    }

    .category-blob .blob-thumb {
        width: 60px !important;
        height: 60px !important;
    }

    .category-blob .blob-label {
        font-size: 15px !important;
        margin-top: 12px !important;
    }

    .category-blob .blob-note {
        font-size: 12px !important;
    }

    /* --- Occasion Grid --- */
    .occasion-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
    }

    .occasion-card {
        padding: 14px 8px !important;
        border-radius: 18px !important;
    }

    .occasion-icon {
        width: 50px !important;
        height: 50px !important;
    }

    .occasion-name {
        font-size: 12px !important;
    }

    /* --- Hero Section --- */
    .hero h1, .hero-magnetic h1 {
        font-size: 32px !important;
        text-align: center !important;
        margin-top: 0 !important;
    }

    .hero p {
        font-size: 15px !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .hero-eyebrow {
        font-size: 11px !important;
        padding: 7px 14px 7px 10px !important;
        margin: 0 auto !important;
    }

    .hero-stats {
        flex-wrap: wrap !important;
        gap: 10px !important;
        font-size: 13px !important;
        justify-content: center !important;
    }

    .hero-stats strong {
        font-size: 20px !important;
    }

    .hero-text-col {
        text-align: center !important;
    }

    /* Hero buttons: side by side but smaller */
    .hero-text-col > div[style*="display:flex"] {
        justify-content: center !important;
        gap: 10px !important;
        margin-top: 20px !important;
    }

    .hero-text-col .btn {
        padding: 14px 24px !important;
        font-size: 14px !important;
    }

    /* --- Recently Purchased Bar --- */
    .recent-purchases-bar {
        padding: 10px 0 !important;
    }

    .rp-label {
        font-size: 11px !important;
        padding: 0 8px 0 12px !important;
    }

    .rp-track {
        padding-left: 140px !important;
    }

    .rp-item {
        padding: 4px 10px 4px 4px !important;
        gap: 6px !important;
    }

    .rp-name {
        max-width: 100px !important;
        font-size: 12px !important;
    }

    /* --- Section headings --- */
    .section h2 {
        font-size: 26px !important;
    }

    .section p[style*="17.5px"] {
        font-size: 15px !important;
    }

    /* --- Buttons on mobile --- */
    .btn {
        padding: 14px 24px !important;
        font-size: 14px !important;
    }

    .btn-primary[style*="17px 34px"] {
        padding: 14px 28px !important;
        font-size: 15px !important;
    }

    /* --- Shop page filter bar --- */
    .container > div[style*="border-radius:28px"][style*="box-shadow"] {
        padding: 10px !important;
        border-radius: 18px !important;
    }

    .container > div[style*="border-radius:28px"] form {
        flex-direction: column !important;
    }

    .container > div[style*="border-radius:28px"] select {
        width: 100% !important;
        flex: none !important;
    }

    /* --- Story section cards --- */
    div[style*="grid-template-columns:repeat(auto-fit,minmax(210px"] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    /* --- Footer --- */
    .site-footer {
        margin-top: 60px !important;
        padding: 40px 16px 30px !important;
        border-radius: 30% 70% 0 0 / 50px 50px 0 0 !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        text-align: center !important;
    }

    .footer-logo {
        height: 70px !important;
        margin: 0 auto 10px !important;
    }

    .footer-tagline {
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .footer-newsletter {
        flex-direction: column !important;
        border-radius: 16px !important;
        padding: 8px !important;
    }

    .footer-newsletter input {
        text-align: center !important;
    }

    .footer-bottom {
        text-align: center !important;
    }

    .footer-bottom-links {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    /* --- Cart page --- */
    .container > div[style*="display:grid"][style*="gap:40px"] {
        grid-template-columns: 1fr !important;
    }

    /* --- Checkout form rows --- */
    .form-row {
        grid-template-columns: 1fr !important;
    }

    /* --- Review form --- */
    #reviewForm {
        margin: 32px 0 0 !important;
        padding: 24px 16px !important;
        border-radius: 18px !important;
    }

    /* --- Auth pages --- */
    .auth-card {
        padding: 32px 20px !important;
        margin: 0 12px !important;
    }

    .auth-page {
        padding: 110px 0 60px !important;
    }

    /* --- Custom section blob --- */
    .custom-section-blob {
        padding: 32px 20px !important;
        border-radius: 30% 70% 30% 70% / 20% 20% 80% 80% !important;
    }

    /* --- Mascot: smaller on mobile --- */
    .mascot-container {
        width: 90px !important;
        right: 10px !important;
    }

    .mascot-bubble {
        font-size: 12px !important;
        min-width: 120px !important;
        padding: 8px 14px !important;
    }

    /* --- WhatsApp float: smaller --- */
    .whatsapp-float {
        width: 44px !important;
        height: 44px !important;
        font-size: 22px !important;
        bottom: 16px !important;
        left: 16px !important;
    }

    /* --- General spacing --- */
    .section {
        padding: 40px 0 !important;
    }

    .container {
        padding: 0 16px !important;
    }

    /* --- Breadcrumb on product page --- */
    .container > div[style*="font-size:14px"][style*="margin-bottom:24px"] {
        font-size: 12px !important;
        margin-bottom: 16px !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    /* --- Testimonials --- */
    .testimonial-grid {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .testimonial-card {
        padding: 20px !important;
    }

    /* --- Pagination --- */
    .pagination {
        gap: 6px !important;
    }

    .pagination a, .pagination .current {
        width: 32px !important;
        height: 32px !important;
        font-size: 12px !important;
    }
}

/* === SMALL PHONES (under 400px) === */
@media (max-width: 400px) {
    .product-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    .product-card {
        padding: 8px 8px 12px !important;
    }

    .product-card .card-title {
        font-size: 13px !important;
    }

    .product-card .card-price {
        font-size: 14px !important;
    }

    .hero h1, .hero-magnetic h1 {
        font-size: 28px !important;
    }

    .nav-pill {
        padding: 10px 12px !important;
    }

    .category-grid {
        gap: 8px !important;
    }

    .occasion-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .btn {
        padding: 12px 20px !important;
        font-size: 13px !important;
    }
}

/* === IMAGE LAZY LOADING PLACEHOLDER === */
img[loading="lazy"] {
    background: linear-gradient(155deg, #FFF3D2, #DFF6F7);
    min-height: 50px;
}