/** * Soulmkt SenSearch - Estilos * * @category Soulmkt * @package Soulmkt_SenSearch * @author Soulmkt * @copyright Copyright Soulmkt (http://soulmkt.com.br/) * @version 2.7.50 */ /* ========================================================================= DESIGN TOKENS (SenSearch) Raio theme-aware via atributo [theme] no (page/1column.phtml:40). Precedente em produção: soulpayment/pricing-classic.css. Todo consumo deve usar var(--token, fallback) para blindar o default. ========================================================================= */ :root { /* Spacing (rem) */ --sensearch-space-1: 0.25rem; --sensearch-space-2: 0.5rem; --sensearch-space-3: 0.75rem; --sensearch-space-4: 1rem; --sensearch-space-5: 1.5rem; --sensearch-space-6: 2rem; --sensearch-space-7: 3rem; /* Raio (default) */ --sensearch-radius-sm: 0.375rem; --sensearch-radius-md: 0.5rem; --sensearch-radius-lg: 0.75rem; --sensearch-radius-panel: 1rem; --sensearch-radius-pill: 62.4375rem; /* Cores (theme-aware; accent herda a cor primária do tema quando disponível) */ --sensearch-fg: var(--color-text, hsl(213 13% 14%)); --sensearch-fg-muted: hsl(0 0% 40%); --sensearch-fg-subtle: hsl(218 11% 65%); --sensearch-surface: hsl(0 0% 100%); --sensearch-surface-page: hsl(36 20% 95%); --sensearch-surface-hover: hsl(220 14% 96%); --sensearch-border: hsl(220 13% 91%); --sensearch-border-strong: hsl(216 12% 84%); --sensearch-overlay: rgb(17 24 39 / 45%); --sensearch-accent: var(--theme-primary-color, hsl(221 39% 11%)); --sensearch-accent-fg: hsl(0 0% 100%); --sensearch-price: var(--color-price, hsl(213 13% 14%)); --sensearch-price-special: hsl(142 76% 36%); --sensearch-focus-ring: rgb(17 24 39 / 35%); --sensearch-shadow-panel: 0 0.5rem 1.5rem rgb(149 157 165 / 20%); } :root[theme='rounded'] { --sensearch-radius-sm: 0.25rem; --sensearch-radius-md: 0.25rem; --sensearch-radius-lg: 0.375rem; --sensearch-radius-panel: 0.5rem; --sensearch-radius-pill: 62.4375rem; } :root[theme='circle'] { --sensearch-radius-sm: 0.625rem; --sensearch-radius-md: 0.9375rem; --sensearch-radius-lg: 1.25rem; --sensearch-radius-panel: 1.5rem; --sensearch-radius-pill: 62.4375rem; } /* ========================================================================= BUSCA - WRAPPER E BADGE IA (Mini Form) ========================================================================= */ .sensearch-search-wrapper { align-items: center; display: flex; position: relative; } /* Barra de busca em DESTAQUE quando o autocomplete está aberto (desktop, tipo Amazon). A classe .sensearch-ac-open é adicionada pelo JS (_showAutocomplete) só no desktop e removida no teardown único (_hideAutocomplete). z-index ACIMA do overlay (99998) e do painel (99999) para o input ficar "iluminado" sobre a página escurecida. */ .sensearch-search-wrapper.sensearch-ac-open { background: var(--sensearch-surface, hsl(0 0% 100%)); border-radius: var(--sensearch-radius-md, 0.5rem); box-shadow: var(--sensearch-shadow-panel, 0 0.5rem 1.5rem rgb(149 157 165 / 20%)); position: relative; z-index: 100000; } .sensearch-sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; white-space: nowrap; width: 1px; } .sensearch-ai-badge { align-items: center; background: hsl(229 76% 66%); border-radius: 4px; color: hsl(0 0% 100%); cursor: help; display: inline-flex; font-size: 10px; font-weight: 700; gap: 3px; letter-spacing: 0.5px; padding: 2px 6px; position: absolute; right: 50px; top: 50%; transform: translateY(-50%); z-index: 2; } .sensearch-ai-badge svg { height: 12px; width: 12px; } /* ========================================================================= BOTÃO AI MODE (Barra de busca) ========================================================================= */ .sensearch-ai-mode-btn { align-items: center; animation: sensearch-ai-btn-glow 3s ease-in-out infinite; background: var(--sensearch-ai-btn-bg, linear-gradient(135deg, hsl(229 76% 66%) 0%, hsl(270 37% 46%) 100%)); border-radius: 5px; box-shadow: var(--sensearch-ai-btn-shadow, 0 2px 8px rgb(102 126 234 / 35%)); color: hsl(0 0% 100%); cursor: pointer; display: inline-flex; font-size: 11px; font-weight: 700; gap: 5px; letter-spacing: 0.3px; padding: 5px 12px; position: absolute; right: 70px; text-decoration: none; top: 50%; transform: translateY(-50%); transition: all 0.3s ease; z-index: 2; } .sensearch-ai-mode-btn:hover { box-shadow: var(--sensearch-ai-btn-shadow-hover, 0 4px 16px rgb(102 126 234 / 50%)); color: hsl(0 0% 100%); filter: brightness(1.1); text-decoration: none; transform: translateY(-50%) scale(1.05); } .sensearch-ai-mode-btn:active { transform: translateY(-50%) scale(0.98); } .sensearch-ai-mode-btn-icon { align-items: center; display: flex; justify-content: center; } .sensearch-ai-mode-btn-icon svg { height: 14px; width: 14px; } .sensearch-ai-mode-btn-text { line-height: 1; } .sensearch-ai-mode-btn-sparkle { animation: sensearch-sparkle-rotate 2s linear infinite; display: inline-block; font-size: 10px; } @keyframes sensearch-ai-btn-glow { 0%, 100% { box-shadow: var(--sensearch-ai-btn-shadow, 0 2px 8px rgb(102 126 234 / 35%)); } 50% { box-shadow: var(--sensearch-ai-btn-shadow-glow, 0 2px 16px rgb(118 75 162 / 50%)); } } @keyframes sensearch-sparkle-rotate { 0% { opacity: 1; transform: rotate(0deg) scale(1); } 50% { opacity: 0.7; transform: rotate(180deg) scale(1.3); } 100% { opacity: 1; transform: rotate(360deg) scale(1); } } /* Mobile: botão mais compacto */ @media (width <= 768px) { .sensearch-ai-mode-btn { font-size: 10px; gap: 3px; padding: 4px 8px; right: 44px; } .sensearch-ai-mode-btn-text { display: none; } .sensearch-ai-mode-btn-icon svg { height: 12px; width: 12px; } } /* ========================================================================= PÁGINA DE RESULTADOS ========================================================================= */ .sensearch-results-page { margin: 0; max-width: 1299px; overflow-x: hidden; padding: 20px 0 0; } /* Barra de busca na página de resultados */ .sensearch-results-search-bar { margin-bottom: 24px; } .sensearch-results-input-wrapper { align-items: center; background: hsl(0 0% 100%); border: 2px solid hsl(220 13% 91%); border-radius: 12px; display: flex; overflow: hidden; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .sensearch-results-input-wrapper:focus-within { border-color: hsl(229 76% 66%); box-shadow: 0 0 0 3px rgb(102 126 234 / 15%); } .sensearch-results-input { background: transparent; border: none; color: hsl(215 28% 17%); flex: 1; font-size: 16px; outline: none; padding: 14px 18px; } .sensearch-results-input::placeholder { color: hsl(218 11% 65%); } .sensearch-results-btn { align-items: center; background: hsl(229 76% 66%); border: none; color: hsl(0 0% 100%); cursor: pointer; display: flex; flex-shrink: 0; height: 48px; justify-content: center; transition: opacity 0.2s ease; width: 48px; } .sensearch-results-btn:hover { opacity: 0.9; } /* ========================================================================= RESPOSTA DA IA (BUSCA CONVERSACIONAL) ========================================================================= */ .sensearch-ai-response { animation: sensearch-fadeIn 0.4s ease-out; background: hsl(216 33% 97%); border: 1px solid hsl(217 30% 86%); border-left: 4px solid hsl(229 76% 66%); border-radius: 12px; box-shadow: 0 2px 8px rgb(0 0 0 / 6%); margin-bottom: 24px; padding: 20px 24px; } .sensearch-ai-response.sensearch-ai-no-results { background: linear-gradient(135deg, hsl(48 100% 96%) 0%, hsl(48 96% 89%) 100%); border-color: hsl(46 97% 65%); border-left-color: hsl(38 92% 50%); } .sensearch-ai-header { align-items: center; border-bottom: 1px solid rgb(0 0 0 / 8%); display: flex; gap: 8px; margin-bottom: 12px; padding-bottom: 10px; } .sensearch-ai-icon { align-items: center; background: hsl(229 76% 66%); border-radius: 50%; color: hsl(0 0% 100%); display: flex; flex-shrink: 0; height: 32px; justify-content: center; width: 32px; } .sensearch-ai-icon svg { height: 16px; width: 16px; } .sensearch-ai-title { color: hsl(217 19% 27%); font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; } .sensearch-ai-badge-inline { align-items: center; background: hsl(229 76% 66%); border-radius: 4px; color: hsl(0 0% 100%); display: inline-flex; font-size: 9px; font-weight: 800; letter-spacing: 1px; padding: 2px 6px; } .sensearch-ai-content { color: hsl(215 14% 34%); font-size: 14px; line-height: 1.7; } .sensearch-ai-content p { margin-bottom: 8px; } .sensearch-ai-content p:last-child { margin-bottom: 0; } .sensearch-ai-link { border-bottom: 1px dashed hsl(229 76% 66%); color: hsl(229 76% 66%); font-weight: 600; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease; } .sensearch-ai-link:hover { border-bottom-color: hsl(270 37% 46%); color: hsl(270 37% 46%); text-decoration: none; } /* ========================================================================= CABEÇALHO DOS RESULTADOS ========================================================================= */ .sensearch-results-header { border-bottom: 1px solid hsl(220 13% 91%); margin-bottom: 24px; padding-bottom: 16px; } .sensearch-results-header h1 { color: hsl(215 28% 17%); font-size: 22px; font-weight: 700; margin: 0 0 4px; } .sensearch-meta { align-items: center; color: hsl(218 11% 65%); display: flex; font-size: 12px; gap: 4px; margin-top: 4px; } .sensearch-meta svg { flex-shrink: 0; } /* ========================================================================= SEM RESULTADOS ========================================================================= */ .sensearch-no-results { padding: 20px 0; } .sensearch-no-results-content { padding: 40px 20px; text-align: center; } .sensearch-no-results-content svg { margin-bottom: 16px; } .sensearch-no-results-content h2 { color: hsl(217 19% 27%); font-size: 20px; font-weight: 700; margin: 0 0 8px; } .sensearch-no-results-content p { color: hsl(0 0% 40%); font-size: 14px; margin: 0 0 20px; } .sensearch-suggestions { display: inline-block; list-style: none; margin: 0; padding: 0; text-align: left; } .sensearch-suggestions li { color: hsl(0 0% 40%); font-size: 13px; padding: 4px 0; padding-left: 20px; position: relative; } .sensearch-suggestions li::before { color: hsl(229 76% 66%); content: '\2022'; left: 6px; position: absolute; } /* ========================================================================= AUTOCOMPLETE / INSTANT SEARCH - DROPDOWN CONTAINER ========================================================================= */ .sensearch-autocomplete { background: hsl(0 0% 99%); border: 0; box-shadow: var(--sensearch-shadow-panel, 0 0.5rem 1.5rem rgb(149 157 165 / 20%)); overflow: hidden; overscroll-behavior: contain; position: fixed; scrollbar-width: thin; z-index: 99999; } /* Overlay do autocomplete (desktop): escurece a página atrás do painel. Criado lazily pelo JS (#sensearch-overlay), z-index ABAIXO do painel. */ #sensearch-overlay { background: var(--sensearch-overlay, rgb(17 24 39 / 45%)); display: none; inset: 0; position: fixed; z-index: 99998; } #sensearch-overlay.sensearch-overlay-active { display: block; } @media (width >= 768px) { :has(.sensearch-overlay-active) #header-search { position: relative; z-index: 999999; #search_mini_form { border: none; } } } /* ========================================================================= TELA NOVA DE BUSCA MOBILE (#sensearch-screen) — v2.7.49 Container próprio (NÃO o dropdown promovido a fullscreen). Markup estático nos templates; o JS (SoulmktSenSearchScreen) só alterna display. No desktop fica oculto (regra dedicada mais abaixo); vale para form.mini e form.modal. ========================================================================= */ /* Escondido por padrão (o JS aplica display:flex ao abrir). No desktop a regra com !important garante que nunca apareça, mesmo com display inline do JS. */ #sensearch-screen { display: none; } /* Foco visível consistente em elementos interativos do SenSearch */ .sensearch-autocomplete :focus-visible, .sensearch-ac-product-card:focus-visible, .sensearch-ac-suggest-item:focus-visible, .sensearch-ac-brand-tag:focus-visible { outline: 0.125rem solid var(--sensearch-focus-ring, rgb(17 24 39 / 35%)); outline-offset: 0.125rem; } /* ========================================================================= MODAL FULLSCREEN (form.modal.phtml) — reskin SÓ quando SenSearch ativo. Escopado em .c-search--sensearch: o fallback Amasty (.c-search sem o modificador) nunca é atingido por estas regras. ========================================================================= */ /* Header do modal: título "Busca" centralizado + X reposicionado à direita */ .sensearch-modal-header { display: none; padding-bottom: var(--sensearch-space-3); position: relative; text-align: center; } .sensearch-modal-title { color: var(--sensearch-fg, hsl(213 13% 14%)); font-size: 1rem; font-weight: 700; } @media (width <= 768px) { /* Especificidade 0,2,0 (.c-search.c-search--sensearch) para VENCER a cascata contra o