/* =====================================================================
   WARUNK MISHKA — CSS halaman toko (index.html)
   Dipindah apa adanya dari <style> di index.html. Urutan blok JANGAN diubah:
   aturan yang lebih bawah menimpa yang di atasnya.
   ===================================================================== */

/* ---------- blok 1 ---------- */
  :root{
    /* ===== MOSHI MOSHI LIL TOWN — apple orchard palette ===== */
    --cream:#FBF4DF;      /* kertas / tanah kebun */
    --panel:#FFFDF6;      /* kartu */
    --panel-2:#FDF0C8;    /* panel mentega */
    --apple:#C2200E;      /* merah apel */
    --apple-deep:#8E1608;
    --leaf:#6F8F16;       /* hijau daun */
    --sky:#7BB8D8;        /* baby blue */
    --sky-deep:#2A7298;   /* biru gelap, aman buat teks */
    --butter:#FFC72C;     /* kuning */
    --bark:#3B2712;       /* tinta / kulit pohon */
    --font:'Quicksand','Arial Narrow','Liberation Sans Narrow','Helvetica Neue',Arial,sans-serif;
    --font-logo:'Baloo 2','Arial Narrow',sans-serif;
    --font-cursive:'Caveat',cursive; /* buat judul/heading — vibe tulisan tangan kaya di pricelist */
    --bark-soft:#7A6141;

    /* versi R,G,B (tanpa tanda #) dari warna di atas — dipakai di rgba() biar shadow/garis/pattern ikut ganti pas tema diganti */
    --bark-rgb:59,39,18;
    --apple-rgb:194,32,14;
    --apple-deep-rgb:142,22,8;
    --leaf-rgb:111,143,22;
    --sky-rgb:123,184,216;
    --butter-rgb:255,199,44;
    --cream-rgb:251,244,223;

    /* aksen turunan: kilau pin struk, gradient kartu bukti, tint atas hero */
    --pin-highlight:#FF8A78;
    --ordercard-1:#FFD9E4;
    --ordercard-3:#FFE0BE;
    --hero-tint:#F1F6E2;

    /* alias — supaya semua aturan CSS lama tetap jalan */
    --bg:var(--cream);
    --pink:var(--apple);
    --cyan:var(--leaf);
    --gold:var(--butter);
    --ink:var(--bark);
    --ink-dim:var(--bark-soft);
  }
  /* ===== THEME: Pink Pastel (Baby Pink · Pastel Petal · Thistle · Icy Blue · Sky Blue) ===== */
  html[data-theme="pink"]{
    --cream:#FFE4EF; --panel:#FFF8FB; --panel-2:#FFC8DD;
    --apple:#D94F8A; --apple-deep:#A82F63;
    --leaf:#8F6BB0; --sky:#A2D2FF; --sky-deep:#3F77B5; --butter:#BDE0FE;
    --bark:#3D2A5C; --bark-soft:#7C6A9B;
    --bark-rgb:61,42,92; --apple-rgb:217,79,138; --apple-deep-rgb:168,47,99; --leaf-rgb:143,107,176;
    --sky-rgb:162,210,255; --butter-rgb:189,224,254; --cream-rgb:255,228,239;
    --pin-highlight:#FFAFCC; --ordercard-1:#FFC8DD; --ordercard-3:#BDE0FE;
    --hero-tint:#FFF0F6;
  }
  /* ===== THEME: Blue Cream (E3F1FB · A8D0EF · C1E4F3 · FFF9E6 · 99C3E4) ===== */
  html[data-theme="blue"]{
    --cream:#FFF9E6; --panel:#FFFEF8; --panel-2:#E3F1FB;
    --apple:#3F7FBF; --apple-deep:#2C5A87;
    --leaf:#5090C8; --sky:#A8D0EF; --sky-deep:#2F6AA3; --butter:#99C3E4;
    --bark:#2A5A8C; --bark-soft:#5F86AD;
    --bark-rgb:42,90,140; --apple-rgb:63,127,191; --apple-deep-rgb:44,90,135; --leaf-rgb:80,144,200;
    --sky-rgb:168,208,239; --butter-rgb:153,195,228; --cream-rgb:255,249,230;
    --pin-highlight:#A8D0EF; --ordercard-1:#C1E4F3; --ordercard-3:#E3F1FB;
    --hero-tint:#F3F9FD;
  }
  /* ===== THEME: Baby Pink (pastel cute) ===== */
  html[data-theme="kidcore"]{
    --cream:#FFFFFF; --panel:#FFFFFF; --panel-2:#FFF9C4;
    --apple:#D32F2F; --apple-deep:#B71C1C;
    --leaf:#5CB82A; --sky:#1A6DB5; --sky-deep:#0D47A1; --butter:#F5C200;
    --bark:#1A3A6B; --bark-soft:#4A78B8;
    --bark-rgb:26,58,107; --apple-rgb:211,47,47; --apple-deep-rgb:183,28,28; --leaf-rgb:92,184,42;
    --sky-rgb:26,109,181; --butter-rgb:245,194,0; --cream-rgb:255,255,255;
    --pin-highlight:#FF8A8A; --ordercard-1:#FFF9C4; --ordercard-3:#C8F5A0;
    --hero-tint:#FFFDE7;
  }
  html[data-theme="kidcore"] body{
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect width='40' height='40' fill='%23FFFFFF'/%3E%3Cpath d='M0 0h40M0 40h40M0 0v40M40 0v40' stroke='%231A3A6B' stroke-width='0.6' stroke-dasharray='2,4' opacity='0.18'/%3E%3C/svg%3E") repeat;
    font-family:'Nunito',sans-serif;
  }
  html[data-theme="kidcore"] h1,html[data-theme="kidcore"] h2,html[data-theme="kidcore"] h3,
  html[data-theme="kidcore"] .heading,html[data-theme="kidcore"] .logo,html[data-theme="kidcore"] .logo span{
    font-family:'Fredoka One',sans-serif !important;
  }
  html[data-theme="kidcore"] nav{
    background:#FFFFFF !important;border-bottom:4px solid #1A3A6B !important;backdrop-filter:none !important;
  }
  html[data-theme="kidcore"] .hero{
    background:#FFFFFF;border:4px solid #1A3A6B;border-radius:22px;box-shadow:6px 6px 0 #1A3A6B;margin:10px 10px 0;
  }
  html[data-theme="kidcore"] section,html[data-theme="kidcore"] .trust-strip,
  html[data-theme="kidcore"] #why-ssn,html[data-theme="kidcore"] #house-rules,html[data-theme="kidcore"] #how-it-works{
    background:#FFFFFF;border-radius:22px;border:3.5px solid #1A3A6B;box-shadow:6px 6px 0 #1A3A6B;
    margin-left:10px !important;margin-right:10px !important;margin-bottom:14px !important;padding:20px 18px 48px;
  }
  html[data-theme="kidcore"] .card{
    border:3.5px solid #1A3A6B !important;box-shadow:5px 5px 0 #1A3A6B !important;
    border-radius:18px !important;background:#FFFFFF !important;transition:transform .13s,box-shadow .13s;
  }
  html[data-theme="kidcore"] .card:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #1A3A6B !important;}
  html[data-theme="kidcore"] .panel-box{
    border:3.5px solid #1A3A6B !important;box-shadow:5px 5px 0 #1A3A6B !important;
    border-radius:18px !important;background:#FFFFFF !important;
  }
  html[data-theme="kidcore"] .trust-item{
    border:3.5px solid #1A3A6B !important;box-shadow:5px 5px 0 #1A3A6B !important;
    border-radius:16px !important;background:#FFF9C4 !important;transition:transform .13s,box-shadow .13s;
  }
  html[data-theme="kidcore"] .trust-item:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 #1A3A6B !important;}
  html[data-theme="kidcore"] .btn-primary{
    border:3px solid #1A3A6B !important;box-shadow:0 5px 0 #1A3A6B !important;
    border-radius:16px !important;font-family:'Fredoka One',sans-serif !important;
  }
  html[data-theme="kidcore"] .btn-primary:hover{transform:translateY(-2px);box-shadow:0 7px 0 #1A3A6B !important;}
  html[data-theme="kidcore"] .btn-primary:active{transform:translateY(3px);box-shadow:0 2px 0 #1A3A6B !important;}
  html[data-theme="kidcore"] .btn-ghost{border:3px solid #1A3A6B !important;box-shadow:0 5px 0 #1A3A6B !important;border-radius:16px !important;font-family:'Fredoka One',sans-serif !important;}
  html[data-theme="kidcore"] .btn-ghost:hover{transform:translateY(-2px);box-shadow:0 7px 0 #1A3A6B !important;}
  html[data-theme="kidcore"] .btn-ghost:active{transform:translateY(3px);box-shadow:0 2px 0 #1A3A6B !important;}
  html[data-theme="kidcore"] .marquee-wrap{
    background: #FFF9C4;
    border-top:4px solid #1A3A6B !important;border-bottom:4px solid #1A3A6B !important;
  }
  html[data-theme="kidcore"] .receipt{
    border:3.5px solid #1A3A6B !important;box-shadow:6px 6px 0 #1A3A6B !important;
    border-radius:18px !important;background:#FFFFFF !important;
  }
  html[data-theme="kidcore"] .checkout-grid > *{
    background:#FFFFFF !important;border-radius:20px !important;
    border:3.5px solid #1A3A6B !important;box-shadow:5px 5px 0 #1A3A6B !important;
  }
  html[data-theme="kidcore"] input,html[data-theme="kidcore"] select,html[data-theme="kidcore"] textarea{
    border-radius:12px !important;border:2.5px solid #1A3A6B !important;
  }
  html[data-theme="kidcore"] .bottom-bar{background:#FFFFFF !important;border-top:4px solid #1A3A6B !important;}
  #kc-confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999;display:none;}
  html[data-theme="kidcore"] #kc-confetti{display:block;}
  *{box-sizing:border-box;}
  html,body{max-width:100%; overflow-x:hidden;}
  html{scroll-behavior:smooth;}
  body{
    margin:0; color:var(--ink); font-family:var(--font);
    background:
      radial-gradient(circle at 12% 0%, rgba(var(--leaf-rgb),0.12), transparent 42%),
      radial-gradient(circle at 88% 8%, rgba(var(--apple-rgb),0.08), transparent 40%),
      radial-gradient(circle at 50% 98%, rgba(var(--leaf-rgb),0.14), transparent 45%),
      var(--bg);
  }
  h1,h2,h3,.heading{font-family:var(--font);}
  .mono{font-family:'JetBrains Mono',monospace;}
  a{color:inherit; text-decoration:none;}
  :focus-visible{outline:3px solid var(--gold); outline-offset:2px; border-radius:6px;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important;}
  }

  /* NAV */
  nav{position:sticky; top:0; z-index:40; backdrop-filter:blur(10px);
    background:rgba(var(--cream-rgb),0.9); border-bottom:2px solid rgba(var(--bark-rgb),0.14);}
  .nav-inner{max-width:1180px; margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between;}
  .nav-actions{display:flex; align-items:center; gap:8px;}
  .logo{font-size:20px; font-weight:800; font-family:var(--font); transition:opacity .15s;}
  .logo:hover{opacity:.75;}
  .logo span{color:var(--pink);}
  .cart-btn{
    display:flex; align-items:center; gap:8px; background:var(--panel); border:2px solid var(--ink);
    padding:9px 16px; border-radius:999px; font-size:14px; font-weight:600; cursor:pointer; color:var(--ink);
    box-shadow:0 3px 0 var(--ink);
  }
  .cart-btn:hover{border-color:var(--cyan); transform:translateY(1px); box-shadow:0 2px 0 var(--ink);}
  .cart-count{
    background:var(--pink); color:white; font-weight:800; font-size:11px; width:20px; height:20px;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
  }
  .tabs{display:flex; gap:22px; overflow-x:auto; padding-bottom:2px; margin-top:2px;}
  .tab-btn{
    background:none; border:none; color:var(--ink-dim); font-weight:700; font-size:14px; padding:12px 2px;
    white-space:nowrap; cursor:pointer; border-bottom:3px solid transparent; display:flex; align-items:center; gap:8px;
    font-family:var(--font);
  }
  .tab-btn.active{color:var(--ink); border-bottom-color:var(--tab-color, var(--pink));}
  .tab-dot{width:6px; height:6px; border-radius:50%; opacity:0; transform:scale(0); transition:.2s;}
  .tab-btn.active .tab-dot{opacity:1; transform:scale(1);}

  .view{display:none;}
  .view.active{display:block;}

  /* HERO */
  .hero{
    max-width:1180px; margin:0 auto; padding:56px 24px 26px; text-align:center; position:relative;
    background-image:
      linear-gradient(rgba(var(--cream-rgb),0.88), rgba(var(--cream-rgb),0.88)),
      repeating-linear-gradient(0deg, rgba(var(--butter-rgb),0.35) 0 2px, transparent 2px 34px),
      repeating-linear-gradient(90deg, rgba(var(--butter-rgb),0.35) 0 2px, transparent 2px 34px);
    border-radius:0 0 40px 40px;
    overflow:hidden;
  }
  .hero-sticker{position:absolute; font-size:32px; filter:drop-shadow(0 3px 0 rgba(var(--bark-rgb),0.15)); animation:bob 3.6s ease-in-out infinite;}
  .hero-sticker.s1{top:18px; left:6%; animation-delay:.2s;}
  .hero-sticker.s2{top:54px; right:8%; animation-delay:.9s;}
  .hero-sticker.s3{bottom:8px; left:12%; animation-delay:1.6s; font-size:24px;}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(-4deg);} 50%{transform:translateY(-10px) rotate(4deg);}}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px; background:var(--panel);
    border:2px solid var(--ink); padding:6px 16px; border-radius:999px;
    font-size:13px; color:var(--ink); font-weight:700; margin-bottom:20px;
    box-shadow:0 3px 0 var(--ink);
  }
  .eyebrow::before{content:"✦"; color:var(--pink); font-size:12px;}
  .hero h1{font-size:clamp(34px,5.5vw,58px); line-height:1.08; margin:0 0 16px; font-weight:800;}
  .hero h1 .accent{color:var(--pink);}
  .hero h1 .accent2{color:var(--cyan);}
  .hero p.sub{max-width:540px; margin:0 auto 28px; color:var(--ink-dim); font-size:17px; line-height:1.6;}
  .hero-ctas{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-bottom:6px;}
  .btn-primary{background:var(--pink); color:white; font-weight:700; padding:15px 30px; border-radius:14px;
    font-size:16px; border:2px solid var(--ink); box-shadow:0 5px 0 var(--ink); transition:transform .1s; display:inline-block;}
  .btn-primary:hover{transform:translateY(2px); box-shadow:0 3px 0 var(--ink);}
  .btn-ghost{background:var(--panel); border:2px solid var(--ink); color:var(--ink); font-weight:700;
    padding:13px 28px; border-radius:14px; font-size:16px; display:inline-block; box-shadow:0 5px 0 var(--ink); transition:transform .1s;}
  .btn-ghost:hover{transform:translateY(2px); box-shadow:0 3px 0 var(--ink); color:var(--cyan);}

  /* MARQUEE */
  .marquee-wrap{
    position:relative; width:100vw; margin-left:calc(-50vw + 50%); padding:16px 0;
    background-image:
      repeating-linear-gradient(0deg, transparent 0 9px, rgba(var(--apple-rgb),.28) 9px 18px),
      repeating-linear-gradient(90deg, transparent 0 9px, rgba(var(--apple-rgb),.28) 9px 18px),
      linear-gradient(var(--panel), var(--panel));
    border-top:3px dashed rgba(var(--bark-rgb),0.28); border-bottom:3px dashed rgba(var(--bark-rgb),0.28);
    transform:rotate(-1.1deg); margin-top:14px; margin-bottom:36px; overflow:hidden;
  }
  .marquee-track{display:flex; gap:16px; width:max-content; animation:scroll-left 28s linear infinite;}
  .marquee-wrap:hover .marquee-track{animation-play-state:paused;}
  @keyframes scroll-left{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  .channel-badge{display:flex; align-items:center; gap:10px; padding:9px 20px; border-radius:999px;
    font-weight:700; font-size:13px; white-space:nowrap; border:2px solid; background:var(--panel);
    font-family:var(--font); cursor:pointer; transition:transform .15s;}
  .channel-badge:hover, .channel-badge:active{transform:translateY(-2px) scale(1.03);}
  .channel-badge i.dot{width:9px; height:9px; border-radius:50%; display:inline-block;}

  .trust-strip{max-width:1180px; margin:0 auto 60px; padding:0 24px;
    display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:18px;}
  .trust-item{background:var(--panel); padding:20px; border-radius:16px; text-align:center; border:2px solid var(--ink);
    box-shadow:0 4px 0 var(--ink);}
  .trust-item .num{font-size:24px; font-weight:800; font-family:var(--font); color:var(--pink);}
  .trust-item .lbl{font-size:12px; color:var(--ink-dim); margin-top:4px;}

  section{max-width:1180px; margin:0 auto; padding:10px 24px 70px;}
  .section-head{text-align:center; margin-bottom:36px;}
  .section-head h2{font-size:clamp(24px,3.5vw,34px); margin:0 0 8px;}
  .section-head p{color:var(--ink-dim); font-size:15px;}

  .empty-state{text-align:center; padding:90px 20px; color:var(--ink-dim);}
  .empty-state .heading{font-size:22px; color:var(--ink); margin-bottom:8px;}

  .grid-products{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:22px;}
  .card{background:var(--panel); border-radius:22px; padding:24px; border:2px solid var(--ink);
    position:relative; transition:transform .15s, box-shadow .15s; box-shadow:0 5px 0 rgba(var(--bark-rgb),0.45);}
  .card:hover{transform:translateY(-4px); box-shadow:0 9px 0 rgba(var(--bark-rgb),0.45); border-color:var(--cyan);}
  .card .cat-tag{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700; margin-bottom:10px;}
  .card h3{font-size:19px; margin:0 0 4px; font-family:var(--font); font-weight:700;}
  .card .desc{color:var(--ink-dim); font-size:13px; margin-bottom:18px;}
  .card .price{font-size:22px; font-weight:800; font-family:var(--font); color:var(--ink);}
  .card .addbtn{width:100%; margin-top:16px; padding:11px; border-radius:12px; border:2px solid var(--ink);
    background:var(--panel-2); color:var(--ink); font-weight:700; font-size:14px; cursor:pointer;}
  .card .addbtn:hover{background:var(--pink); border-color:var(--pink); color:white;}


  /* CHECKOUT */
  .checkout-grid{display:grid; grid-template-columns:3fr 2fr; gap:28px;}
  @media (max-width:820px){.checkout-grid{grid-template-columns:1fr;}}
  .panel-box{background:var(--panel); border-radius:20px; padding:24px; border:2px solid var(--ink); margin-bottom:20px;
    box-shadow:0 5px 0 rgba(var(--bark-rgb),0.35);}
  .panel-box .title{font-weight:800; margin-bottom:16px; font-size:16px; font-family:var(--font);}
  input, textarea{
    width:100%; background:var(--bg); border:2px solid rgba(var(--bark-rgb),0.22); border-radius:12px;
    padding:13px 16px; color:var(--ink); font-family:inherit; font-size:14px; margin-bottom:10px;
  }
  input::placeholder, textarea::placeholder{color:var(--ink-dim);}
  input:focus, textarea:focus{border-color:var(--cyan); outline:none;}
  select{
    width:100%; background:var(--bg); border:2px solid rgba(var(--bark-rgb),0.22); border-radius:12px;
    padding:13px 40px 13px 16px; color:var(--ink); font-family:inherit; font-size:14px; margin-bottom:10px;
    appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1L7 7L13 1' stroke='%235B3A29' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat:no-repeat; background-position:right 16px center; cursor:pointer;
  }
  select:focus{border-color:var(--cyan); outline:none;}
  select option{background:var(--panel); color:var(--ink);}
  .device-field{
    width:100%; background:var(--bg); border:2px solid rgba(var(--bark-rgb),0.22); border-radius:12px;
    padding:13px 16px; color:var(--ink-dim); font-family:inherit; font-size:14px; margin-bottom:10px;
    cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:8px;
  }
  .device-field i{font-size:12px; color:var(--ink-dim); transition:transform .15s;}
  .device-field.filled span{color:var(--ink); font-weight:600;}
  .device-field:active i{transform:translateY(1px);}
  .pay-total{
    background:var(--gold); border:2px solid var(--ink); border-radius:14px; padding:11px 16px;
    font-size:13.5px; font-weight:700; margin-bottom:14px; box-shadow:0 3px 0 var(--ink);
  }
  .pay-total b{font-family:var(--font); font-size:19px;}
  .pay-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .pay-card{border:2px solid rgba(var(--bark-rgb),0.22); border-radius:14px; padding:14px; text-align:center;
    font-weight:700; font-size:14px; cursor:pointer; background:var(--panel-2);}
  .pay-card.selected{border-color:var(--pink); background:rgba(var(--apple-rgb),0.18); color:var(--pink);}
  .pay-card.wide{grid-column:1/3;}
  .payment-detail{margin-top:14px; padding:14px; border-radius:12px; background:var(--panel-2); font-size:13px; display:none; border:2px dashed rgba(var(--bark-rgb),0.25);}
  .payment-detail.show{display:block;}
  .checkout-items{font-size:14px; color:var(--ink-dim);}
  .checkout-items > div{display:flex; justify-content:space-between; padding:6px 0;}
  .dash{border-top:2px dashed rgba(var(--bark-rgb),0.22); margin-top:12px; padding-top:12px;}
  .make-order-btn{width:100%; margin-top:16px; padding:15px; border:2px solid var(--ink); border-radius:12px; font-weight:800;
    font-size:15px; cursor:pointer; background:var(--gold); color:var(--ink); box-shadow:0 5px 0 var(--ink); font-family:var(--font);}
  .make-order-btn:hover{transform:translateY(2px); box-shadow:0 3px 0 var(--ink);}
  .back-link{display:inline-flex; align-items:center; gap:8px; font-weight:700; color:var(--cyan); margin-bottom:20px; cursor:pointer; background:none; border:none; font-size:14px;}

  /* FILE UPLOAD */
  .file-upload-label{font-size:11px; letter-spacing:0.5px; color:var(--ink-dim); text-transform:uppercase; font-weight:700; display:block; margin-bottom:8px;}
  .file-upload-row{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
  .file-upload-btn{background:var(--gold); color:var(--ink); font-weight:800; padding:10px 18px; border-radius:10px;
    font-size:13px; cursor:pointer; border:2px solid var(--ink); white-space:nowrap;}
  .file-upload-name{font-size:12.5px; color:var(--ink-dim); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

  /* SUCCESS HEADER */
  .success-wrap{max-width:460px; margin:0 auto; padding:50px 24px 60px; text-align:center;}
  .success-check{width:64px; height:64px; border-radius:50%; background:#25D366; color:white; font-size:30px; border:2px solid var(--ink);
    display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
  .success-wrap h2{font-size:26px; margin:0 0 8px;}
  .success-wrap .note{color:var(--ink-dim); font-size:14px; margin-bottom:30px; line-height:1.6;}

  .card-block-label{font-size:12px; font-weight:800; letter-spacing:0.5px; text-transform:uppercase; color:var(--ink-dim);
    margin:26px 0 12px; text-align:left;}

  /* ORDER / BUKTI CARD (colorful, separate from receipt) */
  .order-card{
    border-radius:24px; padding:22px 20px; position:relative; overflow:hidden; text-align:left;
    background:linear-gradient(135deg, var(--ordercard-1) 0%, var(--panel) 55%, var(--ordercard-3) 100%);
    border:2px solid var(--ink); color:var(--ink);
    box-shadow:0 6px 0 rgba(var(--bark-rgb),0.35);
  }
  .order-card::before{
    content:"✦"; position:absolute; top:-10px; right:12px; font-size:70px; color:rgba(var(--butter-rgb),0.35);
  }
  .order-card .oc-top{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; position:relative;}
  .order-card .oc-brand{font-family:var(--font); font-weight:800; font-size:18px;}
  .order-card .oc-badge{
    background:var(--pink); color:white; font-weight:800; font-size:10.5px; padding:5px 12px;
    border-radius:999px; letter-spacing:0.5px; border:2px solid var(--ink);
  }
  .order-card .oc-id{font-family:'JetBrains Mono'; font-size:12px; color:var(--ink-dim); margin-bottom:22px; position:relative;}
  .order-card .oc-name{font-size:22px; font-weight:800; margin-bottom:4px; position:relative;}
  .order-card .oc-meta{font-size:13px; color:var(--ink); position:relative;}
  .order-card .oc-divider{border-top:2px dashed rgba(var(--bark-rgb),0.3); margin:13px 0; position:relative;}
  .order-card .oc-items{font-size:12.8px; color:var(--ink); position:relative;}
  .order-card .oc-note{font-size:12px; line-height:1.55; position:relative; color:var(--ink);}
  .order-card .oc-sec{font-size:11px; font-weight:800; letter-spacing:.6px; text-transform:uppercase;
    color:var(--ink-dim); margin-bottom:7px; position:relative;}
  .order-card .oc-row{display:flex; gap:10px; padding:2.5px 0; line-height:1.45;}
  .order-card .oc-row .k{color:var(--ink-dim); font-weight:700; flex:0 0 84px;}
  .order-card .oc-row .v{flex:1;}
  .order-card .oc-row .v{font-weight:700; word-break:break-word;}
  .order-card .oc-item{display:flex; justify-content:space-between; gap:10px; padding:2.5px 0; line-height:1.45; font-weight:700;}
  .order-card .oc-item span:last-child{color:var(--ink-dim); white-space:nowrap;}
  .order-card .oc-footer{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:13px; position:relative;}
  .order-card .oc-total{font-family:var(--font); font-weight:800; font-size:18px; color:var(--pink);}
  .order-card .oc-tag{font-size:10.5px; color:var(--ink-dim); line-height:1.4; text-align:left;}

  /* RECEIPT / STRUK — kertas garis dijepit pin di atas taplak gingham, vibes piknik cerah */
  .receipt{
    max-width:420px; margin:0 auto; position:relative;
    background-image:
      repeating-linear-gradient(0deg, transparent 0 11px, rgba(var(--apple-rgb),.30) 11px 22px),
      repeating-linear-gradient(90deg, transparent 0 11px, rgba(var(--apple-rgb),.30) 11px 22px),
      linear-gradient(var(--panel),var(--panel));
    border:2px solid var(--bark); border-radius:20px;
    padding:30px 18px 20px; box-shadow:0 6px 0 var(--bark);
    font-family:var(--font); font-size:12.3px; color:var(--ink); line-height:1.45; text-align:left;
  }
  .receipt .pin{
    position:absolute; top:-9px; left:50%; transform:translateX(-50%); z-index:3;
    width:19px; height:19px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, var(--pin-highlight), var(--apple) 58%, var(--apple-deep));
    box-shadow:0 3px 3px rgba(var(--bark-rgb),.35), inset -2px -2px 0 rgba(0,0,0,.10);
  }
  .receipt .corner-sticker{position:absolute; top:10px; right:14px; font-size:22px; transform:rotate(8deg); z-index:2;}
  .receipt .paper{
    position:relative; background:var(--panel); border-radius:6px 6px 12px 12px;
    padding:20px 16px 16px 26px; box-shadow:0 6px 16px rgba(var(--bark-rgb),.16);
    background-image:repeating-linear-gradient(180deg, transparent 0 23px, rgba(var(--sky-rgb),.32) 23px 24px);
    transform:rotate(-0.5deg);
  }
  .receipt .paper::before{content:""; position:absolute; top:0; bottom:0; left:17px; width:1.5px; background:rgba(var(--apple-rgb),.35);}
  .receipt .paper > *{position:relative;}
  .receipt .brand{font-weight:800; font-size:15px; color:var(--apple-deep); letter-spacing:.2px;}
  .receipt .sub{color:var(--ink-dim); font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; margin-top:1px;}
  .receipt .oid{color:var(--ink-dim); font-size:10px; margin-top:3px; font-family:'JetBrains Mono';}
  .receipt .row{display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:1.5px 0;}
  .receipt .row .lbl{color:var(--ink-dim); flex:0 0 auto;}
  .receipt .row .val{text-align:right; word-break:break-word;}
  .receipt .row.item .val{white-space:nowrap;}
  .receipt .sec{color:var(--ink-dim); font-size:9.5px; letter-spacing:.6px; margin:8px 0 4px; text-transform:uppercase;}
  .receipt .dash{border-top:1px dashed rgba(var(--bark-rgb),0.22); margin-top:8px; padding-top:8px;}
  .receipt .thanks{color:var(--ink-dim); font-size:10px; margin-top:9px; line-height:1.55;}

  .download-block{max-width:420px; margin:14px auto 0; display:flex; flex-direction:column; gap:10px;}
  .receipt-actions{max-width:420px; margin:8px auto 40px; display:flex; flex-direction:column; gap:12px;}
  .wa-send-btn{background:#25D366; color:white; font-weight:800; padding:15px; border:2px solid var(--ink); border-radius:12px;
    font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 4px 0 var(--ink);}
  .download-btn{background:var(--panel); color:var(--ink); font-weight:700; padding:13px; border:2px solid rgba(var(--bark-rgb),0.25);
    border-radius:12px; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;}
  .download-btn:hover{border-color:var(--cyan); color:var(--cyan);}
  .again-btn{background:transparent; border:2px solid rgba(var(--bark-rgb),0.3); color:var(--ink); font-weight:700;
    padding:13px; border-radius:12px; font-size:15px; cursor:pointer;}

  /* CART DRAWER */
  #overlay{position:fixed; inset:0; background:rgba(var(--bark-rgb),0.35); z-index:45; opacity:0; pointer-events:none; transition:opacity .25s;}
  #overlay.open{opacity:1; pointer-events:auto;}
  #cart-drawer{position:fixed; top:0; right:0; bottom:0; height:100vh; height:100dvh; max-height:100%;
    width:100%; max-width:380px; background:var(--panel);
    z-index:50; box-shadow:-10px 0 30px rgba(var(--bark-rgb),0.25); transform:translateX(100%); transition:transform .3s ease;
    display:flex; flex-direction:column; border-left:2px solid var(--ink);}
  #cart-drawer.open{transform:translateX(0);}
  .drawer-head{order:0; flex:0 0 auto; padding:20px; border-bottom:2px dashed rgba(var(--bark-rgb),0.2); display:flex; justify-content:space-between; align-items:center;}
  .drawer-head .title{font-weight:800; font-size:17px; font-family:var(--font);}
  .close-btn{width:32px; height:32px; border-radius:50%; background:var(--panel-2); border:2px solid var(--ink); color:var(--ink);
    display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .drawer-items{order:2; flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:18px 20px 28px; display:flex; flex-direction:column; gap:14px;}
  .cart-line{display:flex; justify-content:space-between; align-items:center; gap:10px;}
  .cart-line .name{font-weight:700; font-size:13.5px;}
  .cart-line .p{font-size:12px; color:var(--ink-dim);}
  .qty-ctrl{display:flex; align-items:center; gap:8px;}
  .qty-ctrl button{width:26px; height:26px; border-radius:50%; border:2px solid var(--ink);
    background:var(--panel-2); color:var(--ink); cursor:pointer; font-weight:700;}
  .drawer-foot{order:1; flex:0 0 auto; padding:16px 20px; background:var(--panel-2);
    border-bottom:2px dashed rgba(var(--bark-rgb),0.2);}
  .drawer-foot .total-row{display:flex; justify-content:space-between; font-weight:800; font-size:17px; margin-bottom:12px;}
  .checkout-go-btn{width:100%; background:var(--pink); color:white; font-weight:800; padding:14px; border:2px solid var(--ink);
    border-radius:12px; font-size:15px; cursor:pointer; box-shadow:0 4px 0 var(--ink); font-family:var(--font);}
  .empty-cart{text-align:center; color:var(--ink-dim); font-size:14px; padding:40px 0;}

  /* satu ukuran & satu warna buat semua tombol kontak (TG, X, WA), biar seragam kayak 1 keluarga */
  .contact-float{position:fixed; bottom:22px; right:22px; z-index:55; display:flex; flex-direction:column; align-items:center; gap:9px;}
  .contact-float .contact-btn, .wa-float{
    width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:18px; color:white; background:var(--apple-deep); border:2px solid var(--ink);
    box-shadow:0 4px 10px rgba(var(--bark-rgb),0.28); text-decoration:none;
  }
  .wa-float{animation:pulse-wa 2.4s ease-in-out infinite;}
  @keyframes pulse-wa{0%,100%{transform:scale(1);} 50%{transform:scale(1.08);}}


  .owner-card{display:inline-flex; align-items:center; gap:12px; margin:0 auto 18px; padding:8px 18px 8px 8px; text-decoration:none; color:var(--ink); background:var(--panel); border:2px solid var(--ink); border-radius:999px; box-shadow:0 4px 0 rgba(var(--bark-rgb),.35); text-align:left;}
  .owner-card img{width:54px; height:54px; object-fit:contain; display:block;}
  .owner-card b{display:block; font-size:14px;}
  .owner-card small{display:block; font-size:12px; color:var(--ink-dim); font-weight:600;}
  footer{text-align:center; padding:30px 24px 50px; color:var(--ink-dim); font-size:13px;
    border-top:2px dashed rgba(var(--bark-rgb),0.15);}


  /* ===== BRAND (DAFTAR APLIKASI) ===== */
  .grid-brands{display:grid; grid-template-columns:repeat(auto-fill,minmax(215px,1fr)); gap:18px;}
  .brand-card{
    background:var(--panel); border:2px solid var(--ink); border-radius:20px; padding:20px 18px;
    box-shadow:0 5px 0 rgba(var(--bark-rgb),0.45); cursor:pointer; text-align:left; width:100%;
    font-family:var(--font); color:var(--ink); transition:transform .15s, box-shadow .15s;
    display:flex; flex-direction:column; gap:6px;
  }
  .brand-card:hover{transform:translateY(-4px); box-shadow:0 9px 0 rgba(var(--bark-rgb),0.45); border-color:var(--cyan);}
  .brand-avatar{
    width:42px; height:42px; border-radius:14px; border:2px solid var(--ink); display:flex;
    align-items:center; justify-content:center; font-family:var(--font); font-weight:800; font-size:18px;
    color:#fff; margin-bottom:6px;
  }
  .brand-card .b-name{font-family:var(--font); font-weight:700; font-size:18px; line-height:1.2;}
  .brand-card .b-meta{font-size:12px; color:var(--ink-dim); font-weight:600;}
  .brand-card .b-from{font-size:13px; color:var(--ink-dim); margin-top:2px;}
  .brand-card .b-from b{font-family:var(--font); font-size:17px; color:var(--ink);}
  .brand-card .b-cta{
    margin-top:12px; font-size:12.5px; font-weight:800; color:var(--cyan);
    display:flex; align-items:center; gap:6px;
  }

  /* ===== DETAIL VARIAN (DURASI + HARGA) ===== */
  #brand-detail{display:none;}
  #brand-detail.show{display:block; animation:fadeUp .22s ease;}
  @keyframes fadeUp{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
  .detail-head{
    display:flex; align-items:center; gap:14px; background:var(--panel); border:2px solid var(--ink);
    border-radius:20px; padding:18px; box-shadow:0 5px 0 rgba(var(--bark-rgb),0.35); margin-bottom:18px;
  }
  .detail-head .b-name{font-family:var(--font); font-weight:800; font-size:22px; margin:0;}
  .detail-head .b-sub{font-size:12.5px; color:var(--ink-dim); font-weight:600;}
  .variant-list{display:grid; gap:12px;}
  .variant-row{
    background:var(--panel); border:2px solid var(--ink); border-radius:16px; padding:14px 16px;
    box-shadow:0 4px 0 rgba(var(--bark-rgb),0.30); display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  }
  .variant-row .v-info{flex:1 1 190px; min-width:0;}
  .variant-row .v-name{font-weight:700; font-size:15px; font-family:var(--font);}
  .v-chip{
    display:inline-flex; align-items:center; gap:6px; font-size:11.5px; font-weight:800; margin-top:6px;
    background:var(--panel-2); border:2px solid rgba(var(--bark-rgb),0.22); border-radius:999px; padding:3px 11px; color:var(--ink);
  }
  .variant-row .v-price{font-family:var(--font); font-weight:800; font-size:19px; white-space:nowrap;}
  .variant-row .v-add{
    border:2px solid var(--ink); background:var(--panel-2); color:var(--ink); font-weight:800; font-size:13px;
    padding:9px 16px; border-radius:12px; cursor:pointer; white-space:nowrap; font-family:var(--font);
  }
  .variant-row .v-add:hover{background:var(--pink); border-color:var(--pink); color:#fff;}
  .variant-row.is-habis{opacity:.55; filter:grayscale(.5);}
  .v-habis-badge{
    border:2px dashed var(--apple-deep); color:var(--apple-deep); font-weight:800; font-size:12px;
    padding:8px 14px; border-radius:12px; white-space:nowrap; font-family:var(--font);
  }
  @media (max-width:520px){
    .variant-row{gap:10px;}
    .variant-row .v-price{flex:1 1 auto;}
    .variant-row .v-add{flex:0 0 auto;}
  }

  /* ===== BUNDLE (ALL GOODIES) ===== */
  .grid-bundles{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px;}
  .bundle-card{
    background:var(--panel); border:2px solid var(--ink); border-radius:22px; padding:24px;
    box-shadow:0 5px 0 rgba(var(--bark-rgb),0.45); position:relative; display:flex; flex-direction:column;
    transition:transform .15s, box-shadow .15s;
  }
  .bundle-card:hover{transform:translateY(-4px); box-shadow:0 9px 0 rgba(var(--bark-rgb),0.45); border-color:var(--cyan);}
  .bundle-card .ribbon{
    position:absolute; top:-13px; right:18px; background:var(--pink); color:#fff; border:2px solid var(--ink);
    border-radius:999px; padding:3px 13px; font-size:11.5px; font-weight:800; box-shadow:0 3px 0 var(--ink);
  }
  .bundle-card .b-emoji{font-size:30px; line-height:1;}
  .bundle-card h3{font-size:20px; margin:10px 0 4px; font-family:var(--font);}
  .bundle-card .b-tag{font-size:12.5px; color:var(--ink-dim); font-weight:600; margin-bottom:14px;}
  .bundle-items{
    list-style:none; padding:0; margin:0 0 16px; display:grid; gap:7px; font-size:13.5px;
    border-top:2px dashed rgba(var(--bark-rgb),0.22); border-bottom:2px dashed rgba(var(--bark-rgb),0.22); padding:14px 0;
  }
  .bundle-items li{display:flex; align-items:flex-start; gap:8px; line-height:1.4;}
  .bundle-items li i{color:var(--cyan); font-size:11px; margin-top:4px;}
  .bundle-price-row{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-top:auto;}
  .bundle-price-row .old{font-size:14px; color:var(--ink-dim); text-decoration:line-through;}
  .bundle-price-row .now{font-family:var(--font); font-weight:800; font-size:26px; color:var(--ink);}
  .save-chip{
    display:inline-block; margin-top:8px; background:rgba(79,174,141,0.18); border:2px solid var(--cyan);
    color:#2F7A61; border-radius:999px; padding:3px 12px; font-size:11.5px; font-weight:800;
  }
  .bundle-card .addbtn{
    width:100%; margin-top:16px; padding:12px; border-radius:12px; border:2px solid var(--ink);
    background:var(--gold); color:var(--ink); font-weight:800; font-size:14px; cursor:pointer;
    font-family:var(--font); box-shadow:0 4px 0 var(--ink);
  }
  .bundle-card .addbtn:hover{transform:translateY(2px); box-shadow:0 2px 0 var(--ink);}
  .bundle-note{
    max-width:640px; margin:26px auto 0; text-align:center; font-size:13px; color:var(--ink-dim);
    background:var(--panel-2); border:2px dashed rgba(var(--bark-rgb),0.25); border-radius:16px; padding:14px 18px; line-height:1.6;
  }

  /* ===== BLOK HARIAN / BULANAN ===== */
  .dur-block{margin-bottom:26px;}
  .dur-title{
    display:flex; align-items:center; gap:9px; font-family:var(--font); font-weight:800; font-size:17px;
    background:var(--panel-2); border:2px solid var(--ink); border-radius:14px; padding:10px 16px;
    box-shadow:0 4px 0 rgba(var(--bark-rgb),0.30); margin-bottom:14px;
  }
  .dur-title i{color:var(--pink);}
  .plan-group{margin-bottom:16px;}
  .plan-name{
    font-size:12.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--ink-dim);
    margin:0 0 8px 4px;
  }

  /* ===== MODAL TEMA (ganti alert polos) ===== */
  #ssn-modal-wrap{
    position:fixed; inset:0; z-index:70; display:none; align-items:center; justify-content:center; padding:24px;
    background:rgba(var(--bark-rgb),0.40); backdrop-filter:blur(3px);
  }
  #ssn-modal-wrap.open{display:flex;}
  .ssn-modal{
    background:var(--panel); border:2px solid var(--ink); border-radius:24px; padding:26px 24px 22px;
    max-width:340px; width:100%; text-align:center; box-shadow:0 8px 0 var(--ink);
    animation:popIn .22s cubic-bezier(.3,1.4,.5,1);
  }
  @keyframes popIn{from{opacity:0; transform:scale(.9) translateY(10px);} to{opacity:1; transform:none;}}
  /* popup sambutan: cara pesan + S&K (muncul sekali di kunjungan pertama) */
  #welcome-wrap{position:fixed; inset:0; z-index:72; display:none; align-items:center; justify-content:center; padding:18px;
    background:rgba(var(--bark-rgb),0.45); backdrop-filter:blur(3px);}
  #welcome-wrap.open{display:flex;}
  .welcome-modal{max-width:440px !important; text-align:left; max-height:88vh; display:flex; flex-direction:column;}
  .welcome-modal .m-emoji, .welcome-modal .m-title{text-align:center;}
  .wl-tabs{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:6px 0 12px;}
  .wl-tabs button{padding:10px 8px; border-radius:999px; border:2px solid var(--ink); background:transparent; color:var(--ink); font-family:inherit; font-weight:800; font-size:13.5px; cursor:pointer;}
  .wl-tabs button.on{background:var(--pink); color:#fff;}
  .wl-body{overflow-y:auto; font-size:14px; line-height:1.6; color:var(--ink); margin-bottom:14px; padding-right:4px;}
  .wl-body ol{margin:0; padding-left:22px;} .wl-body ol li{margin:0 0 8px;}
  .wl-body ul{list-style:none; margin:6px 0 10px; padding:0;} .wl-body ul li{margin:0 0 6px;}
  .wl-note{font-size:13px; color:var(--ink-dim); margin:0 0 8px;}
  .ssn-modal .m-emoji{font-size:40px; line-height:1; margin-bottom:10px;}
  .ssn-modal .m-title{font-family:var(--font); font-weight:800; font-size:20px; margin-bottom:6px;}
  .ssn-modal .m-text{font-size:14px; color:var(--ink-dim); line-height:1.6; margin-bottom:20px;}
  .ssn-modal .m-btn{
    width:100%; background:var(--pink); color:#fff; border:2px solid var(--ink); border-radius:14px;
    padding:13px; font-weight:800; font-size:15px; cursor:pointer; box-shadow:0 4px 0 var(--ink);
    font-family:var(--font);
  }
  .ssn-modal .m-btn:hover{transform:translateY(2px); box-shadow:0 2px 0 var(--ink);}

  /* ===== POPUP PILIH DEVICE ===== */
  #device-modal-wrap{
    position:fixed; inset:0; z-index:70; display:none; align-items:flex-end; justify-content:center;
    background:rgba(var(--bark-rgb),0.40); backdrop-filter:blur(3px);
  }
  #device-modal-wrap.open{display:flex;}
  .device-modal{
    background:var(--panel); border:2px solid var(--ink); border-radius:24px 24px 0 0;
    padding:22px 22px 26px; max-width:420px; width:100%; text-align:left;
    box-shadow:0 -4px 0 rgba(var(--bark-rgb),.12);
    animation:slideUp .22s cubic-bezier(.3,1.4,.5,1);
  }
  @media (min-width:640px){
    #device-modal-wrap{align-items:center;}
    .device-modal{border-radius:24px; box-shadow:0 8px 0 var(--ink); animation:popIn .22s cubic-bezier(.3,1.4,.5,1);}
  }
  @keyframes slideUp{from{opacity:0; transform:translateY(24px);} to{opacity:1; transform:none;}}
  .device-modal .dm-title{font-family:var(--font); font-weight:800; font-size:17px; margin-bottom:14px;}
  .dm-options{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  .dm-opt{
    display:flex; align-items:center; gap:9px; background:var(--panel-2); border:2px solid rgba(var(--bark-rgb),0.22);
    border-radius:14px; padding:13px 14px; font-weight:700; font-size:14px; color:var(--ink);
    cursor:pointer; font-family:var(--font); box-shadow:0 3px 0 rgba(var(--bark-rgb),0.18);
  }
  .dm-opt i{color:var(--pink); font-size:15px;}
  .dm-opt:hover, .dm-opt:active{border-color:var(--pink); transform:translateY(2px); box-shadow:0 1px 0 rgba(var(--bark-rgb),0.18);}
  .dm-cancel{
    width:100%; margin-top:12px; background:none; border:none; color:var(--ink-dim); font-weight:700;
    font-size:13.5px; padding:8px; cursor:pointer; font-family:var(--font);
  }

  /* ===== HERO SCRIPT (wording toko) ===== */
  .hero-script{
    max-width:600px; margin:0 auto 18px; padding:0 6px; font-size:15px; line-height:1.95;
    color:var(--ink); word-break:break-word;
  }
  .hero-script .script-tail{display:block; margin-top:8px; font-size:13px; color:var(--ink-dim); font-weight:600;}
  .hero-open{font-size:13px; color:var(--ink-dim); margin:0 0 18px; font-weight:600;}

  /* ===== STEP + WAJIB ===== */
  .step-num{
    display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border-radius:50%;
    background:var(--pink); color:#fff; font-size:12px; font-weight:800; border:2px solid var(--ink); margin-right:8px;
  }
  .req-chip{
    display:inline-block; background:var(--pink); color:#fff; border:2px solid var(--ink); border-radius:999px;
    font-size:10px; font-weight:800; padding:2px 9px; margin-left:8px; letter-spacing:.4px; vertical-align:middle;
  }
  .upload-box{
    border:2px dashed rgba(var(--apple-rgb),0.8); border-radius:16px; padding:16px; background:rgba(var(--apple-rgb),0.08);
  }
  .upload-box.done{border-style:solid; border-color:var(--cyan); background:rgba(79,174,141,0.12);}
  .upload-status{font-size:12.5px; font-weight:700; margin-top:10px; color:var(--ink-dim); display:flex; align-items:center; gap:7px;}
  .upload-box.done .upload-status{color:#2F7A61;}

  /* ===== STATUS PESANAN ===== */
  .order-status{
    display:inline-flex; align-items:center; gap:8px; background:var(--panel-2); border:2px solid var(--ink);
    border-radius:999px; padding:7px 16px; font-size:12.5px; font-weight:800; box-shadow:0 3px 0 var(--ink);
    margin-bottom:18px;
  }
  .order-status i{color:var(--gold);}
  .admin-note{
    background:var(--panel); border:2px solid var(--ink); border-radius:18px; padding:16px 18px; text-align:left;
    font-size:13px; line-height:1.7; color:var(--ink-dim); box-shadow:0 4px 0 rgba(var(--bark-rgb),0.3); margin-bottom:8px;
  }
  .admin-note b{color:var(--ink);}

  /* =========================================================
     DESKTOP / LAYAR LEBAR
     ========================================================= */
  @media (min-width:820px){
    .nav-inner{padding:16px 32px;}
    .tabs{justify-content:center; gap:34px; overflow-x:visible;}
    .tab-btn{font-size:15px;}

    .hero{padding:74px 32px 34px;}
    .hero-sticker{font-size:40px;}
    .hero-sticker.s1{left:9%;}
    .hero-sticker.s2{right:11%;}
    .hero p.sub{max-width:600px; font-size:18px;}
    .hero-script{font-size:16.5px; padding:0 10px;}

    .trust-strip{grid-template-columns:repeat(4,1fr); gap:22px; margin-bottom:70px;}
    .trust-item{padding:24px;}
    .trust-item .num{font-size:28px;}

    section{padding:14px 32px 80px;}
    .section-head{margin-bottom:44px;}

    /* daftar aplikasi: kartu lebih lega, 4-5 kolom */
    .grid-brands{grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:22px;}
    .brand-card{padding:22px 20px;}

    /* detail: daftar durasi jadi 2 kolom biar ga melebar kosong */
    .variant-list{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));}
    .dur-title{font-size:18px; padding:12px 18px;}

    /* bundle: maksimal 3 kolom */
    .grid-bundles{grid-template-columns:repeat(auto-fit,minmax(310px,1fr));}

    /* checkout: ringkasan pesanan nempel pas discroll */
    .checkout-grid{grid-template-columns:3fr 2fr; gap:32px; align-items:start;}
    .checkout-grid > div:last-child{position:sticky; top:112px;}

    /* struk & bukti order sejajar */
    .success-wrap{max-width:920px; padding:56px 32px 26px;}
    .receipt-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start; text-align:left; margin-top:26px;}
    .receipt-grid .card-block-label{margin-top:0;}
    .receipt{max-width:none; margin:0;}
    .download-block{max-width:none;}
    .admin-note{max-width:560px; margin-left:auto; margin-right:auto;}
    .receipt-actions{max-width:520px; flex-direction:row; margin-bottom:60px;}
    .receipt-actions button{flex:1;}

    .ssn-modal{max-width:400px;}
    footer{font-size:14px;}
  }

  @media (min-width:1180px){
    .grid-brands{grid-template-columns:repeat(5,1fr);}
    .grid-bundles{grid-template-columns:repeat(3,1fr);}
    .variant-list{grid-template-columns:repeat(2,1fr);}
    .hero h1{font-size:60px;}
  }

  /* layar sangat lebar: konten tetep di tengah, ga kepanjangan */
  @media (min-width:1500px){
    .nav-inner, .hero, .trust-strip, section{max-width:1280px;}
  }

  /* ===== SEARCH ===== */
  .search-wrap{
    position:relative; max-width:520px; margin:0 auto 28px; display:flex; align-items:center;
  }
  .search-wrap > i{position:absolute; left:18px; color:var(--ink-dim); font-size:14px; pointer-events:none;}
  .search-wrap input{
    width:100%; margin:0; padding:14px 44px 14px 44px; border-radius:999px; border:2px solid var(--ink);
    background:var(--panel); box-shadow:0 4px 0 var(--ink); font-size:14.5px; font-weight:600;
  }
  .search-wrap input:focus{border-color:var(--pink); outline:none;}
  .search-wrap input::-webkit-search-cancel-button{display:none;}
  .search-clear{
    position:absolute; right:14px; width:26px; height:26px; border-radius:50%; border:2px solid var(--ink);
    background:var(--panel-2); color:var(--ink); cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:11px; padding:0;
  }

  /* ===== HOUSE RULES ===== */
  .rules-box{
    background:rgba(var(--apple-rgb),0.10); border:2px solid var(--pink); border-radius:18px;
    padding:16px 18px; margin-bottom:16px;
  }
  .rules-head{
    display:flex; align-items:center; gap:9px; font-family:var(--font); font-weight:800; font-size:15.5px;
    color:var(--pink); margin-bottom:11px;
  }
  .rules-box ul{list-style:none; padding:0; margin:0 0 11px; display:grid; gap:7px;}
  .rules-box li{display:flex; gap:9px; align-items:flex-start; font-size:13.2px; line-height:1.5; color:var(--ink);}
  .rules-box li span{font-weight:800; color:var(--pink); flex:0 0 auto;}
  .rules-box li.ok span{color:var(--cyan);}
  .rules-foot b{color:var(--pink);}
  .rules-text{white-space:pre-wrap; overflow-wrap:anywhere; text-align:left; font-size:13.2px; line-height:1.6; color:var(--ink);}
  .rules-foot{font-size:12px; color:var(--ink-dim); line-height:1.6; border-top:2px dashed rgba(var(--bark-rgb),0.2); padding-top:10px;}
  @media (min-width:820px){ .rules-box ul{grid-template-columns:1fr 1fr; gap:8px 18px;} }

  /* ===== INFO SHARING vs PRIVATE ===== */
  .plan-info{
    background:var(--panel-2); border:2px dashed rgba(var(--bark-rgb),0.28); border-radius:16px;
    padding:13px 16px; font-size:12.8px; line-height:1.65; color:var(--ink); margin-bottom:20px;
  }
  .plan-info b{font-weight:800;}

  /* ===== WHY SSN ===== */
  #why-ssn{max-width:1180px; margin:0 auto 46px; padding:0 24px;}
  #house-rules{max-width:1180px; margin:0 auto 34px; padding:0 24px; text-align:center;}
  .rs-title{font-family:var(--font); font-weight:800; font-size:15px; margin-bottom:11px;}
  .rs-items{display:flex; flex-wrap:wrap; gap:7px; justify-content:center;}
  .rs-items span{
    border:2px dashed rgba(var(--bark-rgb),0.30); border-radius:999px; padding:5px 13px;
    font-size:12.2px; font-weight:700; color:var(--ink-dim);
  }
  .rs-items span.ok{border-style:solid; border-color:var(--cyan); color:#2F7A61;}
  .rs-note{font-size:11.5px; color:var(--ink-dim); margin-top:10px;}
  .why-card{
    background:var(--panel); border:2px solid var(--ink); border-radius:22px; padding:22px 20px;
    box-shadow:0 5px 0 var(--ink); position:relative; overflow:hidden;
  }
  .why-card::before{
    content:"🧃"; position:absolute; top:-6px; right:14px; font-size:74px; opacity:.10; transform:rotate(-12deg);
  }
  .why-card h2{font-size:clamp(19px,2.6vw,25px); margin:0 0 7px; position:relative;}
  .why-lead{font-size:13.5px; color:var(--ink-dim); line-height:1.6; margin:0 0 16px; position:relative; max-width:620px;}
  .why-list{
    list-style:none; padding:0; margin:0 0 16px; position:relative;
    display:grid; grid-template-columns:1fr; gap:7px;
  }
  .why-list li{
    display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.45;
    background:var(--panel-2); border:2px solid rgba(var(--bark-rgb),0.16); border-radius:12px; padding:8px 12px;
  }
  .why-list li .mark{color:var(--pink); font-weight:800; flex:0 0 auto;}
  .why-list li b{font-weight:800;}
  .why-list li span.note{color:var(--ink-dim);}
  .why-stats{
    display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; position:relative;
  }
  .why-stats span{
    background:var(--panel); border:2px solid var(--ink); border-radius:999px; padding:4px 12px;
    font-size:11.5px; font-weight:700; box-shadow:0 3px 0 rgba(var(--bark-rgb),0.3);
  }
  .why-stats b{font-family:var(--font); font-size:13.5px; color:var(--pink); margin-right:4px;}
  @media (min-width:560px){ .why-list{grid-template-columns:1fr 1fr; gap:8px 12px;} }
  .why-outro{
    font-size:13px; line-height:1.6; position:relative; font-weight:700;
    border-top:2px dashed rgba(var(--bark-rgb),0.2); padding-top:13px;
  }
  @media (min-width:820px){
    #why-ssn{padding:0 32px; margin-bottom:54px;}
    #house-rules{padding:0 32px; margin-bottom:44px;}
    .rs-title{font-size:16px;}
    .why-card{padding:28px 30px;}
    .why-list{grid-template-columns:1fr 1fr; gap:9px 14px;}
    .why-card::before{font-size:110px; right:26px;}
  }


/* =========================================================
   MOSHI MOSHI LIL TOWN — lapisan tema kebun apel
   Signature: pita kain piknik gingham + lencana apel
   ========================================================= */

/* -- kain gingham merah, dipakai di marquee (elemen tanda tangan) -- */
.marquee-wrap{
  background:
    repeating-linear-gradient(0deg,
      rgba(var(--apple-rgb),.55) 0 13px, rgba(var(--apple-rgb),0) 13px 26px),
    repeating-linear-gradient(90deg,
      rgba(var(--apple-rgb),.55) 0 13px, rgba(var(--apple-rgb),0) 13px 26px),
    var(--cream) !important;
  border-top:3px solid var(--apple-deep) !important;
  border-bottom:3px solid var(--apple-deep) !important;
  transform:rotate(-1deg);
}
.channel-badge{
  background:var(--panel) !important;
  border-color:var(--bark) !important;
  box-shadow:0 2px 0 rgba(var(--bark-rgb),.35);
}

/* -- lencana strawberry di logo, font lebih playful biar gak polos -- */
.logo{
  display:inline-flex; align-items:center; gap:7px; color:var(--apple-deep);
  font-family:var(--font-logo) !important; font-weight:700 !important; font-size:22px !important;
  letter-spacing:0 !important; text-shadow:1.5px 1.5px 0 rgba(var(--bark-rgb),.12);
}
.logo::before{
  content:"🍅"; font-size:19px; flex:0 0 auto; display:inline-block;
  transform:rotate(-12deg); filter:drop-shadow(0 1.5px 0 rgba(var(--bark-rgb),.18));
}
.logo span{color:var(--leaf) !important; display:inline-block; transform:rotate(-2deg);}

/* -- bukit kebun di bawah hero -- */
.hero{
  background-image:
    linear-gradient(rgba(var(--cream-rgb),.90), rgba(var(--cream-rgb),.90)),
    repeating-linear-gradient(0deg, rgba(var(--leaf-rgb),.16) 0 2px, transparent 2px 32px),
    repeating-linear-gradient(90deg, rgba(var(--sky-rgb),.14) 0 2px, transparent 2px 32px) !important;
  position:relative;
}
.hero::after{
  content:"";
  position:absolute; left:-8%; right:-8%; bottom:-32px; height:110px;
  background:
    radial-gradient(60% 100% at 22% 0%, rgba(var(--leaf-rgb),.22), transparent 70%),
    radial-gradient(55% 100% at 74% 0%, rgba(var(--leaf-rgb),.18), transparent 70%);
  pointer-events:none;
}
.hero > *{position:relative; z-index:1;}
.hero h1{color:var(--bark); letter-spacing:-.5px;}
.hero h1 .accent{color:var(--apple);}
.eyebrow::before{content:"🍏"; font-size:12px;}

/* -- baris teks sapaan kota -- */
.hero-script{
  font-size:14.5px; line-height:1.65; color:var(--bark-soft);
  max-width:560px; margin:0 auto 10px; font-weight:600;
}
.hero-script .script-tail{display:block; margin-top:5px; color:var(--leaf); font-weight:800;}
.hero-open{
  font-size:13.5px; color:var(--bark-soft); margin:0 0 22px; font-weight:700;
}
.hero p.sub{color:var(--bark); font-weight:600;}

/* -- tombol -- */
.btn-primary{background:var(--apple) !important;}
.btn-primary:hover{background:var(--apple-deep) !important;}
.btn-ghost:hover{color:var(--leaf) !important;}
.card .addbtn:hover{background:var(--apple) !important; border-color:var(--bark) !important;}
.cart-btn:hover{border-color:var(--sky) !important;}
.card:hover{border-color:var(--leaf) !important;}
input:focus, textarea:focus, select:focus{border-color:var(--sky) !important;}
.pay-card.selected{border-color:var(--apple) !important; color:var(--apple-deep) !important;}

/* -- alur order: tata cara, ringkasan atas (HP), nomor & kode di halaman sukses -- */
.co-steps{margin:8px 0 0; padding-left:20px; font-size:13.5px; line-height:1.65; color:var(--ink);}
.co-steps li{margin:2px 0;}
.co-mini{display:none;}
@media (max-width:820px){ .co-mini{display:block;} }
.rc-ids{max-width:420px; margin:18px auto 14px; text-align:center;}
.rc-ids .oid-num{font-size:26px; letter-spacing:1px;}
.rc-copy{margin-top:6px; padding:6px 14px; border-radius:999px; border:2px solid var(--ink); background:var(--panel, #fff); color:var(--ink); font-weight:800; font-size:12.5px; cursor:pointer;}
.rc-wa-top{display:block; width:100%; max-width:420px; margin:0 auto 18px; font-size:16px;}
.rc-verify{font-size:11px; opacity:.75; text-align:right; margin-top:2px;}
/* kartu order dihapus (infonya udah ada di "pesanan saya"), struk sendirian di tengah */
.receipt-grid.single{grid-template-columns:1fr !important; max-width:440px; margin-left:auto; margin-right:auto;}
/* tema pixel: label status di halaman sukses dulunya krem di atas putih, nggak kebaca */
html:root[data-theme="pixel"] .order-status{background:#FFF4D6; color:#14183A; border-color:#14183A; box-shadow:0 3px 0 #14183A;}
/* -- kartu nomor pesanan di checkout -- */
.order-id-card{
  background:var(--panel-2); border:2px solid var(--bark); border-radius:18px;
  padding:16px 18px; margin-bottom:20px; box-shadow:0 5px 0 var(--bark);
}
.order-id-card .oid-label{
  font-size:11px; letter-spacing:.6px; text-transform:uppercase;
  font-weight:800; color:var(--bark-soft);
}
.order-id-card .oid-num{
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:21px;
  color:var(--apple-deep); margin:3px 0 7px; letter-spacing:1px;
}
.order-id-card .oid-note{font-size:12.5px; color:var(--bark-soft); line-height:1.6;}

/* -- catatan denda, ditaruh tenang di bawah -- */
.fine-note{
  max-width:1180px; margin:0 auto 44px; padding:0 24px;
  font-size:12px; color:var(--bark-soft); line-height:1.65; text-align:center;
}
.fine-note b{color:var(--bark);}

/* -- house rules -- */
.rs-items span.ok{border-color:var(--leaf) !important; color:var(--leaf) !important;}
.rs-title{color:var(--sky-deep);}

.why-card::before{content:"🍊" !important;}
.why-list li .mark{color:var(--leaf) !important;}
.why-stats b{color:var(--sky-deep) !important;}
.trust-item .num{color:var(--apple) !important;}

footer{color:var(--bark-soft);}

/* -- tipografi: sans-serif bersih buat body/harga, tulisan-tangan buat judul-judul besar
   (biar nyambung sama vibe pricelist — cursive cuma di heading, angka/harga tetep font jelas) -- */
body{font-family:var(--font); -webkit-font-smoothing:antialiased;}
h1,h2,h3,.heading{letter-spacing:-.025em;}
.hero h1{font-weight:800; letter-spacing:-.04em; line-height:1.02;}
.logo{letter-spacing:-.03em; font-weight:700;}
.section-head h2{letter-spacing:-.03em;}
.card h3,.brand-card .b-name,.detail-head .b-name,.bundle-card h3{letter-spacing:-.02em;}
.tab-btn{letter-spacing:-.01em;}
.eyebrow,.file-upload-label{letter-spacing:.01em;}

.logo{font-family:var(--font-cursive) !important; font-weight:700 !important; font-size:28px !important; letter-spacing:0 !important;}
.hero h1{font-family:var(--font-cursive) !important; font-weight:700 !important; letter-spacing:0 !important; line-height:1.05 !important;}
.section-head h2{font-family:var(--font-cursive) !important; font-weight:700 !important; letter-spacing:0 !important; font-size:clamp(28px,4.2vw,40px) !important;}
.why-card h2{font-family:var(--font-cursive) !important; font-weight:700 !important; letter-spacing:0 !important; font-size:clamp(24px,3.2vw,30px) !important;}
.rs-title{font-family:var(--font-cursive) !important; font-weight:700 !important; font-size:19px !important;}

/* -- strip cara belanja: satu baris kecil, tanpa kartu putih -- */
#how-it-works{max-width:1180px; margin:0 auto 20px; padding:0 24px;}
.how-line{
  margin:0; text-align:center; font-size:12.5px; line-height:1.75;
  color:var(--bark-soft); font-weight:500;
}
.how-line b{color:var(--apple-deep); font-weight:700;}
.how-line span.sep{color:rgba(var(--bark-rgb),.3); margin:0 6px;}




/* =========================================================
   REVISI — pola apel jadi latar, blok rapi, jarak lebih rapat
   ========================================================= */

/* -- latar warunk: rumput ijo + pita gingham ngintip di atas -- */
.hero{
  padding:38px 24px 30px !important;
  background-image:
    radial-gradient(70% 60% at 20% 100%, rgba(var(--leaf-rgb),.20), transparent 65%),
    radial-gradient(65% 55% at 82% 100%, rgba(var(--leaf-rgb),.16), transparent 62%),
    radial-gradient(50% 40% at 50% 0%, rgba(var(--butter-rgb),.14), transparent 60%),
    linear-gradient(180deg, var(--hero-tint) 0%, rgba(var(--cream-rgb),.96) 68%) !important;
  position:relative;
}
.hero::before{
  content:""; position:absolute; top:0; left:0; right:0; height:14px;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(var(--apple-rgb),.85) 6px 12px),
    repeating-linear-gradient(-45deg, transparent 0 6px, rgba(var(--apple-rgb),.85) 6px 12px),
    #ffffff;
}
.hero::after{
  display:block; content:""; position:absolute; left:0; right:0; bottom:12px; height:13px;
  background-image:radial-gradient(circle at 50% 100%, var(--gold) 0 6.5px, transparent 6.5px);
  background-size:26px 13px; background-repeat:repeat-x; opacity:.5; pointer-events:none;
}

.eyebrow{margin-bottom:14px;}
.hero h1{margin:0 0 10px; font-size:clamp(31px,5.2vw,52px);}
.hero-script{margin:0 auto 8px; font-size:12.5px; line-height:1.55;}
.hero-open{margin:0 0 10px; font-size:12.5px;}
.visit-badge{
  display:none; margin:0 auto 14px; width:fit-content; align-items:center; gap:6px;
  background:var(--panel); border:2px solid var(--apple); color:var(--apple-deep);
  font-weight:800; font-size:11.5px; padding:6px 14px; border-radius:999px;
  box-shadow:0 2px 0 rgba(var(--bark-rgb),.15); font-family:var(--font);
}
.hero-ctas{margin-bottom:0;}

.marquee-wrap{margin-top:10px !important; margin-bottom:20px !important; padding:11px 0 !important;}

/* -- blok cara belanja: rata kiri, di dalam kotak apel -- */
#how-it-works{max-width:1180px; margin:0 auto 12px; padding:0 24px;}
.how-box{
  background:rgba(var(--apple-rgb),.055);
  border:2px solid rgba(var(--apple-rgb),.30);
  border-radius:16px;
  padding:13px 16px;
}
.how-box .how-title{
  font-weight:800; font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--apple-deep); margin-bottom:7px;
}
.how-box ul{list-style:none; margin:0; padding:0; display:grid; gap:5px;}
.how-box li{
  display:flex; gap:9px; align-items:baseline;
  font-size:12.6px; line-height:1.55; color:var(--bark-soft); text-align:left;
}
.how-box li b{color:var(--bark); font-weight:700; flex:0 0 auto; min-width:104px;}
@media (min-width:820px){
  .how-box{padding:14px 20px;}
  .how-box ul{grid-template-columns:repeat(3,1fr); gap:6px 22px;}
  .how-box li{display:block;}
  .how-box li b{display:block; min-width:0; margin-bottom:1px;}
}

/* -- rapatkan sisa halaman -- */
#house-rules{margin:0 auto 14px !important;}
.rs-note{padding-top:8px !important;}
section{padding:4px 24px 30px !important;}
.section-head{margin-bottom:18px !important;}
.fine-note{margin:14px auto 18px !important;}
#why-ssn{margin:0 auto 20px !important;}
.why-card{padding:20px 18px !important;}
footer{padding:22px 24px 30px !important;}

@media (min-width:820px){
  .hero{padding:46px 32px 28px !important;}
  .hero-script{font-size:15px;}
  section{padding:6px 32px 52px !important;}
}

/* ---------- blok 2 ---------- */
/* v20: tombol melayang ringkas + house rules lipat */
.cf-menu{display:none; flex-direction:column; align-items:center; gap:9px;}
.contact-float.open .cf-menu{display:flex;}
.cf-toggle{width:44px; height:44px; border-radius:50%; border:2px solid var(--ink); background:var(--apple-deep); color:#fff; font-size:18px; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(var(--bark-rgb),.28); cursor:pointer;}
.rules-box summary.rules-head{cursor:pointer; list-style:none; margin-bottom:0;}
.rules-box summary.rules-head::-webkit-details-marker{display:none;}
.rules-box summary.rules-head::after{content:"▾"; margin-left:auto; font-size:14px;}
.rules-box[open] summary.rules-head{margin-bottom:11px;}
.rules-box[open] summary.rules-head::after{content:"▴";}
footer{padding-bottom:72px !important;}
@media (max-width:640px){
  .contact-float{right:14px !important; bottom:16px !important;}
}

  /* ===== v4: beranda baru (rak aplikasi di atas, bundle geser, FAQ dilipat) ===== */
  .hero-chips{display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:14px;}
  .hero-chips a, .hero-chips span{display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
    background:var(--panel); border:2px solid var(--ink); font-size:13px; font-weight:700; color:var(--ink); text-decoration:none;}
  .home-h{font-family:var(--font-logo, inherit); font-weight:800; font-size:22px; margin:26px 0 12px; color:var(--ink);
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
  .home-h small{font-family:var(--font); font-size:13px; font-weight:600; color:var(--ink-dim);}
  .laris-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;}
  .laris-card{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:18px; background:var(--panel);
    border:2px solid var(--ink); box-shadow:4px 4px 0 var(--pink); cursor:pointer; text-align:left; font-family:inherit; color:var(--ink);}
  .laris-card .rank{width:34px; height:34px; flex-shrink:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:var(--gold); border:2px solid var(--ink); font-weight:800;}
  .laris-card .brand-avatar{width:46px; height:46px; margin:0; flex-shrink:0;}
  .laris-card b{display:block; font-size:15px;} .laris-card small{color:var(--ink-dim); font-size:12.5px;}
  .rak-box{background:var(--panel); border:2px solid var(--ink); border-radius:22px; padding:16px; box-shadow:5px 5px 0 var(--cyan);}
  .rak-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:12px 6px;}
  .rak-tile{display:flex; flex-direction:column; align-items:center; gap:5px; background:none; border:none; cursor:pointer;
    font-family:inherit; color:var(--ink); padding:6px 2px; border-radius:14px;}
  .rak-tile:hover{background:rgba(var(--bark-rgb),.05);}
  .rak-tile .brand-avatar{width:56px; height:56px; margin:0; box-shadow:3px 3px 0 var(--ink);}
  .rak-tile b{font-size:12.5px; line-height:1.2; text-align:center;}
  .rak-tile small{font-size:11.5px; color:var(--ink-dim);}
  .hero-chips-btn{min-height:44px; padding:0 18px; border-radius:999px; background:var(--panel-2); border:2px solid var(--ink); font-family:inherit; font-weight:700; font-size:14px; color:var(--ink); cursor:pointer;}
  .bundle-scroll{display:flex; gap:16px; overflow-x:auto; padding:6px 4px 16px; scroll-snap-type:x mandatory;}
  .bundle-scroll .bundle-card{flex:0 0 270px; scroll-snap-align:start;}
  #home-faq{max-width:1180px; margin:0 auto; padding:0 24px 40px;}
  #home-faq .faq-item{background:var(--panel); border:2px solid var(--ink); border-radius:16px; margin-bottom:10px; overflow:hidden;}
  #home-faq .faq-item > summary{list-style:none; cursor:pointer; min-height:52px; display:flex; align-items:center; justify-content:space-between;
    gap:10px; padding:0 16px; font-weight:800; color:var(--ink);}
  #home-faq .faq-item > summary::-webkit-details-marker{display:none;}
  #home-faq .faq-item > summary::after{content:'+'; font-size:22px; color:var(--pink);}
  #home-faq .faq-item[open] > summary::after{content:'−';}
  #home-faq .faq-item > div{padding:0 12px 12px;}
  #home-faq .faq-item #how-it-works, #home-faq .faq-item #house-rules, #home-faq .faq-item #why-ssn{margin:0 !important; padding:0 !important; max-width:none !important;}
  @media (max-width:560px){ #home-faq{padding:0 16px 32px;} .home-h{font-size:19px;}
    .rak-box{padding:12px 8px;} .rak-tile .brand-avatar{width:48px; height:48px;} .rak-tile b{font-size:11.5px;} }
  /* ===== pengumuman berjalan (paling atas) ===== */
  .announce-bar{background:var(--ink); color:var(--panel); overflow:hidden; white-space:nowrap; font-size:13px; font-weight:700;
    padding:7px 0; position:relative; z-index:60;}
  .announce-track{display:inline-flex; width:max-content; animation:announce-run var(--announce-dur,30s) linear infinite;}
  .announce-group{display:inline-flex; gap:40px; padding-right:40px; padding-left:16px;}
  .announce-bar:hover .announce-track, .announce-bar:focus-within .announce-track{animation-play-state:paused;}
  .announce-track span{flex-shrink:0;}
  @keyframes announce-run{ from{transform:translateX(0);} to{transform:translateX(-50%);} }
  @media (prefers-reduced-motion: reduce){
    .announce-track{animation:none; white-space:normal; display:block; width:auto;}
    .announce-group + .announce-group, .announce-group span:not(:first-child){display:none;}
  }
  .stamp-card{background:#FFF9C4; border:3px solid var(--ink); border-radius:18px; padding:14px; margin-bottom:18px; box-shadow:4px 4px 0 #D32F2F;}
  .stamp-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:10px;}
  .stamp-top span{font-size:12.5px; color:var(--ink-dim);}
  .stamp-grid{display:grid; grid-template-columns:repeat(5, 1fr); gap:8px; max-width:340px;}
  .stamp{aspect-ratio:1; border-radius:50%; border:2.5px dashed var(--ink); display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:800; color:var(--ink-dim); background:#fff;}
  .stamp.on{border-style:solid; background:#FFE0E0; font-size:20px;}
  .stamp-note{font-size:12.5px; color:var(--ink); margin-top:8px;}
  .stamp-rewards{margin-top:10px; font-size:13px; font-weight:700;}
  .akun-code{display:flex; align-items:center; gap:10px; flex-wrap:wrap; background:var(--panel-2); border:2px dashed var(--ink);
    border-radius:16px; padding:12px 14px; margin-bottom:18px; font-size:13px;}
  .akun-code b{font-size:20px; letter-spacing:2px; font-family:var(--font-logo, inherit);}
  /* ===== v3: akun customer, voucher, restock ===== */
  .acct-btn .acct-label{font-size:13px;}
  @media (max-width:560px){ .acct-btn .acct-label{display:none;} }
  .akun-wrap{max-width:760px;}
  .akun-hello{font-size:22px; font-weight:800; margin:4px 0 2px; font-family:var(--font);}
  .akun-sub{color:var(--ink-dim); font-size:13px; margin-bottom:18px;}
  .akun-stats{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:20px;}
  @media (min-width:640px){ .akun-stats{grid-template-columns:repeat(4,1fr);} }
  .akun-stat{background:var(--panel); border:2px solid var(--ink); border-radius:16px; padding:12px 14px; box-shadow:0 3px 0 var(--ink);}
  .akun-stat b{display:block; font-size:18px; font-variant-numeric:tabular-nums;}
  .akun-stat span{font-size:11.5px; color:var(--ink-dim);}
  .akun-h{font-weight:800; font-size:16px; margin:22px 0 10px; font-family:var(--font);}
  .akun-card{background:var(--panel); border:2px solid var(--ink); border-radius:16px; padding:14px 16px; margin-bottom:12px;}
  .akun-card .top{display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap;}
  .akun-card .oid{font-weight:800; font-size:13.5px; word-break:break-all;}
  .akun-card .muted{color:var(--ink-dim); font-size:12px;}
  .akun-card .items{font-size:13px; margin:8px 0; line-height:1.6;}
  .akun-card .total{font-weight:800; text-align:right;}
  .st-chip{font-size:11px; font-weight:800; padding:3px 10px; border-radius:999px; border:1.5px solid var(--ink); white-space:nowrap;}
  .st-baru{background:#FFF1C2;} .st-diproses{background:#D6ECFF;} .st-selesai{background:#D7F2DD;} .st-batal{background:#FBD9D5;}
  .st-aktif{background:#D7F2DD;} .st-habis{background:#EEE;}
  .tracker{display:flex; gap:4px; margin:10px 0 4px;}
  .tracker div{flex:1; text-align:center; font-size:10.5px; color:var(--ink-dim);}
  .tracker div::before{content:''; display:block; height:6px; border-radius:6px; background:rgba(0,0,0,.1); margin-bottom:4px;}
  .tracker div.on{color:var(--ink); font-weight:700;}
  .tracker div.on::before{background:var(--pink);}
  .wbar{height:8px; border-radius:8px; background:rgba(0,0,0,.08); overflow:hidden; margin:8px 0 4px;}
  .wbar i{display:block; height:100%; background:var(--pink); border-radius:8px;}
  .akun-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
  .akun-actions button, .mini-btn{background:var(--panel); border:2px solid var(--ink); border-radius:999px; padding:7px 14px;
    font-weight:700; font-size:12.5px; cursor:pointer; color:var(--ink);}
  .akun-actions button.primary, .mini-btn.primary{background:var(--pink); color:#fff;}
  .testi-form{margin-top:10px; display:grid; gap:8px;}
  .testi-form select, .testi-form textarea{width:100%;}
  .login-err{color:var(--apple); font-size:13px; margin-top:8px; min-height:1em;}
  .voucher-row{display:flex; gap:8px; margin:12px 0 4px;}
  .voucher-row input{flex:1; text-transform:uppercase; margin:0;}
  .voucher-row button{border:2px solid var(--ink); background:var(--panel); border-radius:12px; padding:0 14px; font-weight:800; cursor:pointer; color:var(--ink);}
  .voucher-msg{font-size:12px; min-height:1em; margin-bottom:6px;}
  .voucher-msg.ok{color:#1E7A34;} .voucher-msg.err{color:var(--apple);}
  .v-notify{background:var(--panel); border:2px dashed var(--ink); border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; cursor:pointer; color:var(--ink);}

  /* ===== v5: layout persis mockup (nav kuning, hero ringkas, chip kategori) ===== */
  :root{--nav-bg:var(--panel-2);}
  html[data-theme="kidcore"]{--nav-bg:#F5C200;}
  html:root body nav{background:var(--nav-bg) !important; border-bottom:3px solid var(--ink) !important; backdrop-filter:none !important;}
  html:root body .nav-inner{padding:10px 16px !important;}
  html:root body .logo{font-size:22px !important;}
  html:root body .acct-btn, html:root body .cart-btn{border:3px solid var(--ink) !important; box-shadow:3px 3px 0 var(--ink) !important;}
  html:root body .cart-btn:not(.acct-btn){background:var(--pink) !important; color:#fff !important;}
  html:root body .hero{background:none !important; border:none !important; box-shadow:none !important; border-radius:0 !important;
    margin:0 auto !important; padding:30px 16px 12px !important; max-width:760px;}
  html:root body .hero::before, html:root body .hero::after{display:none !important;}
  html:root body .hero-sticker{display:none !important;}
  html:root body .hero h1{margin-bottom:8px !important;}
  html:root body .hero-script{font-size:14px !important; line-height:1.7 !important; margin:0 auto 10px !important;}
  html:root body #visitBadge{display:none !important;}
  .open-chip{display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:#C8F5A0; color:#1A3A6B;
    border:3px solid var(--ink); font-size:13px; font-weight:700; margin-bottom:12px;}
  .open-chip .dot{width:9px; height:9px; border-radius:50%; background:#2E7D1F;}
  html:root body .hero .search-wrap{max-width:560px; margin:0 auto !important; border:3px solid var(--ink) !important; border-radius:18px !important;
    box-shadow:5px 5px 0 var(--sky) !important; background:var(--panel) !important;}
  .hero-chips span, .hero-chips a{border-width:2px !important; font-size:12.5px !important; padding:5px 12px !important;}
  .hero-chips .c1{background:#FFF9C4 !important; color:#1A3A6B !important;} .hero-chips .c2{background:#FFE0E0 !important; color:#1A3A6B !important;} .hero-chips .c3{background:#E3F0FF !important; color:#1A3A6B !important;}
  html:root body .marquee-wrap{transform:rotate(-1.2deg); margin:8px -6px 6px !important;}
  html:root body #produk{background:none !important; border:none !important; box-shadow:none !important; margin:0 auto !important; padding:6px 16px 24px !important;}
  .cat-row .tabs{display:flex; gap:8px; overflow-x:auto; padding:6px 2px 10px; margin:0;}
  .cat-row .tab-btn{flex-shrink:0; min-height:44px; padding:0 16px !important; border:3px solid var(--ink) !important; border-radius:999px !important;
    background:var(--panel) !important; color:var(--ink) !important; font-weight:700; font-size:14px;}
  .cat-row .tab-btn .tab-dot, .cat-row .tab-btn i{display:none !important;}
  .cat-row .tab-btn.active{background:var(--pink) !important; color:#fff !important; box-shadow:3px 3px 0 var(--ink);}
  .laris-card .rank{background:var(--gold);}
  .quiz-banner{margin-top:22px; display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:18px 20px; border-radius:22px;
    background:var(--sky-deep); color:#fff; border:3px solid var(--ink); box-shadow:6px 6px 0 var(--gold);}
  .quiz-banner > div{flex:999 1 300px; min-width:0; display:flex; flex-direction:column; gap:4px;}
  .quiz-banner b{font-family:var(--font-logo, inherit); font-size:19px;} .quiz-banner span{font-size:14px;}
  .quiz-banner button{flex:1 1 auto; min-height:48px; padding:0 22px; border-radius:999px; background:var(--gold); color:#1A3A6B;
    border:3px solid var(--ink); font-family:inherit; font-weight:800; font-size:15px; cursor:pointer;}
  .quiz-opt{width:100%; min-height:46px; padding:8px 14px; border-radius:14px; border:3px solid var(--ink); background:var(--panel);
    color:var(--ink); font-family:inherit; font-weight:700; font-size:14px; cursor:pointer; text-align:left;}
  .quiz-opt:hover{background:var(--panel-2);}
  .quiz-pick{display:flex; justify-content:space-between; align-items:center; gap:10px; text-align:left; font-size:13.5px;
    border:2px dashed var(--ink); border-radius:14px; padding:8px 10px;}
  .bundle-scroll .bundle-card:nth-child(odd){transform:rotate(-1deg);} .bundle-scroll .bundle-card:nth-child(even){transform:rotate(1deg);}
  .testi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px;}
  .testi-card{margin:0; padding:16px; border-radius:18px; border:3px solid var(--ink); display:flex; flex-direction:column; gap:8px; color:var(--ink);}
  .testi-card.t0{background:#FFF9C4;} .testi-card.t1{background:#E3F0FF;} .testi-card.t2{background:#FFE0E0;}
  .testi-card blockquote{margin:0; font-size:14px; line-height:1.5; color:#1A3A6B;}
  .testi-card figcaption{font-size:12.5px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; color:#1A3A6B;}
  .testi-card .vb{margin-left:auto; font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; background:#fff; border:2px solid #1A3A6B;}
  html:root body #home-faq .faq-item{border-width:3px;} 
  html:root body #home-faq .faq-item:nth-of-type(1){box-shadow:3px 3px 0 #D32F2F;}
  html:root body #home-faq .faq-item:nth-of-type(2){box-shadow:3px 3px 0 #1A6DB5;}
  html:root body #home-faq .faq-item:nth-of-type(3){box-shadow:3px 3px 0 #5CB82A;}
  html:root body footer{background:var(--nav-bg) !important; border-top:3px solid var(--ink) !important; color:var(--ink) !important; margin-top:20px;}
  html:root body footer a{color:var(--ink);}

  /* ===== v6: ikon huruf + kartu bundle persis mockup ===== */
  .mono-av{display:flex !important; align-items:center; justify-content:center; font-family:'Fredoka One','Fredoka','Baloo 2',sans-serif !important;
    font-weight:700; font-size:24px; border:3px solid #1A3A6B !important; border-radius:16px !important; overflow:hidden;}
  .laris-card .mono-av{font-size:22px;} .rak-tile .mono-av{font-size:22px;}
  .bx-card{flex:0 0 250px; scroll-snap-align:start; display:flex; flex-direction:column; border-radius:20px; background:#FFFFFF;
    border:3px solid #1A3A6B; box-shadow:5px 5px 0 #1A3A6B; overflow:hidden; margin:6px 4px;}
  .bx-head{padding:12px 16px; border-bottom:3px solid #1A3A6B; display:flex; justify-content:space-between; align-items:center; gap:6px;}
  .bx-emoji{font-size:26px;}
  .bx-save{font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px; background:#FFFFFF; color:#1A3A6B; border:2px solid #1A3A6B;}
  .bx-body{padding:14px 16px; display:flex; flex-direction:column; gap:8px; flex-grow:1; color:#1A3A6B;}
  .bx-body h3{margin:0; font-family:'Fredoka One','Fredoka',sans-serif; font-weight:700; font-size:19px; line-height:1.25;}
  .bx-items{font-size:13px; color:#4A78B8; line-height:1.5; flex-grow:1;}
  .bx-price{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
  .bx-price b{font-family:'Fredoka One','Fredoka',sans-serif; font-size:24px;} .bx-price s{font-size:13px; color:#4A78B8;}
  .bx-btn{min-height:44px; border-radius:14px; border:3px solid #1A3A6B; background:#D32F2F; color:#FFFFFF; font-family:inherit;
    font-weight:700; font-size:14px; cursor:pointer;}
  .bx-btn:active{transform:translateY(2px);}
  #home-hero h1{font-size:clamp(42px,7.5vw,72px) !important;}
  /* dropdown pilih tema (dipasang theme.js di #wmThemeSlot): menu muncul tepat di bawah tombol */
  .wm-dd{position:relative;}
  .wm-dd-btn{display:inline-flex; align-items:center; gap:8px; min-height:44px; margin:0; padding:0 12px 0 16px; cursor:pointer; background:#fff; color:var(--ink);
    border:3px solid var(--ink); border-radius:999px; box-shadow:3px 3px 0 var(--ink); font-family:inherit; font-weight:700; font-size:13px; white-space:nowrap;}
  .wm-dd-caret{width:0; height:0; border-left:5px solid transparent; border-right:5px solid transparent; border-top:6px solid currentColor; transition:transform .15s;}
  .wm-dd.open .wm-dd-caret{transform:rotate(180deg);}
  .wm-dd-list{position:absolute; top:calc(100% + 8px); right:0; min-width:100%; margin:0; padding:6px; list-style:none; z-index:60; background:#fff; color:var(--ink);
    border:3px solid var(--ink); border-radius:18px; box-shadow:4px 4px 0 var(--ink);}
  .wm-dd-list[hidden]{display:none;}
  .wm-dd-list li{padding:11px 14px; border-radius:12px; font-weight:700; font-size:14px; white-space:nowrap; cursor:pointer;}
  .wm-dd-list li:hover,.wm-dd-list li:focus{background:rgba(0,0,0,.08); outline:none;}
  .wm-dd-list li[aria-selected="true"]::before{content:"✓ ";}
  @media (max-width:560px){ .wm-dd-btn{font-size:12px; padding:0 10px 0 12px; gap:6px;} }
  @media (max-width:560px){
    html:root[data-theme="kidcore"] body .nav-inner{gap:10px; padding:10px 12px !important;}
    html:root[data-theme="kidcore"] body .logo{font-size:17px !important; gap:5px; white-space:nowrap;}
    html:root[data-theme="kidcore"] body .logo::before{font-size:15px;}
    html:root[data-theme="kidcore"] .nav-actions{gap:7px;}
    html:root[data-theme="kidcore"] body .acct-btn, html:root[data-theme="kidcore"] body .cart-btn{padding:0 11px; min-width:44px; justify-content:center;}
    html:root[data-theme="kidcore"] .wm-dd-btn{padding:0 9px 0 11px; font-size:12px;}
  }
  @media (max-width:380px){ html:root[data-theme="kidcore"] body .logo{font-size:15px !important;} html:root[data-theme="kidcore"] body .logo::before{font-size:13px;} }
  /* navbar HP: tombol tema jadi ikon 🎨 saja, nama tema ada di dalam menu */
  @media (max-width:560px){
    html:root body .wm-dd-btn{min-width:44px; justify-content:center; padding:0 10px !important; gap:5px !important;}
    html:root body .wm-dd-label{display:none;}
    html:root body .wm-dd-btn::before{content:"🎨"; font-size:16px; line-height:1;}
    html:root body .nav-actions{gap:8px !important;}
    html:root body .acct-btn, html:root body .cart-btn, html:root body .wm-dd-btn{height:44px; min-height:44px; box-sizing:border-box;}
    html:root[data-theme="pixel"] body .logo{row-gap:4px !important; align-content:center; grid-template-rows:min-content min-content; line-height:1.2 !important;}
    html:root[data-theme="pixel"] body .logo::before{align-self:center; margin-block:-10px;}
    html:root body .nav-inner{gap:12px !important;}
  }
  html:root[data-theme="pixel"] body .logo{row-gap:4px !important; align-content:center; grid-template-rows:min-content min-content; line-height:1.2 !important;}
  html:root[data-theme="pixel"] body .logo::before{align-self:center; margin-block:-10px;}
  .nav-inner{gap:14px;}
  .nav-inner .logo{flex:0 1 auto; min-width:0;}
  .nav-actions{flex:0 0 auto;}

/* ---------- blok 3 (dulu <style id="kc-form-polish">) ---------- */
/* ===== v13: rapihin form + semua kontrol se-tema kidcore ===== */
/* 1. kotak dobel di checkout: bungkus kolom nggak perlu border lagi, tiap panel udah punya */
html[data-theme="kidcore"] .checkout-grid > *{background:transparent !important;border:0 !important;box-shadow:none !important;border-radius:0 !important;padding:0 !important;}
.checkout-grid{align-items:start;}
html[data-theme="kidcore"] .panel-box{margin-bottom:22px;}
html[data-theme="kidcore"] .order-id-card{border:3.5px solid #1A3A6B;box-shadow:5px 5px 0 #1A3A6B;border-radius:18px;background:#FFF9C4;}

/* 2. input, textarea, dan kolom device: satu gaya */
html[data-theme="kidcore"] .panel-box input:not([type=hidden]):not([type=file]),
html[data-theme="kidcore"] .panel-box textarea,
html[data-theme="kidcore"] .testi-form textarea,
html[data-theme="kidcore"] .device-modal input,
html[data-theme="kidcore"] #ssn-ask-input,
html[data-theme="kidcore"] .device-field{
  background:#fff !important;border:3px solid #1A3A6B !important;border-radius:12px !important;
  box-shadow:3px 3px 0 #1A3A6B;color:#1A3A6B;font-weight:700;transition:transform .1s,box-shadow .1s;
}
html[data-theme="kidcore"] .panel-box input::placeholder,
html[data-theme="kidcore"] .panel-box textarea::placeholder,
html[data-theme="kidcore"] .testi-form textarea::placeholder,
html[data-theme="kidcore"] .device-modal input::placeholder,
html[data-theme="kidcore"] #ssn-ask-input::placeholder{color:#7C98C4;font-weight:600;text-transform:none;}
html[data-theme="kidcore"] .panel-box input:focus,
html[data-theme="kidcore"] .panel-box textarea:focus,
html[data-theme="kidcore"] .testi-form textarea:focus,
html[data-theme="kidcore"] .device-modal input:focus,
html[data-theme="kidcore"] #ssn-ask-input:focus,
html[data-theme="kidcore"] .device-field:focus-visible{
  outline:none;border-color:#1A3A6B !important;transform:translate(1px,1px);box-shadow:0 0 0 4px #F5C200,1px 1px 0 #1A3A6B;
}
#ssn-ask-input{width:100%;padding:13px 16px;font-family:inherit;font-size:14px;margin:0 0 14px;}
.device-field{cursor:pointer;user-select:none;}
.device-field span{color:#7C98C4;font-weight:600;}
.device-field.filled span{color:#1A3A6B;font-weight:800;}
.device-field i{color:#1A3A6B;font-size:13px;}
.device-field:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1A3A6B;}

/* 3. kartu cara bayar */
html[data-theme="kidcore"] .pay-card{background:#FFF9C4;border:3px solid #1A3A6B;border-radius:14px;box-shadow:3px 3px 0 #1A3A6B;color:#1A3A6B;transition:transform .1s,box-shadow .1s,background .1s;}
html[data-theme="kidcore"] .pay-card:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 #1A3A6B;}
html[data-theme="kidcore"] .pay-card.selected{background:#D32F2F !important;color:#fff !important;border-color:#1A3A6B !important;transform:translate(2px,2px);box-shadow:1px 1px 0 #1A3A6B;}
html[data-theme="kidcore"] .pay-card.selected::before{content:"✓ ";}

/* 4. upload bukti + voucher */
html[data-theme="kidcore"] .upload-box{border:3px dashed #1A3A6B;background:#FFF9C4;border-radius:16px;}
html[data-theme="kidcore"] .upload-box.done{border-style:solid;border-color:#1A3A6B;background:#E6F8D8;}
html[data-theme="kidcore"] .file-upload-btn{border:3px solid #1A3A6B !important;box-shadow:3px 3px 0 #1A3A6B;border-radius:12px;cursor:pointer;}
html[data-theme="kidcore"] .file-upload-btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1A3A6B;}
html[data-theme="kidcore"] .voucher-row input{text-transform:none;}
html[data-theme="kidcore"] .voucher-row input:not(:placeholder-shown){text-transform:uppercase;}
html[data-theme="kidcore"] .voucher-row button{border:3px solid #1A3A6B;background:#F5C200;box-shadow:3px 3px 0 #1A3A6B;border-radius:12px;}
html[data-theme="kidcore"] .voucher-row button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1A3A6B;}

/* 5. popup pilih device (3 langkah) */
html[data-theme="kidcore"] .device-modal{border:4px solid #1A3A6B;border-radius:26px 26px 0 0;box-shadow:0 -6px 0 #1A3A6B;max-width:460px;max-height:88vh;overflow-y:auto;background:#fff;}
@media (min-width:640px){html[data-theme="kidcore"] .device-modal{border-radius:26px;box-shadow:8px 8px 0 #1A3A6B;}}
.dm-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.device-modal .dm-title{flex:1;margin:0;font-family:'Fredoka One',var(--font),sans-serif;font-weight:400;font-size:19px;color:#1A3A6B;}
.dm-step{font-size:12px;font-weight:800;background:#F5C200;color:#1A3A6B;border:2.5px solid #1A3A6B;border-radius:999px;padding:3px 10px;}
.dm-back{display:none;width:36px;height:36px;flex:0 0 36px;align-items:center;justify-content:center;border-radius:50%;border:3px solid #1A3A6B;background:#fff;color:#1A3A6B;box-shadow:2px 2px 0 #1A3A6B;cursor:pointer;font-size:24px;font-weight:800;line-height:1;padding:0 0 3px;}
.dm-back.show{display:flex;}
.dm-back:active{transform:translate(2px,2px);box-shadow:0 0 0 #1A3A6B;}
html[data-theme="kidcore"] .dm-opt{background:#FFF9C4;border:3px solid #1A3A6B;border-radius:14px;box-shadow:3px 3px 0 #1A3A6B;color:#1A3A6B;padding:13px 14px;}
html[data-theme="kidcore"] .dm-opt i{color:#D32F2F;}
html[data-theme="kidcore"] .dm-opt:hover,html[data-theme="kidcore"] .dm-opt:active{border-color:#1A3A6B;transform:translate(2px,2px);box-shadow:1px 1px 0 #1A3A6B;}
html[data-theme="kidcore"] .dm-opt.on{background:#5CB82A;color:#fff;}
html[data-theme="kidcore"] .dm-opt.on i{color:#fff;}
.dm-brands{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-height:50vh;overflow-y:auto;padding:2px 6px 8px 2px;}
.dm-chip{font-family:var(--font);font-weight:800;font-size:13.5px;color:#1A3A6B;background:#FFF9C4;border:3px solid #1A3A6B;border-radius:14px;box-shadow:3px 3px 0 #1A3A6B;padding:11px 8px;cursor:pointer;text-align:center;line-height:1.25;}
.dm-chip:nth-child(4n+2){background:#E3F0FF;} .dm-chip:nth-child(4n+3){background:#FFE0E0;} .dm-chip:nth-child(4n+4){background:#E6F8D8;}
.dm-chip:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #1A3A6B;}
.dm-chip.on{background:#D32F2F !important;color:#fff;}
.dm-summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px;}
.dm-pill{font-weight:800;font-size:13px;color:#fff;background:#1A6DB5;border:2.5px solid #1A3A6B;border-radius:999px;padding:4px 12px;}
.dm-pill.alt{background:#F5C200;color:#1A3A6B;}
.dm-label{font-size:12.5px;font-weight:800;color:#1A3A6B;margin:12px 0 7px;}
.device-modal input{width:100%;padding:12px 14px;font-family:inherit;font-size:14px;margin:0;}
.dm-err{min-height:18px;margin:8px 2px 0;font-size:12.5px;font-weight:800;color:#D32F2F;}
.dm-ok{width:100%;margin-top:6px;background:#D32F2F;color:#fff;border:3px solid #1A3A6B;border-radius:14px;padding:13px;font-family:var(--font);font-weight:800;font-size:15px;box-shadow:0 5px 0 #1A3A6B;cursor:pointer;}
.dm-ok:active{transform:translateY(3px);box-shadow:0 2px 0 #1A3A6B;}
html[data-theme="kidcore"] .dm-cancel{color:#1A3A6B;text-decoration:underline;text-underline-offset:3px;}

/* 6. dropdown tema (testimoni, dll) */
.kc-dd{position:relative;}
.kc-dd-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;background:#fff;border:3px solid #1A3A6B;border-radius:12px;padding:11px 14px;box-shadow:3px 3px 0 #1A3A6B;font-family:inherit;font-weight:800;font-size:14px;color:#1A3A6B;cursor:pointer;text-align:left;}
.kc-dd-btn i{font-size:12px;transition:transform .15s;}
.kc-dd.open .kc-dd-btn i{transform:rotate(180deg);}
.kc-dd.open .kc-dd-btn{background:#FFF9C4;}
.kc-dd-list{display:none;margin-top:8px;background:#fff;border:3px solid #1A3A6B;border-radius:14px;box-shadow:4px 4px 0 #1A3A6B;overflow:hidden;}
.kc-dd.open .kc-dd-list{display:block;}
.kc-dd-opt{display:block;width:100%;text-align:left;padding:10px 14px;background:#fff;border:0;border-bottom:2px dashed rgba(26,58,107,.25);font-family:inherit;font-weight:700;font-size:14px;color:#1A3A6B;cursor:pointer;}
.kc-dd-opt:last-child{border-bottom:0;}
.kc-dd-opt:hover,.kc-dd-opt.on{background:#FFF9C4;}
.kc-dd-opt.on::after{content:" ✓";color:#5CB82A;font-weight:900;}

/* 7. modal input pengganti prompt() */
#ssn-ask-wrap{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(26,58,107,.40);backdrop-filter:blur(3px);}
#ssn-ask-wrap.open{display:flex;}
html[data-theme="kidcore"] .ssn-modal{border:4px solid #1A3A6B;box-shadow:8px 8px 0 #1A3A6B;background:#fff;}
html[data-theme="kidcore"] .ssn-modal .m-btn{background:#D32F2F;border:3px solid #1A3A6B;box-shadow:0 5px 0 #1A3A6B;}

/* ---------- blok 4 (dulu <style id="pixel-theme">) ---------- */
/* PIXEL-THEME-START
   Tema "Pixel Game". Semua aturan dikunci ke html[data-theme="pixel"], jadi nggak nyampur sama tema lain.
   (html:root[data-theme="pixel"] = html:root[data-theme="pixel"], diisi saat build) */

html[data-theme="pixel"]{
  --bg:#14183A; --cream:#14183A; --panel:#FFF4D6; --panel-2:#FFFBEA;
  --ink:#14183A; --ink-dim:#3B4270; --bark:#14183A; --bark-soft:#3B4270;
  --apple:#C9301B; --apple-deep:#A32411; --pink:#C9301B; --cyan:#2F8F32; --leaf:#2F8F32;
  --sky:#3D8BFF; --sky-deep:#1F5FCC; --butter:#FFC72C; --gold:#FFC72C;
  --bark-rgb:20,24,58; --apple-rgb:201,48,27; --apple-deep-rgb:163,36,17; --leaf-rgb:47,143,50;
  --sky-rgb:61,139,255; --butter-rgb:255,199,44; --cream-rgb:20,24,58;
  --hero-tint:#14183A; --nav-bg:#0B0E26;
  --font:'Pixelify Sans','Trebuchet MS',sans-serif;
  --font-logo:'Press Start 2P',monospace; --font-cursive:'Press Start 2P',monospace;
  --px-line:#0B0E26; --px-dark:#0B0E26; --px-soft:#CBD3F5;
  color-scheme:dark;
}

/* ---------- dasar ---------- */
html:root[data-theme="pixel"] *, html:root[data-theme="pixel"] *::before, html:root[data-theme="pixel"] *::after{border-radius:0 !important; transition:none !important;}
html:root[data-theme="pixel"] body{
  font-family:var(--font); font-size:18px; color:#FFF4D6;
  background-color:#14183A !important;
  background-image:linear-gradient(#FFF4D6,#FFF4D6),linear-gradient(#FFF4D6,#FFF4D6),linear-gradient(#FFC72C,#FFC72C),linear-gradient(#FFF4D6,#FFF4D6),linear-gradient(#8FC2FF,#8FC2FF),linear-gradient(#FFF4D6,#FFF4D6) !important;
  background-size:4px 4px; background-repeat:no-repeat; background-attachment:fixed;
  background-position:6% 14%,31% 6%,58% 11%,83% 4%,93% 22%,12% 38% !important;
  -webkit-font-smoothing:none;
}
html:root[data-theme="pixel"] button, html:root[data-theme="pixel"] input, html:root[data-theme="pixel"] select, html:root[data-theme="pixel"] textarea{font-family:var(--font);}
html:root[data-theme="pixel"] :focus-visible{outline:4px solid #FFC72C; outline-offset:2px;}
html:root[data-theme="pixel"] ::selection{background:#FFC72C; color:#14183A;}
html:root[data-theme="pixel"] h1, html:root[data-theme="pixel"] h2, html:root[data-theme="pixel"] h3, html:root[data-theme="pixel"] .heading{letter-spacing:0; font-weight:400;}

/* ---------- pengumuman + nav (HUD) ---------- */
html:root[data-theme="pixel"] .announce-bar{background:#0B0E26; color:#FFC72C; font-family:'Press Start 2P',monospace; font-size:10px; padding:11px 0; border-bottom:4px solid #14183A;}
html:root[data-theme="pixel"] body nav{background:#0B0E26 !important; border-bottom:4px solid #FFC72C !important; backdrop-filter:none !important;}
html:root[data-theme="pixel"] body .nav-inner{padding:12px 16px !important; max-width:1120px; gap:14px;}
@media (min-width:820px){ html:root[data-theme="pixel"] body .nav-inner{padding:14px 32px !important;} }
html:root[data-theme="pixel"] body .logo{
  display:grid !important; grid-template-columns:auto 1fr; column-gap:12px; align-items:center; text-shadow:none !important;
  font-family:'Press Start 2P',monospace !important; font-size:13px !important; line-height:1.55; color:#FFF4D6; font-weight:400 !important; letter-spacing:0 !important;
}
html:root[data-theme="pixel"] body .logo::before{
  content:""; grid-row:1 / span 2; width:48px; height:48px; transform:none; filter:none; font-size:0;
  border:4px solid #FFC72C; background:#FF9CCB url("../avatar.png") center/cover no-repeat; display:block;
}
html:root[data-theme="pixel"] body .logo span{display:block; color:#FFC72C !important; transform:none; font-size:inherit;}
html:root[data-theme="pixel"] body .acct-btn, html:root[data-theme="pixel"] body .cart-btn{
  border:4px solid #FFF4D6 !important; box-shadow:4px 4px 0 #000 !important; background:#FFFBEA !important; color:#14183A !important;
  font-family:'Press Start 2P',monospace; font-size:11px; min-height:44px; padding:0 14px;
}
html:root[data-theme="pixel"] body .cart-btn:not(.acct-btn){background:#FFC72C !important; color:#14183A !important;}
html:root[data-theme="pixel"] body .cart-btn:hover{transform:translate(2px,2px); box-shadow:2px 2px 0 #000 !important; border-color:#FFF4D6 !important;}
html:root[data-theme="pixel"] .acct-btn .acct-label{font-family:'Press Start 2P',monospace; font-size:10px;}
html:root[data-theme="pixel"] .cart-count{background:#14183A; color:#FFC72C; font-family:'Press Start 2P',monospace; font-size:10px; width:auto; min-width:22px; height:22px; padding:0 4px;}

@media (max-width:560px){
  html:root[data-theme="pixel"] body .nav-inner{padding:10px 10px !important; gap:6px;}
  html:root[data-theme="pixel"] body .logo{font-size:10px !important; column-gap:8px;}
  html:root[data-theme="pixel"] body .logo::before{width:40px; height:40px; border-width:3px;}
  html:root[data-theme="pixel"] .nav-actions{gap:6px;}
  html:root[data-theme="pixel"] body .acct-btn, html:root[data-theme="pixel"] body .cart-btn{padding:0 10px; min-width:44px; justify-content:center; box-shadow:3px 3px 0 #000 !important; border-width:3px !important;}
  html:root[data-theme="pixel"] .wm-dd-btn{font-size:8px; padding:0 8px 0 10px; border-width:3px !important; box-shadow:3px 3px 0 #000; gap:6px;}
  html:root[data-theme="pixel"] body .nav-inner{gap:10px;}
}
/* dropdown tema */
html:root[data-theme="pixel"] .wm-dd-btn{background:#FFF4D6; color:#14183A; border:4px solid #FFC72C !important; border-radius:0 !important; box-shadow:4px 4px 0 #000; font-family:'Press Start 2P',monospace; font-size:10px; padding:0 12px 0 14px;}
html:root[data-theme="pixel"] .wm-dd-caret{border-top-color:#14183A; border-left-width:5px; border-right-width:5px;}
html:root[data-theme="pixel"] .wm-dd-list{background:#FFF4D6; border:4px solid #000 !important; border-radius:0 !important; box-shadow:4px 4px 0 #000; padding:4px;}
html:root[data-theme="pixel"] .wm-dd-list li{border-radius:0 !important; font-family:'Pixelify Sans',sans-serif; font-weight:700; font-size:17px; color:#14183A;}
html:root[data-theme="pixel"] .wm-dd-list li:hover,html:root[data-theme="pixel"] .wm-dd-list li:focus{background:#FFC72C;}
html:root[data-theme="pixel"] .wm-dd-list li[aria-selected="true"]::before{content:"▶ "; font-size:11px;}

/* ---------- hero ---------- */
html:root[data-theme="pixel"] body .hero{
  display:grid !important; grid-template-columns:minmax(0,1fr) 320px; column-gap:56px; align-items:center; text-align:left;
  max-width:none !important; width:100%; margin:0 !important; position:relative; overflow:hidden;
  padding:64px max(16px, calc((100% - 1120px)/2 + 32px)) 116px !important;
  border:0 !important; border-bottom:4px solid #0B0E26 !important; box-shadow:none !important;
  background-color:#5CB8FF !important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6' shape-rendering='crispEdges'%3E%3Crect x='4' width='6' height='1' fill='%23fff'/%3E%3Crect x='2' y='1' width='10' height='1' fill='%23fff'/%3E%3Crect y='2' width='14' height='3' fill='%23fff'/%3E%3Crect x='1' y='5' width='12' height='1' fill='%23D6ECFF'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6' shape-rendering='crispEdges'%3E%3Crect x='4' width='6' height='1' fill='%23fff'/%3E%3Crect x='2' y='1' width='10' height='1' fill='%23fff'/%3E%3Crect y='2' width='14' height='3' fill='%23fff'/%3E%3Crect x='1' y='5' width='12' height='1' fill='%23D6ECFF'/%3E%3C/svg%3E"),
    linear-gradient(#5CB8FF 0 38%,#7CC8FF 38% 68%,#A8DBFF 68% 100%) !important;
  background-size:140px 60px,112px 48px,100% 100% !important;
  background-position:5% 36px,92% 120px,0 0 !important;
  background-repeat:no-repeat !important;
}
html:root[data-theme="pixel"] body .hero > *{grid-column:1; position:relative; z-index:1; margin-left:0 !important; margin-right:0 !important;}
html:root[data-theme="pixel"] body .hero::before{
  content:"" !important; display:block !important; position:relative !important; inset:auto !important; height:auto !important;
  grid-column:2; grid-row:1 / span 6; width:100%; aspect-ratio:1/1; align-self:center; justify-self:center; max-width:320px;
  background:#FF9CCB url("../avatar.png") center/cover no-repeat !important;
  border:8px solid #14183A; box-shadow:12px 12px 0 #0B0E26; z-index:1;
}
html:root[data-theme="pixel"] body .hero::after{
  content:"" !important; display:block !important; position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important; top:auto !important;
  height:56px !important; opacity:1 !important; background-size:auto !important; background-repeat:no-repeat !important;
  background-image:linear-gradient(#5ED04C 0 16px,#2F8F32 16px 24px,#8A5A2B 24px 100%) !important; z-index:0;
}
html:root[data-theme="pixel"] body .hero-sticker{display:none !important;}
html:root[data-theme="pixel"] body #home-hero h1{
  font-family:'Press Start 2P',monospace !important; font-weight:400 !important; text-transform:uppercase;
  font-size:clamp(24px,4.4vw,50px) !important; line-height:1.35 !important; letter-spacing:0 !important; margin:0 0 28px !important; color:#FFF4D6;
  text-shadow:4px 0 #14183A,-4px 0 #14183A,0 4px #14183A,0 -4px #14183A,4px 4px #14183A,-4px -4px #14183A,4px -4px #14183A,-4px 4px #14183A,8px 8px 0 #0B0E26;
}
html:root[data-theme="pixel"] body #home-hero h1 .accent{color:#C9301B;}
html:root[data-theme="pixel"] .h1-deco{display:none;}
html:root[data-theme="pixel"] body .hero-script{
  position:relative; background:#FFF4D6; color:#14183A !important; border:4px solid #14183A;
  box-shadow:inset 0 0 0 4px #FFFBEA, 8px 8px 0 #0B0E26; padding:26px 24px 20px !important; margin:0 0 30px !important; max-width:none !important;
  font-family:var(--font); font-size:19px !important; line-height:1.55 !important; font-weight:600; text-align:left;
}
html:root[data-theme="pixel"] body .hero-script::before{
  content:"MISHKA"; position:absolute; top:-18px; left:20px; background:#FF7EB6; color:#14183A; border:4px solid #14183A;
  font-family:'Press Start 2P',monospace; font-size:10px; line-height:1; padding:7px 10px;
}
html:root[data-theme="pixel"] body .hero-script .script-tail{color:#A32411 !important;}
html:root[data-theme="pixel"] .open-chip{
  background:#14183A; color:#7CF06A; border:4px solid #7CF06A; font-family:'Press Start 2P',monospace; font-size:10px; line-height:1.6;
  padding:9px 12px; margin:0 0 24px; box-shadow:4px 4px 0 #0B0E26; text-align:left;
}
html:root[data-theme="pixel"] .open-chip .dot{background:#7CF06A; width:10px; height:10px; animation:px-blink 1s steps(1) infinite;}
@keyframes px-blink{50%{opacity:0}}
html:root[data-theme="pixel"] body .hero .search-wrap{
  max-width:560px; width:100%; margin:0 0 22px !important; border:0 !important; box-shadow:none !important; background:transparent !important;
}
html:root[data-theme="pixel"] body .hero .search-wrap input{
  background:#FFF4D6 !important; color:#14183A; border:4px solid #14183A !important; box-shadow:6px 6px 0 #0B0E26 !important;
  font-family:var(--font); font-size:17px; font-weight:600; padding:14px 46px;
}
html:root[data-theme="pixel"] .search-wrap > i{color:#14183A;}
html:root[data-theme="pixel"] .search-clear{background:#FFC72C; color:#14183A; border:3px solid #14183A;}
html:root[data-theme="pixel"] body .hero-chips{justify-content:flex-start; gap:12px; margin-top:0;}
html:root[data-theme="pixel"] body .hero-chips span, html:root[data-theme="pixel"] body .hero-chips a{
  border:4px solid #0B0E26 !important; box-shadow:4px 4px 0 #000; color:#14183A !important; font-family:var(--font); font-size:15px !important; font-weight:700; padding:7px 12px !important;
}
html:root[data-theme="pixel"] body .hero-chips .c1{background:#FFC72C !important;} html:root[data-theme="pixel"] body .hero-chips .c2{background:#FF9CCB !important;} html:root[data-theme="pixel"] body .hero-chips .c3{background:#8FC2FF !important;}
@media (max-width:819px){
  html:root[data-theme="pixel"] body .hero{grid-template-columns:minmax(0,1fr); padding:40px 16px 100px !important; text-align:center;}
  html:root[data-theme="pixel"] body .hero::before{grid-column:1; grid-row:auto; width:176px; border-width:6px; box-shadow:8px 8px 0 #0B0E26; margin:0 auto 28px; order:-1;}
  html:root[data-theme="pixel"] body .hero > *{justify-self:stretch;}
  html:root[data-theme="pixel"] body #home-hero h1{font-size:clamp(20px,7vw,30px) !important;}
  html:root[data-theme="pixel"] body .hero-chips{justify-content:center;}
  html:root[data-theme="pixel"] .open-chip{justify-self:center;}
  html:root[data-theme="pixel"] body .hero-script{font-size:18px !important; padding:24px 16px 16px !important;}
}

/* ---------- ticker ---------- */
html:root[data-theme="pixel"] body .marquee-wrap{
  transform:none !important; margin:0 0 0 calc(-50vw + 50%) !important; width:100vw; padding:14px 0 !important;
  background:#0B0E26 !important; border:0 !important; border-bottom:4px solid #FFC72C !important;
}
html:root[data-theme="pixel"] body .channel-badge{
  background:#FFF4D6 !important; color:#14183A !important; border:4px solid #14183A !important; box-shadow:4px 4px 0 #000 !important;
  font-family:'Press Start 2P',monospace; font-size:10px; padding:10px 16px;
}
html:root[data-theme="pixel"] body .channel-badge:hover{transform:translate(2px,2px);}

/* ---------- section + tab (stage select) ---------- */
html:root[data-theme="pixel"] body #produk{max-width:1120px; margin:0 auto !important; padding:56px 16px 24px !important; background:none !important;}
@media (min-width:820px){ html:root[data-theme="pixel"] body #produk{padding:64px 32px 32px !important;} }
html:root[data-theme="pixel"] .cat-row .tabs{display:flex !important; flex-wrap:wrap; justify-content:flex-start !important; gap:16px; overflow:visible; padding:4px 4px 14px; counter-reset:lv;}
html:root[data-theme="pixel"] .cat-row .tab-btn{
  flex:1 1 150px; min-width:0; flex-direction:column; align-items:flex-start !important; justify-content:flex-start; gap:12px; text-align:left;
  min-height:96px; padding:16px 16px !important; background:#FFB067 !important; color:#14183A !important;
  border:4px solid #0B0E26 !important; box-shadow:6px 6px 0 #000 !important; font-family:'Press Start 2P',monospace; font-size:12px; line-height:1.5; white-space:normal;
  counter-increment:lv;
}
html:root[data-theme="pixel"] .cat-row .tab-btn::before{content:"LV." counter(lv); font-size:10px;}
html:root[data-theme="pixel"] .cat-row .tab-btn[data-cat="semua"]{counter-increment:none; background:#FFF4D6 !important;}
html:root[data-theme="pixel"] .cat-row .tab-btn[data-cat="semua"]::before{content:"ALL";}
html:root[data-theme="pixel"] .cat-row .tab-btn[data-cat="education"]{background:#8FC2FF !important;}
html:root[data-theme="pixel"] .cat-row .tab-btn[data-cat="music"]{background:#FF9CCB !important;}
html:root[data-theme="pixel"] .cat-row .tab-btn[data-cat="editing"]{background:#9BE58A !important;}
html:root[data-theme="pixel"] .cat-row .tab-btn[data-cat="other"]{background:#B7A8FF !important;}
html:root[data-theme="pixel"] .cat-row .tab-btn.active{outline:4px solid #FFC72C; outline-offset:2px; transform:translate(3px,3px); box-shadow:3px 3px 0 #000 !important;}
html:root[data-theme="pixel"] .cat-row .tab-btn:hover{transform:translate(2px,2px); box-shadow:4px 4px 0 #000 !important;}
html:root[data-theme="pixel"] .section-head{text-align:left; margin:36px 0 22px !important;}
html:root[data-theme="pixel"] .section-head h2, html:root[data-theme="pixel"] body .section-head h2{font-family:'Press Start 2P',monospace !important; font-weight:400 !important; font-size:clamp(15px,2.4vw,22px) !important; line-height:1.6; color:#FFF4D6; text-transform:uppercase;}
html:root[data-theme="pixel"] .section-head p{color:#CBD3F5; font-size:19px;}
html:root[data-theme="pixel"] .empty-state{color:#CBD3F5;} html:root[data-theme="pixel"] .empty-state .heading{color:#FFF4D6; font-family:'Press Start 2P',monospace; font-size:14px;}

/* judul blok beranda */
html:root[data-theme="pixel"] .home-h{font-family:'Press Start 2P',monospace; font-weight:400; font-size:16px; line-height:1.7; color:#FFF4D6; margin:44px 0 20px;}
html:root[data-theme="pixel"] .home-h small{font-family:var(--font); font-size:18px; font-weight:600; color:#CBD3F5;}
@media (max-width:560px){ html:root[data-theme="pixel"] .home-h{font-size:13px;} }

/* ---------- kartu item ---------- */
html:root[data-theme="pixel"] .card, html:root[data-theme="pixel"] .brand-card, html:root[data-theme="pixel"] .detail-head, html:root[data-theme="pixel"] .variant-row, html:root[data-theme="pixel"] .bundle-card, html:root[data-theme="pixel"] .laris-card, html:root[data-theme="pixel"] .rak-box, html:root[data-theme="pixel"] .dur-title, html:root[data-theme="pixel"] .bx-card, html:root[data-theme="pixel"] .akun-card, html:root[data-theme="pixel"] .akun-stat, html:root[data-theme="pixel"] .admin-note, html:root[data-theme="pixel"] .panel-box, html:root[data-theme="pixel"] .order-id-card{
  background:#FFF4D6 !important; color:#14183A; border:4px solid #0B0E26 !important;
  box-shadow:inset 0 0 0 4px #FFFBEA, 6px 6px 0 #000 !important;
}
html:root[data-theme="pixel"] .card:hover, html:root[data-theme="pixel"] .brand-card:hover, html:root[data-theme="pixel"] .bundle-card:hover, html:root[data-theme="pixel"] .laris-card:hover{transform:translate(0,-4px); border-color:#0B0E26 !important;}
html:root[data-theme="pixel"] .card h3, html:root[data-theme="pixel"] .brand-card .b-name, html:root[data-theme="pixel"] .detail-head .b-name, html:root[data-theme="pixel"] .bundle-card h3, html:root[data-theme="pixel"] .variant-row .v-name{font-family:'Press Start 2P',monospace; font-weight:400; font-size:12px; line-height:1.6;}
html:root[data-theme="pixel"] .card .desc, html:root[data-theme="pixel"] .brand-card .b-meta, html:root[data-theme="pixel"] .brand-card .b-from, html:root[data-theme="pixel"] .detail-head .b-sub, html:root[data-theme="pixel"] .bundle-card .b-tag{color:#3B4270; font-size:16px; font-weight:600;}
html:root[data-theme="pixel"] .card .price, html:root[data-theme="pixel"] .brand-card .b-from b, html:root[data-theme="pixel"] .variant-row .v-price, html:root[data-theme="pixel"] .bundle-card .bundle-price-row .now{font-family:'Press Start 2P',monospace; font-weight:400; font-size:14px; color:#14183A;}
html:root[data-theme="pixel"] .brand-card .b-cta{color:#A32411; font-family:'Press Start 2P',monospace; font-size:10px;}
html:root[data-theme="pixel"] .brand-avatar, html:root[data-theme="pixel"] .mono-av{
  border:4px solid #14183A !important; box-shadow:3px 3px 0 #0B0E26; font-family:'Press Start 2P',monospace !important; font-weight:400 !important; font-size:20px !important; color:#14183A !important;
}
html:root[data-theme="pixel"] .v-chip{background:#14183A; color:#FFC72C; border:0; font-family:'Press Start 2P',monospace; font-size:10px; font-weight:400; padding:6px 8px;}
html:root[data-theme="pixel"] .variant-row .v-add, html:root[data-theme="pixel"] .card .addbtn, html:root[data-theme="pixel"] .bundle-card .addbtn, html:root[data-theme="pixel"] .bx-btn{
  background:#C9301B !important; color:#FFF4D6 !important; border:4px solid #14183A !important; box-shadow:4px 4px 0 #0B0E26 !important;
  font-family:'Press Start 2P',monospace; font-weight:400; font-size:10px; line-height:1.5; min-height:46px; padding:6px 12px;
}
html:root[data-theme="pixel"] .variant-row .v-add:hover, html:root[data-theme="pixel"] .card .addbtn:hover, html:root[data-theme="pixel"] .bundle-card .addbtn:hover, html:root[data-theme="pixel"] .bx-btn:hover{background:#A32411 !important; transform:translate(2px,2px); box-shadow:2px 2px 0 #0B0E26 !important;}
html:root[data-theme="pixel"] .v-habis-badge{background:#C9301B; color:#FFF4D6; border:0; font-family:'Press Start 2P',monospace; font-size:10px; font-weight:400;}
html:root[data-theme="pixel"] .v-notify{background:#D9D5C4; color:#14183A; border:4px solid #14183A; box-shadow:4px 4px 0 #0B0E26; font-family:'Press Start 2P',monospace; font-size:9px; line-height:1.5; padding:10px 12px;}
html:root[data-theme="pixel"] .variant-row.is-habis{opacity:1; filter:none; background:#D9D5C4 !important;}
html:root[data-theme="pixel"] .dur-title{font-family:'Press Start 2P',monospace; font-weight:400; font-size:12px; background:#FFB067 !important;}
html:root[data-theme="pixel"] .dur-title i{color:#14183A;}
html:root[data-theme="pixel"] .plan-name{color:#CBD3F5; font-family:'Press Start 2P',monospace; font-size:10px;}
html:root[data-theme="pixel"] .plan-info, html:root[data-theme="pixel"] .bundle-note{background:#FFFBEA; color:#14183A; border:4px dashed #14183A; box-shadow:none;}
html:root[data-theme="pixel"] .save-chip, html:root[data-theme="pixel"] .bx-save{background:#4CB944; color:#14183A; border:3px solid #14183A; font-family:'Press Start 2P',monospace; font-size:9px; font-weight:400;}
html:root[data-theme="pixel"] .bundle-card .ribbon{background:#C9301B; border:3px solid #14183A; box-shadow:none; font-family:'Press Start 2P',monospace; font-size:9px; font-weight:400;}
html:root[data-theme="pixel"] .back-link{color:#FFC72C; font-family:'Press Start 2P',monospace; font-size:11px;}

/* laris / rak / bundle */
html:root[data-theme="pixel"] .laris-card{box-shadow:inset 0 0 0 4px #FFFBEA, 6px 6px 0 #000 !important;}
html:root[data-theme="pixel"] .laris-card .rank{background:#FFC72C; border:4px solid #14183A; font-family:'Press Start 2P',monospace; font-weight:400; font-size:12px;}
html:root[data-theme="pixel"] .laris-card b{font-family:'Press Start 2P',monospace; font-weight:400; font-size:11px; line-height:1.6;}
html:root[data-theme="pixel"] .rak-tile b{font-family:var(--font); font-weight:700; font-size:15px; line-height:1.25;}
html:root[data-theme="pixel"] .rak-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));}
html:root[data-theme="pixel"] .laris-card small, html:root[data-theme="pixel"] .rak-tile small{color:#3B4270; font-size:15px; font-weight:600;}
html:root[data-theme="pixel"] .rak-box{padding:20px;}
html:root[data-theme="pixel"] .rak-tile:hover{background:rgba(20,24,58,.10);}
html:root[data-theme="pixel"] .rak-tile .brand-avatar{box-shadow:3px 3px 0 #0B0E26;}
html:root[data-theme="pixel"] .hero-chips-btn{background:#FFC72C; color:#14183A; border:4px solid #14183A; box-shadow:4px 4px 0 #0B0E26; font-family:'Press Start 2P',monospace; font-size:10px; font-weight:400; line-height:1.5; padding:10px 16px;}
html:root[data-theme="pixel"] .quiz-banner{background:#0B0E26; border:4px solid #FFC72C; box-shadow:8px 8px 0 #000; color:#FFF4D6;}
html:root[data-theme="pixel"] .quiz-banner b{font-family:'Press Start 2P',monospace; font-weight:400; font-size:14px; line-height:1.6; color:#FFF4D6;}
html:root[data-theme="pixel"] .quiz-banner span{color:#CBD3F5; font-size:18px;}
html:root[data-theme="pixel"] .quiz-banner button{background:#FFC72C; color:#14183A; border:4px solid #FFF4D6; box-shadow:4px 4px 0 #000; font-family:'Press Start 2P',monospace; font-weight:400; font-size:11px;}
html:root[data-theme="pixel"] .quiz-opt{background:#FFF4D6; color:#14183A; border:4px solid #14183A; font-size:17px;}
html:root[data-theme="pixel"] .quiz-opt:hover{background:#FFC72C;}
html:root[data-theme="pixel"] .quiz-pick{border:4px dashed #14183A;}
html:root[data-theme="pixel"] .bundle-scroll .bundle-card:nth-child(odd), html:root[data-theme="pixel"] .bundle-scroll .bundle-card:nth-child(even){transform:none;}
html:root[data-theme="pixel"] .bx-card{background:#FFF4D6; border:4px solid #0B0E26; box-shadow:inset 0 0 0 4px #FFFBEA, 6px 6px 0 #000; color:#14183A;}
html:root[data-theme="pixel"] .bx-head{border-bottom:4px solid #0B0E26;}
html:root[data-theme="pixel"] .bx-body{color:#14183A;}
html:root[data-theme="pixel"] .bx-body h3{font-family:'Press Start 2P',monospace; font-weight:400; font-size:12px; line-height:1.7;}
html:root[data-theme="pixel"] .bx-items{color:#3B4270; font-size:16px;}
html:root[data-theme="pixel"] .bx-price b{font-family:'Press Start 2P',monospace; font-weight:400; font-size:15px; color:#14183A;}
html:root[data-theme="pixel"] .bx-price s{color:#3B4270;}
html:root[data-theme="pixel"] .testi-card{border:4px solid #0B0E26; box-shadow:6px 6px 0 #000;}
html:root[data-theme="pixel"] .testi-card blockquote, html:root[data-theme="pixel"] .testi-card figcaption{color:#14183A; font-size:17px;}
html:root[data-theme="pixel"] .testi-card .vb{background:#4CB944; border:3px solid #14183A; color:#14183A;}

/* FAQ / catatan */
html:root[data-theme="pixel"] body #home-faq .faq-item{background:#FFF4D6; color:#14183A; border:4px solid #0B0E26; box-shadow:inset 0 0 0 4px #FFFBEA, 6px 6px 0 #000 !important; margin-bottom:18px;}
html:root[data-theme="pixel"] #home-faq .faq-item > summary{font-family:'Press Start 2P',monospace; font-weight:400; font-size:11px; line-height:1.7; color:#14183A; min-height:60px; padding:6px 18px;}
html:root[data-theme="pixel"] #home-faq .faq-item > summary::after{color:#C9301B; font-family:'Press Start 2P',monospace; font-size:16px;}
html:root[data-theme="pixel"] #home-faq .faq-item > div{font-size:17px; color:#14183A;}
html:root[data-theme="pixel"] .how-box{background:#FFFBEA; border:4px dashed #14183A; color:#14183A;}
html:root[data-theme="pixel"] .how-box .how-title, html:root[data-theme="pixel"] .rs-title, html:root[data-theme="pixel"] .why-card h2{font-family:'Press Start 2P',monospace !important; font-weight:400 !important; color:#A32411; line-height:1.7;}
html:root[data-theme="pixel"] .how-box li, html:root[data-theme="pixel"] .how-box li b, html:root[data-theme="pixel"] .rs-note, html:root[data-theme="pixel"] .why-lead, html:root[data-theme="pixel"] .why-list li, html:root[data-theme="pixel"] .fine-note, html:root[data-theme="pixel"] .fine-note b{color:#14183A;}
html:root[data-theme="pixel"] .rs-items span{border:3px dashed #14183A; color:#14183A; background:#FFFBEA;}
html:root[data-theme="pixel"] .rs-items span.ok{border-style:solid; border-color:#2F8F32 !important; color:#14183A !important; background:#CFF5C4;}
html:root[data-theme="pixel"] .why-card, html:root[data-theme="pixel"] .rules-box{background:#FFFBEA; border:4px solid #14183A; box-shadow:none; color:#14183A;}
html:root[data-theme="pixel"] .why-stats span{border:3px solid #14183A; background:#FFF4D6; color:#14183A;}
html:root[data-theme="pixel"] .why-stats b, html:root[data-theme="pixel"] .why-list li .mark{color:#C9301B !important;}
html:root[data-theme="pixel"] .why-card::before{content:"" !important;}

/* ---------- footer + float ---------- */
html:root[data-theme="pixel"] body footer{background:#0B0E26 !important; border-top:4px solid #FFC72C !important; color:#CBD3F5 !important; margin-top:40px; font-size:17px;}
html:root[data-theme="pixel"] body footer a, html:root[data-theme="pixel"] body footer b, html:root[data-theme="pixel"] body footer strong{color:#FFC72C !important;}
html:root[data-theme="pixel"] .contact-float .contact-btn, html:root[data-theme="pixel"] .wa-float, html:root[data-theme="pixel"] .cf-toggle{background:#FFC72C !important; color:#14183A !important; border:4px solid #14183A !important; box-shadow:4px 4px 0 #000 !important; animation:none;}
html:root[data-theme="pixel"] .wa-float{background:#4CB944 !important;}

/* ---------- keranjang ---------- */
html:root[data-theme="pixel"] #overlay{background:rgba(11,14,38,.72);}
html:root[data-theme="pixel"] #cart-drawer{background:#FFF4D6; color:#14183A; border-left:4px solid #0B0E26; box-shadow:-8px 0 0 #000;}
html:root[data-theme="pixel"] .drawer-head{border-bottom:4px solid #14183A;}
html:root[data-theme="pixel"] .drawer-head .title, html:root[data-theme="pixel"] .drawer-foot .total-row{font-family:'Press Start 2P',monospace; font-weight:400; font-size:12px; line-height:1.6;}
html:root[data-theme="pixel"] .drawer-foot{background:#FFFBEA; border-bottom:4px solid #14183A;}
html:root[data-theme="pixel"] .close-btn, html:root[data-theme="pixel"] .qty-ctrl button{background:#FFC72C; color:#14183A; border:4px solid #14183A; box-shadow:3px 3px 0 #0B0E26; width:36px; height:36px;}
html:root[data-theme="pixel"] .qty-ctrl button{width:30px; height:30px; border-width:3px;}
html:root[data-theme="pixel"] .cart-line .name{font-size:17px;} html:root[data-theme="pixel"] .cart-line .p, html:root[data-theme="pixel"] .empty-cart{color:#3B4270; font-size:16px;}
html:root[data-theme="pixel"] .checkout-go-btn, html:root[data-theme="pixel"] .make-order-btn, html:root[data-theme="pixel"] .btn-primary, html:root[data-theme="pixel"] .ssn-modal .m-btn, html:root[data-theme="pixel"] .dm-ok{
  background:#C9301B !important; color:#FFF4D6 !important; border:4px solid #14183A !important; box-shadow:5px 5px 0 #0B0E26 !important;
  font-family:'Press Start 2P',monospace; font-weight:400; font-size:12px; line-height:1.5; min-height:52px;
}
html:root[data-theme="pixel"] .checkout-go-btn:hover, html:root[data-theme="pixel"] .make-order-btn:hover, html:root[data-theme="pixel"] .ssn-modal .m-btn:hover{transform:translate(2px,2px); box-shadow:3px 3px 0 #0B0E26 !important;}
html:root[data-theme="pixel"] .btn-ghost, html:root[data-theme="pixel"] .download-btn, html:root[data-theme="pixel"] .again-btn{background:#FFF4D6; color:#14183A; border:4px solid #14183A; box-shadow:5px 5px 0 #0B0E26; font-family:'Press Start 2P',monospace; font-weight:400; font-size:11px;}

/* ---------- checkout / form ---------- */
html:root[data-theme="pixel"] .panel-box .title{font-family:'Press Start 2P',monospace; font-weight:400; font-size:12px; line-height:1.7;}
html:root[data-theme="pixel"] .panel-box input, html:root[data-theme="pixel"] .panel-box textarea, html:root[data-theme="pixel"] .panel-box select, html:root[data-theme="pixel"] .device-field, html:root[data-theme="pixel"] .testi-form select, html:root[data-theme="pixel"] .testi-form textarea, html:root[data-theme="pixel"] #ssn-ask-input, html:root[data-theme="pixel"] .voucher-row input{
  background:#FFFBEA; color:#14183A; border:4px solid #14183A !important; font-family:var(--font); font-size:17px; font-weight:600;
}
html:root[data-theme="pixel"] .panel-box input:focus, html:root[data-theme="pixel"] .panel-box textarea:focus, html:root[data-theme="pixel"] .panel-box select:focus{border-color:#C9301B !important;}
html:root[data-theme="pixel"] input::placeholder, html:root[data-theme="pixel"] textarea::placeholder{color:#6B7399;}
html:root[data-theme="pixel"] .device-field span{color:#6B7399;} html:root[data-theme="pixel"] .device-field.filled span{color:#14183A; font-weight:700;} html:root[data-theme="pixel"] .device-field i{color:#14183A;}
html:root[data-theme="pixel"] .step-num{background:#C9301B; color:#FFF4D6; border:3px solid #14183A; font-family:'Press Start 2P',monospace; font-size:10px; width:26px; height:26px;}
html:root[data-theme="pixel"] .req-chip{background:#C9301B; color:#FFF4D6; border:3px solid #14183A; font-family:'Press Start 2P',monospace; font-size:8px; font-weight:400;}
html:root[data-theme="pixel"] .pay-total{background:#FFC72C; color:#14183A; border:4px solid #14183A; box-shadow:4px 4px 0 #0B0E26;}
html:root[data-theme="pixel"] .pay-total b{font-family:'Press Start 2P',monospace; font-weight:400; font-size:14px;}
html:root[data-theme="pixel"] .pay-card{background:#FFFBEA; color:#14183A; border:4px solid #14183A; box-shadow:4px 4px 0 #0B0E26; font-family:'Press Start 2P',monospace; font-weight:400; font-size:10px; line-height:1.5;}
html:root[data-theme="pixel"] .pay-card.selected{background:#C9301B !important; color:#FFF4D6 !important; border-color:#14183A !important; transform:translate(2px,2px); box-shadow:2px 2px 0 #0B0E26;}
html:root[data-theme="pixel"] .payment-detail{background:#FFFBEA; color:#14183A; border:4px dashed #14183A;}
html:root[data-theme="pixel"] .upload-box{background:#FFFBEA; border:4px dashed #14183A;}
html:root[data-theme="pixel"] .upload-box.done{border-style:solid; background:#CFF5C4;}
html:root[data-theme="pixel"] .file-upload-btn, html:root[data-theme="pixel"] .voucher-row button{background:#FFC72C; color:#14183A; border:4px solid #14183A; box-shadow:3px 3px 0 #0B0E26; font-family:'Press Start 2P',monospace; font-weight:400; font-size:10px;}
html:root[data-theme="pixel"] .order-id-card .oid-num{font-family:'Press Start 2P',monospace; font-size:16px; color:#A32411;}
html:root[data-theme="pixel"] .order-id-card .oid-label, html:root[data-theme="pixel"] .order-id-card .oid-note, html:root[data-theme="pixel"] .checkout-items, html:root[data-theme="pixel"] .file-upload-label{color:#3B4270;}
html:root[data-theme="pixel"] .checkout-grid > *{background:transparent; box-shadow:none;}
html:root[data-theme="pixel"] .receipt, html:root[data-theme="pixel"] .order-card{background:#FFF4D6; color:#14183A; border:4px solid #0B0E26; box-shadow:inset 0 0 0 4px #FFFBEA, 6px 6px 0 #000;}
html:root[data-theme="pixel"] .receipt .paper{background:#FFFBEA; box-shadow:none; transform:none;}
html:root[data-theme="pixel"] .receipt .pin{background:#C9301B; box-shadow:none;}
html:root[data-theme="pixel"] .order-card .oc-badge{background:#C9301B; border:3px solid #14183A; font-family:'Press Start 2P',monospace; font-size:9px; font-weight:400;}
html:root[data-theme="pixel"] .order-card .oc-brand, html:root[data-theme="pixel"] .order-card .oc-total{font-family:'Press Start 2P',monospace; font-weight:400; font-size:13px;}
html:root[data-theme="pixel"] .success-check{background:#4CB944; color:#14183A; border:4px solid #14183A;}
html:root[data-theme="pixel"] .success-wrap h2{font-family:'Press Start 2P',monospace; font-weight:400; font-size:16px; line-height:1.6; color:#FFF4D6;}
html:root[data-theme="pixel"] .success-wrap .note, html:root[data-theme="pixel"] .card-block-label{color:#CBD3F5;}
html:root[data-theme="pixel"] .wa-send-btn{border:4px solid #14183A; box-shadow:5px 5px 0 #0B0E26; font-family:'Press Start 2P',monospace; font-weight:400; font-size:11px;}

/* ---------- akun / stempel ---------- */
html:root[data-theme="pixel"] .akun-hello{font-family:'Press Start 2P',monospace; font-weight:400; font-size:16px; line-height:1.6; color:#FFF4D6;}
html:root[data-theme="pixel"] .akun-sub{color:#CBD3F5;}
html:root[data-theme="pixel"] .akun-h{font-family:'Press Start 2P',monospace; font-weight:400; font-size:12px; color:#FFC72C;}
html:root[data-theme="pixel"] .akun-stat b{font-family:'Press Start 2P',monospace; font-weight:400; font-size:13px;}
html:root[data-theme="pixel"] .akun-code{background:#FFFBEA; color:#14183A; border:4px dashed #14183A;}
html:root[data-theme="pixel"] .akun-code b{font-family:'Press Start 2P',monospace; font-size:15px;}
html:root[data-theme="pixel"] .stamp-card{background:#0B0E26; color:#FFF4D6; border:4px solid #FFC72C; box-shadow:6px 6px 0 #000;}
html:root[data-theme="pixel"] .stamp-top span, html:root[data-theme="pixel"] .stamp-note{color:#CBD3F5;}
html:root[data-theme="pixel"] .stamp{border:4px solid #FFF4D6; background:#14183A; color:#6B7399; font-family:'Press Start 2P',monospace; font-size:10px;}
html:root[data-theme="pixel"] .stamp.on{border-style:solid; background:#C9301B; color:#FFF4D6;}
html:root[data-theme="pixel"] .st-chip{border:3px solid #14183A; font-family:'Press Start 2P',monospace; font-size:8px; font-weight:400; padding:5px 8px;}
html:root[data-theme="pixel"] .tracker div::before{background:#B8B09A; height:8px;} html:root[data-theme="pixel"] .tracker div.on::before{background:#C9301B;}
html:root[data-theme="pixel"] .wbar{background:#B8B09A; height:12px;} html:root[data-theme="pixel"] .wbar i{background:#4CB944;}
html:root[data-theme="pixel"] .akun-actions button, html:root[data-theme="pixel"] .mini-btn{background:#FFF4D6; color:#14183A; border:4px solid #14183A; box-shadow:3px 3px 0 #0B0E26; font-family:'Press Start 2P',monospace; font-weight:400; font-size:9px; padding:9px 12px;}
html:root[data-theme="pixel"] .akun-actions button.primary, html:root[data-theme="pixel"] .mini-btn.primary{background:#C9301B; color:#FFF4D6;}

/* ---------- popup ---------- */
html:root[data-theme="pixel"] #ssn-modal-wrap, html:root[data-theme="pixel"] #device-modal-wrap, html:root[data-theme="pixel"] #ssn-ask-wrap{background:rgba(11,14,38,.78); backdrop-filter:none;}
html:root[data-theme="pixel"] .ssn-modal, html:root[data-theme="pixel"] .device-modal{background:#FFF4D6 !important; color:#14183A; border:4px solid #0B0E26 !important; box-shadow:inset 0 0 0 4px #FFFBEA, 8px 8px 0 #000 !important;}
@media (max-width:639px){ html:root[data-theme="pixel"] .device-modal{box-shadow:inset 0 0 0 4px #FFFBEA, 0 -6px 0 #000 !important;} }
html:root[data-theme="pixel"] .ssn-modal .m-title, html:root[data-theme="pixel"] .device-modal .dm-title{font-family:'Press Start 2P',monospace; font-weight:400; font-size:13px; line-height:1.7; color:#14183A;}
html:root[data-theme="pixel"] .ssn-modal .m-text{color:#3B4270; font-size:18px;}
html:root[data-theme="pixel"] .dm-step{background:#FFC72C; color:#14183A; border:3px solid #14183A; font-family:'Press Start 2P',monospace; font-size:9px; font-weight:400;}
html:root[data-theme="pixel"] .dm-back{background:#FFFBEA; color:#14183A; border:4px solid #14183A; box-shadow:3px 3px 0 #0B0E26;}
html:root[data-theme="pixel"] .dm-opt, html:root[data-theme="pixel"] .dm-chip{background:#FFFBEA !important; color:#14183A; border:4px solid #14183A !important; box-shadow:4px 4px 0 #0B0E26 !important; font-family:'Press Start 2P',monospace; font-weight:400; font-size:10px; line-height:1.6;}
html:root[data-theme="pixel"] .dm-chip:nth-child(4n+2){background:#8FC2FF !important;} html:root[data-theme="pixel"] .dm-chip:nth-child(4n+3){background:#FF9CCB !important;} html:root[data-theme="pixel"] .dm-chip:nth-child(4n+4){background:#9BE58A !important;}
html:root[data-theme="pixel"] .dm-opt i{color:#C9301B;}
html:root[data-theme="pixel"] .dm-opt.on, html:root[data-theme="pixel"] .dm-chip.on{background:#C9301B !important; color:#FFF4D6 !important;} html:root[data-theme="pixel"] .dm-opt.on i{color:#FFF4D6;}
html:root[data-theme="pixel"] .dm-pill{background:#3D8BFF; color:#14183A; border:3px solid #14183A; font-family:'Press Start 2P',monospace; font-size:9px; font-weight:400;}
html:root[data-theme="pixel"] .dm-pill.alt{background:#FFC72C;}
html:root[data-theme="pixel"] .dm-label{color:#14183A; font-family:'Press Start 2P',monospace; font-size:10px; font-weight:400; line-height:1.6;}
html:root[data-theme="pixel"] .dm-err{color:#C9301B; font-family:var(--font); font-size:16px;}
html:root[data-theme="pixel"] .device-modal input{background:#FFFBEA; border:4px solid #14183A !important; font-size:17px;}
html:root[data-theme="pixel"] .dm-cancel{color:#14183A !important; font-family:'Press Start 2P',monospace; font-size:10px; font-weight:400;}
html:root[data-theme="pixel"] .kc-dd-btn, html:root[data-theme="pixel"] .kc-dd-list{background:#FFFBEA; color:#14183A; border:4px solid #14183A; box-shadow:4px 4px 0 #0B0E26; font-weight:700;}
html:root[data-theme="pixel"] .kc-dd-opt{background:#FFFBEA; color:#14183A; border-bottom:3px dashed #14183A;} html:root[data-theme="pixel"] .kc-dd-opt:hover, html:root[data-theme="pixel"] .kc-dd-opt.on{background:#FFC72C;}
/* PIXEL-THEME-END */

html:root[data-theme="pixel"] .owner-card{background:#FFF3D4 !important; border:4px solid #000 !important; border-radius:0 !important; box-shadow:4px 4px 0 #000 !important; color:#14163A !important;}
html:root[data-theme="pixel"] .owner-card img{background:#FF9CCB; border:3px solid #000; width:48px; height:48px;}
html:root[data-theme="pixel"] body footer .owner-card b{color:#14163A !important; font-family:var(--font); font-size:11px;}
html:root[data-theme="pixel"] .owner-card small{color:#14163A !important; font-family:var(--font);}

/* ---------- blok 5 (dulu <style id="klontong-theme">) ---------- */
/* KLONTONG-THEME-START
   Tema "Warung Kelontong". Dikunci ke html[data-theme="kelontong"]. (html:root[data-theme="kelontong"] = html:root[data-theme="kelontong"]) */

html[data-theme="kelontong"]{
  --cream:#EBD9B4; --bg:#EBD9B4; --panel:#FFF4DA; --panel-2:#F7E9C9;
  --ink:#3B2A1A; --ink-dim:#6B4423; --bark:#3B2A1A; --bark-soft:#6B4423;
  --apple:#C8372D; --apple-deep:#9E2A22; --pink:#C8372D; --cyan:#1F5C99; --leaf:#2F7D4F;
  --sky:#B5D6EE; --sky-deep:#1F3F73; --butter:#F2B632; --gold:#F2B632;
  --bark-rgb:59,42,26; --apple-rgb:200,55,45; --apple-deep-rgb:158,42,34; --leaf-rgb:47,125,79;
  --sky-rgb:181,214,238; --butter-rgb:242,182,50; --cream-rgb:235,217,180;
  --pin-highlight:#F28B82; --ordercard-1:#F6D86A; --ordercard-3:#F6D86A; --hero-tint:#F7E9C9;
  --nav-bg:#FFF4DA;
  --font:'Nunito',system-ui,sans-serif; --font-logo:'Bungee',sans-serif; --font-cursive:'Caveat',cursive;
}

html:root[data-theme="kelontong"] body{
  font-family:var(--font); font-weight:700; color:#3B2A1A;
  background-color:#EBD9B4 !important;
  background-image:repeating-linear-gradient(0deg,rgba(59,42,26,.05) 0 2px,transparent 2px 44px) !important;
}
html:root[data-theme="kelontong"] h1, html:root[data-theme="kelontong"] h2, html:root[data-theme="kelontong"] h3, html:root[data-theme="kelontong"] .heading{font-family:'Bungee',sans-serif !important; font-weight:400 !important; letter-spacing:.5px; color:#3B2A1A;}
html:root[data-theme="kelontong"] :focus-visible{outline:3px solid #1F5C99; outline-offset:2px;}
html:root[data-theme="kelontong"] ::selection{background:#F2B632; color:#3B2A1A;}

/* pengumuman + navbar: kanopi belang merah putih */
html:root[data-theme="kelontong"] .announce-bar{background:#3B2A1A; color:#F2B632; font-family:'Bungee',sans-serif; font-size:12px; font-weight:400;}
html:root[data-theme="kelontong"] body nav{background:#FFF4DA !important; border-bottom:5px solid #3B2A1A !important; backdrop-filter:none !important; position:relative;}
html:root[data-theme="kelontong"] body nav::before{content:""; display:block; height:14px; background:repeating-linear-gradient(90deg,#C8372D 0 32px,#FFF4DA 32px 64px); border-bottom:3px solid #3B2A1A;}
html:root[data-theme="kelontong"] body .nav-inner{padding:10px 16px !important; gap:12px;}
html:root[data-theme="kelontong"] body .logo{font-family:'Bungee',sans-serif !important; font-weight:400 !important; color:#C8372D; font-size:19px !important; letter-spacing:.5px; text-shadow:none !important; line-height:1.05; display:flex; align-items:center; gap:10px;}
html:root[data-theme="kelontong"] body .logo::before{content:""; width:46px; height:46px; flex:0 0 auto; border-radius:50%; border:3px solid #3B2A1A; box-shadow:0 3px 0 #3B2A1A; background:#FFF4DA url("../avatar.png") center/contain no-repeat; font-size:0; transform:none; filter:none;}
html:root[data-theme="kelontong"] body .logo span{color:#1F5C99 !important; transform:none;}
html:root[data-theme="kelontong"] body .acct-btn, html:root[data-theme="kelontong"] body .cart-btn{background:#FFF4DA !important; color:#3B2A1A !important; border:3px solid #3B2A1A !important; border-radius:10px !important; box-shadow:0 4px 0 #3B2A1A !important; font-family:'Bungee',sans-serif; font-weight:400; font-size:12px; min-height:44px;}
html:root[data-theme="kelontong"] body .cart-btn:not(.acct-btn){background:#F2B632 !important;}
html:root[data-theme="kelontong"] body .cart-btn:hover, html:root[data-theme="kelontong"] body .acct-btn:hover{transform:translateY(2px); box-shadow:0 2px 0 #3B2A1A !important;}
html:root[data-theme="kelontong"] .cart-count{background:#C8372D; color:#FFF4DA; font-family:'Bungee',sans-serif; font-size:11px;}
html:root[data-theme="kelontong"] .wm-dd-btn{background:#FFF4DA; color:#3B2A1A; border:3px solid #3B2A1A !important; border-radius:10px !important; box-shadow:0 4px 0 #3B2A1A; font-family:'Bungee',sans-serif; font-weight:400; font-size:12px;}
html:root[data-theme="kelontong"] .wm-dd-caret{border-top-color:#3B2A1A;}
html:root[data-theme="kelontong"] .wm-dd-list{background:#FFF4DA; border:3px solid #3B2A1A !important; border-radius:12px !important; box-shadow:0 5px 0 #3B2A1A; padding:5px;}
html:root[data-theme="kelontong"] .wm-dd-list li{font-family:'Nunito',sans-serif; font-weight:800; font-size:15px; color:#3B2A1A; border-radius:8px !important;}
html:root[data-theme="kelontong"] .wm-dd-list li:hover, html:root[data-theme="kelontong"] .wm-dd-list li:focus{background:#F2B632;}
html:root[data-theme="kelontong"] .wm-dd-list li[aria-selected="true"]{color:#C8372D;}
@media (max-width:560px){
  html:root[data-theme="kelontong"] body .nav-inner{padding:8px 10px !important; gap:6px;}
  html:root[data-theme="kelontong"] body .logo{font-size:14px !important; gap:7px;}
  html:root[data-theme="kelontong"] body .logo::before{width:38px; height:38px;}
  html:root[data-theme="kelontong"] body .acct-btn, html:root[data-theme="kelontong"] body .cart-btn{padding:0 10px; min-width:44px; justify-content:center;}
  html:root[data-theme="kelontong"] .wm-dd-btn{padding:0 9px 0 11px; font-size:11px;}
}

/* hero */
html:root[data-theme="kelontong"] body .hero{background:#F7E9C9 !important; border:0 !important; border-bottom:5px solid #3B2A1A !important; box-shadow:none !important; margin:0 !important; border-radius:0 !important;}
html:root[data-theme="kelontong"] body #home-hero h1{color:#C8372D; text-shadow:3px 3px 0 #3B2A1A; font-size:clamp(28px,6vw,52px) !important; line-height:1.1 !important;}
html:root[data-theme="kelontong"] body #home-hero h1 .accent{color:#1F5C99;}
html:root[data-theme="kelontong"] .h1-deco, html:root[data-theme="kelontong"] body .hero-sticker{display:none !important;}
html:root[data-theme="kelontong"] body .hero-script{font-family:'Caveat',cursive !important; font-weight:700 !important; color:#1F3F73 !important; font-size:26px !important; line-height:1.15 !important;}
html:root[data-theme="kelontong"] body .hero-script .script-tail{color:#C8372D !important;}
html:root[data-theme="kelontong"] .open-chip{background:#2F7D4F; color:#FFF4DA; border:3px solid #3B2A1A; border-radius:10px; box-shadow:0 4px 0 #3B2A1A; font-family:'Bungee',sans-serif; font-size:12px; padding:8px 12px;}
html:root[data-theme="kelontong"] .open-chip .dot{background:#FFF4DA;}
html:root[data-theme="kelontong"] body .hero .search-wrap input{background:#FFFDF4 !important; color:#3B2A1A; border:3px solid #3B2A1A !important; border-radius:12px !important; box-shadow:0 4px 0 #3B2A1A !important; font-weight:700;}
html:root[data-theme="kelontong"] body .hero-chips span, html:root[data-theme="kelontong"] body .hero-chips a{border:3px solid #3B2A1A !important; border-radius:10px !important; box-shadow:0 3px 0 #3B2A1A; color:#3B2A1A !important; font-weight:800;}
html:root[data-theme="kelontong"] body .hero-chips .c1{background:#F2B632 !important;} html:root[data-theme="kelontong"] body .hero-chips .c2{background:#F2B8B0 !important;} html:root[data-theme="kelontong"] body .hero-chips .c3{background:#B5D6EE !important;}

/* ticker */
html:root[data-theme="kelontong"] body .marquee-wrap{background:#3B2A1A !important; border:0 !important; border-bottom:4px solid #C8372D !important;}
html:root[data-theme="kelontong"] body .channel-badge{background:#FFF4DA !important; color:#3B2A1A !important; border:3px solid #3B2A1A !important; border-radius:10px !important; box-shadow:0 3px 0 #1F3F73 !important; font-weight:800;}

/* section + tab kategori jadi label harga */
html:root[data-theme="kelontong"] .cat-row .tab-btn{background:#FFF4DA !important; color:#3B2A1A !important; border:3px solid #3B2A1A !important; border-radius:12px !important; box-shadow:0 4px 0 #3B2A1A !important; font-family:'Bungee',sans-serif; font-weight:400; font-size:12px;}
html:root[data-theme="kelontong"] .cat-row .tab-btn[data-cat="education"]{background:#B5D6EE !important;}
html:root[data-theme="kelontong"] .cat-row .tab-btn[data-cat="music"]{background:#F2B8B0 !important;}
html:root[data-theme="kelontong"] .cat-row .tab-btn[data-cat="editing"]{background:#BFE3C4 !important;}
html:root[data-theme="kelontong"] .cat-row .tab-btn[data-cat="other"]{background:#F6D86A !important;}
html:root[data-theme="kelontong"] .cat-row .tab-btn.active{outline:3px solid #C8372D; outline-offset:2px; transform:translateY(3px); box-shadow:0 1px 0 #3B2A1A !important;}
html:root[data-theme="kelontong"] .section-head h2, html:root[data-theme="kelontong"] body .section-head h2{font-family:'Bungee',sans-serif !important; color:#3B2A1A;}
html:root[data-theme="kelontong"] .section-head p, html:root[data-theme="kelontong"] .empty-state{color:#6B4423;}
html:root[data-theme="kelontong"] .home-h{font-family:'Bungee',sans-serif; font-weight:400; color:#3B2A1A;}
html:root[data-theme="kelontong"] .home-h small{font-family:'Caveat',cursive; font-size:22px; color:#1F5C99;}

/* kartu: label harga warung */
html:root[data-theme="kelontong"] .card, html:root[data-theme="kelontong"] .brand-card, html:root[data-theme="kelontong"] .detail-head, html:root[data-theme="kelontong"] .variant-row, html:root[data-theme="kelontong"] .bundle-card, html:root[data-theme="kelontong"] .laris-card, html:root[data-theme="kelontong"] .rak-box, html:root[data-theme="kelontong"] .dur-title, html:root[data-theme="kelontong"] .bx-card, html:root[data-theme="kelontong"] .akun-card, html:root[data-theme="kelontong"] .akun-stat, html:root[data-theme="kelontong"] .admin-note, html:root[data-theme="kelontong"] .panel-box, html:root[data-theme="kelontong"] .testi-card{
  background:#FFF4DA !important; color:#3B2A1A; border:3px solid #3B2A1A !important; border-radius:16px !important;
  box-shadow:0 5px 0 #3B2A1A !important;
}
html:root[data-theme="kelontong"] .card:hover, html:root[data-theme="kelontong"] .brand-card:hover, html:root[data-theme="kelontong"] .bundle-card:hover, html:root[data-theme="kelontong"] .laris-card:hover{transform:translateY(-3px) rotate(-.5deg);}
html:root[data-theme="kelontong"] .card h3, html:root[data-theme="kelontong"] .brand-card .b-name, html:root[data-theme="kelontong"] .detail-head .b-name, html:root[data-theme="kelontong"] .bundle-card h3, html:root[data-theme="kelontong"] .variant-row .v-name{font-family:'Bungee',sans-serif; font-weight:400;}
html:root[data-theme="kelontong"] .card .price, html:root[data-theme="kelontong"] .brand-card .b-from b, html:root[data-theme="kelontong"] .variant-row .v-price, html:root[data-theme="kelontong"] .bundle-card .bundle-price-row .now{font-family:'Caveat',cursive; font-weight:700; font-size:26px; color:#C8372D;}
html:root[data-theme="kelontong"] .brand-card .b-cta{color:#1F5C99; font-weight:800;}
html:root[data-theme="kelontong"] .brand-avatar, html:root[data-theme="kelontong"] .mono-av{border:3px solid #3B2A1A !important; box-shadow:0 3px 0 #3B2A1A; font-family:'Bungee',sans-serif !important; font-weight:400 !important;}
html:root[data-theme="kelontong"] .v-chip{background:#1F5C99; color:#FFF4DA; border-radius:6px;}
html:root[data-theme="kelontong"] .variant-row .v-add, html:root[data-theme="kelontong"] .card .addbtn, html:root[data-theme="kelontong"] .bundle-card .addbtn, html:root[data-theme="kelontong"] .bx-btn,
html:root[data-theme="kelontong"] .checkout-go-btn, html:root[data-theme="kelontong"] .make-order-btn, html:root[data-theme="kelontong"] .btn-primary, html:root[data-theme="kelontong"] .ssn-modal .m-btn, html:root[data-theme="kelontong"] .dm-ok{
  background:#C8372D !important; color:#FFF4DA !important; border:3px solid #3B2A1A !important; border-radius:10px !important; box-shadow:0 4px 0 #3B2A1A !important;
  font-family:'Bungee',sans-serif; font-weight:400; letter-spacing:.5px;
}
html:root[data-theme="kelontong"] .variant-row .v-add:hover, html:root[data-theme="kelontong"] .card .addbtn:hover, html:root[data-theme="kelontong"] .checkout-go-btn:hover, html:root[data-theme="kelontong"] .make-order-btn:hover, html:root[data-theme="kelontong"] .btn-primary:hover{transform:translateY(2px); box-shadow:0 2px 0 #3B2A1A !important; background:#9E2A22 !important;}
html:root[data-theme="kelontong"] .btn-ghost, html:root[data-theme="kelontong"] .download-btn, html:root[data-theme="kelontong"] .again-btn{background:#FFF4DA; color:#3B2A1A; border:3px solid #3B2A1A; border-radius:10px; box-shadow:0 4px 0 #3B2A1A; font-family:'Bungee',sans-serif; font-weight:400;}
html:root[data-theme="kelontong"] .v-habis-badge{background:#3B2A1A; color:#F2B632; font-family:'Bungee',sans-serif; font-weight:400;}
html:root[data-theme="kelontong"] .v-notify{background:#F7E9C9; border:3px dashed #3B2A1A; color:#3B2A1A;}
html:root[data-theme="kelontong"] .variant-row.is-habis{background:#E4D4AE !important; opacity:1; filter:none;}
html:root[data-theme="kelontong"] .save-chip, html:root[data-theme="kelontong"] .bx-save{background:#2F7D4F; color:#FFF4DA; border:2px solid #3B2A1A; font-family:'Bungee',sans-serif; font-weight:400;}
html:root[data-theme="kelontong"] .bundle-card .ribbon{background:#C8372D; border:2px solid #3B2A1A; font-family:'Bungee',sans-serif; font-weight:400;}
html:root[data-theme="kelontong"] .back-link{color:#1F5C99; font-weight:800;}
html:root[data-theme="kelontong"] .plan-name{color:#6B4423; font-family:'Bungee',sans-serif;}
html:root[data-theme="kelontong"] .plan-info, html:root[data-theme="kelontong"] .bundle-note, html:root[data-theme="kelontong"] .how-box, html:root[data-theme="kelontong"] .why-card, html:root[data-theme="kelontong"] .rules-box{background:#F7E9C9; border:3px dashed #3B2A1A; box-shadow:none; color:#3B2A1A;}
html:root[data-theme="kelontong"] .how-box .how-title, html:root[data-theme="kelontong"] .rs-title, html:root[data-theme="kelontong"] .why-card h2{color:#C8372D;}
html:root[data-theme="kelontong"] body #home-faq .faq-item{background:#FFF4DA; border:3px solid #3B2A1A; box-shadow:0 4px 0 #3B2A1A !important; border-radius:14px; color:#3B2A1A;}
html:root[data-theme="kelontong"] #home-faq .faq-item > summary{font-family:'Bungee',sans-serif; font-weight:400; font-size:13px; color:#3B2A1A;}
html:root[data-theme="kelontong"] #home-faq .faq-item > summary::after{color:#C8372D;}
html:root[data-theme="kelontong"] .quiz-banner{background:#1F3F73; border:3px solid #3B2A1A; box-shadow:0 5px 0 #3B2A1A; color:#FFF4DA; border-radius:16px;}
html:root[data-theme="kelontong"] .quiz-banner b{font-family:'Bungee',sans-serif; font-weight:400; color:#F2B632;}
html:root[data-theme="kelontong"] .quiz-banner button{background:#F2B632; color:#3B2A1A; border:3px solid #3B2A1A; border-radius:10px; font-family:'Bungee',sans-serif; font-weight:400;}
html:root[data-theme="kelontong"] .quiz-opt{background:#FFF4DA; color:#3B2A1A; border:3px solid #3B2A1A; border-radius:10px;}
html:root[data-theme="kelontong"] .quiz-opt:hover{background:#F2B632;}

/* footer + float */
html:root[data-theme="kelontong"] body footer{background:#3B2A1A !important; border-top:5px solid #C8372D !important; color:#F7E9C9 !important;}
html:root[data-theme="kelontong"] body footer a, html:root[data-theme="kelontong"] body footer b, html:root[data-theme="kelontong"] body footer strong{color:#F2B632 !important;}
html:root[data-theme="kelontong"] .contact-float .contact-btn, html:root[data-theme="kelontong"] .wa-float, html:root[data-theme="kelontong"] .cf-toggle{background:#F2B632 !important; color:#3B2A1A !important; border:3px solid #3B2A1A !important; box-shadow:0 4px 0 #3B2A1A !important;}
html:root[data-theme="kelontong"] .wa-float{background:#2F7D4F !important; color:#FFF4DA !important;}
html:root[data-theme="kelontong"] .owner-card{background:#FFF4DA !important; border:3px solid #3B2A1A !important; border-radius:14px !important; box-shadow:0 4px 0 #3B2A1A !important; color:#3B2A1A !important;}
html:root[data-theme="kelontong"] body footer .owner-card b{color:#C8372D !important;}
html:root[data-theme="kelontong"] .owner-card small{color:#6B4423 !important;}

/* keranjang, form, popup */
html:root[data-theme="kelontong"] #overlay, html:root[data-theme="kelontong"] #ssn-modal-wrap, html:root[data-theme="kelontong"] #device-modal-wrap, html:root[data-theme="kelontong"] #ssn-ask-wrap{background:rgba(59,42,26,.6); backdrop-filter:none;}
html:root[data-theme="kelontong"] #cart-drawer{background:#FFF4DA; color:#3B2A1A; border-left:5px solid #3B2A1A;}
html:root[data-theme="kelontong"] .drawer-head{border-bottom:3px solid #3B2A1A;} html:root[data-theme="kelontong"] .drawer-foot{background:#F7E9C9; border-bottom:3px solid #3B2A1A;}
html:root[data-theme="kelontong"] .drawer-head .title, html:root[data-theme="kelontong"] .drawer-foot .total-row{font-family:'Bungee',sans-serif; font-weight:400;}
html:root[data-theme="kelontong"] .close-btn, html:root[data-theme="kelontong"] .qty-ctrl button{background:#F2B632; color:#3B2A1A; border:3px solid #3B2A1A; border-radius:10px; box-shadow:0 3px 0 #3B2A1A;}
html:root[data-theme="kelontong"] .panel-box .title{font-family:'Bungee',sans-serif; font-weight:400;}
html:root[data-theme="kelontong"] .panel-box input, html:root[data-theme="kelontong"] .panel-box textarea, html:root[data-theme="kelontong"] .panel-box select, html:root[data-theme="kelontong"] .device-field, html:root[data-theme="kelontong"] .testi-form select, html:root[data-theme="kelontong"] .testi-form textarea, html:root[data-theme="kelontong"] #ssn-ask-input, html:root[data-theme="kelontong"] .voucher-row input, html:root[data-theme="kelontong"] .device-modal input{
  background:#FFFDF4; color:#3B2A1A; border:3px solid #3B2A1A !important; border-radius:10px !important; font-weight:700;
}
html:root[data-theme="kelontong"] .panel-box input:focus, html:root[data-theme="kelontong"] .panel-box textarea:focus{border-color:#C8372D !important;}
html:root[data-theme="kelontong"] input::placeholder, html:root[data-theme="kelontong"] textarea::placeholder{color:#9A8465;}
html:root[data-theme="kelontong"] .step-num{background:#C8372D; color:#FFF4DA; border:2px solid #3B2A1A; font-family:'Bungee',sans-serif;}
html:root[data-theme="kelontong"] .req-chip{background:#C8372D; color:#FFF4DA; font-family:'Bungee',sans-serif; font-weight:400;}
html:root[data-theme="kelontong"] .pay-total{background:#F6D86A; color:#3B2A1A; border:3px solid #3B2A1A; box-shadow:0 4px 0 #3B2A1A; border-radius:12px;}
html:root[data-theme="kelontong"] .pay-card{background:#FFFDF4; color:#3B2A1A; border:3px solid #3B2A1A; border-radius:12px; box-shadow:0 4px 0 #3B2A1A; font-weight:800;}
html:root[data-theme="kelontong"] .pay-card.selected{background:#1F5C99 !important; color:#FFF4DA !important; transform:translateY(2px); box-shadow:0 2px 0 #3B2A1A;}
html:root[data-theme="kelontong"] .payment-detail, html:root[data-theme="kelontong"] .upload-box{background:#FFFDF4; border:3px dashed #3B2A1A; color:#3B2A1A;}
html:root[data-theme="kelontong"] .upload-box.done{border-style:solid; background:#CFE8D3;}
html:root[data-theme="kelontong"] .file-upload-btn, html:root[data-theme="kelontong"] .voucher-row button{background:#F2B632; color:#3B2A1A; border:3px solid #3B2A1A; border-radius:10px; box-shadow:0 3px 0 #3B2A1A;}
html:root[data-theme="kelontong"] .order-id-card{background:#F6D86A !important; border:3px solid #3B2A1A !important; border-radius:14px; box-shadow:0 5px 0 #3B2A1A !important;}
html:root[data-theme="kelontong"] .order-id-card .oid-num{font-family:'Bungee',sans-serif; color:#C8372D;}
html:root[data-theme="kelontong"] .success-check{background:#2F7D4F; color:#FFF4DA; border:3px solid #3B2A1A;}
html:root[data-theme="kelontong"] .success-wrap h2{color:#3B2A1A;}
html:root[data-theme="kelontong"] .wa-send-btn{border:3px solid #3B2A1A; border-radius:10px; box-shadow:0 4px 0 #3B2A1A; font-family:'Bungee',sans-serif; font-weight:400;}
html:root[data-theme="kelontong"] .ssn-modal, html:root[data-theme="kelontong"] .device-modal{background:#FFF4DA !important; color:#3B2A1A; border:4px solid #3B2A1A !important; border-radius:18px !important; box-shadow:0 8px 0 #3B2A1A !important;}
html:root[data-theme="kelontong"] .ssn-modal .m-title, html:root[data-theme="kelontong"] .device-modal .dm-title{font-family:'Bungee',sans-serif; font-weight:400; color:#3B2A1A;}
html:root[data-theme="kelontong"] .ssn-modal .m-text{color:#6B4423;}
html:root[data-theme="kelontong"] .dm-opt, html:root[data-theme="kelontong"] .dm-chip{background:#FFFDF4 !important; color:#3B2A1A; border:3px solid #3B2A1A !important; border-radius:10px !important; box-shadow:0 3px 0 #3B2A1A !important; font-weight:800;}
html:root[data-theme="kelontong"] .dm-opt.on, html:root[data-theme="kelontong"] .dm-chip.on{background:#C8372D !important; color:#FFF4DA !important;}
html:root[data-theme="kelontong"] .dm-step, html:root[data-theme="kelontong"] .dm-pill{background:#1F5C99; color:#FFF4DA; font-family:'Bungee',sans-serif; font-weight:400;}
html:root[data-theme="kelontong"] .dm-err{color:#C8372D;}
html:root[data-theme="kelontong"] .kc-dd-btn, html:root[data-theme="kelontong"] .kc-dd-list{background:#FFFDF4; color:#3B2A1A; border:3px solid #3B2A1A; border-radius:10px; font-weight:800;}
html:root[data-theme="kelontong"] .kc-dd-opt:hover, html:root[data-theme="kelontong"] .kc-dd-opt.on{background:#F2B632;}
/* KLONTONG-THEME-END */

/* ---------- blok 6 (dulu <style id="nota-theme">) ---------- */
/* NOTA-THEME-START: struk, bukti order, Pesanan Saya per tema */
/* helper tampil per tema */
html:not([data-theme="kidcore"]) .th-k{display:none !important;}
html:not([data-theme="pixel"]) .th-p{display:none !important;}
html:not([data-theme="kelontong"]) .th-c{display:none !important;}
html:not([data-theme="pixel"]):not([data-theme="kelontong"]) .th-pc{display:none !important;}

/* ===== struk: elemen umum ===== */
.receipt .rc-logo{display:flex; align-items:center; gap:12px;}
.receipt .rc-av{width:54px; height:54px; flex:0 0 auto; object-fit:contain; border-radius:50%; border:3px solid var(--apple); background:#FFF8E1;}
.receipt .rc-banner, .receipt .rc-nota{display:none;}
.receipt .oid{display:inline-block; margin-top:10px; padding:4px 10px; background:#FFF1A8; border:2px solid var(--ink); border-radius:6px; font-weight:700; font-size:12px;}
.receipt .row.total{align-items:center; margin-top:4px;}
.receipt .row.total .lbl{display:flex; align-items:center; gap:8px; color:var(--ink); font-weight:800; font-size:18px;}
.receipt .row.total .val{font-weight:800; font-size:24px; color:var(--apple-deep); white-space:nowrap;}
.receipt .lunas-pill{padding:2px 9px; border-radius:999px; border:2px solid #4CAF50; color:#2E7D32; font-size:10.5px; letter-spacing:1px; font-weight:800; font-family:var(--font);}
.receipt .rc-foot{position:relative; display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px;}
.receipt .rc-foot .thanks{flex:1; margin-top:0;}
.receipt .rc-stamp{flex:0 0 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; line-height:1.1;}
.receipt .rc-barcode{display:flex; gap:3px; height:32px; margin-top:12px;}
.receipt .rc-barcode i{display:block; background:var(--ink);}

/* ===== STRUK KIDCORE: stempel SUDAH DICATAT + barcode ===== */
.receipt .rc-stamp.th-k{width:86px; height:86px; box-sizing:border-box; border-radius:50%; border:4px double #1A3A6B; color:#1A3A6B; transform:rotate(-14deg); opacity:.85; font-family:'Fredoka One',sans-serif; font-size:13px;}
html[data-theme="kidcore"] .receipt .brand{font-family:'Fredoka One',sans-serif; font-size:22px; font-weight:400;}

/* ===== STRUK PIXEL: item shop receipt ===== */
html[data-theme="pixel"] .receipt .rc-banner{display:flex; align-items:center; justify-content:space-between; margin:-20px -16px 14px -26px; padding:12px 16px 12px 26px; background:#C9301B; color:#FFF4D6; border-bottom:4px solid #0B0E26; font-family:'Press Start 2P',monospace; font-size:11px; line-height:1.6;}
html[data-theme="pixel"] .receipt .paper::before{display:none;}
html[data-theme="pixel"] .receipt .rc-av{border:4px solid #FFC72C; border-radius:0 !important; background:#FF9CCB; box-shadow:3px 3px 0 #000;}
html[data-theme="pixel"] .receipt .brand{font-family:'Press Start 2P',monospace; font-weight:400; font-size:12px; line-height:1.6; color:#14183A; text-transform:uppercase;}
html[data-theme="pixel"] .receipt .oid{background:#14183A; color:#7CF06A; border:0; border-radius:0; font-family:'Press Start 2P',monospace; font-size:10px;}
html[data-theme="pixel"] .receipt .dash{border-top:4px dashed #14183A;}
html[data-theme="pixel"] .receipt .row .lbl{color:#4A4F86;}
html[data-theme="pixel"] .receipt .row{font-size:16px;}
html[data-theme="pixel"] .receipt .row.total{background:#14183A; padding:12px 14px; margin-top:10px;}
html[data-theme="pixel"] .receipt .row.total .lbl{color:#FFC72C; font-family:'Press Start 2P',monospace; font-size:12px;}
html[data-theme="pixel"] .receipt .row.total .val{color:#FFF4D6; font-family:'Press Start 2P',monospace; font-size:14px;}
html[data-theme="pixel"] .receipt .lunas-pill{border:3px solid #7CF06A; border-radius:0; color:#7CF06A; font-family:'Press Start 2P',monospace; font-size:7px; padding:3px 5px;}
html[data-theme="pixel"] .receipt .rc-stamp.th-p{padding:8px 10px; background:#7CF06A; border:4px solid #0B0E26; font-family:'Press Start 2P',monospace; font-size:9px; line-height:1.6; transform:rotate(-4deg); color:#14183A;}
html[data-theme="pixel"] .receipt .rc-barcode i{background:#14183A; border-radius:0;}
html[data-theme="pixel"] .receipt .thanks{font-size:14px; color:#4A4F86;}

/* ===== STRUK KELONTONG: nota kontan ===== */
html[data-theme="kelontong"] .receipt{background:#FFFDF4; background-image:none; border:3px solid #3B2A1A; border-radius:0; box-shadow:7px 7px 0 #3B2A1A; padding:0 0 14px; font-family:'Nunito',sans-serif; color:#1F3F73; transform:rotate(-.6deg);}
html[data-theme="kelontong"] .receipt::before{content:""; position:absolute; top:-13px; left:50%; margin-left:-50px; width:100px; height:26px; background:rgba(242,182,50,.88); transform:rotate(-3deg); z-index:3;}
html[data-theme="kelontong"] .receipt::after{content:""; position:absolute; left:-3px; right:-3px; bottom:-17px; height:16px; background:radial-gradient(circle at 10px 0,#FFFDF4 6px,transparent 6.5px) 0 0/20px 16px; border-bottom:0;}
html[data-theme="kelontong"] .receipt .pin, html[data-theme="kelontong"] .receipt .corner-sticker{display:none;}
html[data-theme="kelontong"] .receipt .paper{background:none; box-shadow:none; transform:none; padding:0;}
html[data-theme="kelontong"] .receipt .paper::before{display:none;}
html[data-theme="kelontong"] .receipt .rc-logo{padding:14px 18px 12px; border-bottom:3px solid #1F5C99; color:#1F5C99;}
html[data-theme="kelontong"] .receipt .rc-av{border:3px solid #1F5C99; width:56px; height:56px;}
html[data-theme="kelontong"] .receipt .brand{font-family:'Bungee',sans-serif; font-weight:400; font-size:22px; color:#1F5C99; line-height:1;}
html[data-theme="kelontong"] .receipt .sub{color:#1F5C99; font-size:10.5px; letter-spacing:.3px; text-transform:none; margin-top:4px;}
html[data-theme="kelontong"] .receipt .rc-nota{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 18px; border-bottom:2px solid #1F5C99; font-family:'Bungee',sans-serif; color:#1F5C99; font-size:17px;}
html[data-theme="kelontong"] .receipt .rc-nota b{font-weight:400; color:#C8372D; font-size:14px;}
html[data-theme="kelontong"] .receipt .oid{display:none;}
html[data-theme="kelontong"] .receipt .dash{border-top:0; margin:0; padding:8px 18px 2px;}
html[data-theme="kelontong"] .receipt .dash + .dash{padding-top:6px;}
html[data-theme="kelontong"] .receipt .row{border-bottom:2px dotted #8FA9C4; padding:3px 0;}
html[data-theme="kelontong"] .receipt .row .lbl{color:#1F5C99; font-size:12.5px;}
html[data-theme="kelontong"] .receipt .row .val, html[data-theme="kelontong"] .receipt .row.item .lbl{font-family:'Caveat',cursive; font-weight:700; font-size:23px; line-height:1.1; color:#1F3F73 !important;}
html[data-theme="kelontong"] .receipt .sec{color:#1F5C99; font-family:'Bungee',sans-serif; font-size:11px;}
html[data-theme="kelontong"] .receipt .row.total{background:#FFF1A8; border:2px solid #1F5C99; margin-top:8px; padding:4px 10px;}
html[data-theme="kelontong"] .receipt .row.total .lbl{font-family:'Bungee',sans-serif; font-weight:400; font-size:16px; color:#1F5C99 !important;}
html[data-theme="kelontong"] .receipt .row.total .val{font-family:'Caveat',cursive; font-size:32px; color:#C8372D !important;}
html[data-theme="kelontong"] .receipt .lunas-pill{display:none;}
html[data-theme="kelontong"] .receipt .rc-foot{padding:6px 18px 0; align-items:flex-end;}
html[data-theme="kelontong"] .receipt .thanks{font-size:11.5px; color:#1F5C99;}
html[data-theme="kelontong"] .receipt .thanks .hand{display:block; font-family:'Caveat',cursive; font-size:22px; color:#1F3F73; margin-top:2px;}
html[data-theme="kelontong"] .receipt .rc-stamp.th-c{width:118px; height:78px; box-sizing:border-box; border:3px solid #1F5C99; border-radius:10px; color:#1F5C99; transform:rotate(-8deg); opacity:.88; font-family:'Bungee',sans-serif;}
html[data-theme="kelontong"] .receipt .rc-stamp.th-c .s1{font-size:12px;}
html[data-theme="kelontong"] .receipt .rc-stamp.th-c .s2{font-size:20px; color:#C8372D; border-top:2px solid #1F5C99; border-bottom:2px solid #1F5C99; margin:3px 0; padding:0 4px;}
html[data-theme="kelontong"] .receipt .rc-stamp.th-c .s3{font-size:9px;}
html[data-theme="kelontong"] .receipt .rc-barcode{display:none;}

/* ===== BUKTI ORDER per tema ===== */
.order-card .oc-top{padding:0;}
html[data-theme="kidcore"] .order-card{background:#FFF8E1; border:4px solid #1A3A6B; border-radius:24px; box-shadow:8px 8px 0 #1A3A6B; padding:0 20px 20px;}
html[data-theme="kidcore"] .order-card::before{display:none;}
html[data-theme="kidcore"] .order-card .oc-top{margin:0 -20px 14px; padding:14px 20px; background:#1A3A6B; color:#FFF8E1;}
html[data-theme="kidcore"] .order-card .oc-brand{font-family:'Fredoka One',sans-serif; font-weight:400; font-size:20px; letter-spacing:.5px;}
html[data-theme="kidcore"] .order-card .oc-badge{background:#F5C200; color:#1A3A6B; border:2px solid #FFF8E1; font-family:'JetBrains Mono',monospace;}
html[data-theme="pixel"] .order-card{padding:0 20px 20px;}
html[data-theme="pixel"] .order-card::before{display:none;}
html[data-theme="pixel"] .order-card .oc-top{margin:0 -20px 14px; padding:14px 20px; background:#14183A; border-bottom:4px solid #0B0E26;}
html[data-theme="pixel"] .order-card .oc-brand{color:#FFC72C; font-family:'Press Start 2P',monospace; font-size:12px; line-height:1.6;}
html[data-theme="pixel"] .order-card .oc-badge{background:#7CF06A; color:#14183A; border:0; font-family:'Press Start 2P',monospace; font-size:9px;}
html[data-theme="pixel"] .order-card .oc-note{background:#FFFBEA; border:4px dashed #14183A; padding:10px 12px; font-size:15px;}
html[data-theme="pixel"] .order-card .oc-sec{font-family:'Press Start 2P',monospace; font-weight:400; font-size:9px; color:#4A4F86;}
html[data-theme="pixel"] .order-card .oc-row, html[data-theme="pixel"] .order-card .oc-item{font-size:16px;}
html[data-theme="pixel"] .order-card .oc-total{color:#C9301B;}
html[data-theme="kelontong"] .order-card{background:#F6D86A; border:4px solid #3B2A1A; border-radius:14px; box-shadow:7px 7px 0 #3B2A1A; padding:0 20px 20px; transform:rotate(.8deg);}
html[data-theme="kelontong"] .order-card::before{content:""; position:absolute; top:-13px; right:44px; left:auto; width:90px; height:26px; background:rgba(200,55,45,.82); transform:rotate(5deg); font-size:0; z-index:3;}
html[data-theme="kelontong"] .order-card .oc-top{margin:0 -20px 14px; padding:14px 20px; background:#C8372D; color:#FFF4DA; border-bottom:4px solid #3B2A1A;}
html[data-theme="kelontong"] .order-card .oc-brand{font-family:'Bungee',sans-serif; font-weight:400; font-size:22px;}
html[data-theme="kelontong"] .order-card .oc-badge{background:#FFF4DA; color:#C8372D; border:3px solid #3B2A1A; border-radius:6px; font-family:'Bungee',sans-serif; font-weight:400;}
html[data-theme="kelontong"] .order-card .oc-note{background:#FFFDF4; border:3px dashed #3B2A1A; border-radius:8px; padding:10px 12px; font-size:13px;}
html[data-theme="kelontong"] .order-card .oc-note b{color:#C8372D;}
html[data-theme="kelontong"] .order-card .oc-sec{font-family:'Bungee',sans-serif; font-weight:400; color:#6B4423;}
html[data-theme="kelontong"] .order-card .oc-row .v{font-family:'Caveat',cursive; font-size:24px; line-height:1.1; color:#1F3F73; border-bottom:2px dotted #6B4423;}
html[data-theme="kelontong"] .order-card .oc-item{background:#FFFDF4; border:3px solid #3B2A1A; border-radius:8px; padding:8px 12px; margin-bottom:6px;}
html[data-theme="kelontong"] .order-card .oc-item span:last-child{background:#F2B632; border:2px solid #3B2A1A; border-radius:6px; padding:0 8px; color:#3B2A1A; font-family:'Bungee',sans-serif; font-size:12px;}
html[data-theme="kelontong"] .order-card .oc-divider{border-top-color:#3B2A1A;}
html[data-theme="kelontong"] .order-card .oc-total{font-family:'Bungee',sans-serif; font-weight:400; font-size:22px; color:#C8372D; background:#FFFDF4; border:3px solid #3B2A1A; border-radius:8px; box-shadow:3px 3px 0 #3B2A1A; padding:6px 12px;}
html[data-theme="kelontong"] .order-card .oc-tag{font-family:'Caveat',cursive; font-size:21px; line-height:1.1; color:#3B2A1A;}

/* ===== PESANAN SAYA per tema ===== */
.akun-hello .sm{display:block;}
html[data-theme="pixel"] .akun-hello::before{content:"PLAYER PROFILE"; display:block; font-size:9px; color:#FFC72C; margin-bottom:8px;}
html[data-theme="pixel"] .akun-actions button, html[data-theme="pixel"] .mini-btn, html[data-theme="pixel"] .akun-h{text-transform:uppercase;}
html[data-theme="pixel"] .stamp.on svg, html[data-theme="kelontong"] .stamp.on svg{width:20px; height:20px;}
html[data-theme="pixel"] .stamp-top b{color:#FFC72C;}
html[data-theme="pixel"] .akun-card .oid{font-family:'Press Start 2P',monospace; font-size:10px; line-height:1.6;}

html[data-theme="kelontong"] .akun-head{background:#FFF4DA; border:3px solid #3B2A1A; border-radius:14px; box-shadow:0 5px 0 #3B2A1A; overflow:hidden; margin-bottom:18px;}
html[data-theme="kelontong"] .akun-head::before{content:"KARTU ANGGOTA WARUNK MISHKA"; display:block; padding:9px 16px; background:#C8372D; color:#FFF4DA; border-bottom:3px solid #3B2A1A; font-family:'Bungee',sans-serif; font-size:13px;}
html[data-theme="kelontong"] .akun-hello{font-family:'Caveat',cursive !important; font-weight:700; font-size:34px; color:#1F3F73; margin:6px 16px 0; line-height:1.1; border-bottom:2px dotted #6B4423;}
html[data-theme="kelontong"] .akun-hello::before{content:"nama"; font-family:'Nunito',sans-serif; font-weight:700; font-size:13px; color:#6B4423; margin-right:10px;}
html[data-theme="kelontong"] .akun-head .akun-sub{margin:6px 16px 12px;}
html[data-theme="kelontong"] .akun-code{background:#FFFDF4; border:3px dashed #3B2A1A; border-radius:12px; color:#3B2A1A;}
html[data-theme="kelontong"] .akun-code b{font-family:'Bungee',sans-serif; color:#C8372D;}
html[data-theme="kelontong"] .stamp-card{background:#F6D86A; border:3px solid #3B2A1A; border-radius:14px; box-shadow:0 5px 0 #3B2A1A; color:#3B2A1A;}
html[data-theme="kelontong"] .stamp-top b{font-family:'Bungee',sans-serif; font-weight:400; color:#C8372D;}
html[data-theme="kelontong"] .stamp-top span, html[data-theme="kelontong"] .stamp-note{color:#3B2A1A;}
html[data-theme="kelontong"] .stamp{border:3px dashed #3B2A1A; background:#FFFDF4; color:#6B4423;}
html[data-theme="kelontong"] .stamp.on{border-style:solid; background:#FFE0DC;}
html[data-theme="kelontong"] .akun-h{font-family:'Bungee',sans-serif; font-weight:400; font-size:15px; color:#6B4423;}
html[data-theme="kelontong"] .akun-hello + .akun-sub{margin-bottom:12px;}
html[data-theme="kelontong"] .akun-stat b{font-family:'Bungee',sans-serif; font-weight:400; color:#C8372D;}
html[data-theme="kelontong"] .akun-card .oid{font-family:'Bungee',sans-serif; font-weight:400; color:#1F3F73;}
html[data-theme="kelontong"] .akun-card .items{font-family:'Caveat',cursive; font-size:22px; line-height:1.15; color:#1F3F73;}
html[data-theme="kelontong"] .akun-card .total{font-family:'Bungee',sans-serif; font-weight:400; color:#C8372D;}
html[data-theme="kelontong"] .st-chip{border:2px solid #3B2A1A; border-radius:6px; font-family:'Bungee',sans-serif; font-weight:400; font-size:10px;}
html[data-theme="kelontong"] .tracker div::before{background:#D8C79F; height:8px; border-radius:2px;}
html[data-theme="kelontong"] .tracker div.on::before{background:#2F7D4F;}
html[data-theme="kelontong"] .wbar{background:#D8C79F;} html[data-theme="kelontong"] .wbar i{background:#2F7D4F;}
html[data-theme="kelontong"] .akun-actions button, html[data-theme="kelontong"] .mini-btn{background:#FFF4DA; color:#3B2A1A; border:3px solid #3B2A1A; border-radius:8px; box-shadow:0 3px 0 #3B2A1A; font-weight:800;}
html[data-theme="kelontong"] .akun-actions button.primary, html[data-theme="kelontong"] .mini-btn.primary{background:#C8372D; color:#FFF4DA;}
/* NOTA-THEME-END */
html[data-theme="pixel"] .akun-hello{text-transform:uppercase;}
html[data-theme="pixel"] .stamp.on svg path:first-child{fill:#FFF4D6;}

/* ---------- blok 7 (dulu <style id="layout-v2">) ---------- */
/* ===== layout v2: owner di atas, tab bawah HP, status tutup merah ===== */
#shop-closed-bar{background:#D32F2F !important;}
.open-chip.closed{background:#FFD9D6 !important; color:#7A1414 !important; border-color:#D32F2F !important;}
.open-chip.closed .dot{background:#D32F2F !important; animation:none !important;}
html:root[data-theme="pixel"] .open-chip.closed{background:#FF6B5E !important; color:#14183A !important;}
html:root[data-theme="pixel"] .open-chip.closed .dot{background:#8B0F00 !important;}
html:root[data-theme="kelontong"] .open-chip.closed{background:#C8372D !important; color:#FFF4DA !important;}
html:root[data-theme="kelontong"] .open-chip.closed .dot{background:#FFF4DA !important;}

#home-top{max-width:1280px; margin:0 auto;}
.owner-top{display:flex; gap:14px; align-items:center; margin:4px 16px 10px; padding:14px; border:3px solid var(--ink); border-radius:24px; background:var(--panel,#fff); box-shadow:6px 6px 0 var(--apple-deep,#D32F2F); text-decoration:none; color:var(--ink); transition:transform .15s;}
.owner-top:hover{transform:translate(-2px,-2px);}
.owner-top .ot-av{width:92px; height:108px; flex:0 0 auto; border-radius:16px; background:#FFC9DE; border:3px solid var(--ink); display:flex; align-items:flex-end; justify-content:center; overflow:hidden;}
.owner-top .ot-av img{width:100px; height:100px; object-fit:contain; display:block;}
.owner-top .ot-body{min-width:0; flex:1;}
.owner-top .ot-name{display:block; font-size:18px; font-weight:800; line-height:1.1; font-family:var(--font-logo,inherit);}
.owner-top .ot-intro{margin-top:6px; padding:8px 10px; border:2px solid var(--ink); border-radius:12px 12px 12px 3px; background:#FFF1A8; color:#1A3A6B; font-size:13px; line-height:1.45; font-weight:700;}
.owner-top .ot-go{display:inline-flex; align-items:center; gap:6px; margin-top:8px; font-size:13px; font-weight:800; color:var(--apple-deep,#D32F2F);}
@media (min-width:1000px){
  #home-top{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:center; padding:0 34px; max-width:1248px;}
  #home-top .hero{max-width:none; margin:0;}
  .owner-top{margin:24px 0 8px; flex-direction:column; align-items:stretch; padding:22px; border-radius:28px;}
  .owner-top .ot-av{width:auto; height:250px;}
  .owner-top .ot-av img{width:240px; height:240px;}
  .owner-top .ot-name{font-size:24px;}
  .owner-top .ot-intro{font-size:15px;}
}
html:root[data-theme="pixel"] .owner-top{border:4px solid #14183A; border-radius:0; box-shadow:6px 6px 0 #000; background:#FFFBEA;}
html:root[data-theme="pixel"] .owner-top .ot-av{border:4px solid #14183A; border-radius:0; background:#BFE6FF;}
html:root[data-theme="pixel"] .owner-top .ot-name{font-family:'Press Start 2P',monospace; font-weight:400; font-size:12px; line-height:1.5; color:#14183A;}
html:root[data-theme="pixel"] .owner-top .ot-intro{border:3px solid #14183A; border-radius:0; background:#FFC72C; color:#14183A; font-size:16px; font-weight:600;}
html:root[data-theme="pixel"] .owner-top .ot-go{color:#A32411; font-family:'Press Start 2P',monospace; font-size:10px;}
html:root[data-theme="kelontong"] .owner-top{border:3px solid #3B2A1A; border-radius:14px; box-shadow:0 5px 0 #3B2A1A; background:#FFF4DA;}
html:root[data-theme="kelontong"] .owner-top .ot-av{border:3px solid #3B2A1A; border-radius:10px; background:#F6D9A8;}
html:root[data-theme="kelontong"] .owner-top .ot-name{font-family:'Bungee',sans-serif; font-weight:400; font-size:16px; color:#3B2A1A;}
html:root[data-theme="kelontong"] .owner-top .ot-intro{border:3px solid #3B2A1A; border-radius:8px; background:#F2B632; color:#3B2A1A;}
html:root[data-theme="kelontong"] .owner-top .ot-go{color:#C8372D;}

footer.foot-min{padding:18px 20px 26px !important; font-size:13px; text-align:center;}

.tabbar{display:none;}
body.nf-badge .tabbar{bottom:58px;}
body.nf-badge{padding-bottom:calc(126px + env(safe-area-inset-bottom)) !important;}
.chat-sheet-bg{position:fixed; inset:0; background:rgba(20,24,58,.45); z-index:65; opacity:0; pointer-events:none; transition:opacity .2s;}
.chat-sheet{position:fixed; left:0; right:0; bottom:0; z-index:66; max-width:520px; margin:0 auto; padding:18px 16px calc(20px + env(safe-area-inset-bottom)); background:var(--panel,#fff); border:3px solid var(--ink); border-bottom:0; border-radius:26px 26px 0 0; transform:translateY(110%); transition:transform .25s; color:var(--ink);}
.chat-sheet.open{transform:none;}
.chat-sheet{visibility:hidden;} .chat-sheet.open{visibility:visible;}
.chat-sheet-bg.open{opacity:1; pointer-events:auto;}
.chat-sheet h3{margin:0 0 2px; font-size:19px; font-family:var(--font-logo,inherit);}
.chat-sheet p{margin:0 0 12px; font-size:13px; color:var(--ink-dim);}
.cs-opt{display:flex; align-items:center; gap:12px; width:100%; margin-top:10px; padding:13px 14px; border:3px solid var(--ink); border-radius:16px; background:#fff; box-shadow:0 4px 0 var(--ink); font:inherit; font-weight:800; font-size:15px; color:var(--ink); text-align:left; cursor:pointer;}
.cs-opt small{display:block; font-size:12px; font-weight:600; color:var(--ink-dim);}
.cs-opt .cs-ic{font-size:22px; flex:0 0 auto;}
.cs-alt{margin-top:14px; font-size:13px; text-align:center; color:var(--ink-dim);}
.cs-alt a{color:inherit; font-weight:800; text-decoration:underline; margin:0 6px;}
html:root[data-theme="pixel"] .chat-sheet{background:#FFFBEA; border:4px solid #14183A; border-bottom:0; border-radius:0;}
html:root[data-theme="pixel"] .cs-opt{border:4px solid #14183A; border-radius:0; box-shadow:4px 4px 0 #000; background:#fff;}
html:root[data-theme="pixel"] .chat-sheet h3{font-family:'Press Start 2P',monospace; font-weight:400; font-size:13px; line-height:1.5;}
html:root[data-theme="kelontong"] .chat-sheet{background:#FFF4DA; border:3px solid #3B2A1A; border-bottom:0; border-radius:18px 18px 0 0;}
html:root[data-theme="kelontong"] .cs-opt{border:3px solid #3B2A1A; border-radius:10px; box-shadow:0 4px 0 #3B2A1A; background:#fff;}
html:root[data-theme="kelontong"] .chat-sheet h3{font-family:'Bungee',sans-serif; font-weight:400; font-size:16px;}

@media (max-width:720px), (pointer:coarse) and (max-width:1024px){
  .tabbar{position:fixed; left:0; right:0; bottom:0; z-index:44; height:68px; box-sizing:content-box; padding-bottom:env(safe-area-inset-bottom); display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); background:var(--panel,#fff); border-top:3px solid var(--ink);}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom));}
  .tabbar button{position:relative; border:0; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:0; font:inherit; font-size:11px; font-weight:800; color:#5B7399; cursor:pointer;}
  .tabbar button.on{background:#FFF1A8; color:var(--ink);}
  .tabbar svg{width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
  .tabbar .tb-badge{position:absolute; top:7px; left:calc(50% + 6px); min-width:17px; height:17px; padding:0 4px; box-sizing:border-box; border-radius:9px; background:#D32F2F; color:#fff; font-size:10.5px; line-height:17px; text-align:center;}
  .contact-float{display:none !important;}
  .nav-actions .cart-btn{display:none !important;}
  footer.foot-min{padding-bottom:22px !important;}
  html:root[data-theme="pixel"] .tabbar{background:#FFFBEA; border-top:4px solid #14183A;}
  html:root[data-theme="pixel"] .tabbar button{font-family:'Press Start 2P',monospace; font-size:8px; color:#3B4270;}
  html:root[data-theme="pixel"] .tabbar button.on{background:#FFC72C; color:#14183A;}
  html:root[data-theme="kelontong"] .tabbar{background:#FFF4DA; border-top:3px solid #3B2A1A;}
  html:root[data-theme="kelontong"] .tabbar button{font-family:'Bungee',sans-serif; font-weight:400; font-size:9.5px; color:#7A5A3A;}
  html:root[data-theme="kelontong"] .tabbar button.on{background:#F2B632; color:#3B2A1A;}
}

/* ---------- blok 8 (dulu <style id="layout-v3">) ---------- */
/* ===== v3: samain persis sama mockup ===== */
.h1-br{display:none;}
body .laris-row{grid-template-columns:repeat(3,minmax(0,1fr));}
body .rak-grid{grid-template-columns:repeat(6,minmax(0,1fr)); gap:20px 12px;}
body .bundle-scroll .bx-card, body .bundle-scroll .bundle-card{transform:none !important;}
html:root[data-theme="kidcore"] body .marquee-wrap{transform:none !important; margin:0 0 6px !important; border-top:3px solid var(--ink); border-bottom:3px solid var(--ink);}
.home-h{margin:44px 0 16px;}
.home-h small{display:block; margin-top:4px;}
#home-faq .faq-item{margin:0 0 12px;}

@media (min-width:1000px){
  #home-faq{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; align-items:start;}
  #home-faq .home-h{grid-column:1/-1; margin-bottom:0;}
  #home-faq .faq-item{margin:0;}
  html:root[data-theme="kidcore"] body #home-top .hero{display:flex !important; flex-direction:column; align-items:flex-start; gap:20px; text-align:left !important; padding:54px 0 46px !important; max-width:none !important; margin:0 !important;}
  html:root[data-theme="kidcore"] body #home-top .hero > *{margin:0 !important;}
  html:root[data-theme="kidcore"] body #home-top .hero h1{font-size:clamp(60px,7vw,92px) !important; line-height:.98 !important; text-align:left;}
  html:root[data-theme="kidcore"] body #home-top .hero .h1-deco{font-size:.55em;}
  html:root[data-theme="kidcore"] body #home-top .hero-script{text-align:left !important; font-size:20px !important; line-height:1.7 !important; max-width:600px; padding:0 !important;}
  html:root[data-theme="kidcore"] body #home-top .hero .search-wrap{width:100%; max-width:600px !important;}
  html:root[data-theme="kidcore"] body #home-top .hero-chips{justify-content:flex-start;}
}

@media (max-width:720px), (pointer:coarse) and (max-width:1024px){
  .h1-br{display:inline;}
  body .laris-row{grid-template-columns:1fr; gap:12px;}
  body .rak-grid{grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 8px;}
  .home-h{margin:34px 0 12px; font-size:22px; line-height:1.2;}
  .hero-chips{flex-wrap:nowrap !important; overflow-x:auto; justify-content:flex-start !important; padding:2px 2px 8px; scrollbar-width:none;}
  .hero-chips::-webkit-scrollbar{display:none;}
  .hero-chips a, .hero-chips span{flex:0 0 auto; white-space:nowrap;}
  html:root[data-theme="kidcore"] body #home-top .hero{display:flex !important; flex-direction:column; align-items:flex-start; text-align:left !important; padding:26px 16px 0 !important; gap:0;}
  html:root[data-theme="kidcore"] body #home-top .hero h1{font-size:52px !important; line-height:1 !important; text-align:left; margin:0 0 14px !important;}
  html:root[data-theme="kidcore"] body #home-top .hero .h1-deco{font-size:.58em;}
  html:root[data-theme="kidcore"] body #home-top .hero-script{text-align:left !important; margin:0 0 14px !important; padding:0 !important; font-size:14.5px !important; line-height:1.7 !important;}
  html:root[data-theme="kidcore"] body #home-top .hero .open-chip{margin:0 0 20px;}
  html:root[data-theme="kidcore"] body #home-top .hero .search-wrap{width:100%; max-width:none !important; margin:0 0 14px !important;}
  html:root[data-theme="kidcore"] body #home-top .hero-chips{width:100%; margin:0;}
  .owner-top{margin:14px 16px 6px;}
  html:root[data-theme="kidcore"] body .marquee-wrap{margin-top:14px !important;}
  .cat-row{padding-top:6px;}
}

/* ---------- blok 9 (dulu <style id="layout-v4">) ---------- */
/* ===== v4: pixel + kelontong, owner card masuk ke dalam hero (nggak dobel) ===== */
html:root[data-theme="pixel"] body .hero::before{display:none !important;}
html:root[data-theme="pixel"] .owner-top, html:root[data-theme="kelontong"] .owner-top{position:relative; z-index:3;}
html:root[data-theme="pixel"] .owner-top{margin:-72px 16px 14px;}
html:root[data-theme="kelontong"] .owner-top{margin:18px 16px 8px;}
@media (min-width:1000px){
  html:root[data-theme="pixel"] #home-top, html:root[data-theme="kelontong"] #home-top{display:block !important; position:relative; max-width:none !important; padding:0 !important;}
  html:root[data-theme="pixel"] .owner-top, html:root[data-theme="kelontong"] .owner-top{
    position:absolute; z-index:3; width:330px; margin:0 !important; flex-direction:column; align-items:stretch; padding:18px;
    right:max(24px, calc((100% - 1120px)/2 + 32px)); top:50%; transform:translateY(-50%);}
  html:root[data-theme="pixel"] .owner-top:hover, html:root[data-theme="kelontong"] .owner-top:hover{transform:translateY(-50%);}
  html:root[data-theme="pixel"] .owner-top .ot-av, html:root[data-theme="kelontong"] .owner-top .ot-av{width:auto; height:190px;}
  html:root[data-theme="pixel"] .owner-top .ot-av img, html:root[data-theme="kelontong"] .owner-top .ot-av img{width:180px; height:180px;}
  html:root[data-theme="kelontong"] body #home-top .hero{padding-right:calc(330px + 90px) !important; padding-left:40px !important;}
}
@media (max-width:720px), (pointer:coarse) and (max-width:1024px){
  html:root[data-theme="kelontong"] body #home-hero h1{font-size:44px !important; line-height:1.05 !important;}
  html:root[data-theme="kelontong"] body .hero-script{font-size:21px !important; line-height:1.25 !important;}
  html:root[data-theme="kelontong"] .home-h small{font-size:17px;}
  html:root[data-theme="kelontong"] body #home-top .hero{padding:26px 16px 22px !important;}
}