/* ANIMASI SKELETON SECTION*/
.skeleton-wrapper { display: flex; flex-direction: column; gap: 10px;}
.skeleton { animation: skeleton-loading 1.5s infinite alternate;}
.skeleton-img { width: 100%; height: 250px;}
.produk-skeleton .skeleton-img { width: 100%; height: 320px;}
.hero-skeleton .skeleton-img { width: 100%; height: 100vh;}
.hero-collection-skeleton .skeleton-img { width: 100%; height: 240px;}
.edition-skeleton .skeleton-img { width: 100%; height: 380px;}
.skeleton-main-img { width: 100%; height: 400px; }
@keyframes skeleton-loading {
    from { background-color: hsl(200, 20%, 70%) } to { background-color: hsl(200, 20%, 95%) }
}

/* LANDING PAGE SECTION */
/* HEADER STYLE */
* {margin:0;padding:0;box-sizing:border-box;}
html,body {width:100%;font-family:'Montserrat',sans-serif!important;}
.container {width:100%;max-width:1200px;margin:0 auto;padding:0 20px;}
.top-bar {background-color:#560024;color:white;font-size:clamp(10px,1.2vw,13px);padding:10px 0;width:100%;}
.top-bar-content { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; position: relative; }
.top-left,
.top-right { flex: 1; display: flex; align-items: center; }
.top-left { justify-content: flex-start; }
.top-right { justify-content: flex-end; }
.top-left span,.top-right span {margin-right:15px;}
.top-left i,.top-right i {margin-right:5px;}
.top-right a {color:white;margin-left:12px;text-decoration:none;}
.top-center { position: static; text-align: center; flex: 1; }
.top-right {text-align:right;}
.main-header {background-color:#FBE9EB;box-shadow:0 2px 5px rgba(0,0,0,0.05);padding:15px 0;width:100%;transition:top 0.3s ease-in-out;position:sticky;top:0;z-index:999;}
.main-header.hidden {top:-100px;}
.nav-content {position:relative;display:flex;align-items:center;height:40px;}
.logo {flex:0 0 auto;}
.logo img {height:36px;margin:0;}
.nav-links {position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:52px;}
.nav-links a {text-decoration:none;color:#444;font-size:clamp(10px,1.5vw,16px);font-weight:500;}
.nav-links a.active,.nav-links a:hover {color:#560024;font-weight:bold;}
.nav-icons a {margin:0 13px;color:#222;text-decoration:none;font-size:clamp(12px,1.4vw,15px);}
.nav-icons i {font-size:clamp(14px,1.6vw,18px);}
.nav-icons {margin-left: auto; display: flex; align-items: center; }
.nav-icons a { margin: 0 13px; color: #222; text-decoration: none; font-size: clamp(12px, 1.4vw, 15px);}
.nav-icons i { font-size: clamp(14px, 1.6vw, 18px); }
.breadcrumb {font-size:14px;color:#333;margin:24px 0;}
.breadcrumb a {color:#96516E;text-decoration:none;}
.breadcrumb span {color:#666;margin-left:5px;}
.menu-toggle {display: none;}
.language-switcher { position: relative; display: inline-flex; align-items: center; cursor: pointer; overflow: hidden; }
.language-switcher a { flex: 1; text-align: center; font-size: 13px; font-weight: 600; text-decoration: none; margin-right:10px; color: #fff; line-height: 28px; }
.language-id { margin-left: 10px; }
.language-switcher::before { content: ""; position: absolute; }
.language-switcher.id-active::before { left: 35px; }
.language-switcher.en-active a:first-child, .language-switcher.id-active a:last-child { color: #dbb2b6; }

/* INDIKATOR CART */
.nav-icons { display: flex; align-items: center; gap: 15px; position: relative; }
.nav-icon { position: relative; display: inline-block; color: #333; text-decoration: none; transition: color 0.2s ease-in-out; }
.nav-icon:hover { color: #3f3e3eff; }
.cart-badge { position: absolute; top: -8px; right: -10px; background-color: #560024; color: #fff; font-size: 10px; font-weight: bold; padding: 2px 6px; border-radius: 50%; line-height: 1; min-width: 18px; text-align: center; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }


/* CAROUSEL STYLE */
.custom-carousel-collection { position: relative; width: 100%; height: 240px; overflow: hidden; cursor: pointer; }
.custom-carousel { position: relative; width: 100%; height: 100vh; overflow: hidden; cursor: pointer; }
.carousel-image { position: absolute; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; opacity: 0; transition: opacity 1s ease-in-out; top: 0; left: 0; z-index: 1; }
.carousel-image.active { opacity: 1; z-index: 2; }
.slide { width: 100%; height: 100vh; background-size: cover; background-position: center; flex-shrink: 0; }
.buy-now-btn { font-family: 'Montserrat', sans-serif; position: absolute; bottom: 5%; right: 150px; padding: 12px 40px; background-color: #F4D6CC; color: #560024; border: 2px solid #F4D6CC; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); opacity: 0.9; text-decoration: none; font-weight: bold; z-index: 3; transition: background-color 0.3s ease; }
.buy-now-btn:hover { background-color: #A65A6A; border: 2px solid #A65A6A; opacity: 0.9; }

/* BESTPRODUK STYLE */
.bestproduk-section {max-width:1100px;margin:50px auto;padding:0 80px;}
.bestproduk-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;padding:0 10px;flex-wrap:wrap;gap:20px;}
.bestproduk-title {font-size:24px;font-weight:700;color:#560024;}
.bestproduk-buttons {display:flex;justify-content:center;margin-top:30px;}
.view-all-link {position:relative;width:-moz-fit-content;width:fit-content;text-align:center;padding:8px 32px;font-size:12px;font-weight:bold;border:2px solid #A65A6A;color:#560024;text-decoration:none;overflow:hidden;z-index:1;transition:color 0.3s ease;}
.view-all-link::before {content:'';position:absolute;top:0;left:0;width:0%;height:100%;background-color:#A65A6A;z-index:-1;transition:width 0.4s ease;}
.view-all-link:hover::before {width:100%;}
.view-all-link:hover {color:white;}
.bestproduk-grid {display:grid;grid-template-columns:repeat(4, 1fr);gap:20px 20px;}
.bestproduk-card {background-color:#fff;overflow:hidden;position:relative;}
.bestproduk-hidden {display: none;}
.bestproduk-image-wrapper {position:relative;overflow:hidden;height:250px;}
.bestproduk-image {width:100%;height:250px;-o-object-fit:cover;object-fit:cover;transition:opacity 1s ease;position:absolute;top:0;left:0;}
.default-image {z-index:1;opacity:1;}
.hover-image {z-index:2;opacity:0;}
.bestproduk-image-wrapper:hover .default-image {opacity:0;}
.bestproduk-image-wrapper:hover .hover-image {opacity:1;}
.bestproduk-favorite-icon {position:absolute;top:10px;left:10px;background-color:#fff;border-radius:50%;padding:6px 10px;font-size:18px;cursor:pointer;}
.bestproduk-info {padding:12px 0;text-align:left;}
.bestproduk-name {padding:8px 0;font-size:16px;font-weight:bold;}
.bestproduk-kategori {font-size:12px;margin-bottom:7px;}
.collection-price {margin-bottom:5px;font-size:12px;text-align:left;padding-left:10px;}
.bestproduk-price {margin-bottom:6px;font-size:12px;}
.price-discounted {font-size:18px;color:#a09999;text-decoration:line-through;text-decoration-color:rgb(216,19,19);margin-right:8px;}
.price-now {color:#560024;font-size:18px;}
.edition-section {max-width:100%;margin:50px auto;padding:0 20px;}
.edition-header {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;}
.edition-title {font-size:20px;font-weight:600;color:#560024;margin-bottom:40px;}
.view-all-link {text-decoration:none;color:#560024;}
.edition-buttons {position:relative;padding:10px 40px;font-size:12px;font-weight:bold;border:2px solid #A65A6A;color:#560024;text-decoration:none;overflow:hidden;z-index:1;transition:color 0.3s ease;}
.edition-buttons::before {content:'';position:absolute;top:0;left:0;width:0%;height:100%;background-color:#A65A6A;z-index:-1;transition:width 0.4s ease;}
.edition-buttons:hover::before {width:100%;}
.edition-buttons:hover {color:white;}
.edition-grid {display:grid;grid-template-columns:repeat(4, 1fr);gap:20px 10px;}
.edition-card {background-color:#fff;overflow:hidden;position:relative;}
.edition-image-wrapper {position:relative;overflow:hidden;height:380px;}
.edition-label {position:absolute;top:10px;left:10px;border:1px solid white;color:white;font-size:12px;font-weight:500;padding:6px 10px;z-index:10;text-transform:uppercase;}
.edition-image {width:100%;height:380px;-o-object-fit:cover;object-fit:cover;display:block;transition:opacity 0.3s ease;position:absolute;top:0;left:0;}
.default-image {z-index:1;opacity:1;}
.hover-image {z-index:2;opacity:0;}
.edition-image-wrapper:hover .default-image {opacity:0;}
.edition-image-wrapper:hover .hover-image {opacity:1;}
.edition-favorite-icon {position:absolute;top:10px;left:10px;background-color:#fff;border-radius:50%;padding:6px 10px;font-size:18px;cursor:pointer;}
.edition-info {padding:12px 0;text-align:left;}
.edition-name {font-size:16px;font-weight:bold;margin-left:4px;}
.edition-kategori {font-size:14px;margin-bottom:20px;margin-left:4px;}
.edition-hidden {display:none;}
.edition-color-dot {display:flex;gap:4px;margin-bottom:12px;}
.edition-dot {width:12px;height:12px;border-radius:50%;border:1px solid #aaa;}
.bestseller-section {max-width:1100px;margin:50px auto;padding:0 80px;}
.bestseller-header {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;margin-bottom:24px;}
.bestseller-title {font-size:20px;font-weight:bold;color:#560024;}
.view-all-link {text-decoration:none;color:#560024;}
.bestseller-buttons {position:relative;padding:8px 26px;font-size:12px;font-weight:bold;border:2px solid #A65A6A;color:#560024;text-decoration:none;overflow:hidden;z-index:1;transition:color 0.3s ease;}
.bestseller-buttons::before {content:'';position:absolute;top:0;left:0;width:0%;height:100%;background-color:#A65A6A;z-index:-1;transition:width 0.4s ease;}
.bestseller-buttons:hover::before {width:100%;}
.bestseller-buttons:hover {color:white;}
.bestseller-grid {display:grid;grid-template-columns:repeat(4, 1fr);gap:20px 20px;}
.bestseller-card {background-color:#fff;border-radius:4px;overflow:hidden;position:relative;}
.bestseller-image-wrapper {position:relative;overflow:hidden;height:250px;}
.bestseller-image {width:100%;height:250px;-o-object-fit:cover;object-fit:cover;display:block;transition:opacity 0.3s ease;position:absolute;top:0;left:0;}
.default-image {z-index:1;opacity:1;}
.hover-image {z-index:2;opacity:0;}
.bestseller-image-wrapper:hover .default-image {opacity:0;}
.bestseller-image-wrapper:hover .hover-image {opacity:1;}
.bestseller-favorite-icon {position:absolute;top:10px;left:10px;background-color:#fff;border-radius:50%;padding:6px 10px;font-size:18px;cursor:pointer;}
.bestseller-info {padding:12px 0;text-align:left;}
.bestseller-name {padding:8px 0;font-size:16px;font-weight:bold;}
.bestseller-kategori {font-size:12px;margin-bottom:7px;}
.bestseller-hidden {display:none;}
.bestseller-price {margin-bottom:6px;font-size:12px;}
.diskon-label {position:absolute;top:0px;right: 0px;background-color:#560024;color:white;font-size:11px;padding:8px 8px;z-index:10;}

/* SWIPER ARRIVAL CAROUSEL */
.swiper { width: 100%; padding: 0; margin: 50px auto; overflow: hidden; }
.swiper-title { text-align: center; font-size: 28px; color: #560024; margin-bottom: 50px; }
.swiper-slide { width: 340px !important; flex-shrink: 0; transform: scale(0.63); transition: transform 0.5s ease-in-out; opacity: 1; position: relative; }
.swiper-slide-active { transform: scale(1); opacity: 1; z-index: 10; }
.swiper-slide img { width: 500px; height: 560px; -o-object-fit: cover; object-fit: cover; display: block; }
.arrival-caption { position: absolute; bottom: 30px; left: 20px; color: white; z-index: 20; text-shadow: 0 0 5px rgba(0, 0, 0, 0.6); }
.arrival-caption h3 { margin: 0; font-size: 18px; font-weight: bold; }
.arrival-caption button { margin-top: 5px; background: white; color: black; padding: 8px 12px; border: none; font-size: 12px; cursor: pointer; }
.swiper-button-prev, .swiper-button-next { color: white; }

/* BANNER BAWAH */
.collection-section{max-width:100%;margin:0 auto 60px auto;}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;}
.hero-item{position:relative;width:100%;height:800px;overflow:hidden;}
.hero-item img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;display:block;}

/* FOOTER STYLE */
.footer-section { background-color:#4a002a; background-image:url('/storage/page/footer.png'); background-repeat:no-repeat; background-size:cover; color:white; text-align:center; padding-left:1.25rem; padding-right:1.25rem; padding-top:30px; padding-bottom:30px; }
.footer-section-menu { display:flex; justify-content:center; gap:40px; margin-bottom:60px; flex-wrap:wrap; }
.footer-section-menu a { color:white; text-decoration:none; font-weight:500; font-size:16px; transition:color 0.3s ease, font-weight 0.3s ease; }
.footer-section-menu a:hover { color:#F4D6CC; font-weight:bold; }
.footer-section-menu a.active { color:#F4D6CC; font-weight:bold; padding-bottom:2px; }
.footer-section-social { display:flex; justify-content:center; gap:50px; margin-bottom:30px; align-items:center; flex-wrap:wrap; }
.footer-section-social a { color:white; font-size:30px; text-decoration:none; transition:transform 0.2s; }
.footer-section-social a:hover { transform:scale(1.2); }
.footer-section-shopee-icon img { width:30px; height:30px; -o-object-fit:contain; object-fit:contain; filter:drop-shadow(0 0 2px white); }
.footer-section-text { font-size:12px; opacity:0.6; margin-top:20px; }

/* Responsive Landing Page Section */
@media screen and (max-width:1024px){.container{padding:0 15px;}.nav-links{gap:20px;}}
@media screen and (max-width:768px) {
  /* Header */
  .top-bar-content, .nav-content {flex-direction: row;align-items: center;justify-content: space-between;gap: 10px;height: auto;}
  .menu-toggle {display: block;background: none;border: none;font-size: 24px;cursor: pointer;color: #333;z-index: 1001;}
  .logo { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1000; }
  .logo img { height: 35px; }
  .nav-icons { margin-left: auto; z-index: 1000; }
  .nav-links { display: none; flex-direction: column; align-items: center; gap: 15px; width: 100%; background-color: #FBE9EB; position: absolute; top: 100%; left: 0; padding: 20px 0; box-shadow: 0 4px 6px rgba(0,0,0,0.1); border-top: 1px solid #eee; transition: all 0.3s ease; z-index: 999; animation: none; }
  .nav-links.active { display: flex; animation: dropdownFade 0.3s ease forwards; }
  @keyframes dropdownFade { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
  .nav-links a { text-decoration: none; color: #444; font-size: 12px; font-weight: 500; transition: color 0.2s ease; }
  .nav-links a:hover, .nav-links a.active { color: #560024; font-weight: bold; }
  .breadcrumb { font-size: 13px; text-align: center; padding: 0 10px; }

  /* Indicator Cart */
  .nav-icons {gap:10px;}
  .cart-badge {top:-6px;right:-8px;font-size:9px;min-width:16px;padding:2px 5px;}

  /* Carousel */
  .custom-carousel { height: 70vh; }
  .slide { height: 70vh; }

  /* Product */
  .bestproduk-grid, .bestseller-grid {grid-template-columns:repeat(4,1fr);}
  .edition-grid {grid-template-columns:repeat(2,1fr);}
  .bestproduk-section, .edition-section, .bestseller-section {padding:0 20px;}
  .bestproduk-title, .edition-title, .bestseller-title {font-size:18px;}
  .bestproduk-name, .edition-name, .bestseller-name, {font-size:12px;}
  .edition-label {font-size:10px;}
  .price-discounted, .price-now {font-size:12px;}

  /* Swiper Arrival */
  .swiper-title { font-size: 20px; margin-bottom: 30px; }
  .swiper-slide { width: 200px !important; }
  .swiper-slide img { max-width: 280px; max-height: 350px; }

  /* Buttom Banner */
  .hero-grid{grid-template-columns:repeat(2,1fr);}.hero-item{height:400px;}

  /* Footer */
  .footer-section { padding:40px 15px; }
  .footer-section-menu {display:none;}
  .footer-section-social { gap:20px; }
  .footer-section-social a { font-size:24px; }
  .footer-section-shopee-icon img { width:24px; height:24px; }
  .footer-section-text { font-size:11px; }
}
@media screen and (max-width:480px) {
  /* Header */
  .logo img {height: 25px;}
  .top-center {font-size: 9px;}
  .top-right a {margin-left:5px;}

  /* Indikator Cart */
  .nav-icons {gap:8px;}
  .nav-icon {font-size:14px;}
  .cart-badge {top:-5px;right:-6px;font-size:8px;min-width:14px;padding:1px 4px;}

  /* Carousel */
  .custom-carousel { height: 60vh; }
  .slide { height: 60vh; }

  /* Product */
  .bestproduk-grid, .edition-grid, .bestseller-grid {grid-template-columns:repeat(2,1fr);}
  .bestproduk-section, .edition-section, .bestseller-section {padding:0 10px;}
  .bestproduk-title, .edition-title, .bestseller-title {font-size:18px;}
  .bestproduk-name, .edition-name, .bestseller-name {font-size:13px;}
  .bestproduk-kategori, .edition-kategori, .bestseller-kategori {font-size:11px;}
  .edition-image-wrapper, .edition-image {height:200px;}
  .price-discounted, .price-now {font-size:11px;}

  /* Swiper Arrival */
  .swiper-title { font-size: 16px; }
  .swiper-slide { width: 140px !important; }
  .swiper-slide img { max-width: 180px; max-height: 240px; }

  /* Buttom Banner */
  .hero-grid{grid-template-columns:1fr;} .hero-item{height:300px;}

  /* Footer */
  .footer-section-social a { font-size:22px; }
  .footer-section-text { font-size:10px; }
}

/* COLLECTION SECTION */
.produk-header { max-width: 1360px; margin: 60px auto 0px auto; padding: 0 50px; }
.produk-header h1 { text-align: center; font-size: 28px; font-weight: 400; color: #560024; margin-bottom: 20px; }
.produk-search-wrapper { display: flex; justify-content: flex-end; }
.produk-search-form { display: flex; align-items: center; border: 1px solid rgba(86, 0, 36, 0.3); padding: 4px 10px; border-radius: 24px; background: #fff; }
.produk-search-form input[type="text"] { border: none; outline: none; font-size: 14px; padding: 6px; width: 160px; }
.produk-search-form button { background: none; border: none; cursor: pointer; color: rgba(86, 0, 36, 0.3); padding-left: 5px; display: flex; align-items: center; }
.produk-search-form button:hover { color: #3a001a; }
.produk-section { max-width: 1360px; margin: 16px auto 50px auto; padding: 0 50px; display: flex; gap: 20px; }
.produk-sidebar { width: 220px; flex-shrink: 0; margin-right: 70px; }
.produk-title { font-size: 16px; font-weight: 500; border-bottom: 1px solid #560024; padding-bottom: 20px; }
.produk-sidebar h2 { font-size: 16px; font-weight: 500; color: #560024; margin: 20px 0;}
.produk-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.produk-tag { display: flex; align-items: center; justify-content: space-between; background-color: #d09ca0; color: #560024; padding: 6px 12px; min-width: 200px; max-width: -moz-fit-content; max-width: fit-content; height: 36px; box-sizing: border-box; font-weight: 500; }
.produk-tag a { margin-left: 10px; font-weight: bold; color: #560024; text-decoration: none; cursor: pointer; font-size: 16px; }
.produk-tag a:hover { color: #3a001a; }
.produk-filter-box { width: 260px; height: auto; border: none; padding: 10px 0px; }
.produk-filter-box p { margin-bottom: 10px; font-weight: 600; }
.produk-checkbox-group label { display: block; margin-bottom: 10px; font-size: 14px; margin-left: 10px; }
input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 16px; height: 16px; border: 2px solid #560024; border-radius: 2px; background-color: #fff; vertical-align: middle; cursor: pointer; position: relative; margin-right: 8px; }
input[type="checkbox"]:checked::before { content: ""; display: block; width: 100%; height: 100%; background-color: #560024; position: absolute; top: 0; left: 0; }
.produk-actions { margin-top: 15px; display: flex; gap: 10px; align-items: center; }
.produk-clear { text-decoration: underline; color: #560024; font-size: 14px; background: none; border: none; cursor: pointer; }
.produk-apply { background-color: #4a0e18; color: white; padding: 6px 15px; border: none; cursor: pointer; font-size: 14px; border-radius: 3px; }
.produk-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px 20px; flex: 1; }
.produk-card { padding: 10px; text-align: center; background-color: #fff; }
.produk-card img { width: 100%; height: 320px; -o-object-fit: cover; object-fit: cover; margin-bottom: 12px; }
.produk-card h3 { text-align: left; margin-bottom: 6px; padding-left: 10px; font-weight:500; font-size: 14px; }
.produk-hidden {display:none;}
.produk-color-dot { display: flex; gap: 4px; margin-bottom: 12px; }
.produk-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid #aaa; }
.produk-black { background-color: black; }
.produk-pink { background-color: #f58da3; }
.produk-filter-title { font-weight: bold; padding: 0 8px; color: #000; font-size: 16px; position: absolute; top: -12px; left: 15px; background: #fff; }
.produk-buttons { text-align: center; margin-top: 30px; width: 100%; }
.produk-buttons button { padding: 10px 40px; font-size: 12px; margin-left: 10px; cursor: pointer; background-color: transparent; color: #560024; border: 1px solid #560024; text-decoration: none; }
.produk-buttons button:hover { background-color: #dbcbd2; }
.produk-card-link { text-decoration: none; color: inherit; display: inline-block; }
.produk-card-link:hover .produk-card { box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); transform: translateY(-2px); transition: 0.3s; }
.more-link { position: relative; width: -moz-fit-content; width: fit-content; text-align: center; padding: 8px 32px; font-size: 12px; font-weight: bold; border: 2px solid #A65A6A; color: #560024; text-decoration: none; overflow: hidden; z-index: 1; transition: color 0.3s ease; }
.more-link::before { content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background-color: #A65A6A; z-index: -1; transition: width 0.4s ease; }
.more-link:hover::before { width: 100%; }
.more-link:hover { color: white; }
.diskon-label-collection { position: absolute; top: 10px; right: 10px; background-color: #560024; color: white; font-size: 12px; padding: 8px 8px; z-index: 10;}
.produk-price-discounted {font-size:18px;color:#a09999;text-decoration:line-through;text-decoration-color:rgb(216,19,19);margin-right:8px;}
.produk-price-now {color:#560024;font-size:18px;}
@media (max-width: 1024px) {
  .produk-section { flex-direction: column; padding: 0 30px; }
  .produk-sidebar { width: 100%; margin-right: 0; }
  .produk-product-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .produk-header h1 { font-size: 24px; }
}
@media (max-width: 768px) {
  .produk-search-wrapper { margin-bottom: 20px; }
  .produk-search-form input[type="text"] { font-size: 11px;}
  /* .produk-sidebar h2 { font-size: 14px;} */
  .produk-tag a {font-size: 12px; }
  .produk-product-grid { grid-template-columns: repeat(3, 1fr); gap: 15px; }
  .produk-card img { height: 260px; }
  .produk-header h1 { font-size: 22px; }
}
@media (max-width: 480px) {
  .produk-section { padding: 0 15px; }
  .produk-product-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
  .produk-card img { height: 220px; }
  .produk-header h1 { font-size: 20px; }
  .produk-tag { min-width: auto; padding: 4px 8px; }
  .produk-tag a {font-size: 10px; }
  .produk-search-form input[type="text"] { width: 100px; font-size: 10px; }
  .produk-buttons button { padding: 8px 20px; font-size: 12px; }
}

/* ABOUT SECTION */
.about-section {color:#333;padding:50px 40px;}
.about-container {display:flex;flex-direction:column;align-items:center;justify-content:center;padding:70px;text-align:center;}
.about-left {flex:1;min-width:280px;margin-bottom:60px;}
.about-logo {max-width:400px;margin:0 auto;width:100%;}
.about-right {flex:2;max-width:620px;width:100%;padding:0 20px;font-size:18px;line-height:1.8;color:#333;text-align:center;}
.about-recommend {text-align:center;margin:50px 0;}
.about-recommend h2 {font-size:28px;font-weight:bold;margin-bottom:30px;}
.recommend-grid {display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
.recommend-card {background:transparent;padding:15px;width:270px;height:360px;text-align:left;transition:transform 0.3s;}
.recommend-card:hover {transform:translateY(-5px);}
.recommend-card a {text-decoration:none;}
.recommend-card img {width:100%;height:80%;-o-object-fit:cover;object-fit:cover;margin-bottom:10px;}
.recommend-card h3 {font-size:18px;margin-bottom:5px;color:#333;}
.recommend-card p {font-size:14px;color:#a66;margin-bottom:10px;}
@media (max-width:1024px) {
  .about-section {padding:60px 30px;}
  .about-container {margin-top:80px;padding-bottom:80px;}
  .about-content {flex-direction:column;margin-bottom:100px;}
  .about-left, .about-right {padding:0;text-align:center;}
  .about-right {font-size:15px;padding:0 10px;}
  .about-recommend h2 {font-size:24px;}
  .recommend-card {width:220px;height:330px;}
  .recommend-card h3, .recommend-card p {font-size:16px;}
  .recommend-card p {font-size:13px;}
}
@media (max-width:768px) {
  .about-section {padding:40px 20px;}
  .about-container {margin-top:60px;padding-bottom:60px;}
  .about-recommend h2 {font-size:22px; text-align: center; margin-bottom: 20px;margin-left:0;}
  .recommend-grid {display: grid;grid-template-columns: repeat(4, 1fr);}
  .recommend-card {width:100%;height:auto;padding:5px;}
  .recommend-card img {max-height:220px;-o-object-fit: cover;object-fit: cover;}
  .recommend-card h3, .recommend-card p {font-size:16px;}
  .recommend-card p {font-size:13px;}
}
@media (max-width:480px) {
  .about-section {padding:40px 20px;}
  .about-container {margin-top:5px;padding-bottom:10px;}
  .about-right {font-size:12px;padding:0 10px;}
  .about-recommend h2 {font-size:18px; text-align: center; margin-bottom: 20px;margin-left:0;}
  .recommend-grid {display: grid;grid-template-columns: repeat(2, 1fr);}
  .recommend-card {width:100%;height:auto;padding:10px;}
  .recommend-card img {max-height:220px;-o-object-fit: cover;object-fit: cover;}
  .recommend-card h3, .recommend-card p {font-size:16px;}
  .recommend-card p {font-size:13px;}
}

/* FAQ SECTION */
.faq-section { padding: 30px; margin-bottom: 40px; }
.faq-section h2 { font-size: 24px; margin-bottom: 50px; font-weight: 700; text-align: center; color: #333; }
.faq-container { max-width: 700px; margin: 0 auto; }
.faq-item { border: 1px solid #e0e0e0; border-radius: 10px; margin-bottom: 15px; overflow: hidden; transition: box-shadow 0.1s ease; }
.faq-item:hover { box-shadow: 0 4px 10px rgba(0,0,0,0.08); }
.faq-question { width: 100%; text-align: left; font-weight: 600; padding: 15px 20px; background: #A65A6A; border: none; outline: none; cursor: pointer; font-size: 16px; color: white; display: flex; justify-content: space-between; align-items: center; transition: background 0.3s ease; }
.faq-question:hover { background: #560024; }
.faq-answer { max-height: 0; overflow: hidden; padding: 0 20px; font-size: 14px; color: #555; line-height: 1.6; background: #fafafa; transition: max-height 0.4s ease, padding 0.3s ease; }
.faq-item.active .faq-answer { max-height: 200px; padding: 15px 20px; }
.faq-question::after { content: '\25BC'; font-size: 14px; transition: transform 0.3s ease; }
.faq-item.active .faq-question::after { transform: rotate(180deg); }
@media (max-width: 768px) {
  .faq-section { padding: 20px; }
  .faq-section h2 { font-size: 20px; margin-bottom: 30px; }
  .faq-question { font-size: 12px; padding: 12px 16px; }
  .faq-container { width: 500px;}
  .faq-answer { font-size: 12px; padding: 0 16px; }
  .faq-item.active .faq-answer { padding: 12px 16px; }
}
@media (max-width: 480px) {
  .faq-section { padding: 15px; }
  .faq-section h2 { font-size: 16px; margin-bottom: 25px; }
  .faq-container { width: 300px;}
  .faq-question { font-size: 11px;}
  .faq-answer { font-size: 10px; }
}

/* DETAIL SECTION */
.detail-product-page { margin: 0 200px; padding: 60px 0; margin-bottom: 50px; }
.detail-container { width: 90%; max-width: 1200px; margin: auto; }
.detail-product-wrapper { display: flex; flex-wrap: wrap; gap: 40px; }
.detail-product-images { flex: 1; min-width: 300px; }
.detail-main-image { width: 100%; margin-bottom: 10px; -o-object-fit: cover; object-fit: cover; }
.detail-thumbnail-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; }
.detail-thumbnail-wrapper img { width: 100%; }
.detail-product-info { flex: 1; min-width: 300px; }
.detail-section { border-bottom: 1px solid #ccc; padding: 5px 0; padding-left: 0px; margin-bottom: 15px; }
.detail-section p { font-size: 16px; color: #560024; margin-bottom: 6px; }
.detail-section-info { padding: 5px 0; padding-bottom: 30px; margin-bottom: 30px; }
.detail-section-info p { margin-bottom: 16px; font-size: 12px; color: #444; }
.detail-section:last-child { border-bottom: none; }
.detail-product-name { font-size: 26px; margin-bottom: 5px; }
.detail-size-wrapper,
.detail-quantity-wrapper { margin-bottom: 15px; }
.detail-price {margin-bottom:20px;font-size:16px;text-align:left;}
.detail-price-discounted {color:#a09999;text-decoration:line-through;text-decoration-color:rgb(216,19,19);margin-right:8px;}
.detail-price-now {color:#560024;}
select, input[type="number"] { padding: 8px; width: 100px; margin-left: 10px; }
.detail-btn-soldout { background-color: #5a4b32; color: white; padding: 10px 20px; border: none; cursor: not-allowed; margin-top: 10px; }
.detail-btn-wishlist { background-color: #f7f5f0; color: #5a4b32; padding: 10px 20px; border: 1px solid #ccc; margin-left: 10px; margin-top: 10px; cursor: pointer; }
.detail-product-description { margin-top: 30px; font-size: 14px; color: #444; line-height: 1.6; }
.detail-breadcrumb { padding: 15px 0; font-size: 14px; color: #888; }
.detail-recommend { text-align: center; margin-bottom: 50px; }
.detail-recommend h2 { font-size: 24px; margin-bottom: 40px; font-weight: bold; }
.detail-recommend-grid { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
.detail-recommend-card { background: white; padding: 5px; width: 250px; height: 350px; text-align: left; transition: transform 0.3s; }
.detail-recommend-card:hover { transform: translateY(-5px); }
.detail-recommend-card a { text-decoration: none; }
.detail-recommend-card img { width: 100%; height: 80%; -o-object-fit: cover; object-fit: cover; margin-bottom: 10px; }
.detail-recommend-card h3 { font-size: 18px; margin-bottom: 5px; color: #333; }
.detail-recommend-card p { font-size: 14px; color: #a66; margin-bottom: 10px; }
.detail-color-wrapper { margin-bottom: 15px; }
.detail-color-wrapper p { margin-bottom: 8px; font-size: 12px; color: #7d5f37; }
.detail-color-dot { display: flex; gap: 4px; margin-bottom: 6px; padding-left: 5px; }
.detail-dot { display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 1px solid #ccc;}
.detail-color-dot label {display: inline-block; margin-right: 8px;}
.detail-size-wrapper { margin-bottom: 20px; }
.detail-size-wrapper p { margin-bottom: 5px; font-size: 12px; color: #7d5f37; text-align: left; }
.detail-size label {display: inline-flex; align-items: center; }
.detail-size { display: flex; flex-wrap: wrap; margin-top: 10px; padding-left: 5px; height: 25px; gap: 6px; }
.detail-size-nama { display: flex; padding: 5px 16px; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; color: #560024; border: 1px solid #FBE9EB; background-color: #FBE9EB; }
input[type="radio"]:checked + .detail-dot {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid #373333ff;
}
input[type="radio"]:checked + .detail-size-nama {
  border-color: #373333ff;
}
.detail-quantity-wrapper { display: flex; align-items: center; gap: 10px; margin-top: 20px;}
.detail-quantity-wrapper input[type="number"] { width: 60px; padding: 6px 10px; border: 1px solid #ccc;  border-radius: 5px; font-size: 14px; outline: none; transition: border-color 0.2s; }
.detail-quantity-label { font-size: 12px; color: #7d5f37; text-align: left; }
.detail-quantity-wrapper input[type="number"]:focus { border-color: #333; }
.btn-buy-now { padding: 8px 155px; background-color: #560024; color: #fff; border: 1px solid #560024; cursor: pointer; font-weight: bold; }
.btn-add-cart { padding: 8px 134px; background-color: transparent; color: #560024; border: 1px solid black; cursor: pointer; font-weight: bold;}
.detail-buy-wrapper { overflow: hidden; text-align: center; }
.detail-cart-wrapper { overflow: hidden; text-align: center; }
.detail-deskripsi-wrapper { padding: 0px 10px; }
.detail-deskripsi-wrapper h3 { color: #333; font-size: 16px; font-weight: 600; margin-bottom: 10px; }
.detail-deskripsi-wrapper p { padding-left: 5px; color: #5a5757; font-size: 12px; line-height: 1.7; margin: 0; }
.detail-deskripsi-wrapper h6 { padding-left: 5px; color: #333; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.detail-deskripsi-produk,
.detail-deskripsi-bahan,
.detail-deskripsi-ukuran { margin-bottom: 20px; }
@media (max-width: 1024px) {
  .detail-product-page { margin: 0 80px; padding: 40px 0; }
  .detail-product-wrapper { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 30px; }
  .detail-product-images, .detail-product-info { width: 100%; } 
  .btn-buy-now{ padding: 10px 100px; }
  .btn-add-cart { padding: 10px 80px; }
  .detail-recommend h2 {font-size:24px;}
  .detail-recommend-card {width:220px;height:330px;}
  .detail-recommend-card h3, .detail-recommend-card p {font-size:16px;}
  .detail-recommend-card p {font-size:13px;}
}
@media (max-width: 768px) {
  .detail-product-page { margin: 0 40px; padding: 30px 0; }
  .detail-product-name { font-size: 20px; }
  .detail-color-dot { gap: 2px; }
  .detail-dot { width: 14px; height: 14px;}
  .detail-size-nama { padding: 4px 12px; font-size: 10px; }
  .detail-quantity-wrapper input[type="number"] { font-size: 11px;}
  .btn-buy-now { padding: 10px 70px; font-size: 10px; }
  .btn-add-cart { padding: 10px 54px; font-size: 10px; }
  .detail-recommend h2 {font-size:22px; text-align: center; margin-bottom: 20px;margin-left:0;}
  .detail-recommend-grid {display: grid;grid-template-columns: repeat(4, 1fr);}
  .detail-recommend-card {width:100%;height:auto;padding:5px;}
  .detail-recommend-card img {max-height:220px;-o-object-fit: cover;object-fit: cover;}
  .detail-recommend-card h3, .recommend-card p {font-size:16px;}
  .detail-recommend-card p {font-size:13px;}
}
@media (max-width: 480px) {
  .detail-product-wrapper { display: flex; flex-wrap: wrap; gap: 20px; }
  .detail-product-page { margin: 0 15px; padding: 20px 0; }
  .detail-product-name { font-size: 18px; }
  .detail-price { font-size: 14px; }
  .btn-buy-now, .btn-add-cart { width: 100%; padding: 12px; font-size: 12px; }
  .detail-recommend h2 {font-size:18px; text-align: center; margin-bottom: 20px;margin-left:0;}
  .detail-recommend-grid {display: grid;grid-template-columns: repeat(2, 1fr);}
  .detail-recommend-card {width:100%;height:auto;padding:10px;}
  .detail-recommend-card img {max-height:220px;-o-object-fit: cover;object-fit: cover;}
  .detail-recommend-card h3, .recommend-card p {font-size:16px;}
  .detail-recommend-card p {font-size:13px;}
}

/* CART SECTION */
.cart-container {max-width:1150px;margin:auto;margin-top:30px;margin-bottom:80px;padding:0 20px;}
.cart-container h2 {margin-bottom:40px;font-size:32px;font-weight:bold;text-align:left;}
.cart-container p {text-align:center;padding:80px 0;margin-bottom:60px;font-size:18px;font-weight:400;}
.cart-logo {align-items:center;display:flex;justify-content:center;margin-bottom:20px;padding:16px 0;}
.cart-logo img {height:50px;margin:0;}
.cart-table {width:100%;border-collapse:collapse;margin-bottom:20px;}
.cart-table td.product-cell,.cart-table th:first-child {width:40%;}
.cart-table th {text-align:center;padding:12px;background:none;border-bottom:1px solid #560024;font-size:14px;font-weight:600;}
.cart-table td {padding:15px;vertical-align:middle;border-bottom:1px solid #560024;}
.product-cell .product-info {display:flex;align-items:flex-start;gap:15px;}
.product-cell img {width:150px;height:auto;max-height:200px;-o-object-fit:cover;object-fit:cover;border-radius:6px;}
.product-details {display:flex;flex-direction:column;gap:6px;}
.product-name {font-size:16px;color:#560024;font-weight:600;margin-bottom:5px;}
.product-meta {font-size:12px;color:#666;padding-left:8px;}
.amount-cell {text-align:center;}
.quantity-form {display:inline-flex;align-items:center;border:1px solid #ddd;padding:2px 4px;gap:5px;border-radius:4px;}
.quantity-form button {background:none;border:none;padding:4px 8px;cursor:pointer;font-size:14px;}
.quantity-controls {display:flex;align-items:center;gap:5px;}
.quantity-controls input[name="quantity"] {width:40px;text-align:center;background:none;border:none;pointer-events:none;font-size:12px;}
.total-cell {text-align:right;}
.total-cell span {font-size:16px;color:#560024;font-weight:bold;}
.total-price {font-weight:bold;font-size:14px;margin-bottom:5px;}
.remove-btn {background:none;border:none;color:red;font-size:13px;cursor:pointer;}
.cart-summary {padding-top:15px;}
.summary-row {display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:18px;}
.summary-row span {font-size:14px;color:#333;}
.summary-row h3 {font-size:16px;font-weight:bold;color:#560024;}
.summary-buttons {display:flex;flex-direction:column;align-items:flex-end;font-size:14px;margin-bottom:40px;gap:10px;}
.cart-checkout {background:#560024;padding:12px 36px;color:white;text-decoration:none;font-weight:600;border-radius:4px;transition:0.3s;}
.cart-checkout:hover {background:#a1053a;}
.cart-back {background:#eee;padding:12px 62px;color:black;text-decoration:none;font-weight:600;border-radius:4px;transition:0.3s;}
.cart-back:hover {background:#ddd;}
.cart-price-discounted {font-size:11px;color:#a09999;text-decoration:line-through;text-decoration-color:rgb(216,19,19);margin-right:8px;}
.cart-price-now {color:#560024;font-size:11px;}
@media(max-width:768px){
  .product-cell img {width:100px;height:auto;margin:0 auto;}
  .total-cell {text-align:flex-end;}
  .cart-container h2 {font-size:24px; margin-top:40px;}
  .cart-logo {display:none;}
  .cart-checkout {font-size:12px; padding:10px 20px;}
  .cart-back {font-size:12px; padding:10px 43px;}
}
@media (max-width: 480px) {
  .cart-table td.product-cell, .cart-table th:first-child {width:100%;}
  .cart-table, .cart-table thead, .cart-table tbody, .cart-table th, .cart-table td, .cart-table tr {display:block;width:100%;}
  .cart-table thead {display:none;}
  .cart-table tr {margin-bottom:20px;border:1px solid #ddd;border-radius:10px;padding:15px;box-shadow:0 2px 6px rgba(0,0,0,0.05);background:#fff;}
  .product-info {display:flex;flex-direction:column;align-items:center;width:100%;}
  .product-cell img {flex:1;align-self:flex-start;width:100%;max-width:200px;height:auto;margin-bottom:10px;border-radius:8px;}
  .product-details {flex:1;align-self:flex-end;width:100%;}
  .product-name {font-size:15px;font-weight:700;color:#560024;margin-bottom:5px;}
  .product-meta {font-size:13px;color:#777;margin-bottom:4px;}
  .amount-cell {text-align:center;margin-top:10px;width:100%;}
  .quantity-form {display:inline-flex;align-items:center;justify-content:center;border:1px solid #ddd;border-radius:6px;padding:4px 6px;gap:6px;}
  .quantity-form button {font-size:13px;padding:4px 8px;}
  .quantity-controls input[name="quantity"] {width:30px;font-size:13px;text-align:center;}
  .amount-cell form[action*="remove"] {display:inline-block;margin-left:10px;}
  .total-cell {text-align:center;margin-top:15px;width:100%;}
  .total-price {font-size:15px;font-weight:700;color:#560024;}
  .summary-buttons {width:100%;align-items:stretch;}
  .cart-checkout, .cart-back {width:100%;text-align:center;font-size:14px;padding:12px;}
  .cart-container h2 {text-align:center;font-size:20px;margin-bottom:20px;}
  .cart-summary {margin-top:30px;}
  .summary-row {justify-content:space-between;padding:0 10px;}
}

/* FORM CHECKOUT SECTION */
.checkout-container { display: flex; max-width: 1000px; margin: 40px auto; margin-bottom: 40px; padding: 40px; gap: 40px; }
.checkout-form { flex: 1; }
.checkout-kontak { margin-bottom: 36px; }
.checkout-summary { flex: 1; background: #f9f9f9; padding: 20px; }
.checkout-kontak-title { margin-bottom: 10px; font-size: 16px; font-weight: bold; }
.checkout-kontak-data::-moz-placeholder {font-family: 'Montserrat',sans-serif!important;color: #aaa;font-size: 12px;}
.checkout-kontak-data::placeholder {font-family: 'Montserrat',sans-serif!important;color: #aaa;font-size: 12px;}
.checkout-pengantaran-title { margin-bottom: 10px; font-size: 16px; font-weight: bold; }
.checkout-kontak-data { width: 100%; padding: 10px; margin-bottom: 15px; border: 2px solid #6b0f2e; border-radius: 6px; }
.checkout-pengantaran-telepon {display: flex;align-items: center;margin-bottom: 15px;}
.checkout-pengantaran-telepon .prefix {padding: 10px;padding-right: 15px;background: #6b0f2e;border: 2px solid #6b0f2e;border-radius: 6px 0 0 6px;font-size: 12px;font-weight: 500;color: #fff;line-height: 1.5;}
.checkout-pengantaran-telepon .telepon-input {flex: 1;padding: 10px;border: 2px solid #6b0f2e;border-left: none;border-radius: 0 6px 6px 0;font-size: 12px;color: #000;line-height: 1.5;margin-bottom: 0; }
.checkout-pengantaran-telepon .telepon-input::-moz-placeholder {color: #aaa;font-family: 'Montserrat', sans-serif!important;font-size: 12px;}
.checkout-pengantaran-telepon .telepon-input::placeholder {color: #aaa;font-family: 'Montserrat', sans-serif!important;font-size: 12px;}
.checkout-pengantaran-data { width: 100%; padding: 10px; margin-bottom: 15px; border: 2px solid #6b0f2e; border-radius: 6px; }
.checkout-pengantaran-data::-moz-placeholder {font-family: 'Montserrat',sans-serif!important;color: #aaa;font-size: 12px;}
.checkout-pengantaran-data::placeholder {font-family: 'Montserrat',sans-serif!important;color: #aaa;font-size: 12px;}
.select2-container {width:100% !important;margin-bottom:15px !important;font-family:'Montserrat',sans-serif;}
.select2-container--default .select2-selection--single {height:40px !important;padding:5px 0px !important;border:2px solid #6b0f2e !important;border-radius:6px;background-color:#fff;font-size:12px;color:#000;line-height:1.5;}
.select2-container--default .select2-selection--single .select2-selection__placeholder {font-size:12px !important;}
.select2-container--default .select2-selection--single .select2-selection__rendered {padding-left:2px;font-size:12px;color:#000;}
.select2-container--default .select2-selection--single .select2-selection__arrow {height:100%;right:10px;top:7px !important;}
.select2-container--default .select2-dropdown {border:2px solid #6b0f2e;border-radius:6px;font-size:12px;}
.select2-container--default .select2-results__option {padding:8px 12px;font-size:12px;color:#000;}
.select2-container--default .select2-results__option--highlighted {background-color:#6b0f2e;color:#fff;}
.checkout-name-group, .city-group { display: flex; gap: 10px; }
.checkout-payment-btn { width: 100%; background-color: #6b0f2e; color: white; padding: 12px; border: none; border-radius: 6px; cursor: pointer; margin-top: 30px; }
.checkout-product-item { display: flex;align-items: flex-start; margin-bottom: 40px; gap: 20px; }
.checkout-product-info {display: flex;flex-direction: column;justify-content: flex-start;}
.checkout-product-item img { width: 100px; height: 120px; border-radius: 4px; -o-object-fit: cover; object-fit: cover;}
.checkout-product-info p { margin: 4px; font-size: 12px; color: #333; }
.checkout-product-price { margin-left: auto; white-space: nowrap; font-size:13px; color: #333;}
.checkout-total-section { margin-top: 40px; }
.checkout-subtotal, .checkout-total { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 16px; }
.checkout-total-price { font-size: 16px; font-weight: bold; }
.checkout-newsletter input[type="checkbox"] {appearance:none; -webkit-appearance:none; -moz-appearance:none; width:16px; height:16px; border:2px solid #560024; border-radius:4px; margin-right:6px; cursor:pointer; position:relative; top:-2px; left:3px;}
.checkout-newsletter input[type="checkbox"]:checked {background-color:#560024; border-color:#560024;}
.checkout-newsletter input[type="checkbox"]:checked::after {content:""; position:absolute; left:4px; top:0px; width:4px; height:8px; border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);}
.checkout-newsletter label {font-size:14px; font-weight:200; color:#560024; cursor:pointer;}
.checkout-payment-section {margin-top:20px;}
.checkout-payment-title {font-size:16px;font-weight:bold;margin-bottom:12px;}
.checkout-payment-group {margin-bottom:18px;border:1px solid #a09f9fff;border-radius:8px;overflow:hidden;}
.checkout-payment-toggle {background:#F3E5EB;color:black;border:none;padding:10px 16px;width:100%;text-align:left;cursor:pointer;font-weight:500;font-size:12px;font-family:'Montserrat',sans-serif!important;transition:background 0.3s ease;}
.checkout-payment-toggle:hover {background:#F4D6CC;}
.checkout-payment-list {max-height:0;opacity:0;overflow:hidden;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:15px;padding:0;transition:max-height 0.4s ease,opacity 0.4s ease,padding 0.4s ease;}
.checkout-payment-list.show {max-height:1000px;opacity:1;padding:10px 10px;}
.checkout-payment-method {position:relative;}
.checkout-payment-method input[type="radio"] {display:none;}
.checkout-payment-method label {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff;border:2px solid #ddd;border-radius:12px;padding:20px 15px;text-align:center;cursor:pointer;height:90px;opacity:1;transition:all 0.2s ease;}
.checkout-payment-method label:hover {border-color:#828080ff;box-shadow:0 6px 12px rgba(0,0,0,0.1);opacity:1;}
.checkout-payment-method img {max-width:100px;max-height:50px;-o-object-fit:contain;object-fit:contain;transition:0.3s;}
.checkout-payment-method input[type="radio"]:checked + label {border:2px solid black;box-shadow:0 6px 12px rgba(0,0,0,0.1);opacity:1;}
.checkout-voucher { position: relative; font-family:'Montserrat',sans-serif!important; }
.checkout-voucher h5 { font-size: 16px; font-weight: bold; color: #6b0f2e; margin-bottom: 10px; }
.checkout-voucher select { width: 100%; height: 40px; margin-left: 0px; border:1px solid #a09f9fff; background-color: #F3E5EB; border-radius: 6px; padding: 5px 10px; font-size: 12px; font-weight: 500; font-family: 'Montserrat', sans-serif; transition: 0.3s ease; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.select-arrow { position: absolute; right: 10px; top: 58%; transform: translateY(15%); font-size: 12px; color: #6b0f2e; pointer-events: none; }
.checkout-voucher select:focus { outline: none; border-color: #a09f9fff; box-shadow: 0 0 5px rgba(161,5,58,0.2); }
.checkout-voucher option { font-size: 12px; color: #000; background-color: #F3E5EB; }
.checkout-ekspedisi-section {margin-top:20px;}
.checkout-ekspedisi-title {font-size:16px;font-weight:bold;margin-bottom:12px;}
.checkout-ekspedisi-group {margin-bottom:18px;border:1px solid #a09f9fff;border-radius:8px;overflow:hidden;}
.checkout-ekspedisi-toggle {background:#F3E5EB;color:black;border:none;padding:10px 16px;width:100%;text-align:left;cursor:pointer;font-weight:500;font-size:12px;font-family:'Montserrat',sans-serif!important;transition:background 0.3s ease;}
.checkout-ekspedisi-toggle:hover {background:#F4D6CC;}
.checkout-ekspedisi-list {max-height:0;opacity:0;overflow:hidden;display:grid;grid-template-columns:repeat(2,1fr);gap:20px;margin-top:15px;padding:0;transition:max-height 0.4s ease,opacity 0.4s ease,padding 0.4s ease;}
.checkout-ekspedisi-list.show {max-height:1000px;opacity:1;padding:10px 10px;}
.checkout-ekspedisi-method {position:relative;}
.checkout-ekspedisi-method input[type="radio"] {display:none;}
.checkout-ekspedisi-method label {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:#fff;border:2px solid #ddd;border-radius:12px;padding:20px 15px;text-align:center;cursor:pointer;height:90px;opacity:1;transition:all 0.2s ease;}
.checkout-ekspedisi-method label:hover {border-color:#828080ff;box-shadow:0 6px 12px rgba(0,0,0,0.1);opacity:1;}
.checkout-ekspedisi-method img {max-width:100px;max-height:50px;-o-object-fit:contain;object-fit:contain;transition:0.3s;}
.checkout-ekspedisi-method input[type="radio"]:checked + label {border:2px solid black;box-shadow:0 6px 12px rgba(0,0,0,0.1);opacity:1;}
@media(max-width:768px){
  .checkout-product-item {display:grid;grid-template-columns:repeat(2,1fr);flex-direction:column;align-items:flex-start;}
  .checkout-product-item img {width:100%;height:auto;} 
  .checkout-product-price {font-size:18px;margin-left:0;}
}
@media (max-width: 480px) {
  .checkout-container {flex-direction: column; padding: 15px; gap: 15px;}
  .checkout-product-item {flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 25px; text-align: flex-start;}
  .checkout-product-item img {width: 130px; height: 150px; -o-object-fit: cover; object-fit: cover; border-radius: 6px;}
  .checkout-product-info p {font-size: 11px; margin: 4px 0;}
  .checkout-product-price {font-size: 16px;}
  .checkout-kontak-title, .checkout-pengantaran-title, .checkout-payment-title {font-size: 14px; margin-bottom: 8px;}
  .checkout-payment-btn {font-size: 13px; padding: 10px; border-radius: 6px;}
  .checkout-total-price {font-size: 14px; font-weight: 600; color: #560024;}
  .checkout-summary {margin-top: 20px; padding: 15px;}
}

/* DETAILS TRANSACTION SECTION */
.custom-transaksi-banner {position:relative;width:100%;height:280px;background:#ECECEC;}
.transaksi-banner {position:absolute;width:100%;height:100%;}
.transaksi-container {max-width:1200px;margin:30px auto;padding:20px;}
.transaksi-title {text-align:center;font-size:20px;font-weight:bold;}
.transaksi-subtitle {text-align:center;margin-bottom:30px;color:#555;}
.transaksi-progress {display:flex;justify-content:space-between;align-items:center;position:relative;margin-top:30px;margin-bottom:80px;flex-wrap:wrap;}
.transaksi-progress::before {content:"";position:absolute;top:20px;left:150px;height:4px;width:75%;background:#ddd;border-radius:2px;z-index:0;}
.transaksi-progress-bar {position:absolute;top:20px;left:12%;right:10%;height:5px;background:#28c76f;border-radius:5px;z-index:1;}
.transaksi-progress-bar.batal {background:#e74c3c;}
.transaksi-step {text-align:center;flex:1;position:relative;z-index:2;min-width:120px;}
.transaksi-step-icon {width:40px;height:40px;border:2px solid #ccc;border-radius:50%;margin:auto;display:flex;align-items:center;justify-content:center;background:#fff;}
.transaksi-step.active .transaksi-step-icon {border-color:#28c76f;color:#28c76f;}
.transaksi-step.batal .transaksi-step-icon {border-color:#e74c3c;color:#e74c3c;}
.transaksi-step-title {font-weight:bold;margin-top:8px;}
.transaksi-step-desc {font-size:13px;color:#777;}
.transaksi-timer {text-align:center;margin-bottom:20px;}
.transaksi-timer span {background:#f8d7da;padding:8px 20px;border-radius:6px;color:#a94442;font-weight:bold;}
.transaksi-content {display:flex;gap:20px;}
.transaksi-left {flex:1;padding:20px;}
.transaksi-right {flex:1;background:#f9f9f9;padding:20px;border:1px solid #eee;}
.transaksi-card {display:flex;justify-content:space-between;border:1px solid #d3d3d3; border-radius:6px;padding:30px;width:90%;max-width:800px;margin:0 auto;background:#fff;font-family:'Montserrat',sans-serif!important;}
.transaksi-detail-left {flex:1;padding-right:20px;}
.transaksi-detail-order {border: 1px solid #d3d3d3;border-radius:6px;height: 150px;width: 200px; padding: 15px;margin-bottom:10px;}
.transaksi-detail-order h4 {margin-bottom:15px;font-size:14px;font-weight:bold;}
.transaksi-detail-order p {margin-bottom:12px;line-height:2;font-size:12px;}
.transaksi-detail-address {border: 1px solid #d3d3d3;border-radius:6px;height: 200px;width: 200px;padding:15px;margin-bottom:10px;}
.transaksi-detail-address h4 {margin-bottom:15px;font-size:14px;font-weight:bold;}
.transaksi-detail-address p {margin:10px 0;line-height:2;font-size:12px;}
.transaksi-detail-right {flex:1;text-align:left;}
.transaksi-invoice {border: 1px solid #d3d3d3;border-radius:6px;height: 150px;width: 200px;padding:15px;margin-bottom:10px;}
.transaksi-invoice h4 {margin-bottom:15px;font-size:14px;font-weight:bold;text-align:left;}
.transaksi-invoice p {font-size:12px; line-height:1.5;}
.transaksi-metode-pembayaran {border: 1px solid #d3d3d3;border-radius:6px;height: 200px;width: 200px;padding:15px;margin-bottom:10px;}
.transaksi-metode-pembayaran h4 {margin-bottom:20px;font-size:14px;font-weight:bold;text-align:left;}
.invoice {font-size:14px;text-align:left;}
.invoice-copy-btn {background:transparent;color:#560024;border:none;padding:6px 0;cursor:pointer;}
.invoice-kode {font-size:14px;}
.invoice-note {font-size:10px;color: #A65A6A;}
.metode-copy-btn {background:transparent;color:#560024;border:none;padding:6px 0;margin-left:4px;cursor:pointer;}
.metode-kode {padding-left:10px;color:#560024;font-size:16px;}
.transaksi-metode {display:flex;flex-direction:column;margin-top:10px; margin-bottom:35px;}
.transaksi-metode p {border:1px solid #560024;border-radius:4px;padding:10px 10px; font-size:12px;font-weight:500;}
.metode-logo {width:60px;margin-bottom:20px;align-self:flex-start;}
.qrcode {width:160px;height:160px;border:1px solid #ddd;border-radius:6px;align-self:center;}
.transaksi-status {border:1px solid #d3d3d3;border-radius:6px;padding:30px;width:90%;max-width:800px;margin:30px auto;background:#fff;}
.transaksi-status-pembayaran {display:flex; margin-bottom:28px; justify-content:space-between;align-items: center; }
.transaksi-status-pembayaran p,
.transaksi-status-pembayaran span {margin: 0;}
.transaksi-status-pembayaran p {font-weight:bold; font-size:18px;color:#333;}
.transaksi-status-pembayaran span {margin-right:20px;font-weight:500;font-size:14px;}
.status-pembayaran {margin-left:20px;padding:6px 16px;border-radius:6px;}
.status-pembayaran.menunggu-pembayaran {background-color: #FFC107;color: black;}
.status-pembayaran.lunas {background-color: #28c76f;color: white;}
.status-pembayaran.dibatalkan {background-color: #e74c3c;color: white;}
.transaksi-status-transaksi {display:flex; margin-bottom:28px; justify-content:space-between;align-items: center; }
.transaksi-status-transaksi p,
.transaksi-status-transaksi span {margin: 0;}
.transaksi-status-transaksi p {font-weight:bold; font-size:18px;color:#333;}
.transaksi-status-transaksi span {margin-right:20px;font-weight:500;font-size:14px;}
.status-transaksi {margin-left:20px;padding:6px 16px;border-radius:6px;}
.status-transaksi.menunggu-pembayaran {background-color: #FFC107;color: black;}
.status-transaksi.dikemas {background-color: #e88504;color: white;}
.status-transaksi.dikirim {background-color: #997950;color: white;}
.status-transaksi.selesai {background-color: #28c76f;color: white;}
.status-transaksi.batal {background-color: #e74c3c;color: white;}
.transaksi-item {display:flex;align-items:center;justify-content:space-between;margin-bottom:15px;padding:20px;gap:10px;}
.transaksi-item img {width:100px;height:120px;border-radius:4px;-o-object-fit:cover;object-fit:cover;}
.transaksi-item-info {flex:1;padding-left:10px;}
.transaksi-item-info p {margin:4px 0;font-size:12px;color:#333;}
.transaksi-item-nama {font-weight:bold;font-size:14px;}
.transaksi-item-harga {white-space:nowrap;font-size:14px;font-weight:bold;color:#6b0f2e;}
.transaksi-ringkasan {margin-top:20px;border-top:1px solid #ddd;padding:20px;}
.transaksi-subtotal, .transaksi-total {display:flex;justify-content:space-between;}
.transaksi-subtotal {margin-bottom:30px;font-size:14px;}
.transaksi-total {font-weight:bold;font-size:18px;}
.transaksi-upload {background: #fafafa; border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; margin-top: 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: all 0.3s ease;}
.upload-bukti h4 {font-size: 16px; font-weight: 600; margin-bottom: 10px; color: #333;}
.upload-bukti form {display: flex; flex-direction: column; gap: 10px;}
.upload-bukti input[type="file"] {border: 1px solid #ccc; border-radius: 10px; padding: 10px; background-color: #fff; cursor: pointer; transition: all 0.3s ease; color: #555; font-size: 12px;}
.upload-bukti input[type="file"]::file-selector-button {background-color: #6b0f2e; color: #fff; border: none; border-radius: 8px; padding: 8px 14px; margin-right: 12px; cursor: pointer; font-size: 12px; transition: background-color 0.3s ease, transform 0.2s;}
.upload-bukti input[type="file"]::file-selector-button:hover {background-color: #1f2937; transform: translateY(-1px);}
.upload-bukti input[type="file"]:hover {border-color: #888; background-color: #f9f9f9;}
.btn-upload {background-color: #6b0f2e; margin: 10px; color: #fff; border: none; border-radius: 8px; padding: 10px 24px; font-size: 12px; cursor: pointer; align-self: center; transition: background-color 0.3s ease, transform 0.2s;}
.btn-upload:hover {background-color: #1f2937; transform: translateY(-1px);}
.bukti-terbayar {background-color: #f9fafb; padding: 20px; border-radius: 10px; transition: all 0.3s ease;}
.bukti-terbayar h4 {font-size: 16px; font-weight: 600; color: #111827; margin-bottom: 12px; text-align: left;}
.bukti-terbayar img {display: block; margin: 0 auto; width: auto; height: 200px;}
.bukti-terbayar .pdf-view {display: inline-block; background-color: #ef4444; color: white; padding: 10px 16px; border-radius: 8px; text-decoration: none; font-weight: 500; transition: background-color 0.3s ease;}
@media(max-width:1024px){
  .transaksi-left {display:flex;flex-direction:column;gap:15px;}
  .transaksi-left > div {border:1px solid #d3d3d3;border-radius:8px;padding:15px;background:#fff;}
  .transaksi-detail-order, .transaksi-detail-address, .transaksi-invoice, .transaksi-metode-pembayaran {width:100%;max-width:100%;}
  .transaksi-progress::before {left:130px;}
}
@media (max-width: 768px) {
  .transaksi-container {padding: 15px;margin: 20px auto;}
  .transaksi-title {font-size: 18px;}
  .transaksi-subtitle {font-size: 14px;}
  .transaksi-content {display: flex;flex-direction: row;gap: 10px;}
  .transaksi-left, .transaksi-right {flex: 1;padding: 10px;}
  .transaksi-card,.transaksi-status {width: 100%;padding: 20px;}
  .transaksi-detail-order h4, .transaksi-detail-address h4, .transaksi-invoice h4, .transaksi-metode-pembayaran h4 {font-size: 12px;}
  .transaksi-detail-order p, .transaksi-detail-address p, .transaksi-invoice p, .transaksi-metode-pembayaran p, .invoice-kode, .metode-kode {font-size: 10px;}
  .transaksi-metode {margin-bottom:23px;}
  .transaksi-status-transaksi {margin-bottom:5px;}
  .transaksi-status-pembayaran p, .transaksi-status-transaksi p {font-size:12px;}
  .transaksi-status-pembayaran span, .transaksi-status-transaksi span {font-size:10px;}
  .transaksi-progress {margin-top: 20px;margin-bottom: 50px;}
  .transaksi-progress::before {left: 80px;}
  .transaksi-step {min-width: 100px;}
  .transaksi-step-icon {width: 35px;height: 35px;}
  .transaksi-step-title {font-size: 12px;}
  .transaksi-step-desc {font-size: 11px;}
  .transaksi-detail-order,
  .transaksi-detail-address,
  .transaksi-invoice,
  .transaksi-metode-pembayaran {
    width: 100%; height: auto; padding: 12px;
  }
  .transaksi-item img {width: 80px; height: 100px;}
  .transaksi-item-info p {font-size: 11px;}
  .transaksi-item-nama { font-size: 13px; }
  .transaksi-item-harga { font-size: 13px; }
  .btn-upload { padding: 8px 18px; font-size: 11px; }
}
@media (max-width: 480px) {
  .transaksi-container { padding: 10px; margin: 10px auto; }
  .transaksi-content { flex-direction: column; gap: 15px; }
  .transaksi-left, .transaksi-right { width: 100%; padding: 12px; }
  .transaksi-card, .transaksi-status { width: 100%; padding: 16px; }
  .transaksi-progress {display: flex; justify-content: space-between; align-items: center; position: relative; margin-top: 10px; margin-bottom: 40px; gap: 0; flex-wrap: nowrap; }
  .transaksi-progress::before { top: 18px; left: 12%; width: 76%; height: 3px; }
  .transaksi-progress-bar { top: 16px; left: 12%; right: 12%; height: 3px; }
  .transaksi-step { flex: 1; min-width: 60px; text-align: center; }
  .transaksi-step-icon { width: 40px; height: 40px; border-width: 1.5px; font-size: 12px; }
  .transaksi-step-title, .transaksi-step-desc { display: none; }
  .transaksi-detail-order, .transaksi-invoice { height: 160px; }
  .transaksi-metode-pembayaran, .transaksi-detail-address { height: 220px; }
  .transaksi-item { display: grid; grid-template-columns: repeat(2,1fr); flex-direction: column; align-items: flex-start; text-align: flex-start; gap: 10px; }
  .transaksi-item img { width: 85px; height: 100px; }
  .transaksi-item-info { padding: 6px 0; }
  .transaksi-ringkasan { padding: 10px; }
  .transaksi-subtotal, .transaksi-total { font-size: 13px; }
  .bukti-terbayar img { width: 100%; height: auto; }
  .upload-bukti input[type="file"] { font-size: 11px; padding: 8px; }
  .btn-upload { padding: 8px 16px; font-size: 11px; }
}

/* CEK TRANSAKSI */
.invoice-container {max-width:800px;margin:100px auto 160px auto;padding:25px;text-align:center;}
.invoice-title {font-size:38px;font-weight:bold;margin-bottom:14px;color:#333;}
.invoice-sub-title {font-size:16px;font-weight:600;margin-bottom:80px;color:#333;}
.invoice-error {background:#ffe5e5;color:#d9534f;padding:10px;border-radius:8px;margin-bottom:15px;font-size:14px;}
.invoice-form {display:flex;align-items:center;flex-direction:column;gap:15px;width:100%;}
.invoice-label {padding-left:17%;font-weight:500;align-self:flex-start;font-size:14px;color:#555;}
.invoice-input {padding:12px;width:80%;max-width:500px;border:1px solid #ccc;border-radius:8px;font-size:14px;transition:border 0.2s ease;}
.invoice-input::-moz-placeholder {font-size:12px;font-family:'Montserrat',sans-serif!important;}
.invoice-input::placeholder {font-size:12px;font-family:'Montserrat',sans-serif!important;}
.invoice-input:focus {outline:none;border-color:#A65A6A;box-shadow:0 0 4px rgba(0,123,255,0.3);}
.invoice-btn {font-family:'Montserrat',sans-serif!important;padding:12px;width:80%;max-width:500px;background:#A65A6A;color:#fff;border:none;border-radius:8px;font-weight:600;font-size:15px;cursor:pointer;transition:background 0.2s ease;}
.invoice-btn:hover {background:#560024;}
@media(max-width:768px){
  .invoice-container {padding:15px;}
  .invoice-title {font-size:30px;}
  .invoice-sub-title {font-size:14px;margin-bottom:50px;}
  .invoice-input,.invoice-btn {width:90%;}
  .invoice-label {padding-left:17%;}
}
@media(max-width:480px){
  .invoice-title {font-size:24px;}
  .invoice-sub-title {font-size:12px;margin-bottom:40px;}
  .invoice-input,.invoice-btn {width:80%;}
  .invoice-label {padding-left:10%;}
}