/* ========================================================================== Doce Malicia - responsividade e polimento das paginas de produto Tema filho do StoreBiz 1.0.29 | WooCommerce 9.6.1 Escopo: arquivo de produtos (/loja/), categorias e produto individual. O header, o rodape e a home sao do Elementor e nao sao tocados aqui: todas as regras dependem de .dm-loja ou .dm-produto, que sao injetadas no pelo functions.php. Sumario 1. Variaveis 2. Grade de produtos (float -> CSS Grid) 3. Cartao 4. Imagem do cartao 5. Conteudo, titulo e preco 6. Botao adicionar ao carrinho 7. Cabecalho da loja, ordenacao e breadcrumb 8. Paginacao 9. Pagina de produto individual 10. Abas do produto 11. Alvos de toque, foco e movimento reduzido ========================================================================== */ /* -------------------------------------------------------------------------- 1. Variaveis -------------------------------------------------------------------------- */ body.dm-loja, body.dm-produto { --dm-gap: 14px; --dm-tap: 44px; /* minimo recomendado para toque */ --dm-raio: 12px; --dm-linha: rgba(0, 0, 0, .10); --dm-tinta: #16161c; --dm-fraco: #6b6b78; --dm-marca: var(--bs-primary, #DA3C3C); } @media (min-width: 700px) { body.dm-loja, body.dm-produto { --dm-gap: 20px; } } /* Imagem de produto nunca deve estourar a coluna. */ body.dm-loja .product-content img, body.dm-loja .product-content-outer img, body.dm-produto .summary img, body.dm-produto .woocommerce-tabs img, body.dm-produto .related img { max-width: 100%; height: auto; } /* -------------------------------------------------------------------------- 2. Grade de produtos O tema usa float com width:30.75% e cai para 100% abaixo de 576px, o que resulta em uma unica coluna e uma pagina de ~14700px no celular. A grade passa a ser CSS Grid: 2 colunas no celular, 3 no tablet, 4 no desktop e 5 em telas muito largas. -------------------------------------------------------------------------- */ body.dm-loja ul.products, body.dm-produto ul.products { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dm-gap); width: auto; margin: 0 0 8px !important; padding: 0 !important; list-style: none; } body.dm-loja ul.products > li.product, body.dm-produto ul.products > li.product, body.dm-loja ul.products > li.product.first, body.dm-loja ul.products > li.product.last, body.dm-produto ul.products > li.product.first, body.dm-produto ul.products > li.product.last { width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; clear: none !important; padding: 0 !important; } body.dm-loja ul.products > li.product > .product, body.dm-produto ul.products > li.product > .product { width: auto !important; max-width: none !important; float: none !important; margin: 0 !important; padding: 0 !important; height: 100%; } @media (min-width: 700px) { body.dm-loja ul.products, body.dm-produto ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { body.dm-loja ul.products, body.dm-produto ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1600px) { body.dm-loja ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* -------------------------------------------------------------------------- 3. Cartao -------------------------------------------------------------------------- */ body.dm-loja .product-single, body.dm-produto .product-single { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid var(--dm-linha); border-radius: var(--dm-raio); overflow: hidden; padding-bottom: 0 !important; /* mata o salto de layout no hover */ transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } /* O tema injeta padding-bottom:10% no :hover, o que empurra o conteudo a cada passagem do mouse. Aqui o espaco e sempre reservado (secao 6). */ body.dm-loja .product-single:hover, body.dm-loja .product-single:focus-within, body.dm-produto .product-single:hover, body.dm-produto .product-single:focus-within { padding-bottom: 0 !important; border-color: transparent; } @media (hover: hover) and (pointer: fine) { body.dm-loja .product-single:hover, body.dm-loja .product-single:focus-within, body.dm-produto .product-single:hover, body.dm-produto .product-single:focus-within { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(0, 0, 0, .12); } body.dm-loja .product-single:hover .product-img img, body.dm-produto .product-single:hover .product-img img { transform: scale(1.05); } } /* -------------------------------------------------------------------------- 4. Imagem do cartao - quadrada, sem distorcao -------------------------------------------------------------------------- */ body.dm-loja .product-img, body.dm-produto .product-img { position: relative; display: block; margin: 0; aspect-ratio: 1 / 1; overflow: hidden; background: #fff; } /* O tema pai emite DOIS dentro de .product-img: um link vazio (woocommerce-LoopProduct-link) e, depois, o link que segura a imagem. Dar height:100% aos dois empurra o segundo 100% para fora do quadro, e o overflow:hidden corta a imagem. Por isso so o link que tem ocupa o quadro; o link vazio vira uma sobreposicao clicavel. */ body.dm-loja .product-img > a, body.dm-produto .product-img > a { display: block; line-height: 0; font-size: 0; } body.dm-loja .product-img > a:has(img), body.dm-produto .product-img > a:has(img) { width: 100%; height: 100%; } body.dm-loja .product-img > a:not(:has(img)), body.dm-produto .product-img > a:not(:has(img)) { position: absolute; inset: 0; z-index: 2; width: auto; height: auto; } /* Reserva para navegadores sem :has(). */ body.dm-loja .product-img > a.woocommerce-LoopProduct-link, body.dm-produto .product-img > a.woocommerce-LoopProduct-link { position: absolute; inset: 0; z-index: 2; width: auto; height: auto; } @supports not selector(a:has(img)) { body.dm-loja .product-img > a:not(.woocommerce-LoopProduct-link), body.dm-produto .product-img > a:not(.woocommerce-LoopProduct-link) { width: 100%; height: 100%; } } body.dm-loja .product-img img, body.dm-produto .product-img img { display: block; width: 100% !important; height: 100% !important; max-width: none; margin: 0; border-radius: 0; object-fit: cover; object-position: center; transition: transform .4s ease; } /* Faixa de promocao */ body.dm-loja .sale-ribbon, body.dm-produto .sale-ribbon { position: absolute; top: 8px; left: 8px; z-index: 2; margin: 0; font-size: 11px; line-height: 1; } /* -------------------------------------------------------------------------- 5. Conteudo, titulo e preco -------------------------------------------------------------------------- */ body.dm-loja .product-content-outer, body.dm-produto .product-content-outer { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 10px 10px 0; } body.dm-loja .product-content, body.dm-produto .product-content { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; width: 100%; } /* Estrelas: altura fixa para todos os cartoes ficarem alinhados. */ body.dm-loja .pro-rating, body.dm-produto .pro-rating { height: 16px; overflow: hidden; margin: 0 0 4px; font-size: 11px; line-height: 16px; } @media (max-width: 575px) { body.dm-loja .pro-rating, body.dm-produto .pro-rating { display: none; } } /* Titulo: no maximo 2 linhas, com espaco reservado, para os cards de uma linha ficarem na mesma altura dos demais. */ body.dm-loja .product-content h2, body.dm-loja .product-content h3, body.dm-produto .product-content h2, body.dm-produto .product-content h3 { margin: 0 0 6px !important; padding: 0; font-size: clamp(12px, 0.55rem + 1.1vw, 15px); font-weight: 600; line-height: 1.35; color: var(--dm-tinta); min-height: 2.7em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; word-break: normal; } body.dm-loja .product-content h2 a, body.dm-loja .product-content h3 a, body.dm-produto .product-content h2 a, body.dm-produto .product-content h3 a { color: inherit; text-decoration: none; } /* Preco sempre no rodape do conteudo. */ body.dm-loja .product-content .price, body.dm-produto .product-content .price { margin: auto 0 0; padding: 0; font-size: clamp(14px, 0.6rem + 1.4vw, 19px); font-weight: 700; line-height: 1.2; color: var(--dm-marca); overflow-wrap: break-word; } body.dm-loja .product-content .price del, body.dm-produto .product-content .price del { font-size: .72em; font-weight: 500; color: var(--dm-fraco); opacity: 1; margin-right: .4em; } body.dm-loja .product-content .price ins, body.dm-produto .product-content .price ins { text-decoration: none; } /* -------------------------------------------------------------------------- 6. Botao adicionar ao carrinho Diagnostico: o tema define .product-action com opacity:0 e so aparece no :hover. Em celular o botao fica invisivel e inacessivel, e a caixa tem 35px de altura, abaixo do minimo de 44px para toque. -------------------------------------------------------------------------- */ body.dm-loja .product-content-outer > .product-action, body.dm-produto .product-content-outer > .product-action { display: flex; align-items: stretch; gap: 8px; width: 100%; margin: 0; text-align: center; } body.dm-loja .product-action .button, body.dm-produto .product-action .button, body.dm-loja .product-action a.button, body.dm-produto .product-action a.button, body.dm-loja .product-action .add_to_cart_button, body.dm-produto .product-action .add_to_cart_button { flex: 1 1 auto; min-width: 0; max-width: none !important; min-height: var(--dm-tap); padding: 8px 10px !important; margin: 0 !important; border-radius: 10px; font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: normal; text-align: center; display: flex; align-items: center; justify-content: center; box-shadow: none; } /* Com mouse: mantem o revelador do tema, mas sem salto de layout - o espaco e reservado sempre e o botao fica ancorado no rodape do cartao. */ @media (hover: hover) and (pointer: fine) { body.dm-loja .product-content-outer, body.dm-produto .product-content-outer { padding-bottom: 58px; } body.dm-loja ul.products li.product .product-action, body.dm-produto ul.products li.product .product-action { top: auto !important; bottom: 9px !important; left: 10px !important; right: 10px !important; margin: 0 !important; opacity: 0 !important; pointer-events: none !important; transition: opacity .22s ease; } body.dm-loja ul.products li.product .product-single:hover .product-action, body.dm-loja ul.products li.product .product-single:focus-within .product-action, body.dm-produto ul.products li.product .product-single:hover .product-action, body.dm-produto ul.products li.product .product-single:focus-within .product-action { opacity: 1 !important; pointer-events: auto !important; } } /* Sem mouse: o botao fica sempre visivel e dentro do fluxo. Esta regra vem depois para vencer tambem nos dispositivos hibridos. */ @media (hover: none), (pointer: coarse) { body.dm-loja .product-content-outer, body.dm-produto .product-content-outer { padding-bottom: 0; } body.dm-loja .product-content-outer > .product-action, body.dm-produto .product-content-outer > .product-action { position: static !important; top: auto !important; bottom: auto !important; left: auto !important; right: auto !important; height: auto !important; margin: 8px 0 0 !important; padding: 0 0 10px; opacity: 1 !important; transform: none !important; pointer-events: auto !important; } } /* -------------------------------------------------------------------------- 7. Cabecalho da loja, ordenacao e breadcrumb -------------------------------------------------------------------------- */ body.dm-loja section#product.product-section, body.dm-produto section#product.product-section { padding-bottom: 8px; } @media (max-width: 767px) { body.dm-loja section#product.product-section, body.dm-produto section#product.product-section { padding-top: 20px !important; padding-bottom: 28px !important; } } body.dm-loja .product-section h1, body.dm-loja .woocommerce-products-header__title, body.dm-produto .product-section h1, body.dm-produto .product_title { font-size: clamp(21px, 1.1rem + 2.2vw, 34px); line-height: 1.2; overflow-wrap: break-word; } body.dm-produto .product_title { margin-bottom: 8px !important; } /* Contagem de resultados e ordenacao: mesma linha no celular. */ body.dm-loja .woocommerce-ordering, body.dm-loja .woocommerce-result-count { margin: 0 0 14px; font-size: 13px; color: var(--dm-fraco); } body.dm-loja .woocommerce-ordering select { min-height: var(--dm-tap); max-width: 100%; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--dm-linha); background: #fff; } body.dm-loja .woocommerce-breadcrumb { margin: 0 0 12px; padding: 0 0 6px; font-size: 12px; color: var(--dm-fraco); white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } body.dm-loja .woocommerce-breadcrumb a { color: var(--dm-fraco); } /* -------------------------------------------------------------------------- 8. Paginacao -------------------------------------------------------------------------- */ body.dm-loja .woocommerce-pagination, body.dm-produto .woocommerce-pagination { margin: 28px 0 8px; } body.dm-loja .woocommerce-pagination ul, body.dm-produto .woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; border: 0; list-style: none; } body.dm-loja .woocommerce-pagination ul li, body.dm-produto .woocommerce-pagination ul li { float: none; margin: 0; padding: 0; border: 0; background: transparent; } body.dm-loja .woocommerce-pagination .page-numbers, body.dm-produto .woocommerce-pagination .page-numbers, body.dm-loja .woocommerce-pagination a, body.dm-produto .woocommerce-pagination a, body.dm-loja .woocommerce-pagination span, body.dm-produto .woocommerce-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: var(--dm-tap); min-height: var(--dm-tap); padding: 0 10px; border: 1px solid var(--dm-linha); border-radius: 10px; background: #fff; color: var(--dm-tinta); font-weight: 600; line-height: 1; text-decoration: none; } body.dm-loja .woocommerce-pagination .page-numbers.current, body.dm-produto .woocommerce-pagination .page-numbers.current { background: var(--dm-marca); border-color: var(--dm-marca); color: #fff; } body.dm-loja .woocommerce-pagination .page-numbers.dots, body.dm-produto .woocommerce-pagination .page-numbers.dots { border-color: transparent; background: transparent; } /* -------------------------------------------------------------------------- 9. Pagina de produto individual Hoje galeria (445px) e resumo (445px) ficam empilhados dentro de um contÃªiner de 928px, sobrando vazio nas laterais. No desktop eles passam para duas colunas; as abas ocupam a largura toda. -------------------------------------------------------------------------- */ @media (min-width: 992px) { body.dm-produto div.product { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-areas: "galeria resumo" "abas abas"; gap: 34px 40px; align-items: start; margin: 0 !important; } body.dm-produto .woocommerce-product-gallery { grid-area: galeria; width: auto !important; float: none !important; margin: 0 0 10px !important; } body.dm-produto .summary { grid-area: resumo; width: auto !important; float: none !important; margin: 0 !important; align-self: start; } body.dm-produto .woocommerce-tabs { grid-area: abas; width: 100% !important; float: none !important; clear: both; margin: 0 !important; } } @media (max-width: 991px) { body.dm-produto div.product { display: block; } body.dm-produto .woocommerce-product-gallery, body.dm-produto .summary, body.dm-produto .woocommerce-tabs { width: 100% !important; float: none !important; margin: 0 0 22px !important; } } /* Galeria */ body.dm-produto .woocommerce-product-gallery { margin-bottom: 22px; } body.dm-produto .woocommerce-product-gallery__image { max-width: 100%; } body.dm-produto .woocommerce-product-gallery__image img { max-width: 100%; height: auto; } body.dm-produto .flex-control-thumbs { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 8px; list-style: none; } body.dm-produto .flex-control-thumbs li { width: 68px; flex: 0 0 68px; } /* Resumo */ body.dm-produto .summary .price { font-size: clamp(20px, 1rem + 2.4vw, 30px); font-weight: 700; color: var(--dm-marca); margin: 6px 0 10px; } body.dm-produto .summary .stock { font-size: 13px; margin: 0 0 12px; } body.dm-produto form.cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin: 14px 0 16px; } body.dm-produto form.cart .quantity { float: none; width: auto; margin: 0; display: flex; align-items: stretch; } body.dm-produto form.cart .quantity input.qty { min-width: 62px; min-height: var(--dm-tap); padding: 0 8px; border: 1px solid var(--dm-linha); border-radius: 10px; font-size: 15px; text-align: center; } body.dm-produto form.cart button, body.dm-produto form.cart input[type="submit"] { flex: 1 1 200px; min-height: 50px; padding: 12px 18px; border: 0; border-radius: 10px; font-size: 15px; font-weight: 700; line-height: 1.2; cursor: pointer; } body.dm-produto .product_meta { font-size: 13px; line-height: 1.7; } body.dm-produto .product_meta > div { margin-bottom: 10px; } body.dm-produto .addtoany_list { margin-top: 8px; } /* -------------------------------------------------------------------------- 10. Abas do produto -------------------------------------------------------------------------- */ body.dm-produto .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 18px; padding: 0 0 10px; border-bottom: 1px solid var(--dm-linha); } body.dm-produto .woocommerce-tabs ul.tabs::before, body.dm-produto .woocommerce-tabs ul.tabs::after, body.dm-produto .woocommerce-tabs ul.tabs li::before, body.dm-produto .woocommerce-tabs ul.tabs li::after { content: none !important; } body.dm-produto .woocommerce-tabs ul.tabs li { float: none; margin: 0; padding: 0; border: 0; background: transparent; font-size: 13.5px; } body.dm-produto .woocommerce-tabs ul.tabs li a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font-weight: 600; color: var(--dm-fraco); text-decoration: none; } body.dm-produto .woocommerce-tabs ul.tabs li.active { border: 0; border-radius: 999px; background: var(--dm-marca); } body.dm-produto .woocommerce-tabs ul.tabs li.active a { color: #fff; } body.dm-produto .woocommerce-tabs .panel { padding: 4px 0 0; } body.dm-produto .woocommerce-tabs .panel img { max-width: 100%; height: auto; } body.dm-produto .woocommerce-tabs .panel h2 { font-size: 18px; margin-top: 20px; } body.dm-produto .woocommerce-tabs .panel table { width: 100%; border-collapse: collapse; } body.dm-produto .woocommerce-tabs .panel th, body.dm-produto .woocommerce-tabs .panel td { padding: 9px 10px; border: 1px solid var(--dm-linha); text-align: left; font-size: 13.5px; } body.dm-produto .woocommerce-tabs .panel th { background: #fafafa; font-weight: 600; } /* -------------------------------------------------------------------------- 11. Alvos de toque, foco e movimento reduzido -------------------------------------------------------------------------- */ body.dm-loja, body.dm-produto { -webkit-tap-highlight-color: rgba(0, 0, 0, .06); } body.dm-loja a:focus-visible, body.dm-produto a:focus-visible, body.dm-loja button:focus-visible, body.dm-produto button:focus-visible, body.dm-loja select:focus-visible, body.dm-produto select:focus-visible { outline: 3px solid var(--dm-marca); outline-offset: 2px; border-radius: 6px; } body.dm-loja input[type="submit"], body.dm-produto input[type="submit"], body.dm-loja .button, body.dm-produto .button { touch-action: manipulation; } @media (prefers-reduced-motion: reduce) { body.dm-loja *, body.dm-produto * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }