/* Vitrine da Entrelaça (link da bio). Cores e regras de contraste do docs/brand.json:
   terracota só em títulos grandes e fundos; texto pequeno em café/índigo. */
:root { --cru:#F5EFE6; --cafe:#3B2F2A; --terracota:#B85C38; --terracota-escuro:#8E4428; --indigo:#2F3E5C;
        --texto-2:#6E5E4E; --borda:#E3D8C6; --borda-2:#D9CBB4; --areia:#EBE0CE; --foto:#E9D3C3;
        --vermelho:#9C3B2A; --serif:'Cormorant Garamond', Georgia, serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--cru); font-family:'Montserrat', system-ui, sans-serif; color:var(--cafe); }
a { color:var(--indigo); }
.pagina { max-width:720px; margin:0 auto; padding:0 18px 40px; }

.topo { display:flex; justify-content:center; padding:18px 0 14px; border-bottom:1px solid var(--borda); }
.topo img { height:50px; display:block; }

.intro { text-align:center; padding:26px 6px 8px; }
.intro h1 { font-family:var(--serif); font-weight:600; font-size:38px; line-height:1.05; margin:0 0 8px; color:var(--terracota); }
.intro p { margin:0 auto; max-width:420px; font-size:14px; line-height:1.5; color:var(--texto-2); }

.abas { display:flex; gap:6px; padding:4px; margin:20px 0 8px; border:1px solid var(--borda-2); border-radius:26px; background:#fff; }
.aba { flex:1; min-height:46px; display:flex; align-items:center; justify-content:center; gap:6px; border-radius:22px;
       font-size:14px; font-weight:600; color:var(--cafe); text-decoration:none; }
.aba.ativa { background:var(--cafe); color:var(--cru); }
.aba .n { font-size:11px; min-width:20px; height:20px; border-radius:10px; display:inline-flex; align-items:center;
          justify-content:center; background:var(--areia); color:var(--cafe); padding:0 6px; }
.aba.ativa .n { background:var(--terracota); color:var(--cru); }
.explica { font-size:13px; color:var(--texto-2); text-align:center; margin:6px 0 16px; line-height:1.45; }

.grade { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (min-width:620px) { .grade { grid-template-columns:repeat(3, 1fr); } }
.card { display:flex; flex-direction:column; border:1px solid var(--borda); border-radius:18px; overflow:hidden;
        background:#fff; color:var(--cafe); text-decoration:none; transition:transform .15s, box-shadow .15s; }
.card:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(60,40,20,.10); }
.capa { width:100%; aspect-ratio:4 / 5; object-fit:cover; display:block; background:var(--foto); }
.capa.vazia { background-image:repeating-linear-gradient(45deg, rgba(184,92,56,.10) 0 2px, transparent 2px 12px); }
.card .corpo { padding:10px 12px 14px; }
.card .nome { font-family:var(--serif); font-size:21px; line-height:1.1; }
.card .preco { font-weight:700; font-size:15px; margin-top:4px; }
.card .meta { font-size:12px; color:var(--texto-2); margin-top:2px; }

.vazio { padding:36px 20px; text-align:center; border:1.5px dashed var(--borda-2); border-radius:18px;
         color:var(--texto-2); font-size:14px; line-height:1.5; }
.vazio .grande { font-family:var(--serif); font-size:26px; color:var(--cafe); margin-bottom:4px; }

/* página da bolsa */
.voltar { display:inline-flex; align-items:center; min-height:44px; margin-top:8px; color:var(--texto-2);
          font-size:14px; text-decoration:none; }
.galeria { display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -18px; padding:0 18px;
           scrollbar-width:none; }
.galeria::-webkit-scrollbar { display:none; }
.galeria img, .galeria .capa { flex:none; width:86%; max-width:440px; aspect-ratio:4 / 5; object-fit:cover;
                               border-radius:20px; scroll-snap-align:center; background:var(--foto); }
.galeria > :only-child { width:100%; max-width:none; }
.dica-galeria { font-size:12px; color:var(--texto-2); text-align:center; margin-top:8px; }
.nome-produto { font-family:var(--serif); font-weight:600; font-size:36px; line-height:1.05; margin:20px 0 8px; }
.linha-preco { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.preco-grande { font-size:24px; font-weight:700; }
.selo { font-size:12px; font-weight:600; padding:4px 12px; border-radius:12px; background:var(--areia); color:var(--cafe); }
.prazo { margin-top:10px; font-size:14px; color:var(--indigo); font-weight:500; line-height:1.45; }
.descricao { margin-top:16px; font-size:15px; line-height:1.6; }

.comprar { margin-top:22px; display:flex; flex-direction:column; gap:12px; padding:16px; border-radius:18px; background:var(--areia); }
.quantidade { display:flex; align-items:center; justify-content:space-between; font-size:14px; font-weight:600; }
.quantidade select { min-height:44px; min-width:84px; padding:0 12px; border:1px solid var(--borda-2); border-radius:12px;
                     background:#fff; font-family:inherit; font-size:16px; color:var(--cafe); }
.btn { min-height:56px; border:none; border-radius:16px; background:var(--terracota); color:var(--cru); font-family:inherit;
       font-weight:700; font-size:17px; cursor:pointer; display:flex; align-items:center; justify-content:center;
       text-decoration:none; width:100%; }
.btn:hover { background:var(--terracota-escuro); color:var(--cru); }
.btn.secundario { margin-top:22px; background:var(--cafe); }
.dica { font-size:12px; color:var(--texto-2); line-height:1.45; text-align:center; }

.aviso { margin:14px 0 0; padding:12px 14px; border-radius:14px; background:var(--areia); font-size:14px; font-weight:600; }
.aviso.erro { background:#F6D9CE; color:var(--vermelho); }

.rodape { margin-top:40px; padding-top:20px; border-top:1px solid var(--borda); text-align:center; font-size:13px; color:var(--texto-2); }
.rodape .frase { font-family:var(--serif); font-size:22px; color:var(--cafe); margin-bottom:10px; }
.rodape .contatos { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.rodape .contatos a { font-weight:600; color:var(--indigo); text-decoration:none; min-height:32px; display:inline-flex;
                      align-items:center; justify-content:center; }

/* cores: escolha da cliente (bolsa personalizável) ou cores fixas da bolsa */
.cores-fixas { font-size:14px; margin:4px 0 14px; color:var(--cafe); }
.bolinha { display:inline-block; width:22px; height:22px; border-radius:50%; border:1px solid rgba(59,47,42,.25); flex:none; }
.bolinha.p { width:14px; height:14px; vertical-align:-2px; margin:0 5px 0 4px; }
.escolha-cor { border:0; padding:0; margin:0; }
.escolha-cor legend { font-size:14px; font-weight:600; padding:0; margin-bottom:8px; }
.amostras { display:flex; flex-wrap:wrap; gap:8px; }
.amostra-cor { display:flex; align-items:center; gap:7px; min-height:44px; padding:0 12px 0 8px; border:1px solid var(--borda-2);
  border-radius:22px; background:#fff; font-size:13px; cursor:pointer; }
.amostra-cor input { position:absolute; opacity:0; pointer-events:none; }
.amostra-cor:has(input:checked) { border-color:var(--cafe); box-shadow:0 0 0 1px var(--cafe); font-weight:600; }
.amostra-cor:has(input:focus-visible) { outline:2px solid var(--indigo); outline-offset:2px; }

/* promoção: preço cheio riscado + selo de desconto */
.de { color:var(--texto-2); font-weight:400; font-size:.85em; margin-right:4px; }
.card { position:relative; }
.selo-promo { position:absolute; top:10px; left:10px; z-index:1; background:var(--terracota); color:#fff; font-size:12px;
  font-weight:700; padding:4px 9px; border-radius:20px; }
.selo.promo { background:var(--terracota); color:#fff; }
.promo-ate { font-size:13px; font-weight:600; color:var(--terracota-escuro); margin:8px 0; }
.amostras-card { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px; }
.amostras-card .combo { display:inline-flex; }
.amostras-card .combo .bolinha.p { margin:0 -3px 0 0; }

/* lurex: pontinhos brilhantes por cima da cor de fundo do fio */
.lurex-prata, .lurex-ouro, .lurex-multicolor { background-repeat: repeat; }
.lurex-prata { background-image: radial-gradient(circle, #FFFFFF 0 0.9px, transparent 1.3px),
  radial-gradient(circle, #C9CDD3 0 0.8px, transparent 1.2px);
  background-size: 7px 6px, 5px 7px; background-position: 1px 1px, 4px 3px; }
.lurex-ouro { background-image: radial-gradient(circle, #FBE7A1 0 0.9px, transparent 1.3px),
  radial-gradient(circle, #D4A62A 0 0.8px, transparent 1.2px);
  background-size: 7px 6px, 5px 7px; background-position: 1px 1px, 4px 3px; }
.lurex-multicolor { background-image: radial-gradient(circle, #FF4FA3 0 0.9px, transparent 1.3px),
  radial-gradient(circle, #2ED3E6 0 0.9px, transparent 1.3px), radial-gradient(circle, #F5C342 0 0.9px, transparent 1.3px);
  background-size: 8px 7px, 7px 8px, 6px 6px; background-position: 1px 1px, 5px 3px, 3px 5px; }

/* três abas (Todas, Pronta entrega, Encomenda) numa linha só no celular */
.aba { white-space:nowrap; font-size:13px; padding:0 8px; gap:5px; }
.aba:first-child { flex:0 0 auto; padding:0 14px; }
@media (min-width:480px) { .aba { font-size:14px; } }
.abas { gap:2px; }
.aba { flex:1 1 auto; min-width:0; padding:0 6px; }
.aba:first-child { flex:0 0 auto; padding:0 12px; }
@media (max-width:380px) { .aba { font-size:12px; gap:4px; } .aba .n { min-width:18px; height:18px; font-size:10px; } }