/* =================================================================
   Veja na sua casa — tema "fire & garden" (inspiração Eco Flame)
   Dark quente de anoitecer + acento laranja-fogo em degradê ember.
   Whitelabel: troque --accent/--ember-a/--ember-b para a cor da loja.
   ================================================================= */
:root{
  --bg:#1b1310; --surface:#241a15; --surface-2:#2d2018;
  --ink:#f5ede2; --muted:#b5a191; --line:#3d2d22;
  --accent:#e0571c; --accent-600:#c84a15; --accent-tint:rgba(224,87,28,.14);
  --ember-a:#f59d4b; --ember-b:#d8430f;
  --wa:#25d366; --wa-600:#1ebe5a;
  --radius:18px; --radius-sm:12px;
  --shadow:0 1px 2px rgba(0,0,0,.25), 0 14px 32px rgba(0,0,0,.38);
  --maxw:560px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.45; -webkit-font-smoothing:antialiased;
}
.hero-title,.step-title,.state-title,.result-title,.brand-name,.cat,.btn{
  font-family:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.app{max-width:var(--maxw); margin:0 auto; padding:0 16px calc(120px + env(safe-area-inset-bottom)); min-height:100dvh}

/* ---- Topbar ---- */
.topbar{display:flex; align-items:center; justify-content:space-between; padding:18px 2px 8px}
.brand{display:flex; align-items:center; gap:10px}
.brand-mark{width:34px; height:34px; flex:0 0 auto; border-radius:50%;
  background:linear-gradient(135deg,var(--ember-a),var(--ember-b));
  color:#fff7ef; display:grid; place-items:center;
  box-shadow:0 0 0 2px rgba(245,157,75,.25), 0 4px 14px rgba(216,67,15,.35)}
.brand-mark svg{width:18px; height:18px}
.brand-name{font-size:17px; font-weight:700; letter-spacing:-.01em}
.brand-badge{font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted);
  background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:5px 11px}

/* ---- Hero ---- */
.hero{position:relative; padding:18px 2px 10px}
.hero::before{content:""; position:absolute; left:-70px; top:-90px; width:340px; height:260px;
  background:radial-gradient(closest-side, rgba(224,87,28,.22), transparent 72%);
  filter:blur(8px); pointer-events:none}
.hero-title{position:relative; font-size:30px; line-height:1.14; letter-spacing:-.02em; font-weight:700; margin:0 0 9px}
.hero-title em{font-style:normal;
  background:linear-gradient(120deg,var(--ember-a),var(--accent));
  -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{position:relative; margin:0; color:var(--muted); font-size:15px}

/* ---- Cards / steps ---- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px; margin-top:14px}
.step-head{display:flex; align-items:center; gap:10px; margin-bottom:12px}
.step-num{width:24px; height:24px; flex:0 0 auto; border-radius:50%; background:var(--accent-tint);
  color:var(--ember-a); font-size:13px; font-weight:700; display:grid; place-items:center}
.step-title{font-size:16.5px; font-weight:700; letter-spacing:-.01em; margin:0}
.step-title .opt{color:var(--muted); font-weight:400; font-size:13px}

/* ---- Dropzone ---- */
.dropzone{position:relative; border:1.5px dashed var(--line); border-radius:var(--radius-sm);
  background:var(--surface-2); cursor:pointer; transition:border-color .15s, background .15s; overflow:hidden}
.dropzone:hover,.dropzone:focus-visible,.dropzone.is-drag{border-color:var(--accent); background:var(--accent-tint); outline:none}
.dropzone-empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:26px 16px}
.dz-icon{width:30px; height:30px; color:var(--ember-a); margin-bottom:4px}
.dropzone-title{font-size:14px; font-weight:600}
.dropzone-hint{font-size:12.5px; color:var(--muted)}
.dropzone-preview{position:relative}
.dropzone-preview img{display:block; width:100%; max-height:340px; object-fit:cover}
.preview-change{position:absolute; right:10px; bottom:10px; border:none; cursor:pointer;
  background:rgba(12,8,6,.66); color:#fff; font-size:12.5px; font-weight:600;
  padding:7px 12px; border-radius:999px; backdrop-filter:blur(4px)}

/* ---- Categorias (faixa horizontal com setas + fade) ---- */
.cats-shell{position:relative; margin-bottom:14px}
.cats{display:flex; gap:8px; overflow-x:auto; padding:3px 2px; scroll-behavior:smooth;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; cursor:grab}
.cats::-webkit-scrollbar{display:none}
.cats.is-dragging{cursor:grabbing; scroll-behavior:auto}
.cats-shell::before,.cats-shell::after{content:""; position:absolute; top:0; bottom:0; width:44px;
  z-index:2; pointer-events:none; opacity:1; transition:opacity .2s}
.cats-shell::before{left:0; background:linear-gradient(90deg, var(--surface) 18%, transparent)}
.cats-shell::after{right:0; background:linear-gradient(270deg, var(--surface) 18%, transparent)}
.cats-shell.at-start::before{opacity:0}
.cats-shell.at-end::after{opacity:0}
.cats-nav{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:30px; height:30px;
  border-radius:50%; border:1px solid var(--line); background:var(--surface-2); color:var(--ink);
  display:grid; place-items:center; cursor:pointer; padding:0; box-shadow:var(--shadow);
  transition:opacity .2s, border-color .15s, color .15s}
