/* ========================================================================= SONHARE by IF — folha de estilo (CSS) --------------------------------------------------------------------- Identidade visual da marca (baseada no logo/Instagram oficial): fundo creme/rosé, marrom como cor principal, dourado só em detalhes pequenos. Serifada fina (Bodoni Moda) para títulos/marca, sans-serif limpa (DM Sans) para o resto, e uma script discreta só para o "by IF". Sem neon, sem glow, sem roxo/azul, cantos discretos (não pill). ========================================================================= */ :root { --bg: #f9ece3; /* creme/rosé claro — fundo principal da marca */ --surface: #ffffff; --surface-2: #f3e2d4; /* creme um pouco mais forte, para inputs/áreas internas */ --pink-soft: #e8d5c9; /* rosé/bege secundário — detalhes, bordas de selo */ --pink-main: #60452f; /* marrom principal — botões, títulos, destaque */ --pink-hover: #3f2e21; /* marrom escuro — hover, texto de mais contraste */ --detail: #c9a878; /* dourado/bege — só para detalhes pequenos (estrelas, linhas finas) */ --ink: #3f2e21; --ink-dim: #7c6650; --ink-faint: #a78f76; --line: #e6d5c6; --line-soft: #efe1d3; --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --shadow-card: 0 1px 2px rgba(63, 46, 33, 0.05), 0 6px 16px -12px rgba(63, 46, 33, 0.14); --shadow-hover: 0 2px 4px rgba(63, 46, 33, 0.06), 0 10px 22px -12px rgba(63, 46, 33, 0.18); --font-d: "Bodoni Moda", serif; /* títulos, nome da marca — serifada fina e editorial */ --font-b: "DM Sans", sans-serif; /* corpo do texto, botões */ --font-script: "Petit Formal Script", cursive; /* só para o "by IF" — usar com moderação */ } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; } /* rede de segurança também no , não só no — alguns navegadores (Safari/iOS) rolam a página pelo elemento html, não pelo body */ body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-b); -webkit-font-smoothing: antialiased; overflow-x: hidden; width: 100%; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } ::selection { background: var(--pink-soft); color: var(--ink); } :focus-visible { outline: 2px solid var(--pink-main); outline-offset: 2px; } .hidden { display: none !important; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; } img { display: block; max-width: 100%; } .muted { color: var(--ink-faint); } .small { font-size: 12px; } @media (max-width: 480px) { .wrap { padding: 0 16px; } } /* ---------- cabeçalho ---------- */ header.site { position: sticky; top: 0; z-index: 40; background: rgba(255, 253, 251, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); } /* IMPORTANTE: este elemento tem as classes "wrap header-row" ao mesmo tempo. Por isso aqui só definimos padding-top/bottom (nunca "padding:18px 0", que sobrescreveria o padding lateral que o .wrap já define, colando o conteúdo na borda da tela — foi exatamente esse o bug que cortava o "SONHARE" na lateral). */ .header-row { display: flex; align-items: center; justify-content: space-between; padding-top: 18px; padding-bottom: 18px; flex-wrap: nowrap; gap: 12px; } .brand { display: flex; flex-direction: column; align-items: flex-start; line-height: 1; gap: 3px; min-width: 0; } .brand .word { font-family: var(--font-d); font-weight: 500; font-size: clamp(19px, 6vw, 25px); letter-spacing: 0.05em; color: var(--ink); text-transform: uppercase; white-space: nowrap; } .brand .by { font-family: var(--font-script); font-size: 16px; color: var(--detail); margin-top: -2px; } .icon-btn { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); padding: 10px 16px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; font-weight: 600; transition: border-color 0.15s ease; flex-shrink: 0; } .icon-btn:hover { border-color: var(--pink-main); } .cart-count { background: var(--pink-main); color: #fff; border-radius: 999px; min-width: 19px; height: 19px; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 5px; } /* ========================================================================= HERO ========================================================================= */ .hero { padding: 64px 0 56px; } .hero-grid { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; } @media (min-width: 960px) { .hero-grid { grid-template-columns: 1fr 0.9fr; } } @media (max-width: 480px) { .hero { padding: 32px 0 40px; } .hero-grid { gap: 24px; } } .eyebrow { display: block; font-size: 12px; color: var(--pink-hover); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; } .hero h1 { font-family: var(--font-d); font-weight: 600; font-size: clamp(30px, 7vw, 52px); line-height: 1.16; margin: 16px 0 16px; color: var(--ink); } .hero h1 em { font-style: italic; color: var(--pink-main); } .hero p { color: var(--ink-dim); font-size: 16px; max-width: 48ch; line-height: 1.7; margin: 0 0 28px; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; } .hero-ctas .btn { flex: 1 1 auto; justify-content: center; } @media (min-width: 480px) { .hero-ctas .btn { flex: 0 1 auto; } } .btn { border: 1px solid transparent; cursor: pointer; font-weight: 600; font-size: 14px; padding: 13px 26px; border-radius: var(--radius-sm); display: inline-flex; align-items: center; gap: 8px; transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.12s ease; } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--pink-main); color: #fff; } .btn-primary:hover { background: var(--pink-hover); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn:disabled:hover { background: var(--pink-main); } .btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); } .btn-ghost:hover { border-color: var(--pink-main); color: var(--pink-hover); } .hero-stats { display: flex; gap: 30px; margin-top: 32px; flex-wrap: wrap; } .hero-stat b { display: block; font-family: var(--font-d); font-size: 22px; font-weight: 600; color: var(--ink); } .hero-stat span { color: var(--ink-faint); font-size: 12.5px; } /* carrossel do hero — fotos reais dos produtos */ .hero-visual { position: relative; height: 440px; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-2); box-shadow: var(--shadow-card); } @media (max-width: 600px) { .hero-visual { height: 320px; } } @media (max-width: 360px) { .hero-visual { height: 270px; } } .hero-carousel-track { display: flex; height: 100%; transition: transform 0.55s ease; } .hero-slide { min-width: 100%; height: 100%; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; } .hero-carousel-dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; } .hero-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.6); border: none; cursor: pointer; padding: 0; transition: 0.15s; } .hero-dot.active { background: #fff; width: 18px; border-radius: 3px; } /* ========================================================================= ESTRUTURA GERAL DE SEÇÃO ========================================================================= */ section.block { padding: 56px 0; } @media (max-width: 480px) { section.block { padding: 36px 0; } } .section-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; text-align: center; align-items: center; } .section-head h2 { font-family: var(--font-d); font-weight: 600; font-size: clamp(22px, 3vw, 32px); margin: 0; color: var(--ink); } .section-head p { color: var(--ink-dim); max-width: 52ch; margin: 0; font-size: 14.5px; line-height: 1.6; } /* ========================================================================= DESTAQUES (faixa dividida) ========================================================================= */ .feature-strip { display: grid; grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; } @media (min-width: 720px) { .feature-strip { grid-template-columns: repeat(3, 1fr); } } .feature-col { padding: 26px 22px; border-bottom: 1px solid var(--line-soft); text-align: center; } .feature-col:last-child { border-bottom: none; } @media (min-width: 720px) { .feature-col { border-bottom: none; border-right: 1px solid var(--line-soft); } .feature-col:last-child { border-right: none; } } .feature-col h3 { font-family: var(--font-d); font-size: 15px; margin: 0 0 6px; font-weight: 600; color: var(--ink); } .feature-col p { color: var(--ink-faint); font-size: 12.5px; margin: 0; line-height: 1.5; } /* ========================================================================= CATEGORIAS ========================================================================= */ .cat-grid { display: grid; grid-template-columns: 1fr; gap: 16px; } @media (min-width: 720px) { .cat-grid { grid-template-columns: repeat(3, 1fr); } } .cat-card { position: relative; height: 280px; border-radius: var(--radius); overflow: hidden; cursor: pointer; box-shadow: var(--shadow-card); transition: box-shadow 0.2s ease; } .cat-card:hover { box-shadow: var(--shadow-hover); } .cat-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .cat-card:hover .cat-art { transform: scale(1.03); } .cat-overlay { position: absolute; inset: 0; background: linear-gradient( 0deg, rgba(58, 48, 51, 0.55), rgba(58, 48, 51, 0.02) 55% ); display: flex; align-items: flex-end; padding: 18px; } .cat-overlay h3 { font-family: var(--font-d); font-size: 19px; margin: 0; color: #fff; font-weight: 600; } .cat-overlay span { display: block; font-size: 12px; color: rgba(255, 255, 255, 0.85); margin-top: 2px; } /* ========================================================================= FILTROS ========================================================================= */ .filters { padding: 8px 0 18px; } .filters-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; } .filters-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 10px; } .chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-dim); padding: 8px 15px; border-radius: var(--radius-sm); font-size: 12.5px; cursor: pointer; font-weight: 600; transition: 0.15s; } .chip.active { background: var(--pink-main); border-color: transparent; color: #fff; } .filters-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .mini-field { display: flex; flex-direction: column; gap: 5px; } .mini-field label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); } .mini-field input { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius-sm); padding: 9px 10px; font-size: 13px; width: 96px; } .search-field { flex: 1; min-width: 190px; } .search-field input { width: 100%; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; } /* ========================================================================= CATÁLOGO ========================================================================= */ .catalog-head { display: flex; justify-content: space-between; align-items: baseline; margin: 8px 0 16px; } .catalog-head h2 { font-family: var(--font-d); font-size: 22px; margin: 0; font-weight: 600; } .result-count { color: var(--ink-faint); font-size: 13px; } #catalog { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-bottom: 16px; } @media (max-width: 360px) { #catalog { gap: 10px; } } @media (min-width: 720px) { #catalog { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { #catalog { grid-template-columns: repeat(4, 1fr); gap: 20px; } } .tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; cursor: pointer; overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow 0.18s ease, transform 0.18s ease; } .tile:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .tile-art-wrap { position: relative; aspect-ratio: 3/4; overflow: hidden; background: var(--surface-2); } .tile-photo { width: 100%; height: 100%; object-fit: cover; } .tile-badges { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; justify-content: space-between; } .pill { font-size: 10.5px; font-weight: 700; padding: 4px 10px; border-radius: 4px; } .pill-pending { background: rgba(255, 255, 255, 0.9); color: var(--pink-hover); border: 1px solid var(--pink-soft); } .pill-new { background: var(--pink-main); color: #fff; } .tile-body { padding: 14px 15px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .tile-eyebrow { font-size: 10.5px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .tile-name { font-family: var(--font-d); font-size: 16px; margin: 0; font-weight: 600; color: var(--ink); } .tile-print { font-size: 12px; color: var(--ink-dim); } .tile-foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 8px; } .price { font-family: var(--font-d); font-size: 17px; font-weight: 600; color: var(--ink); } .add-btn { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); padding: 8px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; cursor: pointer; transition: 0.15s; } .add-btn:hover { background: var(--pink-main); border-color: transparent; color: #fff; } .add-btn.pulse { animation: pulse 0.2s ease; } @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.08); } 100% { transform: scale(1); } } .empty-state { grid-column: 1/-1; text-align: center; padding: 60px 20px; color: var(--ink-faint); } .empty-state b { display: block; color: var(--ink); font-family: var(--font-d); font-size: 18px; margin-bottom: 6px; } /* ========================================================================= PAINÉIS DESLIZANTES (modal de produto, carrinho) e CHECKOUT ========================================================================= */ .overlay { position: fixed; inset: 0; background: rgba(58, 48, 51, 0.35); backdrop-filter: blur(2px); z-index: 70; opacity: 0; pointer-events: none; transition: 0.2s opacity; } .overlay.show { opacity: 1; pointer-events: auto; } .sheet { position: fixed; background: var(--surface); border-left: 1px solid var(--line); z-index: 71; box-shadow: -20px 0 50px -20px rgba(58, 48, 51, 0.25); display: flex; flex-direction: column; } #productModal { top: 0; right: 0; bottom: 0; width: 100%; max-width: 460px; transform: translateX(100%); transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } #productModal.show { transform: translateX(0); } .sheet-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); } .sheet-head h3 { font-family: var(--font-d); font-size: 16px; margin: 0; font-weight: 600; } .close-btn { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); width: 32px; height: 32px; border-radius: 999px; cursor: pointer; font-size: 15px; transition: 0.15s border-color; } .close-btn:hover { border-color: var(--pink-main); } .sheet-body { padding: 22px; overflow-y: auto; flex: 1; } .modal-visual { border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; background: var(--surface-2); aspect-ratio: 3/4; } .modal-visual img { width: 100%; height: 100%; object-fit: cover; } .thumb-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; padding: 0; cursor: pointer; } .thumb.active { border-color: var(--pink-main); } .thumb img { width: 100%; height: 100%; object-fit: cover; } .modal-desc { color: var(--ink-dim); font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; } .info-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; } .info-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-bottom: 1px solid var(--line-soft); } .info-row span { color: var(--ink-faint); } .info-row b { color: var(--ink); font-weight: 600; } .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); margin: 18px 0 9px; font-weight: 700; } .size-grid { display: flex; flex-wrap: wrap; gap: 8px; } .size-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-dim); padding: 9px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.15s; } .size-chip.selected { border-color: var(--pink-main); background: var(--surface-2); color: var(--ink); } .size-pending { color: var(--ink-faint); font-size: 13px; margin: 0; } .qty-row { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; } .stepper { display: flex; align-items: center; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; } .stepper button { width: 34px; height: 34px; background: var(--surface); border: none; color: var(--ink); font-size: 16px; cursor: pointer; } .stepper button:hover { background: var(--pink-main); color: #fff; } .stepper span { width: 36px; text-align: center; font-weight: 700; font-size: 13px; } @media (hover: none) { .stepper button { width: 40px; height: 40px; } } .sheet-foot { padding: 18px 22px; border-top: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; gap: 14px; } .sheet-foot .price { font-size: 19px; } #cartPanel { top: 0; right: 0; bottom: 0; width: 100%; max-width: 420px; transform: translateX(100%); transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } #cartPanel.show { transform: translateX(0); } /* Painel de cadastro/edição de produto (admin) — precisa da mesma regra de "deslizar da direita" que o modal de produto e o carrinho já têm. Sem isso, o painel existe no HTML mas fica sem posição/animação definida, e por isso não aparecia ao clicar em Adicionar/Editar. */ #productFormModal { top: 0; right: 0; bottom: 0; width: 100%; max-width: 480px; transform: translateX(100%); transition: 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } #productFormModal.show { transform: translateX(0); } .cart-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft); } .cart-item-visual { width: 56px; height: 70px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; } .cart-item-info { flex: 1; } .cart-item-info .n { font-weight: 600; font-size: 13.5px; } .cart-item-info .f { color: var(--ink-faint); font-size: 12px; } .cart-item-ctrl { display: flex; align-items: center; justify-content: space-between; margin-top: 7px; } .rm-btn { background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 12px; } .rm-btn:hover { color: var(--pink-hover); } .cart-empty { text-align: center; padding: 64px 10px; color: var(--ink-faint); } .cart-empty b { display: block; color: var(--ink); font-family: var(--font-d); font-size: 15px; margin-bottom: 6px; } .notes-field textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink); padding: 11px; font-family: var(--font-b); font-size: 13px; resize: vertical; min-height: 56px; } .totals-line { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--ink-dim); padding: 4px 0; } .totals-line.grand { color: var(--ink); font-weight: 700; font-size: 16px; padding-top: 8px; border-top: 1px solid var(--line-soft); margin-top: 8px; } #checkoutModal { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.97); width: 92vw; max-width: 420px; max-height: 88vh; border: 1px solid var(--line); border-radius: var(--radius); opacity: 0; pointer-events: none; transition: 0.2s; } #checkoutModal.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .field { margin-bottom: 14px; } .field label { display: block; font-size: 12px; color: var(--ink-dim); margin-bottom: 6px; font-weight: 600; } .field input, .field textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 14px; font-family: var(--font-b); } .field textarea { resize: vertical; min-height: 56px; } .pay-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pay-opt { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius-sm); padding: 10px 6px; text-align: center; font-size: 12.5px; font-weight: 700; cursor: pointer; color: var(--ink-dim); } .pay-opt.selected { border-color: var(--pink-main); color: var(--ink); background: var(--surface-2); } .pickup-toggle { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: var(--ink-dim); cursor: pointer; } /* ========================================================================= BOTÕES FLUTUANTES ========================================================================= */ .wa-float { position: fixed; bottom: 22px; left: 20px; z-index: 60; width: 50px; height: 50px; border-radius: 999px; background: #25d366; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 20px -6px rgba(37, 211, 102, 0.5); } /* ========================================================================= RODAPÉ ========================================================================= */ footer { border-top: 1px solid var(--line-soft); padding: 48px 0 90px; margin-top: 20px; color: var(--ink-faint); font-size: 13.5px; } .foot-top { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; padding-bottom: 32px; } @media (max-width: 900px) { .foot-top { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .foot-top { grid-template-columns: 1fr; gap: 26px; } footer { padding: 36px 0 80px; } } .foot-title { color: var(--ink); font-weight: 600; margin-bottom: 12px; font-size: 13px; } .foot-col a { display: block; color: var(--ink-dim); padding: 5px 0; font-size: 13px; } .foot-col a:hover { color: var(--pink-hover); } .foot-social { display: flex; gap: 10px; margin-top: 14px; } .foot-social a { width: 36px; height: 36px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; } .foot-social a:hover { border-color: var(--pink-main); } .foot-bottom { border-top: 1px solid var(--line-soft); padding-top: 20px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; } /* ---------- toast ---------- */ #toast { position: fixed; top: 18px; left: 50%; transform: translateX(-50%) translateY(-160%); z-index: 90; background: var(--surface); border: 1px solid var(--line); color: var(--ink); padding: 12px 18px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; transition: transform 0.2s ease; box-shadow: var(--shadow-hover); max-width: 90vw; } #toast.show { transform: translateX(-50%) translateY(0); } /* ========================================================================= PAINEL ADMINISTRATIVO ========================================================================= */ #adminView { min-height: 100vh; background: var(--bg); } .admin-topbar { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--line); box-shadow: 0 1px 3px rgba(58, 48, 51, 0.05); } .admin-topbar-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; height: 66px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 20px; } .admin-topbar-logo { font-family: var(--font-d); font-weight: 600; font-size: 16px; white-space: nowrap; } .admin-topbar-tabs { display: flex; align-items: center; gap: 2px; height: 100%; justify-content: center; } .admin-tab { background: transparent; border: none; border-bottom: 2px solid transparent; color: var(--ink-dim); padding: 0 14px; height: 100%; display: flex; align-items: center; font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .admin-tab.active { color: var(--ink); border-bottom-color: var(--pink-main); } .admin-topbar-profile { display: flex; align-items: center; gap: 12px; white-space: nowrap; } .admin-back-link { font-size: 12.5px; color: var(--ink-faint); } .admin-back-link:hover { color: var(--ink); } .admin-topbar-divider { width: 1px; height: 20px; background: var(--line); } .admin-profile-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-dim); font-weight: 600; } .admin-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--pink-main); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; } .admin-content { padding: 28px 24px 60px; } @media (max-width: 480px) { .admin-content { padding: 18px 14px 48px; } } @media (max-width: 760px) { .admin-topbar-inner { grid-template-columns: 1fr auto; grid-template-rows: auto auto; height: auto; padding: 12px 16px; row-gap: 12px; } .admin-topbar-tabs { grid-column: 1/-1; justify-content: flex-start; overflow-x: auto; height: 40px; } } .admin-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; } .kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 20px; } @media (min-width: 700px) { .kpi-grid { grid-template-columns: repeat(4, 1fr); } } .kpi { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 16px; } .kpi span { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; } .kpi b { display: block; font-family: var(--font-d); font-size: 21px; margin-top: 6px; font-weight: 600; } table { width: 100%; border-collapse: collapse; font-size: 13px; } table.compact th, table.compact td { padding: 10px 8px; } th { text-align: left; color: var(--ink-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--line); } td { border-bottom: 1px solid var(--line-soft); } .table-scroll { overflow-x: auto; } .table-scroll table { min-width: 400px; } .tag { font-size: 10px; padding: 4px 9px; border-radius: 6px; font-weight: 700; } .tag.Pendente { background: #fbf0d9; color: #946a0e; } .tag.Pago { background: #e3f3e9; color: #2e7d4f; } .tag.Enviado { background: #e6eefb; color: #2c5fa8; } .tag.Entregue { background: #e3f3e9; color: #2e7d4f; } .tag.Cancelado { background: #fbe6e6; color: #b5423f; } .estoque-search-row { margin-bottom: 16px; } .estoque-search { position: relative; max-width: 420px; } .estoque-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; } .estoque-search input { width: 100%; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius-sm); padding: 10px 62px 10px 36px; font-size: 13.5px; } .estoque-search input:focus { border-color: var(--pink-main); outline: none; } .estoque-search .kbd-hint { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 10.5px; color: var(--ink-faint); background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; } .estoque-empty { padding: 28px 4px; color: var(--ink-faint); font-size: 13px; text-align: center; } .stock-list { display: flex; flex-direction: column; } .stock-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; padding: 13px 4px; border-bottom: 1px solid var(--line-soft); } .stock-row:last-child { border-bottom: none; } .stock-row-info { display: flex; flex-direction: column; gap: 2px; min-width: 150px; flex: 1 1 150px; } .stock-row-info b { font-size: 13.5px; font-weight: 600; } .stock-row-info span { font-size: 12px; color: var(--ink-faint); } .stock-badge { font-size: 12px; padding: 4px 11px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-dim); white-space: nowrap; } .stock-badge.low { border-color: #d9a441; color: #946a0e; } .stock-badge.out { border-color: #d98e8c; color: #b5423f; } .stock-ctrl { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .stock-ctrl input { width: 56px; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); border-radius: 8px; padding: 6px 7px; } .small-btn { background: var(--surface-2); border: 1px solid var(--line); color: var(--ink); padding: 6px 11px; border-radius: var(--radius-sm); font-size: 11px; cursor: pointer; font-weight: 700; } .small-btn.add:hover { border-color: #2e7d4f; color: #2e7d4f; } .small-btn.remove:hover { border-color: #b5423f; color: #b5423f; } .small-btn.set:hover { border-color: var(--pink-main); color: var(--pink-hover); } .login-box { max-width: 340px; margin: 110px auto; text-align: center; } .login-box h2 { font-family: var(--font-d); font-weight: 600; } .settings-form .field { max-width: 340px; } .order-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; background: var(--surface-2); } .order-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .order-items { font-size: 12.5px; color: var(--ink-dim); margin: 8px 0; } .order-items div { padding: 2px 0; } .order-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; } .order-actions select { background: var(--surface); border: 1px solid var(--line); color: var(--ink); border-radius: var(--radius-sm); padding: 8px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer; } .filter-row { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; } /* ========================================================================= ABA PRODUTOS DO ADMIN — listagem, formulário, upload de fotos ========================================================================= */ .products-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 16px; } .products-toolbar .estoque-search { flex: 1; min-width: 220px; } .products-filters { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; } .products-filters .filter-group { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .products-filters .filter-group-label { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-right: 2px; } .product-row { display: flex; flex-direction: column; gap: 12px; padding: 16px 4px; border-bottom: 1px solid var(--line-soft); } .product-row:last-child { border-bottom: none; } .product-row-header { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; } .product-row-photo { width: 56px; height: 70px; border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2); flex-shrink: 0; } .product-row-photo.placeholder { display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-size: 10px; text-align: center; border: 1px dashed var(--line); } .product-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 180px; } .product-row-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .product-row-meta { font-size: 12px; color: var(--ink-faint); } .size-tag { font-size: 10.5px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; color: var(--ink-dim); } .product-row-actions { display: flex; gap: 6px; flex-wrap: wrap; } .status-badge { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 4px; } .status-badge.ativo { background: #e3f3e9; color: #2e7d4f; } .status-badge.inativo { background: #f1e9e6; color: var(--ink-faint); } .badge-new { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 4px; background: var(--surface-2); color: var(--pink-hover); border: 1px solid var(--pink-soft); } /* Estoque embutido em cada linha de produto (a aba Estoque separada deixou de existir — isso fica tudo junto, mais fácil de administrar). */ .product-row-stock { background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .stock-section-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); font-weight: 700; } .stock-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .stock-line-size { font-size: 12.5px; font-weight: 600; min-width: 52px; } .add-product-btn { display: flex; align-items: center; gap: 8px; } /* ---------- formulário (drawer) ---------- */ #productFormModal .sheet-body { padding-top: 20px; } .form-error { color: #b5423f; font-size: 12.5px; margin: -6px 0 12px; } .size-editor { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 6px; } .size-editor-chip { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 8px 6px 14px; font-size: 13px; font-weight: 600; } .size-editor-chip button { background: none; border: none; color: var(--ink-faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 4px; } .size-editor-chip button:hover { color: #b5423f; } .size-editor-add { display: flex; gap: 8px; margin-top: 8px; } .size-editor-add input { flex: 1; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; } .size-editor-add button { white-space: nowrap; } .upload-dropzone { border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 28px 16px; text-align: center; cursor: pointer; background: var(--surface-2); transition: border-color 0.15s ease, background-color 0.15s ease; } .upload-dropzone:hover, .upload-dropzone.dragover { border-color: var(--pink-main); background: #fbf0f2; } .upload-dropzone svg { color: var(--ink-faint); margin-bottom: 8px; } .upload-dropzone p { margin: 0; font-size: 13.5px; color: var(--ink-dim); } .upload-dropzone span { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; } .photo-preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 10px; margin-top: 14px; } .photo-preview { position: relative; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 3/4; background: var(--surface-2); border: 1px solid var(--line); } .photo-preview img { width: 100%; height: 100%; object-fit: cover; } .photo-preview .main-tag { position: absolute; top: 5px; left: 5px; background: var(--pink-main); color: #fff; font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 4px; } .photo-preview-controls { position: absolute; inset: 0; background: rgba(58, 48, 51, 0.55); opacity: 0; transition: opacity 0.15s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .photo-preview:hover .photo-preview-controls, .photo-preview:focus-within .photo-preview-controls { opacity: 1; } .photo-preview-controls button { background: rgba(255, 255, 255, 0.95); border: none; border-radius: var(--radius-sm); padding: 4px 10px; font-size: 10.5px; font-weight: 700; cursor: pointer; color: var(--ink); } .photo-preview-controls button:hover { background: #fff; } /* Em telas de toque (celular/tablet) não existe ":hover" de verdade — sem isso, os botões de "remover foto"/"tornar principal" ficariam invisíveis e impossíveis de usar no celular. Aqui eles ficam sempre visíveis. */ @media (hover: none) { .photo-preview-controls { opacity: 1; background: rgba(58, 48, 51, 0.4); } } .btn-danger-solid { background: #c4514d; color: #fff; } .btn-danger-solid:hover { background: #ac3f3b; } .confirm-sheet { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.97); width: 92vw; max-width: 380px; max-height: none; border: 1px solid var(--line); border-radius: var(--radius); opacity: 0; pointer-events: none; transition: 0.2s; } .confirm-sheet.show { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); } .confirm-sheet h3 { font-family: var(--font-d); font-size: 17px; margin: 0 0 8px; font-weight: 600; } .confirm-actions { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }