/* ========================================================================== SITE.CSS — COMPARTILHADO — Design system da Distribuidora Blumenau Baseado no padrão real do site (Montserrat + radius 8-24 + bg #F9F8F9) ========================================================================== */ :root { --primary-gradient: linear-gradient(135deg, #003d7a 0%, #002850 100%); --primary-dark: #002850; --primary: #003d7a; --primary-light: #0056a8; --secondary: #00b894; --accent: #fdcb6e; --warning: #e17055; --danger: #d63031; --whatsapp: #25d366; --text-dark: #2d3436; --text-medium: #636e72; --text-light: #b2bec3; --bg-light: #F9F8F9; --bg-white: #ffffff; --border-color: #dfe6e9; --shadow-sm: 0 2px 4px rgba(0,0,0,0.05); --shadow-md: 0 4px 12px rgba(0,0,0,0.1); --shadow-lg: 0 8px 24px rgba(0,0,0,0.15); --shadow-xl: 0 16px 40px rgba(0,0,0,0.2); /* sombra tingida de azul (luz consistente de cima) p/ cards/medalhões dos modais + anel de foco amarelo */ --shadow-blue: 0 12px 28px -8px rgba(0,61,122,0.18); --focus-ring: 0 0 0 3px rgba(253,203,110,0.55); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 24px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } *,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; } button { border: none; background: none; font-family: inherit; cursor: pointer; } input, select, textarea { font-family: inherit; } html { scroll-behavior: smooth; } body { font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg-light); color: var(--text-dark); line-height: 1.6; font-size: 15px; letter-spacing: -0.3px; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } ul { list-style: none; padding: 0; } .container { max-width: 1400px; margin: 0 auto; padding: 0 20px; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* TOP BAR */ .top-bar { background: var(--primary); color: rgba(255,255,255,0.9); padding: 4px 0; font-size: 11px; max-height: 60px; overflow: hidden; transform: translateY(0); transition: max-height 0.25s ease, opacity 0.25s ease, transform 0.25s ease, padding 0.25s ease; } /* Top-bar some (sutil) ao rolar p/ baixo — colapsa altura + fade + slide p/ cima; volta no topo. Classe .header--topbar-hidden é alternada pelo scroll handler (store.js, histerese 40/10). */ .header--topbar-hidden .top-bar { max-height: 0; padding-top: 0; padding-bottom: 0; opacity: 0; transform: translateY(-100%); } .top-bar .container { display: flex; justify-content: space-between; align-items: center; gap: 15px; flex-wrap: wrap; } .top-bar__group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .top-bar__group span, .top-bar__group a { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; } .top-bar__sep { opacity: 0.4; margin: 0 4px; } .top-bar a { color: rgba(255,255,255,0.9); } .top-bar a:hover { color: #fff; } .top-bar i { font-size: 10px; opacity: 0.85; } @media (max-width: 768px) { .top-bar { display: none; } } /* HEADER ÚNICO com categorias integradas */ /* Sombra do header PADRONIZADA (padrão hiperfer.com.br): UM só valor de elevação — 0 2px 16px rgba(0,51,102,0.1) — igual em TODAS as páginas (header compartilhado, injetado via JS) e mantido igual ao rolar (.is-scrolled) p/ consistência. Azulado (não preto puro), sutil e elegante; header sticky no topo. */ .header { background: #fff; position: sticky; top: 0; z-index: 1001; box-shadow: 0 2px 16px rgba(0, 51, 102, 0.1); transition: box-shadow 0.35s ease; } .header.is-scrolled { box-shadow: 0 2px 16px rgba(0, 51, 102, 0.1); } /* padding vertical SIMÉTRICO (10px 10px) p/ centralizar melhor a logo (um pouco maior) na linha e dar respiro — em vez do 10/8 assimétrico anterior. */ .header__row1 { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; flex-wrap: wrap; } .header__row2 { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; padding: 5px 0 6px; border-top: 1px solid var(--border-color); } .brand { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .brand__prefix { font-size: 11px; font-weight: 600; color: var(--text-medium); letter-spacing: 3px; line-height: 1; padding-bottom: 12px; } .brand__name { font-size: 24px; font-weight: 800; color: var(--primary); letter-spacing: -0.5px; line-height: 1; position: relative; padding-right: 14px; } .brand__name::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .header-search { flex: 1; min-width: 260px; max-width: 520px; display: flex; align-items: center; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); } .header-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 61, 122, 0.1); background: #fff; } .header-search input { flex: 1; border: none; background: transparent; font-size: 14px; padding: 11px 16px; outline: none; color: var(--text-dark); min-width: 0; } .header-search input::placeholder { color: var(--text-light); font-size: 13px; } .header-search button { background: var(--primary); color: #fff; padding: 11px 22px; font-weight: 700; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-shrink: 0; transition: background 0.2s; } .header-search button:hover { background: var(--primary-dark); } /* Topo-direito reorganizado: [ CONTA ] | [ Avise-me · Fale Conosco · Carrinho ] A conta é "puxada" p/ a esquerda e separada do bloco de ações por um respiro + divisor. */ .header-actions { display: flex; align-items: center; gap: 0; flex-shrink: 0; } .header-actions__account { display: flex; align-items: center; padding-right: 18px; } .header-actions__group { display: flex; align-items: center; gap: 10px; padding-left: 18px; border-left: 1px solid var(--border-color); } .login-btn { display: flex; align-items: center; gap: 10px; background: var(--bg-light); color: var(--text-dark); padding: 8px 14px; border-radius: var(--radius-md); transition: var(--transition); } .login-btn:hover { background: #fff; box-shadow: var(--shadow-sm); } .login-btn__icon { width: 30px; height: 30px; background: var(--primary); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; } .login-btn__text { display: flex; flex-direction: column; line-height: 1.2; } .login-btn__greeting { font-size: 13px; font-weight: 700; color: var(--text-dark); } .login-btn__cta { font-size: 10px; color: var(--primary); font-weight: 500; display: flex; align-items: center; gap: 5px; } .login-btn__cta .fa-chevron-down { font-size: 8px; transition: transform 0.2s ease; } /* MENU "MINHA CONTA" (logado): abre no hover / foco por teclado. Fecha ao sair o mouse, perder o foco (blur) ou Esc. Espelha o dropdown de catalogo_web/js/header.js com as cores do layout novo (azul/dourado). Só desktop — no mobile o ícone leva direto à minha-conta. */ .user-menu { position: relative; display: flex; } .user-menu .login-btn { cursor: pointer; } .user-menu:hover .login-btn__cta .fa-chevron-down, .user-menu:focus-within .login-btn__cta .fa-chevron-down { transform: rotate(180deg); } .user-menu__dropdown { position: absolute; top: 100%; right: 0; margin-top: 8px; min-width: 224px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 8px; z-index: 1200; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s; } /* ponte transparente cobre o gap trigger↔menu p/ o hover não piscar ao descer o mouse */ .user-menu__dropdown::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 12px; } .user-menu:hover .user-menu__dropdown, .user-menu:focus-within .user-menu__dropdown, .user-menu.is-open .user-menu__dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .user-menu__head { padding: 8px 12px 10px; border-bottom: 1px solid var(--border-color); margin-bottom: 6px; } .user-menu__hi { display: block; font-size: 11px; color: var(--text-medium); font-weight: 600; } .user-menu__name { display: block; font-size: 14px; font-weight: 800; color: var(--primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-menu__dropdown a { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; color: var(--text-dark); transition: background 0.15s ease, color 0.15s ease; } .user-menu__dropdown a i { width: 18px; text-align: center; font-size: 14px; color: var(--primary); transition: color 0.15s ease; } .user-menu__dropdown a:hover { background: var(--bg-light); color: var(--primary); } .user-menu__dropdown a:hover i { color: var(--accent); } .user-menu__dropdown a.user-menu__logout { color: var(--danger); border-top: 1px solid var(--border-color); margin-top: 4px; padding-top: 11px; } .user-menu__dropdown a.user-menu__logout i { color: var(--danger); } .user-menu__dropdown a.user-menu__logout:hover { background: rgba(214,48,49,0.08); color: var(--danger); } .user-menu__dropdown a.user-menu__logout:hover i { color: var(--danger); } .fale-conosco-btn { display: flex; align-items: center; gap: 8px; background: var(--secondary); color: #fff; padding: 11px 18px; border-radius: var(--radius-md); font-weight: 700; font-size: 13px; transition: var(--transition); white-space: nowrap; } .fale-conosco-btn:hover { background: #00a884; transform: translateY(-1px); box-shadow: var(--shadow-md); } /* AVISE-ME (sino): botão-ícone leve com rótulo curto; badge oculto pronto p/ contador futuro */ .notify-btn { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--radius-md); color: var(--text-dark); background: var(--bg-light); font-weight: 700; font-size: 12px; line-height: 1; transition: var(--transition); white-space: nowrap; } .notify-btn:hover { background: #fff; color: var(--primary); box-shadow: var(--shadow-sm); } .notify-btn__icon { position: relative; display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--primary); transition: transform 0.2s ease, color 0.2s ease; } .notify-btn:hover .notify-btn__icon { color: var(--accent); transform: rotate(-12deg) scale(1.08); } .notify-btn__label { color: inherit; } .notify-btn__badge { position: absolute; top: -7px; right: -9px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--accent); color: var(--primary-dark); font-size: 9px; font-weight: 800; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 2px solid #fff; } .notify-btn__badge[hidden] { display: none; } /* CARRINHO "🛒 N itens": ícone + contagem AO LADO (sem badge sobreposto). Pílula azul (marca), número em dourado p/ destacar. Clique abre o drawer. Animações: bump ao adicionar, wiggle no hover. */ .cart-btn { position: relative; display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px 0 15px; color: #fff; background: var(--primary); border-radius: 999px; box-shadow: 0 4px 12px rgba(0,61,122,0.22); transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease; } .cart-btn:hover { background: var(--primary-light); box-shadow: 0 6px 18px rgba(0,61,122,0.32); transform: translateY(-1px); } .cart-btn__icon { display: flex; align-items: center; justify-content: center; font-size: 19px; line-height: 1; transition: transform 0.2s ease; } .cart-btn:hover .cart-btn__icon { animation: cartIconWiggle 0.6s ease; } .cart-btn__meta { display: flex; align-items: baseline; gap: 5px; line-height: 1; } .cart-btn__count { font-size: 16px; font-weight: 800; color: var(--accent); font-variant-numeric: tabular-nums; } .cart-btn__unit { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.92); letter-spacing: 0.2px; } /* Categorias integradas no header */ .all-categories { display: flex; align-items: center; gap: 10px; padding: 8px 14px; color: var(--primary-dark); font-weight: 700; font-size: 13px; cursor: pointer; transition: color 0.2s; flex-shrink: 0; } .all-categories:hover { color: var(--primary); } .all-categories i.fa-bars { color: var(--accent); } .all-categories i.fa-chevron-down { font-size: 10px; } /* Lista de categorias: OCUPA TODA A LARGURA disponível (flex:1) entre o botão "Categorias" e "Ofertas" e DISTRIBUI os itens (space-between) para preencher da esquerda até perto do Ofertas. O JS (_fitCats) mostra o MÁXIMO de categorias que couberem (puxa do menu completo) e esconde o excedente — nowrap + overflow:hidden garantem que nunca encolhe nem quebra em 2 linhas. A LINHA (border-top) da lista + a de .nav-ofertas se juntam num traço contínuo: do começo das categorias até o FINAL do "Ofertas" (row2 = align-items:stretch → tops alinhados). */ .categories-nav__list { flex: 1 1 0%; display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: center; min-width: 0; overflow: hidden; padding: 4px 12px 0 0; } .categories-nav__list a { padding: 8px 12px; color: var(--primary-dark); font-weight: 600; font-size: 12.5px; position: relative; transition: color 0.2s; white-space: nowrap; } .categories-nav__list a:hover { color: var(--primary); } .categories-nav__list a.active { color: var(--primary); } .categories-nav__list a.active::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 2px; background: var(--primary); border-radius: 2px 2px 0 0; } .nav-ofertas { padding: 8px 14px; color: var(--danger); font-weight: 800; font-size: 12.5px; letter-spacing: 1px; text-transform: uppercase; display: flex; align-items: center; gap: 8px; transition: var(--transition); white-space: nowrap; flex-shrink: 0; } .nav-ofertas:hover { background: var(--danger); color: #fff; } /* ☰ Categorias (mobile) e a seção mobile do menu ficam ESCONDIDOS no desktop — só aparecem no @media (max-width:768px) abaixo. Assim o header DESKTOP não muda. */ .header__cats-toggle { display: none; } .cats-drop__mobile { display: none; } /* RESPONSIVO header */ @media (max-width: 1024px) { .fale-conosco-btn span, .fale-conosco-btn { display: none; } .login-btn__text { display: none; } .login-btn { padding: 0; background: transparent; } .login-btn__icon { width: 38px; height: 38px; } .header-search { max-width: none; min-width: 0; } /* conta vira só ícone → aproxima o divisor e compacta o bloco de ações */ .header-actions__account { padding-right: 12px; } .header-actions__group { padding-left: 12px; } } @media (max-width: 768px) { /* HEADER MOBILE — espelha a PRODUÇÃO: 2 LINHAS (~101px), sem a 3ª linha da barra de categorias. Linha 1 (grid 3 colunas): [☰ Categorias] · [LOGO centralizada] · [🛒 Carrinho] Linha 2: busca full-width. Login/conta, Avise-me e Ofertas SAEM do header e vão para DENTRO do menu "Categorias" (☰). Alvos de toque ≥40px; refinos de altura ≤540/≤400 abaixo. */ .header__row1 { display: grid; grid-template-columns: auto 1fr auto; /* ☰ | logo (flex) | carrinho */ grid-template-rows: auto auto; align-items: center; gap: 5px 8px; padding: 6px 0; } /* ☰ Categorias à esquerda (abre o menu com login + avise-me + ofertas + categorias) */ .header__cats-toggle { grid-column: 1; grid-row: 1; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--bg-light); color: var(--primary); font-size: 18px; transition: background 0.2s ease; } .header__cats-toggle:hover { background: #eef2f6; } .header__cats-toggle i { color: var(--primary); } /* LOGO centralizada na coluna do meio */ .brand { grid-column: 2; grid-row: 1; justify-self: center; } .brand img { height: 38px !important; } /* AÇÕES à direita: só o carrinho (conta/sino/fale-conosco foram pro menu ☰) */ .header-actions { grid-column: 3; grid-row: 1; justify-self: end; gap: 6px; } .header-actions__account { display: none; } /* login → menu ☰ */ .notify-btn, .fale-conosco-btn { display: none; } /* avise-me/whats → menu ☰ */ .header-actions__group { padding-left: 0; border-left: none; gap: 6px; } .cart-btn { height: 40px; padding: 0 14px; gap: 7px; } .cart-btn__unit { display: none; } /* pílula compacta "🛒 N" */ /* BUSCA — 2ª linha, largura total */ .header-search { grid-column: 1 / -1; grid-row: 2; margin: 0; min-width: 0; max-width: 100%; } .header-search input { padding: 10px 14px; font-size: 15px; } .header-search button { padding: 10px 15px; } /* LINHA 2 do desktop (barra de categorias) COLAPSA — vira só o "hoster" do dropdown/menu. Os controles inline somem; o #allCategoriesDropdown continua abrindo logo abaixo do header. */ .header__row2 { padding: 0; border-top: none; min-height: 0; gap: 0; } .all-categories, .categories-nav__list, .nav-ofertas { display: none; } /* dropdown "Categorias" = menu full-width abaixo do header (sobrepõe os inline styles do markup) */ #allCategoriesDropdown { left: 0 !important; right: 0 !important; min-width: 0 !important; width: 100% !important; border-radius: 0 0 var(--radius-md) var(--radius-md) !important; max-height: 80vh !important; } /* ---- Seção MOBILE do menu (login/conta + avise-me + ofertas), acima da lista de categorias ---- */ .cats-drop__mobile { display: block; padding: 6px 0 4px; border-bottom: 1px solid var(--border-color); margin-bottom: 4px; } .cats-drop__login { display: flex; align-items: center; gap: 12px; padding: 12px 18px; } .cats-drop__login-ic { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; } .cats-drop__login-tx { display: flex; flex-direction: column; line-height: 1.25; } .cats-drop__login-tx strong { font-size: 14px; font-weight: 800; color: var(--text-dark); } .cats-drop__login-tx small { font-size: 11px; font-weight: 600; color: var(--primary); } .cats-drop__user { display: flex; align-items: center; gap: 8px; padding: 12px 18px 8px; font-size: 14px; font-weight: 800; color: var(--primary); } .cats-drop__link { display: flex; align-items: center; gap: 12px; padding: 11px 18px; font-size: 14px; font-weight: 600; color: var(--text-dark); } .cats-drop__link i { width: 20px; text-align: center; font-size: 15px; color: var(--primary); } .cats-drop__link:hover { background: var(--bg-light); } .cats-drop__ofertas, .cats-drop__ofertas i { color: var(--danger); } .cats-drop__ofertas { font-weight: 800; } .cats-drop__logout, .cats-drop__logout i { color: var(--danger); } .cats-drop__label { padding: 10px 18px 4px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--text-light); } } @media (max-width: 540px) { .brand__prefix { display: none; } .brand__name { font-size: 20px; padding-right: 12px; } .brand img { height: 34px !important; } .cart-btn { padding: 0 12px; } } @media (max-width: 400px) { .brand img { height: 32px !important; } .header__row1 { gap: 6px 6px; } .header-actions { gap: 4px; } .header-actions__group { gap: 4px; } .cart-btn { padding: 0 11px; } } /* BREADCRUMB */ .breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 16px 0; font-size: 12px; color: var(--text-medium); } .breadcrumb a { color: var(--text-medium); transition: color 0.2s; } .breadcrumb a:hover { color: var(--primary); } .breadcrumb i { font-size: 9px; opacity: 0.5; } .breadcrumb__current { color: var(--primary-dark); font-weight: 600; } /* SECTION */ .section { padding: 24px 0; } /* Cabeçalho de vitrine — CLEAN e intencional (redesign 2026-07): SEM faixa/caixa (fundo transparente). O realce fica no ÍCONE (chip destacado + "twinkle" sutil) à esquerda; uma LINHA em degradê preenche o vão entre o bloco de título e o "Ver todos" (mata o espaço vago horizontal). Degrada bem em categoria/produto/feirao, onde o head tem só

(+ opcional ) como filhos diretos — sem .section__head-text e sem .section__rule: vira título à esquerda + link à direita (justify-content: space-between). */ .section__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 11px; } .section__head-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 0 1 auto; } .section__title { font-size: 22px; font-weight: 800; color: var(--primary-dark); letter-spacing: -0.4px; display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin: 0; } /* Ícone em CHIP (leve fundo azul->dourado) — realce à esquerda. Em REPOUSO fica PARADO (sem animação contínua = home leve, zero repaint). O "twinkle" dispara só no HOVER do cabeçalho da vitrine (one-shot), preservando o toque animado sem custo permanente. */ .section__title i { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; font-size: 16px; color: var(--primary); border-radius: 10px; transform-origin: center; background: linear-gradient(135deg, rgba(0,61,122,0.10) 0%, rgba(253,203,110,0.22) 100%); box-shadow: inset 0 0 0 1px rgba(0,61,122,0.08); transition: transform 0.2s ease; } .section__head:hover .section__title i { animation: sectionIconTwinkle 0.8s ease; } .section__title small { font-size: 11px; font-weight: 500; color: var(--text-medium); letter-spacing: 0.5px; text-transform: uppercase; } .section__subtitle { font-size: 12.5px; font-weight: 500; color: var(--text-medium); margin: 0; line-height: 1.25; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* LINHA/filete em degradê que OCUPA o vão entre o título e o "Ver todos" (só existe na HOME; o index.html insere o ). Sem link (Sugestões) a linha vai até a direita. Degradê ESTÁTICO (o shimmer contínuo foi removido p/ deixar a home leve — a linha parada em degradê já fica bonita e não gera repaint em ~7-10 vitrines). */ .section__rule { flex: 1 1 auto; min-width: 24px; height: 2px; align-self: center; border-radius: 2px; background: linear-gradient(90deg, rgba(0,61,122,0.28), rgba(0,61,122,0.06) 55%, transparent); } .section__link { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-size: 13px; font-weight: 700; padding: 7px 15px; border-radius: 999px; background: rgba(0,61,122,0.06); transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .section__link::after { content: '\f105'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px; transition: transform 0.2s ease; } .section__link:hover { color: #fff; background: var(--primary); box-shadow: 0 3px 10px rgba(0,61,122,0.25); transform: translateY(-1px); text-decoration: none; } .section__link:hover::after { transform: translateX(2px); } @keyframes sectionIconTwinkle { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(1.08) rotate(-5deg); opacity: 0.82; } } @media (prefers-reduced-motion: reduce) { .section__title i { transition: none; } .section__head:hover .section__title i { animation: none; } } @media (max-width: 640px) { .section__head { gap: 10px; margin-bottom: 9px; } .section__title { font-size: 18px; gap: 9px; } .section__title i { width: 28px; height: 28px; font-size: 14px; border-radius: 9px; } .section__subtitle { font-size: 11px; white-space: normal; overflow: visible; text-overflow: clip; } .section__link { padding: 6px 13px; font-size: 12px; } } .section__badges { display: flex; gap: 6px; align-items: center; } .section__badge { padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: #fff; } .section__badge--red { background: var(--danger); } .section__badge--accent { background: var(--accent); color: var(--text-dark); } .section__badge--primary { background: var(--primary); } /* VITRINE */ .vitrine { margin-bottom: 18px; } .vitrine__track { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: stretch; } @media (max-width: 1200px) { .vitrine__track { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 860px) { .vitrine__track { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 560px) { .vitrine__track { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 360px) { .vitrine__track { grid-template-columns: 1fr; } } /* GRADE de resultados de CATEGORIA e de BUSCA (dentro de .catalog-layout, que tem sidebar de filtros consumindo espaço): 4 colunas no desktop, não 5. NÃO afeta os carrosséis de vitrine (que perdem a classe .vitrine__track ao virar .carousel__track) nem a home/feirão/favoritos. */ .catalog-layout .vitrine__track { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1200px) { .catalog-layout .vitrine__track { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .catalog-layout .vitrine__track { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 360px) { .catalog-layout .vitrine__track { grid-template-columns: 1fr; } } /* ===== CARROSSEL de vitrine (showcase — faixa horizontal com setas ◀ ▶) ===== 5 cards visíveis no desktop; rola horizontalmente com scroll-snap; barra de rolagem escondida; setas somem/desabilitam nas pontas; no mobile vira swipe (~2 por vez). NÃO afeta a GRADE da listagem (.vitrine__track em grid). */ .carousel { position: relative; } .carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 4 * 16px) / 5); /* 5 visíveis, 4 gaps de 16px */ gap: 16px; align-items: stretch; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox: some com a barra */ -ms-overflow-style: none; /* IE/Edge legado */ /* padding generoso (topo/laterais/base) = respiro p/ o lift+sombra do hover aparecerem INTEIROS sem serem clipados pelo overflow do track (antes cortava borda/sombra). O 100% do grid-auto-columns é o content-box (após o padding) → segue 5 visíveis no desktop. */ padding: 12px 10px 22px; /* CORRIGE a "ponta de card" no fim do carrossel: o scroll-snap precisa considerar o padding lateral (10px). Sem isso, ao rolar/snapar o padding-esquerdo saía de vista e reaparecia como ~4px de um 6º card espiando à direita. Com scroll-padding = padding lateral, o card sempre encosta na borda visível e só sobra o respiro (10px) — cards INTEIROS, sem sliver. */ scroll-padding-left: 10px; scroll-padding-right: 10px; } .carousel__track::-webkit-scrollbar { display: none; width: 0; height: 0; } /* Chrome/Safari */ .carousel__track > .product-card { scroll-snap-align: start; } .carousel__arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border-color); background: #fff; color: var(--primary); box-shadow: 0 4px 16px rgba(15,23,42,0.16); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; z-index: 6; transition: opacity .2s ease, background .2s ease, color .2s ease, transform .2s ease; } .carousel__arrow--prev { left: -8px; } .carousel__arrow--next { right: -8px; } .carousel__arrow:hover { background: var(--primary); color: #fff; transform: translateY(-50%) scale(1.06); } .carousel__arrow:disabled { opacity: 0; pointer-events: none; } /* nas pontas: some */ .carousel--static .carousel__arrow { opacity: 0; pointer-events: none; } /* cabe tudo: sem setas */ .carousel--empty .carousel__arrow { display: none; } .carousel--empty .carousel__track { display: block; overflow: visible; } @media (max-width: 1200px) { .carousel__track { grid-auto-columns: calc((100% - 3 * 16px) / 4); } } /* 4 visíveis */ @media (max-width: 860px) { .carousel__track { grid-auto-columns: calc((100% - 2 * 14px) / 3); gap: 14px; } } /* 3 visíveis */ @media (max-width: 640px) { /* MOBILE: mostra ~2 cards por vez (com uma pequena "espiada" no 3º) E mantém as SETAS visíveis/funcionais (além do swipe). Setas menores e recuadas p/ não estourar a largura. */ .carousel__track { grid-auto-columns: 47%; gap: 12px; padding: 10px 6px 18px; scroll-padding-left: 6px; scroll-padding-right: 6px; } .carousel__arrow { width: 36px; height: 36px; font-size: 13px; box-shadow: 0 3px 12px rgba(15,23,42,0.22); } .carousel__arrow--prev { left: -4px; } .carousel__arrow--next { right: -4px; } } @media (max-width: 380px) { .carousel__track { grid-auto-columns: 48%; gap: 10px; } } /* ainda ~2 por vez em telas estreitas */ /* PRODUCT CARD */ /* position:relative → âncora do coração (que agora é filho direto do card, fora do .product-card__image com overflow:hidden — assim nunca é clipado). */ .product-card { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; display: flex; flex-direction: column; position: relative; transition: var(--transition); } .product-card:hover { border-color: var(--primary-light); box-shadow: var(--shadow-md); transform: translateY(-3px); } /* linha de meta no CORPO (abaixo da categoria): código à esquerda, marca (pill) à direita. min-height fixo mantém os cards da mesma linha alinhados no preço/ações. */ .product-card__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 22px; margin-top: 1px; } /* nowrap+ellipsis + min-width:0: em cards estreitos (2 col no mobile) um código longo (ex: "10850PAI") quebrava pra 2 linhas e desalinhava os cards vizinhos; min-width:0 permite o flex-item truncar em vez de forçar o card a crescer. */ .product-card__sku { font-size: 11px; color: var(--text-medium); font-weight: 600; letter-spacing: 0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex-shrink: 0; } /* marca: pill que ENCOLHE com ellipsis elegante em vez de ser cortada pelo overflow do card. max-width limita para não empurrar o código; nomes curtos aparecem inteiros. */ /* Badge de MARCA: AMARELO da logo (--accent) com texto ESCURO/preto (--text-dark). productCardHTML não aplica modificadores em .product-card__brand, então este é o visual de TODOS os badges de marca (o dono quer todos iguais). */ .product-card__brand { font-size: 9.5px; font-weight: 800; color: var(--text-dark); background: var(--accent); padding: 3px 8px; border-radius: 5px; letter-spacing: 0.2px; text-transform: uppercase; transition: var(--transition); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 62%; flex: 0 1 auto; } .product-card__brand.brand--accent { background: var(--accent); } .product-card__brand.brand--warning { background: var(--accent); } a.product-card__brand:hover { background: #f0b84e; color: var(--text-dark); transform: translateY(-1px); box-shadow: var(--shadow-sm); } .product-card__image { aspect-ratio: 1; width: 100%; background: #fff; position: relative; overflow: hidden; } /* Divisor imagem→corpo que NÃO liga ponta a ponta: um filete FINO (1px) que desvanece nas duas extremidades (transparente nas bordas, mais forte no centro) — separação sutil e elegante em vez do border-bottom reto. Fica no rodapé da imagem, acima do fundo, sem afetar a foto. Mesma espessura/estilo do divisor código→preço (.product-card__price-wrap::before). */ .product-card__image::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 2; pointer-events: none; /* banda sólida larga (10%→90%) + cinza levemente reforçado (#c8d2d6, entre --border-color e --text-light) → o filete aparece claramente em TODAS as vitrines/carrosséis, ainda como hairline com fade elegante nas 2 pontas (não vira traço reto/pesado). */ background: linear-gradient(90deg, transparent 0%, #c8d2d6 10%, #c8d2d6 90%, transparent 100%); } /* A imagem é posicionada em absolute (não em fluxo normal). Isso é proposital: a altura de .product-card__image vem de aspect-ratio (não de um `height` explícito), e um filho em fluxo normal com height em % (mesmo 100%) NÃO resolve de forma confiável contra uma altura assim derivada — o browser trata como "auto" e a imagem passa a usar a proporção intrínseca (uma foto retrato "vazava" do quadrado e ficava cortada/desalinhada, diferente em cada card). Em absolute, top/left/width/height resolvem contra o box já calculado (sem essa ambiguidade), então todo card fica com a MESMA área de imagem (quadrada, com 16px de respiro), e o object-fit:contain + object-position:center encaixa/centraliza qualquer proporção original dentro dela — igual em todos os cards, independente da foto. */ .product-card__image img { position: absolute; top: 16px; left: 16px; width: calc(100% - 32px); height: calc(100% - 32px); object-fit: contain; object-position: center; transition: transform 0.4s; } .product-card:hover .product-card__image img { transform: scale(1.05); } /* Coração: filho DIRETO do .product-card (não da imagem). top/right relativos ao card e z-index:3 → flutua inteiro sobre o canto da imagem, acima dela e sem ser clipado pelo overflow:hidden do .product-card__image. */ .product-card__wishlist { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; background: rgba(255,255,255,0.96); border: 1px solid var(--border-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-medium); font-size: 14px; transition: all 0.25s ease; cursor: pointer; box-shadow: var(--shadow-sm); } .product-card__wishlist:hover { color: var(--danger); background: #fff; border-color: var(--danger); transform: scale(1.08); } .product-card__wishlist.is-active { color: var(--danger); background: #fff; border-color: var(--danger); } .product-card__wishlist.is-active i::before { content: "\f004"; font-weight: 900; } /* CORPO: hierarquia nome → (código+marca) → preço → ações (categoria removida). gap uniforme + min-heights fixos por linha = cards da mesma linha alinhados. */ .product-card__body { padding: 13px 14px 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; } /* nome: tracking apertado + fonte enxuta p/ aproveitar melhor a 1ª linha; clamp 2 linhas com altura fixa p/ alinhar cards. overflow-wrap:break-word evita estouro de palavras longas. */ /* nome do card: 20px no DESKTOP (pedido do dono), clamp 2 linhas com min-height dimensionado p/ caber 2 linhas (2 × 20 × 1.3 ≈ 52px) sem cortar e mantendo os cards da mesma linha alinhados. Escala PROPORCIONAL descendo os breakpoints (1024/640/380) p/ não estourar o card menor no mobile. overflow:hidden + line-clamp garantem que nada vaza do card. */ .product-card__title { font-size: 12px; font-weight: 600; color: var(--text-dark); line-height: 1.3; text-transform: uppercase; letter-spacing: -0.1px; overflow-wrap: break-word; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 31px; transition: color 0.2s; } .product-card__title:hover { color: var(--primary); } .product-card__price { font-size: 16px; font-weight: 700; color: var(--primary); } .product-card__price--unavail { color: var(--text-medium); font-size: 12px; font-weight: 600; } .product-card__actions { margin-top: auto; padding-top: 4px; } /* MOBILE: card menor → nome/preço proporcionalmente menores (antes o nome ficava grande demais). */ @media (max-width: 640px) { .product-card__body { padding: 10px 11px 12px; gap: 5px; } .product-card__title { font-size: 10.5px; line-height: 1.28; min-height: 27px; letter-spacing: -0.1px; } .product-card__meta { min-height: 20px; } .product-card__sku { font-size: 10px; } .product-card__brand { font-size: 8.5px; padding: 2px 6px; max-width: 60%; } .product-card__price { font-size: 14px; } } @media (max-width: 380px) { .product-card__title { font-size: 10px; } } /* --- ações do card: PAI (Ver Modelos full) x simples (qtd + Adicionar) --- */ .btn-add--full { width: 100%; } /* flex-wrap adaptativo: qtd + Adicionar lado a lado quando cabe; quando o card fica estreito (tablet/mobile), o "Adicionar" (min-width) quebra p/ a linha de baixo em largura total e o controle de qtd cresce p/ preencher a linha de cima — sem estouro, sem media query. */ .product-card__buy { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; } .product-card__buy .qty-control-mini { display: flex; align-items: center; flex: 1 1 78px; min-width: 78px; height: 34px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; } .product-card__buy .qty-btn-mini { flex: 0 0 26px; height: 100%; background: #fff; color: var(--primary); font-size: 15px; font-weight: 700; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 0.15s; } .product-card__buy .qty-btn-mini:hover { background: var(--bg-light); } .product-card__buy .qty-input-mini { flex: 1 1 auto; width: auto; min-width: 0; height: 100%; border: none; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); text-align: center; font-size: 12px; font-weight: 700; color: var(--text-dark); outline: none; padding: 0; -moz-appearance: textfield; } .product-card__buy .qty-input-mini::-webkit-outer-spin-button, .product-card__buy .qty-input-mini::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .product-card__buy .btn-add { flex: 3 1 96px; min-width: 96px; height: 34px; padding: 0 10px; } .btn-view, .btn-add, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger { padding: 9px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; transition: var(--transition); display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; cursor: pointer; line-height: 1; } .btn-view { background: var(--bg-light); color: var(--primary); } .btn-view:hover { background: var(--primary); color: #fff; } .btn-add { background: var(--primary); color: #fff; min-width: 105px; } .btn-add:hover { background: var(--primary-dark); transform: scale(1.02); } .btn-add.is-added { background: var(--secondary); } /* PRODUTO JÁ NO CARRINHO: o "Adicionar" vira "No carrinho: N" em VERDE (--secondary) — o cliente identifica de relance os itens do catálogo que já estão no carrinho. Clicar adiciona mais (o handler data-add continua ativo). */ .btn-add.in-cart { background: var(--secondary); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.35); } .btn-add.in-cart:hover { background: #00a884; transform: scale(1.02); } /* leve indicador de "tem variação no carrinho" no card PAI (Ver Modelos) */ .btn-add.pai-in-cart { position: relative; } .btn-add.pai-in-cart::after { content: ''; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; background: var(--secondary); border: 2px solid #fff; border-radius: 50%; box-shadow: var(--shadow-sm); } .btn-primary { background: var(--primary); color: #fff; padding: 12px 24px; font-size: 14px; } .btn-primary:hover { background: var(--primary-dark); } /* Acento de marca: anel de foco AMARELO (--accent) no CTA primário — o amarelo entra como destaque de foco/marca (nunca como texto), mantendo o azul como base do botão. */ .btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(253,203,110,0.55); } .btn-secondary { background: #fff; color: var(--primary); border: 1px solid var(--primary); } .btn-secondary:hover { background: var(--primary); color: #fff; } .btn-ghost { background: transparent; color: var(--primary); } .btn-ghost:hover { background: var(--bg-light); } .btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: #b9241f; } .btn-block { display: flex; width: 100%; } /* BANNER */ .banners-home { position: relative; width: 100%; overflow: hidden; background: #f5f7fa; margin-top: 16px; border-radius: var(--radius-lg); } .banners-carousel { display: flex; width: 100%; } .banner-item { flex: 0 0 100%; aspect-ratio: 1400 / 340; overflow: hidden; } .banner-item__placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); display: flex; align-items: center; justify-content: center; color: #fff; flex-direction: column; padding: 40px; text-align: center; } .banner-item__eyebrow { display: inline-block; padding: 5px 14px; background: rgba(253,203,110,0.2); color: var(--accent); font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; border-radius: 4px; margin-bottom: 14px; } .banner-item__title { font-size: 38px; font-weight: 800; margin-bottom: 10px; line-height: 1.1; letter-spacing: -0.5px; } .banner-item__sub { font-size: 16px; opacity: 0.9; max-width: 560px; } .banner-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.95); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--primary); box-shadow: var(--shadow-md); opacity: 0.6; transition: var(--transition); z-index: 10; } .banners-home:hover .banner-nav { opacity: 1; } .banner-nav:hover { background: #fff; transform: translateY(-50%) scale(1.05); } .banner-nav-prev { left: 20px; } .banner-nav-next { right: 20px; } .banners-indicators { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; } .banner-indicator { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: var(--transition); } .banner-indicator.active { background: #fff; width: 28px; border-radius: 5px; } .banners-mini { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } @media (max-width: 900px) { .banners-mini { grid-template-columns: 1fr; } } .banner-mini { aspect-ratio: 4/3; padding: 22px; border-radius: var(--radius-md); display: flex; flex-direction: column; justify-content: space-between; color: #fff; transition: var(--transition); } .banner-mini:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .banner-mini--blue { background: var(--primary-gradient); } .banner-mini--green { background: linear-gradient(135deg, var(--secondary) 0%, #00a17d 100%); } .banner-mini--white { background: var(--bg-white); color: var(--primary-dark); border: 1px solid var(--border-color); } .banner-mini__eyebrow { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.9; font-weight: 700; } .banner-mini__title { font-size: 18px; font-weight: 700; line-height: 1.2; } .banner-mini__sub { font-size: 12px; opacity: 0.9; margin-top: 4px; } .banner-mini__cta { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; } /* CTA BLOCK */ .cta-block { background: var(--primary-gradient); color: #fff; padding: 44px 0; text-align: center; border-radius: var(--radius-lg); margin: 32px 20px; } .cta-block__title { font-size: 26px; font-weight: 800; margin-bottom: 10px; letter-spacing: -0.5px; } .cta-block__sub { font-size: 15px; opacity: 0.9; margin-bottom: 22px; max-width: 540px; margin-inline: auto; } .cta-block__btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; background: var(--secondary); color: #fff; font-size: 14px; font-weight: 700; border-radius: var(--radius-md); transition: var(--transition); } .cta-block__btn:hover { background: #00a884; transform: translateY(-1px); box-shadow: var(--shadow-md); } /* FOOTER */ /* Rodapé: sombra sutil para cima (espelha o box-shadow do header), sem faixa/borda colorida. */ #site-footer { position: relative; box-shadow: 0 -2px 16px rgba(0, 51, 102, 0.1); } .footer { background: var(--primary-dark); color: rgba(255,255,255,0.75); padding: 40px 0 20px; margin-top: 32px; } .footer__main { display: grid; grid-template-columns: 1.7fr 1.1fr 1fr 1.15fr 1fr; gap: 26px 30px; padding-bottom: 26px; border-bottom: 1px solid #e2e8f0; } @media (max-width: 1080px) { .footer__main { grid-template-columns: 1.4fr 1fr 1fr; } } /* Mobile (<=768px): colunas empilhadas e tudo centralizado — ver bloco "FOOTER — mobile centralizado" abaixo. */ .footer__brand { margin-bottom: 12px; } .footer__name { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -0.5px; position: relative; padding-right: 14px; display: inline-block; } .footer__name::after { content: ''; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; background: var(--accent); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); } .footer__prefix { font-size: 10px; color: rgba(255,255,255,0.5); letter-spacing: 2px; text-transform: uppercase; margin-bottom: 2px; } .footer__desc { font-size: 13px; line-height: 1.6; max-width: 320px; margin-bottom: 16px; } .footer__integrations { display: flex; gap: 8px; flex-wrap: wrap; } .footer__integration { background: rgba(255,255,255,0.08); padding: 6px 10px; border-radius: 6px; font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.85); letter-spacing: 0.3px; display: inline-flex; align-items: center; gap: 6px; } .footer__col__title { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #fff; font-weight: 700; margin-bottom: 14px; opacity: 0.85; } .footer__links { display: flex; flex-direction: column; gap: 8px; } .footer__link { font-size: 13px; color: rgba(255,255,255,0.75); transition: color 0.2s; display: inline-flex; align-items: center; gap: 6px; } .footer__link i { font-size: 11px; opacity: 0.7; width: 12px; } .footer__link:hover { color: #fff; } .footer__bottom { padding-top: 16px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 11px; color: rgba(255,255,255,0.5); } /* FOOTER — Redes sociais (bloco da marca) */ .footer__social-title { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; margin: 18px 0 10px; } #site-footer .footer__social-title { color: #1a2b4a; opacity: 0.85; } .footer__social { display: flex; gap: 8px; flex-wrap: wrap; } .footer__social a { width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; transition: var(--transition); } #site-footer .footer__social a { background: #fff; color: var(--primary); border: 1px solid #e2e8f0; box-shadow: var(--shadow-sm); } #site-footer .footer__social a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); color: #fff; border-color: transparent; } #site-footer .footer__social a.is-instagram:hover { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); } #site-footer .footer__social a.is-facebook:hover { background: #1877f2; } #site-footer .footer__social a.is-youtube:hover { background: #ff0000; } #site-footer .footer__social a.is-linkedin:hover { background: #0a66c2; } #site-footer .footer__social a.is-whatsapp:hover { background: var(--whatsapp); } /* FOOTER — link de WhatsApp em Atendimento */ #site-footer .footer__link.is-wpp { color: #128c4b; font-weight: 600; } #site-footer .footer__link.is-wpp:hover { color: var(--whatsapp); } /* FOOTER — selos de verificação e segurança */ .footer__seals { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: stretch; padding: 22px 0 4px; } .footer__seal { display: inline-flex; align-items: center; gap: 11px; padding: 10px 15px; border-radius: 12px; background: #fff; border: 1px solid #e6eaf0; box-shadow: 0 1px 3px rgba(0,0,0,0.05); transition: var(--transition); } a.footer__seal:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .footer__seal i { font-size: 19px; color: var(--secondary); flex-shrink: 0; } .footer__seal .seal__txt { display: flex; flex-direction: column; line-height: 1.25; } .footer__seal .seal__t { font-size: 12px; font-weight: 800; color: #1a2b4a; letter-spacing: -0.1px; } .footer__seal .seal__s { font-size: 10.5px; color: #6b7280; } .footer__seal.seal--ssl i { color: #16a34a; } .footer__seal.seal--cert i { color: var(--primary); } .footer__seal.seal--google i { color: #ea4335; } /* FOOTER — assinatura "desenvolvido com amor" */ .footer__made { text-align: center; padding: 16px 0 4px; font-size: 12px; letter-spacing: 0.2px; } #site-footer .footer__made { color: #8a94a3; } .footer__made i { color: #e0245e; margin: 0 1px; animation: heartbeat 1.7s ease-in-out infinite; } @keyframes heartbeat { 0%,100% { transform: scale(1); } 12%,30% { transform: scale(1.18); } 21% { transform: scale(1.04); } } @media (max-width: 560px) { .footer__seals { gap: 8px; padding: 18px 0 4px; } .footer__seal { padding: 9px 12px; gap: 9px; } .footer__seal i { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { .footer__made i { animation: none; } } /* FOOTER — mobile centralizado (<=768px): empilha as colunas e centraliza tudo. Desktop (>768px) permanece inalterado. */ @media (max-width: 768px) { .footer__main { grid-template-columns: 1fr; text-align: center; gap: 24px; } /* Bloco da marca: logo, descrição, redes sociais — centralizados */ .footer__brand { margin-left: auto; margin-right: auto; } .footer__desc { max-width: 340px; margin-left: auto; margin-right: auto; } .footer__social-title { text-align: center; } .footer__social { justify-content: center; } /* Colunas de links (Atendimento / Localização / Institucional / Minha Conta) */ .footer__links { align-items: center; } .footer__link { justify-content: center; text-align: center; } /* Copyright e assinatura */ .footer__bottom { justify-content: center; text-align: center; } } @media (max-width: 540px) { .footer__main { gap: 20px; padding-bottom: 22px; } .footer__desc { max-width: 300px; } .footer__bottom { flex-direction: column; gap: 6px; } } /* WHATSAPP FLUTUANTE — REMOVIDO (o único botão flutuante é o widget da IA, canto inf. esquerdo). O contato por WhatsApp continua no header (Fale Conosco) e no footer. */ /* MODAL Abertura INSTANTÂNEA: sem backdrop-filter (blur pesa no 1º frame de todo overlay) e animação curta fade+scale (~120-150ms). Vale p/ login, confirm, info, confirmTriplo, voltagem e checkout (todos usam .modal-backdrop/.modal). Reutiliza mvFade/mvPop. Backdrop escurecido p/ rgba(0,0,0,0.6) — acima do piso da produção (0,0,0,0.5), a pedido do dono (mais escuro p/ destacar o modal). Sem blur (perf). */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 10000; display: none; align-items: center; justify-content: center; padding: 20px; } .modal-backdrop.is-open { display: flex; animation: mvFade 0.12s ease both; } /* max-height: min(90dvh,…) evita o "pulo" da barra de endereço no iOS (dvh acompanha a viewport dinâmica); a 1ª linha 90vh fica como fallback p/ navegadores sem dvh. Sombra tingida de azul. */ .modal { background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 480px; max-height: 90vh; max-height: min(90dvh, 940px); overflow-y: auto; box-shadow: 0 24px 60px -12px rgba(0,61,122,0.28), var(--shadow-xl); animation: mvPop 0.15s cubic-bezier(0.16,1,0.3,1) both; } .modal--large { max-width: 720px; } .modal--small { max-width: 380px; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .modal__head { display: flex; align-items: center; justify-content: space-between; padding: 13px 20px; border-bottom: 1px solid var(--border-color); } .modal__title { font-size: 16px; font-weight: 700; color: var(--primary-dark); display: flex; align-items: center; gap: 10px; } .modal__title i { color: var(--primary); } .modal__close { width: 44px; height: 44px; border-radius: 50%; background: var(--bg-light); color: var(--text-medium); display: flex; align-items: center; justify-content: center; transition: var(--transition); font-size: 15px; flex-shrink: 0; } .modal__close:hover { background: var(--danger); color: #fff; } /* forced-colors (Windows High Contrast): box-shadow não aparece → outline transparente vira visível */ .modal__close:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: 0 0 0 3px rgba(253,203,110,0.55); } .modal__body { padding: 18px 20px; } /* alvo de toque ≥44px nos CTAs de bloco dentro de modais (login/cadastro/OTP/sucesso) */ .modal .btn-block { min-height: 44px; } .modal__foot { display: flex; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border-color); justify-content: flex-end; } /* ---- modal informativo de produto ELETRÔNICO / voltagem (Modal.info / Modal.voltagem) ---- */ .modal__head--warn .modal__title i { color: #e08a00; } .modal-eletronico { text-align: center; } .modal-eletronico__icon { width: 64px; height: 64px; margin: 2px auto 16px; border-radius: 50%; background: linear-gradient(135deg,#fff3d6,#ffe0a8); color: #d98a00; display: flex; align-items: center; justify-content: center; font-size: 27px; } .modal-eletronico p { font-size: 14px; color: var(--text-dark); line-height: 1.6; margin: 0 0 10px; } .modal-eletronico p:last-child { margin-bottom: 0; } /* botões do rodapé de modais estreitos empilham confortável no mobile */ @media (max-width: 480px) { .modal__foot { flex-direction: column-reverse; } .modal__foot .btn-primary, .modal__foot .btn-ghost, .modal__foot .btn-danger { width: 100%; justify-content: center; } } /* ---- MODAL VOLTAGEM (produto eletrônico): cores do layout novo ---- A abertura leve/instantânea (fade+scale ~150ms, sem blur) agora é padrão de TODO modal (ver bloco MODAL acima). Este bloco só acrescenta o TEMA da marca ao aviso de voltagem: fundo azul-escuro e ícone/realce na paleta (círculo AZUL --primary + raio DOURADO --accent). */ .modal-backdrop.modal--volt { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(15,23,42,0.5); animation: mvFade .12s ease both; } .modal-backdrop.modal--volt .modal { animation: mvPop .15s cubic-bezier(0.16,1,0.3,1) both; } .modal--volt .modal__head--warn .modal__title i { color: var(--primary); } .modal--volt .modal-eletronico__icon { background: linear-gradient(135deg, var(--primary), var(--primary-light)); color: var(--accent); box-shadow: 0 8px 20px rgba(0,61,122,0.28); } @keyframes mvFade { from { opacity: 0; } to { opacity: 1; } } @keyframes mvPop { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } /* ---- badge "Eletrônico" clicável (abre o modal informativo) ---- */ .produto-badge--eletronico, .variacao-item__badge--eletronico { cursor: pointer; } .produto-badge--eletronico { background: #fff3d6 !important; color: #b45309 !important; border: 1px solid #f4d38a; } .produto-badge--eletronico i.fa-bolt, .variacao-item__badge--eletronico i.fa-bolt { color: #e08a00 !important; } .produto-badge--eletronico:hover { background: #ffe9b8 !important; box-shadow: var(--shadow-sm); transform: translateY(-1px); } .produto-badge--eletronico .fa-circle-info, .variacao-item__badge-info { font-size: 10px; opacity: 0.65; } .variacao-item__badge--eletronico { background: #fff7e8; border-color: #f4d38a; color: #b45309; } .variacao-item__badge--eletronico:hover { background: #ffefcf; } /* TOAST */ .toast-container { position: fixed; top: 20px; right: 20px; z-index: 11000; display: flex; flex-direction: column; gap: 10px; pointer-events: none; } .toast { background: #fff; padding: 12px 16px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 12px; min-width: 280px; max-width: 380px; pointer-events: auto; animation: slideInRight 0.3s ease; border-left: 4px solid var(--primary); } .toast--success { border-left-color: var(--secondary); } .toast--error { border-left-color: var(--danger); } .toast--warning { border-left-color: var(--warning); } .toast i { font-size: 18px; } .toast--success i { color: var(--secondary); } .toast--error i { color: var(--danger); } .toast--warning i { color: var(--warning); } .toast__body { flex: 1; } .toast__title { font-size: 13px; font-weight: 700; color: var(--text-dark); } .toast__msg { font-size: 12px; color: var(--text-medium); margin-top: 2px; } .toast__close { color: var(--text-light); font-size: 12px; padding: 4px; } @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .toast.is-leaving { animation: slideOutRight 0.3s ease forwards; } @keyframes slideOutRight { to { opacity: 0; transform: translateX(20px); } } /* --- toast AMARELO da logo (usado ao ADICIONAR ao carrinho) --- Cor da logo: gradiente dourado #FACC15 → #EAB308. Entrada com um "pop" elástico. */ .toast--cart { border-left-color: #EAB308; background: linear-gradient(90deg, #fffbeb 0%, #ffffff 62%); box-shadow: 0 10px 30px rgba(234,179,8,0.28), var(--shadow-lg); animation: cartToastIn 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); } /* só o ícone LÍDER (filho direto) vira o chip dourado — o "x" de fechar (dentro do button) não. */ .toast--cart > i { color: #fff; font-size: 15px; width: 34px; height: 34px; flex-shrink: 0; background: linear-gradient(135deg, #FACC15, #EAB308); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(234,179,8,0.45); } .toast--cart .toast__close { color: var(--text-light); } .toast--cart .toast__title { color: #7a5c00; } .toast--cart .toast__msg { color: #9a7b2e; } @keyframes cartToastIn { 0% { opacity: 0; transform: translateX(24px) scale(0.9); } 60% { opacity: 1; transform: translateX(-4px) scale(1.02); } 100% { opacity: 1; transform: translateX(0) scale(1); } } /* "pop" no número + "bump" na pílula do carrinho ao adicionar (feedback sem abrir o drawer) */ .cart-btn__count--pop { display: inline-block; animation: cartCountPop 0.55s ease; } @keyframes cartCountPop { 0% { transform: scale(1); } 35% { transform: scale(1.6); } 65% { transform: scale(0.9); } 100% { transform: scale(1); } } .cart-btn--bump { animation: cartBtnBump 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); } @keyframes cartBtnBump { 0% { transform: scale(1) translateY(0); } 30% { transform: scale(1.08) translateY(-3px); } 55% { transform: scale(0.97) translateY(0); } 100% { transform: scale(1) translateY(0); } } /* wiggle suave do ícone ao passar o mouse no carrinho */ @keyframes cartIconWiggle { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-10deg) scale(1.12); } 55% { transform: rotate(8deg) scale(1.12); } 80% { transform: rotate(-4deg) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .cart-btn__count--pop, .cart-btn--bump, .cart-btn:hover .cart-btn__icon { animation: none; } } /* ===== CARD "PRODUTO ADICIONADO AO CARRINHO" ===== Substitui o toast do "adicionar": cartão perto do ícone do carrinho (canto sup. direito) com miniatura + nome + preço (respeitando proteção de preço) + quantidade. Abre com slide+scale curto, some sozinho e some ao abrir o drawer. NÃO reabre o drawer. */ .cart-added { position: fixed; z-index: 11500; width: 320px; max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; box-shadow: 0 14px 38px rgba(0,61,122,0.24), 0 3px 10px rgba(0,0,0,0.08); opacity: 0; transform: translateY(-10px) scale(0.96); transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.16,1,0.3,1); pointer-events: none; } .cart-added.is-visible { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .cart-added__head { display: flex; align-items: center; gap: 9px; padding: 10px 14px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; } .cart-added__head i { color: var(--accent); font-size: 15px; flex-shrink: 0; } /* realce dourado da marca */ .cart-added__head span { flex: 1; min-width: 0; line-height: 1.25; } .cart-added__body { display: flex; gap: 12px; padding: 12px 14px; align-items: center; } .cart-added__thumb { width: 58px; height: 58px; flex-shrink: 0; background: var(--bg-light); border-radius: var(--radius-sm); overflow: hidden; display: flex; align-items: center; justify-content: center; } .cart-added__thumb img { width: 100%; height: 100%; object-fit: contain; padding: 5px; } .cart-added__info { flex: 1; min-width: 0; } .cart-added__name { font-size: 12px; font-weight: 600; color: var(--text-dark); line-height: 1.3; text-transform: uppercase; letter-spacing: -0.1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 6px; } .cart-added__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .cart-added__qty { font-size: 11px; font-weight: 700; color: var(--text-medium); background: var(--bg-light); padding: 2px 9px; border-radius: 10px; white-space: nowrap; } .cart-added__price { font-size: 15px; font-weight: 800; color: var(--primary); white-space: nowrap; } .cart-added__price--muted { font-size: 11.5px; font-weight: 700; color: var(--text-medium); text-transform: none; letter-spacing: 0; } .cart-added__foot { border-top: 1px solid var(--border-color); } .cart-added__link { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; font-size: 12px; font-weight: 700; color: var(--primary); transition: background 0.15s ease; } .cart-added__link:hover { background: var(--bg-light); } @media (max-width: 480px) { .cart-added { width: auto; left: 12px; right: 12px; } } /* FORMS */ .form-group { margin-bottom: 16px; } /* dentro dos modais de auth os grupos são mais compactos (sem scroll em login/recuperação) */ .modal .form-group { margin-bottom: 12px; } .form-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-dark); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.4px; } .form-label .required { color: var(--danger); } .form-input, .form-select, .form-textarea { width: 100%; padding: 11px 14px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 14px; color: var(--text-dark); transition: var(--transition); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(0, 61, 122, 0.1); } /* nos modais de auth o anel de foco é AMARELO (acento de marca) — escopo local p/ não mexer nos demais formulários do site (checkout etc.). Mantém a borda azul, troca só o halo. */ .modal .form-input:focus, .modal .form-select:focus, .modal .form-textarea:focus { box-shadow: var(--focus-ring); } .form-input::placeholder { color: var(--text-light); } .form-textarea { min-height: 100px; resize: vertical; } .form-hint { font-size: 11px; color: var(--text-medium); margin-top: 4px; } .form-error { font-size: 11px; color: var(--danger); margin-top: 4px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 540px) { .form-row { grid-template-columns: 1fr; } } /* TABS */ .tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--border-color); margin-bottom: 24px; flex-wrap: wrap; } .tabs__tab { padding: 12px 18px; font-size: 13px; font-weight: 700; color: var(--text-medium); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: var(--transition); } .tabs__tab:hover { color: var(--primary); } .tabs__tab.is-active { color: var(--primary); border-bottom-color: var(--primary); } /* ========================================================================== FILTERS SIDEBAR (refinada) + toolbar do catálogo + chips + drawer mobile Desktop: sidebar fixa à esquerda. Mobile: vira drawer via botão "Filtros". ========================================================================== */ .filters { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 4px 18px 18px; height: fit-content; position: sticky; top: 160px; display: flex; flex-direction: column; } .filters__scroll { display: block; } /* cabeçalho do drawer (visível só no mobile) */ .filters__drawer-head { display: none; align-items: center; justify-content: space-between; padding: 16px 2px 14px; border-bottom: 1px solid var(--border-color); } .filters__drawer-title { font-size: 15px; font-weight: 700; color: var(--primary-dark); display: flex; align-items: center; gap: 10px; } .filters__drawer-title i { color: var(--primary); } .filters__drawer-close { width: 40px; height: 40px; border-radius: 50%; background: var(--bg-light); color: var(--text-medium); display: flex; align-items: center; justify-content: center; font-size: 16px; transition: var(--transition); flex-shrink: 0; } .filters__drawer-close:hover { background: var(--danger); color: #fff; } /* grupos com accordion */ .filters__group { border-bottom: 1px solid var(--border-color); padding: 14px 0; } .filters__group:last-of-type { border-bottom: none; } .filters__group__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 2px 0; background: none; cursor: pointer; } .filters__group__title { font-size: 11px; font-weight: 800; color: var(--text-dark); text-transform: uppercase; letter-spacing: 0.6px; } .filters__group__chevron { font-size: 11px; color: var(--text-medium); transition: transform 0.25s ease; } .filters__group.is-collapsed .filters__group__chevron { transform: rotate(-90deg); } .filters__group__body { overflow: hidden; max-height: 900px; transition: max-height 0.3s ease; margin-top: 12px; } .filters__group.is-collapsed .filters__group__body { max-height: 0; margin-top: 0; } /* campo "buscar marca" */ .filters__search { display: flex; align-items: center; gap: 8px; background: var(--bg-light); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 8px 11px; margin-bottom: 10px; transition: var(--transition); } .filters__search:focus-within { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px rgba(0,61,122,0.08); } .filters__search i { font-size: 11px; color: var(--text-light); } .filters__search input { flex: 1; border: none; background: none; outline: none; font-size: 12.5px; color: var(--text-dark); min-width: 0; } /* lista de marcas: altura controlada + scroll discreto */ .filters__list { max-height: 244px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; } .filters__list::-webkit-scrollbar { width: 6px; } .filters__list::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; } .filters__list::-webkit-scrollbar-track { background: transparent; } /* opção (linha inteira clicável) */ .filters__option { display: flex; align-items: center; gap: 10px; padding: 7px 8px; margin: 1px 0; font-size: 12.5px; color: var(--text-dark); cursor: pointer; border-radius: var(--radius-sm); transition: background 0.15s; min-height: 34px; } .filters__option:hover { background: var(--bg-light); } .filters__option.is-checked { background: rgba(0,61,122,0.07); } .filters__option input { accent-color: var(--primary); cursor: pointer; width: 16px; height: 16px; flex-shrink: 0; } .filters__option__label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .filters__option.is-checked .filters__option__label { color: var(--primary); font-weight: 700; } .filters__option__count { flex-shrink: 0; font-size: 11px; font-weight: 700; color: var(--text-medium); background: var(--bg-light); padding: 1px 8px; border-radius: 10px; } .filters__option:hover .filters__option__count { background: #fff; } .filters__option.is-checked .filters__option__count { background: #fff; color: var(--primary); } .filters__option--switch { min-height: 40px; } .filters__hint, .filters__empty-search { font-size: 12px; color: var(--text-medium); padding: 6px 2px; } /* rodapé (limpar / aplicar) */ .filters__foot { display: flex; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-color); } .filters__clear { flex: 1; border: 1px solid var(--border-color); border-radius: var(--radius-sm); justify-content: center; } .filters__apply { display: none; } /* overlay do drawer (inativo no desktop) */ .filters-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 11999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; } /* toolbar do catálogo: botão Filtros (mobile) + contagem + ordenação */ .catalog-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .catalog-toolbar__count { font-size: 13px; color: var(--text-medium); } .catalog-toolbar__sort { margin-left: auto; } .catalog-toolbar__sort .form-select { width: auto; padding: 9px 34px 9px 14px; font-size: 12.5px; font-weight: 600; } .filters-toggle { display: none; align-items: center; gap: 8px; padding: 9px 16px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: 13px; font-weight: 700; color: var(--primary-dark); transition: var(--transition); } .filters-toggle:hover { border-color: var(--primary); color: var(--primary); } .filters-toggle i { color: var(--primary); } .filters-toggle__badge { min-width: 18px; height: 18px; padding: 0 5px; background: var(--primary); color: #fff; font-size: 10px; font-weight: 800; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; } /* chips de filtros ativos */ .active-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 18px; } .active-filters__label { font-size: 12px; color: var(--text-medium); font-weight: 600; margin-right: 2px; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 8px 6px 13px; background: #fff; border: 1px solid var(--border-color); border-radius: 20px; font-size: 12px; font-weight: 600; color: var(--text-dark); } .chip__txt { line-height: 1; } .chip__x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--bg-light); color: var(--text-medium); font-size: 9px; transition: all 0.15s; cursor: pointer; flex-shrink: 0; } .chip__x:hover { background: var(--danger); color: #fff; } .chip--clear { border-style: dashed; border-color: var(--primary); color: var(--primary); background: rgba(0,61,122,0.04); cursor: pointer; padding: 6px 13px; gap: 6px; transition: var(--transition); } .chip--clear:hover { background: var(--primary); color: #fff; } /* ---- MOBILE (≤560px): toolbar do catálogo ALINHADA — "Filtros" e "Ordenar" dividem a 1ª linha (50/50, mesma altura) e a contagem de resultados vai p/ a linha de baixo, à esquerda. Evita o efeito antigo de "Filtros + contagem" numa linha e o select solto e desalinhado na linha seguinte. Os filtros ficam RECOLHIDOS por padrão (drawer aberto pelo botão "Filtros"). */ @media (max-width: 560px) { .catalog-toolbar { gap: 10px; align-items: stretch; } .catalog-toolbar .filters-toggle { flex: 1 1 0; justify-content: center; margin: 0; } .catalog-toolbar__sort { flex: 1 1 0; margin-left: 0; min-width: 0; } .catalog-toolbar__sort .form-select { width: 100%; min-height: 44px; padding: 9px 34px 9px 14px; } .catalog-toolbar__count { order: 3; flex-basis: 100%; } } /* PAGE LAYOUT (catálogo) */ .catalog-layout { display: grid; grid-template-columns: 264px 1fr; gap: 24px; align-items: start; } /* ---- MOBILE (≤900px): sidebar vira drawer lateral acionado pelo botão "Filtros" ---- */ @media (max-width: 900px) { .catalog-layout { grid-template-columns: 1fr; } .filters-toggle { display: inline-flex; } .filters { position: fixed; top: 0; left: 0; bottom: 0; height: 100%; width: min(360px, 88vw); max-width: 88vw; z-index: 12000; border: none; border-radius: 0; box-shadow: var(--shadow-xl); padding: 0 18px; transform: translateX(-100%); transition: transform 0.32s cubic-bezier(0.4,0,0.2,1); } body.filters-open { overflow: hidden; } body.filters-open .filters { transform: translateX(0); } body.filters-open .filters-overlay { opacity: 1; visibility: visible; } .filters__drawer-head { display: flex; } .filters__scroll { flex: 1; overflow-y: auto; margin: 0 -18px; padding: 4px 18px; -webkit-overflow-scrolling: touch; } .filters__list { max-height: none; } .filters__foot { margin-top: 0; padding: 14px 0; background: #fff; position: sticky; bottom: 0; } .filters__apply { display: inline-flex; flex: 1; justify-content: center; } /* alvos touch ≥44px */ .filters__option { min-height: 44px; } .filters__group__head { min-height: 40px; } .filters__drawer-close { width: 44px; height: 44px; } .chip__x { width: 22px; height: 22px; } } /* TABLE */ .table-wrap { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; } .table { width: 100%; border-collapse: collapse; font-size: 13px; } .table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--bg-light); } .table th { background: var(--bg-light); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-medium); } .table tr:last-child td { border-bottom: none; } .table tr:hover { background: var(--bg-light); } .table__qty { display: inline-flex; align-items: center; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; } .table__qty button { width: 28px; height: 28px; background: #fff; color: var(--text-dark); font-size: 14px; } .table__qty button:hover { background: var(--bg-light); } .table__qty input { width: 40px; height: 28px; border: none; text-align: center; font-size: 13px; font-weight: 600; outline: none; } /* EMPTY STATE */ .empty-state { background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 48px 24px; text-align: center; } .empty-state__icon { width: 72px; height: 72px; margin: 0 auto 16px; background: var(--bg-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: 28px; } .empty-state__title { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; } .empty-state__msg { font-size: 13px; color: var(--text-medium); margin-bottom: 20px; max-width: 360px; margin-inline: auto; } /* AUTH (login/cadastro) */ .auth-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 540px) { .auth-choice { grid-template-columns: 1fr; } } .auth-choice__option { background: #fff; border: 2px solid var(--border-color); border-radius: var(--radius-md); padding: 24px; text-align: center; cursor: pointer; transition: var(--transition); } .auth-choice__option:hover { border-color: var(--primary); box-shadow: var(--shadow-md); transform: translateY(-2px); } .auth-choice__icon { width: 60px; height: 60px; margin: 0 auto 14px; background: var(--bg-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 26px; } .auth-choice__title { font-size: 16px; font-weight: 700; color: var(--text-dark); margin-bottom: 6px; } .auth-choice__desc { font-size: 12px; color: var(--text-medium); } /* ---- AUTH nos MODAIS (login / cadastro / recuperação) — portado de login.html (agora stub) ---- Migrado do