/* ===================================================================== K2Tec - camada visual moderna (estatica) Consome as variaveis geradas em dynamic.css (painel do tema). Carregada por ultimo no , sobrepoe o visual legado do Plaza. ===================================================================== */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ===================================================================== HEADER (header10) — visual limpo estilo AutoSpeed Estrutura: #top (barra escura) / header.scroll-fix > .header-middle (logo + telefone + busca + carrinho) / .header-bottom (departamentos + menu) ===================================================================== */ /* fundo do meio do header — configurável no painel (Cor de fundo do header) */ #header header.scroll-fix { background: var(--k2-header-bg); } #header .header-middle { background: var(--k2-header-bg); box-shadow: 0 2px 12px rgba(0, 0, 0, .06); padding: 6px 0; } /* compacta a altura do header (remove o excesso de espaço vertical legado) */ #header .header-middle .box-inner-inner { padding: 12px 0 !important; } /* barra superior — cor configurável no painel (Cor da barra superior) */ #top { background: var(--k2-topbar-bg) !important; } /* ícone de conta escuro sobre o branco (telefone segue oculto como no legado, pois é position:absolute e sobreporia o carrinho) */ #header .col-cart #top-links .dropdown-toggle { color: var(--heading-color); } /* busca: botão na cor primária (o legado fixa #000 pelo ID #btn-search-category; mesmo ID + ordem de carregamento posterior = vence; mantém o canto arredondado) */ #btn-search-category { background: var(--k2-color-primary); color: #fff; } #btn-search-category:hover { background: var(--k2-color-secondary); color: #fff; } /* nav inferior — cor configurável no painel (Cor do menu) */ .header-bottom { background: var(--k2-nav-bg) !important; } /* ===== Layout estilo GARIMPO — nav em pílula + rótulos de ícones ===== */ /* itens do menu com respiro; item ativo/hover vira "pílula" escura (secundária) */ .header-bottom .horizontal-menu .ul-top-items > .li-top-item > .a-top-link { border-radius: 30px !important; padding: 9px 20px !important; font-weight: 600 !important; transition: background .2s ease, color .2s ease !important; } .header-bottom .horizontal-menu .ul-top-items > .li-top-item.active > .a-top-link, .header-bottom .horizontal-menu .ul-top-items > .li-top-item:hover > .a-top-link { background: var(--k2-color-secondary) !important; color: #fff !important; } /* rótulos sob os ícones de comparar/favoritos (estilo GARIMPO). O rótulo é ABSOLUTO (fora do fluxo) para o ter a altura só do ícone — assim os ícones de comparar/favoritos/carrinho alinham pelo mesmo centro vertical. */ .col-cart .compare-header, .col-cart #wishlist-total { display: inline-flex !important; position: relative; align-items: center; justify-content: center; line-height: 1; text-decoration: none; } .col-cart .compare-header::after, .col-cart #wishlist-total::after { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-size: 11px; white-space: nowrap; color: var(--k2-header-text); } .col-cart .compare-header::after { content: "Comparar"; } .col-cart #wishlist-total::after { content: "Favoritos"; } /* botão de busca circular */ #sp-btn-search { right: 6px !important; } #btn-search-category { width: 46px !important; height: 46px !important; border-radius: 50% !important; } /* banner/home: mesmo respiro do sidebar (.common-home .vertical-menu usa --rowspace) */ .common-home #content .slider-container, .common-home #content .slideshow, .common-home #content .swiper-viewport { margin-top: var(--rowspace); } /* ===== Sidebar de departamentos — card escuro estilo GARIMPO ===== */ /* cabeçalho "TODOS OS DEPARTAMENTOS" */ .vertical-menu .pt-menu-bar { background: var(--k2-sidebar-bg) !important; border-radius: var(--k2-card-radius) var(--k2-card-radius) 0 0; } /* lista (dropdown de categorias) em fundo escuro (força o fundo no container e nos itens — o legado pinta branco via ID) */ .vertical-menu, .vertical-menu .ul-top-items, .vertical-menu .ul-top-items > .li-top-item { background: var(--k2-sidebar-bg) !important; } .vertical-menu .ul-top-items { border: 0 !important; border-radius: 0 0 var(--k2-card-radius) var(--k2-card-radius); overflow: hidden; box-shadow: 0 12px 30px rgba(0, 0, 0, .12); } .vertical-menu .ul-top-items > .li-top-item { border: 0 !important; } .vertical-menu .ul-top-items > .li-top-item > .a-top-link { background: transparent !important; } /* layout com ZONA DE ÍCONE reservada: ícone e chevron absolutos, texto com padding fixo — todos os itens alinham, com ou sem ícone */ .vertical-menu .ul-top-items > .li-top-item > .a-top-link { display: block !important; position: relative !important; color: #fff !important; padding: 12px 40px 12px 62px !important; border-bottom: 1px solid rgba(255, 255, 255, .07) !important; font-weight: 500; min-height: 52px; line-height: 26px; } .vertical-menu .ul-top-items > .li-top-item > .a-top-link > span { position: static !important; } .vertical-menu .ul-top-items > .li-top-item:hover > .a-top-link, .vertical-menu .ul-top-items > .li-top-item.active > .a-top-link { background: rgba(255, 255, 255, .06) !important; color: var(--k2-color-primary) !important; } /* ícone (imagem) da categoria — num chip claro arredondado (robusto a qualquer fundo do PNG: transparente OU branco fica consistente) */ .vertical-menu .ul-top-items .top-icon { position: absolute !important; left: 16px; top: 50%; transform: translateY(-50%); width: 36px !important; height: 36px !important; margin: 0 !important; float: none !important; background: #fff; border-radius: 8px; padding: 5px; object-fit: contain; } /* chevron à direita, na cor primária */ .vertical-menu .ul-top-items .icon-more-right { position: absolute !important; right: 18px; top: 50%; transform: translateY(-50%); margin: 0 !important; color: var(--k2-color-primary); font-size: 16px; } /* ---------- Carrinho do header: ícone + selo de quantidade + total ---------- O JS (common.js) troca o innerHTML do botão no add-to-cart, então o ícone vai no ::before (sobrevive); selo e total são re-renderizados a cada page load. */ #cart > button.k2-cart-btn { position: relative; display: inline-flex; align-items: center; gap: 10px; width: auto; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 4px; } #cart > button::before { content: "\f07a"; /* FontAwesome shopping-cart */ font-family: "FontAwesome"; font-size: 24px; line-height: 1; color: var(--k2-color-primary); vertical-align: middle; } #cart .k2-cart-count { position: absolute; top: -7px; left: 16px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--k2-color-primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; } #cart #cart-total { font-weight: 700; color: var(--k2-header-text); font-size: 14px; line-height: 1.25; text-align: left; white-space: normal; max-width: 120px; } /* alinha ícone + texto do carrinho ao centro vertical */ #cart > button.k2-cart-btn { align-items: center; } /* ícones de compare e wishlist: alinhados, escuros, laranja no hover */ .col-cart > .inner { align-items: center; gap: 22px; } #wishlist-total, .compare-header { color: var(--k2-color-primary); line-height: 1; margin-right: 20px; display: inline-flex; align-items: center; } /* hover escurece (feedback), igual nos três ícones */ #wishlist-total:hover, .compare-header:hover { color: var(--k2-color-secondary); } #cart > button:hover::before { color: var(--k2-color-secondary); } /* #cart é .btn-block (width:100%) — no flex isso empurra/sobrepõe os ícones. Trava em largura automática e dá um respiro antes do carrinho. */ #cart { width: auto; flex: 0 0 auto; margin-left: 6px; } /* Evita sobreposição busca x carrinho com totais grandes: ancora a busca à esquerda E à direita (largura automática), reservando um espaço fixo à direita pro carrinho. Vale na faixa desktop (>=1200px). */ @media (min-width: 1200px) { #header .col-search { width: auto; left: 240px; right: 390px; } #header .col-cart { max-width: 380px; } #header .col-cart > .inner { justify-content: flex-end; flex-wrap: nowrap; } } /* ---------- Largura do container (Layout > Largura do container) ---------- Mantem largura em px (swipers calculam slides pela largura da .container) e nunca ultrapassa a viewport. */ @media (min-width: 1200px) { .container { width: var(--k2-container-width); max-width: 100%; padding-left: 15px; padding-right: 15px; } } /* ---------- Botoes (Layout > Arredondamento dos botoes) ---------- */ button, .btn, .btn-primary, .btn-default, input[type="submit"], input[type="button"] { border-radius: var(--k2-button-radius); transition: background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease; } .btn-primary:hover, button:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .12); } /* ---------- Cards de produto (Layout > Arredondamento dos cards) ---------- */ .product-thumb { border-radius: var(--k2-card-radius); overflow: hidden; transition: box-shadow .25s ease, transform .25s ease; } .product-thumb:hover { box-shadow: 0 12px 30px rgba(0, 0, 0, .10); transform: translateY(-4px); } .product-thumb .image, .product-thumb .image img { overflow: hidden; } .product-thumb .image img { transition: transform .45s ease; } .product-thumb:hover .image img { transform: scale(1.05); } /* ---------- Preco em destaque com a cor primaria ---------- */ .product-thumb .price-new, .product-info .price-new, .product-info .price .price-new { color: var(--k2-color-primary); font-weight: 600; } /* ---------- Banner / slideshow ---------- O ptslider usa nivoSlider, que anima por "fatias" clonando a imagem e define a altura inline pela imagem do slide. Forçar height/object-fit aqui quebra a transição — então a altura do banner é controlada pela dimensão da imagem do slide (cadastrada no admin do slider), não por CSS. A var --k2-banner-height segue valendo para slideshow nativo/swiper. */ .swiper-viewport .swiper-slide img, .single-banner img { width: 100%; height: var(--k2-banner-height); object-fit: cover; } /* ---------- Inputs com cantos consistentes ---------- */ .form-control, .input-group .form-control { border-radius: var(--k2-button-radius); } /* ===================================================================== MODERNIZAÇÃO Fase 2 — referência AutoSpeed (títulos + cards) ===================================================================== */ /* ---------- Títulos de seção (.block-title) ---------- */ .block-title { text-align: center; margin-bottom: 34px; padding-top: 6px; } .block-title .title { margin-bottom: 8px; } .block-title .title span { display: inline-block; position: relative; font-family: var(--heading-font); font-size: 26px; font-weight: 700; color: var(--heading-color); text-transform: capitalize; padding-bottom: 14px; letter-spacing: .2px; } .block-title .title span::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 60px; height: 3px; border-radius: 3px; background: var(--k2-color-primary); } /* subtítulo (module_des) — texto livre dentro do block-title */ .block-title > p, .block-title .module-des { color: #9aa0a6; font-style: italic; font-size: 14px; margin: 0; } /* abas (multi_tabs) com visual mais leve */ .tabs-product .nav-tabs { border: 0; justify-content: center; display: flex; gap: 8px; } .tabs-product .nav-tabs > li > a { border: 0; border-radius: var(--k2-button-radius); color: var(--main-color); font-weight: 600; text-transform: uppercase; font-size: 13px; } .tabs-product .nav-tabs > li.active > a, .tabs-product .nav-tabs > li > a:hover { color: var(--k2-color-primary); background: transparent; } /* ---------- Card de produto ---------- */ .product-thumb { background: #fff; border: 1px solid #ececec; border-radius: var(--k2-card-radius); overflow: hidden; transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; } .product-thumb:hover { border-color: transparent; box-shadow: 0 14px 34px rgba(0, 0, 0, .10); transform: translateY(-4px); } .product-thumb .product-item { position: relative; } .product-thumb .image { position: relative; overflow: hidden; background: #fff; height: 240px; display: flex; align-items: center; justify-content: center; padding: 16px; } .product-thumb .image a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .product-thumb .image img { width: auto !important; height: auto !important; max-width: 100%; max-height: 100%; object-fit: contain; transition: transform .45s ease; } .product-thumb:hover .image img { transform: scale(1.06); } /* selos SALE / NEW reposicionados sobre a imagem */ .product-thumb .box-label { position: absolute; top: 12px; left: 12px; z-index: 3; } .product-thumb .box-label .pro-label { display: inline-block; padding: 3px 10px; border-radius: 40px; font-size: 11px; font-weight: 700; line-height: 1.6; color: #fff; text-transform: uppercase; } .product-thumb .box-label .pro-label.sale { background: var(--k2-color-accent); } .product-thumb .box-label .pro-label.new { background: var(--k2-color-primary); } /* legenda */ .product-thumb .caption { padding: 16px 16px 18px; text-align: center; } .product-thumb .caption .manufacture-product, .product-thumb .caption .manufacture-product a { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; color: #a0a4a8; margin-bottom: 6px; } .product-thumb .caption h4 { margin: 0 0 8px; min-height: 40px; line-height: 1.4; } .product-thumb .caption h4 a { font-size: 14px; font-weight: 600; color: var(--heading-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .product-thumb .caption h4 a:hover { color: var(--k2-color-primary); } .product-thumb .caption .rating { margin-bottom: 8px; } .product-thumb .rating .icon-rating-x { color: var(--k2-color-accent); } .product-thumb .rating .icon-rating-o { color: #dcdcdc; } .product-thumb .caption .price { font-size: 18px; font-weight: 700; color: var(--k2-color-primary); margin: 0 0 12px; } .product-thumb .caption .price .price-new { color: var(--k2-color-primary); } .product-thumb .caption .price .price-old { color: #b6b6b6; font-size: 14px; font-weight: 400; text-decoration: line-through; margin-left: 6px; } /* botão Comprar */ .product-thumb .button-cart { width: 100%; border: 0; border-radius: var(--k2-button-radius); background: var(--k2-color-primary); color: #fff; font-weight: 600; text-transform: uppercase; font-size: 13px; padding: 10px 14px; transition: background-color .2s ease, box-shadow .2s ease; } .product-thumb .button-cart:hover { background: var(--k2-color-secondary); box-shadow: 0 6px 16px rgba(0, 0, 0, .15); } /* Nota: o restyle dos botões flutuantes (wishlist/compare/quickview) fica para a próxima iteração, depois de confirmar como o legado renderiza os ícones. */ /* ===================================================================== PÁGINA DE CATEGORIA — cards em grade e lista (especificidade .product-layout .product-thumb vence o CSS legado) ===================================================================== */ /* cor de preço e botão herdam a marca tambem na categoria */ .product-layout .product-thumb .caption .price, .product-layout .product-thumb .caption .price .price-new { color: var(--k2-color-primary); } .product-layout .product-thumb .button-cart { background: var(--k2-color-primary); color: #fff; border: 0; border-radius: var(--k2-button-radius); text-transform: uppercase; font-weight: 600; } .product-layout .product-thumb .button-cart:hover { background: var(--k2-color-secondary); } /* ---------- Vista em LISTA: card horizontal limpo ---------- */ .product-list.product-layout { margin-bottom: 20px; } .product-list .product-thumb .product-item { display: flex; align-items: center; gap: 24px; } .product-list .product-thumb .image { flex: 0 0 240px; width: 240px; height: 220px; } .product-list .product-thumb .caption { flex: 1 1 auto; text-align: left; padding: 18px 24px 18px 0; } .product-list .product-thumb .caption h4 { min-height: 0; font-size: 17px; } .product-list .product-thumb .caption h4 a { -webkit-line-clamp: unset; font-size: 17px; } .product-list .product-thumb .caption .price { font-size: 22px; } /* botão não ocupa a largura toda na lista */ .product-list .product-thumb .button-cart { width: auto; min-width: 200px; padding: 11px 28px; } /* na lista os selos saem de cima da imagem para não cortar */ .product-list .product-thumb .box-label { position: static; margin-bottom: 8px; } @media (max-width: 767px) { .product-list .product-thumb .product-item { flex-direction: column; align-items: stretch; } .product-list .product-thumb .image { flex-basis: auto; width: 100%; } .product-list .product-thumb .caption { padding: 16px; } .product-list .product-thumb .button-cart { width: 100%; } } /* ===================================================================== PÁGINA DE PRODUTO — galeria de imagens (o tamanho da imagem principal vem da config "Foto principal do produto") ===================================================================== */ /* IMPORTANTE: escopado a #product-product. O quickview também usa .product-image-details/.main-image, mas com CloudZoom (que precisa das dimensões inline da âncora). Sem o escopo, o width/height:auto abaixo quebrava o CloudZoom na injeção do quickview e o modal abria vazio. */ /* caixa da imagem principal — clique abre lightbox (cursor de zoom) */ #product-product .product-image-details .product-zoom-image { border: 1px solid #ececec; border-radius: var(--k2-card-radius); padding: 20px; text-align: center; background: #fff; } #product-product .product-image-details .main-image { display: inline-block; width: auto !important; height: auto !important; max-width: 100%; cursor: zoom-in; } #product-product .product-image-details .main-image img { max-width: 100%; height: auto; } #product-product .product-image-details .additional-container { margin-top: 16px; } /* miniaturas: tamanho uniforme, sem distorção, com estado ativo na cor primária */ #product-product .product-image-details .additional-images .swiper-slide { height: auto; } #product-product .product-image-details .additional-images .sub-image { display: block; width: 100%; border: 1px solid #ececec; border-radius: var(--k2-button-radius); overflow: hidden; background: #fff; cursor: pointer; } #product-product .product-image-details .additional-images .sub-image img { width: 100%; height: 90px; object-fit: contain; padding: 6px; } #product-product .product-image-details .additional-images .sub-image.active, #product-product .product-image-details .additional-images .sub-image:hover { border-color: var(--k2-color-primary); } /* ===================================================================== PÁGINA DE PRODUTO — coluna de informações + abas ===================================================================== */ .product-info-details h1 { font-size: 26px; font-weight: 700; color: var(--heading-color); line-height: 1.3; margin: 0 0 12px; } /* preço */ .product-info-details .price { font-size: 30px; font-weight: 700; color: var(--k2-color-primary); margin: 0 0 18px; padding-bottom: 18px; border-bottom: 1px solid #ececec; } .product-info-details .price .price-new { color: var(--k2-color-primary); } .product-info-details .price .price-old { color: #b6b6b6; font-size: 20px; font-weight: 400; text-decoration: line-through; margin-left: 8px; } .product-info-details .price .price-tax { display: block; font-size: 13px; font-weight: 400; color: #999; margin-top: 4px; } /* atributos: marca / código / disponibilidade */ .product-info-details > ul.list-unstyled { margin: 0 0 22px; padding: 0; } .product-info-details > ul.list-unstyled > li { padding: 6px 0; color: #888; font-size: 14px; } .product-info-details > ul.list-unstyled > li span, .product-info-details > ul.list-unstyled > li a { color: var(--heading-color); font-weight: 600; } /* bloco de opções */ #product h3 { font-size: 18px; font-weight: 700; color: var(--heading-color); margin: 4px 0 16px; } #product .form-group label.control-label { font-weight: 600; color: var(--heading-color); } /* quantidade + botão comprar */ #product #input-quantity { height: 48px; text-align: center; border-radius: var(--k2-button-radius); } #button-cart { background: var(--k2-color-primary); border-color: var(--k2-color-primary); color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; border-radius: var(--k2-button-radius); padding: 13px 26px; } #button-cart:hover { background: var(--k2-color-secondary); border-color: var(--k2-color-secondary); color: #fff; } /* lista de desejos / comparar como link discreto */ .product-info-details .btn-wishlist, .product-info-details .btn-compare { background: transparent; border: 0; box-shadow: none; color: #777; padding-left: 0; } .product-info-details .btn-wishlist:hover, .product-info-details .btn-compare:hover { color: var(--k2-color-primary); background: transparent; } /* ---------- Abas (Descrição / Especificação / Reviews) ---------- */ .product-info-details-more .nav-tabs { border-bottom: 2px solid #ececec; margin-bottom: 0; } .product-info-details-more .nav-tabs > li > a { border: 0; margin: 0; border-radius: 0; background: transparent; color: #888; font-weight: 600; text-transform: uppercase; font-size: 14px; padding: 14px 20px; } .product-info-details-more .nav-tabs > li.active > a, .product-info-details-more .nav-tabs > li.active > a:hover, .product-info-details-more .nav-tabs > li.active > a:focus, .product-info-details-more .nav-tabs > li > a:hover { color: var(--k2-color-primary); background: transparent; border: 0; border-bottom: 2px solid var(--k2-color-primary); margin-bottom: -2px; } .product-info-details-more .tab-content { border: 1px solid #ececec; border-top: 0; padding: 24px; border-radius: 0 0 var(--k2-card-radius) var(--k2-card-radius); } /* ===================================================================== FEATURE ROW (módulo HTML) — estilo GARIMPO Cole o HTML com a classe .k2-features no módulo HTML do admin. ===================================================================== */ .k2-features { display: flex; flex-wrap: wrap; align-items: stretch; background: #fff; border-radius: var(--k2-card-radius); box-shadow: 0 6px 22px rgba(0, 0, 0, .05); margin: 24px 0; overflow: hidden; } .k2-features .k2-feature { flex: 1 1 25%; display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-right: 1px solid #eef0f2; } .k2-features .k2-feature:last-child { border-right: 0; } .k2-features .k2-feature > i { font-size: 30px; line-height: 1; color: var(--k2-color-primary); flex: 0 0 auto; } .k2-features .k2-feature-text strong { display: block; color: var(--heading-color); font-size: 15px; font-weight: 700; line-height: 1.3; } .k2-features .k2-feature-text span { color: #8a9097; font-size: 13px; } @media (max-width: 991px) { .k2-features .k2-feature { flex-basis: 50%; border-bottom: 1px solid #eef0f2; } .k2-features .k2-feature:nth-child(2) { border-right: 0; } } @media (max-width: 575px) { .k2-features .k2-feature { flex-basis: 100%; border-right: 0; } } /* ===================================================================== CATEGORIAS EM DESTAQUE (ptfeaturedcate) — cards escuros estilo GARIMPO ===================================================================== */ /* zera o estilo de card branco herdado de .product-thumb nesses slides */ .special-categories-module .swiper-slide.product-thumb { background: transparent !important; border: 0 !important; box-shadow: none !important; transform: none !important; padding: 8px; } .special-categories-module .category-content { position: relative; background: var(--k2-featured-bg); border-radius: var(--k2-card-radius); overflow: hidden; padding: 22px; min-height: 210px; display: flex; flex-direction: column; justify-content: flex-end; transition: transform .25s ease, box-shadow .25s ease; } .special-categories-module .category-content:hover { transform: translateY(-5px); box-shadow: 0 16px 36px rgba(0, 0, 0, .22); } .special-categories-module .category-content:hover .image img { transform: scale(1.06); } /* imagem ocupa o card inteiro como fundo (cobre o box branco herdado do card de produto: background/height/flex de .product-thumb .image) */ .special-categories-module .category-content .image { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; background: transparent !important; display: block !important; padding: 0 !important; margin: 0 !important; z-index: 0; } .special-categories-module .category-content .image img { width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover; object-position: center; transition: transform .35s ease; } /* gradiente escuro por cima da imagem garante leitura do texto independente do fundo da foto (branco ou escuro) */ .special-categories-module .category-content::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .78) 38%, rgba(0, 0, 0, .30) 70%, rgba(0, 0, 0, .10) 100%); } /* textos por cima */ .special-categories-module .category-content .caption { position: relative; z-index: 2; padding: 0; text-align: left; } .special-categories-module .category-content .caption .name a { color: #fff; font-size: 18px; font-weight: 700; } .special-categories-module .category-content .caption .name a:hover { color: var(--k2-color-primary); } .special-categories-module .category-content .caption .total-items { color: rgba(255, 255, 255, .45); font-size: 12px; margin: 4px 0 0; } /* link "COMPRE AGORA" com chevron em círculo laranja */ .special-categories-module .category-content .caption .view-more { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; color: var(--k2-color-primary); font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .3px; } .special-categories-module .category-content .caption .view-more::after { content: "\f105"; font-family: "FontAwesome"; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--k2-color-primary); color: #fff; font-size: 13px; } /* ===================================================================== FOOTER — escuro estilo GARIMPO (segue --k2-color-secondary do painel) ===================================================================== */ footer { background: var(--k2-footer-bg); color: rgba(255, 255, 255, .7); margin-top: 50px; } footer .footer-links { padding: 48px 0 40px; border-top: 3px solid var(--k2-color-primary); } /* alinha as colunas pelo topo e elimina o vão vertical sobrando */ footer .footer-links .inner > .row { display: flex; flex-wrap: wrap; align-items: flex-start; } /* títulos das colunas */ footer .footer-links .title { color: #fff; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin: 0 0 18px; padding-bottom: 12px; position: relative; } footer .footer-links .title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; background: var(--k2-color-primary); } /* no desktop o dropdown do footer é só conteúdo estático */ footer .footer-links .dropdown-menu.footer-content { position: static; display: block; float: none; width: auto; min-width: 0; background: transparent; border: 0; box-shadow: none; margin: 0; padding: 0; } footer .footer-links .title i { display: none; } footer .footer-content ul.list-unstyled { margin: 0; } footer .footer-content li { margin-bottom: 9px; } footer .footer-content a, footer .footer-content p { color: rgba(255, 255, 255, .7); font-size: 13.5px; transition: color .2s ease, padding-left .2s ease; } footer .footer-content a:hover { color: var(--k2-color-primary); padding-left: 4px; text-decoration: none; } /* ---- newsletter (módulo ptnewsletter: .newsletter-content .content) ---- */ footer .newsletter-content .content { display: flex; align-items: stretch; width: 100%; max-width: 380px; margin-top: 8px; padding: 0; background: #fff; border: 0; border-radius: 6px; overflow: hidden; } footer .newsletter-content .content .newsletter_email, footer .newsletter-content .content input[type="text"] { height: 46px; flex: 1 1 auto; min-width: 0; margin: 0; border: 0; border-radius: 0; padding: 0 14px; font-size: 13px; color: #333; background: #fff; box-shadow: none; } footer .newsletter-content .content .btn, footer .newsletter-content .content button { height: 46px; flex: 0 0 auto; margin: 0; border: 0; border-radius: 0; padding: 0 22px; background: var(--k2-color-primary); color: #fff; font-weight: 700; font-size: 13px; line-height: 46px; white-space: nowrap; text-transform: none; } footer .newsletter-content .content .btn:hover, footer .newsletter-content .content button:hover { background: #fff; color: var(--k2-color-secondary); } footer .newsletter-content .newsletter-notification { margin-top: 8px; font-size: 12px; } /* selos de segurança/pagamento abaixo da newsletter */ footer .footer-content img { max-width: 100%; height: auto; } /* esconde o "underline laranja" de título vazio (newsletter sem texto de título) */ footer .footer-links .title:empty { display: none; } /* barra de copyright */ footer .footer-copyright { background: rgba(0, 0, 0, .35); padding: 18px 0; font-size: 12.5px; color: rgba(255, 255, 255, .55); } footer .footer-copyright a { color: rgba(255, 255, 255, .8); } footer .footer-copyright a:hover { color: var(--k2-color-primary); } footer .footer-copyright p { margin: 0; line-height: 1.7; } /* mobile: mantém o accordion (dropdown-toggle) do tema, só ajusta a cor */ @media (max-width: 767px) { footer .footer-links .title i { display: inline-block; float: right; color: rgba(255, 255, 255, .6); } footer .footer-links .btn-group { display: block; width: 100%; border-bottom: 1px solid rgba(255, 255, 255, .08); padding-bottom: 14px; margin-bottom: 14px; } } /* ===================================================================== CARROSSÉIS DE PRODUTO (ptproducts / relacionados) — setas e bullets ===================================================================== */ /* dá respiro lateral pras setas não cobrirem os cards */ .products-container .swiper-viewport, .product-related .swiper-viewport { position: relative; padding: 0 6px; } /* ---- cards do carrossel com mesma altura e botão alinhado no bottom ---- Swiper 3.4.2 deixa o .swiper-wrapper como flex com align-items:flex-start (slides não esticam). Forçamos stretch e propagamos a altura até o botão. */ .products-container .swiper-wrapper, .product-related .swiper-wrapper { align-items: stretch !important; } .products-container .swiper-slide, .product-related .swiper-slide { height: auto !important; } .products-container .swiper-slide.product-thumb, .product-related .swiper-slide.product-thumb { display: flex; flex-direction: column; } .products-container .swiper-slide.product-thumb > .grid-style, .products-container .grid-style > .product-item, .products-container .product-item > .caption, .products-container .caption > .inner, .product-related .swiper-slide.product-thumb > .grid-style, .product-related .grid-style > .product-item, .product-related .product-item > .caption, .product-related .caption > .inner { display: flex; flex-direction: column; flex: 1 1 auto; } /* nome com ~2 linhas reservadas pra estabilizar a base */ .products-container .caption h4, .product-related .caption h4 { min-height: 2.6em; } /* o último bloco (botão COMPRAR) cola no fundo do card */ .products-container .caption > .inner > div:last-child, .product-related .caption > .inner > div:last-child { margin-top: auto; } /* ---- setas: mantém o glifo nativo (Ionicons via :before) e a posição nativa (.nav-style-2 com float). Só removo a seta duplicada que havia criado (::after) e recoloro no padrão do tema. ---- */ .products-container .swiper-pager .swiper-button-next::after, .products-container .swiper-pager .swiper-button-prev::after, .product-related .swiper-pager .swiper-button-next::after, .product-related .swiper-pager .swiper-button-prev::after { content: none !important; } .products-container .swiper-pager .swiper-button-next, .products-container .swiper-pager .swiper-button-prev, .product-related .swiper-pager .swiper-button-next, .product-related .swiper-pager .swiper-button-prev { background: #fff; border: 1px solid #e4e4e4; color: var(--k2-color-secondary); box-shadow: 0 4px 14px rgba(0, 0, 0, .10); } .products-container .swiper-pager .swiper-button-next:hover, .products-container .swiper-pager .swiper-button-prev:hover, .product-related .swiper-pager .swiper-button-next:hover, .product-related .swiper-pager .swiper-button-prev:hover { background: var(--k2-color-primary); border-color: var(--k2-color-primary); color: #fff; } /* bullets de paginação */ .products-container .swiper-pagination, .product-related .swiper-pagination { text-align: center; margin-top: 20px; } .products-container .swiper-pagination-bullet, .product-related .swiper-pagination-bullet { width: 9px; height: 9px; background: #cfd4d9; opacity: 1; margin: 0 4px; transition: background .2s ease, width .2s ease; } .products-container .swiper-pagination-bullet-active, .product-related .swiper-pagination-bullet-active { background: var(--k2-color-primary); width: 22px; border-radius: 5px; } /* ===================================================================== PÁGINA DE MARCAS (manufacturer_list) — índice A-Z + grade de cards ===================================================================== */ .manufacturer-list { padding-top: 18px; padding-bottom: 40px; } .manufacturer-list .manufacturer-title { font-family: var(--heading-font); font-size: 28px; font-weight: 700; color: var(--heading-color); margin: 0 0 22px; padding-bottom: 14px; position: relative; } .manufacturer-list .manufacturer-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; border-radius: 3px; background: var(--k2-color-primary); } /* índice A-Z (pílulas sticky no topo) */ .manufacturer-list .manufacturer-index { display: flex; flex-wrap: wrap; gap: 8px; position: sticky; top: 0; z-index: 6; background: var(--k2-color-bg); padding: 12px 0 16px; margin-bottom: 8px; } .manufacturer-list .index-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border-radius: 999px; background: #fff; border: 1px solid #e4e7eb; color: var(--heading-color); font-weight: 700; font-size: 14px; transition: background .2s ease, color .2s ease, border-color .2s ease; } .manufacturer-list .index-pill:hover { background: var(--k2-color-primary); border-color: var(--k2-color-primary); color: #fff; text-decoration: none; } /* grupos por letra */ .manufacturer-list .manufacturer-group { margin-bottom: 30px; scroll-margin-top: 80px; } .manufacturer-list .group-letter { font-size: 18px; font-weight: 700; color: var(--k2-color-primary); border-bottom: 1px solid #e8eaed; padding-bottom: 8px; margin-bottom: 16px; } /* grade de cards de marca */ .manufacturer-list .brand-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; } .manufacturer-list .brand-card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid #ececec; border-radius: var(--k2-card-radius); color: var(--heading-color); transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; } .manufacturer-list .brand-card:hover { border-color: transparent; box-shadow: 0 12px 28px rgba(0, 0, 0, .10); transform: translateY(-3px); text-decoration: none; } .manufacturer-list .brand-initial { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: var(--k2-color-secondary); color: #fff; font-weight: 700; font-size: 17px; } .manufacturer-list .brand-card:hover .brand-initial { background: var(--k2-color-primary); } .manufacturer-list .brand-name { font-size: 14px; font-weight: 600; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 575px) { .manufacturer-list .brand-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } } /* ===================================================================== GRADES DE PRODUTO EM PÁGINA (categoria, marca, busca) — cards de mesma altura e botão COMPRAR alinhado no bottom. Só na visão GRID (a visão lista mantém o layout horizontal próprio). ===================================================================== */ #product-category #content > .row, #product-manufacturer #content > .row, #product-search #content > .row { display: flex; flex-wrap: wrap; } #product-category #content > .row > .product-grid, #product-manufacturer #content > .row > .product-grid, #product-search #content > .row > .product-grid { display: flex; } #product-category #content > .row > .product-grid > .product-thumb, #product-manufacturer #content > .row > .product-grid > .product-thumb, #product-search #content > .row > .product-grid > .product-thumb { display: flex; flex-direction: column; width: 100%; } #product-category .product-grid .product-thumb > .product-item, #product-category .product-grid .product-thumb .caption, #product-category .product-grid .product-thumb .caption > .inner, #product-manufacturer .product-grid .product-thumb > .product-item, #product-manufacturer .product-grid .product-thumb .caption, #product-manufacturer .product-grid .product-thumb .caption > .inner, #product-search .product-grid .product-thumb > .product-item, #product-search .product-grid .product-thumb .caption, #product-search .product-grid .product-thumb .caption > .inner { display: flex; flex-direction: column; flex: 1 1 auto; } /* nome com ~2 linhas reservadas pra estabilizar a base */ #product-category .product-grid .product-thumb .caption h4, #product-manufacturer .product-grid .product-thumb .caption h4, #product-search .product-grid .product-thumb .caption h4 { min-height: 2.6em; } /* botão COMPRAR cola no fundo do card */ #product-category .product-grid .product-thumb .caption .button-cart, #product-manufacturer .product-grid .product-thumb .caption .button-cart, #product-search .product-grid .product-thumb .caption .button-cart { margin-top: auto; } /* ===================================================================== CARRINHO (checkout/cart) — markup default estilizado via CSS (isolado) ===================================================================== */ #checkout-cart { padding-top: 18px; padding-bottom: 44px; } #checkout-cart > h1, #checkout-cart #content > h1 { font-family: var(--heading-font); font-size: 26px; font-weight: 700; color: var(--heading-color); margin: 0 0 22px; padding-bottom: 14px; position: relative; } #checkout-cart #content > h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; border-radius: 3px; background: var(--k2-color-primary); } /* tabela de itens como card limpo */ #checkout-cart .table-responsive { background: #fff; border: 1px solid #ececec; border-radius: var(--k2-card-radius); overflow: hidden; } #checkout-cart .table.table-bordered { margin: 0; border: 0; } #checkout-cart .table.table-bordered > thead > tr > td { background: #f7f8fa; border: 0; border-bottom: 1px solid #ececec; padding: 14px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: #6b7280; } #checkout-cart .table.table-bordered > tbody > tr > td { border: 0; border-bottom: 1px solid #f0f1f3; padding: 16px; vertical-align: middle; } #checkout-cart .table.table-bordered > tbody > tr:last-child > td { border-bottom: 0; } #checkout-cart .table img.img-thumbnail { width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 6px; } #checkout-cart .table td a { color: var(--heading-color); font-weight: 600; } #checkout-cart .table td a:hover { color: var(--k2-color-primary); } #checkout-cart .table td small { color: #8a9099; font-weight: 400; } /* quantidade + ações (atualizar/remover) — só na tabela de itens */ #checkout-cart .table .input-group { max-width: 170px; } #checkout-cart .input-group .form-control { height: 40px; border: 1px solid #dfe3e8; border-radius: 6px 0 0 6px; box-shadow: none; } #checkout-cart .table .input-group .form-control { text-align: center; } #checkout-cart .input-group-btn .btn { height: 40px; border: 0; padding: 0 12px; } #checkout-cart .input-group-btn .btn.btn-primary { background: var(--k2-color-primary); color: #fff; } #checkout-cart .input-group-btn .btn.btn-primary:hover { background: var(--k2-color-secondary); } #checkout-cart .input-group-btn .btn.btn-danger { background: #fff; color: #d64545; border: 1px solid #f0d2d2; border-radius: 0 6px 6px 0; } #checkout-cart .input-group-btn .btn.btn-danger:hover { background: #d64545; color: #fff; border-color: #d64545; } /* módulos (cupom, frete, vale) em painéis */ #checkout-cart h2 { font-size: 18px; font-weight: 700; color: var(--heading-color); margin-top: 30px; } #checkout-cart .panel-group .panel { border: 1px solid #ececec; border-radius: var(--k2-card-radius); box-shadow: none; margin-bottom: 12px; } #checkout-cart .panel-group .panel-heading { background: #f7f8fa; border-radius: var(--k2-card-radius) var(--k2-card-radius) 0 0; padding: 12px 16px; } #checkout-cart .panel-group .panel-title { font-size: 14px; font-weight: 700; color: var(--heading-color); } /* inputs dos módulos (cupom, frete, vale) com largura confortável */ #checkout-cart .panel-body .form-control { height: 42px; border: 1px solid #dfe3e8; border-radius: 6px; box-shadow: none; } #checkout-cart .panel-body .input-group { max-width: 420px; } #checkout-cart .panel-body .input-group .form-control { border-radius: 6px 0 0 6px; } #checkout-cart .panel-body .input-group-btn .btn { height: 42px; border-radius: 0 6px 6px 0; white-space: nowrap; } #checkout-cart .panel-group .btn-primary { background: var(--k2-color-primary); border-color: var(--k2-color-primary); color: #fff; } #checkout-cart .panel-group .btn-primary:hover { background: var(--k2-color-secondary); border-color: var(--k2-color-secondary); } /* tabela de totais */ #checkout-cart .col-sm-4 .table { background: #fff; border: 1px solid #ececec; border-radius: var(--k2-card-radius); overflow: hidden; } #checkout-cart .col-sm-4 .table > tbody > tr > td { border: 0; border-bottom: 1px solid #f0f1f3; padding: 12px 16px; color: var(--main-color); } #checkout-cart .col-sm-4 .table > tbody > tr:last-child > td { border-bottom: 0; font-size: 17px; color: var(--heading-color); } #checkout-cart .col-sm-4 .table > tbody > tr:last-child > td:last-child { color: var(--k2-color-primary); font-weight: 700; } /* botões de ação (continuar comprando / finalizar) */ #checkout-cart .buttons .btn { height: 48px; line-height: 1; padding: 0 26px; border-radius: var(--k2-button-radius); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .3px; display: inline-flex; align-items: center; } #checkout-cart .buttons .btn-default { background: #fff; border: 1px solid #d5d9de; color: var(--heading-color); } #checkout-cart .buttons .btn-default:hover { border-color: var(--k2-color-secondary); color: var(--k2-color-secondary); } #checkout-cart .buttons .btn-primary { background: var(--k2-color-primary); border: 1px solid var(--k2-color-primary); color: #fff; } #checkout-cart .buttons .btn-primary:hover { background: var(--k2-color-secondary); border-color: var(--k2-color-secondary); } /* alertas */ #checkout-cart .alert { border: 0; border-radius: var(--k2-card-radius); } /* ===================================================================== CHECKOUT (checkout/checkout) — passos em painéis, markup default via CSS ===================================================================== */ #checkout-checkout { padding-top: 18px; padding-bottom: 44px; } #checkout-checkout > #content > h1, #checkout-checkout #content > h1 { font-family: var(--heading-font); font-size: 26px; font-weight: 700; color: var(--heading-color); margin: 0 0 22px; padding-bottom: 14px; position: relative; } #checkout-checkout #content > h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; border-radius: 3px; background: var(--k2-color-primary); } /* painéis de cada passo */ #checkout-checkout .panel.panel-default { background: #fff; border: 1px solid #ececec; border-radius: var(--k2-card-radius); box-shadow: none; margin-bottom: 16px; overflow: hidden; } #checkout-checkout .panel-heading { background: #f7f8fa; border-bottom: 1px solid #ececec; padding: 14px 18px; } #checkout-checkout .panel-title { font-size: 15px; font-weight: 700; color: var(--heading-color); text-transform: uppercase; letter-spacing: .3px; } #checkout-checkout .panel-title > a, #checkout-checkout .panel-title > a:hover, #checkout-checkout .panel-title > a:focus { color: var(--heading-color); text-decoration: none; display: block; } #checkout-checkout .panel-title .fa-caret-down { float: right; color: var(--k2-color-primary); } #checkout-checkout .panel-body { padding: 18px; } /* formulários */ /* layout empilhado: label em cima, input full-width (o tema aplicava um layout horizontal com o label numa coluna estreita à esquerda, que quebrava/sobrepunha) */ #checkout-checkout .form-group, #checkout-checkout .form-group[class*="col-"] { float: none !important; width: 100% !important; max-width: 100% !important; clear: both; padding-left: 0 !important; padding-right: 0 !important; margin-bottom: 16px; } /* label e input compartilham EXATAMENTE a mesma borda esquerda e o mesmo recuo de texto interno (13px) — assim o texto do label cai sobre o texto do input */ #checkout-checkout .form-group > label.control-label { display: block !important; position: relative; float: none !important; width: 100% !important; text-align: left !important; line-height: 1.3 !important; padding: 0 0 0 13px !important; margin: 0 0 6px 0 !important; font-weight: 600; font-size: 13px; color: var(--heading-color); } #checkout-checkout .form-group > .form-control, #checkout-checkout .form-group > .input-group { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } #checkout-checkout .form-group > .form-control { padding-left: 13px !important; } /* asterisco fora do fluxo, na "calha" à esquerda — não empurra o texto */ #checkout-checkout .form-group.required label.control-label::before { content: "*"; position: absolute; left: 3px; top: 0; color: #d64545; } #checkout-checkout .form-control { height: 44px; border: 1px solid #dfe3e8; border-radius: 6px; box-shadow: none; font-size: 14px; color: var(--main-color); } #checkout-checkout textarea.form-control { height: auto; } #checkout-checkout .form-control:focus { border-color: var(--k2-color-primary); box-shadow: 0 0 0 3px rgba(0, 0, 0, .04); } /* opções de frete / pagamento (radios e checkboxes) */ #checkout-checkout .radio, #checkout-checkout .checkbox { padding: 10px 14px; border: 1px solid #eceef0; border-radius: 8px; margin: 0 0 8px; transition: border-color .2s ease, background .2s ease; } #checkout-checkout .radio:hover, #checkout-checkout .checkbox:hover { border-color: var(--k2-color-primary); background: #fff8f2; } #checkout-checkout .radio label, #checkout-checkout .checkbox label { font-weight: 500; color: var(--heading-color); } /* tabela (confirmação) */ #checkout-checkout .table { background: #fff; border: 1px solid #ececec; border-radius: var(--k2-card-radius); overflow: hidden; margin-bottom: 0; } #checkout-checkout .table > thead > tr > td, #checkout-checkout .table > thead > tr > th { background: #f7f8fa; border: 0; border-bottom: 1px solid #ececec; padding: 12px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #6b7280; } #checkout-checkout .table > tbody > tr > td, #checkout-checkout .table > tfoot > tr > td { border: 0; border-bottom: 1px solid #f0f1f3; padding: 12px 14px; vertical-align: middle; } #checkout-checkout .table > tfoot > tr:last-child > td { font-size: 16px; color: var(--k2-color-primary); font-weight: 700; } /* botões */ #checkout-checkout .btn-primary { background: var(--k2-color-primary); border: 1px solid var(--k2-color-primary); color: #fff; height: 46px; padding: 0 24px; border-radius: var(--k2-button-radius); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .3px; display: inline-flex; align-items: center; } #checkout-checkout .btn-primary:hover { background: var(--k2-color-secondary); border-color: var(--k2-color-secondary); } #checkout-checkout .btn-default { border: 1px solid #d5d9de; border-radius: var(--k2-button-radius); background: #fff; color: var(--heading-color); } #checkout-checkout .btn-default:hover { border-color: var(--k2-color-secondary); color: var(--k2-color-secondary); } /* validação */ #checkout-checkout .text-danger { color: #d64545; font-size: 12.5px; margin-top: 4px; } #checkout-checkout .has-error .form-control { border-color: #d64545; } #checkout-checkout .alert { border: 0; border-radius: var(--k2-card-radius); } /* ===================================================================== MINI-CARRINHO (flyout do header — #cart .dropdown-menu) ===================================================================== */ #cart .dropdown-menu { padding: 16px; border: 0; border-radius: var(--k2-card-radius); box-shadow: 0 16px 48px rgba(0, 0, 0, .18); min-width: 340px; } /* miniatura do produto (resize do carrinho subiu p/ 120px — ajuste o display) */ #cart .dropdown-menu .cart-image img.img-thumbnail { width: 72px; height: 72px; object-fit: contain; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 6px; } #cart .dropdown-menu table.table-striped { margin-bottom: 6px; } #cart .dropdown-menu table.table-striped > tbody > tr > td { background: transparent; border: 0; border-bottom: 1px solid #f0f1f3; padding: 12px 8px; vertical-align: middle; } #cart .dropdown-menu .cart-info a { color: var(--heading-color); font-weight: 600; } #cart .dropdown-menu .cart-info a:hover { color: var(--k2-color-primary); } #cart .dropdown-menu .button-cart-remove { background: #fff; color: #d64545; border: 1px solid #f0d2d2; border-radius: 50%; width: 26px; height: 26px; padding: 0; } #cart .dropdown-menu .button-cart-remove:hover { background: #d64545; color: #fff; border-color: #d64545; } /* tabela de totais */ #cart .dropdown-menu table.table-bordered { border: 0; margin: 6px 0 14px; } #cart .dropdown-menu table.table-bordered td { border: 0; padding: 4px 8px; } #cart .dropdown-menu table.table-bordered tr:last-child td { font-size: 15px; color: var(--heading-color); } #cart .dropdown-menu table.table-bordered tr:last-child td.text-right { color: var(--k2-color-primary); font-weight: 700; } /* botões Ver carrinho / Finalizar — vira pilha de pílulas recoloridas */ #cart .dropdown-menu p.text-right { display: flex; flex-direction: column; gap: 10px; margin: 0; } #cart .dropdown-menu p.text-right a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 46px; border-radius: 999px; font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .3px; transition: background .2s ease, color .2s ease, border-color .2s ease; } /* Ver carrinho — outline */ #cart .dropdown-menu p.text-right a:first-child { background: #fff; border: 1px solid #d5d9de; color: var(--heading-color); } #cart .dropdown-menu p.text-right a:first-child:hover { background: #f3f4f6 !important; border-color: var(--k2-color-secondary); color: var(--k2-color-secondary) !important; text-decoration: none; } /* Finalizar — laranja */ #cart .dropdown-menu p.text-right a:last-child { background: var(--k2-color-primary); border: 1px solid var(--k2-color-primary); color: #fff; } #cart .dropdown-menu p.text-right a:last-child:hover { background: var(--k2-color-secondary); border-color: var(--k2-color-secondary); text-decoration: none; } #cart .dropdown-menu p.text-right a strong { font-weight: 700; } /* ===================================================================== BARRA DE FERRAMENTAS (ordenar / exibir / grade-lista) — compartilhada por categoria, busca e marca (.tool-bar) ===================================================================== */ .tool-bar { background: #fff; border: 1px solid #ececec; border-radius: var(--k2-card-radius); padding: 10px 14px; margin-bottom: 22px; } /* a .row interna mantém as margens negativas do Bootstrap (-15px), mas a .tool-bar não é uma .container/col com 15px de padding → transbordava e empurrava a página. Zera as margens e usa um gutter pequeno. */ .tool-bar > .row { margin-left: 0; margin-right: 0; } .tool-bar > .row > [class*="col-"] { padding-left: 7px; padding-right: 7px; } .tool-bar .form-group { margin: 0; } .tool-bar .input-group-addon { background: transparent; border: 0; color: #6b7280; font-weight: 600; font-size: 13px; padding-left: 0; } .tool-bar #input-sort, .tool-bar #input-limit { height: 40px; border: 1px solid #dfe3e8; border-radius: 6px; box-shadow: none; } /* toggle grade/lista: o tema desenha o ícone via background-image (bkg_grid.png) e font-size:0 — NÃO sobrescrever o background, só dar a moldura do botão */ .tool-bar .btn-group-sm { display: inline-flex; gap: 6px; } .tool-bar #grid-view, .tool-bar #list-view { border: 1px solid #dfe3e8 !important; border-radius: 6px !important; width: 38px; height: 38px; } .tool-bar #grid-view.active, .tool-bar #list-view.active, .tool-bar #grid-view:hover, .tool-bar #list-view:hover { border-color: var(--k2-color-primary) !important; } .tool-bar #compare-total, .tool-bar .btn-link { color: var(--k2-color-primary); font-weight: 600; } .tool-bar-bottom { margin-top: 22px; } /* paginação */ .pagination > li > a, .pagination > li > span { color: var(--heading-color); border-color: #e4e7eb; } .pagination > .active > a, .pagination > .active > span, .pagination > li > a:hover { background: var(--k2-color-primary); border-color: var(--k2-color-primary); color: #fff; } /* ===================================================================== PÁGINA DE BUSCA (#product-search) — título + formulário de refino ===================================================================== */ #product-search { padding-top: 18px; padding-bottom: 44px; } #product-search #content > h1 { font-family: var(--heading-font); font-size: 26px; font-weight: 700; color: var(--heading-color); margin: 0 0 18px; padding-bottom: 14px; position: relative; } #product-search #content > h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; border-radius: 3px; background: var(--k2-color-primary); } /* card que agrupa o formulário de refino */ #product-search #content > label.control-label[for="input-search"] { display: block; font-weight: 600; font-size: 13px; color: var(--heading-color); margin-bottom: 8px; } #product-search #content .form-control { height: 44px; border: 1px solid #dfe3e8; border-radius: 6px; box-shadow: none; font-size: 14px; } #product-search #content .checkbox-inline { font-size: 14px; color: var(--main-color); } #product-search #button-search { background: var(--k2-color-primary); border: 1px solid var(--k2-color-primary); color: #fff; height: 46px; padding: 0 28px; border-radius: var(--k2-button-radius); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .3px; margin-top: 6px; } #product-search #button-search:hover { background: var(--k2-color-secondary); border-color: var(--k2-color-secondary); } #product-search #content > h2 { font-size: 20px; font-weight: 700; color: var(--heading-color); margin: 28px 0 18px; } /* ===================================================================== MINHA CONTA ([id^="account-"]) — login, cadastro, painel, pedidos… markup default estilizado via CSS (isolado) ===================================================================== */ [id^="account-"] { padding-top: 18px; padding-bottom: 44px; } [id^="account-"] #content > h1, [id^="account-"] #content > h2:first-child { font-family: var(--heading-font); font-size: 26px; font-weight: 700; color: var(--heading-color); margin: 0 0 22px; padding-bottom: 14px; position: relative; } [id^="account-"] #content > h1::after, [id^="account-"] #content > h2:first-child::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; border-radius: 3px; background: var(--k2-color-primary); } /* caixas (.well) viram cards */ [id^="account-"] .well { background: #fff; border: 1px solid #ececec; border-radius: var(--k2-card-radius); box-shadow: none; padding: 26px; } [id^="account-"] .well h2 { font-size: 18px; font-weight: 700; color: var(--heading-color); margin: 0 0 14px; } /* formulários */ [id^="account-"] .form-group { margin-bottom: 16px; } [id^="account-"] label.control-label, [id^="account-"] .col-form-label { font-weight: 600; font-size: 13px; color: var(--heading-color); margin-bottom: 6px; } [id^="account-"] .form-control { height: 44px; border: 1px solid #dfe3e8; border-radius: 6px; box-shadow: none; font-size: 14px; color: var(--main-color); } [id^="account-"] textarea.form-control { height: auto; } [id^="account-"] .form-control:focus { border-color: var(--k2-color-primary); box-shadow: 0 0 0 3px rgba(0, 0, 0, .04); } /* input-group (ex.: ver senha) */ [id^="account-"] .input-group .form-control { border-radius: 6px 0 0 6px; } [id^="account-"] .input-group-btn .btn { height: 44px; border: 1px solid #dfe3e8; border-left: 0; border-radius: 0 6px 6px 0; background: #fff; color: #6b7280; } [id^="account-"] .form-group > a { display: inline-block; margin-top: 8px; color: var(--k2-color-primary); font-size: 13px; } /* botões */ [id^="account-"] .btn-primary, [id^="account-"] input[type="submit"].btn-primary { background: var(--k2-color-primary); border: 1px solid var(--k2-color-primary); color: #fff; height: 46px; padding: 0 26px; border-radius: var(--k2-button-radius); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .3px; display: inline-flex; align-items: center; } [id^="account-"] .btn-primary:hover, [id^="account-"] input[type="submit"].btn-primary:hover { background: var(--k2-color-secondary); border-color: var(--k2-color-secondary); } [id^="account-"] .btn-default { border: 1px solid #d5d9de; border-radius: var(--k2-button-radius); background: #fff; color: var(--heading-color); } [id^="account-"] .btn-default:hover { border-color: var(--k2-color-secondary); color: var(--k2-color-secondary); } /* menu da conta (.list-group) — painel/sidebar do cliente */ [id^="account-"] .list-group { border-radius: var(--k2-card-radius); overflow: hidden; border: 1px solid #ececec; } [id^="account-"] .list-group-item { border: 0; border-bottom: 1px solid #f0f1f3; padding: 13px 16px; font-size: 14px; color: var(--heading-color); transition: background .2s ease, color .2s ease; } [id^="account-"] .list-group-item:last-child { border-bottom: 0; } [id^="account-"] .list-group-item:hover, [id^="account-"] .list-group-item.active { background: #fff8f2; color: var(--k2-color-primary); } /* tabelas (histórico de pedidos, lista de desejos, downloads…) */ [id^="account-"] .table { background: #fff; border: 1px solid #ececec; border-radius: var(--k2-card-radius); overflow: hidden; } [id^="account-"] .table > thead > tr > td, [id^="account-"] .table > thead > tr > th { background: #f7f8fa; border: 0; border-bottom: 1px solid #ececec; padding: 12px 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: #6b7280; } [id^="account-"] .table > tbody > tr > td { border: 0; border-bottom: 1px solid #f0f1f3; padding: 12px 14px; vertical-align: middle; } [id^="account-"] .table .btn { border-radius: 6px; } /* listas de conteúdo do painel (links de ações) */ [id^="account-"] #content > ul > li > a, [id^="account-"] .list-unstyled > li > a { color: var(--heading-color); } [id^="account-"] #content > ul > li > a:hover, [id^="account-"] .list-unstyled > li > a:hover { color: var(--k2-color-primary); } /* alertas */ [id^="account-"] .alert { border: 0; border-radius: var(--k2-card-radius); } /* lista de desejos: botões de ação (carrinho/remover) pequenos, lado a lado */ #account-wishlist .table td .btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; padding: 0; margin: 0 0 0 6px; border-radius: 8px; font-size: 15px; } #account-wishlist .table td .btn:first-child { margin-left: 0; } #account-wishlist .table td .btn.btn-primary { background: var(--k2-color-primary); border: 1px solid var(--k2-color-primary); color: #fff; } #account-wishlist .table td .btn.btn-primary:hover { background: var(--k2-color-secondary); border-color: var(--k2-color-secondary); } #account-wishlist .table td .btn.btn-danger { background: #fff; color: #d64545; border: 1px solid #f0d2d2; } #account-wishlist .table td .btn.btn-danger:hover { background: #d64545; border-color: #d64545; color: #fff; } /* miniatura do produto na lista de desejos */ #account-wishlist .table td img { width: 64px; height: 64px; object-fit: contain; background: #fff; border: 1px solid #eee; border-radius: 8px; padding: 5px; } /* ===================================================================== PÁGINAS DE CONTEÚDO ([id^="information-"]) e 404 (#error-not-found) ===================================================================== */ [id^="information-"], #error-not-found { padding-top: 18px; padding-bottom: 48px; } [id^="information-"] #content > h1, #error-not-found #content > h1 { font-family: var(--heading-font); font-size: 28px; font-weight: 700; color: var(--heading-color); margin: 0 0 22px; padding-bottom: 14px; position: relative; } [id^="information-"] #content > h1::after, #error-not-found #content > h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; border-radius: 3px; background: var(--k2-color-primary); } /* tipografia do conteúdo livre (description vinda do admin) */ #information-information #content, #error-not-found #content { font-size: 15px; line-height: 1.75; color: var(--main-color); } #information-information #content h2, #information-information #content h3, #information-information #content h4 { font-family: var(--heading-font); color: var(--heading-color); font-weight: 700; margin: 28px 0 12px; } #information-information #content h2 { font-size: 21px; } #information-information #content h3 { font-size: 18px; } #information-information #content h4 { font-size: 16px; } #information-information #content p { margin: 0 0 16px; } #information-information #content ul, #information-information #content ol { margin: 0 0 16px; padding-left: 22px; } #information-information #content li { margin-bottom: 8px; } #information-information #content a { color: var(--k2-color-primary); } #information-information #content a:hover { text-decoration: underline; } #information-information #content img { max-width: 100%; height: auto; border-radius: var(--k2-card-radius); } /* contato: painéis, form e mapa */ #information-contact .panel.panel-default { background: #fff; border: 1px solid #ececec; border-radius: var(--k2-card-radius); box-shadow: none; overflow: hidden; margin-bottom: 16px; } #information-contact .panel-heading { background: #f7f8fa; border-bottom: 1px solid #ececec; padding: 14px 18px; } #information-contact .panel-title { font-size: 15px; font-weight: 700; color: var(--heading-color); } #information-contact .panel-title > a { color: var(--heading-color); text-decoration: none; } #information-contact .panel-title .fa-caret-down { float: right; color: var(--k2-color-primary); } #information-contact .panel-body { padding: 18px; } #information-contact legend { font-size: 18px; font-weight: 700; color: var(--heading-color); border-bottom: 1px solid #ececec; padding-bottom: 10px; margin-bottom: 18px; } #information-contact label.control-label { font-weight: 600; font-size: 13px; color: var(--heading-color); margin-bottom: 6px; } #information-contact .form-control { height: 44px; border: 1px solid #dfe3e8; border-radius: 6px; box-shadow: none; font-size: 14px; } #information-contact textarea.form-control { height: auto; } #information-contact .form-control:focus { border-color: var(--k2-color-primary); box-shadow: 0 0 0 3px rgba(0, 0, 0, .04); } #information-contact .buttons .btn-primary, #information-contact input[type="submit"].btn-primary { background: var(--k2-color-primary); border: 1px solid var(--k2-color-primary); color: #fff; height: 46px; padding: 0 28px; border-radius: var(--k2-button-radius); font-weight: 700; text-transform: uppercase; font-size: 13px; letter-spacing: .3px; } #information-contact .buttons .btn-primary:hover, #information-contact input[type="submit"].btn-primary:hover { background: var(--k2-color-secondary); border-color: var(--k2-color-secondary); } /* 404 */ #error-not-found #content p { font-size: 15px; line-height: 1.7; } #error-not-found .buttons .btn-primary { background: var(--k2-color-primary); border: 1px solid var(--k2-color-primary); color: #fff; height: 46px; padding: 0 26px; border-radius: var(--k2-button-radius); font-weight: 700; text-transform: uppercase; font-size: 13px; } #error-not-found .buttons .btn-primary:hover { background: var(--k2-color-secondary); border-color: var(--k2-color-secondary); } /* ===================================================================== FILTROS LATERAIS (módulo ptfilter — .pt-filter) na categoria ===================================================================== */ .pt-filter.panel { background: #fff; border: 1px solid #ececec; border-radius: var(--k2-card-radius); box-shadow: none; overflow: hidden; margin-bottom: 22px; } .pt-filter .layered-heading { background: var(--k2-color-secondary); color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 14px 18px; } .pt-filter .layered > .list-group { margin: 0; border: 0; border-radius: 0; } /* cada grupo de filtro */ .pt-filter .filter-attribute-container { padding: 14px 16px; border-bottom: 1px solid #f0f1f3; } .pt-filter .filter-attribute-container:last-child { border-bottom: 0; } /* nome do grupo (Price, atributos…) */ .pt-filter .filter-attribute-container > label { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; color: var(--heading-color); margin: 0 0 12px; } .pt-filter .list-group-item { border: 0; padding: 0; background: transparent; } /* opções de filtro como chips clicáveis */ .pt-filter .a-filter.add-filter { display: block; padding: 8px 12px; margin-bottom: 6px; border: 1px solid #e7eaee; border-radius: 7px; color: var(--main-color); font-size: 13.5px; transition: border-color .2s ease, color .2s ease, background .2s ease; } .pt-filter .a-filter.add-filter:hover { border-color: var(--k2-color-primary); color: var(--k2-color-primary); background: #fff8f2; text-decoration: none; } /* filtros ativos (selecionados) com remover */ .pt-filter .filter-act-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; margin-bottom: 6px; background: var(--k2-color-primary); border-radius: 7px; } .pt-filter .filter-act-name p { margin: 0; color: #fff; font-size: 13px; font-weight: 600; } .pt-filter .filter-act-name .remove-filter { color: #fff; opacity: .85; line-height: 1; } .pt-filter .filter-act-name .remove-filter:hover { opacity: 1; } .pt-filter .filter-clear-all { margin-top: 4px; } .pt-filter .filter-clear-all .clear-filter { display: inline-block; color: #d64545; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; } /* faixa de preço (jQuery UI slider) */ .pt-filter #slider-price.ui-slider { height: 5px; background: #e7eaee; border: 0; border-radius: 4px; margin: 6px 4px 16px; } .pt-filter #slider-price .ui-slider-range { background: var(--k2-color-primary); border-radius: 4px; } .pt-filter #slider-price .ui-slider-handle { width: 16px; height: 16px; top: -6px; margin-left: -8px; background: #fff; border: 2px solid var(--k2-color-primary); border-radius: 50%; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); cursor: pointer; } .pt-filter .slider-values { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--heading-color); font-weight: 600; } .pt-filter .slider-values .input-price { width: 64px; border: 1px solid #dfe3e8; border-radius: 6px; padding: 5px 8px; background: #f7f8fa; text-align: center; font-size: 13px; } /* botão flutuante de filtro no mobile */ #product-category .show-sidebar { display: inline-flex; align-items: center; gap: 8px; background: var(--k2-color-primary); color: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 700; cursor: pointer; } #product-category .show-sidebar .ion-android-close { display: none; } /* ===================================================================== BOTÕES FLUTUANTES DO CARD (wishlist / comparar / quickview no hover) — refina o visual nativo com as variáveis do tema ===================================================================== */ .product-thumb .button-group button { width: 44px; height: 44px; line-height: 44px; color: var(--k2-color-secondary); background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .16); margin-left: 8px; } .product-thumb .button-group button:before { font-size: 1.9rem; } .product-thumb .button-group button:hover { background: var(--k2-color-primary); color: #fff; } /* quando o card já está em hover, dá um leve "pop" escalonado nos botões */ .product-thumb .product-item:hover .button-group button { transform: scale(1); } .product-thumb .product-item:hover .button-group button:hover { transform: scale(1.08); } /* ===================================================================== QUICKVIEW (modal magnific) — refino LEVE (sem mexer no posicionamento do #quickview-content / .product-info-details, que o tema controla) ===================================================================== */ /* botão de fechar (magnific) como círculo — não afeta layout/abertura */ #quickview-content .mfp-close { color: var(--k2-color-secondary); opacity: 1; } #quickview-content .mfp-close:hover { color: var(--k2-color-primary); } /* setas do carrossel de miniaturas dentro do modal */ #quickview-content .additional-button-next:hover, #quickview-content .additional-button-prev:hover { background: var(--k2-color-primary); border-color: var(--k2-color-primary); color: #fff; } /* miniaturas (imagens adicionais) no modal — pequenas, nítidas, sem distorção. (as regras da galeria foram escopadas a #product-product, então o quickview precisa das suas próprias) */ #quickview-content .product-image-details .additional-container { margin-top: 14px; } #quickview-content .additional-images .swiper-slide { height: auto; } #quickview-content .additional-images .sub-image { display: block; border: 1px solid #ececec; border-radius: var(--k2-button-radius); overflow: hidden; background: #fff; cursor: pointer; } #quickview-content .additional-images .sub-image img { width: 100%; height: 78px; object-fit: contain; padding: 6px; } #quickview-content .additional-images .sub-image.active, #quickview-content .additional-images .sub-image:hover { border-color: var(--k2-color-primary); } /* imagem principal do modal centralizada com respiro */ #quickview-content .product-zoom-image { text-align: center; } /* ===================================================================== COMPARAR PRODUTOS (#product-compare) ===================================================================== */ #product-compare { padding-top: 18px; padding-bottom: 44px; } #product-compare #content > h1 { font-family: var(--heading-font); font-size: 26px; font-weight: 700; color: var(--heading-color); margin: 0 0 22px; padding-bottom: 14px; position: relative; } #product-compare #content > h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 54px; height: 3px; border-radius: 3px; background: var(--k2-color-primary); } /* tabela como card */ #product-compare .table.table-bordered { background: #fff; border: 1px solid #ececec; border-radius: var(--k2-card-radius); overflow: hidden; } #product-compare .table.table-bordered td { border-color: #f0f1f3; padding: 14px 16px; vertical-align: middle; } /* primeira coluna (rótulos) e linhas de seção em destaque */ #product-compare .table.table-bordered td:first-child, #product-compare .table.table-bordered thead td, #product-compare .table.table-bordered strong { color: var(--heading-color); font-weight: 600; } #product-compare .table img { border: 1px solid #eee; border-radius: 8px; padding: 6px; background: #fff; } /* botões de ação (comprar / remover) */ #product-compare .table .btn { border-radius: var(--k2-button-radius); font-weight: 700; text-transform: uppercase; font-size: 12.5px; letter-spacing: .3px; height: 42px; } #product-compare .table .btn.btn-primary { background: var(--k2-color-primary); border: 1px solid var(--k2-color-primary); color: #fff; margin-bottom: 8px; } #product-compare .table .btn.btn-primary:hover { background: var(--k2-color-secondary); border-color: var(--k2-color-secondary); } #product-compare .table .btn.btn-danger { background: #fff; color: #d64545; border: 1px solid #f0d2d2; } #product-compare .table .btn.btn-danger:hover { background: #d64545; border-color: #d64545; color: #fff; } /* botão "continuar" */ #product-compare .buttons .btn-default { border: 1px solid #d5d9de; border-radius: var(--k2-button-radius); background: #fff; color: var(--heading-color); height: 44px; padding: 0 24px; font-weight: 700; text-transform: uppercase; font-size: 13px; } #product-compare .buttons .btn-default:hover { border-color: var(--k2-color-secondary); color: var(--k2-color-secondary); } /* ===================================================================== QA MOBILE — ajustes responsivos das seções novas (<= 767px) ===================================================================== */ @media (max-width: 767px) { /* paddings e títulos das páginas internas */ #checkout-cart, #checkout-checkout, [id^="account-"], #product-compare, #product-search, [id^="information-"], #error-not-found { padding-top: 12px; padding-bottom: 30px; } #checkout-cart #content > h1, #checkout-checkout #content > h1, [id^="account-"] #content > h1, #product-compare #content > h1, #product-search #content > h1, [id^="information-"] #content > h1 { font-size: 22px; } /* trava transbordo horizontal das páginas internas (margens negativas de .row, nomes longos, etc.) — evita o scroll lateral que desloca o conteúdo */ #product-search, #product-category, #product-manufacturer, #checkout-cart, #checkout-checkout, [id^="account-"], #product-compare { overflow-x: hidden; } /* carrinho no header mobile: SÓ o ícone (sem "Meu Carrinho R$…"). Mira pelo ID #cart-total (estável); a classe k2-cart-total some quando o JS re-renderiza o botão após adicionar ao carrinho. */ #cart #cart-total, #cart .k2-cart-total { display: none !important; } #cart > button.k2-cart-btn { gap: 0; padding: 0 2px; } /* mini-carrinho (flyout) ancorado à viewport pra nunca cortar */ #cart .dropdown-menu { position: fixed !important; left: 12px !important; right: 12px !important; top: 64px !important; width: auto !important; min-width: 0 !important; max-width: none !important; max-height: calc(100vh - 80px); overflow-x: hidden; overflow-y: auto; box-sizing: border-box; } /* conteúdo do flyout não pode ser mais largo que o flyout (preços cortavam) */ #cart .dropdown-menu table { width: 100% !important; table-layout: fixed; margin: 0; } #cart .dropdown-menu table td { word-break: break-word; white-space: normal; } #cart .dropdown-menu .cart-image { width: 64px; } #cart .dropdown-menu .cart-image img.img-thumbnail { width: 56px; height: 56px; } /* coluna de remover compacta */ #cart .dropdown-menu .button-cart-remove { width: 24px; height: 24px; } /* tabela do COMPARAR não tem .table-responsive no markup → vira scroll-x */ #product-compare .table.table-bordered { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ---- CARRINHO: tabela vira CARDS empilhados (verticalizada) no mobile ---- em vez de slider horizontal. Sem data-label no markup → rótulos por coluna. */ #checkout-cart .table-responsive { border: 0; overflow: visible; } #checkout-cart .table.table-bordered { display: block; width: 100%; border: 0; background: transparent; } #checkout-cart .table.table-bordered thead { display: none; } #checkout-cart .table.table-bordered tbody, #checkout-cart .table.table-bordered tbody tr, #checkout-cart .table.table-bordered tbody td { display: block; width: 100%; } #checkout-cart .table.table-bordered tbody tr { background: #fff; border: 1px solid #ececec; border-radius: var(--k2-card-radius); padding: 8px 14px; margin-bottom: 12px; } /* imagem + nome: bloco centralizado no topo do card */ #checkout-cart .table.table-bordered tbody td:nth-child(1), #checkout-cart .table.table-bordered tbody td:nth-child(2) { text-align: center; border-bottom: 1px solid #f0f1f3 !important; padding: 10px 0; } #checkout-cart .table.table-bordered tbody td:nth-child(2) { font-weight: 700; font-size: 15px; white-space: normal; word-break: break-word; overflow-wrap: anywhere; } /* valores (modelo/preço/total) também podem quebrar se necessário */ #checkout-cart .table.table-bordered tbody td:nth-child(n+3) { white-space: normal; word-break: break-word; } /* demais células: rótulo à esquerda, valor à direita */ #checkout-cart .table.table-bordered tbody td:nth-child(n+3) { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0 !important; border-bottom: 1px solid #f4f5f6 !important; padding: 10px 0; text-align: right; } #checkout-cart .table.table-bordered tbody td:last-child { border-bottom: 0 !important; } #checkout-cart .table.table-bordered tbody td:nth-child(n+3)::before { font-weight: 600; color: var(--heading-color); text-align: left; white-space: nowrap; } #checkout-cart .table.table-bordered tbody td:nth-child(3)::before { content: "Modelo"; } #checkout-cart .table.table-bordered tbody td:nth-child(4)::before { content: "Quantidade"; } #checkout-cart .table.table-bordered tbody td:nth-child(5)::before { content: "Preço unit."; } #checkout-cart .table.table-bordered tbody td:nth-child(6)::before { content: "Total"; } /* caixa de quantidade encostada à direita, compacta */ #checkout-cart .table .input-group { max-width: 150px; margin: 0; } /* total do item em destaque */ #checkout-cart .table.table-bordered tbody td:nth-child(6) { font-weight: 700; color: var(--k2-color-primary); } /* conta: tabelas longas seguem em .table-responsive (scroll-x) — reduz padding */ [id^="account-"] .table > tbody > tr > td { padding: 12px 10px; font-size: 13px; } /* botões de ação full-width onde fizer sentido */ #checkout-cart .buttons .btn, #checkout-checkout #content .btn-primary { width: 100%; justify-content: center; margin-bottom: 10px; } #checkout-checkout .panel.panel-default { margin-bottom: 12px; } /* ---- CHECKOUT (confirmação): tabela vira CARDS empilhados + totais legíveis ---- */ #checkout-checkout .table-responsive { border: 0; overflow: visible; } #checkout-checkout .table { display: block; width: 100%; border: 0; } #checkout-checkout .table thead { display: none; } #checkout-checkout .table tbody, #checkout-checkout .table tbody tr, #checkout-checkout .table tbody td { display: block; width: 100%; } #checkout-checkout .table tbody tr { background: #fff; border: 1px solid #ececec; border-radius: var(--k2-card-radius); padding: 6px 12px; margin-bottom: 10px; } /* nome do produto (1ª célula) como título do card */ #checkout-checkout .table tbody td:nth-child(1) { font-weight: 700; border-bottom: 1px solid #f0f1f3 !important; padding: 10px 0; white-space: normal; word-break: break-word; } /* demais células: rótulo → valor */ #checkout-checkout .table tbody td:nth-child(n+2) { display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0 !important; border-bottom: 1px solid #f4f5f6 !important; padding: 8px 0; text-align: right; white-space: normal; word-break: break-word; } #checkout-checkout .table tbody td:last-child { border-bottom: 0 !important; } #checkout-checkout .table tbody td:nth-child(n+2)::before { font-weight: 600; color: var(--heading-color); text-align: left; white-space: nowrap; } #checkout-checkout .table tbody td:nth-child(2)::before { content: "Modelo"; } #checkout-checkout .table tbody td:nth-child(3)::before { content: "Quantidade"; } #checkout-checkout .table tbody td:nth-child(4)::before { content: "Preço unit."; } #checkout-checkout .table tbody td:nth-child(5)::before { content: "Total"; } /* totais (tfoot): label (colspan) + valor como linhas flex */ #checkout-checkout .table tfoot { display: block; width: 100%; margin-top: 10px; } #checkout-checkout .table tfoot tr { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #f0f1f3; } #checkout-checkout .table tfoot td { display: block; width: auto; border: 0 !important; padding: 0; text-align: right; } #checkout-checkout .table tfoot td[colspan] { text-align: left; } #checkout-checkout .table tfoot tr:last-child { border-bottom: 0; font-size: 16px; } #checkout-checkout .table tfoot tr:last-child td:last-child { color: var(--k2-color-primary); font-weight: 700; } /* tool-bar: colunas em largura total (col-xs-6 = 50% apertava o texto/selects) */ .tool-bar { padding: 10px; } .tool-bar > .row > [class*="col-"] { width: 100%; margin-bottom: 8px; } .tool-bar > .row > [class*="col-"]:last-child { margin-bottom: 0; } .tool-bar .form-group { margin-bottom: 0; } /* ordenar/exibir: label EM CIMA, select full-width embaixo (lado a lado sobrepunha o label) */ .tool-bar .input-group { display: block; width: 100%; } .tool-bar .input-group .input-group-addon { display: block; width: 100%; padding: 0 0 5px; text-align: left; white-space: nowrap; } .tool-bar .input-group .form-control { display: block; width: 100%; float: none; border-radius: 6px !important; } /* "Produtos para comparar" pode quebrar linha em vez de estourar */ .tool-bar #compare-total { white-space: normal; display: inline-block; padding-left: 0; } .pt-filter.panel { margin-bottom: 16px; } /* página de marcas: índice A-Z não sticky no mobile (evita cobrir conteúdo) */ .manufacturer-list .manufacturer-index { position: static; } /* newsletter do footer não estoura */ footer .newsletter-content .content { max-width: 100%; } /* cards de destaque: altura adequada */ .special-categories-module .category-content { min-height: 170px; } } /* telas bem pequenas (<= 400px) */ @media (max-width: 400px) { #cart .dropdown-menu p.text-right a { font-size: 12px; } #checkout-cart .table img.img-thumbnail, #account-wishlist .table td img { width: 56px; height: 56px; } } /* ===================================================================== PREVIEW DA BUSCA (autocomplete — .search-ajax) — cards compactos (usa as mesmas classes do card de produto, então sem override fica gigante) ===================================================================== */ .search-ajax { box-sizing: border-box; } .search-ajax .ajax-result-list { display: flex; flex-wrap: wrap; margin: 0; padding: 8px; list-style: none; } .search-ajax .ajax-result-item { float: none !important; width: 50% !important; padding: 6px !important; box-sizing: border-box; } .search-ajax .ajax-result-item .product-thumb { height: 100%; border: 1px solid #ececec; border-radius: 8px; padding: 8px; box-shadow: none !important; transform: none !important; } .search-ajax .ajax-result-item .product-image, .search-ajax .ajax-result-item .product-image img { height: auto; background: transparent; } .search-ajax .ajax-result-item .product-image img { width: 100%; height: 80px; object-fit: contain; padding: 0; } .search-ajax .ajax-result-item .caption { padding: 8px 2px 2px; text-align: center; } .search-ajax .ajax-result-item .caption h4 { font-size: 12.5px; line-height: 1.3; margin: 0 0 4px; min-height: auto; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .search-ajax .ajax-result-item .caption h4 a { color: var(--heading-color); } .search-ajax .ajax-result-item .caption .price { font-size: 14px; font-weight: 700; color: var(--k2-color-primary); margin: 0; } .search-ajax .ajax-result-msg { padding: 16px; text-align: center; color: #8a9099; } /* mobile: o dropdown não pode exceder a viewport */ @media (max-width: 767px) { .search-ajax { left: 50% !important; right: auto !important; transform: translateX(-50%); width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; max-height: 72vh; overflow-x: hidden; overflow-y: auto; } .search-ajax .ajax-result-item .product-image img { height: 70px; } }