/* Dipindah dari shop/index.php (blok #4, id=sg-layout-polish) */
    /* Final homepage polish: consistent type scale, spacing, and catalog rhythm */
    :root {
        --sg-page-max: 1120px;
        --sg-gap-xs: 8px;
        --sg-gap-sm: 12px;
        --sg-gap-md: 16px;
        --sg-gap-lg: 24px;
        --sg-gap-xl: 32px;
    }

    .tg-main {
        max-width: var(--sg-page-max) !important;
        padding-inline: 16px !important;
        padding-top: 8px !important;
        padding-bottom: 48px !important;
        margin-inline: auto !important;
    }

    .sg-nav-container,
    .sg-hero-shell,
    .sg-footer-inner {
        max-width: var(--sg-page-max) !important;
    }

    .sg-nav {
        padding: 10px 0 !important;
    }
    .sg-brand-logo {
        width: 36px !important;
        height: 36px !important;
        border-radius: 12px !important;
        font-size: 1rem !important;
    }
    .sg-brand-text strong {
        font-size: .68rem !important;
        letter-spacing: 1.6px !important;
    }
    .sg-brand-text > span {
        font-size: .95rem !important;
        letter-spacing: .4px !important;
    }
    .sg-nav-menu-link {
        padding: 8px 11px !important;
        font-size: .82rem !important;
    }
    .sg-theme-btn,
    .sg-nav-burger {
        width: 38px !important;
        height: 38px !important;
        border-radius: 12px !important;
    }

    .sg-hero {
        padding: 40px 16px 72px !important;
    }
    [data-theme="light"] .sg-hero {
        padding: 40px 16px 72px !important;
    }
    .sg-hero-shell {
        gap: 24px !important;
    }
    .sg-hero-title {
        font-size: clamp(1.72rem, 3.2vw + .35rem, 2.65rem) !important;
        line-height: 1.08 !important;
        margin-bottom: 12px !important;
        max-width: 620px !important;
    }
    .sg-hero-sub {
        font-size: .96rem !important;
        line-height: 1.58 !important;
        margin-bottom: 18px !important;
        max-width: 560px !important;
    }
    .sg-hero-badge {
        margin-bottom: 14px !important;
        padding: 6px 12px !important;
        font-size: .72rem !important;
    }
    .sg-hero-search {
        max-width: 560px !important;
        border-radius: 16px !important;
        padding: 6px 7px 6px 14px !important;
    }
    .sg-hero-search input {
        padding: 12px 4px !important;
        font-size: .9rem !important;
    }
    .sg-hero-search button {
        padding: 10px 14px !important;
        border-radius: 12px !important;
        font-size: .84rem !important;
    }
    .sg-hero-badges {
        margin-top: 14px !important;
        gap: 8px !important;
    }
    .sg-hero-badges span {
        padding: 7px 10px !important;
        font-size: .72rem !important;
    }
    .sg-hero-promo {
        border-radius: 20px !important;
        padding: 18px !important;
        min-height: 216px !important;
    }
    .sg-promo-title {
        font-size: 1.05rem !important;
    }
    .sg-promo-desc {
        font-size: .8rem !important;
    }

    .sg-promo-banner {
        margin: 22px 0 22px !important;
        padding: 28px 24px !important;
        border-radius: 20px !important;
    }
    .sg-promo-banner-title {
        font-size: clamp(1.22rem, 2vw + .25rem, 1.72rem) !important;
        line-height: 1.18 !important;
        margin-bottom: 8px !important;
    }
    .sg-promo-banner-desc {
        font-size: .88rem !important;
        line-height: 1.55 !important;
        margin-bottom: 18px !important;
        max-width: 520px !important;
    }
    .sg-promo-banner-pill,
    .sg-btn {
        font-size: .78rem !important;
    }
    .sg-btn {
        padding: 10px 14px !important;
        border-radius: 12px !important;
    }

    .sg-tabs-wrap {
        margin: 6px 0 20px !important;
    }
    .sg-tabs {
        gap: 8px !important;
        padding: 2px 2px 12px !important;
    }
    .sg-tab {
        padding: 9px 12px !important;
        border-radius: 13px !important;
        font-size: .78rem !important;
        gap: 8px !important;
    }
    .sg-tab i {
        font-size: .95rem !important;
    }
    .sg-tab em {
        padding: 3px 8px !important;
        font-size: .6rem !important;
    }

    .sg-catalog-sections {
        gap: 28px !important;
        margin-bottom: 40px !important;
    }
    .sg-section-head {
        align-items: center !important;
        gap: 12px !important;
        margin-bottom: 14px !important;
    }
    .sg-section-pill {
        padding: 4px 9px !important;
        font-size: .64rem !important;
        margin-bottom: 7px !important;
    }
    .sg-section-title {
        font-size: clamp(1.05rem, 1vw + .5rem, 1.28rem) !important;
        line-height: 1.22 !important;
        margin-bottom: 4px !important;
        letter-spacing: -.15px !important;
    }
    .sg-section-desc {
        font-size: .78rem !important;
        line-height: 1.48 !important;
        max-width: 520px !important;
    }
    .sg-section-link {
        padding: 6px 8px !important;
        font-size: .76rem !important;
    }

    .sg-product-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }
    @media (min-width: 640px) {
        .sg-product-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
    }
    @media (min-width: 900px) {
        .sg-product-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            gap: 14px !important;
        }
    }
    @media (min-width: 1180px) {
        .sg-product-grid {
            grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
            gap: 16px !important;
        }
    }

    .sg-product-card {
        border-radius: 16px !important;
        border-color: rgba(148, 163, 184, .16) !important;
        box-shadow: 0 8px 18px -16px rgba(15, 30, 60, .18) !important;
    }
    .sg-product-thumb {
        aspect-ratio: 1 / 1 !important;
        background: linear-gradient(135deg, rgba(10, 76, 255, .12), rgba(56, 212, 255, .10)) !important;
    }
    .sg-product-card .sg-product-thumb img {
        object-fit: cover !important;
        object-position: center !important;
    }
    .sg-product-body {
        padding: 11px 12px 12px !important;
        gap: 4px !important;
    }
    .sg-product-cat {
        font-size: .56rem !important;
        letter-spacing: .5px !important;
        opacity: .9;
    }
    .sg-product-name {
        font-size: .84rem !important;
        line-height: 1.28 !important;
        min-height: 2.15em !important;
    }
    .sg-product-meta {
        margin-top: 4px !important;
        font-size: .66rem !important;
        line-height: 1.2 !important;
    }
    .sg-product-meta strong {
        font-size: .7rem !important;
    }
    .sg-product-meta::before {
        width: 5px !important;
        height: 5px !important;
        box-shadow: 0 0 0 3px rgba(34,197,94,.14) !important;
    }

    .sg-benefits-grid {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        gap: 12px !important;
    }
    .sg-benefit-card {
        padding: 18px !important;
        border-radius: 16px !important;
    }
    .sg-benefit-icon {
        width: 42px !important;
        height: 42px !important;
        border-radius: 12px !important;
    }
    .sg-benefit-card strong {
        font-size: .9rem !important;
    }
    .sg-benefit-card p {
        font-size: .78rem !important;
        line-height: 1.48 !important;
    }

    .sg-section-card {
        padding: 22px !important;
        border-radius: 18px !important;
    }
    .sg-track-input {
        padding-block: 12px !important;
        font-size: .88rem !important;
    }
    .sg-track-btn {
        min-width: 118px !important;
        padding-inline: 16px !important;
        font-size: .86rem !important;
    }
    .sg-recent-list .tg-rx {
        padding: 13px 14px !important;
        gap: 12px !important;
        border-radius: 14px !important;
    }
    .sg-recent-list .tg-rx-prod,
    .sg-recent-list .tg-rx-price {
        font-size: .84rem !important;
    }
    .sg-recent-list .tg-rx-meta {
        font-size: .7rem !important;
    }

    @media (max-width: 720px) {
        .tg-main {
            padding-inline: 14px !important;
        }
        .sg-nav-container {
            padding-inline: 14px !important;
        }
        .sg-hero {
            padding: 28px 14px 56px !important;
        }
        [data-theme="light"] .sg-hero {
            padding: 28px 14px 56px !important;
        }
        .sg-hero-title {
            font-size: 1.55rem !important;
        }
        .sg-hero-sub {
            font-size: .86rem !important;
        }
        .sg-hero-search {
            border-radius: 14px !important;
            padding-left: 12px !important;
        }
        .sg-hero-search input {
            font-size: .82rem !important;
        }
        .sg-promo-banner {
            padding: 20px 16px !important;
            border-radius: 18px !important;
        }
        .sg-promo-banner-title {
            font-size: 1.18rem !important;
        }
        .sg-promo-banner-desc {
            font-size: .8rem !important;
        }
        .sg-section-head {
            align-items: flex-start !important;
            margin-bottom: 12px !important;
        }
        .sg-section-title {
            font-size: .98rem !important;
        }
        .sg-section-desc {
            font-size: .74rem !important;
        }
        .sg-product-grid {
            gap: 12px !important;
        }
        .sg-product-body {
            padding: 9px 10px 10px !important;
        }
        .sg-product-name {
            font-size: .78rem !important;
        }
        .sg-product-cat {
            font-size: .52rem !important;
        }
        .sg-product-meta {
            font-size: .62rem !important;
        }
        .sg-product-meta strong {
            font-size: .66rem !important;
        }
    }

    /* Ensure old market-grid selectors cannot stretch catalog cards unevenly */
    .sg-market-quick .tg-market-subgrid.sg-product-grid {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
    @media (min-width: 640px) {
        .sg-market-quick .tg-market-subgrid.sg-product-grid {
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        }
    }
    @media (min-width: 900px) {
        .sg-market-quick .tg-market-subgrid.sg-product-grid {
            grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
            gap: 14px !important;
        }
    }
    @media (min-width: 1180px) {
        .sg-market-quick .tg-market-subgrid.sg-product-grid {
            grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
            gap: 16px !important;
        }
    }

    /* Catalog sections — header tanpa kartu penuh, grid terpisah di bawah */
    .sg-catalog-sections {
        gap: 24px !important;
    }
    .sg-market-quick .sg-section,
    .sg-market-quick .tg-market-section {
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    .sg-market-quick .sg-section .sg-section-head {
        margin-bottom: 14px !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
    /* Product images — thumb area with soft background */
    .sg-market-quick .sg-product-card .sg-product-thumb {
        padding: 10px !important;
        border-radius: 12px 12px 0 0 !important;
    }
    html:not([data-theme="light"]) .sg-market-quick .sg-product-card .sg-product-thumb {
        background:
            radial-gradient(120% 80% at 50% 0%, rgba(26, 134, 255, .14), transparent 70%),
            linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)) !important;
    }
    html[data-theme="light"] .sg-market-quick .sg-product-card .sg-product-thumb {
        background:
            radial-gradient(120% 80% at 50% 0%, rgba(26, 134, 255, .08), transparent 70%),
            linear-gradient(180deg, #ffffff, #eef4ff) !important;
    }
    .sg-market-quick .sg-product-card .sg-product-thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        object-position: center center !important;
        border-radius: 14px !important;
        background: transparent !important;
    }
    .sg-market-quick .sg-product-card:hover .sg-product-thumb img {
        transform: scale(1.03) !important;
    }
    @media (max-width: 720px) {
        .sg-catalog-sections {
            gap: 18px !important;
        }
        .sg-market-quick .sg-section .sg-section-head {
            margin-bottom: 12px !important;
        }
        .sg-market-quick .tg-market-subgrid.sg-product-grid {
            gap: 10px !important;
        }
        .sg-market-quick .sg-product-card .sg-product-thumb {
            padding: 8px !important;
        }
    }

    /* Premium motion layer */
    @keyframes sgFadeUp {
        from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px); }
        to { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
    }
    @keyframes sgPopIn {
        from { opacity: 0; transform: translate3d(0, 14px, 0) scale(.98); }
        to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
    }
    @keyframes sgFloatSoft {
        0%, 100% { transform: translate3d(0, 0, 0); }
        50% { transform: translate3d(0, -8px, 0); }
    }
    @keyframes sgGlowPulse {
        0%, 100% { box-shadow: 0 0 0 0 rgba(56,212,255,.18), 0 10px 26px -18px rgba(10,76,255,.55); }
        50% { box-shadow: 0 0 0 8px rgba(56,212,255,0), 0 16px 34px -20px rgba(10,76,255,.7); }
    }
    @keyframes sgShine {
        from { transform: translateX(-120%) skewX(-18deg); }
        to { transform: translateX(220%) skewX(-18deg); }
    }

    .sg-hero-badge,
    .sg-hero-title,
    .sg-hero-sub,
    .sg-hero-search,
    .sg-hero-badges {
        animation: sgFadeUp .62s cubic-bezier(.2,.8,.2,1) both;
    }
    .sg-hero-title { animation-delay: .05s; }
    .sg-hero-sub { animation-delay: .1s; }
    .sg-hero-search { animation-delay: .15s; }
    .sg-hero-badges { animation-delay: .2s; }
    .sg-hero-promo,
    .sg-promo-tag-2 {
        animation: sgFloatSoft 5.5s ease-in-out infinite;
    }

    .sg-hero-search button,
    .sg-btn-primary,
    .sg-nav-cta-btn,
    .sg-track-btn {
        position: relative;
        overflow: hidden;
    }
    .sg-hero-search button::after,
    .sg-btn-primary::after,
    .sg-nav-cta-btn::after,
    .sg-track-btn::after {
        content: '';
        position: absolute;
        inset: -30% auto -30% -45%;
        width: 42%;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
        animation: sgShine 3.8s ease-in-out infinite;
        pointer-events: none;
    }
    .sg-tab.is-active {
        animation: sgGlowPulse 2.8s ease-in-out infinite;
    }

    .sg-reveal {
        opacity: 0;
        transform: translate3d(0, 20px, 0);
        filter: blur(5px);
        transition:
            opacity .58s cubic-bezier(.2,.8,.2,1),
            transform .58s cubic-bezier(.2,.8,.2,1),
            filter .58s cubic-bezier(.2,.8,.2,1);
        transition-delay: var(--sg-delay, 0ms);
    }
    .sg-reveal.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0);
        filter: blur(0);
    }
    .sg-card-anim {
        opacity: 0;
        transform: translate3d(0, 12px, 0) scale(.985);
    }
    .sg-card-anim.is-shimmering {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
        pointer-events: none;
        overflow: hidden;
    }
    .sg-card-anim.is-shimmering > * {
        opacity: 0 !important;
    }
    .sg-card-anim.is-shimmering::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 20;
        border-radius: inherit;
        background:
            linear-gradient(100deg, transparent 28%, rgba(255,255,255,.72) 48%, transparent 68%) -140% 0 / 70% 100% no-repeat,
            linear-gradient(135deg, rgba(226,235,249,.9), rgba(241,246,255,.96)) 12px 12px / calc(100% - 24px) 52% no-repeat,
            linear-gradient(135deg, rgba(226,235,249,.82), rgba(241,246,255,.88)) 12px calc(56% + 18px) / 48% 10px no-repeat,
            linear-gradient(135deg, rgba(226,235,249,.72), rgba(241,246,255,.82)) 12px calc(56% + 40px) / 72% 12px no-repeat,
            linear-gradient(135deg, rgba(226,235,249,.68), rgba(241,246,255,.78)) 12px calc(100% - 28px) / 40% 10px no-repeat,
            linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.96));
        animation: sgSkeletonCard 1.08s ease-in-out infinite;
    }
    .sg-benefit-card.sg-card-anim.is-shimmering::after {
        animation-name: sgSkeletonBenefit;
        background:
            linear-gradient(100deg, transparent 28%, rgba(255,255,255,.72) 48%, transparent 68%) -140% 0 / 70% 100% no-repeat,
            radial-gradient(circle, rgba(226,235,249,.9) 0 55%, transparent 57%) 18px 18px / 52px 52px no-repeat,
            linear-gradient(135deg, rgba(226,235,249,.82), rgba(241,246,255,.88)) 18px 88px / 54% 12px no-repeat,
            linear-gradient(135deg, rgba(226,235,249,.72), rgba(241,246,255,.82)) 18px 114px / 78% 10px no-repeat,
            linear-gradient(135deg, rgba(226,235,249,.68), rgba(241,246,255,.78)) 18px 136px / 62% 10px no-repeat,
            linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,251,255,.96));
    }
    @keyframes sgSkeletonCard {
        to {
            background-position:
                220% 0,
                12px 12px,
                12px calc(56% + 18px),
                12px calc(56% + 40px),
                12px calc(100% - 28px),
                0 0;
        }
    }
    @keyframes sgSkeletonBenefit {
        to {
            background-position:
                220% 0,
                18px 18px,
                18px 88px,
                18px 114px,
                18px 136px,
                0 0;
        }
    }
    [data-theme="dark"] .sg-card-anim.is-shimmering::after {
        background:
            linear-gradient(100deg, transparent 28%, rgba(148,197,255,.24) 48%, transparent 68%) -140% 0 / 70% 100% no-repeat,
            linear-gradient(135deg, rgba(30,48,78,.9), rgba(17,31,53,.96)) 12px 12px / calc(100% - 24px) 52% no-repeat,
            linear-gradient(135deg, rgba(47,70,108,.82), rgba(30,48,78,.88)) 12px calc(56% + 18px) / 48% 10px no-repeat,
            linear-gradient(135deg, rgba(47,70,108,.72), rgba(30,48,78,.82)) 12px calc(56% + 40px) / 72% 12px no-repeat,
            linear-gradient(135deg, rgba(47,70,108,.68), rgba(30,48,78,.78)) 12px calc(100% - 28px) / 40% 10px no-repeat,
            linear-gradient(180deg, rgba(13,24,42,.96), rgba(8,16,30,.96));
    }
    [data-theme="dark"] .sg-benefit-card.sg-card-anim.is-shimmering::after {
        animation-name: sgSkeletonBenefit;
        background:
            linear-gradient(100deg, transparent 28%, rgba(148,197,255,.24) 48%, transparent 68%) -140% 0 / 70% 100% no-repeat,
            radial-gradient(circle, rgba(47,70,108,.9) 0 55%, transparent 57%) 18px 18px / 52px 52px no-repeat,
            linear-gradient(135deg, rgba(47,70,108,.82), rgba(30,48,78,.88)) 18px 88px / 54% 12px no-repeat,
            linear-gradient(135deg, rgba(47,70,108,.72), rgba(30,48,78,.82)) 18px 114px / 78% 10px no-repeat,
            linear-gradient(135deg, rgba(47,70,108,.68), rgba(30,48,78,.78)) 18px 136px / 62% 10px no-repeat,
            linear-gradient(180deg, rgba(13,24,42,.96), rgba(8,16,30,.96));
    }
    .sg-card-anim.is-visible {
        animation: sgPopIn .46s cubic-bezier(.2,.8,.2,1) both;
        animation-delay: calc(var(--sg-i, 0) * 38ms);
    }
    .sg-product-card,
    .sg-benefit-card,
    .sg-tab,
    .sg-section-link {
        will-change: transform;
    }
    .sg-product-card:hover {
        transform: translateY(-4px) scale(1.01) !important;
    }
    .sg-benefit-card:hover {
        transform: translateY(-3px) !important;
    }

    /* JavaScript-powered premium effects */
    .sg-scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 100%;
        height: 3px;
        pointer-events: none;
        transform-origin: left center;
        transform: scaleX(0);
        background: linear-gradient(90deg, #38d4ff, #1f8cff, #7c3aed);
        box-shadow: 0 0 18px rgba(56,212,255,.55);
    }
    .sg-particles {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        opacity: .48;
        pointer-events: none;
        mix-blend-mode: screen;
    }
    .sg-spotlight {
        position: relative;
        isolation: isolate;
    }
    .sg-spotlight::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        background: radial-gradient(
            260px circle at var(--sg-x, 50%) var(--sg-y, 50%),
            rgba(56,212,255,.16),
            transparent 42%
        );
    }
    .sg-spotlight:hover::before {
        opacity: 1;
    }
    .sg-spotlight > * {
        position: relative;
        z-index: 1;
    }
    .sg-ripple {
        position: absolute;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0);
        background: rgba(255,255,255,.58);
        animation: sgRipple .62s ease-out forwards;
        mix-blend-mode: screen;
    }
    @keyframes sgRipple {
        to {
            opacity: 0;
            transform: translate(-50%, -50%) scale(18);
        }
    }
    .sg-magnetic {
        transform: translate3d(var(--sg-mx, 0), var(--sg-my, 0), 0);
        transition: transform .18s ease;
    }
    .sg-product-card.sg-tilting,
    .sg-benefit-card.sg-tilting {
        transition: transform .08s ease, box-shadow .2s ease !important;
        transform:
            perspective(900px)
            rotateX(var(--sg-rx, 0deg))
            rotateY(var(--sg-ry, 0deg))
            translateY(-4px)
            scale(1.012) !important;
    }
    .sg-product-card.sg-tilting {
        box-shadow: 0 24px 46px -22px rgba(10,76,255,.38) !important;
    }
    .sg-counting {
        transition: color .2s ease, text-shadow .2s ease;
    }
    .sg-counting.is-counting {
        color: #38d4ff !important;
        text-shadow: 0 0 16px rgba(56,212,255,.35);
    }

    @media (prefers-reduced-motion: reduce) {
        .sg-hero-badge,
        .sg-hero-title,
        .sg-hero-sub,
        .sg-hero-search,
        .sg-hero-badges,
        .sg-hero-promo,
        .sg-promo-tag-2,
        .sg-tab.is-active,
        .sg-card-anim.is-visible {
            animation: none !important;
        }
        .sg-reveal,
        .sg-card-anim {
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
            transition: none !important;
        }
        .sg-card-anim.is-shimmering::after {
            display: none !important;
        }
        .sg-hero-search button::after,
        .sg-btn-primary::after,
        .sg-nav-cta-btn::after,
        .sg-track-btn::after,
        .sg-spotlight::before {
            display: none !important;
        }
        .sg-scroll-progress,
        .sg-particles {
            display: none !important;
        }
    }