/* Loja Online — configuração (ConfigLojaOnline.js) e produtos publicados
   (ProdutosLojaOnline.js). Somente tokens de tokens.css. */

.lo-layout {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
    gap: var(--spacing-4);
    align-items: start;
}
@media (max-width: 1000px) {
    .lo-layout { grid-template-columns: 1fr; }
}
.lo-coluna { display: flex; flex-direction: column; gap: var(--spacing-4); min-width: 0; }

.lo-secao { padding: var(--spacing-4); display: flex; flex-direction: column; gap: var(--spacing-3); }
.lo-secao .form-group { margin: 0; }
.lo-secao-titulo {
    display: flex; align-items: center; gap: var(--spacing-2);
    font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text);
}
.lo-secao-titulo i { color: var(--color-primary); }

.lo-ajuda { margin: 0; font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.4; }

.lo-switch {
    display: flex; align-items: flex-start; gap: var(--spacing-2);
    font-size: var(--font-size-sm); color: var(--color-text); cursor: pointer;
}
.lo-switch input { margin-top: 3px; }

.lo-aviso {
    display: flex; gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border-radius: var(--radius-md);
    background: var(--color-warning-subtle);
    font-size: var(--font-size-sm); color: var(--color-text);
}
.lo-aviso ul { margin: var(--spacing-1) 0 0; padding-left: var(--spacing-4); }

.lo-link {
    display: flex; align-items: center; gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.lo-link code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-xs); }

.lo-formas { display: flex; flex-wrap: wrap; gap: var(--spacing-2); }
.lo-chip {
    display: inline-flex; align-items: center; gap: var(--spacing-1);
    padding: var(--spacing-1) var(--spacing-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm); cursor: pointer;
}
.lo-chip.ativo { border-color: var(--color-primary); background: var(--color-primary-subtle); color: var(--color-primary-text); }
.lo-chip input { margin: 0; }

.lo-cor { display: flex; align-items: center; gap: var(--spacing-2); }
.lo-cor input[type="color"] { width: 40px; height: 34px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: none; }

.lo-banner {
    position: relative; overflow: hidden;
    aspect-ratio: 16 / 6;
    border-radius: var(--radius-lg);
}
.lo-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; }
.lo-banner-texto {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-1);
    padding: var(--spacing-4);
    color: #fff; /* prévia sobre a cor da marca da loja, igual nos dois temas */
}
.lo-banner-texto strong { font-size: var(--font-size-lg); }
.lo-banner-texto span { font-size: var(--font-size-sm); }
.lo-banner-acoes { display: flex; gap: var(--spacing-2); margin-top: var(--spacing-2); }

/* Produtos publicados */
.lo-filtros {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-2); padding: var(--spacing-3); margin-bottom: var(--spacing-3);
}
@media (max-width: 800px) {
    .lo-filtros { grid-template-columns: 1fr; }
}
.lo-barra-lote {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2);
    padding: var(--spacing-2) var(--spacing-3); margin-bottom: var(--spacing-3);
    border-radius: var(--radius-md);
    background: var(--color-primary-subtle);
    font-size: var(--font-size-sm);
}
.lo-tabela .badge + .badge { margin-left: var(--spacing-1); }
.lo-thumb { width: 40px; height: 40px; border-radius: var(--radius-md); object-fit: cover; display: inline-flex; }
.lo-thumb-vazio { align-items: center; justify-content: center; background: var(--color-surface-hover); color: var(--color-text-muted); }
.lo-produto-nome { font-weight: var(--font-weight-medium); }
.lo-paginacao {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--spacing-2);
    padding: var(--spacing-3); border-top: 1px solid var(--color-border);
    font-size: var(--font-size-sm); color: var(--color-text-muted);
}