/* 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 {position:relative;width:100%;height:100%;}
.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:absolute;left:50%;transform:translateX(-50%);text-align:center;}
.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,14px);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;}
@media screen and (max-width:1024px){.container{padding:0 15px;}.nav-links{gap:20px;}}
@media screen and (max-width:768px){
    .top-bar-content,.nav-content{flex-direction:column;align-items:center;gap:10px;height:auto;}
    .logo img{height:35px;}
    .nav-links{position:static;transform:none;flex-direction:column;align-items:center;gap:10px;width:100%;margin-top:10px;}
    .breadcrumb{font-size:13px;text-align:center;padding:0 10px;}
}
@media screen and (max-width:480px){
    .top-left span,.top-right span{font-size:12px;margin-right:10px;}
    .nav-links a{font-size:14px;}
    .breadcrumb{font-size:12px;}
}

/* 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:20px;font-size:12px;text-align:left;padding-left:10px;}
.bestproduk-price {margin-bottom:6px;font-size:12px;}
.price-discounted {color:#a09999;text-decoration:line-through;text-decoration-color:rgb(216,19,19);margin-right:8px;}
.price-now {color:#560024;}
.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:600;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;}
.price-discounted {color:#a09999;text-decoration:line-through;text-decoration-color:rgb(216,19,19);margin-right:8px;}
.price-now {color:#560024;}
.diskon-label {position:absolute;top:0px;right: 0px;background-color:#560024;color:white;font-size:11px;padding:8px 8px;z-index:10;}
@media screen and (max-width:1024px) {
  .bestproduk-grid, .edition-grid, .bestseller-grid {grid-template-columns:repeat(3,1fr);}
  .bestproduk-section, .edition-section, .bestseller-section {padding:0 40px;}
  .bestproduk-title, .edition-title, .bestseller-title {font-size:18px;}
}

/* Mobile (≤ 768px) */
@media screen and (max-width:768px) {
  .bestproduk-grid, .edition-grid, .bestseller-grid {grid-template-columns:repeat(2,1fr);}
  .bestproduk-section, .edition-section, .bestseller-section {padding:0 20px;}
  .bestproduk-title, .edition-title, .bestseller-title {font-size:16px;}
  .bestproduk-name, .edition-name, .bestseller-name {font-size:14px;}
}

/* Small Mobile (≤ 480px) */
@media screen and (max-width:480px) {
  .bestproduk-grid, .edition-grid, .bestseller-grid {grid-template-columns:1fr;}
  .bestproduk-section, .edition-section, .bestseller-section {padding:0 10px;}
  .bestproduk-title, .edition-title, .bestseller-title {font-size:14px;}
  .bestproduk-name, .edition-name, .bestseller-name {font-size:13px;}
  .bestproduk-kategori, .edition-kategori, .bestseller-kategori {font-size:11px;}
}
/* ABOUT STYLE */
.about-section {background:url("/storage/images/about.png") no-repeat center/cover;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:left;margin:50px 0;}
.about-recommend h2 {font-size:28px;font-weight:bold;margin:0 0 30px 100px;}
.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:600px) {
  .about-section {padding:40px 20px;}
  .about-container {margin-top:60px;padding-bottom:60px;}
  .about-recommend h2 {font-size:22px;}
  .recommend-card {width:100%;height:auto;}
  .recommend-card img {height:auto;max-height:250px;}
  .recommend-card h3, .recommend-card p {font-size:16px;}
  .recommend-card p {font-size:13px;}
}

/* FAQ STYLE */
.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: 15px; padding: 12px 16px; }
  .faq-answer { font-size: 13px; padding: 0 16px; }
  .faq-item.active .faq-answer { padding: 12px 16px; }
}
@media (max-width: 480px) {
  .faq-section { padding: 15px; }
  .faq-section h2 { font-size: 18px; margin-bottom: 25px; }
  .faq-question { font-size: 14px; flex-direction: column; align-items: flex-start; }
  .faq-question::after { align-self: flex-end; margin-top: 8px; }
  .faq-answer { font-size: 13px; }
}

