/* ============================================================ PREMIUM ECOLÓGICA CARDS DE PRODUTO CONSOLIDADOS - V4 Magento 2.3.5-p2 + Swissup Argento Stripes + Highlight OBJETIVOS - eliminar dependência de hover para preço/parcelas/Pix - manter cards de categoria estáveis e modernos - manter a Home estável no desktop - impedir sobreposição entre blocos da Home - no mobile da Home: 1 card por vez + rolagem horizontal - neutralizar o card flutuante antigo do Argento IMPORTANTE Este arquivo substitui o CSS customizado de cards enviado anteriormente. Não deve ser acrescentado abaixo das versões V1/V2/V3 antigas. ============================================================ */ /* ============================================================ 0. AJUSTES COMUNS / SEGURANÇA ============================================================ */ .catalog-category-view .products-grid *, .cms-index-index .block-highlight * { box-sizing: border-box; } /* O HTML atual repete o id preco-a-vista-mm em vários produtos. Por isso, nas regras abaixo usamos [id="preco-a-vista-mm"]. */ /* ============================================================ PARTE A - PÁGINAS DE CATEGORIA ============================================================ */ /* ------------------------------------------------------------ A1. GRID ------------------------------------------------------------ */ .catalog-category-view .products-grid .product-items { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px !important; margin: 0 !important; padding: 0 !important; } .catalog-category-view .products-grid .product-item { display: flex !important; width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } /* ------------------------------------------------------------ A2. CARD ------------------------------------------------------------ */ .catalog-category-view .products-grid .product-item-info, .catalog-category-view .products-grid .product-item-info:hover { position: relative !important; display: flex !important; flex-direction: column !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; background: #fff !important; border: 1px solid #e4e9e6 !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 2px 5px rgba(0,0,0,.025), 0 8px 22px rgba(0,0,0,.04) !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } .catalog-category-view .products-grid .product-item-info:hover { transform: translateY(-3px) !important; border-color: #d4ddd8 !important; box-shadow: 0 4px 10px rgba(0,0,0,.035), 0 14px 32px rgba(0,0,0,.075) !important; } .catalog-category-view .products-grid .product-item-info:before, .catalog-category-view .products-grid .product-item-info:after, .catalog-category-view .products-grid .product-item-info:hover:before, .catalog-category-view .products-grid .product-item-info:hover:after { display: none !important; content: none !important; } /* ------------------------------------------------------------ A3. PALCO DA FOTO ------------------------------------------------------------ */ .catalog-category-view .products-grid .prolabels-wrapper { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 265px !important; min-height: 265px !important; margin: 0 !important; padding: 0 !important; background: linear-gradient( 180deg, #fcfdfc 0%, #f7faf8 100% ) !important; border-bottom: 1px solid #f0f2f1 !important; overflow: hidden !important; } .catalog-category-view .products-grid .prolabels-wrapper:before { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 230px !important; height: 230px !important; transform: translate(-50%, -48%) !important; border-radius: 50% !important; background: radial-gradient( circle, rgba(0,133,74,.075) 0%, rgba(0,133,74,.025) 48%, rgba(0,133,74,0) 72% ) !important; pointer-events: none !important; } .catalog-category-view .products-grid .product-item-photo { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 265px !important; margin: 0 !important; padding: 20px 25px !important; overflow: hidden !important; } .catalog-category-view .products-grid .product-image-container { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 auto !important; } .catalog-category-view .products-grid .product-image-wrapper { position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; padding: 0 !important; padding-bottom: 0 !important; overflow: hidden !important; } .catalog-category-view .products-grid .product-image-photo { position: static !important; display: block !important; width: auto !important; height: auto !important; max-width: 88% !important; max-height: 215px !important; margin: auto !important; object-fit: contain !important; transform: scale(1.12) !important; transition: transform .25s ease !important; } .catalog-category-view .products-grid .product-item-info:hover .product-image-photo { transform: scale(1.17) !important; } /* ProLabels sempre acima da imagem */ .catalog-category-view .products-grid .prolabel, .catalog-category-view .products-grid [class*="prolabel"] { z-index: 8 !important; } /* ------------------------------------------------------------ A4. CONTEÚDO ------------------------------------------------------------ */ .catalog-category-view .products-grid .product-item-details, .catalog-category-view .products-grid .product-item-info:hover .product-item-details { position: static !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: 100% !important; height: auto !important; min-height: 165px !important; margin: 0 !important; padding: 17px 18px 19px !important; background: #fff !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; transform: none !important; } /* ------------------------------------------------------------ A5. NOME ------------------------------------------------------------ */ .catalog-category-view .products-grid .product-item-name { display: block !important; min-height: 43px !important; margin: 0 0 10px !important; color: #292d2b !important; font-size: 14px !important; line-height: 1.48 !important; font-weight: 600 !important; } .catalog-category-view .products-grid .product-item-name a { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; color: #292d2b !important; text-decoration: none !important; } .catalog-category-view .products-grid .product-item-name a:hover { color: #00854a !important; } /* ------------------------------------------------------------ A6. PREÇO ------------------------------------------------------------ */ .catalog-category-view .products-grid .price-box { position: static !important; display: block !important; height: auto !important; min-height: 0 !important; margin: auto 0 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; line-height: 1 !important; } .catalog-category-view .products-grid .price-box .price { color: #222725 !important; font-size: 21px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -.3px !important; } /* ------------------------------------------------------------ A7. PARCELAMENTO ------------------------------------------------------------ */ .catalog-category-view .products-grid .mm-price-parcels-grid { position: static !important; display: block !important; width: 100% !important; height: auto !important; max-height: none !important; margin: 5px 0 8px !important; padding: 0 !important; color: #7b817e !important; font-size: 11.5px !important; line-height: 17px !important; font-weight: 400 !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; transform: none !important; } /* ------------------------------------------------------------ A8. PIX ------------------------------------------------------------ */ .catalog-category-view .products-grid [id="preco-a-vista-mm"] { position: static !important; display: block !important; width: 100% !important; height: auto !important; min-height: 29px !important; max-height: none !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; transform: none !important; clip: auto !important; clip-path: none !important; } .catalog-category-view .products-grid [id="preco-a-vista-mm"] p { display: inline-flex !important; align-items: center !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 6px 9px !important; background: #edf8f1 !important; border: 1px solid #d9eee0 !important; border-radius: 7px !important; color: #087f47 !important; font-size: 11.5px !important; line-height: 16px !important; font-weight: 700 !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; } .catalog-category-view .products-grid [id="preco-a-vista-mm"] p:before { content: "●" !important; margin-right: 6px !important; color: #00a85a !important; font-size: 8px !important; } /* ------------------------------------------------------------ A9. REMOVE MECÂNICA DE HOVER ANTIGA DO ARGENTO ------------------------------------------------------------ */ .catalog-category-view .products-grid .product-item-inner, .catalog-category-view .products-grid .product-item-info:hover .product-item-inner { position: static !important; display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; visibility: hidden !important; overflow: hidden !important; box-shadow: none !important; border: 0 !important; } /* ------------------------------------------------------------ A10. TABLET - CATEGORIAS ------------------------------------------------------------ */ @media (min-width: 640px) and (max-width: 1023px) { .catalog-category-view .products-grid .product-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; } } /* ------------------------------------------------------------ A11. MOBILE - CATEGORIAS ------------------------------------------------------------ */ @media (max-width: 639px) { .catalog-category-view .products-grid .product-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } .catalog-category-view .products-grid .prolabels-wrapper, .catalog-category-view .products-grid .product-item-photo { height: 190px !important; min-height: 190px !important; } .catalog-category-view .products-grid .product-image-photo { max-width: 92% !important; max-height: 150px !important; transform: scale(1.06) !important; } .catalog-category-view .products-grid .product-item-info:hover .product-image-photo { transform: scale(1.06) !important; } .catalog-category-view .products-grid .product-item-details, .catalog-category-view .products-grid .product-item-info:hover .product-item-details { min-height: 165px !important; padding: 13px 12px 15px !important; } .catalog-category-view .products-grid .product-item-name { min-height: 40px !important; font-size: 12px !important; } .catalog-category-view .products-grid .price-box .price { font-size: 17px !important; } .catalog-category-view .products-grid [id="preco-a-vista-mm"] p { padding: 5px 7px !important; font-size: 10.5px !important; } } /* Celulares menores: categoria em uma coluna */ @media (max-width: 430px) { .catalog-category-view .products-grid .product-items { grid-template-columns: 1fr !important; gap: 14px !important; } .catalog-category-view .products-grid .prolabels-wrapper, .catalog-category-view .products-grid .product-item-photo { height: 235px !important; min-height: 235px !important; } .catalog-category-view .products-grid .product-image-photo { max-height: 200px !important; } } /* ============================================================ PARTE B - HOME / SWISSUP HIGHLIGHT CAROUSEL ============================================================ */ /* ------------------------------------------------------------ B1. BLOCO COMPLETO ------------------------------------------------------------ */ body.cms-index-index .block.widget.block-highlight.highlight-carousel { position: relative !important; display: block !important; clear: both !important; width: 100% !important; margin: 0 0 42px !important; padding: 0 !important; overflow: visible !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel > .block-title { position: relative !important; display: block !important; clear: both !important; width: 100% !important; height: auto !important; min-height: 58px !important; margin: 0 !important; padding: 19px 20px 14px !important; text-align: center !important; overflow: visible !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel > .block-title strong { position: relative !important; z-index: 2 !important; display: inline-block !important; margin: 0 auto !important; padding: 0 16px !important; background: #fff !important; color: #222 !important; font-size: 27px !important; line-height: 1.30 !important; font-weight: 700 !important; text-align: center !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .block-title-background { display: none !important; } /* ------------------------------------------------------------ B2. ALTURAS REAIS DO CARROSSEL Impede o bloco seguinte de subir por baixo do card. ------------------------------------------------------------ */ body.cms-index-index .block.widget.block-highlight.highlight-carousel > .block-content { position: relative !important; display: block !important; clear: both !important; width: 100% !important; height: 430px !important; min-height: 430px !important; max-height: 430px !important; margin: 0 !important; padding: 0 0 18px !important; overflow: hidden !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .slides-wrapper, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slides, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-list, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-slide, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-slide > div, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slide, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slide:not(.loading) { position: relative !important; height: 412px !important; min-height: 412px !important; max-height: 412px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-track { min-height: 412px !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .slide.loading { min-height: 412px !important; } /* ------------------------------------------------------------ B3. GRID INTERNO ------------------------------------------------------------ */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .products-grid, body.cms-index-index .block.widget.block-highlight.highlight-carousel .products-grid .product-items { height: 400px !important; min-height: 400px !important; max-height: 400px !important; margin-top: 0 !important; margin-bottom: 0 !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .products-grid .product-items { display: flex !important; align-items: stretch !important; padding-top: 0 !important; padding-bottom: 0 !important; overflow: visible !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item { height: 400px !important; min-height: 400px !important; max-height: 400px !important; margin-bottom: 0 !important; vertical-align: top !important; } /* ------------------------------------------------------------ B4. CARD ------------------------------------------------------------ */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; height: 400px !important; min-height: 400px !important; max-height: 400px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #fff !important; border: 1px solid #dfe5e1 !important; border-radius: 12px !important; box-shadow: 0 2px 8px rgba(0,0,0,.035), 0 7px 18px rgba(0,0,0,.04) !important; transform: none !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover { transform: translateY(-2px) !important; border-color: #d0dbd4 !important; box-shadow: 0 5px 13px rgba(0,0,0,.05), 0 11px 24px rgba(0,0,0,.07) !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:before, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:after, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover:before, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover:after { display: none !important; content: none !important; } /* ------------------------------------------------------------ B5. FOTO / PROLABELS ------------------------------------------------------------ */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .prolabels-wrapper { position: relative !important; display: block !important; flex: 0 0 242px !important; width: 100% !important; height: 242px !important; min-height: 242px !important; max-height: 242px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: linear-gradient( 180deg, #ffffff 0%, #ffffff 78%, #fafcfb 100% ) !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-photo { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 242px !important; min-height: 242px !important; max-height: 242px !important; margin: 0 !important; padding: 10px 14px !important; overflow: hidden !important; background: transparent !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-image-container { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-image-wrapper { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; padding: 0 !important; padding-bottom: 0 !important; overflow: hidden !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-image-photo { position: static !important; display: block !important; width: auto !important; height: auto !important; max-width: 94% !important; max-height: 220px !important; margin: auto !important; object-fit: contain !important; transform: none !important; transition: transform .25s ease !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover .product-image-photo { transform: scale(1.02) !important; } /* ProLabels acima das fotos */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .prolabel, body.cms-index-index .block.widget.block-highlight.highlight-carousel [class*="prolabel"] { z-index: 8 !important; } /* ------------------------------------------------------------ B6. INFORMAÇÕES 400px total - 242px imagem = 158px ------------------------------------------------------------ */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover .product-item-details { position: static !important; display: flex !important; flex-direction: column !important; flex: 0 0 158px !important; width: 100% !important; height: 158px !important; min-height: 158px !important; max-height: 158px !important; margin: 0 !important; padding: 10px 12px 9px !important; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: #fff !important; } /* ------------------------------------------------------------ B7. NOME ------------------------------------------------------------ */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-name { position: static !important; display: block !important; width: 100% !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; margin: 0 0 5px !important; padding: 0 !important; overflow: hidden !important; font-size: 12px !important; line-height: 18px !important; font-weight: 600 !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-name .product-item-link { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; width: 100% !important; height: 36px !important; overflow: hidden !important; color: #252a27 !important; text-decoration: none !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-name .product-item-link:hover { color: #00854a !important; } /* ------------------------------------------------------------ B8. PREÇO ------------------------------------------------------------ */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details .price-box, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:not(:hover) .price-box, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover .price-box { position: static !important; display: block !important; width: 100% !important; height: 23px !important; min-height: 23px !important; max-height: 23px !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; transform: none !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details .price-box .price-container { display: inline !important; margin: 0 !important; padding: 0 !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details .price-box .price { display: inline !important; color: #222825 !important; font-size: 17px !important; line-height: 23px !important; font-weight: 700 !important; } /* ------------------------------------------------------------ B9. PARCELAMENTO ------------------------------------------------------------ */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details .mm-price-parcels-grid, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:not(:hover) .mm-price-parcels-grid, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover .mm-price-parcels-grid { position: static !important; display: block !important; width: 100% !important; height: 16px !important; min-height: 16px !important; max-height: 16px !important; margin: 0 0 3px !important; padding: 0 !important; color: #858b87 !important; font-size: 10px !important; line-height: 16px !important; font-weight: 400 !important; opacity: 1 !important; visibility: visible !important; overflow: hidden !important; transform: none !important; } /* ------------------------------------------------------------ B10. PIX ------------------------------------------------------------ */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details [id="preco-a-vista-mm"], body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:not(:hover) [id="preco-a-vista-mm"], body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover [id="preco-a-vista-mm"] { position: static !important; display: block !important; float: none !important; clear: both !important; width: 100% !important; height: 25px !important; min-height: 25px !important; max-height: 25px !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; transform: none !important; clip: auto !important; clip-path: none !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details [id="preco-a-vista-mm"] p, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:not(:hover) [id="preco-a-vista-mm"] p, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover [id="preco-a-vista-mm"] p { position: static !important; display: inline-block !important; float: none !important; width: auto !important; height: 23px !important; margin: 0 !important; padding: 3px 6px !important; background: #edf8f0 !important; border: 1px solid #d5eadb !important; border-radius: 4px !important; color: #14833f !important; font-size: 10px !important; line-height: 15px !important; font-weight: 600 !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; } /* ------------------------------------------------------------ B11. REMOVE PAINEL DE AÇÕES DO HOVER ------------------------------------------------------------ */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-inner, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover .product-item-inner, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-actions, body.cms-index-index .block.widget.block-highlight.highlight-carousel .actions-primary, body.cms-index-index .block.widget.block-highlight.highlight-carousel .actions-secondary, body.cms-index-index .block.widget.block-highlight.highlight-carousel .action.tocart, body.cms-index-index .block.widget.block-highlight.highlight-carousel .action.tocompare { display: none !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-inner, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover .product-item-inner { position: static !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; border: 0 !important; box-shadow: none !important; } /* ------------------------------------------------------------ B12. NAVEGAÇÃO / PAGER ------------------------------------------------------------ */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-prev, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-next { z-index: 20 !important; width: 38px !important; height: 50px !important; background: rgba(255,255,255,.94) !important; border: 1px solid #dfe4e1 !important; border-radius: 8px !important; box-shadow: 0 3px 12px rgba(0,0,0,.08) !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .pager, body.cms-index-index .block.widget.block-highlight.highlight-carousel .actions-toolbar { display: none !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel + .block.widget.block-highlight.highlight-carousel { clear: both !important; margin-top: 0 !important; } /* ============================================================ B13. TABLET - HOME ============================================================ */ @media (min-width: 768px) and (max-width: 1024px) { body.cms-index-index .block.widget.block-highlight.highlight-carousel > .block-title strong { font-size: 24px !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel > .block-content { height: 405px !important; min-height: 405px !important; max-height: 405px !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .slides-wrapper, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slides, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-list, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-slide, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-slide > div, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slide, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slide:not(.loading) { height: 390px !important; min-height: 390px !important; max-height: 390px !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-track { min-height: 390px !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .products-grid, body.cms-index-index .block.widget.block-highlight.highlight-carousel .products-grid .product-items, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover { height: 380px !important; min-height: 380px !important; max-height: 380px !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .prolabels-wrapper, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-photo { flex-basis: 222px !important; height: 222px !important; min-height: 222px !important; max-height: 222px !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-image-photo { max-height: 200px !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover .product-item-details { flex-basis: 158px !important; height: 158px !important; min-height: 158px !important; max-height: 158px !important; } } /* ============================================================ B14. MOBILE - HOME 1 CARD POR VEZ + ROLAGEM HORIZONTAL ============================================================ */ @media (max-width: 767px) { /* ---------------- BLOCO ---------------- */ body.cms-index-index .block.widget.block-highlight.highlight-carousel { width: 100% !important; margin: 0 0 34px !important; padding: 0 !important; overflow: hidden !important; } /* ---------------- TÍTULO ---------------- */ body.cms-index-index .block.widget.block-highlight.highlight-carousel > .block-title { width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 28px 18px 20px !important; text-align: center !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel > .block-title strong { display: block !important; width: 100% !important; max-width: 360px !important; margin: 0 auto !important; padding: 0 !important; color: #202522 !important; font-size: 21px !important; line-height: 1.30 !important; font-weight: 700 !important; text-align: center !important; } /* ---------------- ESTRUTURA DO CARROSSEL ---------------- */ body.cms-index-index .block.widget.block-highlight.highlight-carousel > .block-content { width: 100% !important; height: 430px !important; min-height: 430px !important; max-height: 430px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .slides-wrapper, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slides, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-list, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-slide, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-slide > div, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slide, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slide:not(.loading) { height: 415px !important; min-height: 415px !important; max-height: 415px !important; margin: 0 !important; padding: 0 !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-list { overflow: hidden !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-track { min-height: 415px !important; } /* ---------------- FAIXA HORIZONTAL DE PRODUTOS ---------------- */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .products-grid { width: 100% !important; height: 415px !important; min-height: 415px !important; max-height: 415px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .products-grid .product-items { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; height: 415px !important; min-height: 415px !important; max-height: 415px !important; margin: 0 !important; padding: 4px 16px 10px !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-padding-left: 16px !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior-x: contain !important; touch-action: pan-x !important; scrollbar-width: none !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .products-grid .product-items::-webkit-scrollbar { display: none !important; width: 0 !important; height: 0 !important; } /* ---------------- 1 CARD POR VEZ ---------------- */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item { display: block !important; float: none !important; flex: 0 0 86vw !important; width: 86vw !important; min-width: 280px !important; max-width: 340px !important; height: 400px !important; min-height: 400px !important; max-height: 400px !important; margin: 0 !important; padding: 0 !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; } /* ---------------- CARD ---------------- */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; flex-direction: column !important; width: 100% !important; height: 400px !important; min-height: 400px !important; max-height: 400px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: #fff !important; border: 1px solid #dfe5e1 !important; border-radius: 13px !important; box-shadow: 0 2px 7px rgba(0,0,0,.035), 0 7px 18px rgba(0,0,0,.045) !important; transform: none !important; } /* touchscreen: sem efeito de "pular" */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover { transform: none !important; } /* ---------------- FOTO ---------------- */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .prolabels-wrapper { flex: 0 0 235px !important; width: 100% !important; height: 235px !important; min-height: 235px !important; max-height: 235px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-photo { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 235px !important; min-height: 235px !important; max-height: 235px !important; margin: 0 !important; padding: 12px 18px 9px !important; overflow: hidden !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-image-container { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-image-wrapper { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; padding: 0 !important; padding-bottom: 0 !important; overflow: hidden !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-image-photo { position: static !important; display: block !important; width: auto !important; height: auto !important; max-width: 94% !important; max-height: 210px !important; margin: auto !important; object-fit: contain !important; transform: none !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover .product-image-photo { transform: none !important; } /* ---------------- INFORMAÇÕES ---------------- */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover .product-item-details { position: static !important; display: flex !important; flex-direction: column !important; flex: 0 0 165px !important; width: 100% !important; height: 165px !important; min-height: 165px !important; max-height: 165px !important; margin: 0 !important; padding: 12px 14px 13px !important; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; transform: none !important; background: #fff !important; } /* ---------------- NOME ---------------- */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-name { display: block !important; width: 100% !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; margin: 0 0 6px !important; padding: 0 !important; overflow: hidden !important; font-size: 14px !important; line-height: 20px !important; font-weight: 600 !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-name .product-item-link { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; width: 100% !important; height: 40px !important; overflow: hidden !important; color: #252a27 !important; } /* ---------------- PREÇO ---------------- */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details .price-box, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:not(:hover) .price-box, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover .price-box { display: block !important; width: 100% !important; height: 25px !important; min-height: 25px !important; max-height: 25px !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details .price-box .price { display: inline !important; color: #202522 !important; font-size: 19px !important; line-height: 25px !important; font-weight: 700 !important; } /* ---------------- PARCELAMENTO ---------------- */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details .mm-price-parcels-grid, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:not(:hover) .mm-price-parcels-grid, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover .mm-price-parcels-grid { display: block !important; width: 100% !important; height: 17px !important; min-height: 17px !important; max-height: 17px !important; margin: 1px 0 5px !important; padding: 0 !important; color: #858b87 !important; font-size: 11px !important; line-height: 17px !important; overflow: hidden !important; opacity: 1 !important; visibility: visible !important; } /* ---------------- PIX ---------------- */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details [id="preco-a-vista-mm"], body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:not(:hover) [id="preco-a-vista-mm"], body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover [id="preco-a-vista-mm"] { position: static !important; display: block !important; width: 100% !important; height: 28px !important; min-height: 28px !important; max-height: 28px !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details [id="preco-a-vista-mm"] p, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:not(:hover) [id="preco-a-vista-mm"] p, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover [id="preco-a-vista-mm"] p { display: inline-flex !important; align-items: center !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 4px 8px !important; background: #edf8f0 !important; border: 1px solid #d5eadb !important; border-radius: 5px !important; color: #13833e !important; font-size: 11px !important; line-height: 16px !important; font-weight: 600 !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; } /* ---------------- AÇÕES ANTIGAS ---------------- */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-inner, body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-info:hover .product-item-inner { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; opacity: 0 !important; visibility: hidden !important; } /* Mantemos as setas do carousel de páginas do Swissup. A rolagem horizontal dentro de cada página funciona por toque. */ body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-prev, body.cms-index-index .block.widget.block-highlight.highlight-carousel .slick-next { z-index: 30 !important; width: 32px !important; height: 44px !important; opacity: .92 !important; } } /* ============================================================ B15. MOBILE MUITO ESTREITO ============================================================ */ @media (max-width: 360px) { body.cms-index-index .block.widget.block-highlight.highlight-carousel > .block-title strong { font-size: 19px !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item { flex-basis: 84vw !important; width: 84vw !important; min-width: 270px !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details { padding-left: 12px !important; padding-right: 12px !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-name { font-size: 13px !important; } body.cms-index-index .block.widget.block-highlight.highlight-carousel .product-item-details .price-box .price { font-size: 18px !important; } } /* ============================================================ PARTE C - RESULTADOS DE BUSCA Premium Ecológica Magento 2 + Swissup Argento Stripes Mantém a mesma linguagem visual das categorias ============================================================ */ /* ------------------------------------------------------------ C1. CABEÇALHO DA BUSCA ------------------------------------------------------------ */ body.catalogsearch-result-index .page-title-wrapper { margin: 8px 0 20px !important; } body.catalogsearch-result-index .page-title { margin: 0 !important; } body.catalogsearch-result-index .page-title .base { display: block !important; color: #202522 !important; font-size: 28px !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: -.35px !important; } /* ------------------------------------------------------------ C2. TOOLBAR SUPERIOR E INFERIOR ------------------------------------------------------------ */ body.catalogsearch-result-index .search.results > .toolbar-products, body.catalogsearch-result-index .search.results > .products + .toolbar-products { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px 16px !important; width: 100% !important; margin: 0 0 20px !important; padding: 11px 13px !important; box-sizing: border-box !important; background: #fff !important; border: 1px solid #e2e7e4 !important; border-radius: 12px !important; box-shadow: 0 2px 5px rgba(0,0,0,.02), 0 7px 20px rgba(0,0,0,.025) !important; } body.catalogsearch-result-index .search.results > .products + .toolbar-products { margin: 22px 0 0 !important; } /* quantidade de resultados */ body.catalogsearch-result-index .toolbar-products .toolbar-amount { float: none !important; margin: 0 auto 0 0 !important; padding: 0 !important; color: #59605c !important; font-size: 13px !important; line-height: 36px !important; font-weight: 500 !important; } /* modo grade/lista */ body.catalogsearch-result-index .toolbar-products .modes { float: none !important; display: flex !important; align-items: center !important; gap: 5px !important; margin: 0 !important; } body.catalogsearch-result-index .toolbar-products .modes-label { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; } body.catalogsearch-result-index .toolbar-products .modes-mode { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; margin: 0 !important; box-sizing: border-box !important; background: #fff !important; border: 1px solid #dce3df !important; border-radius: 8px !important; color: #6f7773 !important; box-shadow: none !important; } body.catalogsearch-result-index .toolbar-products .modes-mode.active, body.catalogsearch-result-index .toolbar-products .modes-mode:hover { background: #edf8f1 !important; border-color: #cde7d6 !important; color: #087f47 !important; } /* selects */ body.catalogsearch-result-index .toolbar-products .limiter, body.catalogsearch-result-index .toolbar-products .sorter { float: none !important; display: flex !important; align-items: center !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; } body.catalogsearch-result-index .toolbar-products .limiter .label, body.catalogsearch-result-index .toolbar-products .sorter-label, body.catalogsearch-result-index .toolbar-products .limiter-text { color: #666e69 !important; font-size: 12px !important; line-height: 36px !important; font-weight: 500 !important; } body.catalogsearch-result-index .toolbar-products select { height: 36px !important; margin: 0 !important; padding: 0 31px 0 10px !important; background-color: #fff !important; border: 1px solid #dce3df !important; border-radius: 8px !important; color: #333a36 !important; font-size: 12px !important; box-shadow: none !important; } body.catalogsearch-result-index .toolbar-products .sorter-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; margin: 0 !important; border: 1px solid #dce3df !important; border-radius: 8px !important; color: #087f47 !important; } /* ------------------------------------------------------------ C3. PAGINAÇÃO ------------------------------------------------------------ */ body.catalogsearch-result-index .toolbar-products .pages { float: none !important; margin: 0 !important; } body.catalogsearch-result-index .toolbar-products .pages .items { display: flex !important; align-items: center !important; gap: 5px !important; margin: 0 !important; padding: 0 !important; } body.catalogsearch-result-index .toolbar-products .pages .item { margin: 0 !important; } body.catalogsearch-result-index .toolbar-products .pages .page, body.catalogsearch-result-index .toolbar-products .pages .action { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 9px !important; box-sizing: border-box !important; background: #fff !important; border: 1px solid #dce3df !important; border-radius: 8px !important; color: #4f5853 !important; font-size: 12px !important; font-weight: 600 !important; } body.catalogsearch-result-index .toolbar-products .pages .current .page { background: #087f47 !important; border-color: #087f47 !important; color: #fff !important; } body.catalogsearch-result-index .toolbar-products .pages a.page:hover, body.catalogsearch-result-index .toolbar-products .pages .action:hover { background: #edf8f1 !important; border-color: #cde7d6 !important; color: #087f47 !important; } /* ------------------------------------------------------------ C4. GRID DE RESULTADOS ------------------------------------------------------------ */ body.catalogsearch-result-index .products-grid .product-items { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } body.catalogsearch-result-index .products-grid .product-item { display: flex !important; width: auto !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; } /* ------------------------------------------------------------ C5. CARD ------------------------------------------------------------ */ body.catalogsearch-result-index .products-grid .product-item-info, body.catalogsearch-result-index .products-grid .product-item-info:hover { position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; overflow: hidden !important; background: #fff !important; border: 1px solid #e4e9e6 !important; border-radius: 16px !important; box-shadow: 0 2px 5px rgba(0,0,0,.025), 0 8px 22px rgba(0,0,0,.04) !important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important; } body.catalogsearch-result-index .products-grid .product-item-info:hover { transform: translateY(-3px) !important; border-color: #d4ddd8 !important; box-shadow: 0 4px 10px rgba(0,0,0,.035), 0 14px 32px rgba(0,0,0,.075) !important; } body.catalogsearch-result-index .products-grid .product-item-info:before, body.catalogsearch-result-index .products-grid .product-item-info:after, body.catalogsearch-result-index .products-grid .product-item-info:hover:before, body.catalogsearch-result-index .products-grid .product-item-info:hover:after { display: none !important; content: none !important; } /* ------------------------------------------------------------ C6. PALCO DA FOTO ------------------------------------------------------------ */ body.catalogsearch-result-index .products-grid .prolabels-wrapper { position: relative !important; width: 100% !important; height: 265px !important; min-height: 265px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; background: linear-gradient( 180deg, #fcfdfc 0%, #f7faf8 100% ) !important; border-bottom: 1px solid #f0f2f1 !important; overflow: hidden !important; } body.catalogsearch-result-index .products-grid .prolabels-wrapper:before { content: "" !important; position: absolute !important; left: 50% !important; top: 50% !important; width: 230px !important; height: 230px !important; transform: translate(-50%, -48%) !important; border-radius: 50% !important; background: radial-gradient( circle, rgba(0,133,74,.075) 0%, rgba(0,133,74,.025) 48%, rgba(0,133,74,0) 72% ) !important; pointer-events: none !important; } body.catalogsearch-result-index .products-grid .product-item-photo { position: relative !important; z-index: 2 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 265px !important; margin: 0 !important; padding: 20px 25px !important; box-sizing: border-box !important; } body.catalogsearch-result-index .products-grid .product-image-container { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; height: 100% !important; margin: 0 auto !important; } body.catalogsearch-result-index .products-grid .product-image-wrapper { position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; padding: 0 !important; padding-bottom: 0 !important; } body.catalogsearch-result-index .products-grid .product-image-photo { position: static !important; display: block !important; width: auto !important; height: auto !important; max-width: 88% !important; max-height: 215px !important; margin: auto !important; object-fit: contain !important; transform: scale(1.12) !important; transition: transform .25s ease !important; } body.catalogsearch-result-index .products-grid .product-item-info:hover .product-image-photo { transform: scale(1.17) !important; } /* ProLabels */ body.catalogsearch-result-index .products-grid .prolabel, body.catalogsearch-result-index .products-grid [class*="prolabel"] { z-index: 8 !important; } /* ------------------------------------------------------------ C7. CONTEÚDO ------------------------------------------------------------ */ body.catalogsearch-result-index .products-grid .product-item-details, body.catalogsearch-result-index .products-grid .product-item-info:hover .product-item-details { position: static !important; display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; width: 100% !important; height: auto !important; min-height: 165px !important; margin: 0 !important; padding: 17px 18px 19px !important; box-sizing: border-box !important; background: #fff !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; transform: none !important; } /* nome */ body.catalogsearch-result-index .products-grid .product-item-name { display: block !important; min-height: 43px !important; margin: 0 0 10px !important; color: #292d2b !important; font-size: 14px !important; line-height: 1.48 !important; font-weight: 600 !important; } body.catalogsearch-result-index .products-grid .product-item-name a { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; overflow: hidden !important; color: #292d2b !important; text-decoration: none !important; } body.catalogsearch-result-index .products-grid .product-item-name a:hover { color: #00854a !important; } /* preço */ body.catalogsearch-result-index .products-grid .price-box { position: static !important; display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: auto 0 0 !important; padding: 0 !important; line-height: 1 !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } body.catalogsearch-result-index .products-grid .price-box .price { color: #222725 !important; font-size: 21px !important; line-height: 1.2 !important; font-weight: 700 !important; letter-spacing: -.3px !important; } /* parcelamento */ body.catalogsearch-result-index .products-grid .mm-price-parcels-grid { position: static !important; display: block !important; width: 100% !important; height: auto !important; max-height: none !important; margin: 5px 0 8px !important; padding: 0 !important; color: #7b817e !important; font-size: 11.5px !important; line-height: 17px !important; font-weight: 400 !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; transform: none !important; } /* pix */ body.catalogsearch-result-index .products-grid #preco-a-vista-mm, body.catalogsearch-result-index .products-grid [id="preco-a-vista-mm"] { position: static !important; display: block !important; width: 100% !important; height: auto !important; min-height: 29px !important; max-height: none !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; transform: none !important; clip: auto !important; clip-path: none !important; } body.catalogsearch-result-index .products-grid #preco-a-vista-mm p, body.catalogsearch-result-index .products-grid [id="preco-a-vista-mm"] p { display: inline-flex !important; align-items: center !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 6px 9px !important; background: #edf8f1 !important; border: 1px solid #d9eee0 !important; border-radius: 7px !important; color: #087f47 !important; font-size: 11.5px !important; line-height: 16px !important; font-weight: 700 !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; } body.catalogsearch-result-index .products-grid #preco-a-vista-mm p:before, body.catalogsearch-result-index .products-grid [id="preco-a-vista-mm"] p:before { content: "●" !important; margin-right: 6px !important; color: #00a85a !important; font-size: 8px !important; } /* ------------------------------------------------------------ C8. REMOVE O HOVER ANTIGO DO ARGENTO ------------------------------------------------------------ */ body.catalogsearch-result-index .products-grid .product-item-inner, body.catalogsearch-result-index .products-grid .product-item-info:hover .product-item-inner { display: none !important; position: static !important; width: 0 !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; margin: 0 !important; padding: 0 !important; opacity: 0 !important; visibility: hidden !important; overflow: hidden !important; box-shadow: none !important; border: 0 !important; } /* ------------------------------------------------------------ C9. FILTROS - DESKTOP ------------------------------------------------------------ */ @media (min-width: 768px) { body.catalogsearch-result-index .sidebar-main .block.filter { margin: 0 20px 0 0 !important; padding: 0 !important; background: #fff !important; border: 1px solid #e2e7e4 !important; border-radius: 14px !important; box-shadow: 0 2px 5px rgba(0,0,0,.02), 0 7px 20px rgba(0,0,0,.025) !important; overflow: hidden !important; } body.catalogsearch-result-index .sidebar-main .filter-title { display: block !important; margin: 0 !important; padding: 17px 18px 14px !important; border-bottom: 1px solid #edf0ee !important; } body.catalogsearch-result-index .sidebar-main .filter-title strong { position: static !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; color: #252b28 !important; font-size: 16px !important; line-height: 1.25 !important; font-weight: 700 !important; clip: auto !important; overflow: visible !important; } body.catalogsearch-result-index .sidebar-main .filter-content { padding: 0 18px 14px !important; } body.catalogsearch-result-index .sidebar-main .filter-subtitle { display: none !important; } body.catalogsearch-result-index .sidebar-main .filter-options-item { margin: 0 !important; padding: 0 !important; border-bottom: 1px solid #edf0ee !important; } body.catalogsearch-result-index .sidebar-main .filter-options-item:last-child { border-bottom: 0 !important; } body.catalogsearch-result-index .sidebar-main .filter-options-title { margin: 0 !important; padding: 15px 22px 15px 0 !important; color: #303632 !important; font-size: 13px !important; font-weight: 700 !important; } body.catalogsearch-result-index .sidebar-main .filter-options-content { margin: 0 !important; padding: 0 0 14px !important; } body.catalogsearch-result-index .sidebar-main .filter-options-content .item { margin: 0 !important; padding: 0 !important; } body.catalogsearch-result-index .sidebar-main .filter-options-content a { display: block !important; margin: 0 !important; padding: 7px 8px !important; border-radius: 7px !important; color: #56605a !important; font-size: 12.5px !important; line-height: 1.35 !important; transition: background .15s ease, color .15s ease !important; } body.catalogsearch-result-index .sidebar-main .filter-options-content a:hover { background: #edf8f1 !important; color: #087f47 !important; text-decoration: none !important; } } /* ------------------------------------------------------------ C10. TABLET ------------------------------------------------------------ */ @media (min-width: 640px) and (max-width: 1023px) { body.catalogsearch-result-index .products-grid .product-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; } } /* ------------------------------------------------------------ C11. MOBILE ------------------------------------------------------------ */ @media (max-width: 767px) { body.catalogsearch-result-index .page-title-wrapper { margin: 5px 0 14px !important; } body.catalogsearch-result-index .page-title .base { font-size: 22px !important; line-height: 1.28 !important; } /* botão de filtros do Magento */ body.catalogsearch-result-index .sidebar-main .filter-title { margin: 0 0 12px !important; } body.catalogsearch-result-index .sidebar-main .filter-title strong { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 44px !important; box-sizing: border-box !important; padding: 10px 15px !important; background: #fff !important; border: 1px solid #dce3df !important; border-radius: 9px !important; color: #087f47 !important; font-size: 13px !important; font-weight: 700 !important; box-shadow: 0 2px 6px rgba(0,0,0,.03) !important; } /* toolbar mais limpa */ body.catalogsearch-result-index .search.results > .toolbar-products, body.catalogsearch-result-index .search.results > .products + .toolbar-products { gap: 9px !important; margin-bottom: 14px !important; padding: 10px !important; border-radius: 10px !important; } body.catalogsearch-result-index .toolbar-products .toolbar-amount { order: 1 !important; width: 100% !important; margin: 0 !important; line-height: 24px !important; } body.catalogsearch-result-index .toolbar-products .modes { order: 2 !important; } body.catalogsearch-result-index .toolbar-products .sorter { order: 3 !important; margin-left: auto !important; } body.catalogsearch-result-index .toolbar-products .limiter { order: 4 !important; width: 100% !important; border-top: 1px solid #edf0ee !important; padding-top: 9px !important; } body.catalogsearch-result-index .toolbar-products .pages { order: 5 !important; width: 100% !important; padding-top: 3px !important; overflow-x: auto !important; scrollbar-width: none !important; } body.catalogsearch-result-index .toolbar-products .pages::-webkit-scrollbar { display: none !important; } body.catalogsearch-result-index .toolbar-products .pages .items { justify-content: flex-start !important; } body.catalogsearch-result-index .toolbar-products .limiter-text { line-height: 36px !important; } /* cards */ body.catalogsearch-result-index .products-grid .product-items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } body.catalogsearch-result-index .products-grid .prolabels-wrapper, body.catalogsearch-result-index .products-grid .product-item-photo { height: 190px !important; min-height: 190px !important; } body.catalogsearch-result-index .products-grid .product-item-photo { padding: 12px 10px !important; } body.catalogsearch-result-index .products-grid .product-image-photo { max-width: 92% !important; max-height: 150px !important; transform: scale(1.06) !important; } body.catalogsearch-result-index .products-grid .product-item-info:hover .product-image-photo { transform: scale(1.06) !important; } body.catalogsearch-result-index .products-grid .product-item-details, body.catalogsearch-result-index .products-grid .product-item-info:hover .product-item-details { min-height: 165px !important; padding: 13px 12px 15px !important; } body.catalogsearch-result-index .products-grid .product-item-name { min-height: 40px !important; font-size: 12px !important; } body.catalogsearch-result-index .products-grid .price-box .price { font-size: 17px !important; } body.catalogsearch-result-index .products-grid .mm-price-parcels-grid { font-size: 10.5px !important; line-height: 16px !important; } body.catalogsearch-result-index .products-grid [id="preco-a-vista-mm"] p { padding: 5px 7px !important; font-size: 10.5px !important; } } /* ------------------------------------------------------------ C12. CELULARES MENORES ------------------------------------------------------------ */ @media (max-width: 430px) { body.catalogsearch-result-index .products-grid .product-items { grid-template-columns: 1fr !important; gap: 14px !important; } body.catalogsearch-result-index .products-grid .prolabels-wrapper, body.catalogsearch-result-index .products-grid .product-item-photo { height: 235px !important; min-height: 235px !important; } body.catalogsearch-result-index .products-grid .product-image-photo { max-height: 200px !important; } body.catalogsearch-result-index .products-grid .product-item-name { font-size: 13px !important; } body.catalogsearch-result-index .products-grid .price-box .price { font-size: 19px !important; } body.catalogsearch-result-index .toolbar-products .sorter { width: 100% !important; margin-left: 0 !important; } body.catalogsearch-result-index .toolbar-products .sorter-label { flex: 0 0 auto !important; } body.catalogsearch-result-index .toolbar-products .sorter select { flex: 1 1 auto !important; min-width: 0 !important; } } /* ------------------------------------------------------------ C13. LIST VIEW Se o usuário mudar manualmente para "Lista". ------------------------------------------------------------ */ body.catalogsearch-result-index .products-list .product-item { margin: 0 0 16px !important; } body.catalogsearch-result-index .products-list .product-item-info { box-sizing: border-box !important; padding: 16px !important; background: #fff !important; border: 1px solid #e2e7e4 !important; border-radius: 14px !important; box-shadow: 0 2px 5px rgba(0,0,0,.02), 0 7px 20px rgba(0,0,0,.03) !important; } body.catalogsearch-result-index .products-list .product-item-name a { color: #292d2b !important; font-weight: 600 !important; } body.catalogsearch-result-index .products-list .price-box .price { color: #222725 !important; font-weight: 700 !important; } @media (max-width: 639px) { body.catalogsearch-result-index .products-list .product-item-info { padding: 12px !important; } } /* ===================== FIM PARTE C ========================== */ /* ========================= FIM ============================== */ /* ============================================================ PARTE D - CARRINHO / CÁLCULO DE FRETE SOMENTE POR CEP Premium Ecológica Magento 2.3.5-p2 + Argento Stripes OBJETIVO - simplificar o estimador de frete do carrinho - manter apenas o CEP visível para o cliente - preservar os campos de país/UF/cidade no DOM para o Magento ============================================================ */ /* Oculta País visualmente, sem remover o campo do DOM */ .checkout-cart-index #block-shipping .field[name="shippingAddress.country_id"] { display: none !important; } /* Oculta Estado / UF visualmente, sem remover o campo do DOM */ .checkout-cart-index #block-shipping .field[name="shippingAddress.region_id"], .checkout-cart-index #block-shipping .field[name="shippingAddress.region"] { display: none !important; } /* Oculta Cidade, caso seja renderizada */ .checkout-cart-index #block-shipping .field[name="shippingAddress.city"] { display: none !important; } /* Mantém o CEP visível */ .checkout-cart-index #block-shipping .field[name="shippingAddress.postcode"] { display: block !important; } /* ============================================================ PREMIUM ECOLÓGICA CARRINHO - FRETE SOMENTE POR CEP CORREÇÃO DE SELETORES MAGENTO UI COMPONENT ============================================================ */ /* * País, Estado/UF e Cidade continuam existindo no DOM. * Apenas não são exibidos para o cliente. * * Isso preserva o funcionamento do Magento, * Correios e MatrixRates/Braspress. */ /* PAÍS */ body.checkout-cart-index #block-shipping div[name="shippingAddress.country_id"] { display: none !important; } /* ESTADO / UF */ body.checkout-cart-index #block-shipping div[name="shippingAddress.region_id"] { display: none !important; } /* Campo alternativo de região */ body.checkout-cart-index #block-shipping div[name="shippingAddress.region"] { display: none !important; } /* CIDADE */ body.checkout-cart-index #block-shipping div[name="shippingAddress.city"] { display: none !important; } /* CEP permanece visível */ body.checkout-cart-index #block-shipping div[name="shippingAddress.postcode"] { display: block !important; } /* ===================== FIM PARTE D ========================== */ /* ========================================================= PREMIUM ECOLÓGICA CHECKOUT VISUAL V3 ========================================================= */ body.firecheckout { --premium-green: #00964c; --premium-green-dark: #007c40; --premium-green-soft: #edf8f1; --premium-text: #1c242a; --premium-muted: #69757d; --premium-border: #dce5e0; --premium-bg: #f6f8f7; } /* ========================================================= 1. ESTRUTURA GERAL ========================================================= */ body.firecheckout, body.firecheckout .page-wrapper { background: var(--premium-bg) !important; } body.firecheckout .firecheckout-header { background: #fff !important; border-bottom: 1px solid #e5ebe7 !important; } body.firecheckout .page-main { max-width: 1280px !important; margin: 0 auto !important; padding-top: 28px !important; padding-bottom: 45px !important; } /* ========================================================= 2. TÍTULO ========================================================= */ body.firecheckout .page-title-wrapper { margin-bottom: 20px !important; } body.firecheckout .page-title { margin: 0 !important; } body.firecheckout .page-title .base { color: var(--premium-text) !important; font-size: 34px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -.5px !important; } /* ========================================================= 3. BLOCOS PRINCIPAIS ========================================================= */ body.firecheckout .opc > li, body.firecheckout .opc-sidebar .opc-block-summary { border-color: var(--premium-border) !important; border-radius: 14px !important; box-shadow: none !important; } /* ========================================================= 4. TÍTULOS DAS ETAPAS ========================================================= */ body.firecheckout .step-title { color: var(--premium-text) !important; font-weight: 700 !important; } /* ========================================================= 5. CAMPOS ========================================================= */ body.firecheckout .field .label { color: #263139 !important; font-weight: 600 !important; } body.firecheckout input.input-text, body.firecheckout select { border: 1px solid #d8e0dc !important; border-radius: 7px !important; background: #fafcfb !important; box-shadow: none !important; } body.firecheckout input.input-text:focus, body.firecheckout select:focus { border-color: var(--premium-green) !important; box-shadow: 0 0 0 2px rgba(0, 150, 76, .08) !important; } /* ========================================================= 6. FORMAS DE PAGAMENTO COMO CARDS ========================================================= */ body.firecheckout .checkout-payment-method .payment-method { margin: 0 0 10px !important; border: 1px solid var(--premium-border) !important; border-radius: 12px !important; background: #fff !important; overflow: hidden !important; transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important; } body.firecheckout .checkout-payment-method .payment-method:hover { border-color: #b9cec2 !important; } body.firecheckout .checkout-payment-method .payment-method._active { border-color: var(--premium-green) !important; background: var(--premium-green-soft) !important; box-shadow: 0 0 0 1px var(--premium-green) !important; } /* tira divisórias antigas do Firecheckout */ body.firecheckout .checkout-payment-method .payment-method-title { border: 0 !important; padding: 14px 16px !important; margin: 0 !important; } /* nome da forma de pagamento */ body.firecheckout .checkout-payment-method .payment-method-title .label { color: var(--premium-text) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; } /* conteúdo aberto somente quando necessário */ body.firecheckout .checkout-payment-method .payment-method-content { margin: 0 !important; padding: 0 16px 14px 44px !important; color: var(--premium-muted) !important; font-size: 13px !important; line-height: 1.45 !important; } /* ========================================================= 7. PIX ========================================================= */ /* Selo de desconto ao lado do nome do método */ body.firecheckout .payment-method-pix .payment-method-title .label::after { content: "10% OFF"; display: inline-block; margin-left: 9px; padding: 4px 9px; border-radius: 20px; background: var(--premium-green); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; vertical-align: middle; } /* * O Magento/Checkmo usa o bloco .items.check.memo para exibir * o conteúdo cadastrado em "Mailing Address". * * Aqui mantemos esse conteúdo VISÍVEL para que apareçam: * - texto cadastrado no Admin * - razão social * - chave PIX / CNPJ * - instruções após a finalização */ body.firecheckout .payment-method-pix .items.check.memo { display: block !important; margin: 0 0 2px !important; padding: 13px 15px !important; background: #f4fbf7 !important; border: 1px solid #d3eadc !important; border-radius: 8px !important; } /* Remove apenas o título padrão do Check/Money Order */ body.firecheckout .payment-method-pix .items.check.memo .title { display: none !important; } /* Mantém o conteúdo cadastrado no Magento visível */ body.firecheckout .payment-method-pix .items.check.memo .content { display: block !important; margin: 0 !important; padding: 0 !important; color: var(--premium-muted) !important; font-size: 12.5px !important; line-height: 1.6 !important; } /* Endereço/instruções do PIX */ body.firecheckout .payment-method-pix .items.check.memo .checkmo.mailing.address, body.firecheckout .payment-method-pix .items.check.memo address { display: block !important; margin: 0 !important; padding: 0 !important; color: #33443b !important; font-size: 12.5px !important; font-style: normal !important; font-weight: 400 !important; line-height: 1.6 !important; white-space: normal !important; } /* * Caso o template renderize o bloco "payable", * ele não é necessário no PIX desta loja. * A chave e as instruções ficam no bloco "memo". */ body.firecheckout .payment-method-pix .items.check.payable { display: none !important; } /* Garante que a antiga mensagem via pseudo-elemento não apareça */ body.firecheckout .payment-method-pix .items.check.memo::before, body.firecheckout .payment-method-pix .items.check.memo::after { display: none !important; content: none !important; } /* ========================================================= 7B. PIX - PERSISTÊNCIA APÓS INICIALIZAÇÃO DO KNOCKOUT ========================================================= */ /* * O Firecheckout/Knockout aplica a visibilidade do conteúdo * do método alguns instantes após o primeiro paint da página. * * Quando PIX (checkmo) estiver realmente ativo, forçamos o * container do método e os blocos de instruções a permanecerem * visíveis. Isto evita o efeito: "aparece e logo depois some". */ body.firecheckout .payment-method-pix._active .payment-method-content { display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; } /* * Algumas versões/templates do OfflinePayments/Firecheckout * colocam o mailingAddress em .memo; outras estruturas podem * utilizar .payable ou .payment-method-note. * * Como o método está ativo, mantemos todos estes containers * disponíveis e escondemos apenas os títulos técnicos abaixo. */ body.firecheckout .payment-method-pix._active .items.check, body.firecheckout .payment-method-pix._active .items.check.memo, body.firecheckout .payment-method-pix._active .items.check.payable, body.firecheckout .payment-method-pix._active .payment-method-note { display: block !important; height: auto !important; max-height: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; } /* Conteúdo textual cadastrado no Admin */ body.firecheckout .payment-method-pix._active .items.check .content, body.firecheckout .payment-method-pix._active .payment-method-note .data, body.firecheckout .payment-method-pix._active .payment-method-note address { display: block !important; height: auto !important; max-height: none !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; white-space: normal !important; } /* * Não exibimos os rótulos técnicos do método Check/Money Order. * O cliente vê somente o texto comercial configurado para PIX. */ body.firecheckout .payment-method-pix._active .items.check .title, body.firecheckout .payment-method-pix._active .payment-method-note .title { display: none !important; } /* * Sobrescreve a regra anterior que ocultava .items.check.payable. * Ela pode conter o mailingAddress em algumas combinações * Magento 2.3 / Swissup. */ body.firecheckout .payment-method-pix._active .items.check.payable { display: block !important; } /* ========================================================= 8. CUPOM ========================================================= */ body.firecheckout .payment-option-title { color: var(--premium-green-dark) !important; font-size: 12px !important; font-weight: 700 !important; } /* ========================================================= 9. REMOVE BLOCO DUPLICADO DE REVISÃO DO ENDEREÇO ========================================================= */ /* * O endereço completo já está visível na coluna esquerda. * O frete continuará aparecendo normalmente nos totais. */ body.firecheckout .opc-block-shipping-information { display: none !important; } /* ========================================================= 10. RESUMO DO PEDIDO ========================================================= */ body.firecheckout .opc-block-summary { background: #fff !important; color: var(--premium-text) !important; } body.firecheckout .opc-block-summary .product-item { padding-top: 12px !important; padding-bottom: 12px !important; } /* título longo do produto ocupa no máximo 2 linhas */ body.firecheckout .opc-block-summary .product-item-name { display: -webkit-box !important; overflow: hidden !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--premium-text) !important; font-weight: 600 !important; line-height: 1.35 !important; } /* textos secundários */ body.firecheckout .opc-block-summary .product-item-details, body.firecheckout .opc-block-summary .product.options { color: var(--premium-muted) !important; font-size: 12px !important; } /* ========================================================= 11. TOTAIS ========================================================= */ body.firecheckout .opc-block-summary .table-totals th, body.firecheckout .opc-block-summary .table-totals td { padding-top: 7px !important; padding-bottom: 7px !important; border: 0 !important; font-size: 14px !important; } body.firecheckout .opc-block-summary .table-totals .mark { color: var(--premium-muted) !important; } body.firecheckout .opc-block-summary .table-totals .amount { color: var(--premium-text) !important; } /* Total final ganha destaque */ body.firecheckout .opc-block-summary .table-totals .grand.totals th, body.firecheckout .opc-block-summary .table-totals .grand.totals td { padding-top: 15px !important; border-top: 1px solid var(--premium-border) !important; } body.firecheckout .opc-block-summary .table-totals .grand.totals .mark, body.firecheckout .opc-block-summary .table-totals .grand.totals .amount { color: var(--premium-text) !important; font-size: 18px !important; font-weight: 700 !important; } body.firecheckout .opc-block-summary .table-totals .grand.totals .price { font-size: 24px !important; font-weight: 700 !important; } /* ========================================================= 12. BOTÃO FINAL ========================================================= */ body.firecheckout .action.primary.checkout, body.firecheckout .place-order .action.primary { min-height: 52px !important; border: 0 !important; border-radius: 9px !important; background: var(--premium-green) !important; color: #fff !important; font-size: 16px !important; font-weight: 700 !important; box-shadow: none !important; transition: background-color .18s ease, transform .18s ease !important; } body.firecheckout .action.primary.checkout:hover, body.firecheckout .place-order .action.primary:hover { background: var(--premium-green-dark) !important; } /* ========================================================= 13. CHECKBOX ENDEREÇO DE COBRANÇA ========================================================= */ body.firecheckout .billing-address-same-as-shipping-block { margin-top: 10px !important; color: var(--premium-muted) !important; font-size: 12px !important; } /* ========================================================= 14. MOBILE ========================================================= */ @media (max-width: 767px) { body.firecheckout .page-main { padding: 18px 12px 30px !important; } body.firecheckout .page-title .base { font-size: 27px !important; } body.firecheckout .checkout-payment-method .payment-method-title { padding: 14px 12px !important; } body.firecheckout .checkout-payment-method .payment-method-content { padding-left: 38px !important; padding-right: 12px !important; } body.firecheckout .opc-block-summary .table-totals .grand.totals .price { font-size: 22px !important; } }