:root{--bg:#f5f5f3;--ink:#161616;--muted:#777;--line:#ddd;--pink:#ffe9ef;--daily:#fff6cf;--kmd:#e8f5e4;--peak:#e9efff;--flash:#fff0df}
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:var(--bg);color:var(--ink)}button,input,select{font:inherit}.wrap{max-width:1500px;margin:auto;padding:20px}.top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}.top h1{margin:0;font-size:25px}.muted{color:var(--muted);font-size:12px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid #d4d4d4;background:white;padding:8px 12px;border-radius:9px;cursor:pointer;text-decoration:none;color:#111;font-size:12px}.btn:hover{background:#f7f7f7}.btn.primary{background:#111;color:white;border-color:#111}.btn.danger{color:#a00}.tools,.campaignbar,.publishedBox,.posterbox{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.panel{background:white;border:1px solid #e0e0e0;border-radius:14px;padding:14px}.campaignbar{margin-bottom:10px}.campaignbar input,.campaignbar select,.field input,.login input{padding:9px 10px;border:1px solid #d9d9d9;border-radius:9px;background:#fff}.campaignbar #title{min-width:220px}.campaignbar #subtitle{min-width:250px}.publishedBox{padding:11px;border:1px solid #b9d99d;background:#f3faee;border-radius:10px;margin:10px 0}.publishedBox input{flex:1;min-width:280px;padding:8px;border:1px solid #cad9bf;border-radius:8px;background:white}.status{font-size:11px;color:#666}.posterbox{margin:12px 0}.poster{width:160px;height:90px;border:1px dashed #ccc;border-radius:10px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#999;font-size:11px}.poster img{width:100%;height:100%;object-fit:contain}.validation{padding:9px 11px;border-radius:9px;font-size:11px;margin:10px 0}.validation.ok{background:#eff8e7;border:1px solid #b9d99d}.validation.warn{background:#fff2f2;border:1px solid #e4a4a4}.tablebox{overflow:auto;border:1px solid #ddd;border-radius:10px}table{border-collapse:collapse;min-width:2950px;width:100%;font-size:10px}th,td{border-right:1px solid #e4e4e4;border-bottom:1px solid #e4e4e4;padding:5px;vertical-align:middle;background:#fff}th{position:sticky;top:0;z-index:3;background:#f6f6f6;text-align:left}th.pink{background:var(--pink)}th.daily{background:var(--daily)}th.kmd{background:var(--kmd)}th.peak{background:var(--peak)}th.flash{background:var(--flash)}td[contenteditable]{min-width:80px}.center{text-align:center}.selected td{outline:1px solid #aaa;outline-offset:-1px}.pushrow td:first-child{border-left:3px solid #111}.drag{cursor:grab;font-size:16px}.mini,.numInput,.formulaInput{width:100%;border:1px solid #ddd;border-radius:6px;padding:5px;font-size:10px;background:#fff}.numInput{text-align:right}.formulaResult{margin-top:3px;font-size:9px;font-weight:700}.upload{width:78px}.imgbox{width:70px;height:58px;border:1px dashed #ccc;border-radius:6px;display:flex;align-items:center;justify-content:center;text-align:center;color:#aaa;overflow:hidden;font-size:9px}.imgbox img{width:100%;height:100%;object-fit:contain}.upload label{font-size:9px;text-decoration:underline;cursor:pointer}.upload input{display:none}.hero{text-align:center;padding:18px}.hero h2{margin:0 0 4px}.eventPoster{max-width:760px;margin:0 auto 16px}.eventPoster img{display:block;max-width:100%;max-height:260px;margin:auto;object-fit:contain}.cards{max-width:760px;margin:auto;display:grid;gap:12px}.card{background:#fff;border:1px solid #dedede;border-radius:16px;padding:14px}.head{display:grid;grid-template-columns:95px 1fr;gap:12px}.mainimg{width:95px;height:95px;border:1px solid #e1e1e1;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#aaa;font-size:11px}.mainimg img,.vimg img{width:100%;height:100%;object-fit:contain}.number{display:inline-flex;width:25px;height:25px;border-radius:50%;background:#111;color:#fff;align-items:center;justify-content:center;font-weight:800;font-size:12px}.name{font-size:18px;font-weight:800;margin:5px 0}.badge,.pill{display:inline-block;font-size:9px;padding:4px 7px;border-radius:99px;background:#eee;margin-right:4px}.badge.pink{background:#ffe5ed}.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;font-size:10px}.link{color:#111;font-weight:700}.variants{margin-top:12px;border-top:1px solid #eee}.variant{display:grid;grid-template-columns:60px 1fr auto;gap:10px;padding:10px 0;border-bottom:1px solid #eee;align-items:center}.vimg{width:60px;height:60px;border:1px solid #eee;border-radius:9px;display:flex;align-items:center;justify-content:center;text-align:center;color:#aaa;font-size:9px;overflow:hidden}.vname{font-weight:700;font-size:12px}.vsub,.plabel{font-size:9px;color:#777}.best{font-size:8px;background:#111;color:#fff;padding:3px 5px;border-radius:99px;margin-left:6px}.disc{display:inline-block;margin-top:3px;font-size:8px;background:#ffe5e5;padding:3px 5px;border-radius:4px}.price{text-align:right}.pnow{font-size:14px;font-weight:800}.pold{font-size:9px;color:#999;text-decoration:line-through}.notice{padding:10px;border-radius:10px;margin-top:10px;font-size:10px;line-height:1.45}.flashbox{background:#fff3e5;border:1px solid #f0c48c}.gwp{background:#f2f8e9;border:1px solid #bcd39e}.important{background:#f5f5f5;border:1px solid #ddd}.flashrow{display:flex;justify-content:space-between;border-top:1px dashed #d9b27d;margin-top:6px;padding-top:5px}.login{max-width:380px;margin:80px auto;background:white;border:1px solid #ddd;border-radius:16px;padding:22px}.login h1{margin:0 0 6px}.login input{width:100%;margin:6px 0 10px}.error{color:#a00;font-size:11px;margin:6px 0}.field{margin:8px 0}.field label{display:block;font-size:10px;font-weight:700;margin-bottom:4px}.slugRow{display:flex;align-items:center;border:1px solid #d8d8d8;border-radius:9px;overflow:hidden;background:#fff;max-width:500px}.slugBase{padding:9px 10px;background:#f5f5f5;color:#777;font-size:11px;border-right:1px solid #ddd}.slugRow input{border:0!important;border-radius:0!important;flex:1;min-width:180px}.bad{color:#b42318;font-weight:700}.empty{padding:30px;text-align:center;color:#888}.loading{padding:60px;text-align:center}
@media(max-width:700px){.wrap{padding:10px}.top{align-items:flex-start;flex-direction:column}.campaignbar{align-items:stretch}.campaignbar input,.campaignbar select{width:100%}.publishedBox{align-items:stretch}.publishedBox input{min-width:0;width:100%}.eventPoster img{max-height:180px}.card{padding:11px}.head{grid-template-columns:75px 1fr}.mainimg{width:75px;height:75px}.variant{grid-template-columns:52px 1fr auto}.vimg{width:52px;height:52px}.name{font-size:16px}}

td[contenteditable="true"]{cursor:text;min-width:90px}
td[contenteditable="true"]:focus{outline:2px solid #111!important;outline-offset:-2px;background:#fffdf5!important}


/* FIX 3 — Creator View: SKU-first mobile hierarchy */
.public .poster{
  max-width:760px;
  max-height:180px;
  width:auto;
  height:auto;
  object-fit:contain;
  display:block;
  margin:12px auto 18px;
}
.public .important{
  background:#fff8d9 !important;
  border:1px solid #ecd77b !important;
  color:#332b00 !important;
}
@media(max-width:640px){
  .public{padding-top:18px}
  .public h1{font-size:28px;line-height:1.08;margin-bottom:4px}
  .public .updated{margin-bottom:8px}
  .public .poster{
    max-height:115px;
    max-width:min(78vw,360px);
    margin:8px auto 14px;
  }
  .public .cards{gap:14px}
}


/* FIX 4 — Correct selectors for live Creator View */
.eventPoster{
  max-width:760px;
  margin:6px auto 12px;
}
.eventPoster img{
  display:block;
  width:auto;
  max-width:min(100%,520px);
  max-height:170px;
  margin:auto;
  object-fit:contain;
}
.notice.important{
  background:#fff8d9 !important;
  border:1px solid #ecd77b !important;
  color:#332b00 !important;
}
@media(max-width:700px){
  .hero{
    padding:12px 10px 8px;
  }
  .hero h2{
    font-size:24px;
    line-height:1.12;
    margin-bottom:3px;
  }
  .eventPoster{
    margin:2px auto 10px;
  }
  .eventPoster img{
    max-height:105px;
    max-width:min(72vw,300px);
  }
  .cards{
    gap:12px;
  }
}


/* FIX 5 — balanced Flash Sale treatment */
.bestDeal,.best-deal,.badge.best,.badge-best{display:none!important}

.flashBox,.flash-sale,.flashSale{
  background:#fff5f6 !important;
  border:1.5px solid #f3a1aa !important;
  color:#2b2021;
}
.flashBox h3,.flash-sale h3,.flashSale h3,
.flashBox .title,.flash-sale .title,.flashSale .title{
  color:#c91f32 !important;
  font-weight:800 !important;
}
.peakBadge{
  display:inline-block;
  margin-left:8px;
  padding:4px 9px;
  border-radius:999px;
  background:#e83d50;
  color:#fff;
  font-size:.72em;
  font-weight:800;
  vertical-align:middle;
  white-space:nowrap;
}
.flashBox .hours,.flash-sale .hours,.flashSale .hours,
.flashBox .flashHours,.flash-sale .flashHours,.flashSale .flashHours{
  display:block;
  background:#ffe5e8 !important;
  color:#bd1d2f !important;
  border-radius:10px;
  padding:9px 12px;
  margin:8px 0 10px;
  font-weight:800 !important;
  line-height:1.35;
}
.flashBox .price,.flash-sale .price,.flashSale .price{
  color:#c91f32 !important;
  font-weight:800 !important;
}
@media(max-width:700px){
  .peakBadge{
    margin-left:4px;
    padding:3px 7px;
    font-size:.64em;
  }
  .flashBox .hours,.flash-sale .hours,.flashSale .hours,
  .flashBox .flashHours,.flash-sale .flashHours,.flashSale .flashHours{
    font-size:13px;
    padding:8px 9px;
  }
}


/* V5 baseline — functional SKU drag handle */
#rows .drag{
  cursor:grab;
  user-select:none;
  font-size:18px;
  font-weight:700;
}
#rows .drag:active{cursor:grabbing}
#rows tr.dragging{opacity:.45}
#rows tr.dragover-before td{border-top:3px solid #111 !important}
#rows tr.dragover-after td{border-bottom:3px solid #111 !important}
body.isDraggingSku,
body.isDraggingSku *{cursor:grabbing !important}


/* V5 — Shortcut Etalase + floating back-to-top */
.etalaseShortcut{
  max-width:760px;
  margin:0 auto 12px;
  padding:10px 12px;
  background:#fff;
  border:1px solid #e2e2e2;
  border-radius:12px;
}
.etalaseShortcutTitle{
  font-size:10px;
  font-weight:800;
  margin-bottom:7px;
}
.etalaseShortcutScroll{
  display:flex;
  gap:7px;
  overflow-x:auto;
  scrollbar-width:thin;
  padding-bottom:2px;
  -webkit-overflow-scrolling:touch;
}
.etalaseChip{
  flex:0 0 auto;
  border:1px solid #ddd;
  background:#f7f7f7;
  color:#111;
  border-radius:999px;
  padding:7px 10px 7px 7px;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}
.etalaseChip:hover{background:#eee}
.etalaseChip span{
  width:19px;
  height:19px;
  border-radius:50%;
  background:#111;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:9px;
  font-weight:800;
}
.card{
  scroll-margin-top:14px;
}
.backToTop{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:50;
  width:42px;
  height:42px;
  border:0;
  border-radius:50%;
  background:#111;
  color:#fff;
  font-size:20px;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 5px 18px rgba(0,0,0,.18);
}
.backToTop:hover{transform:translateY(-1px)}
@media(max-width:700px){
  .etalaseShortcut{
    margin:0 auto 10px;
    padding:9px 10px;
  }
  .etalaseShortcutTitle{font-size:9px}
  .etalaseChip{
    font-size:9px;
    padding:6px 9px 6px 6px;
  }
  .backToTop{
    right:12px;
    bottom:14px;
    width:38px;
    height:38px;
    font-size:18px;
  }
}


/* Number-only shortcut for up to 15+ SKUs */
.etalaseShortcutTitle{
  letter-spacing:.04em;
}
.etalaseChip.numberOnly{
  width:30px;
  height:30px;
  min-width:30px;
  padding:0 !important;
  border-radius:50%;
  background:#111;
  border:1px solid #111;
  color:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:10px;
  font-weight:800;
}
.etalaseChip.numberOnly:hover{
  background:#333;
}
@media(max-width:700px){
  .etalaseChip.numberOnly{
    width:28px;
    height:28px;
    min-width:28px;
    font-size:9px;
  }
  .etalaseShortcutScroll{
    gap:6px;
  }
}


/* URUTAN ETALASE + labeled back-to-top */
.backToTop{
  width:auto !important;
  height:38px !important;
  padding:0 13px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  font-size:10px !important;
  white-space:nowrap !important;
}
.backToTop span{
  font-size:16px;
  line-height:1;
}
@media(max-width:700px){
  .backToTop{
    height:36px !important;
    padding:0 11px !important;
    font-size:9px !important;
  }
  .backToTop span{
    font-size:14px;
  }
}