/* CAROUSEL STYLE */
.ansthelabel-hashtag { display: flex; justify-content: center; align-items: center; padding: 24px 0; margin-bottom: 30px; }
.ansthelabel-hashtag h1 { font-size: 32px; color: #560024; margin: 0; }
.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; }
@media (max-width: 1024px) {
  .ansthelabel-hashtag h1 { font-size: 28px; }
  .buy-now-btn { right: 60px; padding: 10px 32px; }
}
@media (max-width: 768px) {
  .ansthelabel-hashtag h1 { font-size: 24px; }
  .custom-carousel { height: 70vh; }
  .slide { height: 70vh; }
  .buy-now-btn { right: 20px; bottom: 8%; font-size: 14px; padding: 10px 28px; }
}
@media (max-width: 480px) {
  .ansthelabel-hashtag h1 { font-size: 20px; padding: 0 10px; }
  .custom-carousel { height: 60vh; }
  .slide { height: 60vh; }
  .buy-now-btn { position: relative; bottom: auto; right: auto; display: inline-block; margin: 20px auto; font-size: 14px; padding: 8px 24px; }
}

/* 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; }
@media screen and (max-width: 1200px) {
  .swiper-title { font-size: 24px; }
  .swiper-slide { width: 280px !important; }
  .swiper-slide img { max-width: 400px; max-height: 480px; }
}
@media screen and (max-width: 992px) {
  .swiper-title { font-size: 22px; }
  .swiper-slide { width: 240px !important; }
  .swiper-slide img { max-width: 350px; max-height: 420px; }
}
@media screen and (max-width: 768px) {
  .swiper-title { font-size: 20px; margin-bottom: 30px; }
  .swiper-slide { width: 200px !important; }
  .swiper-slide img { max-width: 280px; max-height: 350px; }
}
@media screen and (max-width: 576px) {
  .swiper-title { font-size: 18px; margin-bottom: 20px; }
  .swiper-slide { width: 160px !important; }
  .swiper-slide img { max-width: 220px; max-height: 280px; }
  .arrival-caption { bottom: 15px; left: 10px; }
  .arrival-caption h3 { font-size: 14px; }
  .arrival-caption button { font-size: 11px; padding: 6px 10px; }
}
@media screen and (max-width: 400px) {
  .swiper-title { font-size: 16px; }
  .swiper-slide { width: 140px !important; }
  .swiper-slide img { max-width: 180px; max-height: 240px; }
}

/* FOOTER STYLE */
.footer-section { background-color:#4a002a; background-image:url('/storage/images/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; }
@media (max-width:768px) { .footer-section { padding:40px 15px; } .footer-section-menu { gap:20px; margin-bottom:50px; flex-direction:column; align-items:center; } .footer-section-menu a { font-size:14px; } .footer-section-social { gap:20px; flex-direction:row; flex-wrap:wrap; } .footer-section-social a { font-size:24px; } .footer-section-shopee-icon img { width:24px; height:24px; } .footer-section-text { font-size:11px; } }
@media (max-width:480px) { .footer-section-menu { gap:15px; } .footer-section-menu a { font-size:13px; } .footer-section-social a { font-size:22px; } .footer-section-text { font-size:10px; } }
/* Responsive*/
@media (max-width:768px) {
  .footer-section { padding:40px 15px; }
  .footer-section-menu { gap:20px; margin-bottom:50px; flex-direction:column; align-items:center; }
  .footer-section-menu a { font-size:14px; }
  .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 (max-width:480px) {
  .footer-section-menu { gap:15px; }
  .footer-section-menu a { font-size:13px; }
  .footer-section-social a { font-size:22px; }
  .footer-section-text { font-size:10px; }
}

/* 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;}
/* Responsive */
@media screen and (max-width:1024px){.hero-item{height:600px;}}
@media screen and (max-width:768px){.hero-grid{grid-template-columns:1fr;}.hero-item{height:400px;}}
@media screen and (max-width:480px){.hero-item{height:300px;}}

/* COLLECTION STYLE */
.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; font-size: 14px; 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: bold; font-size: 16px; }
.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;}
@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(2, 1fr); gap: 20px; }
  .produk-header h1 { font-size: 24px; }
}
@media (max-width: 768px) {
  .produk-search-wrapper { justify-content: center; margin-bottom: 20px; }
  .produk-product-grid { grid-template-columns: repeat(2, 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: 1fr; gap: 15px; }
  .produk-card img { height: 220px; }
  .produk-header h1 { font-size: 20px; }
  .produk-tag { min-width: auto; font-size: 12px; padding: 4px 8px; }
  .produk-search-form input[type="text"] { width: 120px; font-size: 12px; }
  .produk-buttons button { padding: 8px 20px; font-size: 12px; }
}

/* DETAIL STYLE */
.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 100px; padding: 40px 0; }
  .detail-product-wrapper { flex-direction: column; gap: 30px; }
  .detail-product-images, .detail-product-info { width: 100%; } */
  .btn-buy-now, .btn-add-cart { padding: 10px 80px; }
}
@media (max-width: 768px) {
  .detail-product-page { margin: 0 40px; padding: 30px 0; }
  .detail-product-name { font-size: 22px; }
  .detail-recommend h2 { font-size: 20px; }
  .btn-buy-now, .btn-add-cart { padding: 10px 50px; font-size: 14px; }
  .detail-recommend-card { width: 200px; height: 300px; }
}
@media (max-width: 480px) {
  .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: 14px; }
  .detail-recommend h2 { font-size: 18px; }
  .detail-recommend-card { width: 100%; height: auto; }
  .detail-recommend-card img { height: 200px; }
}

