/* Identidade TRY (manual v1.0 em idv/): Sand/Ink/TRY Orange fixos no widget;
   --cor é a cor da LOJA (vem de lojas/<id>.json) e só pinta a casca da vitrine. */
:root{
  --cor:#1a7f37;                 /* cor da loja (sobrescrita pelo app.js) */
  --try-orange:#F8733B; --ink:#17191C; --sand:#FFF8F4;
  --ocean:#0F5D62; --orange-soft:#FFE3D6; --mist:#E9F2F1;
  --texto-2:#5f646c; --texto-3:#8a8f98; --linha:rgba(23,25,28,.08);
}
[hidden]{display:none!important}
*{box-sizing:border-box}
body{font-family:'Inter',system-ui,sans-serif;margin:0;color:var(--ink);
  background:var(--sand);-webkit-font-smoothing:antialiased}
h1,h2{font-family:'Sora','Inter',system-ui,sans-serif;letter-spacing:-.01em}

/* casca da loja */
header{padding:20px 16px 0;max-width:860px;margin:0 auto}
header h1{margin:0;font-size:22px;font-family:'Inter',system-ui,sans-serif;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--cor)}
header .tagline{margin:2px 0 0;font-size:13px;color:var(--texto-2)}

/* banner do widget TRY */
.banner-try{max-width:860px;margin:14px auto 0;padding:14px 16px;background:var(--orange-soft);
  border-radius:16px;display:flex;align-items:center;gap:14px}
.banner-try img{flex:none;display:block}
.banner-try strong{display:block;font-size:14px}
.banner-try small{display:block;margin-top:2px;font-size:11px;color:rgba(23,25,28,.6)}

main{max-width:860px;margin:0 auto;padding:16px}
.secao-head{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.rotulo-secao{font-weight:700;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--cor)}
.dica{color:var(--texto-2);font-size:14px}

/* catálogo */
#grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}
.card{border:1px solid var(--linha);border-radius:16px;background:#fff;padding:8px;
  cursor:pointer;text-align:center;font:inherit;
  box-shadow:0 1px 2px rgba(23,25,28,.04),0 10px 22px -16px rgba(23,25,28,.3)}
.card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:10px}
.card span{display:block;margin-top:6px;font-weight:600;font-size:14px}
.card small{color:var(--texto-3)}
/* seleção é estado do widget: sempre laranja TRY, independente da cor da loja */
.card.sel{border:2px solid var(--try-orange);box-shadow:0 0 0 3px var(--orange-soft);padding:7px}

/* barra fixa */
#barra{position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--linha);
  box-shadow:0 -10px 24px -18px rgba(23,25,28,.4);
  padding:12px 16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.barra-info{min-width:0}
.barra-info small{display:block;font-weight:700;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--texto-3)}
.barra-info span{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;display:block}

/* botões pill; texto Ink sobre laranja (regra do manual) */
button{font:inherit;border:0;border-radius:999px;padding:14px 22px;cursor:pointer}
.primario{background:var(--try-orange);color:var(--ink);font-weight:700;font-size:15px}
.secundario{background:#fff;color:var(--ink);border:1.5px solid var(--ink);font-weight:600}
button:disabled{opacity:.4;cursor:default}

/* telas do widget: folha estilo bottom-sheet */
section{margin:18px 0}
.folha{background:#fff;border:1px solid var(--linha);border-radius:24px;padding:8px 18px 18px;
  max-width:480px;margin:0 auto;box-shadow:0 20px 50px -30px rgba(23,25,28,.4)}
.folha.centro{text-align:center}
.grabber{display:block;width:44px;height:5px;border-radius:999px;background:rgba(23,25,28,.15);
  margin:4px auto 12px}
.folha-cab{display:flex;align-items:center;justify-content:space-between;gap:10px}
.folha h2{margin:0;font-size:21px}
.chip-loja{background:var(--sand);border:1px solid rgba(23,25,28,.1);border-radius:999px;
  padding:6px 12px;font-weight:600;font-size:11px;color:var(--texto-2)}
.passo,.sub{margin:6px 0 0;font-size:13px;color:var(--texto-2)}
.logo-try{margin:6px auto 12px;display:block}

.checklist{margin:14px 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.checklist li{position:relative;padding-left:26px;font-size:13.5px;color:#3d4249}
.checklist li::before{content:"";position:absolute;left:0;top:1px;width:17px;height:17px;
  border-radius:50%;background:var(--mist);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F5D62' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:11px;background-position:center;background-repeat:no-repeat}

#provador input[type=file]{display:block;margin:10px 0;font-size:13px}
.consentimento{background:var(--sand);border:1px solid var(--linha);border-radius:16px;
  padding:12px 14px;margin:12px 0}
.consentimento p{margin:0;font-size:12.5px;line-height:1.45;color:var(--texto-2)}
.consentimento p strong{color:var(--ink)}
.consentimento label{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;margin:10px 0 0}
.consentimento input[type=checkbox]{accent-color:var(--try-orange);width:18px;height:18px;flex:none}
.consentimentos-opcionais{margin-top:14px}
.consentimentos-opcionais .secundario{width:100%;margin-top:12px}
.retorno-privacidade{min-height:1.2em;margin:8px 0 0;font-size:12px;color:var(--ocean)}
#provador .primario,#resultado .primario{display:block;width:100%;margin-top:12px}
#provador .secundario,#resultado .secundario,#recusa .secundario{display:block;width:100%;margin-top:9px}
#recusa .primario{display:block;width:100%;margin-top:16px}

#preview,#img-resultado{max-width:100%;max-height:70vh;border-radius:16px;display:block;margin:10px auto 0}

/* andamento: anel laranja, ciclo 1,2 s (motion do manual) */
#andamento .spinner{width:52px;height:52px;border:6px solid var(--orange-soft);
  border-top-color:var(--try-orange);border-radius:50%;margin:18px auto 12px;
  animation:g 1.2s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes g{to{transform:rotate(360deg)}}
#andamento-msg{color:var(--texto-2);font-size:13.5px}

.badge-ok{background:var(--ocean);color:#fff;font-weight:700;font-size:10px;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 12px;border-radius:999px}
.aviso{background:var(--orange-soft);border-radius:12px;padding:11px 12px;
  font-size:12.5px;line-height:1.45;margin:12px 0 0}
.powered{margin:12px 0 0;text-align:center;font-size:10.5px;color:var(--texto-3)}
.powered strong{color:var(--ink)}

footer{text-align:center;color:var(--texto-3);font-size:12px;padding:20px 16px 90px}
.controles-dados{display:flex;justify-content:center;align-items:center;gap:14px;
  flex-wrap:wrap;margin-top:10px}
.controles-dados a{color:var(--ocean);font-weight:600}
.controles-dados button{padding:0;background:transparent;color:#9b2634;
  text-decoration:underline;border-radius:0;font-size:12px}

/* sugestão de tamanho (card no resultado) */
.card-tamanho .sub-tamanho{display:block;font-weight:400;color:var(--texto-3);
  font-size:11px;margin-top:2px}
.linha-tamanho{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.linha-tamanho input,.linha-tamanho select{flex:1 1 90px;min-width:0;
  padding:10px 10px;border:1px solid rgba(0,0,0,.14);border-radius:10px;
  font:inherit;font-size:13.5px;background:#fff}
.linha-tamanho button{flex:1 1 100%;margin-top:2px}
#tamanho-msg{font-weight:600}