:root{--orange:#f97316;--orange2:#ea580c;--green:#15803d;--ink:#17202a;--muted:#6b7280;--bg:#fffaf6;--card:#fff;--line:#eee2d7;--shadow:0 14px 40px rgba(28,25,23,.08)}*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#fffaf6 0,#fff 40%);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.wrap{width:min(1160px,calc(100% - 32px));margin:auto}.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}.nav{height:72px;display:flex;align-items:center;justify-content:space-between}.brand{font-weight:900;font-size:24px;letter-spacing:-.04em}.brand span{color:var(--orange)}.menu{display:flex;gap:20px;align-items:center}.menu a{color:#4b5563}.pill,.btn{background:var(--orange);color:#fff!important;border:0;border-radius:12px;padding:11px 16px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-weight:700}.btn:hover,.pill:hover{background:var(--orange2)}.btn.dark{background:#1f2937}.btn.google{background:#fff;color:#111!important;border:1px solid #ddd}.danger{background:#fee2e2!important;color:#991b1b!important}.hamb{display:none;border:0;background:none;font-size:25px}.main{padding:38px 0 70px}.hero{display:grid;grid-template-columns:1.4fr .6fr;gap:24px;align-items:center;padding:46px 0 28px}.hero.compact{display:block;padding:28px 0}.hero h1{font-size:clamp(36px,6vw,64px);line-height:1.02;letter-spacing:-.05em;margin:10px 0 18px;max-width:800px}.hero p{font-size:18px;color:#58606a;max-width:760px}.eyebrow{color:var(--orange2);font-weight:800;text-transform:uppercase;font-size:12px;letter-spacing:.11em}.hero-card,.panel,.card,.auth-card,.stat-card{background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)}.hero-card{padding:26px}.stat{font-size:36px;font-weight:900;line-height:1;color:var(--green);margin-bottom:5px}.search{display:flex;gap:10px;margin-top:24px}.search input{flex:1}.search button{background:var(--green);color:white;border:0;border-radius:12px;padding:0 20px;font-weight:800}input,textarea,select{width:100%;padding:12px 13px;border:1px solid #ddd0c5;border-radius:12px;background:white;font:inherit;margin-top:6px}textarea{min-height:110px;resize:vertical}label{display:block;font-weight:700;margin-bottom:14px}.section-head{display:flex;justify-content:space-between;gap:20px;align-items:end;margin:40px 0 18px}.section-head h1,.section-head h2{margin:5px 0}.section-head h1{font-size:38px;letter-spacing:-.04em}.grid{display:grid;gap:18px}.products{grid-template-columns:repeat(4,minmax(0,1fr))}.blog-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.two-col{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:repeat(3,minmax(0,1fr))}.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.card{overflow:hidden}.card-body{padding:18px}.card h2,.card h3{margin:.3rem 0}.product{transition:transform .2s ease,box-shadow .2s ease}.product:hover,.link-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px rgba(28,25,23,.12)}.thumb{height:150px;display:grid;place-items:center;background:linear-gradient(135deg,#ffedd5,#dcfce7);font-size:44px}.thumb.big{height:420px;font-size:100px;border-radius:18px}.blog-image img{width:100%;height:190px;object-fit:cover}.price{font-weight:900;color:var(--orange2);font-size:20px}.big-price{font-size:38px}.muted,.small{color:var(--muted);font-size:14px}.detail{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:start}.panel{padding:22px;margin:18px 0}.row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid #eee}.row:last-child{border-bottom:0}.inline{display:inline-flex;gap:7px}.small-btn{padding:8px 11px;font-size:13px}.auth-card{max-width:480px;margin:50px auto;padding:30px}.or{text-align:center;color:#9ca3af;margin:22px 0}.article{max-width:850px;margin:30px auto}.article h1{font-size:clamp(34px,5vw,56px);line-height:1.05;letter-spacing:-.04em}.lead{font-size:20px;color:#5f6772}.article-image{width:100%;max-height:470px;object-fit:cover;border-radius:18px}.article-content{font-size:18px}.article-content h2{margin-top:34px;font-size:30px}.article-content a{color:var(--green);text-decoration:underline}.sources,.related{margin-top:34px;padding:20px;border-radius:16px;background:#faf7f3}.sources a{display:block;color:#166534;margin:4px 0;word-break:break-all}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%}th,td{padding:10px;border-bottom:1px solid #eee;text-align:left;white-space:nowrap}.footer{background:#17202a;color:#e5e7eb;padding:42px 0}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:28px}.footer .small{color:#9ca3af;margin-top:25px}.menu-open .menu{display:flex;position:absolute;left:16px;right:16px;top:72px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;flex-direction:column;align-items:stretch;box-shadow:var(--shadow)}
@media(max-width:900px){.products{grid-template-columns:repeat(3,minmax(0,1fr))}.hero{grid-template-columns:1fr}.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(2,minmax(0,1fr))}.three{grid-template-columns:1fr 1fr}.detail{grid-template-columns:1fr}.thumb.big{height:280px}}
@media(max-width:650px){.wrap{width:min(100% - 22px,1160px)}.hamb{display:block}.menu{display:none}.products,.blog-grid,.two-col,.three,.stats{grid-template-columns:1fr}.hero h1{font-size:42px}.search{flex-direction:column}.search button{padding:12px}.main{padding-top:20px}.footer-grid{grid-template-columns:1fr}.nav{height:64px}}
.chat-layout{display:grid;grid-template-columns:280px 1fr;gap:18px}.chat-list{padding:10px}.chat-item{display:block;padding:13px;border-radius:12px}.chat-item:hover{background:#fff7ed}.chat-item span{display:block;color:#6b7280;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-room{min-height:560px;display:flex;flex-direction:column}.chat-header{display:flex;justify-content:space-between;padding-bottom:13px;border-bottom:1px solid #eee}.messages{flex:1;display:flex;flex-direction:column;gap:10px;padding:16px 0;overflow:auto}.bubble{max-width:76%;padding:12px 14px;border-radius:16px;background:#eff6ff;border:1px solid #dbeafe}.bubble.mine{align-self:flex-end;background:#dcfce7;border-color:#bbf7d0}.bubble small{display:block;color:#94a3b8;margin-top:5px}.chat-send{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center}.empty{margin:auto;text-align:center;color:#6b7280}@media(max-width:750px){.chat-layout{grid-template-columns:1fr}.chat-list{max-height:240px;overflow:auto}.chat-room{min-height:460px}.chat-send{grid-template-columns:1fr 1fr}.chat-send input{grid-column:1/-1}}

.note{margin-top:18px;padding:14px 16px;border-radius:12px;background:#fff7ed;border:1px solid #fed7aa;color:#7c2d12;font-size:14px}.invoice-card{max-width:900px}.invoice-proof{margin-top:18px;align-items:center}.admin-stats .stat{font-size:30px}.link-card{transition:transform .2s ease}.note strong{color:#9a3412}

/* ===== V1.3 FINAL HARDENED ===== */
html{-webkit-text-size-adjust:100%}body{overflow-x:hidden}img{max-width:100%;height:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:99;border-radius:8px}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
.btn,.pill,button,input,select,textarea{min-height:44px}.small-btn{min-height:36px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.linkbtn,.link{background:none;border:0;color:#4b5563;font:inherit;cursor:pointer;padding:6px 4px;min-height:auto}.link{color:var(--green);font-weight:700}
.danger-text{color:#b91c1c!important}.logout-form{display:inline;margin:0}
.badge{display:inline-block;min-width:20px;padding:0 6px;border-radius:999px;background:#fff;color:var(--orange2);font-size:12px;line-height:20px;text-align:center}
.alert{padding:13px 16px;border-radius:12px;margin:12px 0;border:1px solid;font-size:15px}
.alert-success{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}.alert-error{background:#fef2f2;border-color:#fecaca;color:#991b1b}
.alert-info{background:#eff6ff;border-color:#bfdbfe;color:#1e3a8a}.alert-warn{background:#fff7ed;border-color:#fdba74;color:#7c2d12}
.h3{font-size:20px;margin:.2rem 0 .8rem}.mt{margin-top:14px}.mb{margin-bottom:14px}.wrap{white-space:normal}
.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.thumb img{width:100%;height:150px;object-fit:cover}.prose{overflow-wrap:anywhere}.tags{color:var(--green);font-size:14px}
.gallery{display:grid;grid-auto-flow:column;grid-auto-columns:100%;overflow-x:auto;scroll-snap-type:x mandatory;border-radius:18px;gap:8px}
.gallery img{scroll-snap-align:start;width:100%;height:420px;object-fit:cover;border-radius:18px;background:#fff}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:600}.check input{width:auto;min-height:auto;margin-top:5px;flex:none}
.hint{font-size:13px;color:var(--muted);margin:-6px 0 8px}.hint-mobile{display:none}
.loc-input{position:relative;margin-bottom:10px}
.loc-suggest{position:absolute;left:0;right:0;z-index:30;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);max-height:260px;overflow:auto;margin-top:-8px}
.loc-suggest button{display:block;width:100%;text-align:left;padding:12px 14px;border:0;border-bottom:1px solid #f3ebe3;background:#fff;font:inherit;cursor:pointer}
.loc-suggest button:hover,.loc-suggest button:focus{background:#fff7ed}
.loc-ok{background:#ecfdf5;border:1px solid #a7f3d0;border-radius:12px;padding:10px 12px;font-size:14px}
.loc-err{background:#fef2f2;border:1px solid #fecaca;border-radius:12px;padding:10px 12px;font-size:14px}
.loc-choose{background:#fff7ed;border:1px solid #fed7aa;border-radius:12px;padding:10px 12px}
.loc-choose .opt{display:block;width:100%;text-align:left;margin:6px 0;padding:11px 12px;border:1px solid #fdba74;border-radius:10px;background:#fff;font:inherit;cursor:pointer}
.loc-choose .opt:hover{background:#ffedd5}.loc-fallback{margin:6px 0 0}.loc-fallback summary{cursor:pointer;color:var(--green);font-weight:700;font-size:14px;padding:6px 0}
fieldset.dest{border:1px solid var(--line);border-radius:14px;padding:14px;margin:0 0 14px;min-width:0}fieldset.dest legend{font-weight:800;padding:0 6px}
.addon-box{border:1px dashed #fb923c;background:#fffbf5;border-radius:14px;padding:14px;margin:14px 0}
.breakdown{width:100%}.breakdown td{white-space:normal}.breakdown .num{text-align:right;white-space:nowrap}.breakdown .total td{font-weight:900;font-size:18px;border-top:2px solid var(--ink)}
.status-chip{display:inline-block;padding:6px 12px;border-radius:999px;background:#f3f4f6;font-weight:800;font-size:13px}
.st-completed,.st-paid{background:#dcfce7;color:#166534}.st-cancelled,.st-failed_delivery,.st-frozen,.st-rejected{background:#fee2e2;color:#991b1b}
.st-waiting_customer_approval,.st-proof_submitted,.st-waiting_courier{background:#fef3c7;color:#92400e}
.actions-row,.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.actions form{margin:0}
.inline-block{display:flex;gap:8px;flex-wrap:wrap}.inline-block input{flex:1;min-width:160px;margin:0}
.wrap-inline{flex-wrap:wrap}.wrap-inline input,.wrap-inline select{width:auto;margin:0}
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.filters input,.filters select{width:auto;flex:1;min-width:150px;margin:0}
.admin-nav{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;margin-bottom:8px;-webkit-overflow-scrolling:touch}
.admin-nav a{white-space:nowrap;padding:8px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:14px}.admin-nav a:hover{background:#fff7ed}
.seg-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 0;border-bottom:1px solid #eee}.seg-row input,.seg-row select{width:auto;flex:1;min-width:120px;margin:0}
.qris img{max-width:320px;width:100%;border:1px solid var(--line);border-radius:14px;background:#fff;padding:8px}
.quote-result{margin:10px 0}.row.unread{background:#fff7ed;border-radius:10px;padding-left:8px}
a.row{color:inherit}.bubble{overflow-wrap:anywhere}.bubble.system{align-self:center;background:#f9fafb;border-color:#e5e7eb;max-width:92%;font-size:14px;color:#374151}
.chat-item.active{background:#fff7ed}.chat-back{display:none;font-size:22px;padding:0 8px}
code{background:#f3f4f6;padding:1px 6px;border-radius:6px;font-size:13px}
@media(max-width:650px){
 .hint-desktop{display:none}.hint-mobile{display:block}
 .section-head{flex-direction:column;align-items:flex-start;margin-top:16px}.section-head h1{font-size:30px}
 .panel{padding:16px}.two{display:block}.gallery img,.thumb.big{height:280px}
 .row{flex-wrap:wrap}.chat-send{grid-template-columns:1fr auto auto}.chat-send input{grid-column:auto}
 .chat-layout.has-selected .chat-list{display:none}.chat-back{display:inline}
 .chat-room{min-height:calc(100vh - 200px)}.chat-send{position:sticky;bottom:0;background:#fff;padding-top:8px}
 .menu a,.menu .linkbtn{padding:12px 6px}
 th,td{padding:8px}
}
@media(min-width:651px){.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}}

/* ===== V1.3 — Customer Dashboard, Multi-role, Ambil Obat ===== */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.customer-nav{position:sticky;top:0;z-index:20;background:var(--bg,#fffaf5);padding-top:8px}
.customer-nav a.on,.admin-nav a.on{background:var(--orange);color:#fff;border-color:var(--orange)}
.role-switch{display:inline-flex;margin:0}.role-switch select{width:auto;min-height:40px;margin:0;padding:6px 10px;border-radius:999px;font-weight:700}
.pager{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}.pager a{padding:8px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}.pager a.on{background:var(--green);color:#fff}
.medicine-cta{display:block;border:2px solid #86efac;background:#f0fdf4}.medicine-cta h3{margin:0 0 4px}
.hospital-list{display:grid;gap:10px;margin-bottom:16px}
.hospital-card{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;font-weight:400}
.hospital-card input{width:auto;min-height:auto;margin-top:6px;flex:none}.hospital-card:has(input:checked){border-color:var(--green);box-shadow:0 0 0 2px #bbf7d0}
.hospital-card:has(input:disabled){opacity:.55;cursor:not-allowed}
.choice-row{border:0;padding:0;margin:0 0 12px;display:flex;flex-wrap:wrap;gap:16px}.choice-row legend{font-weight:800;margin-bottom:6px}
.review-form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:10px 0;border-top:1px solid #f3ebe3}.review-form input[name=comment]{flex:1;min-width:180px;margin:0}
.stars{display:inline-flex;flex-direction:row-reverse;border:0;padding:0;margin:0}.stars input{position:absolute;opacity:0;width:1px;height:1px}
.stars label{font-size:28px;color:#d1d5db;cursor:pointer;padding:0 2px;min-height:44px;display:flex;align-items:center}
.stars input:checked~label,.stars label:hover,.stars label:hover~label{color:#f59e0b}
.stars input:focus-visible+label{outline:3px solid var(--orange);border-radius:6px}
.card.unavailable{opacity:.65}.rating{margin:4px 0 10px;font-weight:700}
@media(max-width:650px){
 .menu .role-switch{width:100%;padding:8px 6px}.menu .role-switch select{width:100%}
 .hospital-card{padding:12px}.review-form{flex-direction:column;align-items:stretch}
 .customer-nav{margin:0 -16px;padding-left:16px;padding-right:16px}
}
.trk-map{height:60vh;min-height:320px;border-radius:16px;border:1px solid var(--line);margin-top:12px}
.trk-status{display:grid;gap:4px;font-size:15px}.trk-actions{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}.trk-actions .btn{flex:1;min-width:150px}
.hero-slider{position:relative;overflow:hidden;border-radius:20px;margin:16px 0}.hero-slider [data-slide]{display:none}.hero-slider [data-slide].on{display:block}
.hero-slider img{width:100%;max-height:360px;object-fit:cover;display:block}

/* =====================================================================
   DESIGN SYSTEM v2 — selaras logo LapakSMD (hijau tua · oranye · emas)
   Lapisan ini menimpa gaya lama tanpa mengubah nama kelas yang dipakai view.
   ===================================================================== */
:root{
  --green:#0b7a3b;--green-dark:#064e23;--green-soft:#e8f6ee;
  --orange:#f97316;--orange2:#ea580c;--orange-hot:#f85808;--sun:#ffa21a;--orange-soft:#fff2e6;
  --ink:#14211b;--muted:#5f6b66;--line:#e9e3da;--bg:#fbfaf7;--card:#fff;
  --radius:18px;--radius-sm:12px;
  --shadow:0 1px 2px rgba(20,33,27,.05),0 12px 32px -12px rgba(20,33,27,.14);
  --shadow-lg:0 2px 4px rgba(20,33,27,.06),0 28px 60px -20px rgba(20,33,27,.25);
  --ring:0 0 0 3px rgba(11,122,59,.22);
  --header-h:72px;
}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{background:radial-gradient(1100px 520px at 88% -120px,rgba(249,115,22,.10),transparent 60%),radial-gradient(900px 480px at -8% -80px,rgba(11,122,59,.10),transparent 60%),var(--bg);
  font-family:Inter,"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);line-height:1.62;letter-spacing:-.003em;-webkit-font-smoothing:antialiased}
h1,h2,h3{letter-spacing:-.03em;line-height:1.12}
::selection{background:var(--orange-soft);color:var(--green-dark)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}
img{max-width:100%;height:auto}

/* ---- Header ---- */
.site-header{background:rgba(255,255,255,.82);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid rgba(233,227,218,.8);transition:box-shadow .25s ease,background .25s ease}
.site-header.scrolled{box-shadow:0 8px 30px -14px rgba(20,33,27,.28);background:rgba(255,255,255,.94)}
.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--green),var(--sun) 55%,var(--orange-hot));opacity:.9}
.site-header{position:sticky}
.nav{height:var(--header-h);gap:16px}
.brand{display:flex;align-items:center;flex:0 0 auto;font-size:0;line-height:0}
.brand picture,.brand img{display:block}
.brand img{height:56px;width:auto;max-width:none;transition:transform .25s ease}
.brand:hover img{transform:scale(1.025)}
.menu{gap:6px}
.menu>a:not(.pill){padding:9px 13px;border-radius:999px;color:#34413b;font-weight:600;font-size:15px;transition:background .18s,color .18s}
.menu>a:not(.pill):hover{background:var(--green-soft);color:var(--green-dark)}
.pill,.btn{background:linear-gradient(135deg,var(--sun),var(--orange-hot));border-radius:999px;padding:11px 20px;font-weight:700;box-shadow:0 8px 20px -10px rgba(248,88,8,.7);transition:transform .15s ease,box-shadow .2s ease,filter .2s ease}
.pill:hover,.btn:hover{background:linear-gradient(135deg,#ffae33,#e84e00);transform:translateY(-1px);box-shadow:0 12px 24px -10px rgba(248,88,8,.75)}
.btn:active,.pill:active{transform:translateY(0) scale(.985)}
.btn.dark{background:var(--green-dark);box-shadow:0 8px 20px -12px rgba(6,78,35,.9)}.btn.dark:hover{background:#0a6a30}
.btn.google{background:#fff;box-shadow:var(--shadow);border:1px solid var(--line)}.btn.google:hover{background:#fff;filter:none}
.btn.danger,.danger.btn{background:#fee2e2!important;box-shadow:none}
.hamb{width:46px;height:46px;border-radius:14px;border:1px solid var(--line);background:#fff;font-size:22px;color:var(--green-dark);cursor:pointer}
.badge{background:var(--green-dark);color:#fff}
.menu .pill .badge{background:#fff;color:var(--orange-hot)}

/* ---- Hero ---- */
.main{padding:28px 0 84px}
.hero-v2{display:grid;grid-template-columns:1.08fr .92fr;gap:40px;align-items:center;padding:34px 0 30px}
.hero-v2 h1{font-size:clamp(34px,5.4vw,60px);line-height:1.04;letter-spacing:-.045em;margin:14px 0 18px;max-width:640px}
.hero-v2 h1 em{font-style:normal;color:var(--green);background:linear-gradient(transparent 64%,rgba(255,162,26,.38) 64%);padding:0 .06em;border-radius:4px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-v2 p{font-size:clamp(16px,1.6vw,19px);color:var(--muted);max-width:560px}
.chip-soft{display:inline-block;padding:7px 14px;border-radius:999px;background:var(--green-soft);color:var(--green-dark);font-size:12.5px;letter-spacing:.08em}
.search-v2{margin-top:26px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow);max-width:560px;gap:6px;transition:box-shadow .2s,border-color .2s}
.search-v2:focus-within{border-color:var(--green);box-shadow:var(--ring),var(--shadow)}
.search-v2 input{border:0;margin:0;background:transparent;padding:12px 16px;border-radius:999px;box-shadow:none;outline:0;min-width:0}
.search-v2 button{background:linear-gradient(135deg,var(--green),var(--green-dark));border-radius:999px;padding:0 26px;min-height:46px;cursor:pointer;transition:filter .2s}
.search-v2 button:hover{filter:brightness(1.1)}
.trust{list-style:none;display:flex;flex-wrap:wrap;gap:8px 16px;padding:0;margin:22px 0 0;color:#33403a;font-size:13.5px;font-weight:600}
.trust li{display:flex;align-items:center;gap:7px}
.art-bag{animation:floaty 5.5s ease-in-out infinite;transform-origin:281px 150px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ---- Layanan & cara kerja ---- */
.services{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:10px 0 26px}
.svc{display:flex;flex-direction:column;gap:6px;padding:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.svc:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:rgba(11,122,59,.35)}
.svc strong{font-size:17px;letter-spacing:-.02em}.svc .muted{font-size:14px}
.svc-ico{display:grid;place-items:center;width:50px;height:50px;border-radius:15px;font-size:24px;background:linear-gradient(135deg,var(--green-soft),var(--orange-soft));margin-bottom:6px}
.how .section-head{margin-top:26px}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0;margin:0 0 10px;counter-reset:s}
.steps li{position:relative;display:flex;flex-direction:column;gap:6px;padding:22px 20px 20px;background:linear-gradient(180deg,#fff,#fdfbf8);border:1px solid var(--line);border-radius:var(--radius)}
.steps .muted{font-size:14px}
.step-no{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--sun),var(--orange-hot));color:#fff;font-weight:800;font-size:15px;margin-bottom:6px;box-shadow:0 6px 14px -6px rgba(248,88,8,.8)}

/* ---- Kartu produk / blog ---- */
.section-head h2{font-size:clamp(24px,3vw,32px)}
.section-head>a{color:var(--green);font-weight:700;white-space:nowrap}.section-head>a:hover{text-decoration:underline}
.eyebrow{color:var(--green);letter-spacing:.14em}
.card,.panel,.auth-card,.stat-card,.hero-card{border-radius:var(--radius);border-color:var(--line);box-shadow:var(--shadow)}
.card.product{display:flex;flex-direction:column}
.product .thumb{height:auto;aspect-ratio:4/3;overflow:hidden;background:linear-gradient(135deg,var(--orange-soft),var(--green-soft))}
.product .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.product:hover .thumb img{transform:scale(1.06)}
.product:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
.product .card-body{display:flex;flex-direction:column;gap:2px;flex:1}
.product h3{font-size:16px;line-height:1.3;letter-spacing:-.015em}
.price{color:var(--orange-hot);letter-spacing:-.02em}
.blog-image img{height:200px;transition:transform .5s ease}.card:hover .blog-image img{transform:scale(1.04)}.blog-image{overflow:hidden}
.link-card:hover{border-color:rgba(11,122,59,.35)}
.stat{color:var(--green)}

/* ---- Form ---- */
input,textarea,select{border-radius:var(--radius-sm);border-color:#d9d2c7;transition:border-color .15s,box-shadow .15s}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--green);box-shadow:var(--ring)}
.auth-card{max-width:460px;padding:34px 30px;box-shadow:var(--shadow-lg)}
.auth-logo{display:block;margin:0 auto 18px;max-width:230px}.auth-logo img{display:block;width:100%;height:auto}
.auth-card .eyebrow{display:none}
.note{background:var(--orange-soft);border-color:#fed7aa;border-radius:var(--radius-sm)}

/* ---- Footer ---- */
.footer{background:linear-gradient(180deg,#0f1b15,#0b140f);color:#d8e0db;padding:54px 0 36px;margin-top:20px;position:relative}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--green),var(--sun) 55%,var(--orange-hot))}
.footer-logo{display:inline-block;background:#fff;border-radius:16px;padding:10px 16px;margin-bottom:14px}
.footer-logo img{display:block;height:44px;width:auto}
.footer p{color:#b7c3bc;max-width:380px}
.footer strong{color:#fff}
.footer .small{color:#8fa097}

/* ---- Admin & dashboard nav ---- */
.admin-nav a,.customer-nav a{border-radius:999px;background:#fff;border-color:var(--line);font-weight:600;transition:background .15s,color .15s,border-color .15s}
.admin-nav a:hover,.customer-nav a:hover{background:var(--green-soft);border-color:rgba(11,122,59,.3)}
.customer-nav a.on,.admin-nav a.on{background:var(--green);border-color:var(--green);color:#fff}
.status-chip{background:var(--green-soft);color:var(--green-dark)}

/* ---- Responsif ---- */
@media(max-width:900px){
  .hero-v2{grid-template-columns:1fr;gap:26px;padding-top:18px}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  :root{--header-h:62px}
  .brand img{height:42px}
  .hero-v2 h1{font-size:clamp(32px,9.2vw,40px)}
  .search-v2{flex-direction:row;border-radius:20px;padding:5px}
  .search-v2 input{padding:12px}.search-v2 button{padding:0 18px}
  .services{grid-template-columns:1fr}
  .svc{flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 14px}.svc .svc-ico{margin:0}.svc .muted{flex-basis:100%;padding-left:64px;margin-top:-6px}
  .steps{grid-template-columns:1fr}
  .footer-grid{gap:22px}
  .menu-open .menu{top:var(--header-h);border-radius:20px;padding:12px;gap:2px;box-shadow:var(--shadow-lg);max-height:calc(100dvh - var(--header-h) - 16px);overflow:auto}
  .menu-open .menu>a:not(.pill){padding:14px 14px;border-radius:12px;font-size:16px}
  .menu .pill{margin-top:6px}
  .product h3{font-size:15px}
  .auth-card{padding:26px 20px;margin:24px auto}
}
@media(max-width:380px){.brand img{height:36px}.nav{gap:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{.site-header,.footer,.hamb{display:none}}

/* ===== Kategori produk, filter, breadcrumb ===== */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13.5px;color:var(--muted);margin:4px 0 6px}
.crumbs a{color:var(--green);font-weight:600}.crumbs a:hover{text-decoration:underline}.crumbs span[aria-current]{color:var(--ink);font-weight:600}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;margin:0 0 6px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.chip{flex:0 0 auto;white-space:nowrap;padding:9px 15px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:14px;color:#34413b;min-height:40px;display:inline-flex;align-items:center;transition:background .15s,border-color .15s,color .15s}
.chip:hover{background:var(--green-soft);border-color:rgba(11,122,59,.35)}
.chip.on{background:var(--green);border-color:var(--green);color:#fff}
.filter-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:10px;box-shadow:var(--shadow)}
.filter-bar label{margin:0;font-weight:600;flex:0 1 150px}.filter-bar label.grow{flex:1 1 220px}
.filter-bar input,.filter-bar select{margin:0;min-height:44px}
.filter-bar .btn{min-height:44px}
.home-cats{margin:6px 0 26px}
.cat-grid{display:grid;gap:12px}
.cat-scroll{grid-template-columns:repeat(5,minmax(0,1fr))}
.cat-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;padding:18px 10px;min-height:118px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);font-weight:700;font-size:14px;line-height:1.25;transition:transform .2s ease,box-shadow .2s ease,border-color .2s}
.cat-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(11,122,59,.35)}
.cat-ico{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;font-size:26px;background:linear-gradient(135deg,var(--green-soft),var(--orange-soft))}
.cat-grid-all{grid-template-columns:repeat(3,minmax(0,1fr))}
.cat-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;gap:10px}
.cat-main{display:flex;align-items:center;gap:12px;font-size:16px}.cat-main:hover strong{color:var(--green)}
.cat-subs{display:flex;flex-wrap:wrap;gap:6px}.cat-subs a{font-size:13px;padding:6px 11px;border-radius:999px;background:var(--green-soft);color:var(--green-dark);font-weight:600}
.cat-subs a:hover{background:var(--green);color:#fff}
@media(max-width:900px){.cat-scroll{grid-template-columns:repeat(4,minmax(0,1fr))}.cat-grid-all{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){
  .cat-scroll{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:31%;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;-webkit-overflow-scrolling:touch}
  .cat-tile{scroll-snap-align:start;min-height:104px;padding:14px 6px;font-size:13px}
  .cat-grid-all{grid-template-columns:1fr}
  .filter-bar label,.filter-bar label.grow{flex:1 1 100%}.filter-bar label:nth-of-type(2),.filter-bar label:nth-of-type(3){flex:1 1 calc(50% - 4px)}
  .filter-bar .btn{width:100%}
}

.terms-wrap{margin-top:18px}.terms-wrap h3{margin:0 0 8px}
.terms-box{max-height:320px;overflow-y:auto;overscroll-behavior:contain;border:1px solid #fed7aa;border-radius:12px;background:#fff;padding:14px 16px;font-size:14px;line-height:1.55;color:#1f2937;-webkit-overflow-scrolling:touch}
.terms-box:focus{outline:2px solid var(--orange,#f97316);outline-offset:2px}
.terms-box h3{font-size:16px;margin:0 0 8px}.terms-box h4{font-size:14px;margin:16px 0 6px;color:#9a3412}.terms-box h5{font-size:14px;margin:10px 0 4px}
.terms-box p{margin:6px 0}.terms-box ul,.terms-box ol{margin:6px 0 6px 20px;padding:0}.terms-box li{margin:3px 0}
.terms-wrap .check input:disabled+span{opacity:.6}.terms-page{max-width:860px;font-size:15px;line-height:1.6}.terms-page h4{color:#9a3412;margin:20px 0 6px}
.terms-wrap .check{font-weight:500;font-size:14px;line-height:1.5}

.footer-bottom{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between}
.footer-legal{display:flex;flex-wrap:wrap;gap:6px 0}
.footer-legal a{color:#d8e0db;text-decoration:none;padding:4px 14px;border-left:1px solid #2f4338;line-height:1.4}
.footer-legal a:first-child{border-left:0;padding-left:0}
.footer-legal a:hover,.footer-legal a:focus-visible{color:#fff;text-decoration:underline}
@media(max-width:650px){.footer-bottom{flex-direction:column;align-items:flex-start}.footer-legal{flex-direction:column;gap:0;width:100%}.footer-legal a{border-left:0;padding:10px 0;min-height:44px;display:flex;align-items:center}}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.legal-nav a{padding:8px 14px;border:1px solid var(--line,#eee2d7);border-radius:999px;background:#fff;color:inherit;text-decoration:none;font-size:14px;font-weight:600}
.legal-nav a[aria-current=page]{background:var(--orange,#f97316);border-color:var(--orange,#f97316);color:#fff}
.terms-page h3{font-size:18px;margin:0 0 8px}.terms-page h5{font-size:15px;margin:14px 0 4px}.terms-page p{margin:8px 0}.terms-page ul,.terms-page ol{margin:8px 0 8px 22px;padding:0}.terms-page li{margin:4px 0}
.terms-links{margin:8px 0 0;font-size:14px}

/* Rev14: ulasan produk */
.reviews-section{margin-top:20px}.review-item{padding:12px 0;border-top:1px solid #e5e7eb}.review-item:first-of-type{border-top:0}
.review-stars{color:#f59e0b;font-size:18px;letter-spacing:2px}.review-thumb{max-width:120px;max-height:120px;border-radius:8px;object-fit:cover;display:block;margin-top:6px}
.review-form input[type=file]{display:block;margin-top:4px}
.ai-gen{margin:8px 0}.ai-gen-msg{margin-top:6px}

/* Rev15: tombol Google, pencarian kurir, kamera, tawaran ongkir */
.google-btn{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:52px;padding:10px 18px;background:#fff;color:#1f2937!important;border:1px solid #dadce0;border-radius:14px;font-weight:700;font-size:16px;box-shadow:0 1px 2px rgba(60,64,67,.25),0 4px 14px rgba(60,64,67,.12);transition:box-shadow .2s,transform .15s,background .2s}
.google-btn:hover{background:#f8fafd;box-shadow:0 2px 6px rgba(60,64,67,.3),0 8px 22px rgba(60,64,67,.16);transform:translateY(-1px)}
.google-btn:active{transform:translateY(0)}.google-btn:focus-visible{outline:3px solid #4285F4;outline-offset:2px}
.google-btn-icon{display:inline-flex}.google-note{text-align:center;margin-top:14px}
.courier-search{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:16px;margin:16px 0;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.courier-search.is-searching{background:linear-gradient(135deg,#fff7ed,#fff)}.courier-search.is-found{background:linear-gradient(135deg,#ecfdf5,#fff);border-color:#86efac}
.cs-searching,.cs-found{display:flex;align-items:center;gap:14px;width:100%}.cs-found{justify-content:flex-start;flex-wrap:wrap}.cs-searching[hidden],.cs-found[hidden],[data-cs-chat][hidden]{display:none}
.spinner{width:34px;height:34px;flex:none;border:4px solid #fed7aa;border-top-color:var(--orange);border-radius:50%;animation:lsmd-spin .9s linear infinite}
@keyframes lsmd-spin{to{transform:rotate(360deg)}}
.cs-check{width:34px;height:34px;flex:none;border-radius:50%;background:#16a34a;color:#fff;display:grid;place-items:center;font-weight:900;font-size:20px;animation:lsmd-pop .35s ease-out}
@keyframes lsmd-pop{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}.cs-check{animation:none}}
.offer-box{margin:16px 0;padding:14px 16px;border:1px dashed #fdba74;border-radius:14px;background:#fffbf5}.offer-q{margin:0 0 6px}
.cam-ui{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:-6px 0 16px}.cam-ui img{width:72px;height:72px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}
.cam-modal{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;padding:12px}.cam-modal[hidden]{display:none}
.cam-box{width:min(560px,100%);display:flex;flex-direction:column;gap:12px}.cam-box video{width:100%;max-height:70vh;background:#000;border-radius:14px;object-fit:contain}.cam-box video.mirror{transform:scaleX(-1)}
.cam-actions{display:flex;gap:10px;justify-content:center}.cam-err{background:#fee2e2;color:#991b1b;padding:10px 12px;border-radius:10px;margin:0}
/* Rev16 — beranda: hero satu kolom, banner Ambil Obat, box Produk Pilihan */
.hero-v2.hero-solo{grid-template-columns:1fr;padding-bottom:18px}
.promo-banner{display:block;cursor:pointer;margin:6px 0 22px;border-radius:22px;line-height:0;-webkit-tap-highlight-color:transparent;transition:transform .18s ease,filter .18s ease}
.promo-banner img{display:block;width:100%;height:auto;max-height:240px;object-fit:contain}
.promo-banner:hover{transform:translateY(-2px);filter:drop-shadow(0 10px 18px rgba(21,128,61,.18))}
.promo-banner:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.pick-box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius,18px);box-shadow:var(--shadow);padding:18px 18px 8px;margin:0 0 10px}
.pick-head{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:12px}
.pick-head h2{margin:0;font-size:24px;letter-spacing:-.02em}.pick-head p{margin:2px 0 0}.pick-head a{white-space:nowrap;font-weight:700;color:var(--green)}
.pick-scroll{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;max-height:520px;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:2px 4px 12px 2px}
.pick-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;transition:box-shadow .18s ease,transform .18s ease}
.pick-card:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(28,25,23,.10)}
.pick-img{display:grid;place-items:center;aspect-ratio:1/1;background:linear-gradient(135deg,#ffedd5,#dcfce7);font-size:40px;overflow:hidden}
.pick-img img{width:100%;height:100%;object-fit:cover;display:block}
.pick-name{padding:8px 10px 0;font-weight:700;font-size:14px;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;min-height:2.6em}
.pick-price{padding:2px 10px 10px;font-weight:900;color:var(--orange2)}
@media(max-width:640px){.promo-banner{margin:4px 0 16px;border-radius:16px}.promo-banner img{max-height:none}.pick-box{padding:14px 12px 6px}.pick-scroll{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-height:min(68vh,560px)}.pick-head h2{font-size:21px}}
/* Rev16 — voice-to-text & Bantu AI */
.voice-field{position:relative}.voice-field label{padding-right:0}
.voice-field .mic-btn{position:absolute;right:8px;top:34px;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:18px;line-height:1}
.voice-field input,.voice-field textarea{padding-right:54px}
.mic-btn.on{background:#fee2e2;border-color:#ef4444;animation:micpulse 1.2s ease-in-out infinite}
@keyframes micpulse{50%{box-shadow:0 0 0 6px rgba(239,68,68,.18)}}
@media (prefers-reduced-motion:reduce){.mic-btn.on{animation:none}}
.ai-result{border:1px dashed var(--line);border-radius:14px;padding:12px;margin:8px 0 14px;background:#fffdf9}
.ai-cand{display:flex;gap:10px;align-items:flex-start;font-weight:400;border:1px solid var(--line);border-radius:12px;padding:10px;margin:0 0 8px;cursor:pointer;background:#fff}
.ai-cand input{width:auto;margin-top:4px}.ai-cand-desc{white-space:pre-line;font-size:14px;color:#374151}

/* Rev16 responsif — beranda desktop mengikuti gambar referensi: judul/deskripsi lebar, pencarian selebar kolom, banner lalu Produk Pilihan. Mobile (<=900px) tidak berubah. */
@media(min-width:901px){
 .hero-v2.hero-solo .hero-copy{display:flex;flex-direction:column;align-items:flex-start;width:100%}
 .hero-v2.hero-solo h1{max-width:min(100%,1000px);font-size:clamp(46px,5.2vw,68px);line-height:1.04;margin:12px 0 16px}
 .hero-v2.hero-solo p{max-width:min(100%,780px)}
 .hero-v2.hero-solo .trust{order:1;margin:16px 0 0}
 .hero-v2.hero-solo .search-v2{order:2;max-width:none;width:100%;margin-top:20px}
 .hero-v2.hero-solo .search-v2 button{min-width:112px}
 .pick-scroll{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px}
}
@media(min-width:651px) and (max-width:900px){.hero-v2.hero-solo .search-v2{max-width:none;width:100%}.hero-v2.hero-solo p{max-width:100%}}

/* ===== Rev16.1 — Pemilih titik peta + "Gunakan Lokasi Saya" =====
   Sebelumnya TIDAK ADA aturan tinggi untuk .map-canvas → kontainer peta Google berukuran 0 px (peta & penanda tak terlihat). */
.map-picker{display:grid;gap:8px;margin:14px 0}
.map-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.map-picker [data-map-locate]{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.map-picker [data-map-locate]:disabled{opacity:.75;cursor:progress}
.map-picker [data-map-locate].is-loading{filter:saturate(.8)}
.map-picker [data-map-status]{margin:0;min-height:1.4em;line-height:1.45;overflow-wrap:anywhere}
.map-picker [data-map-status].map-status-busy{color:#92400e}
.map-picker [data-map-status].map-status-err{color:#b91c1c;font-weight:600}
.map-picker [data-map-status].map-status-ok{color:#15803d}
.map-canvas{display:block;width:100%;height:340px;min-height:260px;border:1px solid var(--line);border-radius:16px;background:#e8efe9;overflow:hidden;position:relative;-webkit-tap-highlight-color:transparent;touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}
.map-canvas .map-off{margin:0;padding:18px;color:var(--muted);font-size:14px;line-height:1.5}
@media(max-width:650px){.map-canvas{height:clamp(240px,48vh,340px);min-height:240px}.map-picker-head [data-map-locate]{width:100%}}
@media(min-width:1024px){.map-canvas{height:380px}}
/* Rev16.2 — Alamat Saya: formulir rapi di HP/tablet/desktop; tombol Simpan tidak tertutup bilah browser */
.loc-warn{background:#fff7ed;border:1px solid #fdba74;color:#7c2d12;border-radius:12px;padding:10px 12px;font-size:14px}
form[data-address-form]{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
form[data-address-form] [data-address-submit]{width:100%;margin-top:6px}
@media(min-width:768px){form[data-address-form] [data-address-submit]{width:auto;min-width:220px}}
/* Rev16.2 — Ambil Obat: teks ongkir panjang di sel angka tidak meluber ke luar panel di HP */
.breakdown [data-med-quote]{white-space:normal;display:inline-block;text-align:right;overflow-wrap:anywhere}
/* ===== Rev16.3 — Pencarian jalan di peta & Ambil Lokasi dari WhatsApp ===== */
.map-search{position:relative}
.map-search input{width:100%;font-size:16px}
.map-search-results{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:30;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);max-height:min(320px,50vh);overflow:auto;-webkit-overflow-scrolling:touch}
.map-search-results .ms-item{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;width:100%;text-align:left;padding:11px 14px;background:#fff;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;color:var(--ink);font-weight:500;min-height:44px;font-size:15px;line-height:1.35}
.map-search-results .ms-item small{flex:none;color:var(--muted);font-size:11px;border:1px solid var(--line);border-radius:999px;padding:1px 7px;margin-top:2px}
.map-search-results .ms-item.on,.map-search-results .ms-item:hover{background:#f0fdf4}
.map-search-results .ms-empty{padding:12px 14px;font-size:14px;color:var(--muted)}
.map-search-results .ms-attr{padding:6px 14px;font-size:11px;color:var(--muted);background:#fafafa}
.wa-pick{display:grid;gap:4px}.wa-pick p{margin:0}
.wa-btn{background:#16a34a!important;color:#fff!important;justify-self:start}
@media(max-width:650px){.wa-btn{justify-self:stretch;width:100%}}
.wa-dialog{position:fixed;inset:0;z-index:1000;background:rgba(15,23,42,.55);display:flex;align-items:flex-end;justify-content:center;padding:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}
.wa-dialog[hidden]{display:none}
.wa-box{background:#fff;border-radius:18px;max-width:560px;width:100%;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;padding:18px;display:grid;gap:10px}
.wa-box h3{margin:0}.wa-steps{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px}
.wa-box textarea{font-size:16px;width:100%}
.wa-msg{font-size:14px;overflow-wrap:anywhere}
@media(min-width:651px){.wa-dialog{align-items:center}}
body.wa-open{overflow:hidden}
.wa-dialog [hidden],.map-search [hidden]{display:none!important}
/* Rev16.7.1: FOTO PRODUK utuh (tidak terpangkas) — kartu produk, pilihan beranda, galeri detail. Banner/hero/blog TIDAK diubah.
   Safari iOS: kotak aspect-ratio di dalam kartu flex-column + img height:100% dapat salah ukur → img diposisikan absolut di kotak
   rasio tetap; object-fit:contain menampilkan seluruh barang (sisa ruang = latar putih), rasio foto tetap proporsional. */
.product .thumb,.pick-img{position:relative;flex:0 0 auto;width:100%;height:auto;overflow:hidden;background:#fff}
.product .thumb{aspect-ratio:4/3}
.pick-img{aspect-ratio:1/1}
@supports not (aspect-ratio:1/1){.product .thumb{height:0;padding-top:75%}.pick-img{height:0;padding-top:100%}}
.product .thumb img,.pick-img img{position:absolute;top:0;left:0;width:100%;height:100%;max-width:none;object-fit:contain;object-position:center;display:block}
.product:hover .thumb img{transform:scale(1.03)}
.gallery img{object-fit:contain;object-position:center;background:#fff;max-width:100%}
.pref-dt{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr);gap:8px}.pref-dt label{margin-bottom:6px}
.map-picker.is-locked .map-canvas{outline:2px solid var(--green);outline-offset:-2px}
.map-picker [hidden],[data-send-form] [hidden]{display:none!important}


/* Rev16.7.2: isolasi scroll chat agar pesan panjang tidak memperbesar halaman. */
.chat-room{height:clamp(320px,66vh,760px);min-height:0;max-height:calc(100vh - 180px);overflow:hidden;display:flex;flex-direction:column}
.messages{flex:1 1 auto;height:0;min-height:0;overflow-y:auto;overscroll-behavior:contain;scroll-behavior:auto}
@media(max-width:750px){
 .chat-room{height:clamp(260px,calc(100vh - 320px),540px);min-height:0;max-height:calc(100vh - 180px)}
}
@supports (height:100dvh){
 @media(max-width:750px){.chat-room{height:clamp(260px,calc(100dvh - 320px),540px);max-height:calc(100dvh - 180px)}}
}

/* Rev16.8: petunjuk geser baris shortcut Dashboard Customer (di bawah baris shortcut, di atas kartu layanan).
   Hanya teks pendek; tidak mengubah ukuran/urutan shortcut dan tidak membuat halaman bergeser horizontal. */
.swipe-hint{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 0 6px;padding:0 8px;font-size:12px;line-height:16px;color:#8b9099;text-align:center;overflow-wrap:anywhere}
.swipe-hint[hidden]{display:none}
.swipe-hint-ico{flex:none;font-size:18px;line-height:18px;filter:grayscale(1) opacity(.7)}

/* Rev16.8: badge angka oranye pada menu Chat/Invoice (mengikuti gaya badge Dashboard), toast pembaruan, tombol suara. */
.nav-badge{display:inline-block;box-sizing:border-box;min-width:20px;height:20px;padding:0 6px;margin-left:4px;border-radius:999px;background:var(--orange-hot,#f85808);color:#fff;font-size:12px;font-weight:800;line-height:20px;text-align:center;vertical-align:middle;white-space:nowrap}
.menu>a:not(.pill):hover .nav-badge{background:var(--orange2,#ea580c)}
.customer-nav a .nav-badge{margin-left:6px}
.customer-nav a.on .nav-badge{background:#fff;color:var(--orange-hot,#f85808)}
.chat-item .nav-badge{float:right;margin-left:8px}
.invoice-card .nav-badge{margin-left:8px}
.menu .snd-toggle{font-size:18px;line-height:1;padding:6px 8px;min-height:40px;border-radius:999px}
.menu .snd-toggle[hidden]{display:none}
.menu .snd-toggle:hover{background:var(--green-soft,#e8f6ee)}
.lsmd-toasts{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.lsmd-toast{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:12px 12px 12px 14px;border-radius:14px;background:#17202a;color:#fff;box-shadow:0 14px 40px rgba(0,0,0,.28);font-size:14px;line-height:1.45}
.lsmd-toast-msg{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.lsmd-toast a{color:#ffd9b8;font-weight:800;text-decoration:underline}
.lsmd-toast-btn{flex:none;min-height:36px;padding:6px 12px;border:0;border-radius:999px;background:var(--orange-hot,#f85808);color:#fff;font:inherit;font-weight:800;cursor:pointer}
.lsmd-toast-x{flex:none;min-height:32px;width:32px;padding:0;border:0;border-radius:999px;background:transparent;color:#cbd5e1;font:inherit;cursor:pointer}
.lsmd-toast-x:hover{background:rgba(255,255,255,.12)}
@media(max-width:650px){.lsmd-toasts{left:16px;right:16px;width:auto;bottom:calc(12px + env(safe-area-inset-bottom,0px))}}
@media(prefers-reduced-motion:no-preference){.lsmd-toast{animation:lsmdToastIn .22s ease-out}@keyframes lsmdToastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}}

/* Rev16.8.1 — badge Chat & tombol suara di header mobile (menu ☰ tersembunyi di ≤650px) */
.mbar{display:none;align-items:center;gap:8px;margin-left:auto}
.mbar .mchat,.mbar .mbtn{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:44px;padding:0 8px;border-radius:14px;border:1px solid var(--line);background:#fff;font-size:20px;line-height:1;color:var(--ink);text-decoration:none;cursor:pointer}
.mbar .mchat .nav-badge{position:absolute;top:-7px;right:-7px;margin:0}
.mbar .mbtn[hidden]{display:none}
.hamb{position:relative}
.hamb .nav-badge{position:absolute;top:-7px;right:-7px;margin:0;font-size:11px}
.snd-toggle{position:relative}
.snd-toggle.is-locked::after{content:"";position:absolute;top:5px;right:5px;width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 2px #fff}
@media(max-width:650px){.mbar{display:flex}}

/* Rev16.10: QRIS dinamis per invoice */
.qris-dyn{text-align:center;margin:12px 0}
.qris-dyn[hidden]{display:none}
.qris-dyn-box{display:inline-block;background:#fff;padding:10px;border-radius:10px;line-height:0}
.qris-dyn-box img,.qris-dyn-box canvas{max-width:100%;height:auto}
.qris-dyn-cap{margin:8px auto 0;max-width:340px;font-size:.9rem;line-height:1.4}

/* Rev16.10.3: permintaan unggah bukti setelah 4 detik belum terverifikasi */
.invoice-proof.proof-prompt{outline:2px solid #f59e0b;outline-offset:4px;border-radius:10px;padding:6px}

/* Indikator proses pemesanan kurir */
.btn.is-route-loading {
  gap: 9px;
  cursor: wait;
}
.btn .route-loading-spinner {
  display: inline-block;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: lsmd-route-spin .75s linear infinite;
}
@keyframes lsmd-route-spin {
  to { transform: rotate(360deg); }
}