/* CART STYLE */
.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;}
@media(max-width:1024px){
  .cart-container {padding:0 15px;}
  .product-cell img {width:120px;max-height:160px;}
}
@media(max-width:768px){
  .cart-table thead {display:none;}
  .cart-table,.cart-table tbody,.cart-table tr,.cart-table td {display:block;width:100%;}
  .cart-table tr {margin-bottom:20px;border-bottom:2px solid #eee;padding-bottom:15px;}
  .cart-table td {text-align:left;padding:10px 0;border:none;}
  .product-cell .product-info {flex-direction:column;align-items:center;text-align:center;}
  .product-cell img {width:100%;max-width:280px;height:auto;margin:0 auto;}
  .product-details {align-items:center;}
  .total-cell {text-align:center;margin-top:10px;}
  .summary-buttons {align-items:center;}
  .cart-checkout,.cart-back {width:100%;text-align:center;padding:12px 0;}
}
@media(max-width:480px){
  .cart-container h2 {font-size:24px;}
  .product-name {font-size:14px;text-align:center;}
  .cart-table td {font-size:12px;}
  .cart-checkout,.cart-back {font-size:14px;}
}

/* CHECKOUT STYLE */
.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;}
.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: 15px; 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;}
@media(max-width:1024px){
  .checkout-container {flex-direction:column;padding:20px;gap:20px;}
  .checkout-summary {order:2;}
  .checkout-form {order:1;}
}
@media(max-width:768px){
  .checkout-container {padding:15px;}
  .checkout-product-item {flex-direction:column;align-items:flex-start;}
  .checkout-product-item img {width:100%;height:auto;}
  .checkout-name-group,.city-group {flex-direction:column;}
  .checkout-payment-list {grid-template-columns:1fr;}
}
@media(max-width:480px){
  .checkout-container {padding:10px;}
  .checkout-kontak-title,.checkout-pengantaran-title,.checkout-payment-title {font-size:14px;}
  .checkout-payment-btn {font-size:14px;padding:10px;}
  .checkout-product-item p {font-size:11px;}
  .checkout-total-price {font-size:14px;}
}

/* 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); }
@media(max-width:768px){
  .nav-icons {gap:10px;}
  .cart-badge {top:-6px;right:-8px;font-size:9px;min-width:16px;padding:2px 5px;}
}
@media(max-width:480px){
  .nav-icons {gap:8px;}
  .nav-icon {font-size:14px;}
  .cart-badge {top:-5px;right:-6px;font-size:8px;min-width:14px;padding:1px 4px;}
}

/* ANIMASI SKELETON */
.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%) }
}

