/* =========================================================
 *  Adamentai – app.css (pro refresh, mobile 2×2)
 *  + Best Seller (rail horizontal kartu mini)
 *  + Paket & Promo (strip tipis: foto jelas, harga & qty rapi)
 *  + Perbaikan overflow layout & tabel admin bisa di-scroll horizontal
 * ========================================================= */

/* ========== Theme & base ========== */
:root{
  --bg:#f6f8fc;
  --surface:#ffffff;
  --text:#0f172a;
  --text-2:#1f2937;
  --muted:#6b7280;
  --line:#e5e7eb;
  --primary:#0ea5e9;
  --primary-600:#0284c7;
  --accent:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;

  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 4px 12px rgba(15,23,42,.06);
  --shadow:0 8px 24px rgba(15,23,42,.09);
  --shadow-lg:0 18px 50px rgba(15,23,42,.14);

  --gap:16px;
  --container:1200px;
  --brand-size:18px;

  --mobile-bar-h:64px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
html,body{
  margin:0;
  background:linear-gradient(180deg,#fafcff,#f6f8fd 40%,#f7f8fb);
  color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* Utilities */
.hidden{ display:none !important; }
.muted{ color:var(--muted); }
.tiny{ font-size:12px; }
.right{ text-align:right; }
.center{ text-align:center; }
.mt-6{ margin-top:6px; }

:focus-visible{
  outline:3px solid rgba(14,165,233,.35);
  outline-offset:2px; border-radius:6px;
}
.link{ appearance:none; border:0; background:transparent; color:var(--primary); cursor:pointer; }
.link:hover{ text-decoration:underline; }

/* ========== Container ========== */
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(14px, 4vw, 22px);
  padding-top:16px;
  padding-bottom:16px;
}
@media (max-width: 991.98px){
  .container{
    padding-bottom:calc(16px + var(--mobile-bar-h) + env(safe-area-inset-bottom));
  }
}

/* ========== Topbar ========== */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 14px;
  background:rgba(255,255,255,.78); backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand__logo{ width:28px; height:28px; border-radius:8px; }
.brand__name{ font-weight:800; font-size:var(--brand-size); letter-spacing:.2px; color:var(--text-2); }

.topnav{ display:flex; gap:6px; }
.tab{
  appearance:none; border:0; background:transparent;
  padding:8px 12px; border-radius:999px; cursor:pointer;
  color:var(--muted); font-weight:700;
}
.tab.is-active{ background:#e8f6ff; color:var(--primary); }

/* ========== Icon Buttons ========== */
.icon-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow-sm);
  cursor:pointer;
}
.icon-btn:hover{ box-shadow:var(--shadow); }
/* counter badge khusus icon-btn */
.icon-btn .badge{
  position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 5px;
  font-size:11px; background:var(--danger); color:#fff; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(239,68,68,.4);
}

/* SVG mask icons */
.icon-cart,.icon-search,.icon-x{
  display:inline-block; width:18px; height:18px; background:currentColor;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-position:center; mask-position:center;
}
.icon-cart{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4m10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4M2 2h2l3.6 7.59-1.35 2.45A2 2 0 0 0 8 15h9a 2 2 0 0 0 1.79-1.11L22 6'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M7 18a2 2 0 1 0 0 4 2 2 0 0 0 0-4m10 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4M2 2h2l3.6 7.59-1.35 2.45A2 2 0 0 0 8 15h9a 2 2 0 0 0 1.79-1.11L22 6'/></svg>");
}
.icon-search{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21l1-1-5.5-6zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79L20 21l1-1-5.5-6zM9.5 14C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/></svg>");
}
.icon-x{
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18.3 5.71 12 12l6.3 6.29-1.41 1.41L10.59 13.41 4.29 19.7 2.88 18.29 9.17 12 2.88 5.71 4.29 4.3l6.3 6.29 6.3-6.3z'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M18.3 5.71 12 12l6.3 6.29-1.41 1.41L10.59 13.41 4.29 19.7 2.88 18.29 9.17 12 2.88 5.71 4.29 4.3l6.3 6.29 6.3-6.3z'/></svg>");
}

/* ========== Section visibility ========== */
.section{ display:none; }
.section.is-active{ display:block; }

.sub{ display:none; }
.sub.is-active{ display:block; }

/* ========== Toolbar & Search ========== */
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:10px 0 8px; }
.searchbox{
  flex:1; display:flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:8px 12px; box-shadow:var(--shadow-sm);
}
.searchbox input{ border:0; outline:0; background:transparent; width:100%; font-size:14px; }

