/* ============================================================
   css/09-redesign.css  (dimuat paling akhir)
   Arah: label harga kedai. Kertas dan tinta, satu aksen vermilion,
   garis tegas, sudut kecil, label hemat berwarna stabilo.
   Token ada di css/01-base.css. Grid 2 / 3 / 4 kolom.
   ============================================================ */
:root{--gap:12px;--line-strong:var(--border-glow)}
@media (min-width:600px){:root{--gap:14px}}
@media (min-width:900px){:root{--gap:16px}}

body{font-family:'Plus Jakarta Sans',system-ui,sans-serif;background:var(--bg);color:var(--cream)}
:where(button,a,input,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ico{display:block;flex-shrink:0}
.logo,.hero h1,.cat-title,.bundle-group-title,.modal-title,.drawer-title,.welcome-title{font-family:'Familjen Grotesk','Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.01em}

/* ── HEADER ── */
header{background:var(--bg);border-bottom:2px solid var(--rule);padding:7px clamp(14px,3vw,24px);backdrop-filter:none;box-shadow:none}
@media (min-width:1200px){header{padding-inline:calc((100vw - 1120px)/2 + 24px)}}
.logo{font-size:20px;font-weight:700;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.logo small{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--cream-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.theme-toggle,.help-btn,.cart-btn,.hdr-nav button{height:40px;min-width:40px;border-radius:6px;font-family:inherit}
.theme-toggle,.help-btn,.hdr-nav button{background:transparent;border:1.5px solid var(--card-line);color:var(--cream);cursor:pointer}
.theme-toggle{display:flex;align-items:center;justify-content:center}
.help-btn{font-size:13px;letter-spacing:0;padding:0 12px}
.help-short{display:none;font-weight:800;font-size:16px}
.cart-btn{background:var(--caramel);color:var(--on-accent);padding:0 12px;gap:8px;border:1.5px solid var(--caramel)}
.cart-count{background:var(--on-accent);color:var(--caramel-light);border-radius:4px;min-width:20px}
body:not(.light-mode) .cart-count{color:var(--caramel)}
.hdr-nav{display:none;gap:8px}
.hdr-nav button{display:flex;align-items:center;gap:6px;padding:0 12px;font-weight:700;font-size:13px}
@media (max-width:480px){
  .logo small{display:none}
  .help-btn{padding:0;width:40px}
  .help-full{display:none}
  .help-short{display:inline}
  .header-actions{gap:6px}
}

/* ── HERO ── */
.hero{background:none;text-align:left;max-width:1120px;margin:0 auto;padding:32px clamp(16px,3vw,24px) 24px;position:relative}
.hero::before,.hero::after{display:none}
.hero h1{font-weight:700;font-size:clamp(34px,9.4vw,64px);line-height:1;color:var(--cream);text-shadow:none}
.hero h1 span{color:var(--accent-text);background:none;-webkit-text-fill-color:currentColor;text-shadow:none;animation:none}
.hero p{font-size:15px;line-height:1.5;color:var(--cream-dim);margin:14px 0 0;max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px;justify-content:flex-start}
.hero-btn{min-height:44px;padding:0 18px;border-radius:6px;font:700 14px/1 'Plus Jakarta Sans',system-ui,sans-serif;display:inline-flex;align-items:center;justify-content:center;box-shadow:none;animation:none;text-decoration:none}
.hero-btn-primary{background:var(--caramel);color:var(--on-accent);border:1.5px solid var(--caramel)}
.hero-btn-ghost{background:transparent;color:var(--cream);border:1.5px solid var(--card-line)}
.hero-pills{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;margin:18px 0 0;padding:0;justify-content:flex-start}
.pill{background:none;border:none;padding:0;font-size:13px;font-weight:600;color:var(--cream-dim)}
.pill+.pill::before{content:'';display:inline-block;width:4px;height:4px;background:currentColor;margin-right:16px;vertical-align:middle}
.hero-badge,.hero-floater,.hero-floaters{display:none}
@media (min-width:900px){.hero{padding-top:56px;padding-bottom:32px}.hero h1{font-size:76px}.hero p{font-size:17px}}

/* ── PENCARIAN, TAB, CHIP ── */
.search-wrap{background:var(--bg);backdrop-filter:none;box-shadow:none;padding-bottom:7px}
.search-box{background:var(--card);border:1.5px solid var(--card-line);border-radius:6px}
.search-ico{display:flex;color:var(--muted)}
.search-ico svg{width:20px;height:20px}
.tabs-wrap{background:var(--bg);backdrop-filter:none;box-shadow:none;border-bottom:2px solid var(--rule)}
.tabs-label-text{letter-spacing:0;text-transform:none;font-size:12px;color:var(--muted)}
.tabs-swipe-hint{animation:none}
.tab,.qfilter{min-height:40px;border-radius:6px;background:transparent;border:1.5px solid var(--card-line);color:var(--cream-dim);font-weight:600;box-shadow:none}
.tab.active,.qfilter.active{background:var(--cream);border-color:var(--cream);color:var(--bg);font-weight:700}

/* ── SECTION ── */
.menu-wrap{max-width:1120px;padding:8px clamp(16px,3vw,24px) 120px}
.cat-title{font-size:26px;font-weight:700;color:var(--cream);margin-top:40px;text-shadow:none;text-transform:none}
.cat-title::after{background:var(--rule);height:2px}
.new-section .cat-title{background:none;color:var(--cream);box-shadow:none;border:none;padding:0}
.bundle-note{font-size:13px;color:var(--cream-dim);margin:0 0 4px}
.bundle-note b{color:var(--cream)}
.bundle-group-title{font-size:20px;font-weight:700;color:var(--cream);margin:28px 0 14px}
.bundle-group-title span{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:13px;font-weight:600;color:var(--cream-dim);margin-left:8px;letter-spacing:0}
@media (min-width:900px){.cat-title{font-size:32px}}

/* ── GRID 2 / 3 / 4 ── */
.menu-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);row-gap:0;padding:0}
@media (min-width:600px){.menu-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.menu-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ── KARTU: 4 baris sejajar (foto, nama, harga, tombol) ── */
.menu-wrap .menu-card,.menu-wrap .bundle-card{
  display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;
  margin:0 0 var(--gap);padding:0;overflow:hidden;cursor:pointer;
  background:var(--card);border:1.5px solid var(--card-line);border-radius:8px;box-shadow:none;
  transition:border-color .15s,transform .12s;
}
@supports not (grid-template-rows:subgrid){
  .menu-wrap .menu-card,.menu-wrap .bundle-card{display:flex;flex-direction:column}
  .card-info{min-height:4.2em}.card-price{min-height:52px}.card-add-btn{margin-top:auto!important}
}
@media (hover:hover){
  .menu-wrap .menu-card:hover,.menu-wrap .bundle-card:hover{border-color:var(--caramel);transform:none}
  .card-add-btn:hover{background:var(--cream);color:var(--bg)}
}
.menu-wrap .menu-card:active,.menu-wrap .bundle-card:active{transform:scale(.98)}
.menu-wrap .menu-card.selected{border-color:var(--caramel);box-shadow:inset 0 0 0 1.5px var(--caramel)}
.menu-card.selected::after{display:none}

/* baris 1: foto */
.menu-wrap .menu-card .card-emoji,.menu-wrap .menu-card:hover .card-emoji,.menu-wrap .menu-card.selected .card-emoji,.bundle-photos{
  position:relative;aspect-ratio:5/4;width:100%;height:auto;padding:0;overflow:hidden;
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  border-bottom:1.5px solid var(--card-line);
}
.card-emoji::before,.card-emoji::after,.bundle-photos::before,.bundle-photos::after{display:none}
.menu-wrap .menu-card .card-emoji img{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);object-fit:contain;transform:none;filter:drop-shadow(0 3px 3px rgba(0,0,0,.2))}
.img-fallback{position:absolute;inset:0;align-items:center;justify-content:center;font:700 34px 'Familjen Grotesk',sans-serif;color:var(--muted)}
.bundle-photos img{position:relative;width:auto;height:86%;max-width:58%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.2));transition:none}
.bundle-photos.cups-2 img:nth-child(1){transform:rotate(-4deg);margin-right:-12px}
.bundle-photos.cups-2 img:nth-child(2){transform:rotate(4deg)}
.bundle-photos.cups-3 img{height:74%;max-width:40%;margin:0 -5px}
.bundle-photos.cups-3 img:nth-child(2){transform:translateY(-6px);z-index:1}
.signature-tag,.new-tag{position:absolute;top:8px;left:8px;z-index:2;background:var(--cream);color:var(--bg);font-size:11px;font-weight:800;line-height:1.2;padding:3px 7px;border-radius:4px;box-shadow:none;animation:none;letter-spacing:0;text-transform:none}
.new-tag{background:var(--caramel);color:var(--on-accent)}
.signature-tag+.new-tag{top:32px}