/* PESAN SUKSES STYLE */
.success-container {max-width:600px;margin:40px auto;padding:20px;font-family:'Montserrat',sans-serif!important;text-align:center;}
.success-title {color:#560024;margin-bottom:20px;font-size:22px;font-weight:bold;}
.success-box {background:#fff;border:1px solid #ddd;padding:20px;border-radius:10px;margin-bottom:20px;text-align:left;}
.invoice-box, .payment-code {margin:15px 0;}
.copy-btn:hover {background:#7a0036;}
.success-message {margin-top:15px;font-size:14px;color:#444;}
.success-btn-wrapper {margin-top:20px;}
.success-btn {display:inline-block;background:#560024;color:#fff;padding:10px 18px;border-radius:6px;text-decoration:none;transition:background 0.3s ease;}
.success-btn:hover {background:#7a0036;}
@media(max-width:768px){
  .success-container {max-width:90%;padding:15px;}
  .success-title {font-size:20px;}
  .success-box {padding:15px;}
  .success-message {font-size:13px;}
  .success-btn {padding:9px 16px;font-size:14px;}
}
@media(max-width:480px){
  .success-title {font-size:18px;}
  .success-box {padding:12px;}
  .success-message {font-size:12px;}
  .success-btn {display:block;width:100%;padding:10px;font-size:14px;}
}

/* DATA DETAIL TRANSAKSI */
.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-left h4 {margin-bottom:10px;font-size:14px;font-weight:bold;}
.transaksi-detail-left p {margin:10px 0;line-height:2.5;font-size:12px;}
.transaksi-detail-right {flex:1;text-align:center;}
.transaksi-detail-right h4 {font-size:14px;font-weight:bold;text-align:left;}
.transaksi-detail-right p {margin:5px 0;font-size:12px;}
.invoice {font-size:14px;margin-bottom:10px;text-align:left;}
.invoice-copy-btn {background:transparent;color:#560024;border:none;padding:6px 0;margin-left:4px;cursor:pointer;}
.invoice-kode {padding-left:5px;font-size:14px;}
.invoice-note {font-size:10px;color: #A65A6A;margin-top:10px;}
.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;}
.transaksi-metode p {border:1px solid #560024;border-radius:4px;padding:10px 0;}
.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 {margin-bottom:28px;}
.transaksi-status p {font-weight:bold;font-size:14px;}
.status-pembayaran {margin-left:20px;background:#28c76f;color:black;padding:6px 16px;border-radius:6px;}
.status-transaksi {margin-left:43px;background:#FFC107;color:black;padding:6px 16px;border-radius:6px;}
.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;}
@media(max-width:992px){
  .transaksi-container {padding:15px;}
  .transaksi-content {flex-direction:column;}
  .transaksi-card, .transaksi-status {width:100%;padding:20px;}
  .transaksi-progress::before {left:10%;width:80%;}
}

@media(max-width:768px){
  .transaksi-title {font-size:18px;}
  .transaksi-subtitle {font-size:14px;}
  .transaksi-step {min-width:100px;}
  .transaksi-step-desc {font-size:11px;}
  .transaksi-progress {flex-wrap:wrap;gap:20px;justify-content:center;}
  .transaksi-progress::before, .transaksi-progress-bar {top:auto;bottom:0;left:10%;right:10%;}
}

@media(max-width:600px){
  .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;}
  .transaksi-total {font-size:16px;}
}

@media(max-width:480px){
  .transaksi-title {font-size:16px;}
  .transaksi-step-icon {width:30px;height:30px;font-size:12px;}
  .qrcode {width:120px;height:120px;}
  .status-pembayaran, .status-transaksi {display:block;margin:10px 0 0 0;}
  .transaksi-progress {flex-direction:column;align-items:center;gap:25px;margin-bottom:50px;}
  .transaksi-progress::before, .transaksi-progress-bar {display:none;} /* hide garis penghubung biar rapi */
  .transaksi-step {min-width:unset;width:100%;max-width:200px;}
}

/* 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:5%;}
}
@media(max-width:480px){
  .invoice-title {font-size:24px;}
  .invoice-sub-title {font-size:13px;margin-bottom:40px;}
  .invoice-input,.invoice-btn {width:100%;}
  .invoice-label {padding-left:0;}
}