/* ESSENSIALS*/
        @font-face {
          font-family: 'Dinbeklight';
          src: url(dinbeklight.ttf);
          font-weight:normal;
        }
        @font-face {
          font-family: 'Dinbeklight';
          src: url(dinbekblack.ttf);
          font-weight:700;
        }
        @font-face {
          font-family: 'HelveticaN';
          src: url(helveticaneue.ttf);
        }


/* UNIVERSAL */
        nav.navbar {   
            position: fixed;
            z-index: 11;
            width: 100%;  }

        .content-wrapper { padding-top:130px; }

        button { color:#000000; }

        .row { margin-left:0px; margin-right:0px; }

        body { font-family: Dinbeklight , sans-serif; }

        a:hover { text-decoration: none; ;  }

        h1 { font-family: 'HelveticaN';  }

        h2 { font-family: 'HelveticaN';  }

        h5 { font-family: 'HelveticaN';  }

        .red-btn a { font-family: 'HelveticaN'; color:white; font-size:17px;  }

        .red-btn:hover { color:red; background:#000000; }

        .mobile-nav > div > div { display:flex; justify-content: space-between; padding:0px 10px; margin-right:10px !important;}

        .mobile-menu-items { display:flex; flex-direction:column; align-items: flex-end; }

        .mobile-nav #menu-header a { margin-left:8px !important; margin-right:8px !important; font-size:12px !important; }

        .mobile-nav .logo {  width: 110px; margin-left: 5px; margin-bottom: 5px; }

        #menu-header { margin-bottom:10px;  }

        .mobile-nav .button-header { margin-left:0px !important; padding: 10px 20px !important; margin-right:10px !important; }

        .swiper {
            width: 100%;
            height: 87vh;
        }
        
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
            display: flex !important;
            justify-content: center;
            align-items: center;
            background-color:black !important;
        }
        
        /* Styling untuk background image */
        .swiper-slide {
            background-size: contain; /* Gambar akan menutupi seluruh slide */
            background-position: center; /* Gambar akan diposisikan di tengah */
            background-repeat: no-repeat; /* Mencegah pengulangan gambar */
        }
        
        /* Untuk text overlay */
        .text-overlay {
            color: white;
            z-index: 2;
            position: absolute;
            width: 100%;
            padding: 0px 20px;
            max-width: 1300px;
        }
        
        .text-banner {
            font-size: 2.5rem;
            font-weight: bold;
            text-align:left;
            max-width: 600px;
        }
        .text-overlay p {
            text-align:left;
            max-width:600px;
        }
        .text-link {
            font-size: 1.2rem;
            display: inline-block;
            margin-top: 15px;
        }
        
        nav .w-100 {
            padding: 0 20px;
            max-width: 1300px;
            margin: auto;
        }


/* HOME */
        .w-1300 { max-width:1300px; margin:auto; padding:0px 20px;  }

       .container-banner {  max-width:1300px; margin:auto; padding:0px 20px;  }

       .image-container {
            position: relative;
            display: inline-block;
            align-self: center;
        }

        .image-container img {
            display: block;
            height: auto;
        }

        .image-container .img-feature {
            display: block;
            width: auto;
            height: auto;
        }


        .bg-black{
            background: black;
        }

        .icon{
            width: 25px;
            height: 25px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .vertical-divider {
            width: 1px; 
            height: 16px;        
            background-color: white;
            margin: 0 20px;           
        }

        .horizontal-divider {
            width: 90%; 
            height: 1px;        
            background-color: #404040;
            margin: 40px auto;           
        }

        .divider-cart{
            width: 100%; 
            height: 1px;        
            background-color: rgb(180, 180, 180);
            margin-bottom:12px;
        }

        .logo{
            width: 127px;
            margin-left:5px;
        }

        .button-header{
            background: black;
            color: white;
            border: 1px solid white;
            border-radius: 10px;
        }

        .button-header:hover{
            background: #ff0000;
            border: 1px solid #ff0000;
            color: white;
            border-radius: 10px;
        }

        .link-menu{
            color: white;
        }

        .link-menu:hover{
            color: #ff0000;
        }

        .search-container {
            display: flex;
            align-items: center;
            border-radius: 10px; /* Rounded edges */
            width: 60vw;
            background-color: white; /* Background putih untuk search bar */
            position: relative;
            max-width: 680px;
        }

        /* Styling untuk input search */
        .search-container input[type="text"] {
            border: none;
            padding: 8px 12px;
            border-radius: 30px;
            outline: none;
            width: 100%;
        }

        /* Styling untuk ikon kaca pembesar */
        .search-container .search-icon {
            background-color: red; /* Background merah untuk ikon */
            border-radius: 10px;
            padding: 8px 16px;
            position: absolute;
            right: 5px; /* Posisikan ikon di kanan */
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Styling untuk ikon */
        .search-container .search-icon img {
            width: 16px;
            height: 16px;
            filter: brightness(0) invert(1); /* Mengubah warna ikon menjadi putih */
        }
        
        .text-overlay{
            color: white; /* Warna teks putih */
            z-index: 2; /* Menempatkan teks di atas gambar */
            position: absolute;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            height:100%;
         }

        .swiper-pagination-bullet-active { background: red !important ; }

        .swiper-pagination-bullet { border:1px solid white;  }

        .banner-container {
            position: relative;
            left: 30%;
            width: 70%; /* Sesuaikan lebar gambar */
            height: 500px; /* Sesuaikan tinggi gambar */
            border-radius: 20px; /* Border radius untuk gambar */
            overflow: hidden; /* Memastikan isi tidak keluar dari border radius */
            box-shadow: 8px 0 20px rgba(234, 234, 234, 0.5); /* Bayangan */
            border: 2px solid transparent; /* Border transparan untuk menghindari border default */
            border-left: none;
            transition:0.5s;
        }

        .banner-container img {
            width: 100%;
            height: 100%;
            object-position: 0% 25%;
            object-fit: cover; /* Memastikan gambar menutupi area tanpa merusak proporsi */
        }

        .black-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(to right, black 5%, transparent 40%); /* Gradient dari hitam ke transparan */
            border-radius: 20px; /* Sama dengan border radius gambar */
        }

        .text-banner{
            font-size: 40px;
            line-height: 45px;
            font-style: italic;
        }

        .text-red{
            color:#ff0000;
        }

        .text-link{
            font-size: 18px;
            font-style: italic;
            font-family:HelveticaN;
        }

        .text-title {
              font-family:HelveticaN;
              font-size:17px;
              margin-bottom:20px;
              padding-left:0px;
              margin-top:0px !important;
        }

        .button{
            background:#ff0000;
            color: white;
            border:none;
        }

        .product-row {
            display: flex;
            flex-wrap: wrap; /* Pastikan elemen flex tetap terwrap */
            justify-content: flex-start;
            gap: 0.5rem 1%; /* Jarak antar produk */
        }

        .product-box {
            flex: 0 1 19%; /* Flex basis tetap 19% tanpa grow */
            border: 1px solid #ddd;
            text-align: center;
            background-color: #f9f9f9;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow ringan */
            transition: transform 0.3s ease; /* Efek hover */
        }

        .logo-product{
            width: 50px;
        }

        .image-product{
            width: 100%; padding-top:0px !important; padding-bottom:0px !important;
        }

        .product-category{
            font-size: 12px;
        }

        .best-seller{
            background-color: #ff0000;
            color: white;
            font-size: 14px;
            display:none;
        }

        .product-desc {
            font-size: 14px;
        }

        .category-product-label { font-size:14px; } 

        .product-box .product-desc { font-size:16px; line-height:20px; }

        .cart-product .product-desc { 
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
         }

        .product-price{
            font-size: 20px;
            color: red;
        }

        .button{
            font-size: 14px;
        }

        .bg-gray{
            background: #F3F3F3;
        }

        .text-gray{
            color:#c5c3c3;
        }

        .feature-title{
            font-size: 19px;
            line-height: 21px;
            font-family:HelveticaN;
            margin-bottom:5px !important;
        }

        .feature-desc{
            font-size: 14px;
        }

        .container-banner-bottom {
            position: relative;
            width: 100%; /* Sesuaikan lebar */
            height: auto; /* Sesuaikan tinggi */
            background-image: linear-gradient(to right, black, transparent), url('../../image/Foto3.jpg'); /* Transisi hitam di kiri */
            background-size: cover;
            background-position: center;
            overflow: visible;
        }

        .content-banner-bottom {
            color: white;
            z-index: 2; /* Pastikan konten di atas overlay */
            font-size: 24px;
            max-width:1300px;
        }

        .image-banner-container img {
            z-index: 99;
            width: 100%;
        }

        .contact-info i {
            color: white; /* Set ikon menjadi warna putih */
        }

        .cart-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease;
            z-index: 9998; /* Di bawah cart sidebar */
        }

        .cart-overlay.show {
            opacity: 1;
            visibility: visible;
        }

        .cart-product img { 
            width:120px;  
            height: 100%;
            object-fit: contain;
        }  

        .cart-sidebar {
            position: fixed;
            top: 0;
            right: -100%; /* Tersembunyi di luar layar */
            width: 410px;
            height: 100%;
            background-color: white;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
            transition: right 0.3s ease;
            z-index: 9999; /* Di atas overlay */
            padding:0px !important;
        }
        .cart-product.row.px-3 { padding-left:0px !important; padding-right:0px !important;  }
        .cart-content.align-items-start .justify-content-between.row.px-3 { padding-left:0px !important; padding-right:0px !important;  }
        .cart-sidebar p { margin-bottom:6px; }
        .cart-sidebar.show {
            right: 0px;
        }

        .mini-cart-inner { padding: 15px 15px 0px 15px;  }

        .cart-price{
            color: black;
            font-size: 16px;
        }

        .cart-product .col-5.px-2 { gap: 6px;
           display: flex;
           flex-direction: column; padding-right:0px !important;  }

        .cart-product.row.px-3 .col-5.px-2 .row.pl-3 { padding-left:0px !important;  }

        .cart-product { margin-bottom:12px;  }
        .cart-product .col-4.px-0 { display:flex; align-self:start;  }

        .button-cart { margin-top:10px !important; margin-bottom:5px !important;  }
        .button-cart button { padding: 10px 20px !important; font-family: 'HelveticaN'; font-size:12px; }


        /* Gaya untuk container kuantitas */
        .quantity-container {
            display: flex;
            align-items: center;
            border: 1px solid #000000; /* Border luar */
            border-radius: 8px;
            overflow: hidden; /* Agar sudut bulat terlihat */
            width: 90px; /* Atur lebar sesuai kebutuhan */
            margin-right:10px !important;
        }

        /* Gaya untuk tombol */
        .quantity-btn {
            width: 35px;
            height: 30px;
            background-color: white;
            border: none;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Gaya untuk input kuantitas */
        .quantity-input {
            width: 30px;
            height: 30px;
            text-align: center;
            font-size: 16px;
            border: none;
            outline: none;
            background-color: white;
            font-weight: bold;
        }

        /* Hilangkan border antara elemen */
        .quantity-btn:focus, 
        .quantity-input:focus {
            outline: none;
        }

        .logo-trash{
            font-size: 18px;
            color: white;
            background-color: #000000;
            border-radius: 8px;
        }

        .cart-price-total{
            font-size: 18px;
        }

        .total-cart{
            position: relative;
            bottom: 0px;
        }

        .total-cart > div { padding:0px !important;  }

        .cart-sidebar{
            overflow-y: auto;
        }

        .cart-top-part {
            display: flex;
            position: relative;
            align-items: center;
            max-width: 365px;
        }

        .cart-content{
            overflow-y: auto;
            overflow-x: hidden;
            padding: 0px 15px 0px 15px;
        }
        .quantity-container .quantity-input { max-width:40px; border:none; padding:0px !important; }
        .minicart-product-wrapper {
            max-height: calc(100vh - 305px);
        }

        /* Gaya untuk dropdown menu */
        .dropdown-menu {
            display: none; /* Tersembunyi secara default */
            position: absolute; /* Agar bisa muncul di bawah tombol */
            background-color: black; /* Background hitam */
            width: 75vw; /* Mengatur lebar dropdown menjadi 100% */
            height: auto;
            left: 0; /* Mengatur posisi ke kiri */
            z-index: 1000; /* Agar berada di atas elemen lainnya */
            border-radius: 5px; /* Sudut yang lebih halus */
            padding: 10px; /* Ruang di dalam dropdown */
        }

        /* Gaya kategori */
        .category {
            margin-bottom: 10px; /* Ruang antar kategori */
        }

        .category-title {
            color: white; /* Warna teks kategori */
            margin: 0; /* Menghapus margin */
            font-weight: bold; /* Membuat teks kategori tebal */
        }

        .dropdown-menu ul {
            list-style-type: none; /* Menghapus bullet dari daftar */
            padding: 0; /* Menghapus padding */
            margin: 0; /* Menghapus margin */
        }

        .dropdown-item {
            color: white; /* Warna teks putih */
            padding: 5px 0; /* Ruang di dalam item */
            text-decoration: none; /* Menghapus garis bawah pada tautan */
            display: block; /* Membuat seluruh area item dapat diklik */
        }

        .dropdown-item:hover {
            background-color: #333; /* Warna background saat hover */
        }

        /* Menampilkan dropdown saat hover hanya pada tombol "Kategori" */
        #category-button:hover + .dropdown-menu,
        .dropdown-menu:hover {
            display: block; /* Tampilkan dropdown saat hover di atas tombol */
        }

        #menu-header a { font-size:15px;  } 
        #bannerhome { height: 82vh; align-content: center; }
        #bannerhome h1 { font-family:HelveticaN; max-width: 600px; font-size: 40px; line-height: 45px;  }
        #bannerhome h1 i { color:white; }
        #notice-bar { margin-left:5px; font-size:15px; }

        #category-container { display:flex; margin:auto; width: 100%; flex-wrap: wrap; }

        .container-category.col { display: flex; flex-direction: column; padding-left:10px; padding-right:10px; }
        .image-caption { margin-top:7px; font-family:HelveticaN; font-size:12px; line-height:15px; }
        #category-container .image-caption { margin-bottom:0px; }

        #featured-category { padding:2.5rem 0px;  }
        #new-product-home { padding:50px 0px  }

        .product-box button { font-family:HelveticaN; font-size:12px; padding-top:10px !important; padding-bottom:10px !important;  }
        .load-product-lainnya {  margin-top: 50px !important;  }
        #usp-wrapper { padding:40px 0px;  }

        .logo-bottom { width:140px; margin-bottom:10px; }

        .logo-bottom-desktop { width: 110px; margin-bottom: 15px; }

        .content-banner-bottom { padding: 0px 20px;  }
        .content-banner-bottom h2 {  font-size:34px; line-height:38px; max-width:460px; }
        .content-banner-bottom p { font-size:14px; line-height:20px;  }

        .seo-text { padding-top:20px;  }

        .seo-text h6 { font-size:12px; }
        .seo-text p { font-size:12px; }

        .feature-container { flex-direction:row; max-width:1300px; margin:auto;  }
         #usp-wrapper > div { padding: 0px 20px;  }

         .footer-wrapper > div { max-width:1300px; padding:0px 20px; }

         .feature-bottom-container{
            width: 75%;
        }

        .image-banner-container{
            max-width: 450px;
            z-index:1;
        }

        .content-banner-bottom > div:first-child {
            z-index:2;
        }

        .image-banner-container img {
            bottom: -50px;
            z-index: 99;
            width: 100%;
            border-radius:15px;
        }

        .product-box {
            flex: 0 1 19%; /* Flex basis tetap 19% tanpa grow */
        }

        .w-75-container{
            width: 75% !important;
            padding: 0;
        }

        .border-bottom-nav{
            border-bottom: 1px solid #c5c3c3;
        }

        .new-product-title { padding-left:0px; margin-right:2px; }
        .fa-regular.fa-heart.icon-marketplace {  display:none; }

        .search-container-mini-cart {
            display: flex;
            align-items: center;
            border-radius: 10px;
            width: 100%;
            background-color: white;
            position: relative;
            max-width: 680px;
        }
       /* input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea {  border-bottom:none !important; } */

        .search-container-mini-cart input {
            border: 1px solid grey !important;
            border-radius: 7px;
            margin: 10px 0px;
            padding: 5px 10px;
        }

        .search-container-mini-cart .search-icon {
                padding: 8px 16px;
                position: absolute;
                right: 5px;
                display: flex;
                align-items: center;
                justify-content: center;
                opacity:0.4;
        }

        .search-container-mini-cart .search-icon img {
                width: 16px;
                height: 16px;
        }

        .cart-content .justify-content-between p { font-size:16px; }
        .product-in-cart {
            text-align: center;
            color:#ffffff;
            font-family: 'Dinbeklight';
            font-weight: 400;
            line-height:12px;
            margin-top:0px;
            font-size:13px;
        }
        .product-in-cart strong { margin-right:5px; }

@media only screen and (max-width: 1200px) {
        .content-wrapper { padding-top:140px; }
}

@media only screen and (max-width: 768px) {
      .footer-content.mt-5 {  margin-top: 20px !important; }
      .justify-content-between > p { font-size:18px;  }
      .cart-sidebar { width:100vw; right:-100vw; padding-left:10px !important; }
      .cart-top-part { width:90vw; max-width:800px; }
      .cart-product img { width:100%; }
      .quantity-container { width:90px;  }
      .minicart-product-wrapper { max-height: calc(100vh - 305px); }
      .product-box .add-to-cart { font-size:11px; line-height:12px;  } 
       #product-category > div { padding:0 10px; }
       #product-category-full > div { padding:0 10px; }
      .product-price { font-size:18px; }
}

@media only screen and (max-width: 400px) {
    .product-in-cart { font-size:14px; }
    .product-in-cart strong { margin-right:6px; }
     .menu-header a:first-child { display:none; }
     .product-box .quantity-in-card { width:100% !important; }
     .product-box .add-to-cart { width:100% !important; height:30px; margin-left:0px !important; margin-top:10px;}
     .text-banner { font-size:35px; line-height:39px; margin-bottom:10px !important; }
     #category-container { gap:5px; }
    .add-to-cart-category { flex-direction:column !important; }
}



/* LOGIN PAGE */
        .login-card .text-title { margin-bottom:10px; text-align:center; }
        .login-card p { text-align:center; }

        .login-wrapper { 
            display: flex;
            flex-direction: column;
            gap: 10px;
            margin: 35px 0px 10px 0px;
        }
        .login-alternatives {
            width: 75%;
            margin: auto;
            border: 1px solid #000000;
            height:44px;
            max-width: 250px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
        }
        .login-alternatives:hover { background:grey;  }
        .login-alternatives .logo-login { margin-top:-5px; }

        .login-with-google { background:#ffffff }
        .login-with-google:hover { background:#000000;  }
        .login-with-google:hover span { color:#ffffff;  }

        .login-with-apple { background:#000000; }
        .login-with-apple span { color:#ffffff; }

        .order-details-title {     
            margin-bottom: 0px;
            display: flex;
            align-items: center; }

        .container-profile {     max-width: 1300px;
            margin: auto;
            padding: 0px 20px;  }

        .container-profile > row{  }

        .login-page {
            position: relative;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: flex-end; /* Card login ada di sebelah kanan */
            align-items: center;
            overflow: hidden;
        }

        .register-page .background-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 20%), /* Gradiasi dari bawah ke atas */
                linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 20%), /* Gradiasi dari atas ke bawah */
                linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 20%), /* Gradiasi dari kiri ke kanan */
                linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 20%),
                        url('../../image/backgroundregister.jpg') no-repeat center center/cover;
            z-index: 1;
        }

        .login-page .background-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background:
                linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 20%), 
                linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 20%), 
                linear-gradient(to right, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 20%), 
                linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0) 20%),
                        url('../../image/Background-login.jpg') no-repeat center center/cover;
            z-index: 1;
        }

        .login-card {
            position: relative;
            background-color: white;
            padding: 20px;
            width: 43%;
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
            z-index: 2;
            margin-right: 5%; /* Menjauhkan card dari tepi kanan */
            padding:30px !important;
            max-width: 450px;
        }

        .login-card h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }

        .form-group input {
            width: 100%;
            padding: 10px;
            border: none;
            border-bottom: 1px solid #ccc;
            border-radius: 0px;
        }

        .login-button {
            width: 75%; /* Lebar tombol menjadi 75% */
            padding: 10px;
            background-color: #ff0000;
            color: white;
            border: none;
            cursor: pointer;
            margin: 0 auto; /* Menempatkan tombol di tengah */
            display: block;
            max-width:250px;
        }
        .login-button:hover {
            background-color: #555;
        }

        .form-options {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
        }

        .remember-me {
            display: flex;
            align-items: center;
        }

        .remember-me input[type="checkbox"] {
            margin-right: 5px;
            vertical-align: middle;
        }

        .forgot-password {
            color:#000;
            text-decoration: underline;
        }

        .forgot-password:hover {
            color:#ff0000;
        }


        @media only screen and (max-width: 768px) {
        .profile-page .form-group { padding:0px !important; }
        .profile-page .left-side-profile {padding:0px !important;}
        .profile-page .order-details-page { margin-top:12px !important;}

          .login-page .background-overlay { 
                background-position: center top;
               background-size: contain;
           }
        .register-page .background-overlay { 
               background-position: center top;
               background-size: contain;
        }

        }

