/* ============================================================= marca.css — ajustes escritos à mão por cima do tema extraído. As CORES não moram aqui: elas vêm do content.json e são injetadas no pelo partial `estilo-marca`. Este arquivo é para o que precisa de CSS de verdade — correções de layout e regras novas que consomem as variáveis --cor-*. ============================================================= */ /* ------------------------------------------------------------- 1. Barra de filtros no tablet O tema esconde a barra de filtros abaixo de 750px (.small-hide) e a mostra a partir daí, mas ela foi dimensionada para desktop: numa viewport de 768px o grid pedia 775px dentro de um contêiner de 653px e empurrava a página inteira 57px para o lado. O grid do tema dimensiona as colunas pelo conteúdo e não encolhe. Trocar por flex com quebra resolve sem mexer no visual em desktop, porque a regra é limitada à faixa do tablet. ------------------------------------------------------------- */ @media screen and (min-width: 750px) and (max-width: 989px) { facet-filters-form.facets, .facets-container { max-width: 100%; min-width: 0; } .facets__form { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; max-width: 100%; } .facets__form > * { flex: 0 1 auto; min-width: 0; } /* o contador de produtos vai para o fim da linha em vez de espremer */ .facets__form .product-count { margin-left: auto; } } /* ------------------------------------------------------------- 2. Rede de proteção contra rolagem horizontal Extrator perde media query com facilidade. Estas duas regras impedem que qualquer sobra futura empurre a página para o lado — sem esconder overflow no , que quebraria `position: sticky` no cabeçalho. ------------------------------------------------------------- */ img, video, iframe, svg { max-width: 100%; } table { display: block; max-width: 100%; overflow-x: auto; } /* ------------------------------------------------------------- 3. Elementos novos, criados nas Fases 3 e 6 Usam as variáveis da marca para acompanhar a paleta do painel. ------------------------------------------------------------- */ /* seletor de tamanho na página de produto */ .product-form__tamanhos { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 1.6rem; } .product-form__tamanhos .variant-option { min-width: 4.4rem; padding: 0.9rem 1.2rem; border: 1px solid var(--cor-borda); background: transparent; color: var(--cor-texto); font-size: 1.3rem; letter-spacing: 0.05em; cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease; } .product-form__tamanhos .variant-option:hover:not(.disabled) { border-color: var(--cor-primaria); } .product-form__tamanhos .variant-option.selecionado { background: var(--cor-primaria); border-color: var(--cor-primaria); color: var(--cor-fundo); } .product-form__tamanhos .variant-option.disabled, .product-form__tamanhos .variant-option[disabled] { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; } /* compartilhar */ .sharearea { display: flex; align-items: center; gap: 1.2rem; margin-top: 2rem; color: var(--cor-texto); } .sharearea p { margin: 0; font-size: 1.3rem; } .sharearea a { display: inline-flex; color: inherit; } /* carrinho */ #carrinho .cart-items { width: 100%; border-collapse: collapse; } #carrinho .cart-items th, #carrinho .cart-items td { padding: 1.2rem 0.8rem; border-bottom: 1px solid var(--cor-borda); text-align: left; vertical-align: top; } #carrinho .cart-items .right, #carrinho .cart-items td.right { text-align: right; } #carrinho .carrinho__miniatura { width: 8rem; height: auto; margin-right: 1.2rem; float: left; } #carrinho .carrinho__remover { background: none; border: 0; padding: 0; color: var(--cor-texto-claro); text-decoration: underline; cursor: pointer; font-size: 1.2rem; } #carrinho .cart__footer { margin-top: 2.4rem; display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; } #carrinho .totals { display: flex; align-items: baseline; gap: 1.2rem; } @media screen and (max-width: 749px) { #carrinho .cart-items thead { display: none; } #carrinho .cart-items, #carrinho .cart-items tbody, #carrinho .cart-items tr, #carrinho .cart-items td { display: block; width: 100%; } #carrinho .cart-items tr { border-bottom: 1px solid var(--cor-borda); padding: 1.2rem 0; } #carrinho .cart-items td { border: 0; padding: 0.4rem 0; } #carrinho .cart__footer { align-items: stretch; } } /* busca */ [data-busca-resultados]:empty { display: none; } /* aviso de frete grátis */ [data-frete-aviso] { color: var(--cor-sucesso); }