.cats-nav svg{width:14px; height:14px}
.cats-nav:hover{border-color:var(--accent); color:var(--ember-a)}
.cats-nav-left{left:-8px}
.cats-nav-right{right:-8px}
.cats-shell.at-start .cats-nav-left{opacity:0; pointer-events:none}
.cats-shell.at-end .cats-nav-right{opacity:0; pointer-events:none}
@media (hover:none) and (pointer:coarse){ .cats-nav{display:none} }
.cat{flex:0 0 auto; font-size:13px; font-weight:600; letter-spacing:.01em; color:var(--muted);
  background:var(--surface-2); border:1px solid var(--line); border-radius:999px; padding:9px 16px;
  cursor:pointer; transition:background .15s, color .15s, border-color .15s; -webkit-tap-highlight-color:transparent}
.cat:hover{border-color:#54402f; color:var(--ink)}
.cat.is-active{background:linear-gradient(135deg,var(--ember-a),var(--ember-b)); color:#fff7ef; border-color:transparent}

/* ---- Catalog ---- */
.catalog{display:grid; grid-template-columns:repeat(2,1fr); gap:12px}
.catalog-empty{grid-column:1/-1; text-align:center; color:var(--muted); font-size:13.5px; margin:18px 0}
.product{position:relative; border:1.5px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface-2); padding:12px 10px 11px; cursor:pointer; text-align:center;
  transition:border-color .15s, transform .08s, box-shadow .15s; -webkit-tap-highlight-color:transparent}
.product:active{transform:scale(.98)}
.product:hover{border-color:#54402f}
.product.is-selected{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent), 0 6px 18px rgba(216,67,15,.25)}
.product-art{height:92px; display:grid; place-items:center; color:var(--ink)}
.product.is-selected .product-art{color:var(--ember-a)}
.product-art svg{width:100%; height:72px}
.product-art img{width:100%; height:92px; object-fit:cover; border-radius:8px}
.product-name{display:block; font-family:"Sora",system-ui,sans-serif; font-size:13px; font-weight:600; margin-top:9px; line-height:1.25}
.product-price{display:block; font-size:11.5px; color:var(--muted); margin-top:3px; letter-spacing:.02em}
.product-check{position:absolute; top:-7px; right:-7px; width:20px; height:20px; border-radius:50%;
  background:linear-gradient(135deg,var(--ember-a),var(--ember-b)); color:#fff; font-size:12px;
  display:none; place-items:center; box-shadow:var(--shadow)}
.product.is-selected .product-check{display:grid}

/* ---- Textarea ---- */
.textarea{width:100%; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface-2); padding:11px 12px; font:inherit; font-size:14px; color:var(--ink); resize:vertical}
.textarea:focus{outline:none; border-color:var(--accent); background:#332419}
.textarea::placeholder{color:#8a7866}

/* ---- Buttons ---- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font-size:15px; font-weight:600; border:none; border-radius:var(--radius-sm); padding:14px 18px;
  transition:filter .15s, transform .08s, background .15s, color .15s}
.btn:active{transform:translateY(1px)}
.btn:disabled{cursor:not-allowed; opacity:1}
.btn-accent{background:linear-gradient(135deg,var(--ember-a),var(--ember-b)); color:#fff7ef}
.btn-accent:hover:not(:disabled){filter:brightness(1.08)}
.btn-accent:disabled{background:#33271f; color:#7d6c5c}
.btn-wa{background:var(--wa); color:#06351a; width:100%; font-size:16px; padding:15px}
.btn-wa:hover{background:var(--wa-600)}
.btn-ghost{background:transparent; color:var(--muted); border:1px solid var(--line)}
.btn-ghost:hover{color:var(--ink); border-color:#54402f}

/* ---- CTA bar (sticky) ---- */
.cta-bar{position:fixed; left:0; right:0; bottom:0; z-index:20;
  background:linear-gradient(to top, var(--bg) 72%, rgba(27,19,16,0));
  padding:14px 16px calc(14px + env(safe-area-inset-bottom))}
.cta-bar > *{max-width:var(--maxw); margin-left:auto; margin-right:auto}
.btn-cta{display:flex; width:100%; font-size:16px; box-shadow:0 8px 22px rgba(216,67,15,.32)}
.btn-cta:disabled{box-shadow:none}
.cta-hint{text-align:center; font-size:12.5px; color:var(--muted); margin:8px auto 0}

/* ---- States (loading / error) ---- */
.view-state{display:flex; flex-direction:column; align-items:center; text-align:center; padding:64px 20px 40px}
.state-title{font-size:20px; font-weight:700; margin:18px 0 6px}
.state-msg{color:var(--muted); font-size:14.5px; margin:0; max-width:300px}
.state-emoji{font-size:44px}
.view-state .btn{margin-top:22px; min-width:200px}
.spinner{width:46px; height:46px; border-radius:50%;
  border:4px solid rgba(224,87,28,.18); border-top-color:var(--ember-a); animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Result ---- */
.view-result{padding-top:18px; text-align:center}
.result-title{font-size:21px; font-weight:700; margin:0 0 14px}
.result-frame{border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); background:var(--surface)}
.result-frame img{display:block; width:100%}
.result-demo-tag{display:inline-block; margin-top:10px; font-size:11px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted); background:var(--surface); border:1px solid var(--line); border-radius:999px; padding:3px 10px}
.result-actions{margin-top:18px}
.result-secondary{display:flex; gap:10px; margin-top:10px}
.result-secondary .btn{flex:1}

/* ---- Footer ---- */
.footer{text-align:center; color:var(--muted); font-size:12px; padding:26px 0 10px}
.footer strong{color:var(--ink); font-weight:600}

@media (max-width:360px){
  .hero-title{font-size:26px}
}