/* REGISTER PAGE */
        .register-page {
            position: relative;
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: flex-end; /* Card login ada di sebelah kanan */
            align-items: center;
            overflow: hidden;
        }

        .register-card {
            position: relative;
            background-color: white;
            padding: 20px;
            width: 43%; /* Card login sekitar 30% dari halaman */
            border-radius: 10px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
            z-index: 2;
            margin-right: 5%; /* Menjauhkan card dari tepi kanan */
            padding:30px !important;
            max-width: 450px;
        }

        .register-card h2 {
            text-align: center;
            margin-bottom: 20px;
        }

        .register-button {
            width: 75%; /* Lebar tombol menjadi 75% */
            padding: 10px;
            background-color: #ff0000;
            color: white;
            border: none;
            cursor: pointer;
            margin: 0 auto; /* Menempatkan tombol di tengah */
            display: block;
        }
        .register-button:hover {
            background-color: #555;
        }
        .logo-login {max-width:20px;}
        .logo-login img { width:100%;}


/* PROFILE A */
        .user-icon {
            font-size: 24px; /* Sesuaikan ukuran ikon */
            padding: 10px;   /* Tambahkan padding di sekitar ikon */
            border: 2px solid #000; /* Border sekeliling ikon */
            border-radius: 50%; /* Membuat border menjadi bulat */
            display: inline-block;
            text-align: center;
        }

        .account-icon{
            font-size: 18px;
            padding: 10px;
            color: white;
            background: black;
            border-radius: 50%;
            display: inline-block;
            text-align: center;
            width: 40px;
            height: 40px;
            align-content: center;
        }

        .list-menu-profile > div { margin-bottom:15px;  }

        .list-menu-profile .active{
            color:#ff0000;
        }

        .list-menu-profile .active i{
            background: red;
        }

        .left-side-profile{
            border-right: 1px solid #ddd;
        }


        .list-menu-profile > div p { font-weight:700; margin-left:10px;  }

        .save-button {      
            padding-top: 10px !important;
            padding-bottom: 10px !important;
            margin-top: 10px;
            width:355px;
             }

        .form-group {
            margin-bottom: 15px;
        }

        .form-group label {
            display: block;
            margin-bottom: 5px;
        }


        .save-button {
            background-color: #fff;
            color: black;
            border: 2px solid black;
            cursor: pointer;
            display: block;
        }

        .form-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0px;
            margin-left: 2px;
        }

        .form-row label {
            width: 150px; /* Lebar label agar rata */
            font-weight: bold;
            margin-bottom: 0px;
        }

        .form-row span {
            flex-grow: 1; /* Isi span akan menyesuaikan */
        }


