:root{
  --brand-start:#FFF1E6; /* pastel peach */
  --brand-end:#FFE5D0;   /* pastel peach deeper */
  --accent:#f97316;      /* orange */
  --accent-strong:#ea580c;
  --ink:#111827; --muted:#6b7280; --bg:#f7f8fa;
  --card:#ffffff; --border:#e5e7eb; --radius:16px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;color:var(--ink);background:var(--bg)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

.container{max-width:1080px;margin:auto;padding:16px}

/* Header */
.header{background:linear-gradient(180deg, var(--brand-start), var(--brand-end)); color:#7a3a10; padding-bottom:64px; position:sticky; top:0; z-index:10; position:relative}
.topbar{display:flex; align-items:center; justify-content:space-between; padding:12px 16px}
.brand{display:flex; align-items:center; gap:10px}
.brand img{width:28px;height:28px;border-radius:50%; background:#fff}
.brand strong{font-size:16px}
.actions{display:flex; gap:8px}
.btn-chip{display:inline-flex; align-items:center; gap:6px; padding:8px 10px; border-radius:999px; background:rgba(255,255,255,.85); color:#7a3a10; font-size:14px; border:1px solid #ffd6b3}
.btn-chip img{width:16px;height:16px}

.searchbar{display:flex; align-items:center; gap:8px; background:#fff; margin:0 16px 12px; padding:10px 12px; border-radius:999px; box-shadow:0 2px 12px rgba(0,0,0,.10)}
.searchbar img{width:18px;height:18px;opacity:.55}
.searchbar input{flex:1; border:0; outline:0; font-size:15px}

/* Banner promo */
.banner{background:#fff; margin:0 auto; width:calc(100% - 28px); position:absolute; left:50%; transform:translateX(-50%); bottom:-32px; padding:18px 20px; border-radius:20px; box-shadow:0 8px 24px rgba(0,0,0,.12); display:flex; align-items:center; gap:12px}
.banner .pill{display:inline-block;background:var(--accent); color:#fff; padding:6px 12px; border-radius:999px; font-weight:700; font-size:13px}
.banner .title{font-weight:800; font-size:20px; color:#0b5b2c}

/* Sections & Grid */
.section{padding:16px}
.section h2{margin:0 0 10px; font-size:18px}
.grid{display:grid; gap:12px}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:720px){.grid.cols-4{grid-template-columns:repeat(4,1fr)} .grid.cols-3{grid-template-columns:repeat(2,1fr)}}

.cat{background:var(--card); border:1px solid var(--border); border-radius:16px; text-align:center; padding:12px 8px; box-shadow:0 1px 6px rgba(0,0,0,.05)}
.cat .icon{width:40px;height:40px;border-radius:12px; display:grid; place-items:center; margin:0 auto 8px; color:var(--accent-strong); background:#ffedd5}
.cat .label{font-size:12px}

/* Cards */
.card{background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.06)}
.card .p{padding:12px}
.badge{font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); background:#f9fafb; color:#374151}
.price{font-weight:700}

/* Tab bar */
.footer-pad{height:64px}
.tabbar{position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--border); display:grid; grid-template-columns:repeat(4,1fr); padding:8px 4px; z-index:20}
.tabbar a{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; font-size:11px; color:#6b7280}
.tabbar a.active{color:var(--accent-strong)}
.tabbar img{width:22px;height:22px}

/* Pills & misc */
.badge-pill{display:inline-block; font-size:12px; background:#e6f9ee; color:#137a3a; padding:4px 8px; border-radius:999px}
.kicker{color:#0b5b2c; text-transform:uppercase; letter-spacing:.08em; font-size:12px; opacity:.9}

/* Venue auto slider */
.slider{position:relative; overflow:hidden; border-radius:16px;}
.slider-track{display:flex; transition:transform .5s ease;}
.slide{min-width:100%; position:relative;}
.slide img{width:100%; height:auto; display:block}
.dots{display:flex; gap:6px; margin-top:8px; align-items:center; justify-content:center}
.dot{width:6px;height:6px;border-radius:999px;background:#d1d5db}
.dot.active{background:#10b981}

/* Unggulan horizontal scroll */
.hscroll{display:grid; grid-auto-flow:column; grid-auto-columns:80%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px}
.hscroll::-webkit-scrollbar{display:none}
.hcard{scroll-snap-align:start; background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.06)}
.hcard img{width:100%; display:block}
.hcard .p{padding:12px}
.badge-promo{position:absolute; top:10px; left:10px; background:#ef4444; color:#fff; padding:6px 10px; border-radius:999px; font-size:12px; font-weight:700}
.hnav{display:flex; gap:8px; justify-content:flex-end; margin:8px 4px 0 0}
.hnav button{background:#fff; border:1px solid var(--border); width:36px; height:36px; border-radius:12px; display:grid; place-items:center; box-shadow:0 2px 10px rgba(0,0,0,.06)}
.hnav img{width:18px;height:18px}


/* ---- v6.1: fixed aspect ratio ---- */
.slide{aspect-ratio:16/9; overflow:hidden; border-radius:16px}
.slide img{width:100%; height:100%; object-fit:cover}
.media{position:relative; aspect-ratio:16/9; overflow:hidden}
.media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}

/* v6.2: card slider size + rating row */
.hscroll.card-lg{ grid-auto-columns: 72%; } /* approximate like screenshot */
.hcard .meta{display:flex; gap:10px; align-items:center; color:#6b7280; font-size:12px; margin-top:6px}
.meta .chip{display:inline-flex; align-items:center; gap:4px; padding:4px 8px; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:999px}
.meta img{width:14px;height:14px}

/* Red band section */
.band-red{background:#ef4444; color:#fff; border-radius:20px; padding:14px; overflow:hidden}
.band-red .title{font-weight:800; font-size:20px; line-height:1.2}
.band-red .sub{opacity:.95; margin:6px 0 10px}
.band-red .cta{display:inline-block; background:#fff; color:#ef4444; padding:10px 14px; border-radius:999px; font-weight:700; border:0}
.band-red .row{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:700px){.band-red .row{grid-template-columns:320px 1fr}}
.band-red .promo-card{background:#dc2626; border-radius:16px; padding:14px; box-shadow:0 4px 18px rgba(0,0,0,.15)}
.band-red .hscroll .hcard{background:#fff; border-color:#f1f5f9}
.band-red .hscroll .hcard .p{color:#111827}


/* v6.3: Menu Favorit full-bleed band with accent color */
.full-bleed{width:calc(100% + 32px); margin-left:-16px; margin-right:-16px; border-radius:0}
.band-accent{background:linear-gradient(180deg, var(--brand-start), var(--brand-end)); color:#7a3a10; padding:16px}
.band-accent .title{font-weight:800; font-size:20px; line-height:1.2}
.band-accent .sub{opacity:.95; margin:6px 0 10px}
.band-accent .cta{display:inline-block; background:#fff; color:var(--accent-strong); padding:10px 14px; border-radius:999px; font-weight:700; border:0}
.band-accent .row{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:700px){.band-accent .row{grid-template-columns:320px 1fr}}
.band-accent .promo-card{background:#ef4444; border-radius:16px; padding:14px; box-shadow:0 4px 18px rgba(0,0,0,.15); border:1px solid rgba(255,255,255,.12); color:#fff}
.band-accent .hscroll .hcard{background:#fff; border-color:#f1f5f9}
.band-accent .hscroll .hcard .p{color:#111827}

/* === subcategory grid (bubbles) === */
.subcats{display:grid; gap:14px; grid-template-columns:repeat(4,1fr)}
@media(max-width:720px){ .subcats{grid-template-columns:repeat(4,1fr)} }
.bubble{display:flex; flex-direction:column; align-items:center; gap:8px}
.bubble .avatar{width:68px;height:68px;border-radius:999px; background:#fff; border:1px solid var(--border); box-shadow:0 2px 8px rgba(0,0,0,.06); overflow:hidden; display:grid; place-items:center}
.bubble .avatar img{width:100%; height:100%; object-fit:cover}
.bubble .label{font-size:12px; text-align:center}

/* === product list row === */
.row-cards{display:grid; grid-auto-flow:column; grid-auto-columns:78%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; padding:8px 0 12px}
.row-cards::-webkit-scrollbar{display:none}
.pcard{scroll-snap-align:start; background:#fff; border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.06)}
.pcard .media{position:relative; aspect-ratio:1/1; overflow:hidden}
.pcard .media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.pcard .body{padding:10px}
.pcard strong{display:block}
.pcard .meta{display:flex; align-items:center; gap:6px; font-size:12px; color:#6b7280; margin-top:4px}
.btn-outline{display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px 12px; border-radius:999px; border:1.8px solid var(--accent-strong); color:var(--accent-strong); background:#fff; font-weight:700}
.star{width:14px;height:14px; display:inline-block; background:url('../icons/star.svg') center/contain no-repeat}

/* page header small */
.pagehead{display:flex; align-items:center; gap:10px; padding:8px 0}
.pagehead .back{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;border:1px solid var(--border); background:#fff}
.pagehead h1{font-size:18px; margin:0}

/* v-img-fallback */
.media .ph{display:grid;place-items:center;width:100%;height:100%;background:#f3f4f6;color:#6b7280;font-size:12px;text-align:center;padding:8px}
.avatar .ph{display:grid;place-items:center;width:100%;height:100%;background:#f3f4f6;color:#6b7280;font-size:11px;text-align:center;padding:6px}


/* gallery inside product card */
.media.gallery{position:relative; overflow:hidden; aspect-ratio:1/1}
.media.gallery .gwrap{display:flex; width:100%; height:100%; overflow-x:auto; scroll-snap-type:x mandatory}
.media.gallery .gwrap img{width:100%; height:100%; object-fit:cover; flex:0 0 100%; scroll-snap-align:center}
.media.gallery .gwrap::-webkit-scrollbar{display:none}
.media.gallery .gdots{position:absolute; left:50%; bottom:8px; transform:translateX(-50%); display:flex; gap:6px}
.media.gallery .gdots span{width:6px;height:6px;border-radius:50%; background:rgba(255,255,255,.7)}
/* sticky header to ensure back is clickable */
.pagehead{position:sticky; top:0; z-index:50; background:linear-gradient(180deg, var(--brand-start), var(--brand-end)); padding:8px 12px; border-bottom:1px solid var(--border)}
.pagehead .back{cursor:pointer}


/* spacing below header */
.pagehead + .section{ margin-top: 12px; }
/* section titles */
.sec-title{font-weight:700;font-size:16px;margin:0 12px 10px 12px;color:#0f172a}

/* vertical row card */
.list-col{display:flex;flex-direction:column;gap:10px;padding:0 12px}
.row-card{display:grid;grid-template-columns:1fr 112px; gap:12px; background:#fff;border-radius:14px;padding:12px; box-shadow: 0 1px 3px rgba(15,23,42,.06)}
.row-card .media{ width:112px; height:112px; border-radius:12px; overflow:hidden}
.row-card .media img{ width:100%; height:100%; object-fit:cover}
.row-card .title{font-weight:700; font-size:14px; color:#0f172a; margin-bottom:2px}
.row-card .desc{font-size:12px; color:#475569; line-height:1.35; max-height: 2.7em; overflow:hidden}
.row-card .meta{display:flex;align-items:center;gap:6px;font-size:12px;color:#64748b;margin:6px 0}
.row-card .price{font-weight:700; color:#0f172a; font-size:14px}
.badge{display:inline-flex;align-items:center;gap:6px;background:#fee; color:#ef4444; border-radius:999px; padding:3px 8px; font-size:12px}
.badge.green{background:#ecfdf5; color:#10b981}
/* related section grid */
.related{display:flex; overflow-x:auto; gap:10px; padding:0 12px}
.related .pcard{ min-width:200px; }

/* === Global Search styles === */
.search-results{position:relative;max-width:960px;margin:8px auto 0;}
.search-results .panel{position:absolute;z-index:50;left:0;right:0;max-height:420px;overflow:auto;
  background:#fff;border-radius:14px;box-shadow:0 12px 30px rgba(0,0,0,.15);padding:8px}
.search-results .group{padding:6px 10px;font-weight:600;color:#111827;font-size:13px;opacity:.9}
.search-item{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;cursor:pointer}
.search-item:hover,.search-item.active{background:#f3f4f6}
.search-item img{width:44px;height:44px;object-fit:cover;border-radius:10px;background:#f3f4f6}
.search-item .t{display:flex;flex-direction:column}
.search-item .t strong{font-size:14px;line-height:1.25}
.search-item .t span{font-size:12px;color:#6b7280}
.nores{padding:10px;color:#6b7280}