/* ==========================================================
   KEMUNING FLORIST — Storefront
   ========================================================== */
:root{
  --primary:#1e7a4f; --primary-d:#155c3a; --primary-50:#e9f6ef;
  --navy:#13261d; --ink:#111827; --text:#374151; --muted:#6b7280; --line:#e5e7eb; --bg:#f6f8fc; --white:#fff;
  --pink:#e8457c; --yellow:#f5b800; --cyan:#8bc34a; --green:#16a34a; --orange:#f97316; --purple:#7c3aed; --red:#e11d48;
  --radius:16px; --radius-sm:10px;
  --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px -8px rgba(16,24,40,.10);
  --shadow-lg:0 24px 48px -16px rgba(16,24,40,.22);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--text);background:var(--bg);font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--primary);text-decoration:none}
h1,h2,h3,h4{color:var(--ink);line-height:1.2;margin:0 0 .4em;letter-spacing:-.02em}
h2{font-size:clamp(1.4rem,2.6vw,2rem);font-weight:800}
h3{font-size:1.15rem;font-weight:700}
p{margin:0 0 1em}
button,input,select,textarea{font:inherit;color:inherit}
.container{width:min(1200px,100% - 32px);margin-inline:auto}
.container.narrow{width:min(720px,100% - 32px)}
.muted{color:var(--muted)} .tiny{font-size:.78rem} .center{text-align:center} .right{text-align:right}
.mt{margin-top:14px} .mt-xl{margin-top:48px}
[hidden]{display:none!important}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:12px;border:1.5px solid transparent;font-weight:700;font-size:.95rem;cursor:pointer;transition:.18s ease;white-space:nowrap;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn-sm{padding:7px 14px;font-size:.85rem;border-radius:10px}
.btn-lg{padding:14px 26px;font-size:1rem}
.btn-block{width:100%}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 8px 20px -8px rgba(30,122,79,.7)}
.btn-primary:hover{background:var(--primary-d)}
.btn-yellow{background:var(--yellow);color:var(--navy);box-shadow:0 10px 24px -10px rgba(255,170,0,.9)}
.btn-yellow:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-pink{background:var(--pink);color:#fff}
.btn-pink:hover{filter:brightness(1.08)}
.btn-ghost{background:rgba(255,255,255,.8);border-color:rgba(19,38,29,.12);color:var(--navy);backdrop-filter:blur(6px)}
.btn-ghost:hover{background:#fff}
.btn-ghost-dark{background:transparent;color:var(--text);margin-top:8px}
.btn-outline{background:#fff;border-color:var(--primary);color:var(--primary)}
.btn-outline:hover{background:var(--primary-50)}
.btn-white{background:#fff;color:var(--primary)}
.btn-wa{background:#25d366;color:#fff;box-shadow:0 10px 24px -10px rgba(37,211,102,.9)}
.btn-wa:hover{background:#1ebe5b}
.icon-btn{width:42px;height:42px;border-radius:12px;display:inline-grid;place-items:center;border:0;background:var(--bg);color:var(--ink);cursor:pointer;position:relative;font-size:1.05rem}
.icon-btn:hover{background:var(--primary-50);color:var(--primary)}
.icon-btn.danger{background:transparent;color:var(--muted)} .icon-btn.danger:hover{color:var(--red);background:#fff1f2}
.link-more{font-weight:700;display:inline-flex;gap:8px;align-items:center}
.link-danger{background:none;border:0;color:var(--red);font-weight:600;cursor:pointer;font-size:.85rem}

/* ---------- header ---------- */
.topbar{background:var(--navy);color:#cbd5e1;font-size:.8rem}
.topbar-in{display:flex;gap:24px;justify-content:space-between;padding:7px 0}
.topbar a{color:#fff;font-weight:600}
.topbar i{color:var(--yellow);margin-right:4px}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.header-in{display:flex;align-items:center;gap:22px;height:74px}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);flex-shrink:0}
.brand b{display:block;font-size:1.25rem;font-weight:800;letter-spacing:-.01em;line-height:1}
.brand small{display:block;font-size:.62rem;letter-spacing:.3em;font-weight:600;color:var(--text);margin-top:3px}
.brand-light b,.brand-light small{color:#fff}
.search{flex:1;max-width:420px;position:relative}
.search i{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--muted)}
.search input{width:100%;padding:11px 16px 11px 44px;border-radius:999px;border:1px solid var(--line);background:var(--bg);outline:none;transition:.2s}
.search input:focus{border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px var(--primary-50)}
.nav{display:flex;gap:4px}
.nav a{padding:8px 12px;border-radius:10px;color:var(--text);font-weight:600;font-size:.92rem}
.nav a:hover,.nav a.active{color:var(--primary);background:var(--primary-50)}
.header-actions{display:flex;gap:8px;align-items:center;margin-left:auto}
.cart-badge{position:absolute;top:-4px;right:-4px;background:var(--pink);color:#fff;font-size:.68rem;font-weight:800;min-width:19px;height:19px;border-radius:999px;display:grid;place-items:center;padding:0 5px;border:2px solid #fff}
.show-sm{display:none}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#f3f6ff 100%);padding:56px 0 64px}
.splash{position:absolute;border-radius:50%;filter:blur(2px);opacity:.9;pointer-events:none}
.splash.s1{width:520px;height:520px;right:-120px;top:-160px;background:radial-gradient(circle at 30% 30%,#ffd400 0 22%,transparent 23%),radial-gradient(circle at 70% 40%,#e8457c 0 28%,transparent 29%),radial-gradient(circle at 45% 75%,#8bc34a 0 25%,transparent 26%),radial-gradient(circle at 80% 80%,#7c3aed 0 18%,transparent 19%);opacity:.22;filter:blur(30px)}
.splash.s2{width:160px;height:160px;left:-40px;bottom:30px;background:radial-gradient(circle,#f5b800 0 40%,transparent 41%);opacity:.35;filter:blur(18px)}
.splash.s3{width:16px;height:16px;left:46%;top:60px;background:var(--pink)}
.splash.s4{width:10px;height:10px;left:52%;bottom:80px;background:var(--cyan)}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.eyebrow{display:inline-flex;gap:8px;align-items:center;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-size:.82rem;font-weight:700;color:var(--navy);box-shadow:var(--shadow)}
.eyebrow i{color:var(--yellow)}
.hero h1{font-size:clamp(2.3rem,5.2vw,4rem);font-weight:800;letter-spacing:-.035em;margin:18px 0 16px;line-height:1.04}
.grad-text{background:linear-gradient(90deg,var(--pink),#f59e0b 35%,var(--yellow) 60%,var(--cyan) 80%,var(--primary));-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:1.08rem;max-width:520px;color:#4b5563}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:26px 0 30px}
.hero-stats{display:flex;gap:32px}
.hero-stats b{display:block;font-size:1.35rem;color:var(--ink);font-weight:800}
.hero-stats span{font-size:.82rem;color:var(--muted)}

/* hero illustration */
.hero-art{position:relative;height:440px}
.art-stage{position:absolute;inset:0}
.art-stage::before{content:"";position:absolute;inset:30px 10px 10px 30px;border-radius:40% 60% 55% 45%/50% 45% 55% 50%;background:conic-gradient(from 200deg,#e8457c,#f5b800,#8bc34a,#1e7a4f,#7c3aed,#e8457c);opacity:.95;animation:morph 12s ease-in-out infinite}
.art-stage::after{content:"";position:absolute;inset:60px 40px 40px 60px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.55),transparent 70%)}
@keyframes morph{50%{border-radius:58% 42% 40% 60%/40% 60% 40% 60%;transform:rotate(6deg)}}
.art-banner{position:absolute;z-index:2;right:34px;top:8px;width:150px;height:330px;background:#fff;border-radius:6px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;padding:28px 10px;text-align:center;overflow:hidden}
.art-banner::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;background:linear-gradient(135deg,#e8457c,#f5b800 40%,#8bc34a 70%,#1e7a4f);clip-path:polygon(0 30%,30% 0,60% 25%,100% 5%,100% 100%,0 100%)}
.art-banner img{width:44px}
.art-banner b{color:var(--navy);font-weight:800;line-height:1.05;margin-top:10px;font-size:1.05rem}
.art-banner small{font-size:.48rem;letter-spacing:.2em;font-weight:700;color:var(--muted);margin-top:4px}
.art-pole{position:absolute;bottom:-1px;width:70%;height:6px;background:#334155;border-radius:4px;z-index:3}
.art-shirt{position:absolute;z-index:3;left:40px;top:40px;width:170px;height:170px;background:#fff;border-radius:28px;display:grid;place-items:center;box-shadow:var(--shadow-lg);transform:rotate(-6deg)}
.art-shirt i{font-size:110px;color:#eef2f7}
.art-shirt img{position:absolute;width:38px;top:62px}
.art-mug{position:absolute;z-index:4;left:150px;bottom:40px;width:110px;height:110px;background:#fff;border-radius:24px;display:grid;place-items:center;box-shadow:var(--shadow-lg)}
.art-mug i{font-size:56px;background:linear-gradient(135deg,var(--pink),var(--yellow));-webkit-background-clip:text;color:transparent}
.art-cards{position:absolute;z-index:4;left:6px;bottom:70px;width:140px;height:90px}
.art-cards span{position:absolute;inset:0;border-radius:8px;background:linear-gradient(135deg,var(--navy),#1e3a8a);box-shadow:var(--shadow)}
.art-cards span:nth-child(1){transform:rotate(-14deg) translate(-6px,6px);background:linear-gradient(135deg,var(--pink),var(--yellow))}
.art-cards span:nth-child(2){transform:rotate(-6deg);background:#fff}
.art-cards span:nth-child(3){transform:rotate(4deg) translate(8px,-4px)}
.art-cards span:nth-child(3)::after{content:attr(data-name);position:absolute;left:12px;bottom:12px;color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.08em}
.art-cal{position:absolute;z-index:4;right:150px;bottom:20px;width:96px;height:96px;background:#fff;border-radius:20px;display:grid;place-items:center;box-shadow:var(--shadow-lg);font-size:44px;color:var(--primary)}
.art-chip{position:absolute;z-index:5;background:#fff;padding:9px 14px;border-radius:12px;font-weight:700;font-size:.8rem;color:var(--navy);box-shadow:var(--shadow-lg);display:flex;gap:8px;align-items:center;animation:float 5s ease-in-out infinite}
.art-chip i{color:var(--green)}
.art-chip.c1{left:-6px;top:220px}
.art-chip.c2{right:0;bottom:120px;animation-delay:-2.5s}
.art-chip.c2 i{color:var(--primary)}
@keyframes float{50%{transform:translateY(-8px)}}

/* ---------- sections ---------- */
.section{padding:56px 0}
.section.pt-0{padding-top:0} .section.pt-sm{padding-top:24px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:24px}
.sec-head.center{justify-content:center;text-align:center}
.kicker{display:inline-block;font-size:.78rem;font-weight:800;color:var(--pink);text-transform:uppercase;letter-spacing:.12em;margin-bottom:6px}
.kicker.light{color:var(--yellow)}

.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cat-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 14px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;transition:.2s;color:var(--ink)}
.cat-item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.cat-ico{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:1.45rem;color:#fff;background:var(--c);box-shadow:0 10px 20px -10px var(--c);margin-bottom:10px}
.cat-item b{font-size:.9rem;font-weight:700;line-height:1.25}
.cat-item small{color:var(--muted);font-size:.75rem}

.promo{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(110deg,#fff0f7 0%,#ffe1ef 45%,#fbe7ff 100%);display:grid;grid-template-columns:1.1fr 1fr;min-height:240px}
.promo-text{padding:36px 40px;position:relative;z-index:2}
.pill-pink{display:inline-block;background:var(--pink);color:#fff;font-weight:800;font-size:.72rem;letter-spacing:.08em;padding:5px 12px;border-radius:999px}
.promo h3{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:800;margin:12px 0 4px;letter-spacing:-.02em}
.promo p{font-size:1.05rem}
.promo p b{color:var(--pink);font-size:1.6rem}
.promo-art{position:relative}
.promo-art::before{content:"";position:absolute;right:-60px;bottom:-80px;width:380px;height:380px;border-radius:50%;background:conic-gradient(#e8457c,#f5b800,#8bc34a,#7c3aed,#e8457c);opacity:.85;filter:blur(4px)}
.rollup{position:absolute;bottom:18px;width:110px;height:200px;background:#fff;border-radius:4px;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;align-items:center;padding-top:22px;text-align:center}
.rollup img{width:34px} .rollup b{font-size:.8rem;color:var(--navy);margin-top:6px;line-height:1.05}
.rollup::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;background:linear-gradient(135deg,#e8457c,#f5b800,#8bc34a);clip-path:polygon(0 35%,40% 0,100% 30%,100% 100%,0 100%)}
.rollup.r1{right:180px;transform:scale(.88);transform-origin:bottom} .rollup.r2{right:50px}

/* ---------- product cards ---------- */
.product-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.pcard{background:#fff;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;display:flex;flex-direction:column;transition:.22s}
.pcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px);border-color:transparent}
.pcard-img{position:relative;display:block;aspect-ratio:4/3;background:var(--bg)}
.tag-hot{position:absolute;top:12px;left:12px;background:var(--yellow);color:var(--navy);font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:999px}
.pcard-body{padding:14px 16px 16px;display:flex;flex-direction:column;flex:1}
.pcard-cat{font-size:.72rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:.06em}
.pcard-name{color:var(--ink);font-weight:700;font-size:1rem;margin-top:2px}
.pcard-name:hover{color:var(--primary)}
.pcard-spec{font-size:.8rem;color:var(--muted)}
.pcard-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;padding-top:12px;gap:8px}
.pcard-foot small{font-size:.72rem;color:var(--muted);display:block}
.price{color:var(--red);font-weight:800;font-size:1.08rem}
.price em{font-style:normal;font-size:.75rem;color:var(--muted);font-weight:600}
.rating{display:block;font-size:.75rem;color:var(--ink);font-weight:600}
.rating i{color:#f5b301}
.rating em{font-style:normal;color:var(--muted);font-weight:500}
.add-btn{width:42px;height:42px;flex-shrink:0;border-radius:12px;background:var(--primary);color:#fff;border:0;display:grid;place-items:center;cursor:pointer;font-size:1rem;transition:.2s}
.add-btn:hover{background:var(--primary-d);transform:scale(1.06)}

/* thumbnails */
.thumb{width:100%;height:100%;overflow:hidden;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb-ill{display:grid;place-items:center;background:linear-gradient(145deg,color-mix(in srgb,var(--c) 14%,#fff),color-mix(in srgb,var(--c) 4%,#fff))}
.thumb-ill i{position:relative;z-index:2;font-size:clamp(2.4rem,5vw,3.6rem);color:var(--c);filter:drop-shadow(0 10px 14px color-mix(in srgb,var(--c) 40%,transparent))}
.thumb-ill .blob{position:absolute;border-radius:50%;opacity:.75}
.thumb-ill .b1{width:46%;aspect-ratio:1;background:color-mix(in srgb,var(--c) 30%,#fff);right:-8%;top:-12%}
.thumb-ill .b2{width:22%;aspect-ratio:1;background:#f5b80055;left:8%;bottom:10%}
.thumb-ill .b3{width:10%;aspect-ratio:1;background:#e8457c44;left:22%;top:16%}
.thumb-sm{width:72px;height:72px;border-radius:12px;flex-shrink:0}
.thumb-sm i{font-size:1.6rem}
.thumb-xs{width:48px;height:48px;border-radius:10px;flex-shrink:0}
.thumb-xs i{font-size:1.1rem}
.thumb-xl{border-radius:22px;aspect-ratio:1}
.thumb-xl i{font-size:7rem}

/* features */
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.feature{display:flex;gap:12px;align-items:center}
.feature i{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 12%,#fff);color:var(--c);font-size:1.15rem;flex-shrink:0}
.feature b{display:block;color:var(--ink);font-size:.92rem}
.feature span{font-size:.78rem;color:var(--muted)}

.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:26px 20px 20px}
.step-n{position:absolute;top:-14px;left:20px;width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.85rem}
.step>i{font-size:1.6rem;color:var(--primary);margin-bottom:12px;display:block}
.step b{color:var(--ink);display:block;margin-bottom:4px}
.step p{font-size:.86rem;color:var(--muted);margin:0}

.pay-band{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;align-items:center;background:radial-gradient(circle at 90% 10%,#e8457c55,transparent 40%),radial-gradient(circle at 10% 100%,#8bc34a55,transparent 40%),var(--navy);color:#cbd5e1;padding:40px;border-radius:24px}
.pay-band h2{color:#fff}
.pay-list{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.pay-chip{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);color:#fff;padding:10px 16px;border-radius:12px;font-weight:700;font-size:.9rem;display:inline-flex;gap:8px;align-items:center}
.pay-chip i{color:var(--yellow)}

.cta-band{margin:8px 0 64px;display:flex;justify-content:space-between;align-items:center;gap:20px;background:linear-gradient(110deg,var(--primary),#5b3cf0 60%,var(--pink));color:#e0e7ff;padding:36px 40px;border-radius:24px}
.cta-band h2{color:#fff;font-size:1.6rem}
.cta-band p{margin:0}

/* ---------- page head ---------- */
.page-head{padding:36px 0 28px}
.page-head.slim{padding:26px 0 18px}
.page-head h1{font-size:clamp(1.6rem,3vw,2.3rem);font-weight:800}
.page-head p{color:var(--muted);margin:0}
.crumbs{font-size:.84rem;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.crumbs i{font-size:.6rem}
.crumbs a{color:var(--muted)} .crumbs a:hover{color:var(--primary)}
.crumbs span{color:var(--ink);font-weight:600}
.progress-steps{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.progress-steps span{font-size:.8rem;font-weight:700;padding:6px 12px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--muted)}
.progress-steps .on{background:var(--primary);color:#fff;border-color:var(--primary)}
.progress-steps .done{background:var(--primary-50);color:var(--primary);border-color:transparent}

.filter-bar{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:22px;flex-wrap:wrap}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;flex:1}
.chip{white-space:nowrap;padding:8px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--text);font-weight:600;font-size:.85rem;display:inline-flex;gap:6px;align-items:center}
.chip.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.chip.active i{color:#fff!important}
.sort{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--muted)}
.sort select{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;font-weight:600;color:var(--ink)}

.empty{text-align:center;padding:60px 20px;background:#fff;border:1px dashed var(--line);border-radius:var(--radius)}
.empty>i{font-size:3rem;color:var(--muted);margin-bottom:12px}

/* ---------- detail ---------- */
.detail{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;margin-top:10px}
.detail-media{position:sticky;top:96px;align-self:start}
.detail-info h1{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin:6px 0 10px}
.detail-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.86rem;color:var(--muted);align-items:center}
.detail-meta .rating{display:inline}
.detail-price{font-size:2rem;font-weight:800;color:var(--red);margin:14px 0}
.detail-price small{font-size:.95rem;color:var(--muted);font-weight:600}
.detail-desc{color:#4b5563}
.order-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin:20px 0;display:flex;flex-direction:column;gap:14px}
.size-row{display:flex;gap:12px;align-items:flex-end}
.size-row label{flex:1;font-weight:600;font-size:.85rem;color:var(--ink)}
.size-row .x{padding-bottom:12px;font-weight:800;color:var(--muted)}
.hint{font-size:.8rem;color:var(--muted);margin:0;display:block}
.qty-row{display:flex;justify-content:space-between;align-items:center}
.qty-row label{font-weight:600;color:var(--ink);font-size:.9rem}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.qty button{width:40px;height:42px;border:0;background:var(--bg);font-size:1.15rem;cursor:pointer;font-weight:700}
.qty button:hover{background:var(--primary-50);color:var(--primary)}
.qty input{width:64px;height:42px;border:0;text-align:center;font-weight:700;outline:none;-moz-appearance:textfield}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none}
.qty-sm button{width:32px;height:34px}.qty-sm input{width:44px;height:34px}
.order-total{display:flex;justify-content:space-between;align-items:center;background:var(--primary-50);padding:12px 16px;border-radius:12px}
.order-total b{font-size:1.3rem;color:var(--primary)}
.order-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.detail-perks{display:flex;gap:10px;flex-wrap:wrap}
.detail-perks span{font-size:.8rem;font-weight:600;background:#fff;border:1px solid var(--line);padding:8px 12px;border-radius:10px}
.detail-perks i{color:var(--primary);margin-right:4px}

/* ---------- forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.86rem;color:var(--ink)}
.field input,.field textarea,.field select,.size-row input,.track-form input{width:100%;padding:11px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;outline:none;transition:.2s;font-weight:500}
.field input:focus,.field textarea:focus,.field select:focus,.size-row input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-50)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.span-2{grid-column:span 2}
.err{color:var(--red);font-weight:600;font-size:.78rem;display:block}
.alert{padding:12px 16px;border-radius:12px;margin:16px 0;font-weight:600;font-size:.9rem}
.alert-error{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}
.alert-success{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.alert-info{background:var(--primary-50);color:var(--primary);border:1px solid #c7d7fe}

/* ---------- cart / checkout ---------- */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.card.pad{padding:22px}
.card-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-title{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:1.05rem}
.card-title .num{width:26px;height:26px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:.8rem}
.stack{display:flex;flex-direction:column;gap:16px}
.cart-layout{display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
.cart-row{display:grid;grid-template-columns:72px 1fr auto 110px 42px;gap:16px;align-items:center;padding:16px 20px;border-bottom:1px solid var(--line)}
.cart-row:last-child{border-bottom:0}
.cart-info{display:flex;flex-direction:column;min-width:0}
.cart-info b{color:var(--ink)}
.cart-info small{font-size:.8rem;color:var(--muted)}
.cart-info .note{color:var(--orange)}
.cart-sub{text-align:right;color:var(--ink)}
.summary{padding:22px;position:sticky;top:96px}
.summary h3{margin-bottom:14px}
.sum-row{display:flex;justify-content:space-between;padding:5px 0;font-size:.92rem}
.sum-row.big{font-size:1.1rem;margin-bottom:14px}
.sum-row.big b{color:var(--primary);font-size:1.4rem}
hr{border:0;border-top:1px dashed var(--line);margin:12px 0}
.choice-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.choice input,.pay-opt input{position:absolute;opacity:0;pointer-events:none}
.choice>span{display:flex;flex-direction:column;gap:2px;padding:16px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;height:100%;transition:.2s}
.choice>span i{font-size:1.3rem;color:var(--primary);margin-bottom:6px}
.choice b{color:var(--ink)} .choice small{color:var(--muted);font-size:.78rem}
.choice input:checked+span,.pay-opt input:checked+span{border-color:var(--primary);background:var(--primary-50);box-shadow:0 0 0 3px var(--primary-50)}
.pay-options{display:flex;flex-direction:column;gap:10px}
.pay-opt>span{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;transition:.2s}
.pay-opt b{display:block;color:var(--ink)} .pay-opt small{color:var(--muted);font-size:.78rem}
.pay-ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--bg);color:var(--navy);font-size:1.15rem;flex-shrink:0}
.pay-ico.qris{background:linear-gradient(135deg,var(--pink),var(--primary));color:#fff}
.pay-opt .tick{margin-left:auto;color:var(--line);font-size:1.2rem}
.pay-opt input:checked+span .tick{color:var(--primary)}
.mini-items{display:flex;flex-direction:column;gap:12px}
.mini-item{display:flex;gap:12px;align-items:center;font-size:.88rem}
.mini-item>div{flex:1;min-width:0}
.mini-item b{display:block;color:var(--ink)}
.mini-item small{display:block;color:var(--muted);font-size:.78rem}
.mini-item small.note{color:var(--orange)}
.mini-item>span{font-weight:700;color:var(--ink);white-space:nowrap}
.sticky{position:sticky;top:96px}

/* ---------- invoice / payment ---------- */
.invoice-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.inv-no{font-size:1.35rem;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:8px}
.copy-btn{border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 9px;cursor:pointer;font-size:.78rem;font-weight:700;color:var(--primary)}
.copy-btn:hover{background:var(--primary-50)}
.timeline{display:flex;justify-content:space-between;margin-bottom:16px;position:relative;gap:4px}
.timeline::before{content:"";position:absolute;left:8%;right:8%;top:38px;height:3px;background:var(--line);z-index:0}
.tl-step{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;position:relative;z-index:1;text-align:center}
.tl-dot{width:34px;height:34px;border-radius:50%;background:#fff;border:3px solid var(--line);display:grid;place-items:center;font-weight:800;font-size:.85rem;color:var(--muted)}
.tl-step small{font-size:.75rem;font-weight:600;color:var(--muted)}
.tl-step.done .tl-dot{background:var(--green);border-color:var(--green);color:#fff}
.tl-step.cur .tl-dot{background:var(--primary);border-color:var(--primary-50);color:#fff;box-shadow:0 0 0 5px var(--primary-50)}
.tl-step.cur small{color:var(--primary)}
.pay-card{display:flex;flex-direction:column;gap:18px}
.pay-total{display:flex;justify-content:space-between;gap:16px;background:linear-gradient(135deg,var(--navy),#1e3a8a);color:#cbd5e1;padding:20px 22px;border-radius:14px}
.big-amount{font-size:2rem;font-weight:800;color:#fff;letter-spacing:-.02em}
.big-amount .ucode{color:var(--yellow);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:5px}
.exact{font-size:.85rem;margin:4px 0}
.exact b{color:#fff}
.pay-total .hint{color:#a5b4fc}
.pay-total .copy-btn{background:rgba(255,255,255,.12);border-color:transparent;color:#fff}
.countdown{text-align:right;flex-shrink:0;display:flex;flex-direction:column}
.countdown b{font-size:1.5rem;color:var(--yellow);font-variant-numeric:tabular-nums}
.countdown small{font-size:.75rem}
.qris-box{display:grid;grid-template-columns:260px 1fr;gap:22px;align-items:center}
.qris-frame{border-radius:16px;border:1px solid var(--line);padding:14px;text-align:center;background:#fff;box-shadow:var(--shadow)}
.qris-top{background:linear-gradient(90deg,var(--pink),var(--primary));color:#fff;border-radius:10px;padding:8px;margin-bottom:12px}
.qris-top b{display:block;font-size:1.1rem;letter-spacing:.1em}
.qris-top span{font-size:.6rem}
.qris-img{width:100%;aspect-ratio:1;object-fit:contain}
.merchant{display:block;margin-top:8px;font-size:.82rem;color:var(--ink)}
.howto{margin:0;padding-left:20px;font-size:.9rem;display:flex;flex-direction:column;gap:8px}
.bank-box{display:flex;gap:18px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:18px}
.bank-logo{width:84px;height:84px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#8bc34a);color:#fff;font-weight:800;font-size:1.15rem;text-align:center;flex-shrink:0}
.bank-info small{color:var(--muted);display:block}
.acc{font-size:1.5rem;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:10px;flex-wrap:wrap;letter-spacing:.02em}
.upload-proof{border:1px dashed var(--line);border-radius:12px;padding:12px 16px}
.upload-proof summary{cursor:pointer;font-weight:600;color:var(--primary);font-size:.9rem}
.proof-form{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.proof-form input{flex:1;padding:8px;border:1px solid var(--line);border-radius:10px}
.notice{display:flex;gap:16px;align-items:flex-start}
.notice>i{font-size:2rem}
.notice.info>i{color:var(--primary)} .notice.success>i{color:var(--green)} .notice.danger>i{color:var(--red)}
.notice b{color:var(--ink);font-size:1.05rem}
.notice p{margin:4px 0 12px;color:var(--muted)}
.info-list{display:grid;grid-template-columns:100px 1fr;gap:8px 12px;margin:0;font-size:.88rem}
.info-list dt{color:var(--muted)} .info-list dd{margin:0;color:var(--ink);font-weight:600;word-break:break-word}
.bookmark{display:flex;gap:14px}
.bookmark>i{font-size:1.4rem;color:var(--pink)}
.bookmark b{display:block;color:var(--ink)} .bookmark small{display:block;color:var(--muted);margin-bottom:10px;font-size:.82rem}
.order-link{display:flex;justify-content:space-between;align-items:center;color:var(--text);gap:12px}
.order-link:hover{border-color:var(--primary)}
.order-link small{display:block}
.order-link .right{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.order-link b{color:var(--ink)}
.track-form{display:flex;flex-direction:column;gap:16px}

/* badges */
.badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:.76rem;font-weight:700;white-space:nowrap}
.badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-warning{background:#fff7e6;color:#b45309}
.badge-info{background:#e0f2fe;color:#0369a1}
.badge-primary{background:var(--primary-50);color:var(--primary)}
.badge-purple{background:#f3e8ff;color:#7e22ce}
.badge-success{background:#dcfce7;color:#15803d}
.badge-danger{background:#ffe4e6;color:#be123c}
.badge-muted{background:#f1f5f9;color:#475569}

/* ---------- footer ---------- */
.site-footer{background:var(--navy);color:#94a3b8;padding:56px 0 0;margin-top:30px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:32px}
.site-footer h4{color:#fff;font-size:1rem;margin-bottom:14px}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px;font-size:.9rem}
.site-footer a{color:#94a3b8} .site-footer a:hover{color:#fff}
.muted-light{margin-top:14px;font-size:.9rem}
.contact-list i{color:var(--yellow);width:18px}
.socials{display:flex;gap:10px}
.socials a{width:38px;height:38px;border-radius:10px;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#fff}
.socials a:hover{background:var(--primary)}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.08);margin-top:40px;padding:20px 0;font-size:.82rem}
.pay-logos{display:flex;gap:8px}
.pay-logos span{background:rgba(255,255,255,.08);padding:3px 10px;border-radius:6px;font-weight:700;color:#e2e8f0;font-size:.75rem}
.wa-float{position:fixed;right:20px;bottom:20px;z-index:60;background:#25d366;color:#fff;padding:12px 18px 12px 14px;border-radius:999px;display:flex;align-items:center;gap:8px;font-weight:700;box-shadow:0 14px 30px -10px rgba(37,211,102,.9)}
.wa-float i{font-size:1.5rem}
.wa-float:hover{transform:translateY(-2px)}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,40px);background:var(--navy);color:#fff;padding:12px 20px;border-radius:12px;font-weight:600;font-size:.9rem;opacity:0;pointer-events:none;transition:.3s;z-index:100;box-shadow:var(--shadow-lg);display:flex;gap:10px;align-items:center}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.err{background:var(--red)}

/* ---------- login button & bottom nav ---------- */
.btn-login{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-login:hover{border-color:var(--primary);color:var(--primary)}
.btn-login i{font-size:1rem}
.bottom-nav{display:none}

/* ---------- responsive ---------- */
@media (max-width:1180px){.hide-md{display:none!important}}
@media (max-width:1080px){
  .product-grid{grid-template-columns:repeat(3,1fr)}
  .cat-grid{grid-template-columns:repeat(5,1fr)}
  .nav{display:none}
  .nav.open{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:#fff;padding:12px 16px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
  .show-sm{display:inline-grid}
}
@media (max-width:860px){
  .hero{padding:32px 0 40px}
  .hero-in{grid-template-columns:1fr}
  .hero-art{height:340px;order:-1}
  .art-banner{height:260px;width:120px}
  .art-shirt{width:130px;height:130px;left:20px} .art-shirt i{font-size:84px} .art-shirt img{top:46px;width:30px}
  .art-cal{display:none}
  .detail,.cart-layout,.pay-band{grid-template-columns:1fr}
  .detail-media{position:static}
  .summary,.sticky{position:static}
  .features,.steps{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
  .promo{grid-template-columns:1fr}
  .promo-art{position:absolute;inset:0;opacity:.35}
  .pay-list{justify-content:flex-start}
  .qris-box{grid-template-columns:1fr}
  .qris-frame{max-width:300px;margin:auto}
  .cta-band{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  body{font-size:14px}
  .topbar .hide-sm,.hide-sm{display:none!important}
  .header-in{height:64px;gap:10px}
  .nav.open{top:64px}
  .brand b{font-size:1.05rem}
  .brand img{width:28px;height:auto}
  .search{display:none;position:absolute;top:64px;left:0;right:0;max-width:none;padding:10px 16px;background:#fff;border-bottom:1px solid var(--line)}
  .search.open{display:block}
  .search i{left:30px}
  .cat-grid{grid-template-columns:repeat(4,1fr);gap:8px}
  .cat-item{padding:10px 4px;border:0;background:transparent}
  .cat-item small{display:none}
  .cat-ico{width:52px;height:52px;margin-bottom:6px}
  .cat-item b{font-size:.74rem;font-weight:600}
  .product-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .pcard-body{padding:10px 12px 12px}
  .pcard-name{font-size:.9rem}
  .price{font-size:.95rem}
  .add-btn{width:36px;height:36px}
  .section{padding:40px 0}
  .hero-stats{gap:18px}
  .hero-stats b{font-size:1.1rem}
  .promo-text{padding:26px 22px}
  .form-grid,.choice-grid{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .cart-row{grid-template-columns:60px 1fr 36px;grid-template-areas:"img info del" "img qty sub"}
  .cart-row .thumb{grid-area:img;width:60px;height:60px}
  .cart-info{grid-area:info} .cart-row .qty{grid-area:qty;justify-self:start} .cart-sub{grid-area:sub} .cart-row .icon-btn{grid-area:del}
  .footer-grid{grid-template-columns:1fr}
  .pay-total{flex-direction:column}
  .countdown{text-align:left}
  .big-amount{font-size:1.6rem}
  .tl-step small{font-size:.65rem}
  .pay-band,.cta-band{padding:26px 22px}
  .wa-float span{display:none}
  .wa-float{padding:14px}
  .order-actions{grid-template-columns:1fr}
  .features{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;gap:24px}

  /* bottom navigation */
  body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .header-actions .cart-btn,.header-actions [data-toggle-nav]{display:none}
  .bottom-nav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:70;background:rgba(255,255,255,.97);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom));box-shadow:0 -10px 28px -16px rgba(16,24,40,.25)}
  .bottom-nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;padding:4px 0;font-size:.68rem;font-weight:600;color:var(--muted)}
  .bottom-nav a i{font-size:1.15rem;height:22px;display:grid;place-items:center}
  .bottom-nav a.active{color:var(--primary)}
  .bottom-nav a.active::before{content:"";position:absolute;top:-6px;width:26px;height:3px;border-radius:0 0 4px 4px;background:var(--primary)}
  .bottom-nav .bn-main i{width:50px;height:50px;margin-top:-26px;border-radius:50%;background:linear-gradient(135deg,var(--primary),#5b3cf0);color:#fff;border:4px solid #fff;box-shadow:0 10px 20px -8px rgba(30,122,79,.8);font-size:1.1rem}
  .bottom-nav .bn-main.active::before{display:none}
  .bn-badge{position:absolute;top:-24px;left:calc(50% + 10px);background:var(--pink);color:#fff;font-size:.65rem;min-width:19px;height:19px;border-radius:999px;display:grid;place-items:center;padding:0 5px;border:2px solid #fff}
  .wa-float{bottom:calc(86px + env(safe-area-inset-bottom));right:14px}
  .toast{bottom:calc(92px + env(safe-area-inset-bottom))}
  .site-footer{margin-top:20px}
}

/* ---------- logo dari pengaturan ---------- */
.brand .brand-mark{height:42px;width:auto;max-width:60px;object-fit:contain}
.brand-img-only img{height:48px;width:auto;max-width:240px;object-fit:contain}
.site-footer .brand-img-only img{background:#fff;padding:8px 12px;border-radius:12px;height:58px}
@media (max-width:640px){
  .brand .brand-mark{height:34px;max-width:48px}
  .brand-img-only img{height:38px;max-width:170px}
}
.art-banner img,.rollup img,.art-shirt img{object-fit:contain}

/* ==========================================================
   MARKETPLACE HOME + KARTU PRODUK + MOBILE
   ========================================================== */
.mt-md{margin-top:22px}
.btn-wide{min-width:260px}
.mp-top{padding:20px 0 4px;background:linear-gradient(180deg,#eaf0ff 0,var(--bg) 340px)}
.mp-hero{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}
.mp-block{margin-top:18px}
.mp-panel{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px}
.mp-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.mp-head h2{font-size:1.2rem;margin:0;display:flex;gap:8px;align-items:center}
.mp-head .link-more{font-size:.86rem}

/* slider */
.mp-slider{position:relative;border-radius:20px;overflow:hidden;box-shadow:var(--shadow)}
.mp-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;height:100%}
.mp-track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;min-height:320px;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;padding:32px 40px;position:relative;overflow:hidden;color:var(--text)}
.slide-text{position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.slide h1,.slide h2{font-size:clamp(1.6rem,3.4vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:0}
.slide p{margin:0;max-width:400px}
.slide-art{position:relative;height:260px}
.s-brand{background:linear-gradient(120deg,#fff 0,#f1f8f3 60%,#ffeef7)}
.s-brand .sa-blob{position:absolute;inset:6% 4% 0 10%;border-radius:45% 55% 50% 50%;background:conic-gradient(from 200deg,#e8457c,#f5b800,#8bc34a,#1e7a4f,#7c3aed,#e8457c);animation:morph 12s ease-in-out infinite}
.s-brand .art-banner{right:8%;top:0;width:120px;height:250px;padding:22px 8px}
.s-brand .art-banner b{font-size:.9rem}
.s-brand .art-shirt{left:8%;top:30px;width:130px;height:130px}
.s-brand .art-shirt i{font-size:84px}.s-brand .art-shirt img{top:46px;width:30px}
.s-brand .art-mug{left:34%;bottom:0;width:92px;height:92px}
.s-brand .art-mug i{font-size:44px}
.s-promo{background:linear-gradient(110deg,#fff0f7 0%,#ffd9ec 50%,#f6e3ff 100%)}
.s-promo h2{color:var(--ink)}
.s-promo p b{color:var(--pink);font-size:1.5rem}
.s-promo .slide-art::before{content:"";position:absolute;right:-40px;bottom:-90px;width:330px;height:330px;border-radius:50%;background:conic-gradient(#e8457c,#f5b800,#8bc34a,#7c3aed,#e8457c);opacity:.85}
.s-promo .rollup{bottom:0}
.s-promo .rollup.r1{right:150px}.s-promo .rollup.r2{right:30px}
.s-pay{background:radial-gradient(circle at 85% 20%,#e8457c66,transparent 45%),radial-gradient(circle at 15% 100%,#8bc34a66,transparent 45%),var(--navy);color:#cbd5e1}
.s-pay h2{color:#fff}
.pay-mini{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.pay-mini span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;font-weight:700;font-size:.78rem;padding:5px 10px;border-radius:8px}
.phone-qr{position:absolute;right:16%;top:0;width:160px;height:250px;background:#fff;border-radius:26px;border:7px solid #1e293b;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;box-shadow:0 30px 50px -20px rgba(0,0,0,.6)}
.pq-top{position:absolute;top:14px;left:12px;right:12px;text-align:center;background:linear-gradient(90deg,var(--pink),var(--primary));color:#fff;border-radius:8px;font-weight:800;letter-spacing:.15em;font-size:.8rem;padding:4px}
.phone-qr>i{font-size:86px;color:var(--navy);margin-top:16px}
.phone-qr small{font-size:.55rem;font-weight:800;color:var(--ink);letter-spacing:.06em;text-align:center;padding:0 8px}
.wa-bubble{position:absolute;left:4%;bottom:26px;background:#fff;color:var(--ink);font-weight:700;font-size:.8rem;padding:10px 14px;border-radius:14px 14px 14px 4px;box-shadow:var(--shadow-lg);display:flex;gap:8px;align-items:center;animation:float 5s ease-in-out infinite}
.wa-bubble i{color:#25d366;font-size:1.2rem}
.sl-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;background:rgba(255,255,255,.9);box-shadow:var(--shadow);cursor:pointer;z-index:3;opacity:0;transition:.2s;color:var(--ink)}
.mp-slider:hover .sl-nav{opacity:1}
.sl-nav.prev{left:12px}.sl-nav.next{right:12px}
.sl-dots{position:absolute;left:40px;bottom:14px;display:flex;gap:6px;z-index:3}
.sl-dots button{width:8px;height:8px;border-radius:999px;border:0;background:rgba(19,38,29,.25);cursor:pointer;padding:0;transition:.25s}
.sl-dots button.on{width:24px;background:var(--primary)}
.s-pay~.sl-dots button{background:rgba(255,255,255,.4)}
.mp-side{display:flex;flex-direction:column;gap:16px}
.side-card{flex:1;border-radius:20px;padding:20px;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;color:#fff;position:relative;overflow:hidden;transition:.2s}
.side-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.side-card small{display:block;opacity:.85;font-size:.78rem}
.side-card b{display:block;font-size:1.15rem;line-height:1.2;margin:4px 0 10px}
.side-card span{font-size:.82rem;font-weight:700;background:rgba(255,255,255,.2);padding:5px 10px;border-radius:999px}
.side-card>i{font-size:2.6rem;opacity:.9}
.sc-design{background:linear-gradient(135deg,#f59e0b,var(--pink))}
.sc-track{background:linear-gradient(135deg,var(--primary),#8bc34a)}
.trust{display:flex;justify-content:space-between;gap:10px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 18px;margin-top:16px;overflow-x:auto;scrollbar-width:none}
.trust span{display:flex;gap:8px;align-items:center;white-space:nowrap;font-weight:600;font-size:.85rem;color:var(--ink)}
.trust i{color:var(--c);font-size:1rem}

/* kategori ikon */
.mp-cats{display:grid;grid-template-columns:repeat(10,1fr);gap:8px}
.mp-cats a{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:10px 4px;border-radius:14px;color:var(--ink);transition:.15s}
.mp-cats a:hover{background:var(--bg)}
.mc-ico{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;font-size:1.35rem;color:#fff;background:var(--c);box-shadow:0 10px 18px -10px var(--c)}
.mc-ico.ghost{background:#eef1f6;color:#475569;box-shadow:none}
.mp-cats b{font-size:.78rem;font-weight:600;line-height:1.25}

/* horizontal scroll */
.hscroll{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 4*14px)/5);gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;scrollbar-width:thin}
.hs-item{scroll-snap-align:start;position:relative;display:flex}
.hs-item .pcard{flex:1}
.rank-tag{position:absolute;z-index:3;top:0;left:12px;background:linear-gradient(180deg,#f59e0b,var(--red));color:#fff;font-weight:800;font-size:.8rem;padding:6px 8px 9px;clip-path:polygon(0 0,100% 0,100% 100%,50% 82%,0 100%)}
.mp-panel.hot{background:linear-gradient(180deg,#fff3ee 0,#fff 90px)}
.mp-panel.hot .mp-head h2 i{color:#f59e0b}

.promo-strip{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;background:linear-gradient(90deg,#fff0f7,#fff7e6);border:1px dashed #f9a8d4;color:var(--ink)}
.ps-tag{background:var(--pink);color:#fff;font-weight:800;font-size:.72rem;padding:5px 10px;border-radius:8px;flex-shrink:0}
.ps-text{flex:1;font-size:.9rem}
.ps-text b{color:var(--pink)}
.ps-cta{font-weight:800;color:var(--pink);white-space:nowrap}

/* rekomendasi */
.reco-head{position:sticky;top:74px;z-index:20;background:rgba(246,248,252,.95);backdrop-filter:blur(10px);padding:14px 0 10px;margin-bottom:6px}
.reco-head h2{font-size:1.2rem;margin:0 0 10px}
.reco-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.reco-tabs::-webkit-scrollbar{display:none}
.reco-tabs button{white-space:nowrap;border:1px solid var(--line);background:#fff;padding:8px 16px;border-radius:999px;font-weight:600;font-size:.85rem;cursor:pointer;color:var(--text)}
.reco-tabs button.on{background:var(--primary);border-color:var(--primary);color:#fff}
.mp-grid{grid-template-columns:repeat(5,1fr)!important;gap:14px!important}
.reco-item{display:flex}.reco-item .pcard{flex:1}

/* cara pesan */
.how-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.how-steps>div{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:10px}
.how-steps span{width:52px;height:52px;border-radius:50%;background:var(--primary-50);color:var(--primary);display:grid;place-items:center;font-size:1.3rem;margin-bottom:6px}
.how-steps b{color:var(--ink);font-size:.9rem}
.how-steps small{color:var(--muted);font-size:.78rem}
.home .cta-band{margin-bottom:40px}

/* ---------- kartu produk (marketplace) ---------- */
.pcard{border-radius:14px;position:relative}
.pcard:hover{transform:translateY(-3px)}
.pcard-img{aspect-ratio:1/1}
.pc-tags{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:4px;align-items:flex-start;z-index:2}
.tag{font-size:.66rem;font-weight:800;padding:3px 7px;border-radius:6px;line-height:1.3}
.tag-star{background:var(--yellow);color:var(--navy)}
.tag-best{background:var(--red);color:#fff}
.tag-best,.tag-star{box-shadow:0 4px 10px -4px rgba(0,0,0,.25)}
.tag-bottom{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(19,38,29,.75));color:#fff;font-size:.7rem;font-weight:700;padding:16px 10px 6px}
.pcard-body{padding:10px 12px 12px;gap:3px}
.pcard-name{font-size:.9rem;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.pcard-spec{font-size:.74rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .price{font-size:1.02rem;color:var(--ink);margin-top:auto;padding-top:4px}
.hs-item .pc-tags{left:44px}
.cart-sub{white-space:nowrap}
.pcard .price em{font-size:.72rem}
.pcard-meta{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--muted);padding-right:40px}
.pcard-meta i{font-size:.7rem}
.pcard .add-btn{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:10px;font-size:.85rem}

/* bar mobile (detail/keranjang) default tersembunyi */
.buy-bar,.cart-bar{display:none}
.wa-btn{color:#16a34a}

/* ---------- responsive marketplace ---------- */
@media (max-width:1180px){
  .mp-grid{grid-template-columns:repeat(4,1fr)!important}
  .hscroll{grid-auto-columns:calc((100% - 3*14px)/4)}
  .mp-cats{grid-template-columns:repeat(5,1fr)}
}
@media (max-width:1080px){.reco-head{top:74px}}
@media (max-width:960px){
  .mp-hero{grid-template-columns:1fr}
  .mp-side{flex-direction:row}
  .mp-grid{grid-template-columns:repeat(3,1fr)!important}
  .hscroll{grid-auto-columns:calc((100% - 2*14px)/3)}
  .how-steps{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{background:#f3f5f9}
  /* header marketplace: logo + ikon, lalu kolom cari penuh */
  .topbar{display:none}
  .header-in{flex-wrap:wrap;height:auto;padding:10px 0 12px;gap:10px 8px}
  .header-in .brand{order:1}
  .header-actions{order:2}
  .search{display:block!important;position:static;order:3;flex:1 1 100%;max-width:none;padding:0;border:0;background:none}
  .search i{left:16px}
  .search input{padding:10px 14px 10px 42px;background:#f1f4f9;border-color:transparent}
  .header-actions .icon-btn{width:38px;height:38px}
  .wa-float{display:none}
  .reco-head{top:114px}

  .mp-top{padding:10px 0 0;background:linear-gradient(180deg,#fff 0,#f3f5f9 200px)}
  .mp-hero{gap:10px}
  .mp-slider{border-radius:16px}
  .slide{grid-template-columns:1.25fr 1fr;min-height:180px;padding:18px 16px 30px;gap:6px}
  .slide h1,.slide h2{font-size:1.32rem}
  .slide p{font-size:.78rem;line-height:1.4}
  .slide .btn{padding:7px 12px;font-size:.78rem;border-radius:9px}
  .slide .eyebrow{font-size:.66rem;padding:4px 9px}
  .slide-art{height:150px}
  .s-brand .art-banner{width:66px;height:140px;padding:12px 4px;right:2%}
  .s-brand .art-banner img{width:22px}.s-brand .art-banner b{font-size:.5rem}.s-brand .art-banner small{display:none}
  .s-brand .art-shirt{width:74px;height:74px;left:0;top:14px;border-radius:16px}
  .s-brand .art-shirt i{font-size:46px}.s-brand .art-shirt img{width:16px;top:26px}
  .s-brand .art-mug{width:52px;height:52px;left:30%;border-radius:14px}.s-brand .art-mug i{font-size:26px}
  .s-promo p b{font-size:1.05rem}
  .s-promo .rollup{width:60px;height:118px;padding-top:12px}
  .s-promo .rollup img{width:18px}.s-promo .rollup b{font-size:.45rem}
  .s-promo .rollup.r1{right:74px}.s-promo .rollup.r2{right:6px}
  .s-promo .slide-art::before{width:170px;height:170px;right:-30px;bottom:-60px}
  .phone-qr{width:92px;height:150px;right:6%;border-width:4px;border-radius:16px}
  .phone-qr>i{font-size:46px}.pq-top{font-size:.5rem;top:8px}.phone-qr small{font-size:.4rem}
  .wa-bubble{display:none}
  .pay-mini span{font-size:.62rem;padding:3px 6px}
  .sl-nav{display:none}
  .sl-dots{left:16px;bottom:10px}
  .mp-side{gap:10px}
  .side-card{padding:12px;border-radius:14px}
  .side-card b{font-size:.84rem;margin:2px 0 6px}
  .side-card small{font-size:.66rem}
  .side-card span{font-size:.66rem;padding:3px 8px}
  .side-card>i{font-size:1.5rem}
  .trust{margin-top:10px;padding:10px 12px;gap:16px;border-radius:12px}
  .trust span{font-size:.74rem}

  .mp-block{margin-top:10px}
  .container.mp-block{width:100%}
  .mp-panel{border-radius:0;border-left:0;border-right:0;padding:14px 14px}
  .mp-head{margin-bottom:10px}
  .mp-head h2{font-size:1.02rem}
  .mp-cats{grid-template-columns:repeat(5,1fr);gap:4px 2px}
  .mp-cats a{padding:6px 0;gap:6px}
  .mc-ico{width:46px;height:46px;border-radius:14px;font-size:1.1rem}
  .mp-cats b{font-size:.66rem}
  .hscroll{grid-auto-columns:42%;gap:10px;margin:0 -14px;padding:0 14px 4px;scroll-padding:0 14px}
  .promo-strip{margin:0 12px;padding:10px 12px;gap:10px}
  .ps-text{font-size:.76rem}
  .reco-head{padding:12px 0 8px}
  .reco-head h2{font-size:1.02rem;margin-bottom:8px}
  .reco-tabs button{padding:6px 12px;font-size:.78rem}
  .mp-grid{grid-template-columns:repeat(2,1fr)!important;gap:8px!important}
  .how-steps{gap:6px}
  .how-steps span{width:42px;height:42px;font-size:1.05rem}
  .how-steps b{font-size:.8rem}.how-steps small{font-size:.7rem}
  .home .cta-band{margin:0 12px 20px;padding:20px}
  .home .cta-band h2{font-size:1.15rem}

  .product-grid{gap:8px}
  .pcard{border-radius:12px}
  .pcard-body{padding:8px 10px 10px}
  .pcard-name{font-size:.8rem}
  .pcard-spec{font-size:.68rem}
  .pcard .price{font-size:.92rem}
  .pcard-meta{font-size:.68rem;padding-right:34px}
  .pcard .add-btn{width:30px;height:30px;right:8px;bottom:8px;border-radius:9px;font-size:.78rem}
  .tag{font-size:.6rem;padding:2px 6px}
  .tag-bottom{font-size:.62rem;padding:14px 8px 5px}

  /* halaman produk: bar beli menempel */
  .pdp .bottom-nav{display:none}
  .pdp .order-actions{display:none}
  .pdp{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .buy-bar{display:flex;align-items:center;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--line);padding:8px 12px calc(8px + env(safe-area-inset-bottom));box-shadow:0 -10px 28px -16px rgba(16,24,40,.3)}
  .bb-chat{display:flex;flex-direction:column;align-items:center;color:#16a34a;font-size:1.25rem;padding:0 4px}
  .bb-chat small{font-size:.6rem;font-weight:700;color:var(--muted)}
  .bb-est{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
  .bb-est small{font-size:.66rem;color:var(--muted)}
  .bb-est b{font-size:.95rem;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .buy-bar .btn{padding:11px 14px;font-size:.86rem}
  .detail{gap:16px}
  .detail-media .thumb-xl{border-radius:16px;aspect-ratio:4/3}

  /* keranjang: bar checkout di atas navigasi bawah */
  .has-cartbar{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
  .has-cartbar .summary{display:none}
  .cart-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;left:0;right:0;bottom:calc(62px + env(safe-area-inset-bottom));z-index:69;background:#fff;border-top:1px solid var(--line);padding:10px 14px;box-shadow:0 -10px 24px -18px rgba(16,24,40,.35)}
  .cart-bar small{display:block;font-size:.7rem;color:var(--muted)}
  .cart-bar b{font-size:1.1rem;color:var(--primary)}
}
@media (max-width:360px){.mp-cats b{font-size:.6rem}.hscroll{grid-auto-columns:46%}}

/* ==========================================================
   KEMUNING FLORIST — stok & tampilan bunga
   ========================================================== */
.stock-tag{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:800;padding:3px 10px;border-radius:999px;white-space:nowrap}
.st-ok{background:#dcfce7;color:#166534}.st-low{background:#fef3c7;color:#92400e}.st-out{background:#ffe4e6;color:#be123c}.st-po{background:#eef6f0;color:#1e7a4f}
.pcard.sold-out .pcard-img{filter:grayscale(.7);opacity:.75}
.tag-bottom.out{background:linear-gradient(transparent,rgba(190,18,60,.85))}
.add-btn.disabled{background:#cbd5e1;cursor:not-allowed}
.add-btn.disabled:hover{transform:none;background:#cbd5e1}
.art-bouquet i{font-size:96px!important;background:linear-gradient(160deg,var(--pink),var(--yellow));-webkit-background-clip:text;background-clip:text;color:transparent}
.s-brand .art-bouquet i{font-size:72px!important}
@media (max-width:640px){.s-brand .art-bouquet i{font-size:40px!important}}
.art-mug i{background:linear-gradient(135deg,var(--pink),#f97316)!important;-webkit-background-clip:text!important;background-clip:text!important}