/* PROFILE B */
        .account-pesanan-saya .order-table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }

        .account-pesanan-saya .order-table th, .account-pesanan-saya .order-table td {
            padding: 12px;
            text-align: center; /* Rata tengah */
            border-bottom: 1px solid #ddd; /* Border horizontal di antara baris */
        }

        .account-pesanan-saya .order-table th {
            font-weight: bold;
            border-bottom: 2px solid #ddd; /* Border bawah lebih tebal di header */
        }

        .account-pesanan-saya .order-table tr:last-child td {
            border-bottom: none; /* Hilangkan border bawah di baris terakhir */
        }

        .account-pesanan-saya .view-btn {
            background-color: black; /* Hijau untuk view */
            color: white;
            border-radius:0px;
            width: 120px;
            font-weight: bold;
            font-style: italic;
            text-transform: uppercase;
            margin-top: 5px;
        }

        .account-pesanan-saya .return-btn {
            background-color: white; /* Merah untuk returns */
            color: black;
            border: 1px solid black;
            border-radius:0px;
            width: 120px;
            font-weight: bold;
            font-style: italic;
            text-transform: uppercase;
            margin-top: 5px;
            display:none;
        }

        .account-pesanan-saya .view-btn:hover {
                        background-color: red;
            color:white;
            border-color:red;
        }

        .account-pesanan-saya .return-btn:hover {
            background-color: rgb(232, 232, 232); /* Merah untuk returns */
            color: black;
        }

       .account-pesanan-saya  .table-wrapper {
            height: 500px; /* Tinggi tetap untuk tabel */
            overflow: auto; /* Tambahkan scroll vertikal jika konten melebihi 500px */
           /*  border-bottom: 1px solid #ddd; Tambahkan border bawah untuk div agar lebih terlihat */
        }

        .account-pesanan-saya .status-complete{
            background: #E0F6EA;
            padding: 5px 10px;
            border-radius: 12px;
        }

       .account-pesanan-saya  .status-pending{
            background: #FFFFE5;
            padding: 5px 10px;
            border-radius: 12px;
        }

        .account-pesanan-saya .status-returned{
            background: #FFEEEA;
            padding: 5px 10px;
            border-radius: 12px;
        }

        .account-pesanan-saya .item-pesanan{
            border: 1px solid #ccc;
            border-radius: 12px;
        }