/* ========== Category chips ========== */
.chips-scroll{
  display:flex; align-items:center; gap:8px; overflow:auto;
  padding:6px 2px 12px; scrollbar-width:thin;
}
.chip{
  appearance:none; border:1px solid var(--line); background:#fff;
  padding:8px 14px; border-radius:999px; cursor:pointer; color:#1f2937;
  box-shadow:var(--shadow-sm); transition:.15s ease; white-space:nowrap;
}
.chip:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.chip.is-active{ background:#e8f6ff; color:var(--primary); border-color:#cdefff; }

/* ========== Main grid ========== */
.grid{ display:grid; gap:var(--gap); }
.grid--main{ grid-template-columns:1fr; }
.grid--main > *{ min-width:0; max-width:100%; }
@media (min-width: 992px){
  .grid--main{ grid-template-columns:minmax(0,1fr) 360px; align-items:start; }
}

/* ========== Cards (menu umum) ========== */
.cards{
  display:grid; gap:var(--gap);
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (max-width: 359.98px){
  .cards{ grid-template-columns: 1fr; }
}
@media (min-width:800px){
  .cards{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width:1120px){
  .cards{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* ===== Best Seller (rail horizontal kartu mini) ===== */
#sec-best { margin-bottom: 8px; }
#sec-best .cards{
  display:flex !important; gap:12px; overflow-x:auto;
  padding:4px 2px 12px; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; touch-action:pan-x;
}
#sec-best .cards::-webkit-scrollbar{ height:8px; }
#sec-best .cards::-webkit-scrollbar-thumb{ background:#e5e7eb; border-radius:999px; }

.card--mini{
  flex:0 0 160px; scroll-snap-align:start; border-radius:14px;
}
.card--mini .card__img{
  height:90px; width:100%; object-fit:cover; display:block;
  border-top-left-radius:inherit; border-top-right-radius:inherit;
}
.card--mini .card__body{ padding:10px; }
.card--mini .card__title{ font-size:14px; line-height:1.25; margin-bottom:2px; }
.card--mini .card__meta{ display:none; }
.card--mini .card__price{ font-size:14px; font-weight:700; margin-top:2px; }
.card--mini .qtyrow{ margin-top:6px; gap:6px; }
.card--mini .qty{ width:44px; height:30px; font-size:14px; }
.card--mini .add-btn{ padding:6px 10px; font-size:13px; }
.card--mini .card__stock{ font-size:12px; margin-top:6px; color:#059669; }
.card--mini .card__stock.is-empty{ color:#ef4444; }
.card--mini .card__stock.is-low{ color:#d97706; }
@media (max-width:360px){
  .card--mini{ flex-basis:140px; }
  .card--mini .card__img{ height:80px; }
}

/* ===== Paket & Promo – strip tipis dengan foto jelas ===== */
#sec-strip .cards{
  display:grid !important;
  grid-template-columns:1fr;
  gap:12px;
}
.card--wide{
  position:relative;
  grid-column:1/-1;
  display:grid;
  grid-template-columns: auto 1fr;
  gap:12px;
  align-items:center;
  padding:12px;
  border-radius:var(--radius);
  overflow:hidden;
}
.card--wide .card__img{
  display:block;
  width:clamp(180px, 30%, 220px);
  aspect-ratio:5 / 2;
  object-fit:cover;
  border-radius:12px;
  background:#f3f4f6;
}
.card--wide .card__stock{
  position:absolute; left:14px; top:12px; z-index:2;
  margin:0; padding:4px 8px; font-size:11px; opacity:.96;
}
.card--wide .card__body{
  padding:0;
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  column-gap:10px; row-gap:6px;
  align-items:center;
}
.card--wide .card__title{
  grid-column:1 / -1;
  font-size:16px; line-height:1.25; margin:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card--wide .card__meta{ display:none; }
.card--wide .card__price{
  grid-column:1 / 2;
  margin:0;
  font-size:16px; font-weight:800;
}
.card--wide .qtyrow{
  grid-column:2 / 3;
  justify-self:end;
  margin:0;
  gap:6px;
}
.card--wide .qty{ width:56px; height:34px; font-size:14px; }
.card--wide .add-btn{ height:34px; padding:0 12px; font-size:14px; }
@media (min-width:1024px){
  .card--wide .card__img{ width:clamp(160px, 26%, 240px); }
}

/* ========== Kartu umum ========== */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
  max-width:100%; min-width:0;
}
/* supaya scrollbar tabel admin tidak terpotong */
#adminPanel .card{ overflow:visible; }

.card--menu{ display:flex; flex-direction:column; }
.card__img{
  display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#f3f4f6;
}
.card__stock{
  margin:10px 12px -2px;
  font-size:12px; font-weight:600; color:#065f46;
  background:linear-gradient(180deg,#ecfdf5,#e7fbf2);
  border:1px solid #a7f3d0;
  padding:6px 10px; border-radius:999px; width:max-content;
  display:inline-flex; align-items:center; gap:6px;
  box-shadow:0 4px 10px rgba(16,185,129,.12);
}
.card__stock::before{
  content:""; width:8px; height:8px; border-radius:999px; background:#10b981;
  box-shadow:0 0 0 3px rgba(16,185,129,.15);
}
.card__stock.is-low{ color:#7c2d12; background:linear-gradient(180deg,#fff7ed,#fff4e5); border-color:#fed7aa; }
.card__stock.is-low::before{ background:#f59e0b; box-shadow:0 0 0 3px rgba(245,158,11,.18); }
.card__stock.is-empty{ color:#7f1d1d; background:linear-gradient(180deg,#fef2f2,#fee2e2); border-color:#fecaca; }
.card__stock.is-empty::before{ background:#ef4444; box-shadow:0 0 0 3px rgba(239,68,68,.18); }

.card__body{ padding:14px 12px 16px; }
.card__title{
  font-weight:800; font-size:16px; line-height:1.35; letter-spacing:.1px; color:var(--text-2);
  margin-top:6px;
}
.card__meta{ font-size:12px; color:var(--muted); margin-top:2px; }
.card__price{ margin-top:10px; font-weight:900; font-size:18px; }

/* Qty & button */
.qtyrow{ display:flex; gap:8px; margin-top:12px; }
.qty{
  width:84px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:#fff; font-weight:700;
}

/* ========== Buttons ========== */
.btn{
  appearance:none; border:0; cursor:pointer;
  padding:10px 14px; border-radius:12px;
  background:#e5e7eb; color:#111827; font-weight:800; box-shadow:var(--shadow-sm);
  transition:.15s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:var(--shadow); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }
.btn--primary{
  background:linear-gradient(180deg,var(--primary),var(--primary-600));
  color:#fff; box-shadow:0 10px 24px rgba(2,132,199,.35);
}
.btn--ghost{ background:#fff; color:#111827; border:1px solid var(--line); }
.btn--block{ width:100%; }
.danger{ color:var(--danger) !important; }

/* ========== Cart (desktop aside) ========== */
.cart{ position:sticky; top:16px; padding:12px; }
.card__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:8px; border-bottom:1px dashed var(--line);
}
.cart__items{ padding:12px 0; display:grid; gap:8px; }
.cart__row{ display:grid; grid-template-columns:1fr auto auto 32px; gap:8px; align-items:center; border-bottom:1px dashed #f0f1f3; padding-bottom:8px; }
.cart__name{ font-weight:600; }
.cart__qty{ color:var(--muted); }
.cart__sub{ font-weight:800; }
.cart__row.warn .cart__name{ color:#b45309; }
.cart__row.warn .cart__sub{ color:#b45309; }

.cart__summary{ border-top:1px solid var(--line); padding-top:10px; margin-top:6px; }
.cart__summary .row{ display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }

/* Promo pill */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700;
  background:#eef6ff; color:#075985; border:1px solid #cde4ff;
}

/* ========== Customer collapsible ========== */
.collapsible{
  margin:10px 0 12px; background:#f9fafb; border:1px dashed var(--line);
  border-radius:12px; padding:6px 10px;
}
.collapsible>summary{ list-style:none; cursor:pointer; font-weight:800; }
.collapsible[open]>summary{ color:var(--primary); }

/* ========== Forms ========== */
.form{ display:grid; gap:12px; }
.field{ display:grid; gap:6px; }
.field>span{ font-size:12px; color:var(--muted); }
.field input,.field textarea,.field select{
  width:100%; border:1px solid var(--line); background:#fff; border-radius:10px; padding:10px 12px;
  outline:none; font:inherit;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:#bae6fd; box-shadow:0 0 0 4px rgba(14,165,233,.15);
}

/* ========== Admin area ========== */
#adminPanel .card{ margin-bottom:16px; }
.subtabs{ display:flex; gap:8px; margin:8px 0 12px; }
.subtab{
  appearance:none; border:1px solid var(--line); background:#fff;
  padding:8px 12px; border-radius:10px; cursor:pointer; font-weight:800;
}
.subtab.is-active{ border-color:#bae6fd; background:#e8f6ff; color:var(--primary); }

.grid--2cols{ display:grid; grid-template-columns:1fr; gap:var(--gap); }
@media (min-width:720px){ .grid--2cols{ grid-template-columns:1fr 1fr; } }
.actions-row{ display:flex; gap:8px; margin-top:8px; }

/* ===== Admin tables: horizontal scroll di mobile ===== */
.table-wrap{
  position: relative;
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  touch-action:pan-x;
  contain:inline-size; /* Penting: konten tak mempengaruhi lebar parent/kartu */
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow-sm);
  margin-top:8px;
  padding-bottom:6px; /* ruang untuk scrollbar */
}
.table{
  width:100%;
  border-collapse:collapse;
  table-layout:auto;
  font-size:14px;
  white-space:nowrap;
}
.table thead th{
  background:#f9fafb; text-align:left; padding:10px 12px; border-bottom:1px solid var(--line);
}
.table tbody td{
  padding:10px 12px; border-bottom:1px solid #f2f3f6;
}

/* Lebar minimum kolom agar tidak kepotong */
/* MENU */
#tblMenu{ min-width:1060px; }
#tblMenu th:nth-child(1), #tblMenu td:nth-child(1){ min-width:260px; }                   /* Nama     */
#tblMenu th:nth-child(2), #tblMenu td:nth-child(2){ min-width:200px; }                   /* Kategori */
#tblMenu th:nth-child(3), #tblMenu td:nth-child(3){ min-width:120px; text-align:right; } /* Harga    */
#tblMenu th:nth-child(4), #tblMenu td:nth-child(4){ min-width:100px; text-align:right; } /* Stok     */
#tblMenu th:nth-child(5), #tblMenu td:nth-child(5){ min-width:90px;  text-align:center;} /* Aktif    */
#tblMenu th:nth-child(6), #tblMenu td:nth-child(6){ min-width:160px; text-align:center;} /* Aksi     */

/* PROMO */
#tblPromo{ min-width:980px; }
#tblPromo th:nth-child(1), #tblPromo td:nth-child(1){ min-width:130px; }                  /* Kode    */
#tblPromo th:nth-child(2), #tblPromo td:nth-child(2){ min-width:80px;  text-align:center;}/* Tipe    */
#tblPromo th:nth-child(3), #tblPromo td:nth-child(3){ min-width:110px; text-align:right; }/* Nilai   */
#tblPromo th:nth-child(4), #tblPromo td:nth-child(4){ min-width:130px; text-align:right; }/* Min     */
#tblPromo th:nth-child(5), #tblPromo td:nth-child(5){ min-width:260px; }                   /* Periode */
#tblPromo th:nth-child(6), #tblPromo td:nth-child(6){ min-width:90px;  text-align:center;} /* Aktif   */
#tblPromo th:nth-child(7), #tblPromo td:nth-child(7){ min-width:160px; text-align:center;} /* Aksi    */

/* Preview image in admin */
.preview{ display:flex; align-items:center; gap:10px; }
.thumb{ max-width:160px; height:auto; border-radius:12px; border:1px solid var(--line); box-shadow:var(--shadow-sm); background:#fff; }

/* ========== Mobile cart drawer ========== */
.drawer{ position:fixed; inset:0; display:none; z-index:50; }
.drawer.open{ display:block; }
.drawer__scrim{ position:absolute; inset:0; background:rgba(2,6,23,.42); backdrop-filter:blur(2px); }
.drawer__panel{
  position:absolute; left:0; right:0; bottom:0; background:#fff;
  border-top-left-radius:16px; border-top-right-radius:16px; box-shadow:var(--shadow-lg);
  transform:translateY(100%); transition:transform .25s ease;
  max-height:calc(100% - 56px);
}
.drawer.open .drawer__panel{ transform:translateY(0); }
.drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid var(--line); }
.drawer__customer{ padding:10px 16px; }
.drawer__foot{
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  padding:12px 16px; border-top:1px solid var(--line); background:#fafafa;
  border-bottom-left-radius:16px; border-bottom-right-radius:16px;
}
.drawer__foot .total{ display:flex; align-items:baseline; gap:8px; }

/* ========== Mobile bottom bar ========== */
.mobile-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:35;
  display:none; align-items:center; gap:10px;
  background:rgba(255,255,255,.95); backdrop-filter:blur(10px);
  border-top:1px solid var(--line); padding:10px 12px; height:var(--mobile-bar-h);
}
.mobile-cart{
  display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:8px 12px; box-shadow:var(--shadow-sm);
}
.mobile-cart .label{ font-weight:800; }
.mobile-bar .badge{
  position:static; min-width:auto; height:auto; padding:2px 6px;
  font-size:12px; border-radius:999px; box-shadow:none;
  background:var(--danger); color:#fff; margin-left:6px;
}

.mobile-total{ display:flex; flex-direction:column; align-items:flex-end; }
.mobile-total .small{ font-size:11px; color:var(--muted); }

.show-mobile{ display:flex; }
.hide-mobile{ display:none; }
@media (min-width: 992px){
  .show-mobile{ display:none !important; }
  .hide-mobile{ display:block !important; }
  .mobile-bar{ display:none !important; }
}
@media (max-width: 991.98px){
  .mobile-bar{ display:flex; }
}

/* ========== Snackbar ========== */
.snackbar{
  position:fixed; left:50%; transform:translateX(-50%);
  bottom:calc(var(--mobile-bar-h) + 16px);
  z-index:60; background:#111827; color:#fff; padding:10px 14px; border-radius:12px;
  box-shadow:var(--shadow-lg); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.snackbar.show{ opacity:1; transform: translateX(-50%) translateY(-4px); }

/* ========== Responsive fine-tune mobile ========== */
@media (max-width: 420px){
  .card__stock{ font-size:11px; padding:4px 8px; margin:8px 10px -2px; }
  .card__title{ font-size:14px; }
  .card__price{ font-size:16px; }
  .qty{ width:72px; padding:8px 10px; }
  .btn{ padding:9px 12px; font-weight:800; }
  .chip{ padding:7px 12px; }
  .brand__name{ font-size:16px; }
}

/* ========== Misc & helpers ========== */
details summary::-webkit-details-marker{ display:none; }
details>summary{ outline:none; }

.spinner{ display:inline-block; width:1em; height:1em; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent;
  margin-right:.5em; vertical-align:-.15em; animation:spin .7s linear infinite; }
.is-loading{ opacity:.85; pointer-events:none; }
@keyframes spin { to { transform: rotate(360deg); } }
.field-error{ outline:2px solid #ef4444; border-radius:10px; }

input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; appearance:none; display:none; }
input[type="search"]::-ms-clear{ display:none; }

/* Qty controls */
.qtyctl{ display:inline-grid; grid-auto-flow:column; align-items:center; gap:.35rem; }
.qtyctl .qdec,.qtyctl .qinc{ width:32px; height:32px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:700; }
.qtyctl .qinput{ width:48px; height:32px; text-align:center; border-radius:10px; padding:0; margin:0; }

/* Drawer full height + scrollable area */
.drawer__panel{ display:flex; flex-direction:column; height:100dvh; max-height:100dvh; }
.drawer__customer{
  flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:8px 16px 12px;
}
.drawer__foot{ flex:0 0 auto; position:sticky; bottom:0; background:#fff; border-top:1px solid #eee; padding:12px 16px; }

/* media assets */
img,video,canvas{ max-width:100%; height:auto; }
s{ opacity:.7; }

/* Badge default (inline) */
.badge{
  position:static;
  display:inline-flex;
  align-items:center;
  padding:.2rem .5rem;
  border-radius:.5rem;
  font-size:12px;
  line-height:1;
  background:#eef2ff;
  color:#1f2937;
  box-shadow:none;
}
.badge--best{ background:#fef3c7; }
.badge--strip{ background:#dbeafe; }
.badge--promo{ background:#dcfce7; }

/* ===== Fancy Page Loading ===== */
.pageload{
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: radial-gradient(1200px 800px at 50% 20%, rgba(14,165,233,.10), rgba(255,255,255,.92));
  backdrop-filter: blur(4px);
}
.pageload.show{ display:flex; }
.pl__box{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px; border-radius:16px;
  background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-lg);
}
.pl__ring{
  width:60px; height:60px; border-radius:999px;
  background:
    conic-gradient(from 0deg, var(--primary) 0 120deg, #a5d8ff 140deg 200deg, transparent 200deg 360deg);
  -webkit-mask: radial-gradient(circle at center, transparent 56%, #000 58%);
          mask: radial-gradient(circle at center, transparent 56%, #000 58%);
  animation: pl-spin 1s linear infinite;
  filter: drop-shadow(0 6px 24px rgba(2,132,199,.35));
}
@keyframes pl-spin { to { transform: rotate(360deg); } }

.pl__text{ min-width:220px; }
.pl__title{
  font-weight:800; color:var(--text-2); margin-bottom:8px;
}
.pl__bar{
  position:relative; height:8px; border-radius:999px; overflow:hidden;
  background: #eef2ff; border:1px solid #e5e7eb;
}
.pl__bar>span{
  position:absolute; inset:0 auto 0 0; width:45%;
  background: linear-gradient(90deg, #e6f6ff, var(--primary), #e6f6ff);
  animation: pl-move 1.05s linear infinite;
}
@keyframes pl-move { from { transform: translateX(-100%);} to { transform: translateX(220%);} }

.pl__tips{
  margin-top:8px; font-size:12px; color:var(--muted);
  animation: pl-fade 1.2s ease-in-out infinite alternate;
}
@keyframes pl-fade { from { opacity:.55; } to { opacity:1; } }

/* +/- lebih kecil */
#cartDrawer .quantity button,
#cartDrawer .qty button,
#cartDrawer button.qty-minus,
#cartDrawer button.qty-plus{
  font-size: 11px;        /* <- kecilin angka/glyph +/- */
  padding: 4px 8px;       /* <- tombol sedikit lebih mungil */
  min-width: 30px;
  min-height: 30px;
  border-radius: 9999px;
}

/* input angka di tengah biar proporsional dengan tombol */
#cartDrawer .quantity input[type="number"],
#cartDrawer .qty input[type="number"],
#cartDrawer input.qty-input{
  font-size: 12px;
  padding: 4px 8px;
  width: 44px;
  height: 30px;
  line-height: 30px;
  border-radius: 12px;
}