:root{--ms-brand:#21cc87;--ms-brand-rgb:33,204,135;}
.ms-hdr{--ms-brand:var(--ms-hdr-brand,#21cc87);font-family:'Plus Jakarta Sans',sans-serif;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(15,23,42,.06);position:fixed;top:0;left:0;width:100%;z-index:60;transition:background .35s ease,color .35s ease,border-color .35s ease;overflow:visible;}
html.dark .ms-hdr,body.dark .ms-hdr{background:rgba(21,28,44,.92);border-bottom-color:rgba(255,255,255,.06);}
.ms-hdr *{box-sizing:border-box;}
.ms-hdr-inner{max-width:1200px;margin:0 auto;padding:0 16px;}
@media(min-width:640px){.ms-hdr-inner{padding:0 24px;}}
.ms-hdr-top{display:flex;align-items:center;justify-content:space-between;height:70px;gap:8px;position:relative;}
.ms-hdr-ham{display:inline-flex;align-items:center;justify-content:flex-start;background:none;border:0;width:40px;height:40px;color:#475569;font-size:18px;cursor:pointer;border-radius:12px;}
.ms-hdr-ham:hover{color:var(--ms-brand);background:rgba(15,23,42,.04);}
html.dark .ms-hdr-ham,body.dark .ms-hdr-ham{color:#cbd5e1;}
@media(min-width:768px){.ms-hdr-ham{display:none;}}
/* Dashboard pages also have the green sidebar toggle: the header hamburger
   stays visible on <768px so every user page always has one navigation entry
   point; on >=768px both are hidden and the side nav is inline. */
body:has(.dashboard .dashboard-body__bar) .ms-hdr-ham{display:inline-flex !important;}
@media(min-width:768px){ body:has(.dashboard .dashboard-body__bar) .ms-hdr-ham{display:none !important;} }
.ms-hdr-logo{position:absolute;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;text-decoration:none;line-height:1;}
@media(min-width:768px){.ms-hdr-logo{position:static;transform:none;}}
.ms-hdr-logo-img{display:block;height:36px;width:auto;max-width:180px;object-fit:contain;}
@media(min-width:768px){.ms-hdr-logo-img{height:42px;max-width:200px;}}
.ms-hdr-logo-img--dark{display:none;}
html.dark .ms-hdr-logo-img--light,body.dark .ms-hdr-logo-img--light{display:none;}
html.dark .ms-hdr-logo-img--dark,body.dark .ms-hdr-logo-img--dark{display:block;}

.ms-hdr-actions{display:flex;align-items:center;gap:6px;}
@media(min-width:640px){.ms-hdr-actions{gap:8px;}}
.ms-hdr-icon-btn{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:rgba(15,23,42,.06);color:#475569;font-size:14px;border:0;cursor:pointer;transition:background .2s ease,color .2s ease;}
.ms-hdr-icon-btn:hover{background:rgba(33,204,135,.12);color:var(--ms-brand);}
@media(min-width:768px){.ms-hdr-icon-btn{display:inline-flex;}}
html.dark .ms-hdr-icon-btn,body.dark .ms-hdr-icon-btn{background:rgba(255,255,255,.06);color:#cbd5e1;}
html.dark .ms-hdr-icon-btn:hover,body.dark .ms-hdr-icon-btn:hover{background:rgba(33,204,135,.18);color:var(--ms-brand);}
.ms-hdr-icon-btn-mobile{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:rgba(15,23,42,.06);color:#475569;font-size:14px;border:0;cursor:pointer;margin-left:4px;}
@media(min-width:768px){.ms-hdr-icon-btn-mobile{display:none;}}
.ms-hdr-divider{width:1px;height:20px;background:rgba(15,23,42,.12);margin:0 4px;}
@media(max-width:767px){.ms-hdr-divider{display:none;}}
html.dark .ms-hdr-divider,body.dark .ms-hdr-divider{background:rgba(255,255,255,.12);}

.ms-hdr-curr{display:none;align-items:center;position:relative;}
@media(min-width:768px){.ms-hdr-curr{display:inline-flex;}}
.ms-hdr-curr-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 12px;border-radius:12px;background:rgba(15,23,42,.06);color:#475569;font-size:12px;font-weight:700;border:0;cursor:pointer;}
.ms-hdr-curr-btn:hover{background:rgba(33,204,135,.12);color:var(--ms-brand);}
.ms-hdr-curr-btn img{width:18px;height:auto;border-radius:2px;}
.ms-hdr-curr-btn i{font-size:10px;opacity:.7;}
html.dark .ms-hdr-curr-btn,body.dark .ms-hdr-curr-btn{background:rgba(255,255,255,.06);color:#cbd5e1;}
.ms-hdr-lang{display:none;align-items:center;position:relative;}
@media(min-width:768px){.ms-hdr-lang{display:inline-flex;}}
.ms-hdr-lang-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border-radius:12px;background:rgba(15,23,42,.06);color:#475569;font-size:12px;font-weight:700;border:0;cursor:pointer;}
.ms-hdr-lang-btn:hover{background:rgba(33,204,135,.12);color:var(--ms-brand);}
.ms-hdr-lang-btn i:first-of-type{font-size:14px;}
.ms-hdr-lang-btn i:last-of-type{font-size:10px;opacity:.7;}
html.dark .ms-hdr-lang-btn,body.dark .ms-hdr-lang-btn{background:rgba(255,255,255,.06);color:#cbd5e1;}
html.dark .ms-hdr-lang-btn:hover,body.dark .ms-hdr-lang-btn:hover{background:rgba(33,204,135,.18);color:var(--ms-brand);}
.ms-hdr-dd-lang{width:200px;padding:8px;display:flex;flex-direction:column;gap:2px;}
.ms-hdr-dd-lang a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;text-decoration:none;font-size:12px;font-weight:700;color:#1A2235;transition:background .15s ease;}
.ms-hdr-dd-lang a:hover{background:rgba(15,23,42,.04);}
.ms-hdr-dd-lang a.is-active{color:#065f46;background:rgba(33,204,135,.12);}
.ms-hdr-dd-lang a i{margin-left:auto;color:var(--ms-brand);}
html.dark .ms-hdr-dd-lang a,body.dark .ms-hdr-dd-lang a{color:#e2e8f0;}
html.dark .ms-hdr-dd-lang a:hover,body.dark .ms-hdr-dd-lang a:hover{background:rgba(255,255,255,.06);}
html.dark .ms-hdr-dd-lang a.is-active,body.dark .ms-hdr-dd-lang a.is-active{color:#86efac;background:rgba(33,204,135,.2);}

/* Fix 2026-10-21: butang profile dipapar juga pada MOBILE (dulu display:none
   <768px — user tiada pintu masuk dashboard dari header). Butang dalamnya
   guna .ms-hdr-icon-btn yang tersembunyi <768px, jadi dipaksa papar di sini. */
.ms-hdr-profile{display:inline-flex;align-items:center;position:relative;}
.ms-hdr-profile .ms-hdr-icon-btn{display:inline-flex;}
@media(min-width:768px){.ms-hdr-profile{display:inline-flex;}}
.ms-hdr-cart{display:inline-flex;align-items:center;position:relative;}

.ms-hdr-dd{position:absolute;top:calc(100% + 16px);right:0;min-width:180px;background:#fff !important;border:1px solid rgba(15,23,42,.06);border-radius:20px;box-shadow:0 25px 50px -12px rgba(0,0,0,.18);opacity:0;pointer-events:none;transform:translateY(-12px);transition:opacity .25s ease,transform .25s ease;z-index:110;display:flex;flex-direction:column;overflow:hidden;}
.ms-hdr-dd.is-open{opacity:1;pointer-events:auto;transform:translateY(0);}
html.dark .ms-hdr-dd,body.dark .ms-hdr-dd{
  background:rgba(15,23,42,.72) !important;
  border-color:rgba(255,255,255,.16);
  box-shadow:0 25px 50px -12px rgba(2,6,23,.72), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
}
html.dark .ms-hdr-dd-lang,body.dark .ms-hdr-dd-lang{background:transparent !important;}
html.dark .ms-hdr-dd-lang a,body.dark .ms-hdr-dd-lang a{color:#e5edf7 !important;}
html.dark .ms-hdr-dd-lang a:hover,body.dark .ms-hdr-dd-lang a:hover{background:rgba(255,255,255,.09);}
html.dark .ms-hdr-dd-lang a.is-active,body.dark .ms-hdr-dd-lang a.is-active{background:rgba(33,204,135,.22);color:#b7f7d6 !important;}
html.dark .ms-hdr-dd-lang a i,body.dark .ms-hdr-dd-lang a i{color:#63e6a5;}

.ms-hdr-dd-curr{width:180px;padding:8px;display:flex;flex-direction:column;gap:2px;}
.ms-hdr-dd-curr a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;text-decoration:none;font-size:12px;font-weight:700;color:#1A2235;transition:background .15s ease;}
.ms-hdr-dd-curr a:hover{background:rgba(15,23,42,.04);}
.ms-hdr-dd-curr a.is-active{color:#065f46;background:rgba(33,204,135,.12);}
.ms-hdr-dd-curr a img{width:18px;height:auto;border-radius:2px;opacity:.9;}
.ms-hdr-dd-curr a:not(.is-active) img{opacity:.55;}
html.dark .ms-hdr-dd-curr a,body.dark .ms-hdr-dd-curr a{color:#e2e8f0;}
html.dark .ms-hdr-dd-curr a:hover,body.dark .ms-hdr-dd-curr a:hover{background:rgba(255,255,255,.06);}
.ms-hdr-dd-curr a i{color:var(--ms-brand);}

.ms-hdr-dd-profile{width:220px;}
.ms-hdr-dd-profile-head{padding:14px 16px;border-bottom:1px solid rgba(15,23,42,.06);display:flex;align-items:center;gap:10px;}
html.dark .ms-hdr-dd-profile-head,body.dark .ms-hdr-dd-profile-head{border-bottom-color:rgba(255,255,255,.06);}
.ms-hdr-dd-profile-avatar{width:40px;height:40px;border-radius:12px;background:var(--ms-brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;flex-shrink:0;overflow:hidden;}
.ms-hdr-dd-profile-avatar img{width:100%;height:100%;object-fit:cover;}
.ms-hdr-dd-profile-name{font-size:13px;font-weight:700;color:#1A2235;line-height:1.1;margin-bottom:2px;}
.ms-hdr-dd-profile-email{font-size:11.5px;color:#94a3b8;font-weight:500;}
html.dark .ms-hdr-dd-profile-name,body.dark .ms-hdr-dd-profile-name{color:#fff;}
.ms-hdr-dd-profile-body{padding:8px;display:flex;flex-direction:column;gap:2px;}
.ms-hdr-dd-profile-body a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none;font-size:12px;font-weight:600;color:#1A2235;transition:background .15s ease;}
.ms-hdr-dd-profile-body a:hover{background:rgba(15,23,42,.04);}
.ms-hdr-dd-profile-body a i{color:#94a3b8;width:16px;}
html.dark .ms-hdr-dd-profile-body a,body.dark .ms-hdr-dd-profile-body a{color:#cbd5e1;}
html.dark .ms-hdr-dd-profile-body a:hover,body.dark .ms-hdr-dd-profile-body a:hover{background:rgba(255,255,255,.06);}
.ms-hdr-dd-profile-foot{padding:8px;border-top:1px solid rgba(15,23,42,.06);}
html.dark .ms-hdr-dd-profile-foot,body.dark .ms-hdr-dd-profile-foot{border-top-color:rgba(255,255,255,.06);}
.ms-hdr-dd-profile-foot a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;text-decoration:none;font-size:12px;font-weight:700;color:#ff5e5e;transition:background .15s ease;}
.ms-hdr-dd-profile-foot a:hover{background:rgba(255,94,94,.1);}
.ms-hdr-dd-profile-foot a i{width:16px;}

.ms-hdr-dd-cart{width:min(352px,calc(100vw - 24px));max-height:75vh;background:#fff;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 18px 40px rgba(15,23,42,.14),0 0 0 1px rgba(15,23,42,.04);}
.ms-hdr-dd-cart-head{padding:12px 14px;border-bottom:1px solid rgba(15,23,42,.06);display:flex;justify-content:space-between;align-items:center;background:rgba(15,23,42,.02);border-radius:20px 20px 0 0;gap:10px;}
html.dark .ms-hdr-dd-cart-head,body.dark .ms-hdr-dd-cart-head{border-bottom-color:rgba(255,255,255,.06);background:rgba(255,255,255,.04);}
.ms-hdr-dd-cart-title{margin:0;font-size:15px;font-weight:800;color:#1A2235;display:flex;align-items:center;gap:8px;letter-spacing:-.01em;font-family:'Plus Jakarta Sans',sans-serif;}
.ms-hdr-dd-cart-title i{color:var(--ms-brand);font-size:13px;}
html.dark .ms-hdr-dd-cart-title,body.dark .ms-hdr-dd-cart-title{color:#fff;}
.ms-hdr-dd-cart-count{font-size:11.5px;background:rgba(15,23,42,.06);color:#64748b;padding:3px 8px;border-radius:999px;font-weight:700;line-height:1.2;white-space:nowrap;}
html.dark .ms-hdr-dd-cart-count,body.dark .ms-hdr-dd-cart-count{background:rgba(255,255,255,.08);color:#cbd5e1;}
.ms-hdr-dd-cart-body{flex:1;overflow-y:auto;padding:10px 12px;min-height:0;background:#fff;}
.ms-hdr-dd-cart-empty{text-align:center;padding:18px 8px 16px;color:#94a3b8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;}
.ms-hdr-dd-cart-empty-icon{width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(15,23,42,.04);color:#94a3b8;margin:0;}
.ms-hdr-dd-cart-empty-icon i{font-size:18px;margin:0;opacity:.85;line-height:1;}
.ms-hdr-dd-cart-empty p{font-weight:600;font-size:12px;margin:0;color:#64748b;letter-spacing:-.01em;}
.ms-hdr-dd-cart-empty small{font-size:11px;font-weight:500;color:#94a3b8;line-height:1.35;max-width:200px;}
html.dark .ms-hdr-dd-cart-empty p,body.dark .ms-hdr-dd-cart-empty p{color:#cbd5e1;}
html.dark .ms-hdr-dd-cart-empty-icon,body.dark .ms-hdr-dd-cart-empty-icon{background:rgba(255,255,255,.06);color:#94a3b8;}
.ms-hdr-dd-cart-foot{padding:10px 12px 12px;border-top:1px solid rgba(15,23,42,.06);background:#fff !important;border-radius:0 0 20px 20px;}
html.dark .ms-hdr-dd-cart-foot,body.dark .ms-hdr-dd-cart-foot{background:#1A2235;border-top-color:rgba(255,255,255,.06);}
.ms-hdr-dd-cart-total{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.ms-hdr-dd-cart-total span:first-child{font-size:11px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em;}
.ms-hdr-dd-cart-total .ms-hdr-dd-cart-total-val{font-size:16px;font-weight:800;color:#1A2235;line-height:1;letter-spacing:-.02em;}
html.dark .ms-hdr-dd-cart-total-val,body.dark .ms-hdr-dd-cart-total-val{color:#fff;}
.ms-hdr-dd-cart-checkout{width:100%;background:var(--ms-brand);color:#fff;font-weight:700;padding:10px 12px;border-radius:12px;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:13px;line-height:1;transition:filter .2s ease,background .2s ease,transform .15s ease;}
.ms-hdr-dd-cart-checkout:hover{filter:brightness(.95);}
.ms-hdr-dd-cart-checkout.is-disabled{background:rgba(15,23,42,.08);color:#94a3b8;cursor:not-allowed;filter:none;}
/* badge pulse when item added */
.ms-hdr-cart-badge.ms-badge-pulse{animation:msCartPulse 1.1s ease;}
@keyframes msCartPulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(33,204,135,.55)}55%{transform:scale(1.35);box-shadow:0 0 0 7px rgba(33,204,135,0)}100%{transform:scale(1)}}
html.dark .ms-hdr-dd-cart-checkout.is-disabled,body.dark .ms-hdr-dd-cart-checkout.is-disabled{background:rgba(255,255,255,.08);color:#64748b;}
.ms-hdr-cart-badge{position:absolute;top:-6px;right:-6px;background:#ff5e5e;color:#fff;font-size:9px;font-weight:700;width:16px;height:16px;display:none;align-items:center;justify-content:center;border-radius:999px;border:2px solid #fff;transition:transform .3s ease;}
html.dark .ms-hdr-cart-badge,body.dark .ms-hdr-cart-badge{border-color:#151C2C;}
.ms-hdr-cart-badge.has-items{display:inline-flex;animation:ms-hdr-bounce .4s ease;}
@keyframes ms-hdr-bounce{from{transform:scale(1)}50%{transform:scale(1.25)}to{transform:scale(1)}}
.ms-hdr-cart-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;background:rgba(15,23,42,.06);color:#1A2235;border:1px solid transparent;cursor:pointer;font-size:14px;transition:background .2s ease,color .2s ease,border-color .2s ease;}
.ms-hdr-cart-btn:hover{background:var(--ms-brand);color:#fff;}
html.dark .ms-hdr-cart-btn,body.dark .ms-hdr-cart-btn{background:rgba(255,255,255,.06);color:#e2e8f0;border-color:rgba(255,255,255,.04);}

.ms-hdr-nav{display:none;align-items:center;justify-content:center;gap:32px;height:48px;font-size:13px;font-weight:700;color:#64748b;letter-spacing:.2px;padding-bottom:4px;}
@media(min-width:768px){.ms-hdr-nav{display:flex;}}
.ms-hdr-nav a{text-decoration:none;color:#64748b;height:100%;display:inline-flex;align-items:center;transition:color .2s ease;}
.ms-hdr-nav a:hover{color:#1A2235;}
.ms-hdr-nav a.is-active{color:var(--ms-brand);border-bottom:3px solid var(--ms-brand);}
html.dark .ms-hdr-nav,body.dark .ms-hdr-nav{color:#94a3b8;}
html.dark .ms-hdr-nav a,body.dark .ms-hdr-nav a{color:#94a3b8;}
html.dark .ms-hdr-nav a:hover,body.dark .ms-hdr-nav a:hover{color:#fff;}

/* Must match fixed .ms-hdr height only (no extra white gap under bar) */
.ms-hdr-scroll-pad{height:70px;} /* .ms-hdr-top */
@media(min-width:768px){.ms-hdr-scroll-pad{height:118px;}} /* top 70 + nav 48 */

/* MOBILE DRAWER (offcanvas) */
.ms-hdr-drawer{width:300px;max-width:88vw;background:#fff;color:#1A2235;border:0;box-shadow:0 25px 50px -12px rgba(0,0,0,.2);}
html.dark .ms-hdr-drawer,body.dark .ms-hdr-drawer{background:#1A2235;color:#f3f4f6;}
.ms-hdr-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid rgba(15,23,42,.06);background:#fff;}
html.dark .ms-hdr-drawer-head,body.dark .ms-hdr-drawer-head{background:#1A2235;border-bottom-color:rgba(255,255,255,.06);}
.ms-hdr-drawer-title{margin:0;display:flex;align-items:center;line-height:1;flex:1;}
.ms-hdr-drawer-title a{display:inline-flex;align-items:center;text-decoration:none;}
.ms-hdr-drawer-logo{display:inline-flex;align-items:center;text-decoration:none;}
.ms-hdr-drawer-logo-img{display:block;height:32px;width:auto;max-width:160px;object-fit:contain;}
.ms-hdr-drawer-logo-img--dark{display:none;}
html.dark .ms-hdr-drawer-logo-img--light,body.dark .ms-hdr-drawer-logo-img--light{display:none;}
html.dark .ms-hdr-drawer-logo-img--dark,body.dark .ms-hdr-drawer-logo-img--dark{display:block;}
.ms-hdr-drawer-close{background:none;border:0;width:36px;height:36px;border-radius:10px;color:#64748b;font-size:18px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;}
.ms-hdr-drawer-close:hover{background:rgba(15,23,42,.06);color:#1A2235;}
html.dark .ms-hdr-drawer-close{color:#9ca3af;}
html.dark .ms-hdr-drawer-close:hover{background:rgba(255,255,255,.06);color:#fff;}
.ms-hdr-drawer-body{display:flex;flex-direction:column;padding:0;}
.ms-hdr-drawer-nav{display:flex;flex-direction:column;gap:2px;padding:16px 12px 8px;}
.ms-hdr-drawer-item{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;text-decoration:none;color:#1A2235;font-size:15px;font-weight:500;transition:background .2s ease,color .2s ease;}
.ms-hdr-drawer-item:hover{background:rgba(15,23,42,.04);}
.ms-hdr-drawer-item.is-active{background:rgba(33,204,135,.12);color:#065f46;}
.ms-hdr-drawer-item i{width:20px;color:#64748b;font-size:15px;text-align:center;}
.ms-hdr-drawer-item.is-active i{color:var(--ms-brand);}
html.dark .ms-hdr-drawer-item{color:#e5e7eb;}
html.dark .ms-hdr-drawer-item.is-active{background:rgba(33,204,135,.2);color:#86efac;}
html.dark .ms-hdr-drawer-item.is-active i{color:#86efac;}
.ms-hdr-drawer-divider{height:1px;background:rgba(15,23,42,.06);margin:8px 24px;}
html.dark .ms-hdr-drawer-divider{background:rgba(255,255,255,.06);}
.ms-hdr-drawer-pref{padding:8px 24px 0;}
.ms-hdr-drawer-section{margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#9ca3af;}
.ms-hdr-drawer-curr{position:relative;}
.ms-hdr-drawer-curr-btn{width:100%;display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid rgba(15,23,42,.12);border-radius:12px;background:#fff;color:#1A2235;font-size:14px;font-weight:500;cursor:pointer;transition:border-color .2s ease;}
.ms-hdr-drawer-curr-flag{width:28px;height:20px;border-radius:4px;overflow:hidden;background:#f3f4f6;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 1px 2px rgba(0,0,0,0.08);}
.ms-hdr-drawer-curr-flag img{width:100%;height:100%;object-fit:cover;display:block;}
.ms-hdr-drawer-curr-btn:hover{border-color:rgba(33,204,135,.4);}
.ms-hdr-drawer-curr-btn i:first-of-type{color:#9ca3af;font-size:16px;}
.ms-hdr-drawer-curr-btn i:last-child{margin-left:auto;color:#9ca3af;font-size:11px;}
.ms-hdr-drawer-curr-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1px;flex:1;}
.ms-hdr-drawer-curr-copy strong{font-size:14px;font-weight:500;color:#1A2235;line-height:1.2;}
.ms-hdr-drawer-curr-copy small{font-size:12px;color:#64748b;}
html.dark .ms-hdr-drawer-curr-btn{background:#1A2235;border-color:rgba(255,255,255,.08);color:#e5e7eb;}
html.dark .ms-hdr-drawer-curr-copy strong{color:#e5e7eb;}
html.dark .ms-hdr-drawer-curr-copy small{color:#9ca3af;}
.ms-hdr-drawer-curr-list{position:absolute;left:0;right:0;top:calc(100% + 6px);background:#fff;border:1px solid rgba(15,23,42,.06);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.12);z-index:10;display:none;flex-direction:column;padding:4px 0;max-height:260px;overflow-y:auto;width:100%;}
.ms-hdr-drawer-curr-list.is-open{display:flex;}
html.dark .ms-hdr-drawer-curr-list{background:#15192a;border-color:rgba(255,255,255,.08);}
.ms-hdr-drawer-curr-opt{display:flex;align-items:center;gap:10px;padding:8px 12px;text-decoration:none;color:#1A2235;font-size:13px;font-weight:500;border-radius:8px;margin:0 4px;}
.ms-hdr-drawer-curr-opt:hover{background:rgba(15,23,42,.04);}
.ms-hdr-drawer-curr-opt.is-active{background:rgba(33,204,135,.12);color:#065f46;}
.ms-hdr-drawer-curr-opt img{width:20px;height:auto;border-radius:2px;opacity:.85;}
.ms-hdr-drawer-curr-opt:not(.is-active) img{opacity:.55;}
.ms-hdr-drawer-curr-opt i{margin-left:auto;color:var(--ms-brand);}
/* Language/currency options: leading globe stays left; only the checkmark is right-aligned. */
.ms-hdr-drawer-curr-opt > i:first-child{margin-left:0;flex:0 0 20px;color:var(--ms-brand);}
.ms-hdr-drawer-curr-opt > i:last-child{margin-left:auto;flex:0 0 auto;color:var(--ms-brand);}
html.dark .ms-hdr-drawer-curr-opt{color:#e5e7eb;}
html.dark .ms-hdr-drawer-curr-opt.is-active{background:rgba(33,204,135,.2);color:#86efac;}
.ms-hdr-drawer-account{margin-top:auto;padding:24px;border-top:1px solid rgba(15,23,42,.06);background:#f9fafb;display:flex;flex-direction:column;gap:8px;}
html.dark .ms-hdr-drawer-account{background:#15192a;border-top-color:rgba(255,255,255,.06);}
/* Fix 2026-10-21: profil drawer kini <a> klik-able → dashboard user */
a.ms-hdr-drawer-profile{text-decoration:none;cursor:pointer;border-radius:14px;padding:6px;margin:-6px;transition:background .2s ease;}
a.ms-hdr-drawer-profile:hover{background:rgba(15,23,42,.05);}
html.dark a.ms-hdr-drawer-profile:hover,body.dark a.ms-hdr-drawer-profile:hover{background:rgba(255,255,255,.07);}
.ms-hdr-drawer-profile{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.ms-hdr-drawer-profile div{flex:1;min-width:0;}
.ms-hdr-drawer-profile-arrow{margin-left:auto;color:#9ca3af;font-size:12px;flex-shrink:0;}
.ms-hdr-drawer-avatar{width:40px;height:40px;border-radius:999px;background:var(--ms-brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;flex-shrink:0;overflow:hidden;}
.ms-hdr-drawer-avatar img{width:100%;height:100%;object-fit:cover;}
.ms-hdr-drawer-profile strong{display:block;font-size:14px;font-weight:700;color:#1A2235;line-height:1.2;}
.ms-hdr-drawer-profile small{display:block;font-size:12px;color:#64748b;}
html.dark .ms-hdr-drawer-profile strong{color:#f3f4f6;}
html.dark .ms-hdr-drawer-profile small{color:#9ca3af;}
.ms-hdr-drawer-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 16px;border-radius:12px;font-size:14px;font-weight:600;text-decoration:none;transition:filter .2s ease;}
.ms-hdr-drawer-btn--primary{background:var(--ms-brand);color:#fff;}
.ms-hdr-drawer-btn--primary:hover{filter:brightness(.95);color:#fff;}
.ms-hdr-drawer-btn--ghost{background:transparent;border:1px solid rgba(15,23,42,.12);color:#1A2235;}
.ms-hdr-drawer-btn--ghost:hover{background:rgba(15,23,42,.04);}
html.dark .ms-hdr-drawer-btn--ghost{border-color:rgba(255,255,255,.08);color:#e5e7eb;}
html.dark .ms-hdr-drawer-btn--ghost:hover{background:rgba(255,255,255,.06);}

/* Offcanvas backdrop: visible only when drawer is open */
.offcanvas-backdrop{background-color:#000;opacity:0.5;z-index:61;}
.offcanvas-backdrop.show{background-color:#000;opacity:0.5 !important;z-index:61 !important;}
.offcanvas-backdrop.fade{z-index:61;}
body:not(:has(.offcanvas.show)) .offcanvas-backdrop{display:none !important;}
.ms-hdr-drawer{z-index:61 !important;}

/* Hide old header-main-area when ms-hdr is in use */
body:has(.ms-hdr) .header-main-area{display:none !important;}
body:has(.ms-hdr) .ms-breadcrumb{display:none !important;}

/* Stacking: keep header above page chrome; do NOT force z-index on all children
   (that trapped .ms-hdr-dd under browse category chips at z-index 1000). */
.ms-hdr{z-index:60;}
.ms-hdr-drawer{z-index:1200 !important;}
.offcanvas-backdrop,.offcanvas-backdrop.show,.offcanvas-backdrop.fade{z-index:1190 !important;}
/* When any header dropdown is open, lift entire header above sticky browse chips (1000) + bottom nav (1100) */
body.ms-hdr-dd-open .ms-hdr{z-index:1300 !important;}
body.ms-hdr-dd-open .ms-hdr-dd{z-index:1310 !important;}
/* Naikkan keseluruhan header melebihi scrim bila mana-mana dropdown terbuka,
   selagi panel ialah anak header (stacking context bapa mengekang anak). */
body.ms-hdr-dd-open .ms-hdr{z-index:1320 !important;}
/* Soft scrim so category chips / page content sit under open cart/profile/currency menus */
body.ms-hdr-dd-open::after{
  content:'';
  position:fixed;inset:0;
  background:rgba(15,23,42,.28);
  z-index:1290;
  pointer-events:auto;
}
/* Mobile: keep cart panel fully on-screen and above chips */
@media (max-width:767px){
  .ms-hdr-dd.ms-hdr-dd-cart{
    position:fixed !important;
    top:78px !important;
    right:12px !important;
    left:auto !important;
    width:min(320px,calc(100vw - 24px)) !important;
    max-height:min(70vh, calc(100dvh - 96px - env(safe-area-inset-bottom))) !important;
    z-index:1310 !important;
  }
  body.ms-browse-page.ms-hdr-dd-open .ms-browse-mobile,
  body.ms-browse-page.ms-hdr-dd-open .ms-browse-mobile__categories{
    z-index:1 !important;
    pointer-events:none;
  }
  /* Panel profile mobile: kedudukan tetap macam panel cart supaya sentiasa
     dalam skrin dan di atas scrim. */
  .ms-hdr-dd.ms-hdr-dd-profile{
    position:fixed !important;
    top:78px !important;
    right:12px !important;
    left:auto !important;
    width:min(300px,calc(100vw - 24px)) !important;
    max-height:min(70vh, calc(100dvh - 96px)) !important;
    z-index:1310 !important;
  }
  .ms-hdr-dd.ms-hdr-dd-noti{
    position:fixed !important;
    top:78px !important;
    right:12px !important;
    left:auto !important;
    width:min(320px,calc(100vw - 24px)) !important;
    max-height:min(70vh, calc(100dvh - 96px)) !important;
    z-index:1310 !important;
  }
}

/* Lighten backdrop to avoid full darkening when drawer opens */
.offcanvas-backdrop.show{background-color:rgba(15,23,42,0.35) !important;opacity:1 !important;}

/* r11: dark mode header uses a visible glass surface instead of solid navy */
html.dark .ms-hdr,
body.dark .ms-hdr{
  background:rgba(15,23,42,.62) !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 10px 30px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter:blur(20px) saturate(145%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(145%) !important;
}
html.dark .ms-hdr-top,
body.dark .ms-hdr-top{
  background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,0)) !important;
}
html.dark .ms-hdr-nav,
body.dark .ms-hdr-nav{
  border-top:1px solid rgba(255,255,255,.055);
  background:rgba(15,23,42,.16);
}
html.dark .ms-hdr-nav a.is-active,
body.dark .ms-hdr-nav a.is-active{
  text-shadow:0 0 14px rgba(33,204,135,.45);
}

/* Lock body to prevent scroll-jump dark mode in mobile browsers */
body.ms-hdr-drawer-open{overflow:hidden !important;position:relative;}

/* Make sure drawer is bright in both light/dark mode */
.ms-hdr-drawer{background:#fff !important;}
.ms-hdr-drawer-head{background:#fff !important;border-bottom:1px solid rgba(15,23,42,.08) !important;}
.ms-hdr-drawer-body{background:#fff !important;}
.ms-hdr-drawer-account{background:#f9fafb !important;border-top:1px solid rgba(15,23,42,.08) !important;}
.ms-hdr-drawer-item{color:#1A2235 !important;}
.ms-hdr-drawer-item i{color:#64748b !important;}
.ms-hdr-drawer-curr-btn{background:#fff !important;color:#1A2235 !important;border-color:rgba(15,23,42,.12) !important;}
.ms-hdr-drawer-curr-copy strong{color:#1A2235 !important;}
.ms-hdr-drawer-curr-copy small{color:#64748b !important;}
.ms-hdr-drawer-btn--ghost{background:transparent !important;color:#1A2235 !important;border-color:rgba(15,23,42,.12) !important;}

/* Always show flags even in dark mode (transparent bg) */
.ms-hdr-drawer-curr-flag{background:#f3f4f6 !important;}

/* When mobile drawer is open, hide bottom nav, scroll-top, and any other floating UI */
body:has(.ms-hdr-drawer.show) .ms-mobile-bottom-nav,
body:has(.ms-hdr-drawer.show) .ms-browse-mobile,
body:has(.ms-hdr-drawer.show) .scroll-top,
body:has(.ms-hdr-drawer.show) .ms-track-bottom,
body:has(.ms-hdr-drawer.show) .mobile-bottom-nav,
body:has(.offcanvas.show) .ms-mobile-bottom-nav,
body:has(.offcanvas.show) .ms-browse-mobile,
body:has(.offcanvas.show) .scroll-top,
body:has(.offcanvas.show) .ms-track-bottom,
body:has(.offcanvas.show) .mobile-bottom-nav{display:none !important;}

/* Make sure offcanvas backdrop is full-screen and above everything */
.offcanvas-backdrop.show{position:fixed !important;inset:0 !important;width:100vw !important;height:100vh !important;}

/* Make sure drawer takes full height */
.ms-hdr-drawer{position:fixed !important;top:0 !important;left:0 !important;height:100vh !important;height:100dvh !important;max-height:100vh !important;}

/* Ensure ms-hdr doesn't get clipped on mobile when drawer open */
body:has(.offcanvas.show){overflow:hidden !important;}
/* When cart dropdown is open, show pointer on body */
body.ms-hdr-cart-open{overflow:hidden;}
/* Ensure drawer profile avatar always visible */
.ms-hdr-drawer-avatar img, .ms-hdr-drawer-avatar{width:40px !important;height:40px !important;border-radius:999px !important;display:flex !important;align-items:center !important;justify-content:center !important;background:var(--ms-brand,#21cc87) !important;color:#fff !important;font-weight:700 !important;font-size:15px !important;flex-shrink:0 !important;overflow:hidden !important;}
.ms-hdr-drawer-avatar img{object-fit:cover !important;background:transparent !important;}
/* Make sure backdrop is removed when no offcanvas is open */
body.ms-browse-page .ms-hdr-drawer-head{padding:14px 16px !important;}

/* ===== Cart dropdown items — reference design (qty stepper, delete, 2-line title) ===== */
.ms-cart-item{display:flex;align-items:flex-start;gap:11px;padding:12px 2px;border-bottom:1px solid rgba(15,23,42,.06);}
.ms-cart-item:last-child{border-bottom:0;}
.ms-cart-item__thumb{flex-shrink:0;width:58px;height:58px;border-radius:12px;overflow:hidden;background:#f3f4f6;display:block;}
.ms-cart-item__thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.ms-cart-item__main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:8px;}
.ms-cart-item__name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-word;text-decoration:none;color:#1A2235;font-weight:700;font-size:13px;line-height:1.35;letter-spacing:-.01em;}
html.dark .ms-cart-item__name,body.dark .ms-cart-item__name{color:#e2e8f0;}
.ms-cart-item__row{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:nowrap;}
.ms-qty{display:inline-flex;align-items:center;background:rgba(15,23,42,.04);border-radius:10px;overflow:hidden;flex-shrink:0;border:1px solid rgba(15,23,42,.06);}
.ms-qty__btn{width:26px;height:30px;border:0;background:transparent;color:#64748b;font-size:15px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease;padding:0;line-height:1;}
.ms-qty__btn:hover{background:rgba(15,23,42,.06);color:var(--ms-brand);}
.ms-qty__val{min-width:26px;text-align:center;font-size:13px;font-weight:800;color:#1A2235;font-variant-numeric:tabular-nums;}
html.dark .ms-qty{background:rgba(255,255,255,.08);}
html.dark .ms-qty__val,body.dark .ms-qty__val{color:#e2e8f0;}
html.dark .ms-qty__btn,body.dark .ms-qty__btn{color:#cbd5e1;}
html.dark .ms-qty__btn:hover,body.dark .ms-qty__btn:hover{background:rgba(255,255,255,.1);}
.ms-cart-item__price{margin-left:auto;color:var(--ms-brand);font-size:13.5px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;max-width:96px;}
.ms-cart-item__del{flex-shrink:0;width:28px;height:30px;border:0;background:transparent;color:#94a3b8;font-size:13px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;transition:background .15s ease,color .15s ease;padding:0;}
.ms-cart-item__del:hover{background:rgba(239,68,68,.1);color:#ef4444;}

/* Same popover presentation on every viewport (desktop = mobile design) */
@media (min-width:768px){
  .ms-hdr-dd.ms-hdr-dd-cart{
    width:min(360px,calc(100vw - 24px)) !important;
    border-radius:20px;
  }
  .ms-hdr-dd-cart-title{font-size:15px;}
  .ms-hdr-dd-cart-title i{font-size:15px;}
  .ms-hdr-dd-cart-count{font-size:12px;}
}

/* Mobile browse: panel cart dipindah ke body (header hidden) — pastikan ia kekal popover biasa */
body > .ms-hdr-dd.ms-hdr-dd-cart{z-index:1500;}
/* PENTING (fix 2026-10-21): scrim dropdown TIDAK boleh dinaikkan atas header
   pada mobile. Dulu ada override max-width:767px yang menaikkan scrim ke
   z-index 1400 melebihi header 1320 — popup cart/profile (anak .ms-hdr,
   terkurung dalam stacking context header) tersorok DI BAWAK scrim: backdrop
   keluar gelap/blur tetapi popup langsung tak nampak. Scrim kekal 1290
   (bawah header 1320) pada semua saiz; chips (1000) & bottom nav (1100)
   tetap tertutup scrim, panel reparent ke body (1500) tetap di atas. */

/* ============ Noti bar user (bell header) ============ */
.ms-hdr-noti{position:relative;}
.ms-hdr-dd-noti{width:min(340px,calc(100vw - 24px));max-height:min(430px,64vh);}
.ms-hdr-dd-noti-head{padding:12px 14px;border-bottom:1px solid rgba(15,23,42,.06);display:flex;justify-content:space-between;align-items:center;gap:10px;flex-shrink:0;background:rgba(15,23,42,.02);}
html.dark .ms-hdr-dd-noti-head,body.dark .ms-hdr-dd-noti-head{border-bottom-color:rgba(255,255,255,.06);background:rgba(255,255,255,.04);}
.ms-hdr-dd-noti-title{margin:0;font-size:14px;font-weight:800;color:#1A2235;display:flex;align-items:center;gap:8px;letter-spacing:-.01em;font-family:'Plus Jakarta Sans',sans-serif;}
.ms-hdr-dd-noti-title i{color:var(--ms-brand);font-size:12px;}
html.dark .ms-hdr-dd-noti-title,body.dark .ms-hdr-dd-noti-title{color:#fff;}
.ms-hdr-dd-noti-readall{border:0;background:rgba(15,23,42,.05);color:#475569;font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px;cursor:pointer;transition:background .15s ease;white-space:nowrap;}
.ms-hdr-dd-noti-readall:hover{background:rgba(15,23,42,.1);}
html.dark .ms-hdr-dd-noti-readall,body.dark .ms-hdr-dd-noti-readall{background:rgba(255,255,255,.08);color:#cbd5e1;}
.ms-hdr-dd-noti-list{overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:2px;background:#fff;}
html.dark .ms-hdr-dd-noti-list,body.dark .ms-hdr-dd-noti-list{background:transparent;}
.ms-noti-item{display:flex;gap:10px;padding:10px 12px;border-radius:14px;cursor:pointer;transition:background .15s ease;align-items:flex-start;text-align:left;border:0;background:none;width:100%;}
.ms-noti-item:hover{background:rgba(15,23,42,.04);}
html.dark .ms-noti-item:hover,body.dark .ms-noti-item:hover{background:rgba(255,255,255,.06);}
.ms-noti-item.is-unread{background:rgba(33,204,135,.09);}
html.dark .ms-noti-item.is-unread,body.dark .ms-noti-item.is-unread{background:rgba(33,204,135,.16);}
.ms-noti-ico{width:34px;height:34px;border-radius:11px;background:var(--ms-brand);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;flex-shrink:0;}
.ms-noti-body{min-width:0;flex:1;display:flex;flex-direction:column;}
.ms-noti-title{font-size:12.5px;font-weight:700;color:#1A2235;line-height:1.35;display:flex;align-items:center;gap:6px;}
html.dark .ms-noti-title,body.dark .ms-noti-title{color:#f1f5f9;}
.ms-noti-dot{width:7px;height:7px;border-radius:999px;background:#ef4444;flex-shrink:0;display:inline-block;}
.ms-noti-text{font-size:11.5px;color:#64748b;font-weight:500;margin-top:2px;line-height:1.45;word-break:break-word;}
html.dark .ms-noti-text,body.dark .ms-noti-text{color:#94a3b8;}
.ms-noti-time{font-size:10.5px;color:#94a3b8;margin-top:4px;font-weight:600;}
.ms-noti-empty{text-align:center;padding:22px 10px;color:#94a3b8;font-size:12px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:8px;}
.ms-noti-empty i{font-size:20px;opacity:.6;}

/* ═══ Menu profile penuh (fix 2026-10-21 petang): dropdown kini mengandungi
       setting lengkap (mirror sidebar). Pemisah + skrol untuk skrin pendek. ═══ */
.ms-hdr-dd-sep{height:1px;background:rgba(16,24,40,.08);margin:6px 0;list-style:none}
body.dark .ms-hdr-dd-sep{background:rgba(255,255,255,.09)}
.ms-hdr-dd.ms-hdr-dd-profile{overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
@media (max-width:767px){
  .ms-hdr-dd.ms-hdr-dd-profile .ms-hdr-dd-profile-body{max-height:46vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
}

/* ═══ Mobile polish (2026-10-22): item drawer menu sentuh selesa ═══ */
@media (max-width:575.98px){
  .ms-hdr-drawer-item{min-height:48px;padding:13px 16px;font-size:15.5px}
  .ms-hdr-drawer-item i{width:20px;text-align:center}
  .ms-hdr-drawer-close{width:44px;height:44px}
  .ms-hdr-ham{width:44px;height:44px}
}

/* ═══ Desktop polish (2026-10-22): header premium depth ═══ */
@media (min-width:992px){
  .ms-hdr{box-shadow:0 1px 2px rgba(15,23,42,.04),0 8px 24px -18px rgba(15,23,42,.12)}
  .ms-hdr-icon-btn{transition:background .2s ease,color .2s ease,transform .2s ease}
  .ms-hdr-icon-btn:hover{transform:translateY(-1px)}
}

/* ═══ Butang WhatsApp terapung (2026-10-22) — premium ═══ */
.wa-float{
    position:fixed;right:18px;bottom:18px;z-index:1150;
    display:flex;align-items:center;gap:10px;
    text-decoration:none;border-radius:999px;
}
.wa-float__bubble{
    position:relative;display:grid;place-items:center;
    width:58px;height:58px;border-radius:50%;
    color:#fff;background:linear-gradient(135deg,#25D366,#128C4A);
    box-shadow:0 10px 26px -6px rgba(18,140,74,.55),inset 0 0 0 1px rgba(255,255,255,.18);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1),box-shadow .3s ease;
}
.wa-float:hover .wa-float__bubble{transform:scale(1.08);box-shadow:0 14px 32px -8px rgba(18,140,74,.6),inset 0 0 0 1px rgba(255,255,255,.22)}
.wa-float:active .wa-float__bubble{transform:scale(.96)}
/* gelombang nadi halus */
.wa-float__ring{
    position:absolute;left:0;top:0;width:58px;height:58px;border-radius:50%;
    background:rgba(37,211,102,.35);opacity:.6;pointer-events:none;
    animation:waFloatPulse 2.6s ease-out infinite;
}
@keyframes waFloatPulse{
    0%{transform:scale(1);opacity:.5}
    70%,100%{transform:scale(1.65);opacity:0}
}
.wa-float__tip{
    font-family:'Nunito','Inter',sans-serif;font-size:13px;font-weight:800;
    color:#344054;background:#fff;border:1px solid rgba(13,59,46,.12);
    padding:9px 14px;border-radius:999px;box-shadow:0 8px 20px rgba(16,24,40,.12);
    opacity:0;transform:translateX(8px);transition:opacity .25s ease,transform .25s ease;
    white-space:nowrap;
}
.wa-float:hover .wa-float__tip{opacity:1;transform:none}
body.dark .wa-float__tip{background:#151c2c;color:#e8edf5;border-color:rgba(255,255,255,.12)}
@media (max-width:575.98px){
    .wa-float{right:14px;bottom:14px}
    .wa-float__bubble,.wa-float__ring{width:54px;height:54px}
    .wa-float__tip{display:none}
}