/* Mobile */
    *, *::before, *::after {
    box-sizing: border-box;
    }

    body {
    font-family: 'Berlin Sans FB', sans-serif;
    font-weight: 200;
    background-color: #fdfdfd;
    margin: 0;
    padding: 0;
    overflow: visible !important;
    }

    body.chat-lock {
        overflow: hidden;
        position: fixed;
        width: 100%;
        height: 100%;
    }

    /* Default untuk Desktop */
    :root {
        --banner-height: 290px;
        --side-width: 40%;
        --main-width: 498.5px;
    }

    .skel-container {
        min-height: var(--banner-height);
    }

    .skel-side, .skel-main {
        height: var(--banner-height);
        transition: all 0.3s ease; /* Opsional: biar transisi resize halus */
    }

    .skel-side {
        min-width: var(--side-width);
    }

    .skel-left {
        margin-left: -20%;
    }

    .skel-right {
        margin-right: -20%;
    }

    .skel-main {
        min-width: 50%;
        width: var(--main-width);
    }

    /* Dimensi khusus kategori sesuai request */
    .skel-cat-item {
        width: 100%; /* Biar fluid di dalam col */
        max-width: 217.2px; 
        height: 145px;
        margin: 0 auto; /* Center alignment jika col lebih lebar */
    }

    /* Penyesuaian tinggi untuk banner mobile agar tidak jomplang */
    .skel-cat-mobile {
        height: 100px;
        width: 100%;
    }

    /* --- Responsive: Mobile & Tablet --- */
    @media (max-width: 991.98px) {
        :root {
            --banner-height: 120px; /* Tinggi sesuai request kamu */
        }

        .skel-main {
            /* Di HP, kita pakai % agar tidak overflow/melebar keluar layar */
            width: 50%; 
            min-width: 50%;
        }

        .skel-side {
            /* Menyesuaikan lebar samping agar tetap terlihat "mengintip" */
            min-width: 35%;
        }
        
        .skel-left {
            margin-left: -15%;
        }

        .skel-right {
            margin-right: -15%;
        }
    }

    .h3{
        font-size: 1.25rem !important;
    }
    
    /* Warna utama pagination */
    .pagination .page-link {
    color: #b92454;
    border-color: #b92454;
    }

    /* Saat hover */
    .pagination .page-link:hover {
    background-color: #b92454;
    color: #fff;
    border-color: #b92454;
    }

    .bg-light-grey{
        background-color: #FAFAFA;
    }

    .text-grey{
        color: #A5A8AA;
    }
    /* Halaman aktif */
    .pagination .page-item.active .page-link {
    background-color: #b92454;
    border-color: #b92454;
    color: #fff;
    }

    /* Halaman disabled */
    .pagination .page-item.disabled .page-link {
    color: #ccc;
    border-color: #dee2e6;
    background-color: #f8f9fa;
    }

    .bg-dark-cl{
        background-color: #D07577 !important;
        color: #FFF !important;
    }

    input, select, textarea {
        font-size: 16px !important; /* cegah zoom di iOS */
    }

    .responsive-font {
        font-size: 14px;
    }

    .product-img.disabled {
        opacity: 0.5;           /* transparansi 50% */
        pointer-events: none;    /* non-aktif klik pada gambar */
        filter: grayscale(50%);  /* opsional, biar lebih “disabled” */
    }

    .card.disabled {
        opacity: 0.5;
    }

    .col-cat-head {
        margin: 10px 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ddd;
        width: 100%;
        height: 100px;
        border-radius: 8px;
        background-color: #000;
        position: relative; /* penting supaya p bisa absolute relatif ke container */
        font-size: 18px;
        overflow: hidden; /* biar img ga keluar border radius */
    }

    .col-cat-head img {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        opacity: .5;
        object-fit: cover;
        display: block;
    }

    .col-cat-head p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%); /* trik biar bener2 ke tengah */
        color: #FFF;
        margin: 0;
        font-weight: 600;
        text-align: center;
        z-index: 2; /* pastikan di atas gambar */
    }

    .avatar-merchant-cenderaloka{
        object-fit: cover; /* biar gak gepeng */
    }

    .review-list {
        max-height: 400px;        /* batas tinggi */
        overflow-y: auto;         /* aktifkan vertical scroll */
        overflow-x: hidden;       /* sembunyikan horizontal scroll */
        scroll-behavior: smooth;  /* bikin scroll smooth */
    }

    /* Styling scrollbar untuk WebKit (Chrome, Edge, Safari) */
    .review-list::-webkit-scrollbar {
        width: 8px;
    }

    .review-list::-webkit-scrollbar-track {
        background: #f8f9fa;      /* warna track (abu soft, bisa pakai bg-light bootstrap) */
        border-radius: 4px;
    }

    .review-list::-webkit-scrollbar-thumb {
        background: #ced4da;      /* warna thumb */
        border-radius: 4px;
        transition: background 0.3s ease;
    }

    .review-list::-webkit-scrollbar-thumb:hover {
        background: #6c757d;      /* warna lebih gelap pas hover */
    }

    /* Untuk Firefox */
    .review-list {
        scrollbar-width: thin;          /* tipis */
        scrollbar-color: #ced4da #f8f9fa; /* thumb + track */
    }

    .nav-right-menu{
        min-width: 224px;
        min-height: 42px;
    }

    .scroll-lock {
    overflow: hidden !important;
    touch-action: none !important;
    height: 100vh !important;
    }

    [data-canvas-trigger]:hover {
    background-color: inherit !important;
    color: inherit !important;
    box-shadow: none !important;
    }

    .btn.btn-outline-success.w-25:disabled,
    .btn.btn-outline-success.w-25[disabled] {
        color: #6c757d !important; /* teks jadi abu */
        background-color: #e9ecef !important; /* background abu terang */
        border-color: #ced4da !important; /* border abu */
        cursor: not-allowed !important; /* cursor jadi dilarang */
        opacity: 1 !important; /* override opacity Bootstrap default jika perlu */
    }

    .product-img {
        aspect-ratio: 1 / 1; /* Rasio kotak */
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }

    /* Khusus untuk swiper cerita */
    .cerita-swiper-wrapper .card-img-top, .listing-cerita-perajin .card-img-top {
        height: 140px; /* Atur sesuai desain */
        object-fit: cover; /* Agar gambar tetap rapi dan proporsional */
        width: 100%; /* Pastikan penuh */
    }

    .youtube-overlay {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex; /* redundant kalau pakai d-flex dari Bootstrap, tapi aman */
        justify-content: center;
        align-items: center;
        pointer-events: none; /* biar klik tetap ke <a> di belakangnya */
        z-index: 2;
    }

    .card.responsive-card{
        border: 0px;
    }
    
    .card-body.responsive-card{
        padding: 0px;
    }

    .card.responsive-card{
        border: 0px;
    }

    .shadow.responsive-card{
        box-shadow: none !important;
    }

    a:focus-visible, div:focus-visible {
        outline: none !important;
        box-shadow: none !important;
        border: none !important;
    }
    .breadcrumb-item+.breadcrumb-item::before{
        content: "";
    }
    .tpp-shadow {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.6); /* arah kanan-bawah */
    }

    .border-cenderaloka{
        border: 1px solid #b92454 !important;
    }

    .text-cenderaloka{
        color: #b92454 !important;
    }

    .bg-cenderaloka{
    background-color: #b92454;
    }

    .bg-warning-light{
        background-color: #FFFCE9;
    }

    .btn-cenderaloka {
    background-color: #b92454 !important;
    color: #fff !important;
    transition: background-color 0.3s ease;
    }

    .btn-cenderaloka:hover, .btn-cenderaloka:active, .btn-cenderaloka:focus-visible {
    background-color: #D73B5B !important; /* atau sesuaikan dari daftar di atas */
    color: #fff !important;
    }

    .btn-cenderaloka:active {
    background-color: #D73B5B; /* atau sesuaikan dari daftar di atas */
    color: #fff;
    box-shadow: none;        /* Hilangkan bayangan saat ditekan */  
    }

    .btn-cenderaloka-light {
    background-color: #fff;
    color: #b92454;
    border: 1px solid #b92454 !important;
    transition: background-color 0.3s ease;
    }

     .btn-cenderaloka-light:hover, .btn-cenderaloka-light:active, .btn-cenderaloka-light:focus-visible {
    background-color: #fff !important; /* atau sesuaikan dari daftar di atas */
    color: #D73B5B !important;
    border: 1px solid #D73B5B !important;
    }

    .btn-cenderaloka-light:active {
    background-color: #fff !important; /* atau sesuaikan dari daftar di atas */
    color: #D73B5B;
    border: 1px solid #D73B5B !important;
    box-shadow: none;        /* Hilangkan bayangan saat ditekan */  
    }

    .btn-cenderaloka-light:disabled, .btn-cenderaloka:disabled{
        background-color: #f0f0f0 !important;   /* latar */
        color: #999999 !important;              /* teks */
        border-color: #dddddd !important;       /* border */
        cursor: not-allowed !important;         /* kursor tidak aktif */
        opacity: 1;                  /* hilangkan transparansi default Bootstrap */
    }

    .btn-outline-cenderaloka {
    color: #212529;                 /* Teks hitam */
    border-color: #b92454;         /* Border hitam */
    background-color: transparent; /* Transparan */
    }

    .btn-outline-cenderaloka:hover {
    color: #fff !important;                   /* Teks putih saat hover */
    background-color: #D73B5B !important;     /* Background hitam */
    border-color: #D73B5B !important;
    }

    .btn-outline-cenderaloka:focus,
    .btn-outline-cenderaloka.focus {
    color: #fff !important;                   /* Teks putih saat hover */
    background-color: #D73B5B !important;     /* Background hitam */
    border-color: #D73B5B !important;
    }

    .btn-outline-cenderaloka:disabled,
    .btn-outline-cenderaloka.disabled {
    color: #212529;
    background-color: transparent;
    }

    .btn-check:checked + .btn-outline-cenderaloka {
    color: #fff !important;                   /* Teks putih saat hover */
    background-color: #b92454 !important;     /* Background hitam */
    border-color: #b92454 !important;
    }

    .avatar-cenderaloka{
    object-fit: cover;
    border: 2px solid whitesmoke; /* border putih */
    }

    .placeholder{
        cursor: default !important;
    }

    .dot-animate::after {
        content: '';
        display: inline-block;
        width: 1em;
        text-align: left;
        animation: dots 1.5s steps(3, end) infinite;
    }

    @keyframes dots {
        0%   { content: ''; }
        33%  { content: '.'; }
        66%  { content: '..'; }
        100% { content: '...'; }
    }

    .tox-tinymce.is-invalid {
        border: 1px solid red !important;
        border-radius: 4px;
    }
    
   .input-group .just-validate-error-label {
        position: absolute;
        margin-top: 2.25rem; /* sesuaikan */
        color: #dc3545;
    }

    .valid-error {
        position: absolute;
        font-size: 14px;
        color: #dc3545;
    }
    
    .error-text{
        font-size: 14px;
        color: #dc3545;
    }

    .form-control.price[readonly] {
        background-color: #F5F5F5 !important;
        opacity: 1; /* jaga agar tidak terlalu pudar */
    }
    
    .bg-readonly{
        background-color: #F5F5F5 !important;
    }

    #bannerDeleteIcon{
        display: none;
    }

    .info-wrapper {
        display: inline-block;
        position: relative;
        cursor: pointer;
    }

    .info-icon {
        display: inline-block;
        width: 18px;
        height: 18px;
        background-color: #6c757d;
        color: #fff;
        font-size: 12px;
        line-height: 18px;
        text-align: center;
        border-radius: 50%;
    }

    .info-popup {
        display: none;
        position: absolute;
        bottom: 125%; /* Muncul di atas ikon */
        left: 180%;
        transform: translateX(-50%);
        background-color: #fff;
        color: #000;
        padding: 6px 10px;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 0.8rem;
        white-space: nowrap;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        z-index: 999;
    }

    .info-wrapper:hover .info-popup {
        display: block;
    }

    #group-shippment .valid-error {
        margin-top: -10px;
    }

    .form-check-input.is-invalid, .was-validated .form-check-input:invalid {
        border-color: var(--bs-form-invalid-border-color) !important;
    }

    .text-title{
    color: #053459;
    }

    .text-link{
    color: #053459;
    }

    .text-link:hover{
    color: #2c5d77;
    }

    .mt-6{
        margin-top: 4rem;
    }

    .w-150px{
        width: 150px;
    }

    .truncate-mobile {
      max-width: 100px;
    }

    #search-nav::placeholder {
        color: #BDBDBD !important;
    }

    .text-truncate-2-line {
    display: -webkit-box;
    -webkit-line-clamp: 2;         /* Batas 2 baris */
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4;
    max-height: calc(1.4em * 2);   /* 2 baris maksimal */
    }

    .text-tiny {
    font-size: 0.8rem !important;
    }

    .badge-sm {
    font-size: 0.65rem;
    padding: 2px 5px;
    line-height: 1;
    }

    .accordion-button:not(.collapsed) {
    background-color: transparent;
    box-shadow: none;
    border-color: transparent;
    }

    .cenderaloka-outline {
    color: white;
    text-shadow:
        -1px -1px 0 #b92454,
        1px -1px 0 #b92454,
        -1px  1px 0 #b92454,
        1px  1px 0 #b92454,
        0px  0px 1px #b92454;
    }

    .dark-outline{
    color: white;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px  1px 0 #000,
        1px  1px 0 #000,
        0px  0px 1px #000;

    }
    
    .decimal-list{
        list-style: decimal;
    }

    .alpha-list{
        list-style-type: lower-alpha;
    }

    .popup-btm-topper {
        display: flex;
        -moz-box-pack: center;
        justify-content: center;
        position: relative;
    }

    .popup-btm-topper::before {
        content: "";
        width: 45px;
        height: 2px;
        border-radius: 8px;
        background-color: #000;
    }
    
    .popup-top-topper {
        display: flex;
        -moz-box-pack: center;
        justify-content: center;
        position: relative;
    }

    .popup-top-topper::before {
        content: "";
        width: 45px;
        height: 2px;
        border-radius: 8px;
        background-color: #000;
        margin-top: 0px;
    }

    #bottom-promo {
        height: auto !important;
        max-height: none !important;
        bottom: 110px !important; /* sudah kamu pakai */
        z-index: 1041 !important;
    }

    #bottom-menu, #bottom-lacak {
        height: auto !important;
        max-height: none !important;
        bottom: 53px !important; /* sudah kamu pakai */
        z-index: 1041 !important;
    }

    #bottom-cart {
    height: auto !important;
    max-height: none !important;
    bottom: 50px !important; /* sudah kamu pakai */
    z-index: 1041 !important;
    }

    /* offcanvas */
    .offcanvas-body {
    max-height: none !important;
    overflow-y: visible !important;
    }

    .offcanvas-bottom {
    height: auto !important;
    max-height: 90vh; /* agar tetap responsif dan tidak melebihi tinggi layar */
    }

    .offcanvas-top {
    height: auto !important;
    max-height: 335px !important; /* agar tetap responsif dan tidak melebihi tinggi layar */
    }

    .info-banner{
    width: 100%;
    height: 200px;
    overflow: hidden;
    }
    
    /* Cursor */
    .cursor-pointer{
    cursor: pointer;
    }
    /* End Cursor */

    /* User Profile */
    .position-relative:hover .hover-show,
    .hover-show:hover {
    display: block !important;
    }
    /* End User Profile */

    /* Navbar */  
    .navbar {
    background-color: #FFF !important;
    height: 135px;
    }

    #find-nav.nav-tabs {
        border-bottom: 2px solid #dee2e6; /* border default bawah untuk ul */
    }

    #canvas-append-offcanvas a.text-white {
        color: #000 !important;
    }

    #find-nav.nav-tabs .nav-link {
        border: none !important;
        border-bottom: 3px solid transparent !important;
        color: #6c757d;
        font-weight: 600;
        transition: border-bottom-color 0.2s ease, color 0.2s ease;
    }

    #find-nav.nav-tabs .nav-link.active {
        border-bottom-color: #b92454 !important;
        color: #b92454;
    }

    #main-layout, #main-breadcrumb{
        padding-top: 14px;
    }

    #main-layout.main-home{
        padding-top: 135px;
    }

    #main-layout.pdp-detail{
        padding-top: 0px;
    }

    /* Header search icon positioning */
    form.position-relative .fa-search {
    position: absolute;
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
    }
    /* End Navbar */

    /* Card */
    .product:hover, .cerita:hover {
    border-color: #BB2345;
    }
    /* End Card */

    /* section-produk-pilihan */
    .tpp-shadow {
    letter-spacing: 2px;
    text-shadow: 1px 1px 0 #ffb6b6,-1px -1px 0 #ffffff,3px 3px 0 rgb(0 0 0 / .1);
    }
    
    .bg-produk-pilihan{
        background-repeat: no-repeat, no-repeat;
        background-position: left bottom, left bottom;
        background-size: 220px auto, cover;
    }

    .pp-info{
    flex: 0 0 42%;
    }
    .pp-swiper{
    flex: 0 0 58%;
    margin-right: 0;
    }

    /* End section-produk-pilihan */

    /* section-banner */
    #section-banner {
    padding-top: 10px;
    position: relative;  
    padding-bottom: 40px;   
    width: 100%;
    height: 170px;
    }

    #section-banner .swiper-pagination {
    position: absolute;     
    left: 0;
    right: 0;
    bottom: 0px;           
    text-align: center;
    }

    #section-banner .swiper-pagination-bullet{
    width: 40px;
    height: 12px;
    border-radius: 15px !important;
    background: linear-gradient(#b92554, #CEE1F0);
    border: 1px solid #b92554;
    }

    #section-banner .swiper-pagination-bullet:hover{
    background: linear-gradient(#CEE1F0, #b92554);
    }
    
    #section-banner.swiper-backface-hidden .swiper-slide{
    width: 49% !important;
    }

    #section-banner img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    }
    /* End section-banner */

    /* section-whistlist */
    .p-1-5{
    padding: 1px 5px;
    }
    /* End section-whistlist */

    /* Swiper */
    .swipper-no-arrow .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{
    content: none !important;
    }
    .swipper-no-arrow .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
    content: none !important;
    }
    .d-none.d-md-block .swiper-button-next.swiper-button-disabled, 
    .d-none.d-md-block .swiper-button-prev.swiper-button-disabled{
    display: none !important;
    }

    /* End Swiper */

    /* section-category */
    .d-category{
    height: 110px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    }

    .t-category:hover{
    --bs-bg-opacity: 0.3 !important;
    }
    /* End section-category */

    /* filter */
    .filter-box {
        overflow: hidden;
        transition: height 0.3s ease;
    }
    /* End filter */

    .dropdown-menu {
        z-index: 9999 !important; /* lebih tinggi dari overlay */
    }

    .form-control[readonly] {
        background-color: #e9ecef; /* abu-abu ringan seperti bootstrap default */
        opacity: 1; /* agar teks tetap jelas */
        cursor: not-allowed; /* kursor memberi tanda tidak bisa diubah */
    }

    .card:hover > .overlay-warning {
        opacity: 0;
        pointer-events: none; /* biar klik tetap ke card */
        transition: opacity 0.3s ease;
    }

    .overlay-warning {
        transition: opacity 0.3s ease;
    }

    .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        color: #000 !important;
        background-color: rgba(187, 35, 69, 0.1);
        border-bottom: 1px solid #BB2345;
    }

    .nav-tabs .nav-link.active span {
        background-color: rgba(187, 35, 69, 0.1) !important; /* abu-abu lebih gelap */
        color: #BB2345 !important; /* teks jadi putih */
    }

    #dashboard-menu .nav-link.active {
        background-color: #961C37 !important; /* ganti dengan warna yang kamu mau */
    }

    #sidebarMenu .nav-item .nav-link.active{
        color: #ffff99 !important;
    }

    .badge-cenderaloka-warning{
        background-color: #fffce9;
        color: #9F580A;
        border: 1px #9F580A solid;
    }

    .badge-cenderaloka-success{
        background-color: #f2f8e9;
        color: #014737;
        border: 1px #014737 solid;
    }

    .badge-cenderaloka-danger{
            background-color: #fdebee;
            color: #b02a37;
            border: 1px #b02a37 solid;
    }

    .upload-preview-list {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .upload-label {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 100px;
        height: 70px;
        border: 2px dashed #999;
        border-radius: 8px;
        cursor: pointer;
        font-size: 13px;
        text-align: center;
        transition: 0.2s;
        background: #fafafa;
    }

    .upload-label:hover {
        border-color: #555;
        background: #f0f0f0;
    }

    .upload-preview {
        width: 70px;
        height: 70px;
        border-radius: 8px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        position: relative;
        overflow: hidden;
        border: 1px solid #ddd;
        background-color: #f8f8f8;
    }

    .upload-preview button {
        position: absolute;
        top: 4px;
        right: 4px;
        border: none;
        background: #b92454;
        color: white;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        font-size: 14px;
        cursor: pointer;
    }

    .review-thumb {
        width: 64px;
        height: 64px;
        object-fit: cover;
        border-radius: 6px;
        cursor: pointer;
        border: 1px solid #eee;
    }
    .review-thumb:hover {
        opacity: 0.85;
    }

    .icon-plus-a{
        border: 1px solid #b92454;
        border-radius: 50%;
        background-color: #b92454;
        color: #fff;
        padding: 2px 2px;
        margin-right: 5px;
        font-size: 8px;
    }

    .no-scroll {
        overflow-y: hidden;
        resize: none;
    }

    .scrollable-mobile {
        max-height: 80vh; /* atau 100vh, sesuai kebutuhan */
        overflow-y: auto;
        padding-right: 8px; /* agar tidak kepotong scroll */
    }

    .timeline-custom {
    position: relative;
    margin-left: 1.5rem;
    border-left: 2px solid #ccc;
    padding-left: 0.8rem;
    }

    .timeline-step {
    position: relative;
    margin-bottom: 2rem;
    }

    .line-dot {
    position: absolute;
    left: -22px;
    top: 0;
    width: 16px;
    height: 16px;
    background-color: #aaa; /* abu-abu */
    border-radius: 50%;
    border: 2px solid white;
    }

    .timeline-content {
    font-size: 0.95rem;
    color: #333;
    }

    #menu-profile a.active span {
        border-left: 2px solid red;
        padding-left: 0.5rem; /* jarak dari garis */
    }

    #menu-profile a span {
        padding-left: 0.5rem; /* jarak dari garis */
    }

    .fs-7{
        font-size: 0.90rem !important;
    }

    .fs-8{
        font-size: 0.75rem !important;
    }

    .nav-breadcrumb {
        margin-top: 8.5rem;
        border-bottom: 1px solid #eee;
    }

    .nav-breadcrumb i {
        width: 2.5rem;
        height: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    label[data-stock="0"] {
        pointer-events: none;        /* biar ga bisa diklik */
        opacity: 0.6;                /* keliatan disabled */
        background-color: #e9ecef !important;
        color: #6c757d !important;
        border-color: #dee2e6 !important;
        cursor: not-allowed;
    }

    .swiper-slide.out-of-stock {
    position: relative;
    }

    .swiper-slide.out-of-stock::after {
    content: "OUT OF STOCK";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);   /* overlay gelap */
    color: #fff;
    font-size: 1.2rem;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    text-transform: uppercase;
    border-radius: 8px;
    }

    /* Menyamakan gaya ikon chat dengan ikon keranjang */
    #icon-chat-mobile, #icon-cart-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;  /* Sesuaikan dengan lebar area nav-link Anda */
        height: 24px; /* Sesuaikan dengan tinggi area nav-link Anda */
    }

    /* Styling Badge Notifikasi agar identik dengan keranjang */
    .badge-sm {
        padding: 0.25rem 0.45rem;
        font-size: 0.65rem;
        min-width: 18px;
        min-height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        font-weight: bold;
        border: 1px solid white; /* Supaya badge terlihat jelas di atas ikon */
    }

    /* Pastikan class outline kustom Anda tetap terbawa */
    .cenderaloka-outline {
        /* Jika Anda punya styling khusus untuk outline ikon */
        -webkit-text-stroke: 1px transparent; 
    }

    /* Seleksi badge khusus untuk chat mobile */
    #icon-chat-mobile .target-total-chat, #icon-cart-mobile .target-total-cart {
        top: 5px !important;    /* Semakin besar nilainya, semakin turun ke bawah */
        right: 5px !important;  /* Mengatur jarak dari sisi kanan ikon */
        left: auto !important;  /* Mematikan fungsi start-100/left agar tidak konflik */
        transform: translate(50%, -50%) !important; /* Menjaga badge tetap di tengah titik pojok */
        
        /* Tambahan agar tampilan lebih cantik */
        padding: 2px 5px;
        min-width: 16px;
        font-size: 10px;
        border: 1.5px solid white; /* Memberi jarak visual antara badge dan ikon */
    }
    .floating-chat-btn{
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
        color: #fff;
        border: none;
        border-radius: 15px;
        padding: 12px 18px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(0,0,0,0.25);
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .floating-chat-btn.show {
        display: flex;
    }

    .floating-chat-btn.hide {
        display: none !important;
    }

    .chat-input-area{
        margin-bottom: 50px;
    }
    /* Tablet */
    @media (min-width: 768px) {
        .responsive-font {
            font-size: 16px; /* bebas untuk desktop */
        }

        .position-md-static {
            position: static !important;
            margin-top: 0 !important;
        }

        .truncate-mobile {
        max-width: 160px;
        }

        .card.responsive-card{
            border: var(--bs-card-border-width) solid var(--bs-card-border-color);
        }
        
        .card-body.responsive-card{
            padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
        }

        .shadow.responsive-card{
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
        }

	    .nav-breadcrumb {
            margin-top: 4rem;
            border-bottom: 1.5px solid #eee;
        }

        #main-layout.pdp-detail{
            padding-top: 24px;
        }

        .chat-input-area{
            margin-bottom: 0px;
        }
    }

    /* Desktop */
    @media (min-width: 992px) {
    
        .responsive-font {
            font-size: 16px; /* bebas untuk desktop */
        }

        .card.responsive-card{
            border: var(--bs-card-border-width) solid var(--bs-card-border-color);
        }
        
        .card-body.responsive-card{
            padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x);
        }

        .shadow.responsive-card{
            box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
        }

        .scrollable-mobile {
        /* Default tidak scrollable di desktop */
        max-height: none;
        overflow-y: visible;
        }

        .position-md-static {
            position: static !important;
            margin-top: 0 !important;
        }

        .navbar {
            height: 65px; /* pastikan sama */
            border-bottom: 1px solid #eee !important;
        }

        #main-layout, #main-breadcrumb{
            padding-top: 40px;
        }

        #main-layout.main-home{
            padding-top: 65px;
        }

        #main-layout.container, #main-breadcrumb .container {
            padding-left: 10vw !important;
            padding-right: 10vw !important;
        }
        
        /* section-category */
        .d-category{
            height: 145px;
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }
        /* End section-category */

        /* section-banner */
        #section-banner {
            padding-top: 10px;
            position: relative;  
            padding-bottom: 40px;   
            width: 100%;
            height: 340px;
        }

        #section-banner .swiper-pagination-bullet{
            width: 90px;
            height: 12px;
            border-radius: 15px !important;
            background: linear-gradient(#b92554, #CEE1F0);
            border: 1px solid #b92554;
        }
        /* End section-banner */
        
        /* section-produk-pilihan */
        .pp-info{
            flex: 0 0 20%; 
            max-width: 20%;
        }

        .pp-swiper{
            flex: 1 1 80%; 
            max-width: 80%;
        }
        /* End section-produk-pilihan */

        .sticky-section {
            position: sticky;
            top: 5rem; /* jarak dari atas */
        }

        .truncate-mobile {
        max-width: 180px;
        }

        .min-vh-92-desktop {
        min-height: 92vh;
        }

        .chat-input-area{
            margin-bottom: 0px;
        }
    }