/*!
=========================================================
* 📦 Template: ScaleTok (Scalev X TikTok Shop) - v1.0 FINAL
* 🌐 URL     : https://detama.id/scalemarket
* 👤 Author  : Bagus Pratama (https://detama.id)
* 🛡️ License : Personal Use Only. All rights reserved.
* 🚫 Note    : Dilarang mendistribusikan, menjual kembali, atau memodifikasi untuk keperluan komersial tanpa izin tertulis.
* 📅 Created : 2025
=========================================================
*/
    :root,[data-theme=light] {
        --tiktok-red: #fe2c55;
        --tiktok-green: #009e42;
        --tiktok-black: #161823;
        --tiktok-frame-bg: var(--tiktok-surface);
        --tiktok-background: #fff;
        --tiktok-surface: #f8f8f8;
        --tiktok-border: rgba(22, 24, 35, .12);
        --text-primary: #000;
        --text-secondary: rgba(0, 0, 0, .72);
        --text-tertiary: rgba(0, 0, 0, .56);
        --text-placeholder: rgba(0,0,0,.34);
        --overlay-bg: rgba(0, 0, 0, 0.7);
        --shadow-color: rgba(0, 0, 0, .08);
        --bg-brand: rgba(254, 44, 85, .06);
        --nav-text-color: var(--text-primary);
        --nav-bg-color: var(--tiktok-background);
        --store-btn-bg: #f1f1f2;
        --store-btn-text: #161823;
        --slider-badge-bg: rgba(254, 44, 85, 0.1);
        --slider-badge-text: var(--tiktok-red);
        --section-divider-bg: var(--tiktok-surface);
        --link-color: #0d6efd;
        --recommendation-bg: var(--tiktok-surface);
        --card-badge-bg: #fe5a72;
        
        --chat-bg: #f8f8f8;
        --chat-bubble: #fff;
        --chat-text: var(--text-primary);
        --chat-text-bubble: var(--text-primary);

        --header-height: 48px;
        --nav-height: 44px;

        --spacing-xs: 4px;
        --spacing-sm: 8px;
        --spacing-md: 12px;
        --spacing-lg: 16px;
        --spacing-xl: 24px;

        --radius-sm: 4px;
        --radius-md: 8px;
        --radius-lg: 12px;
        --radius-xl: 16px;
    }

    * {
        box-sizing: border-box;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    ::-webkit-scrollbar {
        width: 0px !important;
        height: 0px !important;
        background: transparent !important;
        display: none !important;
    }
    html {
        scroll-behavior: smooth;
    }
    body {
        font-family: 'Plus Jakarta Sans', -apple-system, 'Helvetica Neue', sans-serif;
        margin: 0;
        background-color: var(--tiktok-background);
        color: var(--text-primary);
        font-size: 14px;
        transition: background-color 0.3s ease;
        user-select: none;
        -webkit-user-select: none;
        -webkit-user-drag: none;
    }
    body.lightbox-open {
        overflow: hidden;
    }

    .tiktok-container {
        width: 100%;
        min-height: 100vh;
        background-color: var(--tiktok-background);
        position: relative;
        padding-bottom: 80px;
        display: flex;
        flex-direction: column;
        transition: background-color 0.3s ease;
    }
    #tiktok-header-wrapper {
        position: sticky;
        top: 0;
        z-index: 100;
        width: 100%;
    }
    #mobile-header {
        position: relative;
        width: 100%;
        height: var(--header-height);
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 var(--spacing-sm);
        gap: var(--spacing-sm);
        background-color: var(--tiktok-background);
        box-shadow: 0 1px 2px var(--shadow-color);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        z-index: 2;
    }
    #mobile-header .icon-btn {
        background-color: transparent;
        color: var(--text-primary);
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        cursor: pointer;
        flex-shrink: 0;
    }
    #header-search-bar {
        flex-grow: 1;
        display: flex;
        align-items: center;
        background-color: var(--tiktok-surface);
        border-radius: var(--radius-sm);
        padding: 6px 10px;
        gap: var(--spacing-sm);
        overflow: hidden;
        transition: background-color 0.3s ease;
    }
    #header-search-bar i {
        color: var(--text-tertiary);
        font-size: 18px;
    }
    #header-search-text {
        color: var(--text-tertiary);
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #mobile-header .mobile-header-group {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
    }
    
    #sticky-nav {
        position: absolute;
        top: var(--header-height);
        left: 0;
        right: 0;
        height: var(--nav-height);
        background-color: var(--nav-bg-color);
        display: flex;
        justify-content: space-around;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.1s linear;
        z-index: 1;
    }
    #sticky-nav.visible {
        pointer-events: auto;
    }
    .nav-link {
        text-decoration: none;
        color: var(--nav-text-color);
        font-weight: 600;
        font-size: 15px;
        padding: 0 var(--spacing-sm);
        height: 100%;
        display: flex;
        align-items: center;
        opacity: 0.7;
        transition: opacity 0.2s;
        padding-bottom: 3px;
    }
    .nav-link.active {
        opacity: 1;
    }
    .nav-underline {
        position: absolute;
        bottom: 0;
        height: 3px;
        background-color: var(--nav-text-color);
        border-radius: 2px;
        transition: left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), width 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .scroll-section {
        scroll-margin-top: calc(var(--header-height) + var(--nav-height));
    }
    .tiktok-gallery {
        width: 100%;
        position: relative;
    }
    .tiktok-main-image-wrapper {
        position: relative;
        overflow: hidden;
        aspect-ratio: 1 / 1;
        cursor: grab;
        user-select: none;
    }
    .tiktok-main-image-wrapper.is-dragging {
        cursor: grabbing;
    }
    .tiktok-main-image {
        height: 100%;
        display: flex;
    }
    .tiktok-main-image .tiktok-main-image-item {
        width: 100%;
        height: 100%;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .tiktok-main-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        pointer-events: none;
    }
    .tiktok-image-counter {
        position: absolute;
        bottom: var(--spacing-md);
        right: var(--spacing-md);
        background-color: rgba(22, 24, 35, 0.7);
        color: white;
        padding: 4px 8px;
        border-radius: 20px;
        font-size: 8px;
        font-weight: 500;
        z-index: 10;
    }

    .tiktok-details-wrapper {
        padding: var(--spacing-md) var(--spacing-lg);
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }
    .tiktok-product-price-section {
        display: flex;
        align-items: flex-end;
        gap: var(--spacing-sm);
    }
    .tiktok-product-price::before {
        content: "Rp";
        font-size: 12px;
        font-weight: 600;
        color: var(--tiktok-red);
        margin-right: var(--spacing-xs);
    }
    .tiktok-product-price.has-starting-price::before {
        content: "Mulai Rp";
    }
    .tiktok-product-price {
        font-size: 20px;
        font-weight: 800;
        color: var(--tiktok-red);
        order: 2;
    }
    .tiktok-original-price {
        font-size: 13px;
        color: var(--text-tertiary);
        text-decoration: line-through;
        order: 3;
    }
    .tiktok-discount-badge {
        background-color: var(--tiktok-red);
        color: white;
        font-size: 12px;
        font-weight: 700;
        padding: 2px var(--spacing-xs);
        border-radius: var(--radius-sm);
        margin-bottom: 2px;
        order: 1;
    }
    .tiktok-product-title-wrapper {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    .tiktok-product-title {
        font-size: 16px;
        font-weight: 600;
        line-height: 1.4;
        margin: 0;
        flex-grow: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .product-bookmark-btn {
        background: none;
        border: none;
        padding: 0;
        margin: 0;
        color: var(--text-secondary);
        cursor: pointer;
        font-size: 20px;
        flex-shrink: 0;
    }
    .product-bookmark-btn.bookmarked {
        color: var(--text-primary);
    }
    .variant-preview-box {
        background-color: var(--tiktok-border);
        color: var(--text-primary);
        font-size: 13px;
        padding: 4px 8px;
        border-radius: var(--radius-sm);
        white-space: nowrap;
        flex-shrink: 0;
    }
    .variant-preview-row {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) 0;
        padding-bottom: 0;
        border-top: 1px solid var(--tiktok-border);
        cursor: pointer;
        overflow: hidden;
    }
    .variant-preview-row > .ti-layout-grid {
        font-size: 20px;
        color: var(--text-primary);
        flex-shrink: 0;
    }
    .variant-preview-images {
        display: flex;
        gap: var(--spacing-xs);
        flex-shrink: 1;
        overflow: hidden;
        max-width: 50%;
        position: relative;
        -webkit-mask-image: linear-gradient(to right, black 85%, transparent 100%);
        mask-image: linear-gradient(to right, black 85%, transparent 100%);
    }
    .variant-preview-images img {
        width: 28px;
        height: 28px;
        object-fit: cover;
        border-radius: var(--radius-sm);
        border: 1px solid var(--tiktok-border);
        flex-shrink: 0;
    }
    .variant-preview-text {
        font-size: 13px;
        color: var(--text-primary);
        white-space: nowrap;
        padding-left: var(--spacing-sm);
        flex-shrink: 0;
    }
    .variant-preview-row > .ti-chevron-right {
        font-size: 18px;
        color: var(--text-tertiary);
        flex-shrink: 0;
        margin-left: auto;
    }

    .section-divider {
        height: 8px;
        background-color: var(--section-divider-bg);
        width: 100%;
    }
    
    #store-info-wrapper {
        padding: var(--spacing-lg);
    }
    #tiktok-store-section {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        background-color: transparent;
        padding: 0;
        border-radius: 0;
    }
    .store-logo {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid var(--tiktok-border);
        flex-shrink: 0;
    }
    .store-name {
        font-weight: 600;
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        flex-grow: 1;
    }
    .store-button {
        background-color: var(--tiktok-surface);
        color: var(--store-btn-text);
        padding: var(--spacing-xs) 8px;
        border-radius: var(--radius-sm);
        font-size: 13px;
        font-weight: 700;
        flex-shrink: 0;
        text-decoration: none;
        transition: opacity 0.2s;
    }
    .store-button:hover {
        opacity: 0.8;
    }
    
    #store-products-section {
        padding: var(--spacing-lg);
        background-color: var(--tiktok-background);
    }
    .store-products-slider-wrapper {
        display: flex;
        gap: var(--spacing-md);
        overflow-x: auto;
        padding-bottom: var(--spacing-sm);
        scrollbar-width: none; 
        -ms-overflow-style: none;
    }
    .store-products-slider-wrapper::-webkit-scrollbar {
        display: none;
    }
    .slider-product-card {
        display: flex;
        flex-direction: column;
        width: 100px;
        flex-shrink: 0;
        text-decoration: none;
    }
    .slider-product-card .card-image-wrapper {
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
        border-radius: var(--radius-md);
        margin-bottom: var(--spacing-sm);
    }
    .slider-product-card .card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .slider-product-card .card-product-price {
        font-size: 14px;
        font-weight: 700;
        color: var(--text-primary);
    }
    .slider-discount-badge {
        background-color: var(--slider-badge-bg);
        color: var(--slider-badge-text);
        font-size: 10px;
        font-weight: 700;
        padding: 0 4px;
        border-radius: var(--radius-sm);
        align-self: flex-start;
    }

    .tiktok-product-description-section {
        padding: var(--spacing-lg);
        padding-bottom: 20px;
        position: relative;
    }
    .tiktok-product-description-section::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 8px;
        background: var(--shadow-color);
        opacity: 0.65;
        pointer-events: none;
    }
    .tiktok-description-title {
        font-size: 16px;
        font-weight: 600;
        padding-bottom: var(--spacing-sm)
    }
    .product-about-container.collapsed {
        max-height: 1200px;
        overflow: hidden;
        position: relative;
    }
    .product-about-container.collapsed::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: linear-gradient(to bottom, transparent, var(--tiktok-background));
        pointer-events: none;
    }
    .about-subsection {
        margin-bottom: var(--spacing-xl);
    }
    .about-subtitle {
        font-size: 14px;
        font-weight: 500;
        margin-top: 0;
        margin-bottom: var(--spacing-md);
    }
    .about-details-content {
        font-size: 13px;
        position: relative;
        overflow: hidden;
        max-height: 85px;
        transition: max-height 0.3s ease-out;
    }
    .about-details-content.expanded {
        max-height: 1000px;
    }
    .spec-row {
        display: flex;
        justify-content: space-between;
        padding: 0;
    }
    .spec-label {
        color: var(--text-secondary);
        width: 30%;
        padding-right: var(--spacing-md);
        flex-shrink: 0;
    }
    .spec-value {
        color: var(--text-primary);
        font-weight: 400;
        text-align: left;
        flex-grow: 1;
    }
    #toggle-details-btn {
        background: none;
        border: none;
        color: var(--link-color);
        cursor: pointer;
        font-weight: 600;
        font-size: 13px;
        padding: var(--spacing-md) 0 0 0;
        margin-top: var(--spacing-sm);
        display: block;
    }

    .about-video-player {
        position: relative;
        width: 100%;
        aspect-ratio: 16 / 9;
        border-radius: var(--radius-md);
        overflow: hidden;
        cursor: pointer;
        background-color: #000;
    }
    .about-video-player .video-thumbnail-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.3s ease;
    }
    .about-video-player .custom-play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60px;
        height: 60px;
        background-color: transparent;
        border: none;
        color: white;
        font-size: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        padding-left: 4px;
        transition: background-color 0.2s ease;
        pointer-events: none;
    }
    .about-video-player iframe {
        position: absolute;
        width: 100%;
        height: calc(100% + 120px);
        top: -60px;
        left: 0;
        border: 0;
    }
    
    .about-sizeguide-content,
    .about-description-content {
        line-height: 1.7;
        color: var(--text-primary);
        font-size: 14px;
    }
    .about-sizeguide-content *,
    .about-description-content * {
        max-width: 100% !important;
        font-size: inherit;
        background-color: inherit;
        color: inherit;
    }
    .about-description-content ul,
    .about-description-content ol {
        padding-left: 20px;
        list-style-position: inside;
    }
    .about-description-content ul {
        list-style-type: disc;
    }
    .about-description-content ol {
        list-style-type: decimal;
    }
    .about-description-content a {
        color: var(--link-color);
        text-decoration: none;
    }
    .about-description-content a:hover {
        text-decoration: underline;
    }
    .about-sizeguide-content img,
    .about-description-content img {
        display: block;
        width: 100%;
        height: auto;
        margin: 0;
    }
    #toggle-about-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
        width: 100%;
        padding-top: var(--spacing-md);
        margin-top: -45px;
        background-color: transparent;
        color: var(--text-primary);
        cursor: pointer;
        border: none;
        font-weight: 500;
        position: relative;
        z-index: 2;
    }
    .product-about-container:not(.collapsed) + #toggle-about-btn {
        margin-top: 0;
    }
    
    #rekomendasi-section {
        padding: var(--spacing-lg) var(--spacing-sm);
        background-color: var(--recommendation-bg);
        transition: background-color 0.3s ease;
    }
    #rekomendasi-section h2.rekomendasi-title {
        font-size: 14px;
        font-weight: 500;
        margin-top: 0;
        margin-bottom: var(--spacing-md);
    }
    #related-products-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-md);
    }
    .tiktok-product-card {
        background-color: var(--tiktok-background);
        border-radius: var(--radius-md);
        text-decoration: none;
        color: var(--text-primary);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        transition: box-shadow 0.2s;
    }
    .tiktok-product-card:hover {
        box-shadow: 0 4px 12px var(--shadow-color);
    }
    .card-image-wrapper {
        width: 100%;
        padding-top: 100%;
        position: relative;
    }
    .card-image {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .card-details {
        padding: var(--spacing-sm);
        display: flex;
        flex-direction: column;
        flex-grow: 1;
    }
    .card-product-name {
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
        height: 45px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .card-price-line {
        display: flex;
        align-items: baseline;
        gap: var(--spacing-xs);
        margin-top: auto;
        width: 100%;
        overflow: hidden;
    }
    .card-sale-price {
        font-size: 20px;
        font-weight: 600;
        color: var(--tiktok-red);
        white-space: nowrap;
        flex-shrink: 0;
    }
    .card-sale-price::before {
        content: "Rp";
        font-size: 12px;
        font-weight: 600;
        margin-right: 1px;
    }
    .card-original-price {
        font-size: 12px;
        color: var(--text-secondary);
        text-decoration: line-through;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .card-discount-badge {
        position: absolute;
        top: 0;
        right: 0;
        background-color: var(--tiktok-red);
        color: white;
        font-size: 13px;
        font-weight: 600;
        padding: 2px 4px;
        border-bottom-left-radius: var(--radius-md);
    }

    #tiktok-mobile-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        background-color: var(--tiktok-background);
        z-index: 999;
        box-shadow: 0 -2px 10px var(--shadow-color);
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        padding: var(--spacing-sm) var(--spacing-md);
        gap: var(--spacing-md);
        align-items: stretch;
    }
    .footer-icon-button {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 10px;
        font-weight: 500;
        padding: 0 4px;
        flex-shrink: 0;
        cursor: pointer;
    }
    .footer-icon-button i {
        font-size: 22px;
    }
    .mobile-footer-button {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
        text-align: center;
        padding: 12px;
        border-radius: var(--radius-md);
        border: none;
    }
    #tiktok-mobile-footer .mobile-footer-button.add-to-cart {
        flex-grow: 0;
        flex-basis: 50px;
        background-color: var(--store-btn-bg);
        color: var(--tiktok-green);
        font-size: 24px;
        padding: 10px;
    }
    .mobile-footer-button.add-to-cart span {
        display: none;
    }
    .mobile-footer-button.add-to-cart i {
        margin: 0;
    }
    #tiktok-mobile-footer .mobile-footer-button.buy-now {
        flex-grow: 1;
        background-color: var(--tiktok-green);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 8px;
        gap: 2px;
        line-height: 1.2;
    }
    .mobile-footer-button.buy-now .buy-now-text {
        font-size: 14px;
        font-weight: 600;
    }
    .mobile-footer-button.buy-now .buy-now-price {
        font-size: 11px;
        font-weight: 400;
        display: block !important;
    }

    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--overlay-bg);
        z-index: 1001;
        display: flex;
        flex-direction: column;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.4s ease, visibility 0.4s;
    }
    .modal-overlay.show {
        opacity: 1;
        visibility: visible;
    }
    .modal-panel {
        background-color: var(--tiktok-background);
        width: 100%;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), background-color 0.3s ease;
    }
    .modal-overlay.show .modal-panel {
        transform: translateY(0);
    }
    .modal-close-btn {
        position: absolute;
        top: 0;
        right: 8px;
        background: none;
        border: none;
        font-size: 24px;
        color: var(--text-primary);
        cursor: pointer;
        padding: var(--spacing-sm);
    }
    
    #variant-modal-overlay {
        justify-content: flex-end;
    }
    #variant-modal-panel {
        max-height: 85vh;
        min-height: 75vh;
    }
    .modal-product-header {
        display: flex;
        padding: var(--spacing-lg);
        gap: var(--spacing-md);
        position: relative;
        flex-shrink: 0;
        transition: border-color 0.3s ease;
    }
    #modal-product-image {
        width: 90px;
        height: 90px;
        object-fit: cover;
        border-radius: var(--radius-md);
        flex-shrink: 0;
        cursor: pointer;
    }
    .modal-product-info {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding-bottom: 0;
    }
    .modal-product-info .tiktok-product-price-section {
        display: flex;
        align-items: flex-end;
        gap: var(--spacing-sm);
        flex-wrap: wrap;
    }
    .modal-product-info #modal-original-price {
        flex-basis: 100%;
        order: 3;
        margin-top: -4px;
        margin-left: 0;
    }
    .modal-product-info #modal-discount-badge { order: 1; }
    .modal-product-info #modal-product-price { order: 2; }
    .modal-product-info .tiktok-product-price::before {
        content: "Rp";
        font-size: 12px;
        font-weight: 600;
        color: var(--tiktok-red);
        margin-right: var(--spacing-xs);
    }
    .modal-product-info .tiktok-product-price.has-starting-price::before {
        content: "Mulai Rp";
    }
    .modal-product-price {
        color: var(--tiktok-red);
        font-size: 20px;
        font-weight: 800;
        margin-bottom: var(--spacing-xs);
    }
    .modal-selected-variant-text {
        font-size: 13px;
        color: var(--text-secondary);
        margin-top: auto;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
        min-height: 1.4em; 
    }
    .modal-product-body {
        padding: 0 var(--spacing-lg);
        overflow-y: auto;
        flex-grow: 1;
    }
    .modal-product-body .tiktok-variants-row {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
        padding: var(--spacing-lg) 0;
        margin-bottom: 0;
        transition: border-color 0.3s ease;
    }
    .modal-product-body .tiktok-section-label {
        width: auto;
        margin-bottom: var(--spacing-sm);
        font-weight: 700;
        font-size: 15px;
    }
    .modal-product-body .tiktok-variant-options {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    .modal-variant-btn {
        background-color: transparent;
        border: 1px solid var(--tiktok-border);
        color: var(--text-primary);
        padding: 8px 16px;
        border-radius: var(--radius-md);
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--spacing-sm);
        overflow: hidden;
    }
    #modal-variants-container .tiktok-variant-options.has-image-grid {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-sm);
    }
    #modal-variants-container .has-image-grid .modal-variant-btn {
        flex-direction: column;
        padding: 0 0 var(--spacing-xs);
        gap: var(--spacing-xs);
        justify-content: flex-start;
        width: 90px;
    }
    #modal-variants-container .has-image-grid .variant-img-wrapper {
        position: relative;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden;
    }
    #modal-variants-container .has-image-grid .variant-btn-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        flex-shrink: 0;
    }
    .variant-img-zoom-btn {
        position: absolute;
        top: 4px;
        left: 4px;
        background-color: rgba(0, 0, 0, 0.4);
        color: white;
        border: none;
        border-radius: 50%;
        width: 20px;
        height: 20px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
        opacity: 1;
        transition: background-color 0.2s;
    }
    #modal-variants-container .has-image-grid .modal-variant-btn span {
        font-size: 12px;
        white-space: normal;
        word-break: break-word;
        width: 100%;
        text-align: center;
        padding: var(--spacing-xs) 0;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        min-height: 33.6px; 
    }
    .modal-variant-btn.selected {
        border-color: var(--tiktok-red);
        background-color: transparent;
        color: var(--tiktok-red);
        font-weight: 700;
    }
    .modal-variant-btn.is-unavailable {
        background-color: transparent;
        color: var(--text-tertiary);
        cursor: pointer;
        opacity: 0.5;
        border-style: dashed;
    }
    .modal-variant-btn.is-unavailable.selected {
        border-color: var(--tiktok-red);
        border-style: dashed;
        color: var(--tiktok-red);
        opacity: 0.7;
        font-weight: 700;
    }
    .modal-variant-btn.selected.selection-conflict {
        opacity: 0.7;
        border-style: dashed;
    }
    .modal-stock-warning {
        /* Style baru sesuai gambar */
        background-color: var(--text-tertiary);
        color: var(--text-primary);
        font-size: 13px;
        font-weight: 500;
        text-align: left;
        padding: var(--spacing-md) var(--spacing-lg);
        display: none;
        transition: background-color 0.3s ease;
        flex-shrink: 0;
    }
    .modal-stock-warning.show {
        display: block;
    }
    #tiktok-quantity-container {
        display: flex;
        flex-direction: row;           
        justify-content: space-between; 
        align-items: center;
        padding: var(--spacing-lg);
        margin-bottom: 0;
        border-top: none; 
    }
    #tiktok-quantity-container .tiktok-section-label {
        width: auto;
        margin-bottom: 0;
        font-weight: 700;
        font-size: 15px;
    }
    .tiktok-quantity-input-wrapper {
        display: flex;
        align-items: center;
        border: none;
        border-radius: var(--radius-sm);
        overflow: hidden;
        background-color: var(--tiktok-border);
    }
    .quantity-btn {
        background-color: transparent;
        border: none;
        cursor: pointer;
        font-size: 22px; 
        font-weight: 300;
        width: 32px;
        height: 32px;
        text-align: center;
        transition: background-color 0.2s;
        color: var(--text-primary); 
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .quantity-btn:hover {
        background-color: var(--tiktok-border); 
    }
    .quantity-btn:disabled {
        color: var(--text-tertiary);
        opacity: 0.5; 
        cursor: not-allowed;
        background-color: transparent;
    }
    .quantity-input {
        width: 48px;
        height: 32px;
        border: none; 
        text-align: center;
        font-size: 14px;
        font-weight: 600;
        color: var(--text-primary); 
        background-color: transparent;
        -moz-appearance: textfield; 
    }
    .quantity-input::-webkit-outer-spin-button,
    .quantity-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
    .quantity-input:focus {
        outline: none;
    }
    .modal-product-footer {
        padding: var(--spacing-lg);
        margin-top: auto;
        background-color: var(--tiktok-background);
        border-top: 1px solid var(--tiktok-border);
        flex-shrink: 0;
        transition: background-color 0.3s ease, box-shadow 0.3s ease;
        display: flex;
        padding: var(--spacing-sm) var(--spacing-lg);
        gap: var(--spacing-md);
    }
    .modal-product-footer .mobile-footer-button {
        display: none;
    }
    .modal-product-footer[data-action="buyNow"] #modal-buy-now-button {
        display: flex;
        flex-grow: 1;
    }
    .modal-product-footer[data-action="addToCart"] #modal-add-to-cart-button {
        display: flex;
        flex-grow: 1;
        background-color: var(--tiktok-green);
        color: white;
    }
    .modal-product-footer[data-action="variantSelect"] #modal-add-to-cart-button,
    .modal-product-footer[data-action="variantSelect"] #modal-buy-now-button {
        display: flex;
        flex-grow: 1;
        flex-basis: 0;
    }
    #modal-add-to-cart-button {
        background-color: var(--store-btn-bg);
        color: var(--store-btn-text);
        font-size: 14px;
        font-weight: 600;
        padding: 12px;
    }
    #modal-buy-now-button {
        background-color: var(--tiktok-green);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 8px;
        gap: 2px;
        line-height: 1.2;
    }
    #modal-buy-now-button .buy-now-text {
        font-size: 14px;
        font-weight: 600;
        pointer-events: none;
    }
    #modal-buy-now-button .buy-now-price {
        font-size: 11px;
        font-weight: 400;
        display: block;
        pointer-events: none;
    }
    #modal-buy-now-button.is-disabled {
        background-color: var(--text-tertiary);
        cursor: not-allowed;
    }
    
    #cart-modal-panel {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
    .modal-overlay.show #cart-modal-panel {
        transform: translateX(0);
    }
    #cart-modal-overlay.modal-overlay.show .modal-panel {
        transform: translateX(0);
    }
    .cart-modal-header {
        padding: var(--spacing-sm) var(--spacing-lg);
        padding-left: var(--spacing-sm);
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid var(--tiktok-border);
        flex-shrink: 0;
        height: var(--header-height);
        position: relative;
    }
    .cart-modal-header .icon-btn {
        background-color: transparent;
        color: var(--text-primary);
        border: none;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        cursor: pointer;
        flex-shrink: 0;
        z-index: 2;
    }
    .cart-header-title {
        font-size: 16px;
        font-weight: 700;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        z-index: 1;
    }
    .cart-edit-btn {
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        padding: 4px 8px;
        z-index: 2;
    }
    .cart-edit-btn.is-done {
        color: var(--tiktok-green);
        font-weight: 600;
    }
    .cart-modal-body {
        flex-grow: 1;
        overflow-y: auto;
        padding: 0;
        background-color: var(--tiktok-surface);
    }
    .cart-empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 80px 40px;
        text-align: center;
        color: var(--text-tertiary);
        background-color: var(--tiktok-background);
        height: 100%;
    }
    .cart-empty-state i {
        font-size: 80px;
        margin-bottom: var(--spacing-lg);
    }
    .cart-empty-state span {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: var(--spacing-sm);
    }
    .cart-empty-state p {
        font-size: 14px;
        margin-bottom: var(--spacing-xl);
        line-height: 1.5;
    }
    .cart-empty-state .mobile-footer-button {
        width: 70%;
        max-width: 180px;
        flex-grow: 0;
        padding: 12px;
        font-size: 14px;
        font-weight: 600;
        background-color: var(--tiktok-green);
        color: white;
    }
    .cart-modal-footer {
        padding: var(--spacing-sm) var(--spacing-lg);
        background-color: var(--tiktok-background);
        box-shadow: 0 -5px 10px -5px var(--shadow-color);
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }
    .cart-footer-select-all {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        font-size: 14px;
    }
    .tiktok-checkbox {
        appearance: none;
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        border: 2px solid var(--tiktok-border);
        background-color: var(--tiktok-background);
        cursor: pointer;
        position: relative;
        flex-shrink: 0;
    }
    .tiktok-checkbox:checked {
        background-color: var(--tiktok-green);
        border-color: var(--tiktok-green);
    }
    .tiktok-checkbox:checked::after {
        content: '';
        position: absolute;
        top: 4px;
        left: 7px;
        width: 5px;
        height: 10px;
        border: solid white;
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }
    .cart-total-price {
        flex-grow: 1;
        text-align: right;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        margin-left: auto;
    }
    #cart-total-price-value {
        font-size: 14px;
        font-weight: 600;
        color: var(--tiktok-red);
    }
    #cart-checkout-button {
        flex-grow: 0;
        flex-shrink: 0;
        white-space: nowrap;
        background-color: var(--tiktok-green);
        color: white;
        padding: 12px;
        flex-direction: row;
        line-height: normal;
    }
    #cart-checkout-button span {
        color: white;
    }
    #cart-footer-edit {
        justify-content: space-between;
    }
    #cart-footer-edit #cart-delete-button {
        flex-grow: 0;
        flex-basis: auto;
        background-color: var(--store-btn-bg);
        color: var(--store-btn-text);
        padding: 6px 12px;
        font-size: 14px;
        font-weight: 600;
    }
    #cart-footer-edit #cart-delete-button span {
        display: inline !important;
    }
    .cart-btn {
        position: relative;
    }
    .cart-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        background-color: var(--tiktok-red);
        color: white;
        font-size: 10px;
        font-weight: 600;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        border: 1px solid var(--tiktok-background);
    }
    .cart-store-group {
        background-color: var(--tiktok-background);
        margin-bottom: var(--spacing-md);
        border-bottom: 8px solid var(--section-divider-bg);
    }
    .cart-store-header {
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md) var(--spacing-lg) 0;
    }
    .cart-store-header img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        object-fit: cover;
        border: 1px solid var(--tiktok-border);
    }
    .cart-store-header span {
        font-size: 14px;
        font-weight: 600;
    }
    .cart-item {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-md);
        padding: var(--spacing-lg);
    }
    .cart-store-group .cart-item:last-child {
        border-bottom: none;
    }
    .cart-item .tiktok-checkbox {
        margin-top: 25px;
    }
    .cart-item-image {
        width: 70px;
        height: 70px;
        object-fit: cover;
        border-radius: var(--radius-md);
        flex-shrink: 0;
    }
    .cart-item-details-wrapper {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-xs);
        min-width: 0;
    }
    .cart-item-name {
        font-size: 14px;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
    }
    .cart-item-variant {
        font-size: 12px;
        color: var(--text-tertiary);
        padding: 2px 6px;
        background-color: var(--tiktok-surface);
        border-radius: var(--radius-sm);
        align-self: flex-start;
        white-space: nowrap;
    }
    .cart-item-bottom-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: var(--spacing-sm);
    }
    .cart-item-price-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .cart-item-discount-row { 
        display: flex;
        align-items: baseline;
        gap: var(--spacing-sm);
    }
    .cart-item-price {
        font-size: 14px;
        font-weight: 700;
        color: var(--tiktok-red);
    }
    .cart-item-original-price {
        font-size: 12px;
        color: var(--text-tertiary);
        text-decoration: line-through;
    }
    .cart-item-discount-badge {
        background-color: var(--slider-badge-bg);
        color: var(--slider-badge-text);
        font-size: 10px;
        font-weight: 700;
        padding: 1px 4px;
        border-radius: var(--radius-sm);
    }
    .cart-item-bottom-row .tiktok-quantity-input-wrapper {
        transform: scale(0.9);
        margin-right: -5px;
    }
    
    #tiktok-mobile-footer.bundle-only .mobile-footer-button.add-to-cart {
        display: none;
    }
    #tiktok-mobile-footer.bundle-only .mobile-footer-button.buy-now {
        flex-grow: 1;
    }

    #share-modal-overlay {
        justify-content: center;
        align-items: center;
        padding: var(--spacing-lg);
        padding-bottom: 150px;
    }
    #share-modal-overlay .modal-panel {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .share-modal-floating-preview {
        background-color: var(--tiktok-background);
        border-radius: var(--radius-xl);
        overflow: hidden;
        margin-bottom: 0;
        width: 100%;
        max-width: 460px;
    }
    #share-product-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block;
    }
    #share-product-text {
        font-size: 18px;
        font-weight: 700;
        color: var(--text-primary);
        padding: var(--spacing-lg);
        background-color: var(--tiktok-surface);
        text-align: left;
    }
    .share-modal-header {
        padding: var(--spacing-lg);
        text-align: center;
        font-weight: 700;
        font-size: 16px;
        position: relative;
    }

    .share-modal-body {
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    .share-grid-wrapper {
        overflow-x: auto;
        padding: var(--spacing-lg);
        padding-top: 0;
    }
    .share-grid-wrapper::-webkit-scrollbar { display: none; }
    .share-grid-wrapper { -ms-overflow-style: none; scrollbar-width: none; }
    .share-grid {
        display: flex;
        gap: var(--spacing-xl);
        width: max-content;
    }
    .share-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
        text-align: center;
        font-size: 12px;
        color: var(--text-secondary);
        cursor: pointer;
        width: 60px;
    }
    .share-icon {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 28px;
    }
    .share-icon.copy-link { background-color: #0075fa; }
    .share-icon.facebook { background-color: #1877F2; }
    .share-icon.telegram { background-color: #0088cc; }
    .share-icon.whatsapp { background-color: #25D366; }
    .share-icon.messenger { background-color: #00B2FF; }
    .share-icon.email { background-color: #757575; }
    .share-icon.line { background-color: #00B900; }
    .share-icon.more { background-color: #00abf4; }

    .tiktok-lightbox {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        z-index: 1002;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .tiktok-lightbox.show {
        opacity: 1;
        visibility: visible;
    }
    .lightbox-content-wrapper {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: 100%;
        max-width: 768px;
        padding: var(--spacing-lg) 0;
    }
    .lightbox-top-control {
        padding: var(--spacing-md) var(--spacing-lg);
        color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }
    .lightbox-top-control .lightbox-close-btn {
        order: 1;
    }
    .lightbox-top-control .lightbox-counter {
        order: 2;
    }
    .lightbox-counter { font-size: 16px; }
    .lightbox-close-btn {
        background: none;
        border: none;
        color: white;
        font-size: 28px;
        cursor: pointer;
    }
    .lightbox-main-view {
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .lightbox-image-slider {
        display: flex;
        height: 100%;
    }
    .lightbox-image-slider .lightbox-image-item {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }
    .lightbox-image-slider img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        pointer-events: none;
    }
    .tiktok-lightbox.icon-lightbox {
        z-index: 1003; 
    }
    .icon-lightbox-caption {
        color: white;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
        padding: var(--spacing-md) var(--spacing-lg);
        display: none; 
        position: absolute;
        bottom: 10px;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.5), transparent);
    }
    
    #tiktok-toast {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.9);
        background-color: #2d2d2d;
        color: white;
        border-radius: var(--radius-md);
        z-index: 1005;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
        padding: var(--spacing-md) var(--spacing-lg);
        font-size: 13px;
        font-weight: 500;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    }
    #tiktok-toast i.ti-check {
        font-size: 28px;
    }
    #tiktok-toast span {
        line-height: 1;
    }
    
    #tiktok-toast.show {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, -50%) scale(1);
    }
    
    @keyframes cart-shake {
        0%, 100% { transform: rotate(0); }
        25% { transform: rotate(-15deg); }
        50% { transform: rotate(15deg); }
        75% { transform: rotate(-15deg); }
    }
    .cart-btn.shake {
        animation: cart-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
    }
    
    #fly-to-cart-particle {
        position: fixed;
        z-index: 2000;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        opacity: 0;
        transform: scale(0.5);
        pointer-events: none;
    }
    
    .scroll-to-top-btn {
        position: fixed;
        bottom: 80px; 
        right: var(--spacing-lg);
        background-color: var(--nav-bg-color);
        color: var(--text-primary);
        border: none;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        cursor: pointer;
        z-index: 998;
        box-shadow: 0 4px 12px var(--shadow-color);
        opacity: 0;
        visibility: hidden;
        transform: translateY(20px);
        transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background-color 0.3s, color 0.3s;
    }
    .scroll-to-top-btn.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    #chat-modal-panel {
        width: 100%;
        height: 100vh;
        border-radius: 0;
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        background-color: var(--chat-bg);
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
    }
    .modal-overlay.show #chat-modal-panel {
        transform: translateX(0);
    }
    #chat-modal-overlay.modal-overlay.show .modal-panel {
        transform: translateX(0);
    }
    .chat-modal-header {
        background-color: var(--chat-bg);
        padding: var(--spacing-sm) var(--spacing-md);
        display: flex;
        align-items: center;
        flex-shrink: 0;
        height: var(--header-height);
        gap: var(--spacing-sm);
    }
    .chat-modal-header .icon-btn {
        background-color: transparent;
        color: var(--text-primary);
        border: none;
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        cursor: pointer;
        flex-shrink: 0;
    }
    .chat-store-info {
        flex-grow: 1;
        display: flex;
        align-items: center;
        gap: var(--spacing-sm);
        overflow: hidden;
    }
    .chat-store-logo {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }
    .chat-store-name {
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .chat-store-button {
        background-color: transparent;
        padding: 4px 8px;
        font-size: 12px;
        flex-shrink: 0;
    }
    .chat-store-button i {
        font-size: 22px;
        margin-right: -4px;
    }
    .chat-modal-body {
        flex-grow: 1;
        overflow-y: auto;
        padding: var(--spacing-lg);
        background-color: var(--chat-bg);
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .chat-welcome-wrapper {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: var(--spacing-sm);
        margin-bottom: var(--spacing-md);
    }
    .chat-welcome-wrapper .chat-store-logo {
        width: 25px;
        height: 25px;
    }
    .chat-bubble {
        background-color: var(--chat-bubble);
        color: var(--chat-text-bubble);
        padding: var(--spacing-md);
        border-radius: var(--radius-lg);
        font-size: 14px;
        text-align: left;
        line-height: 1.5;
        white-space: pre-wrap;
        width: auto;
        max-width: 80%;
    }
    .canned-messages-wrapper {
        background-color: var(--chat-bubble);
        border-radius: var(--radius-lg);
        padding: var(--spacing-sm) var(--spacing-md);
        margin: 0 32px;
    }
    .canned-message-header {
        font-weight: 700;
        font-size: 15px;
        color: var(--chat-text-bubble);
        padding: var(--spacing-sm) 0;
        border-bottom: 1px solid var(--tiktok-border);
    }
    .canned-message-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--spacing-md) 0;
        font-size: 14px;
        color: var(--chat-text-bubble);
        cursor: pointer;
    }
    .canned-message-item:last-child {
        padding-bottom: var(--spacing-sm);
    }
    .canned-message-item i {
        color: var(--chat-text);
        font-size: 18px;
    }
    .canned-message {
        background-color: var(--chat-bubble);
        color: var(--chat-text-bubble);
        padding: var(--spacing-md);
        border-radius: var(--radius-md);
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
    }
    .chat-product-card {
        position: relative;
        display: flex;
        gap: var(--spacing-md);
        background-color: var(--chat-bubble);
        align-items: center;
        padding: var(--spacing-md);
        margin: var(--spacing-sm) var(--spacing-sm);
        border-radius: var(--radius-lg);
        box-shadow: 0 2px 8px var(--shadow-color);
    }
    .chat-product-image {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: var(--radius-sm);
        flex-shrink: 0;
    }
    .chat-product-details {
        flex-grow: 1;
        overflow: hidden;
    }
    .chat-product-name {
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .chat-product-price {
        font-size: 14px;
        color: var(--text-primary);
        font-weight: 700;
    }
    .chat-product-price-row {
        display: flex;
        align-items: baseline;
        gap: var(--spacing-sm);
    }
    .chat-product-original-price {
        font-size: 12px;
        color: var(--text-tertiary);
        text-decoration: line-through;
    }
    .chat-product-close-btn {
        background: none;
        border: none;
        color: var(--chat-text);
        font-size: 18px;
        cursor: pointer;
        position: absolute;
        top: 0;
        right: 2px;
        padding: 2px;
    }
    .chat-modal-footer {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        background-color: var(--chat-bg);
    }
    .chat-input-wrapper {
        display: flex;
        align-items: flex-end;
        gap: var(--spacing-md);
        padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-lg);
        border-top: 1px solid var(--tiktok-border); 
    }
    #chat-textarea {
        flex-grow: 1;
        border-radius: var(--radius-md);
        padding: 10px 16px;
        font-family: inherit;
        font-size: 14px;
        resize: none;
        background-color: var(--chat-bubble);
        color: var(--chat-text-bubble);
        max-height: 100px;
        caret-color: var(--tiktok-red);
    }
    #chat-textarea:focus {
        outline: none;
    }
    .chat-send-btn {
        background: none;
        border: none;
        color: var(--text-tertiary);
        font-size: 26px;
        cursor: not-allowed;
        flex-shrink: 0;
        transition: color 0.2s;
    }
    .chat-send-btn:not(.disabled) {
        color: var(--tiktok-red);
        cursor: pointer;
    }
    
    #voucher-promo-section {
        padding: var(--spacing-lg) 0;
        padding-bottom: var(--spacing-md);
        background-color: var(--tiktok-background);
    }
    .voucher-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 var(--spacing-lg);
        margin-bottom: var(--spacing-md);
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
    }
    .voucher-header i {
        color: var(--text-tertiary);
        font-size: 18px;
    }
    .voucher-slider-wrapper {
        display: flex;
        gap: var(--spacing-sm);
        overflow-x: auto;
        padding: 0 var(--spacing-lg);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .voucher-slider-wrapper::-webkit-scrollbar {
        display: none;
    }

    .voucher-card {
        display: flex;
        align-items: center;
        padding: var(--spacing-sm) var(--spacing-md);
        border-radius: var(--radius-md);
        flex-shrink: 0;
        width: 300px;
        user-select: none;
    }
    .voucher-card.pengiriman {
        background-color: #e0f7ff;
    }
    .voucher-card.produk {
        background-color: #fdebee;
    }
    .voucher-card-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-xs);
        font-size: 11px;
        padding-right: var(--spacing-md);
        border-right: 1px dashed rgba(0, 0, 0, 0.2);
        font-weight: 500;
    }
    .voucher-card.pengiriman .voucher-card-left { color: #009e8a; }
    .voucher-card.pengiriman .voucher-card-left i { font-size: 24px; }
    .voucher-card.produk .voucher-card-left { color: #c82a4a; }
    .voucher-card.produk .voucher-card-left i { font-size: 24px; }
    .voucher-card-middle {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding-left: var(--spacing-md);
        overflow: hidden;
        justify-content: center;
    }
    .voucher-card-middle .voucher-title {
        margin-bottom: 2px;
    }
    .voucher-title {
        font-size: 14px;
        font-weight: 700;
        white-space: nowrap;
    }
    .voucher-card.pengiriman .voucher-title { color: #009e8a; }
    .voucher-card.produk .voucher-title { color: #c82a4a; }
    .voucher-subtitle {
        font-size: 12px;
        color: var(--text-secondary);
        white-space: normal;
        line-height: 1.4;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .voucher-claim-btn {
        border: none;
        border-radius: var(--radius-sm);
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        flex-shrink: 0;
    }
    .voucher-card.pengiriman .voucher-claim-btn {
        background-color: #00b2ff;
        color: white;
    }
    .voucher-card.produk .voucher-claim-btn {
        background-color: #fe2c55;
        color: white;
    }
    .voucher-claim-btn.is-claimed {
        background-color: var(--tiktok-border) !important;
        color: var(--text-tertiary) !important;
        cursor: default;
    }
    #voucher-modal-overlay {
        justify-content: flex-end;
    }
    #voucher-modal-panel {
        max-height: 85vh;
        min-height: 75vh;
    }
    .voucher-modal-header {
        text-align: center;
        padding: var(--spacing-md);
        font-weight: 700;
        font-size: 16px;
        position: relative;
    }
    .voucher-modal-body {
        flex-grow: 1;
        overflow-y: auto;
        padding: var(--spacing-lg);
        background-color: var(--tiktok-background);
    }
    .voucher-modal-intro {
        background-color: var(--tiktok-surface);
        /* POIN 2: Style "breakout" full-width */
        padding: var(--spacing-md) var(--spacing-lg);
        margin: calc(-1 * var(--spacing-lg)) calc(-1 * var(--spacing-lg)) var(--spacing-lg);
        border-radius: 0;
        margin-top: calc(-1 * var(--spacing-lg));
        
        font-size: 13px;
        color: var(--text-secondary);
        line-height: 1.5;
        border-bottom: none;
    }
    .voucher-group-title {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: var(--spacing-md);
    }
    .voucher-modal-card {
        display: flex;
        border-radius: var(--radius-md);
        overflow: hidden;
        margin-bottom: var(--spacing-md);
        box-shadow: 0 2px 4px var(--shadow-color);
    }
    .voucher-modal-card .voucher-card-left {
        padding: var(--spacing-lg) var(--spacing-md);
        border-right: 1px dashed rgba(0, 0, 0, 0.2);
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: var(--spacing-xs);
        font-size: 11px;
        font-weight: 500;
        width: 80px; 
        flex-shrink: 0;
    }
    .voucher-modal-card .voucher-card-left i {
        font-size: 28px;
    }
    .voucher-modal-card.pengiriman .voucher-card-left {
        color: #009e8a;
    }
    .voucher-modal-card.produk .voucher-card-left {
        color: #c82a4a;
    }
    .voucher-modal-card.pengiriman { background-color: #e0f7ff; }
    .voucher-modal-card.produk { background-color: #fdebee; }
    .voucher-modal-card .voucher-card-middle {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: var(--spacing-md);
        gap: 0; /* POIN 1: Hapus gap utama */
    }
    .voucher-tags {
        display: flex;
        flex-wrap: wrap;
        gap: var(--spacing-xs);
        margin-bottom: 4px; /* POIN 1: Margin manual */
    }
    .voucher-tag {
        font-size: 11px;
        font-weight: 500;
        border-radius: var(--radius-sm);
        padding: 2px 4px;
    }
    .voucher-modal-card.pengiriman .voucher-tag {
        color: #009e8a;
        background-color: rgba(0, 158, 138, 0.1);
    }
    .voucher-modal-card.produk .voucher-tag {
        color: #c82a4a;
        background-color: rgba(200, 42, 74, 0.1);
    }

    .voucher-modal-card .voucher-title {
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 2px;
    }
    .voucher-modal-card.pengiriman .voucher-title {
        color: #009e8a;
    }
    .voucher-modal-card.produk .voucher-title {
        color: #c82a4a;
    }
    .voucher-modal-card .voucher-subtitle {
        font-size: 13px;
        white-space: normal;
        color: var(--text-primary);
        line-height: 1.3;
        margin-bottom: 0;
    }
    .voucher-expiry, .voucher-note {
        font-size: 12px;
        color: var(--text-tertiary);
        margin-top: 0;
        white-space: normal;
        line-height: 1.3;
    }
    .voucher-modal-card .voucher-card-right {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: var(--spacing-md);
        gap: var(--spacing-sm);
    }
    .voucher-modal-card .voucher-claim-btn {
        width: 70px; 
        border: none;
        border-radius: var(--radius-sm);
        padding: 6px 12px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }
    .voucher-modal-card.pengiriman .voucher-claim-btn {
        background-color: #00b2ff;
        color: white;
    }
    .voucher-modal-card.produk .voucher-claim-btn {
        background-color: #fe2c55;
        color: white;
    }
    .voucher-modal-card .voucher-claim-btn.is-claimed {
        background-color: var(--tiktok-border) !important;
        color: var(--text-tertiary) !important;
        cursor: default;
    }
    #voucher-promo-section[style*="display: none"] + #store-divider {
        display: none;
    }
    
    @media (prefers-color-scheme: dark) {
        .voucher-card.pengiriman { background-color: #224443; }
        .voucher-card.pengiriman .voucher-card-left { color: #009e8a; border-color: rgba(255, 255, 255, 0.2); }
        .voucher-card.pengiriman .voucher-title { color: #009e8a; }
        .voucher-card.pengiriman .voucher-claim-btn { background-color: #00b2ff; }
        .voucher-card.produk { background-color: #4c2c34; }
        .voucher-card.produk .voucher-card-left { color: #ff8aa0; border-color: rgba(255, 255, 255, 0.2); }
        .voucher-card.produk .voucher-title { color: #ff8aa0; }
        .voucher-card.produk .voucher-claim-btn { background-color: #fe2c55; }
        .voucher-modal-card .voucher-card-left { border-color: rgba(255, 255, 255, 0.2); }
        .voucher-modal-card.pengiriman .voucher-tag {
            color: #009e8a;
            background-color: rgba(0, 158, 138, 0.15);
        }
        .voucher-modal-card.produk .voucher-tag {
            color: #ff8aa0;
            background-color: rgba(255, 138, 160, 0.15);
        }
        .voucher-modal-card.pengiriman { background-color: #224443; }
        .voucher-modal-card.pengiriman .voucher-card-left { color: #009e8a; }
        .voucher-modal-card.pengiriman .voucher-title { color: #009e8a; }
        .voucher-modal-card.pengiriman .voucher-claim-btn { background-color: #00b2ff; }
        .voucher-modal-card.produk { background-color: #4c2c34; }
        .voucher-modal-card.produk .voucher-card-left { color: #ff8aa0; }
        .voucher-modal-card.produk .voucher-title { color: #ff8aa0; }
        .voucher-modal-card.produk .voucher-claim-btn { background-color: #fe2c55; }
    }

    @media (min-width: 768px) {
        body {
            display: flex;
            justify-content: center;
            align-items: flex-start;
            background-color: var(--tiktok-frame-bg);
        }
        .tiktok-container {
            max-width: 450px;
            box-shadow: 0 0 30px rgba(255,255,255,0.1);
            margin: 0 auto;
        }
        .lightbox-content-wrapper {
            max-width: 450px;
            max-height: 450px;
        }
        #tiktok-header-wrapper {
            max-width: 450px;
        }
        #tiktok-mobile-footer {
            max-width: 450px;
            left: 50%;
            transform: translateX(-50%);
        }
        #variant-modal-panel {
            max-width: 450px;
            margin: 0 auto;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        }
        #share-modal-overlay {
            justify-content: flex-end;
            align-items: center;
        }
        #share-modal-panel {
            max-width: 450px;
            margin: 0 auto;
            position: relative;
            bottom: auto;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        }
        .share-modal-floating-preview {
             max-width: 380px;
             margin: 62px auto;
             position: relative;
        }
        .share-grid-wrapper {
            cursor: grab;
            user-select: none;
        }
        .share-grid-wrapper.active {
            cursor: grabbing;
        }
        .tiktok-lightbox .lightbox-top-control {
            max-width: 450px;
            margin: 0 auto;
            position: absolute;
            left: 0;
            right: 0;
        }
        .tiktok-lightbox .lightbox-main-view {
            max-width: 450px;
            width: 100%;
            margin: 0 auto;
        }
        .tiktok-lightbox .icon-lightbox-caption {
            max-width: 450px;
            margin: 0 auto;
            position: absolute;
            left: 0;
            right: 0;
        }
        #voucher-modal-panel {
            max-width: 450px;
            margin: 0 auto;
            max-height: 85vh;
            border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        }
        #cart-modal-panel {
            max-width: 450px;
            margin: 0 auto;
            position: relative;
            height: 100vh;
            min-height: 100vh;
            max-height: 100vh;
            border-radius: 0;
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        #cart-modal-overlay.modal-overlay.show #cart-modal-panel {
            transform: translateY(0);
        }
        #chat-modal-panel {
            max-width: 450px;
            margin: 0 auto;
            position: relative;
            height: 100vh;
            min-height: 100vh;
            max-height: 100vh;
            border-radius: 0;
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        #chat-modal-overlay.modal-overlay.show #chat-modal-panel {
            transform: translateY(0);
        }
        .scroll-to-top-btn {
            right: auto;
            left: 50%;
            transform: translateX(165px) translateY(20px);
        }
        .scroll-to-top-btn.show {
            transform: translateX(165px) translateY(0);
        }
    }

    @media (prefers-color-scheme: dark) {
        :root,[data-theme=dark] {
            --tiktok-red: #ff3b5c;
            --tiktok-frame-bg: #000;
            --tiktok-background: #1e1e1e;
            --tiktok-surface: #2d2d2d;
            --tiktok-border: hsla(0, 0%, 100%, .12);
            --text-primary: hsla(0, 0%, 100%, .9);
            --text-secondary: hsla(0, 0%, 100%, .75);
            --text-tertiary: hsla(0, 0%, 100%, .5);
            --text-placeholder: hsla(0,0%,100%,.4);
            --shadow-color: rgba(0, 0, 0, .68);
            --bg-brand: rgba(254, 44, 85, .24);
            --nav-text-color: #fff;
            --nav-bg-color: #000;
            --store-btn-bg: #3c3c3c;
            --store-btn-text: #fff;
            --slider-badge-bg: rgba(255, 59, 92, 0.25);
            --slider-badge-text: #ff8aa0;
            --section-divider-bg: #000;
            --link-color: #3692ff;
            --recommendation-bg: var(--tiktok-frame-bg);
            
            --chat-bg: #000;
            --chat-bubble: #2d2d2d;
            --chat-text: hsla(0, 0%, 100%, .5);
            --chat-text-bubble: hsla(0, 0%, 100%, .9);
        }
        .mobile-footer-button.add-to-cart {
            background-color: var(--store-btn-bg);
            color: var(--store-btn-text);
        }
    }

    .desktop-only, #main-thumbnail-wrapper, .tiktok-action-section, 
    .tiktok-variants-section, #desktop-chat-button, .store-info-desktop,
    #spec-modal-overlay, #mobile-menu-dropdown {
        display: none !important;
    }