/* Dipindah dari shop/index.php (blok #7, id=sg-mobile-native-refinement) */
    /* Final mobile storefront pass: app-like hierarchy without touching markup or logic. */
    @media (max-width: 760px) {
        :root {
            --sg-mobile-gutter: max(14px, env(safe-area-inset-left, 0px));
            --sg-mobile-surface: #070707;
            --sg-mobile-surface-2: #0d0d0d;
            --sg-mobile-line: rgba(255,255,255,.11);
        }

        html[data-theme="light"] {
            --sg-mobile-surface: #ffffff;
            --sg-mobile-surface-2: #f8fbff;
            --sg-mobile-line: #e1e9fb;
        }

        body {
            min-width: 0 !important;
            overscroll-behavior-y: contain;
        }

        .tg-app {
            background:
                linear-gradient(180deg, rgba(26, 134, 255,.18) 0, rgba(26, 134, 255,0) 170px),
                #000000 !important;
        }

        html[data-theme="light"] .tg-app {
            background:
                linear-gradient(180deg, rgba(26, 134, 255,.09) 0, rgba(26, 134, 255,0) 170px),
                #f5f8ff !important;
        }

        .tg-nav.sg-nav {
            min-height: calc(58px + env(safe-area-inset-top, 0px)) !important;
            padding: calc(8px + env(safe-area-inset-top, 0px)) 0 8px !important;
            background: rgba(0,0,0,.96) !important;
            border-bottom-color: rgba(255,255,255,.10) !important;
        }

        html[data-theme="light"] .tg-nav.sg-nav {
            background: rgba(255,255,255,.98) !important;
            border-bottom-color: #e8eef9 !important;
        }

        .sg-nav-container {
            padding-left: max(14px, env(safe-area-inset-left, 0px)) !important;
            padding-right: max(14px, env(safe-area-inset-right, 0px)) !important;
        }

        .sg-nav-row {
            gap: 10px !important;
            min-height: 42px !important;
        }

        .sg-brand {
            min-width: 0 !important;
            gap: 9px !important;
        }

        .sg-brand::before {
            content: "GG";
            width: 34px;
            height: 34px;
            border-radius: 12px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            background: linear-gradient(135deg, #0f6ee6, #1a86ff);
            color: #ffffff;
            font-size: .72rem;
            font-weight: 900;
            letter-spacing: .02em;
            box-shadow: 0 10px 22px -14px rgba(26, 134, 255,.75);
        }

        .sg-brand-text {
            gap: 1px !important;
            min-width: 0 !important;
        }

        .sg-brand-text strong {
            font-size: .58rem !important;
            letter-spacing: .12em !important;
            line-height: 1 !important;
            color: rgba(255,255,255,.64) !important;
        }

        .sg-brand-text > span {
            font-size: .98rem !important;
            line-height: 1.05 !important;
            letter-spacing: -.01em !important;
            white-space: nowrap;
        }

        html[data-theme="light"] .sg-brand-text strong {
            color: #64748b !important;
        }

        .sg-nav-menu,
        .sg-nav-cta-btn {
            display: none !important;
        }

        .sg-nav-actions {
            gap: 8px !important;
            flex-shrink: 0 !important;
        }

        .sg-nav-search-toggle,
        .sg-nav-search-close,
        .sg-theme-btn,
        .sg-nav-burger {
            width: 40px !important;
            height: 40px !important;
            border-radius: 14px !important;
            background: #101010 !important;
            border-color: rgba(255,255,255,.12) !important;
            color: #ffffff !important;
            box-shadow: none !important;
        }

        html[data-theme="light"] .sg-nav-search-toggle,
        html[data-theme="light"] .sg-nav-search-close,
        html[data-theme="light"] .sg-theme-btn,
        html[data-theme="light"] .sg-nav-burger {
            background: #f6f9ff !important;
            border-color: #dde7f7 !important;
            color: #0f172a !important;
        }

        .sg-nav-search.is-open .sg-nav-search-form {
            height: 40px !important;
            border-radius: 14px !important;
            background: #101010 !important;
            border-color: rgba(255,255,255,.12) !important;
        }

        html[data-theme="light"] .sg-nav-search.is-open .sg-nav-search-form {
            background: #f6f9ff !important;
            border-color: #dde7f7 !important;
        }

        .sg-nav-search.is-open .sg-nav-search-input {
            color: #ffffff !important;
        }

        html[data-theme="light"] .sg-nav-search.is-open .sg-nav-search-input {
            color: #0f172a !important;
        }

        .sg-nav-search.is-open .sg-nav-search-icon {
            color: rgba(255,255,255,.72) !important;
        }

        html[data-theme="light"] .sg-nav-search.is-open .sg-nav-search-icon {
            color: #64748b !important;
        }

        .sg-nav-mobile {
            margin-top: 8px !important;
            padding: 10px !important;
            border: 1px solid var(--sg-mobile-line) !important;
            border-radius: 20px !important;
            background: var(--sg-mobile-surface) !important;
            box-shadow: 0 18px 34px -28px rgba(26, 134, 255,.8) !important;
        }

        .sg-nav-mobile-link {
            min-height: 44px !important;
            border-radius: 14px !important;
            background: var(--sg-mobile-surface-2) !important;
            font-size: .9rem !important;
        }

        .tg-main {
            width: 100% !important;
            max-width: 100% !important;
            padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(12px + var(--sg-bottom-nav-clearance, 64px)) max(14px, env(safe-area-inset-left, 0px)) !important;
            background:
                linear-gradient(180deg, rgba(26, 134, 255,.35) 0, rgba(26, 134, 255,.11) 88px, rgba(0,0,0,0) 210px),
                #000000 !important;
        }

        html[data-theme="light"] .tg-main {
            background:
                linear-gradient(180deg, rgba(26, 134, 255,.08) 0, rgba(26, 134, 255,0) 210px),
                #f5f8ff !important;
        }

        .sg-home-hero {
            gap: 12px !important;
            padding: 4px 0 0 !important;
        }

        .sg-home-hero .sg-hero-carousel {
            aspect-ratio: 16 / 9 !important;
            border-radius: 22px !important;
            border-color: var(--sg-mobile-line) !important;
            background: #050505 !important;
            box-shadow: 0 16px 34px -28px rgba(26, 134, 255,.85) !important;
        }

        html[data-theme="light"] .sg-home-hero .sg-hero-carousel {
            background: #ffffff !important;
            box-shadow: 0 16px 34px -28px rgba(15,23,42,.36) !important;
        }

        .sg-home-hero .sg-carousel-slide img {
            object-fit: cover !important;
        }

        .sg-home-hero .sg-carousel-slide--safe img {
            object-fit: contain !important;
        }

        .sg-carousel-arrow {
            width: 30px !important;
            height: 30px !important;
            background: rgba(0,0,0,.46) !important;
            border-color: rgba(255,255,255,.18) !important;
        }

        .sg-carousel-dots {
            bottom: 8px !important;
        }

        .sg-home-hero .sg-promo-banner {
            padding: 8px 2px 2px !important;
            text-align: left !important;
        }

        .sg-home-hero .sg-promo-banner-title {
            max-width: 20ch;
            margin-bottom: 7px !important;
            font-size: clamp(1.28rem, 7vw, 1.55rem) !important;
            line-height: 1.08 !important;
            letter-spacing: -.045em !important;
        }

        .sg-home-hero .sg-promo-banner-desc {
            font-size: .9rem !important;
            line-height: 1.55 !important;
            color: rgba(255,255,255,.76) !important;
        }

        html[data-theme="light"] .sg-home-hero .sg-promo-banner-desc {
            color: #475569 !important;
        }

        .sg-home-content {
            gap: 16px !important;
            padding-top: 8px !important;
        }

        .sg-tabs-wrap,
        .sg-home-content .sg-market-quick .sg-section,
        .sg-section-card {
            border-radius: 24px !important;
            border: 1px solid var(--sg-mobile-line) !important;
            background: var(--sg-mobile-surface) !important;
            box-shadow: 0 12px 28px -25px rgba(26, 134, 255,.85) !important;
        }

        .sg-tabs-wrap {
            padding: 15px 12px 11px !important;
            margin: 0 !important;
            overflow: hidden !important;
        }

        .sg-tabs-wrap .sg-section-head,
        .sg-market-quick .sg-section .sg-section-head {
            margin-bottom: 12px !important;
        }

        .sg-section-title {
            font-size: 1.12rem !important;
            line-height: 1.15 !important;
            letter-spacing: -.035em !important;
        }

        .sg-section-desc {
            font-size: .84rem !important;
            line-height: 1.48 !important;
            color: rgba(255,255,255,.68) !important;
        }

        html[data-theme="light"] .sg-section-desc {
            color: #64748b !important;
        }

        .sg-home-content .sg-section-desc {
            display: -webkit-box !important;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
        }

        .sg-tabs {
            gap: 8px !important;
            margin: 0 -12px !important;
            padding: 1px 12px 2px !important;
            scroll-padding-inline: 12px !important;
            scrollbar-width: none !important;
            -webkit-overflow-scrolling: touch;
        }

        .sg-tabs::-webkit-scrollbar {
            display: none !important;
        }

        .sg-tab {
            min-height: 42px !important;
            padding: 9px 13px !important;
            border-radius: 999px !important;
            gap: 7px !important;
            font-size: .82rem !important;
            line-height: 1 !important;
            box-shadow: none !important;
        }

        .sg-tab i {
            font-size: .98rem !important;
        }

        .sg-tab span {
            white-space: nowrap;
        }

        .sg-tab em {
            display: none !important;
        }

        .sg-search-section {
            position: sticky !important;
            top: calc(58px + env(safe-area-inset-top, 0px)) !important;
            z-index: 28 !important;
            margin: -2px -14px 0 !important;
            padding: 8px 14px 9px !important;
        }

        .sg-search-section::before {
            content: '' !important;
            position: absolute !important;
            inset: 0 !important;
            z-index: -1 !important;
            background: rgba(0,0,0,.96) !important;
            border-bottom: 1px solid rgba(255,255,255,.08) !important;
            pointer-events: none !important;
        }

        html[data-theme="light"] .sg-search-section::before {
            background: rgba(245,248,255,.97) !important;
            border-bottom-color: #e8eef9 !important;
        }

        .sg-hero-search-standalone {
            min-height: 46px !important;
            border-radius: 16px !important;
            padding: 5px 12px !important;
            border-color: var(--sg-mobile-line) !important;
            background: var(--sg-mobile-surface) !important;
            box-shadow: none !important;
        }

        html[data-theme="light"] .sg-hero-search-standalone {
            background: #ffffff !important;
            border-color: #dbeafe !important;
        }

        .sg-hero-search-standalone input {
            min-height: 34px !important;
            padding: 8px 2px !important;
            font-size: .9rem !important;
        }

        .sg-catalog-sections {
            gap: 16px !important;
            margin-bottom: 30px !important;
        }

        .sg-home-content .sg-market-quick .sg-section {
            padding: 15px !important;
        }

        .sg-section-pill {
            margin-bottom: 8px !important;
            padding: 5px 9px !important;
            border-radius: 999px !important;
            font-size: .64rem !important;
            line-height: 1 !important;
            letter-spacing: .045em !important;
        }

        .sg-product-grid,
        .sg-market-quick .tg-market-subgrid.sg-product-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 10px !important;
        }

        .sg-product-card,
        .sg-market-quick .sg-product-card {
            border-radius: 20px !important;
            border-color: var(--sg-mobile-line) !important;
            background: var(--sg-mobile-surface-2) !important;
            box-shadow: none !important;
            overflow: hidden !important;
            transform: none !important;
        }

        .sg-product-card:hover,
        .sg-market-quick .sg-product-card:hover {
            transform: none !important;
        }

        .sg-product-thumb,
        .sg-market-quick .sg-product-card .sg-product-thumb {
            aspect-ratio: 1 / .82 !important;
            padding: 8px !important;
            border-radius: 18px 18px 0 0 !important;
            background:
                linear-gradient(180deg, rgba(26, 134, 255,.20), rgba(255,255,255,.045)) !important;
        }

        html[data-theme="light"] .sg-product-thumb,
        html[data-theme="light"] .sg-market-quick .sg-product-card .sg-product-thumb {
            background: linear-gradient(180deg, #ffffff, #eef4ff) !important;
        }

        .sg-product-card .sg-product-thumb img,
        .sg-market-quick .sg-product-card .sg-product-thumb img {
            object-fit: contain !important;
            border-radius: 13px !important;
            transform: none !important;
        }

        .sg-product-body {
            padding: 11px 11px 13px !important;
            gap: 5px !important;
        }

        .sg-product-cat {
            font-size: .6rem !important;
            line-height: 1.05 !important;
            letter-spacing: .055em !important;
        }

        .sg-product-name {
            min-height: 2.34em !important;
            font-size: .8rem !important;
            line-height: 1.28 !important;
            letter-spacing: -.01em !important;
        }

        .sg-product-meta {
            align-self: flex-start;
            max-width: 100%;
            margin-top: auto !important;
            padding: 5px 8px !important;
            border-radius: 999px !important;
            background: rgba(26, 134, 255,.12) !important;
            font-size: .66rem !important;
            line-height: 1 !important;
            white-space: nowrap !important;
        }

        html:not([data-theme="light"]) .sg-product-meta {
            background: rgba(255,255,255,.08) !important;
        }

        .sg-benefits-grid {
            grid-template-columns: 1fr !important;
            gap: 10px !important;
        }

        .sg-benefit-card {
            border-radius: 20px !important;
            padding: 15px !important;
        }

        .tg-card-products .tg-search {
            position: sticky;
            top: calc(58px + env(safe-area-inset-top, 0px));
            z-index: 20;
            margin: 0 -2px 14px !important;
            padding: 8px 0 !important;
            background: var(--bg-body) !important;
        }

        .tg-card-products .tg-search input {
            min-height: 46px !important;
            border-radius: 16px !important;
            font-size: .92rem !important;
        }

        .tg-list {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 10px !important;
        }

        .tg-item {
            min-height: 158px !important;
            padding: 12px !important;
            border-radius: 20px !important;
            box-shadow: none !important;
        }

        .tg-item .i-left {
            flex-direction: column !important;
            gap: 9px !important;
        }

        .tg-item .i-thumb,
        .tg-item .i-dm {
            width: 44px !important;
            height: 44px !important;
            min-width: 44px !important;
            border-radius: 14px !important;
        }

        .tg-item .i-name {
            font-size: .84rem !important;
            line-height: 1.28 !important;
            -webkit-line-clamp: 2 !important;
        }

        .tg-item .i-meta {
            font-size: .68rem !important;
            line-height: 1.25 !important;
            -webkit-line-clamp: 2 !important;
        }

        .tg-item .i-price {
            align-self: flex-start !important;
            margin-top: 12px !important;
            font-size: .9rem !important;
            white-space: normal !important;
        }
    }

    @media (max-width: 380px) {
        .sg-product-grid,
        .sg-market-quick .tg-market-subgrid.sg-product-grid,
        .tg-list {
            gap: 10px !important;
        }

        .sg-product-body,
        .tg-item {
            padding: 10px !important;
        }

        .sg-product-name,
        .tg-item .i-name {
            font-size: .82rem !important;
        }
    }