/* Dipindah dari shop/partials/sg-cohesion-styles.php (blok #1, id=sg-mobile-cohesion) */
    /* ───────────────────────────────────────────────────────────────
       FINAL mobile cohesion pass — consolidated, appended last so it
       wins the cascade. Unifies home panel + product-card surfaces,
       monochrome-blue color rhythm, and vertical spacing for a clean,
       native-app storefront. CSS-only, mobile-scoped, both themes.
       ─────────────────────────────────────────────────────────────── */
    @media (max-width: 760px) {
        /* Even vertical rhythm between every home block */
        .sg-home-content { gap: 14px !important; }
        .sg-catalog-sections { gap: 14px !important; }

        /* One shared panel surface: Kategori Produk + every catalog section.
           Light = clean white module on the tinted body.
           Dark  = blue-black module lifted off the pure-black body. */
        html[data-theme="light"] .sg-tabs-wrap,
        html[data-theme="light"] .sg-market-quick .tg-market-section.sg-section {
            background: #ffffff !important;
            border: 1px solid #e4ecf9 !important;
            box-shadow: 0 12px 26px -22px rgba(13, 38, 76, .30) !important;
        }
        html:not([data-theme="light"]) .sg-tabs-wrap,
        html:not([data-theme="light"]) .sg-market-quick .tg-market-section.sg-section {
            background: linear-gradient(180deg, #0a1322 0%, #070d18 100%) !important;
            border: 1px solid rgba(26, 134, 255, .22) !important;
            box-shadow: 0 14px 30px -24px rgba(26, 134, 255, .70) !important;
        }

        /* Consistent section-title sizing across panels + standalone heads */
        .sg-section-title,
        .sg-tabs-wrap .sg-section-title,
        .sg-market-quick .tg-market-section.sg-section .sg-section-title {
            font-size: 1.06rem !important;
            line-height: 1.16 !important;
            letter-spacing: -.025em !important;
        }

        /* Product cards read as distinct tiles inside the panel they sit on */
        html[data-theme="light"] .sg-product-card,
        html[data-theme="light"] .sg-market-quick .sg-product-card {
            background: #eff4fe !important;
            border: 1px solid #dde7f8 !important;
            box-shadow: none !important;
        }
        html:not([data-theme="light"]) .sg-product-card,
        html:not([data-theme="light"]) .sg-market-quick .sg-product-card {
            background: #121a2a !important;
            border: 1px solid rgba(120, 170, 255, .14) !important;
            box-shadow: none !important;
        }

        /* Meta = clean monochrome pill (drop the stray green status dot) */
        .sg-product-meta::before { display: none !important; }
        .sg-product-meta { gap: 4px !important; }
        html:not([data-theme="light"]) .sg-product-meta {
            background: rgba(120, 170, 255, .14) !important;
        }

        /* Breathing room inside the 3-column cards (beats no-theme @600 rule) */
        .sg-product-card .sg-product-body {
            padding: 10px 10px 12px !important;
            gap: 5px !important;
        }
    }

    @media (max-width: 400px) {
        .sg-home-content,
        .sg-catalog-sections { gap: 12px !important; }

        .sg-section-title,
        .sg-tabs-wrap .sg-section-title,
        .sg-market-quick .tg-market-section.sg-section .sg-section-title {
            font-size: 1.02rem !important;
        }

        .sg-product-card .sg-product-body {
            padding: 9px 9px 11px !important;
        }
    }

    /* Breathing room: 3-col grid spacing + section-header separation */
    @media (max-width: 760px) {
        .sg-product-grid,
        .sg-market-quick .tg-market-subgrid {
            gap: 12px !important;
        }
        .sg-tabs-wrap .sg-section-head,
        .sg-market-quick .tg-market-section.sg-section .sg-section-head {
            margin-bottom: 16px !important;
        }
    }
    @media (max-width: 400px) {
        .tg-main {
            padding-left: 10px !important;
            padding-right: 10px !important;
        }
        .sg-product-grid,
        .sg-market-quick .tg-market-subgrid {
            gap: 10px !important;
        }
    }