/* ================================================================
   MARKETPLACE-SHELL.CSS
   Dipakai bersama oleh: /index.php, /marketplace/keranjang.php,
   /marketplace/checkout.php, /marketplace/wishlist.php
   ================================================================ */
:root{
  --lime:#c6ff33; --lime-dim:#a8e01a; --purple:#a855f7;
  --bg-dark:#0b0b0d; --card-dark:#141416; --input-dark:#1c1c1f;
  --border-dark:#2a2a2e; --text-muted:#9a9aa1;
  --content-bg:#f3efe6; --content-card:#ffffff; --content-border:#e7e1d2;
  --content-text:#1c1a16; --content-muted:#8a8377;
  --hero-bg:#efe2c3;
}
*{box-sizing:border-box; margin:0; padding:0;}
html, body { max-width: 100%; }
body{ font-family:'Poppins', sans-serif; background:var(--bg-dark); color:#fff; min-height:100vh; overflow-x:hidden; -webkit-tap-highlight-color:transparent; }
a{ color:inherit; } img{ max-width:100%; display:block; } button{ font-family:inherit; }

.store-shell{ display:grid; grid-template-columns:240px 1fr 340px; min-height:100vh; }

/* ---------- TOPBAR (gelap) ---------- */
.topbar{
  grid-column:1 / -1; display:flex; align-items:center; gap:18px; padding:12px 28px;
  background:#000; border-bottom:1px solid var(--border-dark); position:sticky; top:0; z-index:60;
}
.topbar .logo{ display:flex; align-items:center; flex-shrink:0; }
.topbar .logo img{ height:80px; width:auto; display:block; }
.menu-toggle{ display:none; background:none; border:none; color:#fff; font-size:20px; cursor:pointer; text-decoration:none; }
.cat-dropdown-btn{
  display:flex; align-items:center; gap:8px; background:var(--input-dark); border:1px solid var(--border-dark);
  color:#fff; font-size:13px; font-weight:600; padding:11px 14px; border-radius:10px; cursor:pointer; flex-shrink:0;
}
.search-bar{
  flex:1; display:flex; align-items:center; gap:10px; background:var(--input-dark);
  border:1px solid var(--border-dark); border-radius:10px; padding:11px 16px; min-width:0;
}
.search-bar input{ flex:1; background:none; border:none; outline:none; color:#fff; font-size:16px; min-width:0; }
.search-bar input::placeholder{ color:#6b6b70; }
.search-bar button{
  background:var(--lime); border:none; border-radius:6px; width:30px; height:30px;
  display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0;
}

.location-wrap{ position:relative; flex-shrink:0; z-index:80; }
.location-btn{
  display:flex; align-items:center; gap:10px; background:var(--input-dark); border:1px solid var(--border-dark);
  color:#fff; padding:9px 14px; border-radius:10px; cursor:pointer; font-size:12px; text-align:left;
  position:relative; z-index:81; pointer-events:auto; max-width:180px;
}
.location-btn.open{ border-color:var(--lime); box-shadow:0 0 0 2px rgba(198,255,51,.25); }
.location-btn .lbl{ font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:120px; }
.location-btn .sub{ color:var(--text-muted); font-size:10.5px; }
.location-btn .chev{ color:var(--text-muted); font-size:11px; margin-left:2px; }

.location-panel{
  position:absolute; top:calc(100% + 10px); right:0; width:340px; background:var(--card-dark);
  border:1px solid var(--border-dark); border-radius:14px; padding:14px; display:none; z-index:70;
  box-shadow:0 16px 40px rgba(0,0,0,.5); max-height:420px; overflow-y:auto;
}
.location-panel.show{ display:block; }
.location-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px; }
.location-panel-head span{ font-size:12px; font-weight:700; color:var(--text-muted); }
.btn-geoloc{ background:var(--lime); color:#0b0b0d; border:none; font-size:11px; font-weight:800; padding:6px 10px; border-radius:8px; cursor:pointer; flex-shrink:0; }
.branch-icon{ width:38px; height:38px; border-radius:8px; background:var(--input-dark); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.branch-name{ font-size:12.5px; font-weight:700; }
.branch-addr{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.branch-phone{ font-size:10.5px; color:var(--lime-dim); margin-top:3px; }
.location-panel-empty{ text-align:center; padding:16px 6px; font-size:12px; color:var(--text-muted); }
.location-panel-foot{ text-align:center; margin-top:6px; }
.location-panel-foot a{ font-size:12px; color:var(--lime); font-weight:700; text-decoration:none; }

.topbar-actions{ display:flex; align-items:center; gap:22px; flex-shrink:0; margin-left:auto; }
.icon-link{ position:relative; display:flex; flex-direction:column; align-items:center; font-size:11px; color:var(--text-muted); gap:2px; text-decoration:none; }
.icon-link .badge{ position:absolute; top:-6px; right:-10px; background:var(--lime); color:#0b0b0d; font-size:10px; font-weight:800; border-radius:999px; padding:1px 6px; min-width:15px; text-align:center; }
.user-chip{ display:flex; align-items:center; gap:10px; white-space:nowrap; text-decoration:none; }
.user-chip img{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid var(--lime); }
.user-chip .name{ font-size:13px; font-weight:700; }
.user-chip .sub{ font-size:10px; color:var(--text-muted); }

/* ---------- SIDEBAR KIRI (gelap) ---------- */
.sidebar{ background:#000; border-right:1px solid var(--border-dark); padding:20px 16px; display:flex; flex-direction:column; }
.sidebar-title{ display:flex; align-items:center; gap:8px; color:var(--lime); font-weight:800; font-size:13px; letter-spacing:.5px; padding:10px 12px; margin-bottom:6px; }
.cat-list{ list-style:none; display:flex; flex-direction:column; gap:2px; }
.cat-list a{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:8px; font-size:13px; font-weight:600; color:#d8d8db; text-decoration:none; }
.cat-list a:hover{ background:var(--input-dark); }
.cat-list a.active{ background:var(--lime); color:#0b0b0d; }
.sidebar-divider{ height:1px; background:var(--border-dark); margin:16px 0; flex-shrink:0; }
.sidebar-spacer{ flex:1; }

.ongkir-box{ position:relative; background:var(--input-dark); border:1px solid var(--border-dark); border-radius:14px; padding:16px; overflow:hidden; }
.ongkir-mascot{ position:absolute; top:10px; right:10px; width:52px; height:52px; display:flex; align-items:center; justify-content:center; font-size:32px; opacity:.9; }
.ongkir-mascot img{ width:100%; height:100%; object-fit:contain; }
.ongkir-box .tag{ font-size:11px; font-weight:800; color:var(--text-muted); letter-spacing:.3px; }
.ongkir-box .amount{ font-family:'Anton'; font-size:20px; color:var(--lime); margin:2px 0 6px; }
.ongkir-box .desc{ font-size:11px; color:var(--text-muted); line-height:1.4; margin-bottom:12px; max-width:88%; }
.ongkir-box .btn-info{ display:block; text-align:center; background:var(--lime); color:#0b0b0d; font-weight:800; font-size:11.5px; padding:9px; border-radius:8px; text-decoration:none; }

/* ---------- SIDEBAR MOBILE: panel overlay slide-in ---------- */
.sidebar-backdrop{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.55);
  z-index:88; opacity:0; transition:opacity .25s ease;
}
.sidebar-backdrop.show{ display:block; opacity:1; }

/* ---------- MAIN ---------- */
.main-content{ background:var(--bg-dark); padding:24px 20px; display:flex; flex-direction:column; gap:20px; min-width:0; position:relative; }

/* ---------- HERO SLIDER ---------- */
.hero-slider{ position:relative; border-radius:20px; overflow:hidden; background:var(--hero-bg); border:1px solid var(--content-border); }
.hero-slide{ display:none; position:relative; min-height:340px; padding:44px 40px; align-items:center; overflow:hidden; }
.hero-slide.active{ display:flex; }
.hero-slide .hero-image{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.hero-slide::before{
  content:''; position:absolute; inset:0; background-image:var(--hero-texture-url, none);
  background-size:cover; background-position:center; opacity:.35; pointer-events:none; mix-blend-mode:multiply; z-index:1;
}
.hero-slide:not(.has-image)::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(90deg, rgba(239,226,195,.94) 0%, rgba(239,226,195,.78) 38%, rgba(239,226,195,.25) 68%, rgba(239,226,195,.08) 100%);
}
.hero-text{ position:relative; z-index:2; max-width:480px; }
.hero-text .eyebrow{ font-size:11px; font-weight:800; letter-spacing:1.5px; color:#7a6a2f; margin-bottom:10px; }
.hero-text h1{ font-family:'Anton'; font-size:40px; line-height:1.05; color:#211d13; text-transform:uppercase; }
.hero-text p{ font-size:13.5px; color:#4a4335; margin:14px 0 20px; max-width:400px; line-height:1.5; }
.hero-text a.cta{ display:inline-flex; align-items:center; gap:8px; background:#161310; color:#fff; font-weight:800; font-size:12.5px; padding:13px 22px; border-radius:10px; text-decoration:none; }
.hero-dots{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:3; }
.hero-dots button{ width:8px; height:8px; border-radius:50%; border:none; background:rgba(0,0,0,.25); cursor:pointer; padding:0; }
.hero-dots button.active{ background:#161310; width:22px; border-radius:5px; }

.trust-strip{ background:var(--content-card); border:1px solid var(--content-border); border-radius:14px; padding:16px 20px; display:grid; grid-template-columns:repeat(4, 1fr); gap:16px; }
.trust-item{ display:flex; align-items:center; gap:12px; min-width:0; }
.trust-item .ic{ width:38px; height:38px; border-radius:10px; background:var(--content-bg); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
.trust-item .t{ font-size:12.5px; font-weight:700; color:var(--content-text); }
.trust-item .s{ font-size:10.5px; color:var(--content-muted); }

.section-panel{ background:var(--content-card); border:1px solid var(--content-border); border-radius:16px; padding:20px; }
.section-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:16px; gap:10px; }
.section-head h2{ font-family:'Anton'; font-size:17px; letter-spacing:.3px; color:var(--content-text); }
.section-head a{ font-size:12px; font-weight:700; color:var(--content-text); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }

.product-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:14px; }
.product-card{ background:var(--content-card); border:1px solid var(--content-border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:border-color .15s, transform .15s, box-shadow .15s; }
.product-card:hover{ border-color:var(--lime); transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.08); }
.product-thumb{ position:relative; aspect-ratio:1/1; background:var(--content-bg); }
.product-thumb img{ width:100%; height:100%; object-fit:cover; }
.product-badge{ position:absolute; top:9px; left:9px; background:var(--purple); color:#fff; font-size:9px; font-weight:800; padding:4px 8px; border-radius:999px; letter-spacing:.3px; z-index:2; }
.product-rating{ position:absolute; top:9px; right:44px; background:rgba(0,0,0,.65); color:var(--lime); font-size:10px; font-weight:700; padding:3px 7px; border-radius:999px; z-index:2; }
.wishlist-btn{
  position:absolute; top:7px; right:7px; z-index:3; width:30px; height:30px; border-radius:50%;
  background:rgba(255,255,255,.9); border:none; cursor:pointer; font-size:15px; color:#8a8377;
  display:flex; align-items:center; justify-content:center; transition:transform .15s, color .15s;
}
.wishlist-btn:active{ transform:scale(0.85); }
.wishlist-btn.active{ color:#ef4444; }
.stock-out-overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#f87171; z-index:2; }
.product-body{ padding:11px 12px 12px; display:flex; flex-direction:column; gap:3px; flex:1; }
.product-cat{ font-size:10px; color:var(--content-muted); }
.product-name{ font-size:12.5px; font-weight:700; line-height:1.3; color:var(--content-text); }
.product-footer{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:8px; gap:6px; }
.product-price{ font-size:13px; font-weight:800; color:#7a9a12; }
.add-cart-btn{ background:var(--lime); border:none; border-radius:8px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:#0b0b0d; flex-shrink:0; }
.add-cart-btn:disabled{ background:#e2ddd0; cursor:not-allowed; color:var(--content-muted); }
.add-cart-btn.added{ background:#22c55e; color:#fff; }
.empty-state{ text-align:center; padding:40px 20px; color:var(--content-muted); font-size:13px; }
.empty-state a{ color:#7a9a12; font-weight:700; text-decoration:none; }

.service-strip{ background:var(--lime); border-radius:14px; padding:16px 24px; display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.service-item{ display:flex; align-items:center; gap:10px; color:#0b0b0d; min-width:0; }
.service-item .ic{ width:34px; height:34px; border-radius:9px; background:rgba(0,0,0,.08); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.service-item .t{ font-size:12px; font-weight:800; }
.service-item .s{ font-size:10.5px; color:#20220a; }

/* ---------- SIDEBAR KANAN ---------- */
.rightbar{ padding:24px 24px 24px 0; display:flex; flex-direction:column; gap:16px; min-width:0; }
.cart-card{ background:var(--card-dark); border:1px solid var(--border-dark); border-radius:16px; padding:18px; }
.cart-card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cart-card-head h3{ font-family:'Anton'; font-size:14px; letter-spacing:.3px; }
.cart-card-head span{ font-size:11px; color:var(--text-muted); font-weight:700; }
.cart-line{ display:flex; gap:10px; align-items:center; padding:9px 0; border-bottom:1px solid var(--border-dark); }
.cart-line img{ width:46px; height:46px; border-radius:8px; object-fit:cover; background:var(--input-dark); flex-shrink:0; }
.cart-line .info{ flex:1; min-width:0; }
.cart-line .name{ font-size:12.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cart-line .variant{ font-size:10.5px; color:var(--text-muted); }
.cart-line .qty{ font-size:11px; color:var(--text-muted); margin-top:2px; }
.cart-line .price{ font-size:12px; font-weight:800; color:var(--lime); text-align:right; white-space:nowrap; }
.cart-summary{ margin-top:12px; display:flex; flex-direction:column; gap:6px; font-size:12.5px; }
.cart-summary .row{ display:flex; justify-content:space-between; color:var(--text-muted); gap:8px; }
.cart-summary .row.total{ color:#fff; font-weight:800; font-size:15px; padding-top:8px; border-top:1px solid var(--border-dark); margin-top:4px; }
.cart-summary .row.total b{ color:var(--lime); }
.btn-checkout{ display:block; text-align:center; width:100%; background:var(--lime); color:#0b0b0d; font-weight:800; font-size:13px; padding:12px; border:none; border-radius:10px; margin-top:14px; text-decoration:none; cursor:pointer; min-height:44px; line-height:20px; }
.cart-empty{ text-align:center; padding:20px 10px; color:var(--text-muted); font-size:12.5px; }
.cart-empty a{ color:var(--lime); font-weight:700; text-decoration:none; }

.promo-banner{ position:relative; border-radius:16px; padding:20px; overflow:hidden; background:linear-gradient(135deg, #6d28d9, #a855f7); background-size:cover; background-position:center; min-height:120px; display:flex; flex-direction:column; justify-content:center; gap:10px; isolation:isolate; }
.promo-banner::before{ content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.55)); z-index:0; }
.promo-banner.beans{ background:linear-gradient(135deg, #2c2417, #443722); }
.promo-banner .art-left, .promo-banner .art-right{ position:absolute; bottom:0; width:64px; height:64px; object-fit:contain; z-index:1; filter:drop-shadow(0 4px 8px rgba(0,0,0,.35)); }
.promo-banner .art-left{ left:0; } .promo-banner .art-right{ right:0; }
.promo-banner h4{ font-family:'Anton'; font-size:16px; line-height:1.2; color:#fff; position:relative; z-index:2; max-width:75%; }
.promo-banner p{ font-size:11.5px; color:rgba(255,255,255,.82); position:relative; z-index:2; max-width:70%; }
.promo-banner a.btn-mini{ align-self:flex-start; background:var(--lime); color:#0b0b0d; font-weight:800; font-size:11px; padding:8px 14px; border-radius:8px; text-decoration:none; position:relative; z-index:2; }

.mascot-quote{ text-align:right; padding:6px 4px; }
.mascot-quote p{ font-family:'Anton'; font-size:14px; line-height:1.25; color:var(--lime); text-transform:uppercase; }

.chat-cs{ position:fixed; bottom:22px; right:22px; z-index:60; background:#25d366; color:#fff; border:none; padding:12px 18px; border-radius:999px; font-weight:800; font-size:12px; display:flex; align-items:center; gap:8px; text-decoration:none; box-shadow:0 8px 20px rgba(0,0,0,.4); }

/* ---------- TOAST NOTIFIKASI (add to cart / wishlist) ---------- */
.mp-toast{
  position:fixed; left:50%; bottom:24px; transform:translate(-50%, 20px); z-index:200;
  background:#141416; border:1px solid var(--lime); color:#fff; font-size:13px; font-weight:600;
  padding:12px 20px; border-radius:10px; opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
  max-width:90vw; text-align:center; box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.mp-toast.show{ opacity:1; transform:translate(-50%, 0); }
.mp-toast.error{ border-color:#ef4444; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1300px){ .rightbar{ display:none; } .store-shell{ grid-template-columns:220px 1fr; } }
@media (max-width: 1100px){ .product-grid{ grid-template-columns:repeat(3, 1fr); } .trust-strip, .service-strip{ grid-template-columns:repeat(2, 1fr); } }

@media (max-width: 980px){
  .store-shell{ grid-template-columns:1fr; }
  .sidebar{
    position:fixed; top:0; left:0; height:100vh; width:260px; max-width:80vw;
    z-index:90; transform:translateX(-100%); transition:transform .25s ease;
    display:flex; box-shadow:8px 0 30px rgba(0,0,0,.4); overflow-y:auto;
  }
  .sidebar.open{ transform:translateX(0); }
  .menu-toggle{ display:block; }
  .location-panel{ right:-70px; width:300px; }
}

@media (max-width: 640px){
  .product-grid{ grid-template-columns:repeat(2, 1fr); }
  .topbar{ padding:10px 12px; gap:8px; }
  .topbar .logo img{ height:60px; }
  .cat-dropdown-btn{ display:none; } /* sudah ada tombol ☰, hindari 2 tombol kategori di layar sempit */
  .location-btn span .lbl{ max-width:70px; }
  .location-panel{ right:-50px; width:88vw; max-width:320px; }
  .main-content{ padding:14px 12px; gap:14px; }
  .hero-slide{ min-height:260px; padding:24px 18px; align-items:flex-end; }
  .hero-text{ max-width:100%; }
  .hero-text h1{ font-size:24px; }
  .hero-text p{ font-size:12.5px; margin:10px 0 16px; }
  .hero-slide:not(.has-image)::after{
    background:linear-gradient(180deg, rgba(239,226,195,.15) 0%, rgba(239,226,195,.55) 45%, rgba(239,226,195,.96) 85%);
  }
  .trust-strip{ grid-template-columns:repeat(2, 1fr); padding:12px 14px; gap:12px; }
  .service-strip{ grid-template-columns:repeat(2, 1fr); padding:12px 14px; }
  .section-panel{ padding:14px; }
  .section-head h2{ font-size:15px; }
}

@media (max-width: 400px){
  .trust-strip, .service-strip{ grid-template-columns:1fr 1fr; gap:8px; }
  .trust-item .t, .service-item .t{ font-size:11px; }
  .trust-item .s, .service-item .s{ font-size:9.5px; }
  .product-grid{ gap:8px; }
  .hero-text h1{ font-size:21px; }
  .topbar-actions{ gap:14px; }
}