:root{

  --brand:#FDD4C8;
  --brand-dark:#FDD4C8;
  --brand-kdr:#000000;
  --brand-search:#A49487;
  --brand-badge:#fda36ffa;
  --brand-light:#ffffff;
  --ink:#1F2937;
  --muted:#6B7280;
  --line:#aaaaaa;
  --bg:#ffffff;
  --card:#FFFFFF;
  --green:#01e956;
  --slate:#000000;
  --shopee:#fc6c0c;
  --red:#D64545;
  --radius:8px;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  font-family:'Inter',Arial,sans-serif;
  color:var(--ink);
}
h1,h2,h3,.brand,.banner-title{font-family:'Poppins',Arial,sans-serif;}
a{color:inherit;}

/* ===== Header ===== */
header{background:var(--brand); padding:16px 20px 20px;}
.header-row1{
  max-width:1100px; margin:0 auto 14px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.store-logo{
  width:200px; height:60px; border-radius:8px; object-fit:cover;
  background:transparent; flex-shrink:0;
}
.brand{color:#fff; font-weight:800; font-size:22px; letter-spacing:-0.02em; white-space:nowrap;}
.location-link{
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,0.18); color:#fff; text-decoration:none;
  font-size:12.5px; font-weight:600; padding:9px 14px; border-radius:6px; white-space:nowrap;
}
.location-link:hover{background:rgba(255,255,255,0.3);}
.header-row2{max-width:1100px; margin:0 auto;}
.search-bar{display:flex; background:#fff; border-radius:6px; overflow:hidden;}
.search-bar input{flex:1; border:none; outline:none; padding:11px 14px; font-size:14px; font-family:inherit;}
.search-bar button{background:var(--brand-search); border:none; color:#fff; padding:0 22px; cursor:pointer; font-size:14px; font-weight:600;}

/* ===== Categories ===== */
.categories-wrap{background:#fff; border-bottom:1px solid var(--bg);}
.categories{max-width:1100px; margin:0 auto; padding:12px 20px; display:flex; gap:10px; flex-wrap:wrap;}
.chip{
  background:var(--bg); border:1px solid var(--line); border-radius:20px; padding:8px 16px;
  font-size:13px; font-weight:500; color:var(--ink); cursor:pointer; user-select:none;
  transition:background .15s,color .15s,border-color .15s;
}
.chip.active,.chip:hover{background:var(--brand); color:#fff; border-color:var(--brand);}

/* ===== Banner (carousel, bisa banyak) ===== */
.banner{max-width:1100px; margin:20px auto 0; padding:0 20px;}
.banner-carousel{position:relative; border-radius:10px; overflow:hidden;}
.banner-slide{display:none;}
.banner-slide.active{display:block;}
.banner-slide a, .banner-slide .no-link{display:block;}
.banner-slide img{width:100%; display:block; max-height:320px; object-fit:cover;}
.banner-slide-caption{
  position:absolute; left:0; right:0; bottom:0; padding:16px 22px;
  background:linear-gradient(0deg, rgba(0,0,0,.55), transparent);
  color:#fff;
}
.banner-slide-caption .cap-title{font-family:'Poppins',Arial,sans-serif; font-weight:700; font-size:16px; margin:0;}
.banner-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); color:#fff;
  border:none; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:16px; z-index:2;
}
.banner-nav.prev{left:10px;} .banner-nav.next{right:10px;}
.banner-dots{position:absolute; bottom:10px; left:0; right:0; display:flex; gap:6px; justify-content:center; z-index:2;}
.banner-dot{width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.55); cursor:pointer; border:none; padding:0;}
.banner-dot.active{background:#fff; width:18px; border-radius:4px;}
.banner-inner{
  background:linear-gradient(120deg,#0ABAB5,#2FCFC0 60%,#088F8B);
  border-radius:10px; padding:28px 30px; color:#fff; position:relative; overflow:hidden;
  min-height:80px;
}
.banner-inner::after{
  content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px;
  background:rgba(255,255,255,0.14); border-radius:50%;
}
.banner-title{font-size:22px; font-weight:700; margin:0 0 6px; position:relative;}
.banner-sub{font-size:13.5px; opacity:.95; margin:0; max-width:520px; position:relative;}
.banner-text-block{padding:20px 30px; position:relative;}

/* ===== Banner ===== 
.banner{max-width:1100px; margin:20px auto 0; padding:0 20px;}
.banner-link-wrap{display:block; border-radius:10px; overflow:hidden;}
.banner-inner{
  background:linear-gradient(120deg,#0ABAB5,#2FCFC0 60%,#088F8B);
  border-radius:10px; padding:28px 30px; color:#fff; position:relative; overflow:hidden;
  min-height:80px;
}
.banner-inner.has-image{padding:0; min-height:0;}
.banner-inner.has-image img{width:100%; display:block; max-height:320px; object-fit:cover;}
.banner-inner::after{
  content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px;
  background:rgba(255,255,255,0.14); border-radius:50%;
}
.banner-inner.has-image::after{display:none;}
.banner-title{font-size:22px; font-weight:700; margin:0 0 6px; position:relative;}
.banner-sub{font-size:13.5px; opacity:.95; margin:0; max-width:520px; position:relative;}
.banner-text-block{padding:20px 30px; position:relative;}*/

/* ===== Main / grid ===== */
main{max-width:1100px; margin:16px auto 60px; padding:0 20px;}
.section-title{font-size:16px; font-weight:700; margin:0 0 14px; padding-left:10px; border-left:4px solid var(--brand);}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px;}
.card{
  background:var(--card); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; border:1px solid var(--line);
  transition:box-shadow .15s,transform .15s;
}
.card:hover{box-shadow:0 4px 16px rgba(10,186,181,.15); transform:translateY(-2px);}
.thumb{
  position:relative; aspect-ratio:1/1;
  background:linear-gradient(135deg,var(--brand-light),#fff);
  display:flex; align-items:center; justify-content:center; overflow:hidden; cursor:zoom-in;
}
.thumb img{width:100%; height:100%; object-fit:cover; transition:transform .25s ease;}
.thumb:hover img{transform:scale(1.12);}
.thumb .no-image{font-size:38px;}
.thumb-slide{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .7s ease, transform .25s ease;
}
.thumb-slide.active{opacity:1;}
.thumb:hover .thumb-slide.active{transform:scale(1.12);}
.badge-kategori{
  position:absolute; top:0; left:0; background:var(--brand-badge); color:#fff;
  font-size:15px; font-weight:700; padding:3px 8px; border-bottom-right-radius:6px;
}
.zoom-hint{
  position:absolute; bottom:6px; right:6px; background:rgba(255,255,255,.85); color:var(--ink);
  font-size:10px; padding:2px 6px; border-radius:4px; opacity:0; transition:opacity .15s;
}
.thumb:hover .zoom-hint{opacity:1;}
.info{padding:10px 12px 12px; display:flex; flex-direction:column; gap:6px; flex:1;}
.name{font-size:13.5px; line-height:1.35; font-weight:600; height:36px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.desc{font-size:12px; color:var(--slated); line-height:1.4; height:32px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.spec-row{display:flex; gap:6px; flex-wrap:wrap; font-size:11px;}
.spec-tag{background:var(--brand-light); color:var(--brand-kdr); padding:2px 8px; border-radius:10px; font-weight:600;}
.cta-row{margin-top:auto; display:flex; gap:6px; flex-wrap:wrap;}
.cta-btn{flex:1; min-width:60px; text-align:center; text-decoration:none; font-size:11.5px; font-weight:700; padding:8px 4px; border-radius:5px; transition:opacity .15s;}
.cta-icon{width:15px; height: 15px; font-size:10px; line-height:10;justify-content:center}
.cta-btn:hover{opacity:.80;}
.cta-btn.mp1{background:var(--shopee); font-size:14px; align-items:center; justify-content:center;color:#fff;}
.cta-btn.mp2{background:var(--slate);font-size:14px; align-items:center; justify-content:center;color:#fff;}
.cta-btn.wa{background:var(--green);font-size:14px; align-items:center; justify-content:center;color:#fff;}

footer{text-align:center; padding:20px; color:var(--muted); font-size:12px;}
.admin-entry{color:#C9D2D0; text-decoration:none; font-size:10.5px; cursor:pointer;}
.admin-entry:hover{color:var(--muted);}

/* ===== Zoom modal (dengan navigasi galeri) ===== */
.zoom-modal{
  display:none; position:fixed; inset:0; background:rgba(17,24,20,.85); z-index:50;
  align-items:center; justify-content:center; padding:20px;
}
.zoom-modal.active{display:flex;}
.zoom-inner{background:#fff; border-radius:12px; padding:20px; max-width:420px; width:100%; text-align:center;}
.zoom-img-wrap{position:relative; background:var(--bg); border-radius:8px; overflow:hidden; aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;}
.zoom-img-wrap img{width:100%; height:100%; object-fit:contain;}
.zoom-nav{
  position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.45); color:#fff;
  border:none; width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:16px;
}
.zoom-nav.prev{left:8px;} .zoom-nav.next{right:8px;}
.zoom-dots{display:flex; gap:6px; justify-content:center; margin-top:10px;}
.zoom-dot{width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer;}
.zoom-dot.active{background:var(--brand);}
.zoom-name{font-weight:700; font-size:15px; margin:14px 0 4px;}
.zoom-desc{font-size:12.5px; color:var(--muted); margin:0;}
.zoom-close{position:absolute; top:10px; right:14px; background:none; border:none; font-size:22px; cursor:pointer; color:var(--muted);}

/* ===== Login gate ===== */
.login-wrap{min-height:80vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{background:#fff; border:1px solid var(--line); border-radius:10px; padding:28px 26px; max-width:340px; width:100%; text-align:center;}
.login-card .lock-icon{font-size:32px; margin-bottom:8px;}
.login-card h2{font-size:16px; margin:0 0 6px;}
.login-card p.hint{font-size:12px; color:var(--muted); margin:0 0 16px;}
.login-card input[type=text],.login-card input[type=password]{
  width:100%; border:1px solid var(--line); border-radius:6px; padding:10px 12px;
  font-size:13px; outline:none; margin-bottom:10px; font-family:inherit;
}
.login-card input:focus{border-color:var(--brand);}
.login-error{color:var(--red); font-size:12px; margin:-4px 0 10px; min-height:14px;}
.login-cancel{display:block; margin-top:10px; font-size:12px; color:var(--muted); text-decoration:underline;}

/* ===== Admin ===== */
.admin-header{background:var(--slate); color:#fff; padding:14px 20px;}
.admin-header-inner{max-width:960px; margin:0 auto; display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
.admin-header h1{margin:0; font-size:17px;}
.admin-header-actions{display:flex; gap:8px;}
.pill-btn{background:rgba(255,255,255,.14); border:none; color:#fff; font-size:11.5px; font-weight:600; padding:7px 14px; border-radius:6px; cursor:pointer; text-decoration:none; display:inline-block;}
.pill-btn:hover{background:rgba(255,255,255,.24);}
.admin-wrap{max-width:960px; margin:24px auto 60px; padding:0 20px;}
.admin-section{background:#fff; border:1px solid var(--line); border-radius:8px; padding:20px; margin-bottom:20px;}
.admin-section h3{margin:0 0 14px; font-size:15px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.form-grid .full{grid-column:1/-1;}
label{font-size:12px; font-weight:600; color:var(--muted); display:block; margin-bottom:4px;}
input[type=text],input[type=password],input[type=file],textarea,select{
  width:100%; border:1px solid var(--line); border-radius:5px; padding:8px 10px;
  font-family:inherit; font-size:13px; outline:none; background:#fff;
}
input:focus,textarea:focus{border-color:var(--brand);}
textarea{resize:vertical; min-height:50px;}
.btn-primary{background:var(--brand); color:#fff; border:none; padding:10px 22px; border-radius:6px; font-size:13px; font-weight:700; cursor:pointer; margin-top:6px;}
.btn-primary:hover{background:var(--brand-dark);}
.btn-secondary{background:#fff; color:var(--ink); border:1px solid var(--line); padding:10px 18px; border-radius:6px; font-size:13px; font-weight:600; cursor:pointer; margin-top:6px; margin-left:8px; text-decoration:none; display:inline-block;}
.btn-danger{background:#fff; color:var(--red); border:1px solid var(--red); padding:6px 12px; border-radius:5px; font-size:11.5px; font-weight:600; cursor:pointer;}
.admin-list-item{display:flex; justify-content:space-between; align-items:center; padding:12px 0; border-bottom:1px solid var(--line); gap:10px;}
.admin-list-item:last-child{border-bottom:none;}
.admin-list-left{display:flex; align-items:center; gap:12px;}
.admin-thumb{width:48px; height:48px; border-radius:6px; object-fit:cover; background:var(--bg); border:1px solid var(--line);}
.admin-list-name{font-size:13px; font-weight:600;}
.admin-list-meta{font-size:11.5px; color:var(--muted);}
.row-actions a,.row-actions button{margin-left:6px;}
.row-actions .edit-link{background:none; border:1px solid var(--line); border-radius:4px; padding:5px 10px; font-size:11.5px; cursor:pointer; text-decoration:none; color:var(--ink);}
.row-actions .edit-link:hover{border-color:var(--brand); color:var(--brand-dark);}
.status-msg{font-size:12px; margin-left:10px;}
.status-ok{color:var(--green);}
.status-err{color:var(--red);}
.empty-note{color:var(--muted); font-size:13px;}
.notice-box{padding:10px 14px; border-radius:6px; font-size:12px; margin-bottom:16px;}
.notice-info{background:var(--brand-light); color:var(--brand-dark);}
.notice-warn{background:#FFF4E5; color:#8A5A00;}
.img-upload-grid{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.img-upload-item{position:relative; width:76px; height:76px; border-radius:6px; overflow:hidden; border:1px solid var(--line);}
.img-upload-item img{width:100%; height:100%; object-fit:cover;}
.img-upload-item .remove-img{
  position:absolute; top:2px; right:2px; background:rgba(214,69,69,.9); color:#fff; border:none;
  width:18px; height:18px; border-radius:50%; font-size:11px; cursor:pointer; line-height:1;
}
.alert{padding:10px 14px; border-radius:6px; font-size:12.5px; margin-bottom:16px;}
.alert-error{background:#FFEDEC; color:var(--red); border:1px solid #F3C4C4;}
.alert-success{background:var(--brand-light); color:var(--brand-dark); border:1px solid #BFE9E6;}


/* ===== Kelola Banner (grid kartu) ===== */
.banner-cards-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px;}
.banner-card{border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff;}
.banner-card-img{aspect-ratio:16/7; background:var(--bg); overflow:hidden;}
.banner-card-img img{width:100%; height:100%; object-fit:cover; display:block;}
.banner-card-body{padding:10px 12px;}
.banner-card-title{font-size:13px; font-weight:600; margin:0 0 3px;}
.banner-card-link{font-size:11px; color:var(--muted); word-break:break-all; margin:0 0 8px;}
.banner-card-actions{display:flex; gap:6px; flex-wrap:wrap;}
.banner-card-actions a,.banner-card-actions button{
  font-size:11px; padding:5px 9px; border-radius:4px; border:1px solid var(--line);
  background:#fff; cursor:pointer; text-decoration:none; color:var(--ink);
}
.banner-card-actions .danger{color:var(--red); border-color:#F3C4C4;}
.banner-card-order{font-size:10.5px; color:var(--muted); margin-right:auto;}

/* ===== Pagination ===== */
.pagination-bar{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-top:22px;}
.pagination-bar label{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:6px;}
.pagination-bar select{width:auto; padding:6px 8px; font-size:12.5px;}
.page-buttons{display:flex; gap:4px; flex-wrap:wrap; align-items:center;}
.page-btn{
  min-width:30px; height:30px; padding:0 8px; border:1px solid var(--line); background:#fff; border-radius:5px;
  font-size:12.5px; cursor:pointer; color:var(--ink);
}
.page-btn.active{background:var(--brand); color:#fff; border-color:var(--brand);}
.page-btn:disabled{opacity:.4; cursor:not-allowed;}
.page-ellipsis{padding:0 4px; color:var(--muted); font-size:12.5px;}
.result-count{font-size:12px; color:var(--muted); margin:0 0 12px;}