:root{
    --blue:#2f6df0;
    --blue-dark:#1f55c9;
    --blue-soft:#eaf1ff;
    --yellow:#ffce1f;
    --bg:#f3f6fc;
    --card:#ffffff;
    --ink:#0f172a;
    --muted:#7c8698;
    --line:#eef1f6;
    --green:#22a957;
    --red:#ef4444;
    --radius:18px;
    --shadow:0 6px 22px rgba(20,40,80,.07);
    --shadow-lg:0 14px 40px rgba(20,40,80,.14);
  }
  *{box-sizing:border-box;font-family:'Calibri',sans-serif;}
  html{color-scheme:light only;background:#f3f6fc;}
  body{margin:0;background:var(--bg) !important;color:var(--ink) !important;-webkit-font-smoothing:antialiased;}
  button{font-family:inherit;}
  ::-webkit-scrollbar{width:8px;height:8px;}
  ::-webkit-scrollbar-thumb{background:#d6deea;border-radius:20px;}
  .ic{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;display:block;}

  /* ===== TOPBAR ===== */
  #topbar{
    background:var(--blue);
    color:#fff;
    padding:12px 18px;
    display:flex;align-items:center;gap:14px;
    position:sticky;top:0;z-index:60;
    box-shadow:0 6px 22px rgba(47,109,240,.28);
    flex-wrap:wrap;
  }
  #brand{display:flex;align-items:center;gap:11px;flex-shrink:0;}
  #brandMark{
    width:44px;height:44px;border-radius:13px;
    object-fit:cover;
    box-shadow:0 4px 12px rgba(0,0,0,.12);
    flex-shrink:0;
  }
  #brand h1{font-size:18px;font-weight:900;margin:0;line-height:1;letter-spacing:-.3px;}
  #brand p{font-size:11px;margin:3px 0 0;color:rgba(255,255,255,.78);font-weight:600;}
  #search{
    flex:1;min-width:180px;height:46px;
    background:rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.25);
    border-radius:14px;display:flex;align-items:center;gap:10px;padding:0 15px;
    transition:background .15s,border .15s;
  }
  #search:focus-within{background:rgba(255,255,255,.26);border-color:rgba(255,255,255,.55);}
  #search svg{color:rgba(255,255,255,.85);}
  #search input{background:none;border:none;outline:none;color:#fff;font-size:16px;width:100%;font-weight:500;}
  #search input::placeholder{color:rgba(255,255,255,.7);}
  .iconbtn{
    width:46px;height:46px;border-radius:14px;flex-shrink:0;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
    color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:background .15s;
  }
  .iconbtn:hover{background:rgba(255,255,255,.28);}
  @media(max-width:620px){
    #topbar{gap:10px;padding:11px 14px;}
    #search{order:3;flex:1 1 100%;min-width:100%;height:44px;}
    #brand h1{font-size:16px;}
  }

  /* ===== LAYOUT ===== */
  body{overflow-x:clip;}
  #layout{display:grid;grid-template-columns:1fr 340px;gap:18px;padding:18px;align-items:start;}
  #layout>div{min-width:0;}
  @media(max-width:880px){
    #layout{grid-template-columns:1fr;padding:14px 14px 150px;}
    #cartSidebar{display:none;}
    #mobileBar{display:block;}
  }
  @media(min-width:881px){#mobileBar{display:none !important;}}

  /* ===== HERO ===== */
  #hero{
    background:linear-gradient(120deg,var(--blue),var(--blue-dark));
    border-radius:22px;padding:22px 24px;color:#fff;margin-bottom:18px;
    position:relative;overflow:hidden;box-shadow:var(--shadow);
  }
  #hero h2{margin:0;font-size:24px;font-weight:900;letter-spacing:-.4px;line-height:1.15;max-width:460px;}
  #hero p{margin:8px 0 0;font-size:14px;color:rgba(255,255,255,.85);max-width:420px;line-height:1.5;}
  #hero .pills{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}
  #hero .pill{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.22);
    padding:7px 13px;border-radius:50px;font-size:12.5px;font-weight:700;}
  #hero .pill svg{width:16px;height:16px;color:var(--yellow);}
  #hero .blob{position:absolute;right:-40px;top:-40px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.08);}
  #hero .blob2{position:absolute;right:60px;bottom:-60px;width:130px;height:130px;border-radius:50%;background:rgba(255,206,31,.18);}
  @media(max-width:620px){#hero h2{font-size:20px;}}

  /* ===== KATEGORI ===== */
  #katWrap{padding:2px 0 4px;margin-bottom:12px;}
  #kategori{display:flex;gap:9px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  #kategori::-webkit-scrollbar{display:none;}
  .kat{
    display:flex;align-items:center;gap:8px;flex-shrink:0;
    padding:10px 16px;border-radius:50px;border:1.6px solid var(--line);
    background:var(--card);cursor:pointer;font-size:13.5px;font-weight:800;color:var(--muted);
    transition:all .15s;box-shadow:0 1px 3px rgba(0,0,0,.03);white-space:nowrap;
  }
  .kat svg{width:18px;height:18px;}
  .kat:hover{border-color:#bcd0fb;color:var(--blue);}
  .kat.active{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:0 6px 16px rgba(47,109,240,.3);}

  /* ===== SECTION HEAD ===== */
  .sec{display:flex;align-items:center;gap:10px;margin:22px 0 12px;}
  .sec .badge{width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;}
  .sec .badge.star{background:var(--yellow);color:#7a5a00;}
  .sec .badge.fire{background:var(--red);}
  .sec h3{font-size:18px;font-weight:900;margin:0;letter-spacing:-.3px;}
  .sec .count{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--muted);}

  /* ===== HORIZONTAL SCROLL ===== */
  .hscroll{
    display:flex;
    gap:12px;
    overflow-x:auto;
    overflow-y:visible;
    padding:4px 2px 12px;
    /* scrollbar tipis tapi visible di desktop supaya ketahuan bisa scroll */
    scrollbar-width:thin;
    scrollbar-color:#d6deea transparent;
    -webkit-overflow-scrolling:touch;
    /* penting: jangan biarkan flex-wrap, semua card harus 1 baris */
    flex-wrap:nowrap;
  }
  .hscroll::-webkit-scrollbar{height:4px;}
  .hscroll::-webkit-scrollbar-track{background:transparent;}
  .hscroll::-webkit-scrollbar-thumb{background:#d6deea;border-radius:4px;}
  .hscroll .card{min-width:195px;max-width:195px;flex-shrink:0;}

  /* ===== PRODUCT GRID ===== */
  #grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;}
  @media(max-width:620px){#grid{grid-template-columns:repeat(2,1fr);gap:10px;}}

  /* ===== PRODUCT CARD ===== */
  .card{
    background:var(--card);border-radius:var(--radius);border:1px solid var(--line);
    overflow:hidden;display:flex;flex-direction:column;position:relative;transition:transform .16s,box-shadow .16s;
  }
  .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
  .ribbon{position:absolute;top:10px;left:10px;z-index:2;display:flex;align-items:center;gap:4px;
    font-size:10px;font-weight:900;padding:4px 9px;border-radius:7px;letter-spacing:.3px;}
  .ribbon.star{background:var(--yellow);color:#7a5a00;}
  .ribbon.promo{background:var(--red);color:#fff;}
  .ribbon svg{width:12px;height:12px;}
  .thumb{height:128px;display:flex;align-items:center;justify-content:center;background:#ffffff;position:relative;}
  .thumb svg.art{width:74px;height:74px;}
  .body{padding:12px 13px 13px;display:flex;flex-direction:column;flex:1;}
  .merk{display:inline-flex;align-items:center;background:var(--ink);color:#fff;font-size:9.5px;font-weight:900;
    letter-spacing:.6px;padding:3px 8px;border-radius:6px;align-self:flex-start;margin-bottom:8px;}
  .pname{font-size:14.5px;font-weight:900;line-height:1.25;margin:0 0 7px;letter-spacing:-.2px;}
  .tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:7px;}
  .tag{font-size:10px;font-weight:800;padding:3px 8px;border-radius:6px;background:var(--blue-soft);color:var(--blue);}
  .tag.feat{background:#fff3df;color:#c2790a;}
  .psub{font-size:11px;color:var(--muted);font-weight:600;margin-bottom:11px;}
  .pfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;}
  .price{display:flex;flex-direction:column;line-height:1.1;}
  .price .now{font-size:15px;font-weight:900;color:var(--blue);}
  .price .old{font-size:11px;color:#aab2c0;text-decoration:line-through;font-weight:700;}

  /* add / qty controls */
  .add{
    width:42px;height:42px;border:none;border-radius:13px;background:var(--blue);color:#fff;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:transform .1s,background .15s;flex-shrink:0;
    box-shadow:0 5px 14px rgba(47,109,240,.32);
  }
  .add:hover{background:var(--blue-dark);}
  .add:active{transform:scale(.9);}
  .add svg{width:22px;height:22px;}
  .stepper{display:flex;align-items:center;gap:4px;background:var(--blue-soft);border-radius:13px;padding:3px;}
  .step{width:36px;height:36px;border:none;border-radius:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    transition:transform .1s;background:#fff;color:var(--blue);box-shadow:0 1px 3px rgba(0,0,0,.08);}
  .step.plus{background:var(--blue);color:#fff;}
  .step:active{transform:scale(.88);}
  .step svg{width:18px;height:18px;}
  .qn{min-width:22px;text-align:center;font-size:15px;font-weight:900;color:var(--ink);}

  /* ===== FILTER ===== */
  #filter{margin-bottom:14px;}
  .filterToggle{display:flex;align-items:center;gap:9px;width:100%;background:var(--card);border:1.5px solid var(--line);
    border-radius:13px;padding:11px 14px;font-size:13.5px;font-weight:800;color:var(--ink);cursor:pointer;
    box-shadow:0 1px 3px rgba(0,0,0,.04);transition:border .15s;}
  .filterToggle:hover{border-color:#bcd0fb;}
  .filterToggle .chev{margin-left:auto;transition:transform .25s;color:var(--muted);}
  .filterToggle[aria-expanded="true"]{border-color:var(--blue);color:var(--blue);}
  .filterToggle[aria-expanded="true"] .chev{transform:rotate(180deg);}
  .filterToggle>svg:first-child{color:var(--blue);}
  .filterDot{width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;}
  #filterPanel{display:none;background:var(--card);border:1.5px solid var(--line);border-radius:14px;
    margin-top:9px;padding:14px;gap:11px;grid-template-columns:1fr 1fr;}
  #filterPanel.open{display:grid;}
  .fgroup{display:flex;flex-direction:column;gap:6px;}
  .flab{font-size:11.5px;font-weight:800;color:var(--muted);letter-spacing:.2px;}
  #filterPanel select{width:100%;background:var(--bg);border:1.5px solid var(--line);border-radius:11px;padding:11px 12px;
    font-size:13px;font-weight:700;color:var(--ink);outline:none;cursor:pointer;appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%237c8698' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m3 5 4 4 4-4'/></svg>");
    background-repeat:no-repeat;background-position:right 12px center;padding-right:32px;}
  #filterPanel select:focus{border-color:var(--blue);}
  .freset{grid-column:1 / -1;display:flex;align-items:center;justify-content:center;gap:7px;background:var(--blue-soft);
    border:none;border-radius:11px;padding:11px;font-size:13px;font-weight:800;color:var(--blue);cursor:pointer;transition:background .15s;}
  .freset:hover{background:#dbe7ff;}
  .freset svg{width:16px;height:16px;}
  @media(max-width:620px){
    #filterPanel{grid-template-columns:1fr;}
  }

  /* ===== EMPTY STATE ===== */
  #empty{display:none;text-align:center;padding:50px 20px;color:var(--muted);}
  #empty svg{width:54px;height:54px;margin-bottom:12px;color:#c2ccdb;}
  #empty p{margin:0;font-weight:700;font-size:15px;}

  /* ===== CART SIDEBAR ===== */
  #cartSidebar{position:sticky;top:72px;background:var(--card);border-radius:22px;box-shadow:var(--shadow-lg);overflow:hidden;max-height:calc(100vh - 90px);display:flex;flex-direction:column;}
  .chead{background:var(--blue);padding:15px 17px;display:flex;align-items:center;gap:11px;color:#fff;}
  .chead svg{width:21px;height:21px;}
  .chead h2{font-size:17px;font-weight:900;margin:0;letter-spacing:.3px;}
  .cbadge{margin-left:auto;background:var(--yellow);color:#7a5a00;font-size:13px;font-weight:900;min-width:26px;height:26px;
    padding:0 7px;border-radius:50px;display:flex;align-items:center;justify-content:center;}
  .citems{flex:1;overflow-y:auto;padding:8px 14px;}
  .empty-cart{text-align:center;padding:34px 16px;color:var(--muted);}
  .empty-cart svg{width:46px;height:46px;color:#cfd8e6;margin-bottom:10px;}
  .empty-cart p{margin:0;font-weight:800;font-size:14px;}
  .empty-cart small{display:block;margin-top:4px;font-size:12px;color:#aab2c0;font-weight:600;}

  .citem{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--line);}
  .citem:last-child{border-bottom:none;}
  .cthumb{width:54px;height:54px;flex-shrink:0;border-radius:12px;overflow:hidden;background:#f1f5fb;
    display:flex;align-items:center;justify-content:center;}
  .cthumb svg{width:34px;height:34px;}
  .cinfo{flex:1;min-width:0;}
  .cmerk{font-size:9.5px;font-weight:900;letter-spacing:.5px;color:var(--blue);background:var(--blue-soft);
    padding:2px 7px;border-radius:5px;display:inline-block;margin-bottom:5px;}
  .cname{font-size:12.5px;font-weight:800;line-height:1.3;margin-bottom:6px;}
  .cspec{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:9px;}
  .cspec span{font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:5px;background:#eef2f8;color:#5b677a;}
  .cspec span.feat{background:#fff3df;color:#c2790a;}
  .cunit{font-size:10.5px;font-weight:700;color:var(--muted);margin-bottom:9px;}
  .crow{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .csub{font-size:13px;font-weight:900;color:var(--blue);white-space:nowrap;}
  .cstep{display:flex;align-items:center;gap:3px;}
  .cstep button{width:30px;height:30px;border:none;border-radius:9px;cursor:pointer;display:flex;align-items:center;justify-content:center;
    background:var(--blue-soft);color:var(--blue);transition:transform .1s;}
  .cstep button.trash{background:#fff0f0;color:var(--red);}
  .cstep button.plus{background:var(--blue);color:#fff;}
  .cstep button:active{transform:scale(.85);}
  .cstep button svg{width:15px;height:15px;}
  .cstep .qn{min-width:18px;font-size:13px;}

  .ctotbox{background:linear-gradient(135deg,var(--blue),var(--blue-dark));padding:15px 17px;color:#fff;}
  .crowt{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.82);font-weight:600;margin-bottom:7px;}
  .crowt.disk{color:var(--yellow);font-weight:800;}
  .crowt.grand{margin:10px 0 0;padding-top:11px;border-top:1px dashed rgba(255,255,255,.3);}
  .crowt.grand .l{font-size:15px;font-weight:800;color:#fff;}
  .crowt.grand .v{font-size:22px;font-weight:900;color:var(--yellow);letter-spacing:-.5px;}
  .free-hint{font-size:11px;font-weight:600;color:rgba(255,255,255,.85);margin-top:9px;display:flex;align-items:center;gap:6px;}
  .free-hint svg{width:14px;height:14px;color:var(--yellow);}

  .cactions{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:13px 14px;}
  .cbtn{border:none;border-radius:14px;padding:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;
    font-weight:900;font-size:14px;color:#fff;transition:transform .1s,opacity .15s;}
  .cbtn:active{transform:scale(.97);}
  .cbtn.pdf{background:var(--ink);}
  .cbtn.wa{background:var(--green);}
  .cbtn svg{width:19px;height:19px;}
  .cbtn .t{display:flex;flex-direction:column;align-items:flex-start;line-height:1.1;}
  .cbtn .t small{font-size:9.5px;font-weight:600;opacity:.8;}
  .cbtn:disabled{opacity:.45;cursor:not-allowed;}

  /* ===== MOBILE CART BAR ===== */
  #mobileBar{position:fixed;bottom:0;left:0;right:0;z-index:100;background:var(--card);
    border-top:1px solid var(--line);box-shadow:0 -8px 28px rgba(20,40,80,.13);}
  #mbToggle{display:flex;align-items:center;gap:12px;padding:13px 17px;cursor:pointer;background:var(--blue);color:#fff;}
  #mbToggle svg.cart{width:21px;height:21px;}
  #mbCount{background:var(--yellow);color:#7a5a00;font-size:11px;font-weight:900;min-width:21px;height:21px;padding:0 6px;
    border-radius:50px;display:flex;align-items:center;justify-content:center;}
  #mbToggle .label{font-weight:900;font-size:15px;}
  #mbToggle .total{margin-left:auto;font-size:17px;font-weight:900;color:var(--yellow);}
  #mbChevron{transition:transform .25s;}
  #mbBody{display:none;max-height:62vh;overflow:hidden;}
  #mbBody.open{display:block;}
  #mbItems{max-height:34vh;overflow-y:auto;padding:6px 15px;}

  /* ===== TOAST ===== */
  #toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%) translateY(20px);z-index:200;
    background:var(--ink);color:#fff;padding:12px 18px;border-radius:14px;font-size:13.5px;font-weight:800;
    display:flex;align-items:center;gap:9px;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:all .28s;}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  #toast svg{width:18px;height:18px;color:var(--yellow);}
  @media(min-width:881px){#toast{bottom:30px;}}

  /* ===== MODAL ===== */
  .modal{display:none;position:fixed;inset:0;z-index:300;background:rgba(15,23,42,.55);align-items:flex-end;justify-content:center;padding:0;}
  .modal.open{display:flex;}
  .sheet{background:#fff;border-radius:22px 22px 0 0;width:100%;max-width:520px;padding:22px 22px 28px;box-shadow:var(--shadow-lg);
    animation:slideUp .25s ease;}
  @keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
  .sheet h3{margin:0 0 4px;font-size:19px;font-weight:900;}
  .sheet p.sub{margin:0 0 16px;font-size:13px;color:var(--muted);font-weight:600;}
  .field{margin-bottom:13px;}
  .field label{display:block;font-size:12.5px;font-weight:800;margin-bottom:6px;color:var(--ink);}
  .field input,.field textarea{width:100%;border:1.6px solid var(--line);border-radius:13px;padding:13px 14px;font-size:16px;
    outline:none;transition:border .15s;font-family:inherit;}
  .field input:focus,.field textarea:focus{border-color:var(--blue);}
  .field textarea{resize:none;min-height:64px;}
  .sheet-btns{display:flex;gap:10px;margin-top:6px;}
  .sheet-btns button{flex:1;padding:14px;border-radius:14px;border:none;font-size:15px;font-weight:900;cursor:pointer;}
  .sheet-btns .cancel{background:#f1f4f9;color:#475569;}
  .sheet-btns .ok{background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;}
  .sheet-btns .ok svg{width:18px;height:18px;}
  @media(min-width:620px){.modal{align-items:center;}.sheet{border-radius:22px;animation:none;}}
  /* Cart sidebar scroll fix */
  #cartSidebar .chead{flex-shrink:0;}
  #cartSidebar #cartFooter{flex-shrink:0;}
  /* Admin popup */
  #adminPopup{display:none;}
  #adminPopup.open{display:flex;}

/* ═══════════════════════════════════════
   CUSTOM PAKET — tambahan, tidak mengubah rule yang ada
═══════════════════════════════════════ */

/* Tombol "Custom Paket" di section heading */
.btn-custom-paket {
  display: flex; align-items: center; gap: 6px;
  margin-left: 10px;
  padding: 6px 13px; border-radius: 50px;
  border: 1.6px solid var(--blue);
  background: var(--blue-soft); color: var(--blue);
  font-size: 12px; font-weight: 800; cursor: pointer;
  white-space: nowrap; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.btn-custom-paket:hover { background: var(--blue); color: #fff; }
@media (max-width: 480px) { .btn-custom-paket span { display: none; } }

/* Modal sheet paket */
.paket-sheet {
  background: #fff;
  border-radius: 22px 22px 0 0;
  width: 100%; max-width: 540px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 14px 40px rgba(20,40,80,.18);
  overflow: hidden;
  animation: slideUp .25s ease;
}
@media (min-width: 620px) {
  #paketModal { align-items: center !important; }
  .paket-sheet { border-radius: 22px; animation: none; }
}

/* Header modal */
.paket-head {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px 12px; border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.paket-x {
  width: 30px; height: 30px; border: none; border-radius: 8px;
  background: #f1f4f9; color: #475569;
  font-size: 18px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
}
.paket-x:hover { background: #e2e8f0; }

/* Scrollable body */
.paket-body {
  flex: 1; overflow-y: auto;
  padding: 14px 18px 6px;
}

/* Search row di dalam modal */
.paket-searchrow {
  display: flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--line); border-radius: 12px;
  padding: 9px 12px; background: var(--bg);
}
.paket-searchrow input {
  background: none; border: none; outline: none;
  font-size: 13.5px; width: 100%;
  font-family: inherit; color: var(--ink);
}

/* Dropdown hasil search */
.paket-results {
  display: none; border: 1.5px solid var(--line);
  border-radius: 12px; background: var(--card);
  overflow-y: auto; max-height: 200px;
  margin-top: 6px;
}
.paket-results.open { display: block; }
.paket-ritem {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-bottom: 1px solid var(--line);
  cursor: pointer; font-size: 13px; transition: background .1s;
}
.paket-ritem:last-child { border-bottom: none; }
.paket-ritem:hover { background: var(--blue-soft); }
.paket-ritem .pr-name  { flex: 1; font-weight: 700; }
.paket-ritem .pr-price { font-size: 12px; color: var(--blue); font-weight: 800; white-space: nowrap; }
.paket-ritem .pr-add {
  width: 26px; height: 26px; flex-shrink: 0;
  border: none; border-radius: 7px;
  background: var(--blue); color: #fff;
  font-size: 18px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}

/* Label section "Isi Paket" */
.paket-sec-label {
  font-size: 10.5px; font-weight: 800; color: var(--muted);
  letter-spacing: .3px; text-transform: uppercase;
  margin: 14px 0 6px;
}

/* Daftar item dalam paket */
.paket-items-wrap { min-height: 48px; }
.paket-empty-msg  { font-size: 13px; color: var(--muted); text-align: center; padding: 16px 0; }
.paket-row {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 0; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.paket-row:last-child { border-bottom: none; }
.paket-row .pr-iname { flex: 1; font-weight: 700; line-height: 1.3; }
.paket-row .pr-istep { display: flex; align-items: center; gap: 4px; }
.paket-row .pr-istep button {
  width: 26px; height: 26px; border: none; border-radius: 7px;
  cursor: pointer; font-size: 14px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
}
.pr-btn-m { background: #f1f4f9; color: #374151; }
.pr-btn-p { background: var(--blue); color: #fff; }
.pr-iqty  { min-width: 20px; text-align: center; font-size: 13px; font-weight: 800; }
.paket-row .pr-isub  { font-size: 12px; color: var(--blue); font-weight: 800; white-space: nowrap; }
.paket-row .pr-idel {
  width: 26px; height: 26px; border: none; border-radius: 7px;
  background: #fff0f0; color: var(--red);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.paket-row .pr-idel svg { width: 13px; height: 13px; }

/* Footer total + tombol */
.paket-foot {
  border-top: 1px solid var(--line);
  padding: 12px 18px 16px; flex-shrink: 0;
}
.paket-total-row {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13.5px; font-weight: 700;
}

/* Tampilan isi paket di dalam cart item */
.citem-paket-detail {
  margin: 4px 0 6px;
  padding: 6px 9px;
  background: var(--bg); border-radius: 8px;
  font-size: 11px; color: var(--muted); line-height: 1.8;
}
.citem-paket-detail b { color: var(--ink); font-weight: 800; }