/* Dipindah dari shop/partials/sg-cohesion-styles.php (blok #3, id=sg-color-cohesion) */
    /* SHOP BAYAR GG — unified color tokens (appended last; wins cascade) */
    :root {
        --sg-brand: #1a86ff;
        --sg-brand-dark: #0046dd;
        --sg-brand-light: #3385ff;
        --sg-brand-muted: #6ea8ff;
        --sg-accent-end: #38bdf8;
        --sg-surface-page: #f2f6fc;
        --sg-surface-card: #ffffff;
        --sg-surface-subtle: #f5f8ff;
        --sg-surface-tint: #eef3ff;
        --sg-surface-elevated: #ffffff;
        --sg-border: #e2e9f5;
        --sg-border-muted: #d0dcf0;
        --sg-text-secondary: #5b6577;
        --sg-text-muted: #64748b;
        --sg-shadow-soft: 0 4px 20px -8px rgba(15, 30, 60, .10);
        --sg-shadow-brand: 0 8px 24px -10px rgba(26, 134, 255, .20);
    }

    html:not([data-theme="light"]) {
        --sg-surface-page: #060b14;
        --sg-surface-card: #0c1424;
        --sg-surface-subtle: #0a1220;
        --sg-surface-elevated: #101c30;
        --sg-surface-tint: rgba(26, 134, 255, .10);
        --sg-border: rgba(26, 134, 255, .16);
        --sg-border-muted: rgba(26, 134, 255, .26);
        --sg-text-secondary: rgba(226, 239, 255, .72);
        --sg-text-muted: rgba(203, 220, 239, .52);
        --sg-shadow-soft: 0 8px 28px -12px rgba(0, 0, 0, .42);
        --sg-shadow-brand: 0 12px 32px -14px rgba(26, 134, 255, .28);
    }

    /* ── Page canvas ── */
    html[data-theme="light"] body {
        background: var(--sg-surface-page) !important;
        background-image: none !important;
        color: #0f172a !important;
    }

    html:not([data-theme="light"]) body {
        background: var(--sg-surface-page) !important;
        background-image: none !important;
        color: #f1f6ff !important;
    }

    html:not([data-theme="light"]) .tg-main {
        background: linear-gradient(180deg, rgba(26, 134, 255, .07) 0, rgba(26, 134, 255, 0) 130px), var(--sg-surface-page) !important;
        background-color: var(--sg-surface-page) !important;
        background-image: linear-gradient(180deg, rgba(26, 134, 255, .07) 0, rgba(26, 134, 255, 0) 130px) !important;
    }

    html[data-theme="light"] .tg-main {
        background: transparent !important;
        background-image: none !important;
    }

    /* ── Navbar ── */
    html[data-theme="light"] .tg-nav.sg-nav,
    html[data-theme="light"] .sg-nav {
        background: rgba(255, 255, 255, .97) !important;
        border-bottom-color: var(--sg-border) !important;
        box-shadow: 0 1px 0 rgba(15, 23, 42, .04) !important;
    }

    html:not([data-theme="light"]) .tg-nav.sg-nav,
    html:not([data-theme="light"]) .sg-nav {
        background: rgba(6, 11, 20, .94) !important;
        border-bottom-color: var(--sg-border) !important;
        box-shadow: none !important;
    }

    html[data-theme="light"] .sg-nav-menu-link.is-active {
        background: var(--sg-surface-tint) !important;
        color: var(--sg-brand) !important;
    }

    html:not([data-theme="light"]) .sg-nav-menu-link.is-active {
        background: var(--sg-surface-tint) !important;
        color: #ffffff !important;
    }

    /* ── Hero carousel + intro ── */
    html[data-theme="light"] .sg-hero-carousel {
        background: var(--sg-surface-subtle) !important;
        border-color: var(--sg-border) !important;
        box-shadow: var(--sg-shadow-soft) !important;
    }

    html:not([data-theme="light"]) .sg-hero-carousel {
        background: var(--sg-surface-elevated) !important;
        border-color: var(--sg-border) !important;
        box-shadow: var(--sg-shadow-brand) !important;
    }

    html:not([data-theme="light"]) .sg-home-hero .sg-promo-banner-title {
        color: #f1f6ff !important;
    }

    html:not([data-theme="light"]) .sg-home-hero .sg-promo-banner-desc {
        color: var(--sg-text-secondary) !important;
    }

    /* ── Standalone search ── */
    html[data-theme="light"] .sg-hero-search-standalone {
        background: var(--sg-surface-card) !important;
        border-color: var(--sg-border) !important;
        box-shadow: var(--sg-shadow-soft) !important;
    }

    html:not([data-theme="light"]) .sg-hero-search-standalone {
        background: var(--sg-surface-elevated) !important;
        border-color: var(--sg-border-muted) !important;
        box-shadow: var(--sg-shadow-brand) !important;
    }

    html:not([data-theme="light"]) .sg-hero-search-standalone > i.bi-search {
        color: var(--sg-brand-muted) !important;
    }

    html[data-theme="light"] .sg-hero-search-standalone input::placeholder {
        color: var(--sg-text-muted) !important;
        opacity: 1 !important;
    }

    .sg-hero-search-standalone button {
        background: linear-gradient(135deg, var(--sg-brand-dark), var(--sg-brand)) !important;
        box-shadow: 0 8px 20px -10px rgba(26, 134, 255, .45) !important;
    }

    /* ── Kategori panel + catalog sections ── */
    html[data-theme="light"] .sg-tabs-wrap,
    html[data-theme="light"] .sg-market-quick .tg-market-section.sg-section {
        background: var(--sg-surface-card) !important;
        border: 1px solid var(--sg-border) !important;
        box-shadow: var(--sg-shadow-soft) !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, var(--sg-surface-subtle) 0%, var(--sg-surface-page) 100%) !important;
        border: 1px solid var(--sg-border) !important;
        box-shadow: var(--sg-shadow-brand) !important;
    }

    /* ── Category tabs ── */
    .sg-tab {
        background: var(--sg-surface-card) !important;
        border-color: var(--sg-border) !important;
        color: #1e293b !important;
        box-shadow: none !important;
    }

    html:not([data-theme="light"]) .sg-tab {
        background: var(--sg-surface-elevated) !important;
        border-color: var(--sg-border) !important;
        color: var(--sg-text-secondary) !important;
    }

    .sg-tab i { color: var(--sg-brand) !important; }
    .sg-tab em {
        background: var(--sg-surface-tint) !important;
        color: var(--sg-brand) !important;
    }

    html:not([data-theme="light"]) .sg-tab i { color: var(--sg-brand-muted) !important; }
    html:not([data-theme="light"]) .sg-tab em {
        background: rgba(255, 255, 255, .10) !important;
        color: var(--sg-brand-muted) !important;
    }

    .sg-tab:hover { border-color: var(--sg-border-muted) !important; }

    .sg-tab.is-active {
        background: linear-gradient(135deg, var(--sg-brand), var(--sg-brand-light)) !important;
        border-color: transparent !important;
        color: #ffffff !important;
        box-shadow: var(--sg-shadow-brand) !important;
    }

    .sg-tab.is-active i,
    .sg-tab.is-active em {
        color: #ffffff !important;
    }

    .sg-tab.is-active em {
        background: rgba(255, 255, 255, .20) !important;
    }

    /* ── Section typography + links ── */
    html[data-theme="light"] .sg-section-title { color: #0f172a !important; }
    html:not([data-theme="light"]) .sg-section-title { color: #f1f6ff !important; }
    .sg-section-desc { color: var(--sg-text-secondary) !important; }

    .sg-section-link {
        color: var(--sg-brand) !important;
    }

    .sg-section-link:hover {
        background: var(--sg-surface-tint) !important;
        color: var(--sg-brand-dark) !important;
    }

    html:not([data-theme="light"]) .sg-section-link {
        color: var(--sg-brand-muted) !important;
    }

    html:not([data-theme="light"]) .sg-section-link:hover {
        background: var(--sg-surface-tint) !important;
        color: #ffffff !important;
    }

    .sg-pill-blue {
        background: var(--sg-surface-tint) !important;
        color: var(--sg-brand) !important;
    }

    html:not([data-theme="light"]) .sg-pill-blue {
        background: rgba(26, 134, 255, .14) !important;
        color: var(--sg-brand-muted) !important;
    }

    /* ── Product cards ── */
    html[data-theme="light"] .sg-product-card {
        background: var(--sg-surface-card) !important;
        border-color: var(--sg-border) !important;
        box-shadow: none !important;
    }

    html[data-theme="light"] .sg-product-card:hover {
        border-color: var(--sg-border-muted) !important;
        box-shadow: var(--sg-shadow-brand) !important;
    }

    html:not([data-theme="light"]) .sg-product-card {
        background: var(--sg-surface-elevated) !important;
        border-color: var(--sg-border) !important;
        box-shadow: none !important;
    }

    html:not([data-theme="light"]) .sg-product-card:hover {
        background: #141f34 !important;
        border-color: var(--sg-border-muted) !important;
    }

    html[data-theme="light"] .sg-product-thumb {
        background: linear-gradient(135deg, var(--sg-surface-tint) 0%, var(--sg-surface-subtle) 100%) !important;
    }

    html:not([data-theme="light"]) .sg-product-thumb {
        background: linear-gradient(135deg, rgba(26, 134, 255, .12) 0%, rgba(26, 134, 255, .04) 100%) !important;
    }

    html[data-theme="light"] .sg-product-cat,
    html[data-theme="light"] .sg-product-meta strong { color: var(--sg-brand) !important; }

    html:not([data-theme="light"]) .sg-product-cat { color: var(--sg-brand-muted) !important; opacity: 1 !important; }
    html:not([data-theme="light"]) .sg-product-name { color: #f1f6ff !important; }
    html:not([data-theme="light"]) .sg-product-meta { color: var(--sg-text-muted) !important; opacity: 1 !important; }
    html:not([data-theme="light"]) .sg-product-meta strong { color: var(--sg-brand-muted) !important; opacity: 1 !important; }

    .sg-product-meta::before {
        background: var(--sg-brand-light) !important;
        box-shadow: 0 0 0 3px rgba(26, 134, 255, .14) !important;
    }

    /* Desktop polish product cards — align with tokens */
    @media (min-width: 761px) {
        html[data-theme="light"] .sg-market-quick .sg-product-card {
            background: var(--sg-surface-subtle) !important;
            border-color: var(--sg-border) !important;
            box-shadow: none !important;
        }

        html:not([data-theme="light"]) .sg-market-quick .sg-product-card {
            background: var(--sg-surface-elevated) !important;
            border-color: var(--sg-border) !important;
        }

        html[data-theme="light"] .sg-market-quick .sg-product-card:hover {
            border-color: var(--sg-border-muted) !important;
            box-shadow: var(--sg-shadow-brand) !important;
        }

        html:not([data-theme="light"]) .sg-market-quick .sg-product-card:hover {
            background: #141f34 !important;
            border-color: var(--sg-border-muted) !important;
        }
    }

    /* Mobile cohesion product cards — align with tokens */
    @media (max-width: 760px) {
        html[data-theme="light"] .sg-product-card,
        html[data-theme="light"] .sg-market-quick .sg-product-card {
            background: var(--sg-surface-subtle) !important;
            border-color: var(--sg-border) !important;
        }

        html:not([data-theme="light"]) .sg-product-card,
        html:not([data-theme="light"]) .sg-market-quick .sg-product-card {
            background: var(--sg-surface-elevated) !important;
            border-color: var(--sg-border) !important;
        }

        html:not([data-theme="light"]) .sg-product-meta {
            background: var(--sg-surface-tint) !important;
        }
    }

    /* ── Benefits row ── */
    html[data-theme="light"] .sg-benefit-card {
        background: var(--sg-surface-card) !important;
        border-color: var(--sg-border) !important;
        box-shadow: var(--sg-shadow-soft) !important;
    }

    html:not([data-theme="light"]) .sg-benefit-card {
        background: var(--sg-surface-elevated) !important;
        border-color: var(--sg-border) !important;
        box-shadow: none !important;
    }

    html[data-theme="light"] .sg-benefit-card strong { color: #0f172a !important; }
    html:not([data-theme="light"]) .sg-benefit-card strong { color: #f1f6ff !important; }
    html[data-theme="light"] .sg-benefit-card p { color: var(--sg-text-secondary) !important; }
    html:not([data-theme="light"]) .sg-benefit-card p { color: var(--sg-text-muted) !important; }

    .sg-benefit-icon-blue {
        background: linear-gradient(135deg, var(--sg-brand), var(--sg-brand-light)) !important;
    }

    /* ── Footer ── */
    html[data-theme="light"] .sg-footer,
    html[data-theme="light"] .tg-footer {
        background: var(--sg-surface-card) !important;
        border-top-color: var(--sg-border) !important;
        color: var(--sg-text-secondary) !important;
    }

    html:not([data-theme="light"]) .sg-footer,
    html:not([data-theme="light"]) .tg-footer {
        background: var(--sg-surface-subtle) !important;
        border-top-color: var(--sg-border) !important;
        color: var(--sg-text-muted) !important;
    }

    html[data-theme="light"] .sg-footer h5,
    html[data-theme="light"] .tg-footer h5 { color: #0f172a !important; }

    html:not([data-theme="light"]) .sg-footer h5,
    html:not([data-theme="light"]) .tg-footer h5 { color: #f1f6ff !important; }

    html[data-theme="light"] .sg-footer-list a,
    html[data-theme="light"] .tg-footer a { color: var(--sg-text-muted) !important; }

    html[data-theme="light"] .sg-footer-list a:hover,
    html[data-theme="light"] .tg-footer a:hover { color: #0f172a !important; }

    html:not([data-theme="light"]) .sg-footer-list a,
    html:not([data-theme="light"]) .tg-footer a { color: var(--sg-text-muted) !important; }

    html:not([data-theme="light"]) .sg-footer-list a:hover,
    html:not([data-theme="light"]) .tg-footer a:hover { color: #ffffff !important; }

    html[data-theme="light"] .sg-footer-list a i,
    html[data-theme="light"] .sg-footer-cat-link i { color: var(--sg-brand) !important; }

    html:not([data-theme="light"]) .sg-footer-list a i,
    html:not([data-theme="light"]) .sg-footer-cat-link i { color: var(--sg-brand-muted) !important; }

    html:not([data-theme="light"]) .sg-footer-badges span {
        background: var(--sg-surface-tint) !important;
        border-color: var(--sg-border) !important;
        color: var(--sg-text-secondary) !important;
    }

    html:not([data-theme="light"]) .sg-footer-badges span i { color: var(--sg-brand-muted) !important; }

    html:not([data-theme="light"]) .sg-footer hr,
    html:not([data-theme="light"]) .tg-footer hr {
        border-top-color: var(--sg-border) !important;
    }