@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('https://cdn-giga-1437099728.cos.ap-jakarta.myqcloud.com/toco-cdn-custom/fonts/mulish-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Mulish';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('https://cdn-giga-1437099728.cos.ap-jakarta.myqcloud.com/toco-cdn-custom/fonts/mulish-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --color-primary-5: 255, 253, 242;
    --color-primary-10: 255, 251, 229;
    --color-primary-20: 255, 238, 153;
    --color-primary-40: 255, 225, 77;
    --color-primary-60: 255, 212, 0;
    --color-primary-70: 191, 159, 0;
    --color-primary-80: 115, 95, 0;
    --color-primary-100: 76, 64, 0;
    --color-secondary-5: 243, 245, 249;
    --color-secondary-10: 231, 235, 244;
    --color-secondary-20: 157, 175, 210;
    --color-secondary-40: 84, 115, 176;
    --color-secondary-60: 11, 55, 142;
    --color-secondary-80: 8, 39, 99;
    --color-secondary-100: 4, 22, 57;
    --color-accent: 0, 0, 0;
    --color-orange: 244, 150, 23;
    --font-mulish: 'Mulish', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html,
body,
main,
#__next,
.font-mulish {
    font-family: var(--font-mulish) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

        #__next,
        main {
            display: block !important;
            visibility: visible !important;
            opacity: 1 !important;
            min-height: auto !important;
        }

        .pdp-breadcrumb ol {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .pdp-breadcrumb .breadcrumb-sep {
            color: rgb(var(--color-secondary-20));
            user-select: none;
            flex-shrink: 0;
        }

        @media (min-width: 768px) {
            #static-pdp .pdp-inner {
                display: grid !important;
                grid-template-columns: minmax(0, 480px) minmax(0, 1fr) !important;
                column-gap: 3rem !important;
                row-gap: 1.25rem !important;
                padding: 24px 40px !important;
                max-width: 1240px !important;
                margin-left: auto !important;
                margin-right: auto !important;
                align-items: start !important;
            }

            #static-pdp .pdp-gallery,
            #static-pdp .pdp-col-left {
                grid-column: 1 !important;
            }

            #static-pdp .pdp-gallery {
                grid-row: 1 !important;
                width: 100% !important;
                max-width: 480px !important;
                align-self: start !important;
            }

            #static-pdp .pdp-seller-wrap {
                grid-row: 2 !important;
                align-self: start !important;
            }

            #static-pdp .pdp-detail {
                grid-column: 2 !important;
                grid-row: 1 !important;
                align-self: start !important;
            }

            #static-pdp .pdp-purchase,
            #static-pdp .pdp-trust-banner,
            #static-pdp .pdp-col-right {
                grid-column: 2 !important;
                align-self: start !important;
            }

            #static-pdp .pdp-gallery .keen-slider {
                position: relative !important;
                aspect-ratio: 1 / 1 !important;
            }

            #static-pdp .pdp-gallery .keen-slider__slide {
                min-width: 100% !important;
                max-width: 100% !important;
                transform: none !important;
                position: relative !important;
            }

            #static-pdp .pdp-gallery .absolute.aspect-square {
                position: relative !important;
            }

            #static-pdp .pdp-detail,
            #static-pdp .pdp-col-right,
            #static-pdp .pdp-purchase,
            #static-pdp .pdp-trust-banner,
            #static-pdp .pdp-inner>div:not(.pdp-gallery):not(.pdp-col-left):not(.pdp-full):not(.pdp-detail):not(.pdp-purchase):not(.pdp-trust-banner) {
                grid-column: 2 !important;
            }

            #static-pdp .pdp-full {
                grid-column: 1 / -1 !important;
            }

            #static-pdp .pdp-empty {
                display: none !important;
            }

            main .hidden.md\:block {
                display: block !important;
            }

            main .hidden.md\:flex {
                display: flex !important;
            }

            main .md\:hidden {
                display: none !important;
            }

            main .fixed.bottom-0.sm\:hidden {
                display: none !important;
            }

            .relative.hidden.md\:block {
                display: block !important;
            }

            .relative.md\:hidden {
                display: none !important;
            }

            .pdp-badge-adult {
                display: flex !important;
            }

            .pdp-purchase {
                border: 1px solid rgb(var(--color-secondary-10));
                border-radius: 12px;
                padding: 16px;
                background: #fff;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
            }

            .pdp-purchase-actions {
                display: flex !important;
            }

            .pdp-trust-banner {
                flex-direction: column !important;
                align-items: flex-start !important;
                gap: 8px !important;
            }
        }

        .pdp-tab-panel {
            display: none;
        }

        .pdp-tab-panel.active {
            display: flex;
        }

        .pdp-tab-btn {
            cursor: pointer;
        }

        .pdp-tab-btn.active {
            border-bottom: 4px solid rgb(var(--color-primary-60)) !important;
            font-weight: 600 !important;
        }

        .pdp-tab-btn:not(.active) {
            border-bottom: 4px solid transparent !important;
            font-weight: 400 !important;
        }

        .pdp-thumbs {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }

        .pdp-thumbs img {
            width: 64px;
            height: 64px;
            object-fit: cover;
            border-radius: 8px;
            border: 2px solid transparent;
            cursor: pointer;
        }

        .pdp-thumbs .active img {
            border-color: #3b82f6;
        }

        .pdp-qty-btn {
            display: flex;
            align-items: center;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            overflow: hidden;
        }

        .pdp-qty-btn button {
            padding: 8px 14px;
            font-size: 18px;
            line-height: 1;
            background: #fff;
            border: none;
            cursor: pointer;
        }

        .pdp-qty-btn button:last-child {
            background: #ffd400;
            font-weight: 700;
        }

        .pdp-qty-btn input {
            width: 48px;
            text-align: center;
            border: none;
            border-left: 1px solid #e2e8f0;
            border-right: 1px solid #e2e8f0;
            padding: 8px 0;
            font-size: 14px;
        }

        .beri-ulasan-tab {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%) rotate(-180deg);
            writing-mode: vertical-lr;
            background: #ffd400;
            color: #000;
            font-weight: 700;
            font-size: 14px;
            padding: 24px 12px;
            border-radius: 20px 0 0 20px;
            box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.3);
            cursor: pointer;
            z-index: 100;
            user-select: none;
        }

        .upvoty-sticky-button,
        .upvoty-widget,
        ins.adsbygoogle,
        next-route-announcer,
        iframe {
            display: none !important;
        }

        .pdp-review-stars {
            color: #ffd400;
            letter-spacing: 1px;
        }

        .pdp-review-bar {
            height: 8px;
            border-radius: 4px;
            background: #f1f5f9;
            overflow: hidden;
        }

        .pdp-review-bar-fill {
            height: 100%;
            background: #ffd400;
            border-radius: 4px;
        }

        .pdp-review-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 14px;
            color: #fff;
            flex-shrink: 0;
        }

        @media (min-width: 768px) {
            #pdp-reviews {
                grid-column: 1 / -1 !important;
            }
        }

        .pdp-gallery .keen-slider {
            box-shadow: 0 4px 20px rgba(11, 55, 142, 0.08);
        }

        .pdp-product-rating {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-wrap: wrap;
        }

        .pdp-product-rating .score {
            font-weight: 700;
            color: rgb(var(--color-orange));
        }

        .pdp-voucher-strip {
            display: flex;
            gap: 12px;
            overflow-x: auto;
            padding-bottom: 4px;
            scrollbar-width: thin;
        }

        .pdp-voucher-ticket {
            flex-shrink: 0;
            display: flex;
            align-items: stretch;
            border: 1px dashed rgb(var(--color-primary-40));
            border-radius: 10px;
            background: linear-gradient(135deg, #fff 0%, rgb(var(--color-primary-5)) 100%);
            overflow: hidden;
            min-width: 260px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            transition: transform 0.15s, box-shadow 0.15s;
        }

        .pdp-voucher-ticket:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
        }

        .pdp-voucher-ticket .ticket-left {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 12px 14px;
            border-right: 2px dashed rgb(var(--color-primary-40));
            background: rgb(var(--color-primary-10));
            min-width: 72px;
        }

        .pdp-voucher-ticket .ticket-right {
            padding: 12px 16px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 2px;
        }

        .pdp-seller-card {
            border: 1px solid rgb(var(--color-secondary-10));
            border-radius: 12px;
            padding: 16px;
            background: #fff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
        }

        .pdp-seller-card:hover {
            border-color: rgb(var(--color-secondary-20));
        }

        .pdp-seller-avatar {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid rgb(var(--color-primary-60));
        }

        .pdp-seller-badge {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            font-weight: 600;
            color: rgb(var(--color-secondary-60));
            background: rgb(var(--color-secondary-5));
            padding: 2px 8px;
            border-radius: 999px;
        }

        .pdp-review-section {
            background: linear-gradient(180deg, rgb(var(--color-primary-5)) 0%, #fff 120px);
            border: 1px solid rgb(var(--color-secondary-10));
            border-radius: 16px;
            padding: 24px;
        }

        .pdp-review-summary {
            background: #fff;
            border-radius: 12px;
            border: 1px solid rgb(var(--color-secondary-10));
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        }

        .pdp-review-card {
            border: 1px solid rgb(var(--color-secondary-10));
            border-radius: 12px;
            padding: 16px;
            background: #fff;
            transition: box-shadow 0.15s;
        }

        .pdp-review-card:hover {
            box-shadow: 0 4px 16px rgba(11, 55, 142, 0.08);
        }

        .pdp-review-verified {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 11px;
            color: rgb(var(--color-secondary-60));
            background: rgb(var(--color-primary-10));
            padding: 2px 8px;
            border-radius: 4px;
            margin-top: 8px;
        }

        .pdp-badge-row {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .pdp-badge-pill {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            font-size: 12px;
            font-weight: 600;
            padding: 4px 10px;
            border-radius: 999px;
        }

        .pdp-badge-pill.gold {
            background: rgb(var(--color-primary-10));
            color: rgb(var(--color-primary-100));
            border: 1px solid rgb(var(--color-primary-40));
        }

        .pdp-badge-pill.blue {
            background: rgb(var(--color-secondary-5));
            color: rgb(var(--color-secondary-60));
            border: 1px solid rgb(var(--color-secondary-20));
        }

        #pdp-faq {
            grid-column: 1 / -1 !important;
        }

        .pdp-faq-section {
            background: #fff;
            border: 1px solid rgb(var(--color-secondary-10));
            border-radius: 16px;
            padding: 24px;
        }

        .pdp-faq-item {
            border-bottom: 1px solid rgb(var(--color-secondary-10));
        }

        .pdp-faq-item:last-child {
            border-bottom: none;
        }

        .pdp-faq-question {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding: 16px 0;
            text-align: left;
            background: none;
            border: none;
            cursor: pointer;
            font-family: inherit;
            font-size: 14px;
            font-weight: 600;
            color: rgb(var(--color-secondary-100));
            line-height: 1.5;
        }

        .pdp-faq-question:hover {
            color: rgb(var(--color-secondary-60));
        }

        .pdp-faq-icon {
            flex-shrink: 0;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            font-weight: 700;
            color: rgb(var(--color-secondary-60));
            transition: transform 0.2s;
        }

        .pdp-faq-item.open .pdp-faq-icon {
            transform: rotate(45deg);
        }

        .pdp-faq-answer {
            display: none;
            padding: 0 0 16px;
            font-size: 14px;
            line-height: 1.6;
            color: rgb(var(--color-secondary-80));
        }

        .pdp-faq-item.open .pdp-faq-answer {
            display: block;
        }