/* PROFILE C */
        .button-selengkapnya-wrapper span {
            font-weight:700;
            color:#000000 !important;
        }
        .button-selengkapnya-wrapper .tampil-sedikit { display:none; }

        .icon-tracking {
            display: flex;
            justify-content: center;
        }
        .icon-tracking img{
            width:25px;
            display:flex;
        }
        .icon-tracking.icon-tracking-normal img {
            width:15px;
        }
        .icon-wrapper-last { background:none !important; }
        .tracking-description {
            margin-bottom:15px;
        }
       .order-details-page .order-again-button{
            background-color: #fff;
            color: black;
            border: 2px solid black;
            cursor: pointer;
            display: block;
        }
        .tracking-description-wrapper {
            display:flex;
            flex-direction:column;
            padding-left:10px;
        }
        .tracking-description-wrapper span {
            line-height:20px;
        }
        .icon-wrapper {
            background:url('../../image/background-tracking.jpg');
            background-size: contain;
        }
        .tracking-history-wrapper {
            display:none;
        }
        .tracking-history-wrapper.last-five-points {
            display:flex;
        }
        .last-points .icon-wrapper { background:none; }
        .last-points.other-points.point-opened .icon-wrapper { background:url('../../image/background-tracking.jpg'); background-size: contain;}

        .icon-wrapper { width:10%; }
        .tracking-description-wrapper { width:90%; }

        .point-opened { display:flex !important;  }

        .tampil-button {display:none; cursor:pointer; text-decoration: underline !important; }
        .tampil-points.tampil-points {display:block;}

        .alamat-tracking { width:40%; }
        .tracking-history-outer { width:60%; }

        .alamat-tracking { border-right: 1px solid #cacaca; }
        .tracking-history-outer {     padding-left: 30px !important; }

        .button-selengkapnya-wrapper { margin-left:12%; }

/* Kalau mau scroll
        .order-details-page .product-table-wrapper {
            max-height: 300px; 
            overflow-y: auto; 
        }
*/
        .order-details-page .product-table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }

        .order-details-page .product-table th, .product-table td {
            padding: 12px;
            text-align: center;
            border-bottom: 1px solid #ddd; /* Border horizontal */
        }

        .order-details-page .product-table th {
            font-weight: bold;
            border-bottom: 2px solid #ddd;
        }

        /* Product cell styling */
        .order-details-page .product-cell {
            text-align: left;
        }

        .order-details-page .product-info {
            display: flex;
            align-items: center; /* Sejajarkan gambar dan teks secara vertikal */
        }

        .order-details-page .product-image {
            width: 70px;
            height: 70px;
            margin-right: 10px; /* Jarak antara gambar dan nama produk */
        }

        .order-details-page .product-name {
            margin: 0;
            text-align: left; /* Rata kiri untuk nama produk */
        }

        /* Styling untuk harga, quantity, dan total */
        .order-details-page .product-table td:nth-child(2),
        .order-details-page .product-table td:nth-child(3),
        .order-details-page .product-table td:nth-child(4) {
            font-weight: bold; /* Membuat value di kolom harga, quantity, total menjadi bold */
        }

        /* Styling untuk subtotal, shipping, dan lainnya */
        .order-details-page .summary-section td, .order-details-page .summary-section th{
            border: none;
        }



        /* Gaya untuk subtotal dan shipping */
        .order-details-page .summary-row td {
            padding-top: 12px;
            padding-bottom: 12px;
            text-align: left; /* Subtotal dan Shipping rata kiri */
            border-top: 1px solid #ddd;
        }

        .order-details-page .value-summary{
            font-weight: bold;
        }

        .order-details-page .item-detail{
            border-bottom: 1px solid #ddd;
        }

        .order-details-page .summary-section-mobile table {
            width: 100%;
            border-collapse: collapse; /* Agar tidak ada jarak antara sel */
            display: flex;
            flex-direction: column;
        }

       .order-details-page .summary-section-mobile td {
            vertical-align: middle; /* Membuat teks rata tengah secara vertikal */
            text-align: left; /* Membuat teks rata kiri */

        }

        .order-details-page .summary-section-mobile td {
            display: table-cell !important;
            width: 50%;
        }

       .order-details-page .summary-section-mobile .value-summary {
            text-align: left !important;
        }

       .order-details-page .summary-section-mobile tbody {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

       .order-details-page .summary-section-mobile tr {
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

        @media only screen and (max-width: 1024px) {
          .alamat-tracking { width:100%; margin-bottom:10px; }
          .tracking-history-outer { padding-left:0px !important; }

          .alamat-tracking { border-bottom: 1px solid #cacaca; border-right:none; margin-bottom:25px;  }
          .tracking-history-outer { border-bottom: 1px solid #cacaca; width:100%; margin-top:0px !important; }
        }


/* PROFILE D */
        .return-page .product-return-table {
            width: 100%;
            border-collapse: collapse;
            border-spacing: 0;
        }

        .return-page .product-return-table th, .return-page .product-return-table td {
            padding: 12px;
            text-align: center;
            border-bottom: 1px solid #ddd; /* Border horizontal */
        }

        .return-page .product-return-table th {
            font-weight: bold;
            border-bottom: 2px solid #ddd;
        }

        /* Styling untuk cell produk */
        .return-page .product-return-cell {
            text-align: left;
        }

        .return-page .product-return-info {
            display: flex;
            align-items: center; /* Sejajarkan gambar dan teks secara vertikal */
        }

        .return-page .product-image {
            width: 70px;
            height: 70px;
            margin-right: 10px; /* Jarak antara gambar dan nama produk */
        }

        .return-page .product-name {
            margin: 0;
            text-align: left; /* Rata kiri untuk nama produk */
        }

        /* Styling untuk harga dan quantity */
        .return-page .product-return-table td:nth-child(2),
        .return-page .product-return-table td:nth-child(3),
        .return-page .product-return-table td:nth-child(4) {
            font-weight: bold; /* Membuat value di kolom harga dan quantity menjadi bold */
        }

        .return-page .textarea-input{
            border: 2px solid black;
            border-radius: 8px;
            width: 75%;
        }

        .return-page .retur-button {
            background-color: #fff;
            color: black;
            border: 2px solid black;
            cursor: pointer;
            display: block;
            padding: 10px 60px !important;
        }

        .return-page .retur-button:hover {
            background-color: red;
            color:white;
            border-color:red;
        }

        .return-page .item-return{
            border-bottom: 1px solid #ddd;
        }

        .return-page .nomer-resi input {  }

        .return-page .my-1.my-md-0 { margin-bottom:10px !important; }

        .item-return p { font-size:14px;  }

        .return-search-wrapper {display:flex; gap:10px;}

        .nomer-resi input { 
                border: 2px solid black;
                border-radius: 8px;
                width: 75%;
                padding: 10px 10px;
         }

        .product-return-search {width:60%;}
        .product-return-search input {
                border: 2px solid black;
                border-radius: 8px;
                width: 100%;
                padding: 10px 10px;
        }
        .product-return-calendar {
            width:40%;
        }
        .product-return-calendar input {
                border: 2px solid black !important;
                border-radius: 8px;
                width: 100% !important;
                padding: 10px 10px !important;
                height:49px;
        }

        .return-page .table-wrapper { margin-top:0rem !important; }

        .qtyinputted {
            background: #d9dcde;
        }

        @media only screen and (max-width: 768px) {
          .return-page .textarea-input { width:100%;  }
          .nomer-resi input { width:100%;  }
          .return-search-wrapper { margin-bottom:15px; }
          div.qtyinputted {
                padding: 2px 5px !important;
                margin: 5px 0px; }
          .return-search-wrapper { flex-direction:column; }
          .product-return-calendar, .product-return-search { width:100%; }
        }
        


/* CART PAGE */
    
            .cart-page { 
                min-height:650px; 
                place-items: center;
                align-items: center;
                display: flex;
                flex-direction: column;
            }

            .cart-page .container {
                max-width: 1300px;
                padding: 20px;
                background-color: white;

                display: flex;
                gap: 20px;
                flex-direction:column;
                opacity:0.4;
                pointer-events:none;
            }

            .logged-in .cart-page .container {
                opacity:1;
                pointer-events:auto;
            }
            .logged-in .cart-page .login-card {
                display:none;
            }

            .cart-page .cart-container {
                display: flex;
                gap: 40px;
            }
    
            .cart-page h1 {
                color: #ff0000;
                font-size: 24px;
                margin-bottom: 20px;
            }
    
    
            .cart-page .cart-items {
                flex: 2.5;
                text-align: center;
            }
    
            .cart-page .billing-details {
                flex: 2.5;
            }

            .cart-page .cart-totals {
                flex: 1;
                padding: 11px;
            }
    

            .cart-page .cart-totals.cart-image-banner {
                padding:0px;
                display: flex;
                align-self: center;
            }

            .cart-page table {
                width: 100%;
                border-collapse: collapse;
            }
    
            .cart-page th, .cart-page td {
                padding: 10px 10px 10px 0px;
                text-align: center;
                border-bottom: 1px solid #ddd;
            }
    
            .cart-page .price-total { font-weight:700; }

            .subtotal-ammount { font-weight:700; width:48%; }

            .cart-page .shipping-options {
                border-bottom: 1px solid #ddd;
                padding-bottom: 10px;
                margin-bottom:10px;
            }

            .cart-page .product-image {
                width: 80px;
                height: 80px;
                object-fit: contain;
                margin-right: 10px;
                flex:0 !important;
            }
    
            .cart-page .product-info {
                display: flex;
                align-items: center;
            }
    
            .cart-page .quantity-control {
                display: flex;
                align-items: center;
                justify-content: center;
            }
    
            .cart-page .quantity-control button {
                width: 30px;
                height: 30px;
                background-color: transparent;
                border: none;
                cursor: pointer;
            }
    
            .cart-page .quantity-control span {
                margin: 0 10px;
            }
    
            .cart-page .remove-item {
                width: 25px;
                height: 25px;
                border: none;
                background: none;
                padding: 0;
                cursor: pointer;
                margin-left: 10px;
            }
    
            .cart-page .remove-item img {
                width: 100%;
                height: 100%;
            }
    
            .cart-page .coupon-form {
                display: flex;
                margin-top: 20px;
                gap: 15px;
            }
    
            .cart-page .coupon-form input {
                flex: 1;
                padding: 10px;
                border-radius:10px;
                border-width:1px;
            }
            .cart-page .change-address-button{
                padding: 10px 20px;
                background-color: transparent;
                border: 1px solid black;
                cursor: pointer;
                width: 100%;
                font-family: 'HelveticaN';
                font-size:12px;
            }
            .cart-page .coupon-form button {
                padding: 10px 20px;
                font-family: 'HelveticaN';
                background-color: transparent;
                border: 1px solid black;
                cursor: pointer;
                flex : 1;
                font-size:12px;
            }
    
        .cart-page .shipping-options label {
                display: flex;
                justify-content: space-between;
                margin-bottom: 10px;
                cursor: pointer;          
                padding: 0px 10px;
                padding-left: 0px;
                gap:0px;
                font-weight:400;
            }
        .cart-page .shipping-options label span {
            font-weight:700;
        }
        .shipping-label input { margin-right:6px; }

        .cart-page .shipping-options label .price-old { text-decoration: line-through; opacity:0.3;margin-left: 4px; }
        .cart-page .shipping-options label.free-shipping-option { font-weight:600;  }
            .cart-page .total {
                font-weight: bold;
                margin-top: 20px;
                display: flex;
                justify-content: space-between;
                    padding: 0px 10px;
            }
    
            .cart-page .update-ongkos-button {
                display: block;
                width: 100%;
                padding: 10px 0px;
                background-color: transparent;
                border:2px solid #e6e6e6;
                color: #e6e6e6;
                text-align: center;
                text-decoration: none;
                margin-top: 20px;
                font-size:12px;
                font-family: 'HelveticaN';
            }

            .change-data .cart-page .update-ongkos-button {
                background-color: #ff0000;
                color: white;
            }

            .cart-page .checkout-button {
                display: block;
                width: fit-content;
                padding: 10px 40px;
                background-color: #ff0000;
                color: white;
                text-align: center;
                text-decoration: none;
                margin-top: 20px;
                font-size:12px;
                justify-self: center;
                place-self: center;
            }
            .cart-page .checkout-button:hover {
                background:#000000;
                color:#ffffff;
            }
            .cart-page .payment-methods { 
                margin: 50px 0px; 
                display: flex;
                flex-direction: column;
            }

            .cart-page .add-group {
                border: 2px solid black;
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

             .subtotal-cart {
                display: flex; width: 30%; justify-content: space-between;
             }

             .cart-page .price-mobile { display:none;  }

             .sub-total-cart { display:flex;    justify-content: space-between; margin:20px 0px; }

             .sub-total-cart button { background:red; font-family:'HelveticaN'; border:none; padding:10px 20px 8px 20px; text-transform:uppercase; color:white; font-size:12px; letter-spacing:1px; margin-left:10px;}

             .sub-total-cart button:hover { background:#000000; color:white; }
             .subtotal-title { font-family:'HelveticaN'; line-height:31px; }

             .mini-cart-inner .cart-free-ongkir-bar { background:transparent; color:#000000; }
             .mini-cart-inner .cart-free-ongkir-bar .free-ongkir-text { color:#000000; font-weight:400; font-size:15px; line-height:20px;}

             .cart-free-ongkir-bar { background:#333333; display:flex; justify-content: center; padding:20px; }
             .cart-free-ongkir-bar .fulfilled-free-ongkir { display:none; }

             .cart-free-ongkir-bar img { width:50px;  }

             .cart-free-ongkir-bar .free-ongkir-text { color:#ffffff; margin-left:15px; font-weight:700; }

             .free-ongkir-active .cart-free-ongkir-bar { background:#ff0000; }

             .free-ongkir-active .cart-free-ongkir-bar .free-ongkir-text b { color:white; }

             .free-ongkir-active .cart-free-ongkir-bar .fulfilled-free-ongkir { display:block; } 
             .free-ongkir-active .cart-free-ongkir-bar .normal-free-ongkir { display:none; } 

             .free-ongkir-text b { color:red; }

             .notification-info .cart-free-ongkir-bar { padding:0px; align-items: center; }

            section.cart-page .payment-methods img {
                width: 40px;
                margin: 5px;
            }

            section.cart-page .billing-details { margin-top:10px; flex: 2.5;  }
            section.cart-page .billing-details h2, .checkout-page .order-summary h2 { font-size: 18px; text-transform:uppercase; margin-bottom: 20px;}
            section.cart-page .order-summary {  padding: 15px; flex: 1.5; margin-top:15px;}

            section.cart-page .form-group input { border-radius:0px; border-bottom: 1px solid #ccc !important; }
            section.cart-page .display-form { display:flex; gap: 20px;  }

            section.cart-page .top-card { display:flex; gap:30px; }

            section.cart-page label {     font-weight: bold;  }
            section.cart-page select {
                width: 100%;
                padding: 10px;
                border: 1px solid #ccc;
                border-radius: 8px;
            }

            .cart-totals.cart-image-banner .mobile { display:none;  }
            .cart-totals.cart-image-banner img {width:100%;}

            .cart-page .login-card { margin: 30px 0px; box-shadow: none; width: 100%; max-width: 540px;  }

            .notification-info {height:57px; color:white; background:#333333;  place-content: center; gap:10px; display:flex; padding:0px 20px;}
            .notification-icon { display:flex; }
            .notification-icon img { width:30px;  }
            .notification-text {align-items: center; align-content: center; font-weight:700; line-height: 17px;}

            .notification-info.success-logged-in { background:#ffbb00; }
            .notification-info.success-logged-in .notification-text { color:#000000; }


            @media only screen and (max-width: 1200px) {
                .cart-page .shipping-options label { display: flex; flex-direction: column; }
                .cart-page .shipping-options label .shipping-amount { margin-left:23px; }
            }

            @media only screen and (max-width: 1024px) {
                .cart-page .cart-container { flex-direction:column; } 

                .cart-totals.cart-image-banner .desktop { display:none !important;  }
                .cart-totals.cart-image-banner .mobile { display:block !important;  }
                .sub-total-cart { flex-direction: column-reverse; margin-top:5px; }
                .subtotal-cart { width: 100%; place-content: end; margin-bottom:10px;}
                .subtotal-ammount {width:auto; margin-left:30px; margin-top: 2px;}
                .cart-page .display-form { width: 100% !important; flex-direction: column;} 
                .cart-page .form-group { width: 100% !important; } 
                .cart-page .cart-container { gap:20px; }
                .cart-page .cart-totals { padding:0px; }
                .cart-page .shipping-options label { justify-content: flex-start; gap:10px; font-weight: 400;}
                .cart-page .payment-methods { margin:25px 0px;  }
                .notification-info {height:70px; } 

                .cart-page .cart-totals th, .cart-page .cart-totals td { border-bottom:none; }

                .cart-page .shipping-options label { flex-direction: row; justify-content: space-between !important; }  
                .cart-totals thead { display:block;  } 
                .cart-totals thead tr { display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; }        
            }

            @media only screen and (max-width: 600px) {
              .cart-page .coupon-form {     flex-direction: column; padding:15px; }
            }     



/* PAYMENT CONFIRMATION */
            .cart-page.payment-confirmation-page .container { max-width:870px; }
            .payment-confirmation-title { margin-top:70px; margin-bottom:30px; }
            .payment-confirmation-title h1 { font-size:40px; text-align:center;}
            .payment-confirmation-title p { text-align:center; }

            .payment-confirmation-page .container { gap:0px; }

            .payment-confirmation-page .alamat-tracking {width:100%; border:none; margin-top:50px;}

            .payment-confirmation-page .product-table td:nth-child(2), .payment-confirmation-page .product-table td:nth-child(3), .payment-confirmation-page .product-table td:nth-child(4) { font-weight:bold; }
            .payment-confirmation-page .summary-row td {
                    padding-top: 12px;
                    padding-bottom: 12px;
                    text-align: left;
            }
            .payment-confirmation-page .summary-row td:first-child { width:30%; }
            .payment-confirmation-page .form-row {margin-bottom:10px;}

            .payment-confirmation-page .form-row label { width:180px; }

@media only screen and (max-width: 1024px) {
            .payment-confirmation-page .summary-section tr.summary-row { display:flex; margin-bottom:0px; padding-botto:0px; }
            .payment-confirmation-page .summary-row td:first-child { width:26%; }
}

@media only screen and (max-width: 768px) { 
            .payment-confirmation-title { margin-top:20px; margin-bottom:10px; }
            .payment-confirmation-title h1 { margin-bottom:10px; font-size:30px; line-height:30px;}
            .payment-confirmation-page .alamat-tracking { margin-top:30px; margin-bottom:10px; }
}

/* CATEGORY */
            .add-to-cart-category { display:flex;flex-direction:row; margin-top:5px; margin-bottom:5px;}    
            .soldout .stock-total { font-weight:bold; color:red;}  
            .soldout .stock-total strong { color:black; }
            .soldout .product-in-cart { display:none;  } 
            .soldout .button.add-to-cart { 
                background: black;
                font-size: 0px;
                margin-left: 0px;
                width: 100%;
                min-height:42px;
             }    
            .soldout .button.add-to-cart:after {content:'Habis'; font-size:11px;}
            .soldout .quantity-in-card {display:none !important;}
            .product-box .stock-total p { margin-bottom:0px;  }
            .product-box .stock-total p strong { margin-right:7px; }

            .product-box .add-to-cart {margin-left:10px; width:100%; font-size:11px; width:65%; padding-top:7px !important; padding-bottom:7px !important;}
            .product-box .quantity-in-card {
                display: flex;
                align-items: center;
                border: 1px solid #acacac;
                border-radius: 8px;
                overflow: hidden;
                width: 35%;
                height: 40px;
                margin-left: 0px;
            }
            .product-box .quantity-in-card .quantity-input { height:inherit; padding:0px !important; }
            .product-box .quantity-in-card button { padding:0px !important; }
            .product-box .quantity-in-card input { border:none; }

            .banner-container-page{
                width: 100%;
                background-color: black;
                text-align: center;
            }
            .banner-container-background {
                display: flex;
                justify-content: flex-start;
                align-items: end;
                height: 200px;
                padding: 0 20px;
                position: relative;
                background-color: #000000;
                max-height: 400px;
                overflow: hidden;
                max-width: 1300px;
                margin: auto;
                background-size: cover !important;
                padding-bottom: 0px;
                align-items: center;
            }

            .banner-container-background h1 {
                font-size: 3rem;                /* Adjust font size */
                color: #ff0000;                    /* Text color */
                margin: 0;                      /* Remove margins */
                white-space: wrap;            /* Prevent text wrapping */
                z-index: 1;                     /* Ensure text is on top of the image */           
                bottom: 10px;                   /* Align text at the bottom */     
                text-align:left; 
                line-height:3rem;          
            }

            .banner-container-background img {
                object-fit: contain;            /* Ensure the image fits within the container */
                opacity: 0.5;                   /* Adjust opacity if needed */
                height: auto;                   /* Maintain aspect ratio */
            }

        .crumb-wrapper {
                z-index:10;
                position:relative;
        }
        .crumb{
                border-radius: 8px;
                overflow: hidden;
                width: fit-content;
                padding: 10px;
                margin-top: -35px;
                background: white;
                font-family: sans-serif;
                box-shadow: 0px 0px 7px rgb(0, 0, 0, 0.4);
        }
        .crumb span { font-family:Dinbeklight, sans-serif; font-weight:700; }
        #product-category { padding:0px 0px 20px 0px  }
        #product-category > div { display: flex; margin-top:15px; }

        #product-category .category-list {    width: 20%; height: 100%; margin-top:15px;}
        #product-category .product-wrapper { width:80%;  }

        #product-category-full .product-wrapper { width:100%;  }
        #product-category-full .product-wrapper .product-box {flex: 0 1 19%;}

        .category-filter {  margin-top:15px; margin-bottom:15px; display:flex; align-items: center; justify-content: space-between;  }

        .sort-button { margin-left:10px;  }
        .button-filter { margin-left:10px; display:none; }
        .button-filter button { 
                display: flex;
                border: 1px solid #000000;
                background: white;
                padding: 5px 20px;
          }
        .button-filter button:after {     
            content: '';
            width: 25px;
            height: 25px;
            background: url('../../image/filter-btn.jpg');
            display: block;
            background-size: cover;
            margin-left: 10px;  }
        .sort-button select { height:36px;  } 
        .category-filter-inner { display:flex; align-items: center;}

        .page-btn.active { background:red; color:white; font-weight:700; }
        .page-btn { padding:8px 10px; color:black; }

        .pagination-wrapper { display:flex; }
        .navigation-btn a { font-family: sans-serif; color:#a4a4a4;  }
        .category-list h3 { font-family: HelveticaN; font-size:18px;  }
        .category-list h4 { font-weight:700; font-size:20px; margin-top:10px; }
        .category-list ul {  
          list-style-type: none; /* Remove bullets */
          padding: 3px 10px; /* Remove padding */
          margin: 0; /* Remove margins */
         }
         .category-list ul li { margin-bottom:5px; }

         .product-wrapper .product-box {  flex: 0 1 24%;  }
         .product-count {     
            align-items: center;
            padding-right: 20px;
            border-right: 1px solid black;
            height: 20px;
            margin-right: 10px;  }

@media only screen and (max-width: 768px) {
  .banner-container-background h1 { font-size:2rem; line-height:2rem; }
  .product-count { border-right:none; }
}



/* Checkout page */
    .not-logged-in .checkout-wrapper { opacity:0.4; pointer-events:none;  }
    .logged-in .checkout-wrapper { opacity:1; pointer-events:auto;  }
    .logged-in .checkout-page .login-card, .logged-in .checkout-page .login-checkout-line { display:none; }

    .login-checkout-line { height:1px; background:#ccc; padding:0px 20px; max-width:1260px; }

    .checkout-page .login-card { margin-top:30px;  box-shadow: none; margin-bottom:30px; max-width:500px;}
    .checkout-page .login-card form { max-width:380px; margin:auto;}

    .checkout-page .login-card p { max-width:330px; margin:auto; margin-bottom:13px; }

    .checkout-page { justify-items: center; }
    .checkout-wrapper { margin-top:50px; margin-bottom:50px;}

    .checkout-page .billing-details { margin-top:30px; flex: 2.5;  }
    .checkout-page .billing-details h2, .checkout-page .order-summary h2 { font-size: 18px; text-transform:uppercase; margin-bottom: 20px;}
    .checkout-page .order-summary {  padding: 15px; flex: 1.5; margin-top:15px;}

    .checkout-page .form-group input { border-radius:0px; border-bottom: 1px solid #ccc !important; }
    .checkout-page .display-form { display:flex; gap: 20px;  }

    .checkout-page .top-card { display:flex; gap:30px; }

    .checkout-page label {     font-weight: bold;  }
    .checkout-page select {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 8px;
    }

    input[type="text"], input[type="email"], input[type="tel"], input[type="password"], textarea {
        width: 100%;
        padding: 10px;
        border: 0px;
        border-bottom: 1px solid #ccc;
    }

    .checkout-page textarea {  height:100px; border-bottom: 1px solid #ccc !important; }
    .checkout-page .form-group.menjadi-member input { width: auto; margin-bottom:5px;}

    .checkout-page .order-details .after-product {     border-bottom: 1px solid #ddd; }
    .checkout-page .order-details .after-product-list {
            text-align: left;
            padding-bottom: 10px;
            padding-top: 10px;
    } 

    .checkout-page .shipping-options.after-product  {  border-bottom: 1px solid #ddd;  }
    .checkout-page .shipping-options.after-product .options { margin-bottom:5px;  }
    .checkout-page .shipping-options.after-product .options input { margin-right:10px;}
    .checkout-page .order-summary .total-cost {}

    .checkout-page .shipping-options {
        padding: 10px 0;
    }

    .order-summary .total-cost p {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        font-weight: 700;
    }
    .after-product-list-right {
    text-align: right;
    font-weight:700;
}


    .checkout-page .payment-methods img {
        width: 40px;
        margin: 5px;
    }

    .checkout-button { 
        background-color: red;
        color: white;
        text-align: center;
        padding: 10px;
        text-transform: uppercase;
        cursor: pointer;
        border: none;
        margin-top: 20px;
        font-family: 'HelveticaN';
        width:100%;
     }


/* PRODUCT DETAILS */

    .detail-page .crumb { margin-top:20px; margin-bottom:10px;  }

    .detail-page .container{
            display: flex;
            flex-direction: column;
        }
        .detail-page .product-container {
            display: flex;
            flex-direction: column;
            min-height:700px;
        }
        .detail-page .image-container {
            position: relative;
            display: inline-block;
        }

        .detail-page .image-container img {
            display: block;
            width: 80px;
            height: auto;
        }

        .detail-page .image-container .img-feature {
            display: block;
            width: auto;
            height: auto;
        }

        /* Sudut Kiri Atas */
        .detail-page .image-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 8px;
            height: 8px;
            border-left: 3px solid black;
            border-top: 3px solid black;
        }

        /* Sudut Kiri Bawah */
        .detail-page .image-container::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 8px;
            height: 8px;
            border-left: 3px solid black;
            border-bottom: 1px solid #ddd;
        }

        /* Sudut Kanan Atas */
        .detail-page .corner-top-right {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 8px;
            height: 8px;
            border-right: 3px solid black;
            border-top: 3px solid black;
        }

        /* Sudut Kanan Bawah */
        .detail-page .corner-bottom-right {
            content: '';
            position: absolute;
            bottom: 0;
            right: 0;
            width: 8px;
            height: 8px;
            border-right: 3px solid black;
            border-bottom: 1px solid #ddd;
        }

        .detail-page .bg-black{
            background: black;
        }

        .detail-page .icon{
            width: 25px;
            height: 25px;
        }

        .detail-page .vertical-divider {
            width: 1px; 
            height: 30px;        
            background-color: white;
            margin: 0 20px;           
        }

        .detail-page .horizontal-divider {
            width: 90%; 
            height: 1px;        
            background-color: white;
            margin: 10px auto;           
        }

        .detail-page .divider-cart{
            width: 100%; 
            height: 1px;        
            background-color: rgb(180, 180, 180);
        }

        .detail-page .logo{
            width: 120px;
            height: 70px;
        }

.detail-page .product-image {
            margin-right: 20px;
            display: flex;
            gap: 35px;
        }
        .detail-page .product-info {
            flex: 2;
        }
        .detail-page .product-category {
            font-size: 22px;
            margin-bottom: 5px;
            padding-bottom: 5px;
            font-family: 'Dinbeklight';
            font-weight:700;
            color: black;
        }

        .detail-page .product-title {
            font-size: 28px;
            margin-bottom: 0px;
            padding-bottom: 5px;
            font-family: 'Dinbeklight';
            font-weight:700;
            color: black;
        }
        .detail-page .product-price {
            font-size: 20px;
            color: #ff0000;
            margin-bottom: 20px;
            padding-bottom: 5px;
            font-weight: 700;
        }
        .detail-page .product-price-card{
            font-size: 28px;
            color: #ff0000;
            margin-bottom: 10px;
            padding-bottom: 5px;
            font-weight: 700;
        }
        .detail-page .product-details {
            border-bottom: 1px solid #ddd;
            padding-top: 10px;
            border-top: 1px solid #ddd;
            padding-bottom:5px;
            margin-bottom:20px;
        }
        .detail-page .stock-total {
            margin-bottom: 20px;
            border-bottom: 1px solid #ddd;
            padding-top: 10px;
            padding-bottom:10px;
        }
        .detail-page .product-details strong { width:110px; }
        .detail-page .stock-total strong { width:110px; }
        .detail-page .quantity-input { border-bottom:0px;  }
        .detail-page .quantity-add-to-cart > div { display: flex; align-items: center;  }
        .detail-page .quantity-add-to-cart > div p {  margin-bottom: 0px;  width: 110px; }

        .detail-page .product-details p { margin-bottom:5px; display:flex; }
        .detail-page .stock-total p { margin-bottom:5px; display:flex; }
        .detail-page .add-to-cart {
            background-color: #ff0000;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            width: 250px;
            font-family: 'HelveticaN';
        }
        .detail-page .best-seller-card{
            background-color: #ff0000;
            color: white;
            width: 120px;
            padding: 5px 20px;
            text-align: center;
            margin: 10px;
            margin-left: 0px;
            display:none;
        }
        .detail-page h3 {
            padding-bottom: 5px;
            margin-top:20px;
        }
        .detail-page .quantity-in-card {
            display: flex;
            align-items: center;
            border: 2px solid #000000;
            border-radius: 8px;
            overflow: hidden;
            width: 80px;
            height: 44px;
            margin-left: 0px;
        }
        .detail-page .add-to-cart {
            background-color: #ff0000;
            color: white;
            border: none;
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
        }
        .detail-page .quantity-add-to-cart{
            display: flex;
            gap: 20PX;
            padding-bottom: 5px;
        }
        .detail-page .thumbnail-container{
            display: flex;
            height: 50px;
            width : 50px;
            gap: 2%;
        }
        .detail-page .crumb-wrapper { margin-left:0px; padding-left:0px; margin-bottom:10px; }
        .detail-page .thumbnail-container { width:100%; height: inherit; margin-top:10px;  }
        .detail-page .thumbnail-container img { width:32%;  }
        .detail-page .product-image-wrapper { width:35%;  }
        .detail-page .product-info { width:65%;  }
        .detail-page .product-image-wrapper > img { width:100%;  }
        .related-product-wrapper h5 { padding-left:0px;  }
        .container-alamat { padding:0px !important;  }
        .container-alamat > div {  padding-right:20px; }



/* INFORMATION PAGE */

        .information-page { min-height:500px; margin-top:50px; margin-bottom:50px; }

        .tentangkami-outerwrapper { justify-self: center; }
        .tentangkami-outerwrapper { max-width:950px; }
        .tentangkami-wrapper {display:flex; margin-top:30px;}
        .tentangkami-image { margin-right:30px; }
        .tentangkami-image img { max-width:420px; }

        .information-page h4 { font-family: 'HelveticaN'; }

         .information-page a { font-weight:800; color:red; }

         .contact-details {padding:0px; list-style-type: none; margin: 0px;}
         .contact-page-info { gap:35px; }

@media only screen and (max-width: 1024px) {
        .contact-page-info { flex-direction:column; } 
        .contact-page-info { gap:15px; }
}

@media only screen and (max-width: 728px) {
        .tentangkami-title h1 { font-size:30px; }
        .tentangkami-wrapper { flex-direction:column; } 
        .tentangkami-image { margin-right:0px; max-height:180px; overflow:hidden; margin-bottom:15px; }
        .tentangkami-image img { max-width:inherit; width:100%; }
        .tentangkami-outerwrapper { max-width:inherit; }
}


/* RESPONSIVE */

@media only screen and (max-width: 1290px) {
    .image-container img { max-width:75px;  }
    .register-card { width:60%; }
    .login-card { width:60%; }
}

@media only screen and (max-width: 1145px) { 
    .pagination-wrapper { margin-top:10px;  }
    .category-filter-bottom { display:none;  }
}

@media only screen and (max-width: 1024px) {
    .container-alamat { flex-direction:column; }
    .container-alamat > div {  padding-bottom:20px; padding-right:0px; }


    .pagination-wrapper {
        align-self: flex-end;
    }

    .category-filter {  
        align-items: self-start;
        flex-direction: column;
     }
    .container-category.col {
        width: 20%;
        padding: 0px !important;
        max-width: inherit;
        flex-basis: auto;
    }
    .image-container img { max-width:inherit;}
    .product-box { flex: 0 1 24%;   }

    .banner-container {  opacity: 0.35;  }

    .feature-container { flex-direction: column; margin-top:0px; }
    .feature-container { margin-bottom:20px;  }
    .feature-container .feature-title { text-align:center; margin-top:10px !important;  }
    .feature-container .feature-desc { text-align:center;  }
    #usp-wrapper { padding: 20px 0px;  }

    .login-card {
        width: 60%; /* Card login sekitar 30% dari halaman */
    }

    .register-card {
        width: 60%;
    }

    .save-button { width: 280px;  }

    .container-profile .col-md-9 {  padding-right:0px !important; }
    .container-alamat .save-button {  width:90% !important; }

    .product-wrapper .product-box { flex: 0 1 32%; }
    #product-category-full .product-wrapper .product-box {  flex: 0 1 32%;  }

    .order-details-page .order-again-button { margin-top:10px;  }
}


@media only screen and (max-width: 768px) {
    .pagination-wrapper {  align-self: flex-end;  }    
    .category-filter-inner { flex-direction: column; align-items: flex-start; }
    .checkout-page .top-card { flex-direction: column;}
    .sort-button { margin-left:0px; margin-top:10px; }
    .checkout-page .form-group {
        width: 100% !important;
    } 

    .checkout-page .display-form {
        display: block;
        gap: 0;
    }

    .checkout-page .order-summary { padding:0px;  }

    #product-category-full .product-wrapper .product-box {  flex: 0 1 49%;  }
    .product-wrapper .product-box { flex: 0 1 49%; }
    #product-category > div { margin-top:5px;  }
    .category-list { display:none;  }
    .product-wrapper { width:100% !important;  }
    .product-box { flex: 0 1 49%;   }
    .feature-container .feature-title { text-align:left;  }
    .feature-container .feature-desc { text-align:left;  }

    #usp-wrapper > div { flex-direction: column; }
    #bannerhome h1 { font-size:30px; line-height:35px;  }
    .text-overlay { max-width:100vw;  background:rgba(0, 0, 0, 0.7);  }

    .container-category.col.last-category { display:none;  }

    .feature-container { flex-direction: row; margin-top:0px; }
    .feature-container { width:100%;  }

    .content-banner-bottom { flex-direction:column-reverse;  }
    .container-banner-bottom-text { max-width:100%;  }
    .image-banner-container img { position:relative; bottom:0px;  }

    .image-banner-container { width:100%; margin:auto; max-width:inherit; margin-bottom:-50px; }
    .container-banner-bottom-text { padding-bottom:30px !important;  }

    .image-container img { max-width:70px;}
    .image-caption{font-size: 11px;}

    .container {
        max-width: 100%;
        padding: 10px;
    }

    .cart-container {
        flex-direction: column;
    }

    table, thead, tbody, th, td, tr {
        display: block;
    }

    thead {
        display: none;
    }

    tr {
        margin-bottom: 10px;
        border-bottom: 1px solid #ddd;
        padding-bottom: 10px;
    }

    td {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
    }

    .product-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .product-image {
        width: 60px;
        height: 60px;
    }

    .quantity-control button {
        width: 25px;
        height: 25px;
    }

    h1, h2, h3, p {
        font-size: 15px;
    }

    .coupon-form input {
        padding: 5px;
    }

    .coupon-form button {
        padding: 5px 10px;
    }

    .checkout-button {
        padding: 10px;
        font-size: 16px;
    }

    .search-container{
        max-width: 66vw;
        width: 70vw;
    }

    .login-card {
        width: 100%;
        margin-top:150px; 
    }

    .register-card {
        width: 100%;
        margin-top:150px; 
    }

    .login-page, .register-page { width:100% !important; }
    .container-login, .container-register { padding:20px 30px !important;  }

    .left-side-profile { border-right:none;  }
    .list-menu-profile  { 
        display: flex; place-content: center; gap:5px;  
        border-top: 1px solid #c5c5c5;
        padding-top: 10px;
        margin-top: 20px !important;
        margin-bottom: 10px;
    }
    .list-menu-profile > div {  
    display: flex;
    flex-direction: column;
    margin-bottom:0px;
    align-items: center;
    gap:5px;
    min-width: 25%;
     }
    
    .list-menu-profile > div p { text-align:center; font-weight:400; line-height:22px; margin-left:0px !important; }

    .container-profile > div { padding-top:25px !important; padding-left: 0px !important; padding-right:0px !important; }

    .save-button {      
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    width: 100%;
    margin-top: 10px; }

    .container-alamat .save-button {  width:100% !important; }

    .checkout-page tr {
        display: flex;
        place-content: space-between;
    } 

    .checkout-page thead {display:block;  }
    .checkout-page thead th.quantity {text-align:right;  }

    .order-details-page {  margin-top: 40px !important;  }
    .order-details-page .order-again-button { margin-top:0px;  }
    .cart-page .product-info { flex-direction: row;  }
    .cart-page .price-desktop { display:none;  }
    .cart-page .price-mobile { display:block;  }
    .cart-page .price-total { display:none;  }
    .cart-page .product-info {  text-align: start;  align-items: start;  }
    .cart-page .price-mobile { font-weight:700;  }
    .cart-page th, .cart-page td { border:none;  }
    .cart-page .quality-control-wrapper { justify-content: end; margin-top: -50px;  }
    .cart-page .total { padding:0px 0px;  }

    .detail-page .product-image { flex-direction:column; width:100%; width:inherit; height:inherit; gap:10px; }
    .detail-page .product-image-wrapper { width:100%; max-width:500px; margin:auto;  }
    .detail-page .product-info { width:100%; margin-bottom:30px; }
    .detail-page .crumb-wrapper { padding:0px;  }
    .detail-page .product-image { margin-right:0px;  }
    .detail-page .add-to-cart-wrapper {  display:block; }
    .detail-page .add-to-cart { font-size:15px; width:auto; padding:10px 15px;  }

    .footer-wrapper .col-12.d-flex.flex-column { padding:0px;  }

    .footer-wrapper { font-size:14px; }
    .footer-content p, .footer-wrapper  .text-white, .footer-wrapper p  { font-size:14px;  }
    .content-banner-bottom h2 { margin-bottom:10px !important;  }
    .footer-wrapper .text-title { margin-bottom:10px;  }
    .footer-wrapper .horizontal-divider { margin:20px auto; } 

    .footer-wrapper > .mx-auto > .mt-5.text-white {margin-top: 40px !important;}

    .content-banner-bottom.mx-auto.row .col-md-6.my-auto {     padding-left: 0px; padding-right: 0px; }
}