/* baris 2: nama + meta */
.card-info{padding:12px 12px 0;min-width:0}
.card-name{font-family:'Plus Jakarta Sans',system-ui,sans-serif;font-size:13px;line-height:1.3;font-weight:700;color:var(--cream);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;letter-spacing:0}
.size-badge,.size-badge-large,.stock-note{display:block;margin:4px 0 0;padding:0;background:none;border:none;border-radius:0;font-size:12px;font-weight:600;line-height:1.4;color:var(--cream-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:none;letter-spacing:0}

/* baris 3: harga */
.card-price{padding:8px 12px 0}
.price-normal{min-height:16px;font-size:12px;font-weight:500;line-height:16px;color:var(--muted);text-decoration:line-through;font-variant-numeric:tabular-nums}
.price-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.price-disc{font-size:17px;font-weight:800;line-height:1.2;color:var(--accent-text);font-variant-numeric:tabular-nums}
/* motif: label hemat (stabilo, miring, sudut kiri-atas dipotong) */
.save-tag,.bundle-save{display:inline-block;font-size:11.5px;font-weight:800;line-height:1.2;color:var(--sticker-ink);padding:3px 8px 3px 10px;background:var(--sticker);border-radius:3px;transform:rotate(-2deg);clip-path:polygon(7px 0,100% 0,100% 100%,0 100%,0 7px);margin:0}
.bundle-save{margin-top:4px}

/* baris 4: tombol */
.card-add-btn{margin:12px;min-height:44px;width:auto;padding:0 8px;border-radius:6px;background:transparent;border:1.5px solid var(--card-line);color:var(--cream);font:700 13px 'Plus Jakarta Sans',system-ui,sans-serif;display:flex;align-items:center;justify-content:center;box-shadow:none;transition:background .15s,color .15s}
.card-add-btn:active{transform:scale(.97)}

/* Custom Mix: satu-satunya kartu terbalik (tinta di mode terang, kertas di mode gelap) */
.menu-wrap .bundle-card.mix-card{background:var(--inv-bg);border-color:var(--inv-bg);color:var(--inv-fg)}
.mix-card .bundle-photos{background:color-mix(in srgb,var(--inv-fg) 12%,var(--inv-bg));border-bottom-color:color-mix(in srgb,var(--inv-fg) 30%,var(--inv-bg))}
.mix-card .card-name,.mix-card .mix-note{color:var(--inv-fg)}
.mix-card .mix-note{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.mix-card .price-disc{color:var(--inv-accent)}
.mix-card .card-add-btn{background:var(--caramel);border-color:var(--caramel);color:var(--on-accent)}
@media (hover:hover){.menu-wrap .bundle-card.mix-card:hover{border-color:var(--caramel)}.mix-card .card-add-btn:hover{background:var(--inv-fg);color:var(--inv-bg);border-color:var(--inv-fg)}}

/* ── FAVORIT ── */
.fav-heart{position:absolute;top:2px;right:2px;z-index:5;width:40px;height:40px;border:none;border-radius:6px;background:transparent;color:var(--cream-dim);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:color .15s}
.fav-heart.active{color:var(--caramel)}
@media (hover:hover){.fav-heart:hover{color:var(--cream)}.fav-heart.active:hover{color:var(--caramel)}}

/* ── SKELETON ── */
.skeleton-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
@media (min-width:600px){.skeleton-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:900px){.skeleton-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ── NAV BAWAH (HP/tablet) ── */
.bottom-nav,body.light-mode .bottom-nav{background:var(--bg);box-shadow:none;border-top:2px solid var(--rule)}
.bottom-nav-item{font-size:11px;min-height:56px}
.bottom-nav-icon{display:flex;transition:none}
.bottom-nav-item.active{color:var(--accent-text)}
.bottom-nav-item.active .bottom-nav-icon{transform:none}
.bottom-nav-item.active::before{background:var(--caramel);border-radius:0}
.bottom-nav-badge{border-color:var(--bg);background:var(--caramel);color:var(--on-accent)}
@media (min-width:900px){.bottom-nav{display:none}.hdr-nav{display:flex}}

/* ── MODAL, KERANJANG, MIX: datar ── */
.item-modal,.cart-drawer,.welcome-modal{box-shadow:none;border-radius:12px 12px 0 0}
.modal-image,.mix-tile-img{background:var(--surface)}
.modal-image img,.mix-tile-img img{filter:drop-shadow(0 3px 3px rgba(0,0,0,.2))}
.item-modal-close{width:40px;height:40px;border-radius:6px;background:var(--card);color:var(--cream);border:1.5px solid var(--card-line);box-shadow:none;font-weight:700}
.item-modal-close:active{background:var(--surface);transform:scale(.95)}
.modal-add-cart{box-shadow:none;border-radius:6px;background:var(--caramel);color:var(--on-accent)}
.modal-title{color:var(--cream);font-weight:700}
.modal-opt,.modal-opt.active{border-radius:6px}
.modal-opt.active{border-color:var(--caramel);background:var(--caramel-pale)}
.send-btn,.confirm-yes{background:#0F7A5C;color:#fff;box-shadow:none;border-radius:6px;letter-spacing:0}
.welcome-modal{background:var(--surface)}
.welcome-badge{background:var(--sticker);color:var(--sticker-ink);border-radius:4px;letter-spacing:0;text-transform:none}
.coffee-ring,.coffee-ring-2{display:none}
.welcome-cta{background:var(--caramel);color:var(--on-accent);border-radius:6px;box-shadow:none}

/* ── WADAH EMOJI LAMA YANG KOSONG ── */
.emo:empty,.confirm-emoji:empty,.fav-empty-emo:empty,.promo-syarat-icon:empty,.contact-banner-icon:empty,.promo-banner-icon:empty,.brand-selected-promo-icon:empty{display:none}

/* ── GERAK: hanya respons sentuhan ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ── BANNER PROMO ── */
.promo-banner{background:var(--card);border:1.5px solid var(--card-line);border-radius:6px;box-shadow:none;animation:none}
.promo-banner-text,.promo-banner-text b,.promo-banner-arrow{color:var(--cream)}
.promo-banner-text b{font-weight:800}
.promo-banner.bundle-banner{background:var(--sticker);border-color:var(--sticker-ink)}
.bundle-banner .promo-banner-text,.bundle-banner .promo-banner-text b,.bundle-banner .promo-banner-arrow{color:var(--sticker-ink)}

/* ── PEMILIH BRAND ── */
.brand-btn{border-radius:6px;background:var(--card);border:1.5px solid var(--card-line);padding-bottom:28px!important}
.brand-btn.active{border-color:var(--caramel)}
.brand-btn-tag{font-size:11px;letter-spacing:0;text-transform:none;border-radius:4px;bottom:7px}
.brand-btn.active .brand-btn-tag{background:transparent;color:inherit;border-color:currentColor}
.brand-switcher-hint{border-radius:4px;letter-spacing:0;text-transform:none}
.brand-switcher-label-text{letter-spacing:0;text-transform:none;font-size:13px;color:var(--cream-dim)}

/* ── IKON KATEGORI: satu set garis, satu gaya ── */
.tab{display:inline-flex;align-items:center;gap:7px}
.tab-ico{width:18px;height:18px;flex-shrink:0}
.cat-title{display:flex;align-items:center;gap:12px}
.cat-ico{display:flex;align-items:center;justify-content:center;width:40px;height:40px;flex-shrink:0;border:1.5px solid var(--card-line);border-radius:6px;background:var(--card);color:var(--accent-text)}
.cat-ico svg{width:22px;height:22px}
@media (min-width:900px){.cat-ico{width:46px;height:46px}.cat-ico svg{width:26px;height:26px}}

/* ── HERO: kolase foto cup asli ── */
.hero-art{display:flex;justify-content:flex-start;margin-top:26px;padding-left:6px}
.hero-tile{flex:0 0 auto;width:clamp(78px,23vw,150px);aspect-ratio:4/5;margin-left:-14px;background:var(--surface);border:1.5px solid var(--card-line);border-radius:8px;display:flex;align-items:center;justify-content:center;padding:6px}
.hero-tile:first-child{margin-left:0}
.hero-tile img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(0,0,0,.2))}
.hero-tile:nth-child(1){transform:rotate(-4deg)}
.hero-tile:nth-child(2){transform:rotate(2deg) translateY(-8px)}
.hero-tile:nth-child(3){transform:rotate(-2deg) translateY(4px)}
.hero-tile:nth-child(4){transform:rotate(4deg) translateY(-4px)}
@media (min-width:900px){
  .hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
  .hero-art{margin-top:0;justify-content:center}
  .hero-tile{margin-left:-18px}
}

/* ── Perbaikan hero ── */
.hero{overflow:visible}
.hero-cta{margin:20px 0 0;max-width:none}
.hero-btn{flex:0 1 auto}
@media (min-width:900px){
  .hero h1{font-size:clamp(46px,5.2vw,68px)}
  .hero-tile{width:clamp(100px,9vw,130px)}
}

/* ---- Tile hero: seragam, berwarna brand, logo kecil, chip harga, bisa diketuk ---- */
.hero-tile{position:relative;cursor:pointer;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;transition:scale .2s ease,box-shadow .2s ease}
.hero-tile-kk{padding-bottom:26px;background:linear-gradient(165deg,rgba(224,75,60,.22),rgba(224,75,60,.05)),var(--surface);border-color:rgba(224,75,60,.45)}
.hero-tile-fore{padding:0;overflow:hidden;background:linear-gradient(165deg,rgba(0,200,130,.24),rgba(0,200,130,.06)),var(--surface);border-color:rgba(0,170,110,.5)}
.hero-tile-fore > img:first-child{object-fit:cover;filter:none;border-radius:6px}
.hero-tile .hero-tile-logo{position:absolute;top:6px;left:6px;width:clamp(16px,6vw,24px);height:clamp(16px,6vw,24px);object-fit:cover;border-radius:6px;background:#000;box-shadow:0 1px 3px rgba(0,0,0,.35);filter:none}
/* chip harga: harga coret + harga jasdor */
.hero-tile-price{position:absolute;left:6px;right:6px;bottom:6px;display:flex;justify-content:center;align-items:baseline;gap:4px;padding:4px 3px;border-radius:5px;background:rgba(0,0,0,.76);color:#fff;font:700 11px/1 'Plus Jakarta Sans',system-ui,sans-serif;white-space:nowrap}
.hero-tile-price s{font-size:9.5px;font-weight:600;opacity:.72}
.hero-tile-price b{font-weight:800}
.hero-tile:hover{scale:1.05;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.hero-tile:active{scale:.97}
.hero-tile:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
/* animasi masuk bergantian (pakai properti translate/scale terpisah supaya rotasi tile tetap jalan) */
@keyframes heroTileIn{from{opacity:0;translate:0 22px}to{opacity:1;translate:0 0}}
.hero-art.is-ready .hero-tile{animation:heroTileIn .55s cubic-bezier(.2,.8,.2,1) both}
.hero-art.is-ready .hero-tile:nth-child(2){animation-delay:.08s}
.hero-art.is-ready .hero-tile:nth-child(3){animation-delay:.16s}
.hero-art.is-ready .hero-tile:nth-child(4){animation-delay:.24s}
@media (prefers-reduced-motion:reduce){
  .hero-art.is-ready .hero-tile{animation:none}
  .hero-tile{transition:none}
  .hero-tile:hover,.hero-tile:active{scale:1}
}
/* tombol CTA Fore + link testimoni di pil */
.hero-btn-fore{background:#0B7A55;color:#fff;border:1.5px solid #0B7A55}
.pill a{color:inherit;text-decoration:underline;text-underline-offset:3px;font-weight:700}
.hero-btn-fore{--i:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/%3E%3Cpath d='M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12'/%3E%3C/svg%3E")}
/* titik pemisah di depan tiap pil (aman kalau pil turun ke baris baru di HP) */
.pill::before,.pill+.pill::before{content:'';display:inline-block;width:4px;height:4px;background:currentColor;margin-right:8px;vertical-align:middle}