:root {
            --warna_1: <?= $config->warna1; ?>;
            --warna_2: <?= $config->warna2; ?>;
            --warna_3: <?= $config->warna3; ?>;
            --warna_4: <?= $config->warna4; ?>;
        }

        *{ box-sizing: border-box; font-family: 'Inter', sans-serif; }
        body { background: #f3f4f6; -webkit-font-smoothing:antialiased; margin:0; }

        /* MAIN wrapper */
        .content {
            max-width: 1280px;
            margin: 0 auto;
            background: transparent;
            padding-bottom: 100px; /* space for mobile bottom nav */
        }

        /* Header */
        .header {
            position: fixed;
            top: 12px;
            left: 50%;
            transform: translateX(-50%);
            width: calc(100% - 32px);
            max-width: 420px;
            height: 64px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            padding: 10px 14px;
            border-radius: 14px;
            color: #fff;
            background: rgba(0,0,0,0.45);
            z-index: 50;
            backdrop-filter: blur(8px);
            box-shadow: 0 8px 30px rgba(16,24,40,0.06);
        }

        .header img { max-height:28px; }
        .header .title { font-size: 16px; font-weight:600; color: #fff; }

        /* content body spacing */
        .content-body { padding: 16px; margin-top: 110px; }

        /* PRODUCT grid - responsive using CSS grid */
        .product {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }
        .product .box{
            background:#fff;
            padding: 14px;
            border-radius: 10px;
            text-align:center;
            box-shadow: 0 8px 24px rgba(15,23,42,0.04);
            transition: transform .18s ease, box-shadow .18s ease;
            display:block;
            color:inherit;
            text-decoration:none;
            min-height: 150px;
        }
        .product .box:hover{ transform: translateY(-6px); box-shadow:0 16px 40px rgba(15,23,42,0.06); }
        .product .box img{ width:72px; height:72px; object-fit:cover; border-radius:8px; margin:6px auto 8px; }
        .product .box span{ display:block; font-size:12px; color:#6b7280; text-transform:uppercase; }
        .product .box p{ margin:6px 0 0; font-weight:600; font-size:14px; color:#111827; }

        /* carousel indicators */
        .carousel-indicators { margin-bottom:-1rem; }
        .carousel-indicators button { background:var(--warna_2); opacity:.5; width:12px; height:12px; border-radius:50%; border: none; }
        .carousel-indicators button.active { width:30px; border-radius:.5rem; opacity:1; }

        /* flash sale */
        .flash-sale-card{ border-radius:12px; overflow:hidden; background:linear-gradient(180deg,#11182705,#fff); }
        .flash-sale-card img{ width:100%; height:120px; object-fit:cover; }

        /* bottom menu (mobile) */
        .menu-bottom{
            position: fixed;
            bottom: 14px;
            left: 14px;
            right: 14px;
            max-width: 420px;
            margin: 0 auto;
            background: rgba(255,255,255,0.95);
            border-radius: 14px;
            padding: 6px 10px;
            box-shadow: 0 14px 40px rgba(2,6,23,0.07);
            z-index: 60;
            display:flex;
            justify-content:space-around;
            align-items:center;
            backdrop-filter: blur(6px);
        }
        .menu-bottom a{ text-decoration:none; color:#6b7280; font-size:13px; text-align:center; display:block; }
        .menu-bottom a.active{ color: var(--warna_2); }

        /* FAB / whatsapp */
        .containerFAB{ position: fixed; bottom: 110px; right: 18px; z-index: 70; }
        .areaFAB{ height:52px; width:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--warna_2); box-shadow: 0 12px 34px rgba(2,6,23,0.12); }
        .areaFAB a{ color:#fff; font-size:22px; }

        /* small screen tweaks */
        @media (max-width: 420px){
            .header{ max-width: 420px; left: 8px; right: 8px; transform:none; }
            .product{ grid-template-columns: repeat(2, 1fr); gap:10px; }
            .containerFAB{ right: 18px; bottom: 140px; }
        }

        /* desktop */
        @media (min-width: 768px){
            .header{
                position: relative;
                top: 22px;
                left: auto;
                right: auto;
                transform:none;
                max-width: 1200px;
                background: transparent;
                color: #111827;
                border-radius: 8px;
            }
            .content-body{ margin-top: 26px; padding: 24px; }
            .menu-bottom{ display:none; }
            .product{ grid-template-columns: repeat(4, 1fr); gap:20px; }
            .product .box img{ width:96px; height:96px; }
            .containerFAB{ right: 40px; bottom: 40px; }
        }

        @media (min-width: 1200px){
            .product{ grid-template-columns: repeat(5, 1fr); }
            .content{ max-width: 1280px; }
        }

        .lb{ border-top:6px solid var(--warna_1); margin-top:12px; }
        /* end global */