, não

— sem media query: agora o PHP (content-product-dcwb-shopee.php) decide sozinho entre o botão cheio e este seletor+ícone, nunca os dois ao mesmo tempo, então vale em qualquer largura de tela, sem precisar de :has() pra esconder o botão cheio. */ .dcwb-shopee-card__quick { display: flex; align-items: center; gap: 8px; } .dcwb-shopee-card__stepper { display: flex; align-items: center; flex: 0 0 auto; height: 40px; border: 2px solid var(--dcwb-shopee-border); border-radius: 999px; overflow: hidden; } .dcwb-shopee-card__step { -webkit-appearance: none; appearance: none; border: 0; background: #f3f4f6; flex: 0 0 auto; width: 30px; height: 100%; font-size: 16px; font-weight: 700; color: var(--dcwb-shopee-text); cursor: pointer; } .dcwb-shopee-card__step:hover { background: #e5e7eb; } /* !important throughout: Woodmart's own global form styling (input[type='number']{width:100%;padding:0 15px;border:...}) has higher CSS specificity than a single class selector (element+attribute beats a bare class), so it was silently winning the cascade regardless of source order — the qty box was actually rendering at 100% of the stepper's width the whole time, ballooning the stepper and pushing the "+" button out of view. This is what every earlier "should be fixed" check missed: the CSS file itself was correct, but a higher-specificity rule elsewhere on the page was overriding it. */ .dcwb-shopee-card__qty { -moz-appearance: textfield; flex: 0 0 auto !important; width: 32px !important; max-width: 32px !important; min-width: 0 !important; height: 100% !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; font-size: 13px; font-weight: 700; color: var(--dcwb-shopee-text); } .dcwb-shopee-card__qty::-webkit-outer-spin-button, .dcwb-shopee-card__qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .dcwb-shopee-card__cart-btn { display: flex; align-items: center; justify-content: center; gap: 6px; position: relative; flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 10px; border-radius: 999px; background: var(--dcwb-shopee-green); color: #fff !important; overflow: hidden; transition: background 0.15s ease; } .dcwb-shopee-card__cart-btn:hover { background: var(--dcwb-shopee-green-dark); } .dcwb-shopee-card__cart-btn svg { width: 17px; height: 17px; flex: 0 0 auto; } /* Icon-only by default (matches every multi-column grid — shop/category archive, 2-4 per row, always the narrowest card width on the site: no amount of shrinking makes "COMPRAR" fit reliably next to the qty stepper there, min-width:0 just moved the clipping from the card edge to inside the button). The text label is only turned back on, below, inside the wide single-column contexts (home carousels, related products) where there's actually room for it. */ .dcwb-shopee-card__cart-btn-label { display: none; font-size: 11px; font-weight: 800; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .dcwb-shopee-card__cart-btn { flex: 0 0 auto; width: 40px; padding: 0; border-radius: 50%; } /* Depois de adicionar via AJAX, o WooCommerce/Woodmart mexe no conteúdo desse botão de um jeito que não dá pra prever com certeza (injeta link de texto "Ver carrinho" como irmão, e às vezes troca o conteúdo interno do próprio botão) — por isso o estado "adicionado" não depende de NENHUM ícone/markup sobrevivendo aqui dentro. A única coisa garantida é a classe "added" no botão em si (isso o WooCommerce sempre faz). Escondemos tudo que não seja a classe "added" e desenhamos o check só com CSS puro. */ .dcwb-shopee-card__quick > *:not(.dcwb-shopee-card__stepper):not(.dcwb-shopee-card__cart-btn) { display: none !important; } .dcwb-shopee-card__cart-btn { font-size: 0; line-height: 0; } .dcwb-shopee-card__cart-btn.added { background: #5B25B1 !important; } /* Esconde qualquer conteúdo que tenha sobrado dentro do botão (ícone original, texto, o que for) assim que ele estiver marcado como "adicionado" — só o ::after abaixo aparece nesse estado. */ .dcwb-shopee-card__cart-btn.added > * { display: none !important; } .dcwb-shopee-card__cart-btn.added::after { content: ''; position: absolute; width: 12px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -2px); } /* Mobile card layout: kept vertical (image on top, full width), same as desktop — an earlier version forced a horizontal image-left/info-right row here, which squeezed the product photo down to ~38% width and read as cramped/small on a full-width single-column card (shop/category listing and the home page's own swiper carousels are both 1-per-row on mobile already, so there's no space pressure that a row layout was solving). No overrides needed — the base .dcwb-shopee-card rules (flex-direction: column, full-width square image) apply as-is. */ /* Home page product carousels ("Categorias em Destaque" wd_products widgets): on mobile each slide was exactly 100% width, so nothing from the next card was visible — no hint the row is swipeable. Woodmart's own carousel sizing is entirely driven by the --wd-col custom property (calc(100% / var(--wd-col)) on .wd-carousel-item, see style.css), which at mobile widths reads --wd-col-sm (set inline per-widget to a whole number, "1", by the Elementor widget's own "columns" setting). Overriding it here to a fractional value reuses that same calc() instead of adding a second, competing width rule — the slide becomes ~89% wide, leaving a peek of the next product. :has() scopes this to carousels that actually hold our custom card, so Woodmart's other native sliders (blog, testimonials, etc.) are untouched. */ @media (max-width: 768.98px) { .wd-carousel-container:has(.dcwb-shopee-card) .wd-carousel.wd-grid { --wd-col-sm: 1.12 !important; } } /* This same card renders at very different widths: a narrow shop-grid slot (2-4 per row, marked "elements-grid" by Woodmart) and a full-width single-item carousel slide (the home page's "Categorias em Destaque" widgets — wd-carousel-container, one huge product photo per slide). Font/spacing sized for the narrow grid read as small and disproportionate once the photo above them is 2-3x bigger. Scoped by the carousel container's own class rather than a viewport media query (the grid is also single-column on mobile, so a max-width query couldn't tell the two apart) and rather than a CSS container query (tried first — .dcwb-shopee- card is an unsized flex child of ".swiper-slide:has(...){display:flex}" above, and adding container-type:inline-size there visibly broke the quantity stepper/button row in production; reverted). */ /* A foto quadrada a 100% da largura do card fica enorme em pixels reais nesse contexto largo (1 card ocupando quase a tela toda no mobile), bem diferente da mesma imagem no grid estreito da loja -- é isso que fazia o card não caber na tela sem rolar. Altura fixa + object-fit:contain (já herdado) centraliza a foto (ainda inteira, sem cortar) num espaço menor, como a maioria das lojas faz em carrosséis largos. */ .wd-carousel-container .dcwb-shopee-card__image, .related-products .dcwb-shopee-card__image { height: 220px; } .wd-carousel-container .dcwb-shopee-card__image img, .related-products .dcwb-shopee-card__image img, .wd-carousel-container .dcwb-shopee-card__hover-img, .related-products .dcwb-shopee-card__hover-img { height: 100%; aspect-ratio: auto; } .wd-carousel-container .dcwb-shopee-card__body, .related-products .dcwb-shopee-card__body { gap: 6px; padding: 14px 16px 4px; } .wd-carousel-container .dcwb-shopee-card__title, .related-products .dcwb-shopee-card__title { font-size: 15px; } .wd-carousel-container .dcwb-shopee-price-installments, .related-products .dcwb-shopee-price-installments, .wd-carousel-container .dcwb-shopee-price-note, .related-products .dcwb-shopee-price-note { font-size: 13px; } .wd-carousel-container .dcwb-shopee-price-was, .related-products .dcwb-shopee-price-was { font-size: 14px; } .wd-carousel-container .dcwb-shopee-price-main, .related-products .dcwb-shopee-price-main { font-size: 25px; } .wd-carousel-container .dcwb-shopee-card__footer, .related-products .dcwb-shopee-card__footer { padding: 10px 16px 16px; } .wd-carousel-container .dcwb-shopee-card__stepper, .related-products .dcwb-shopee-card__stepper { height: 46px; } .wd-carousel-container .dcwb-shopee-card__step, .related-products .dcwb-shopee-card__step { width: 36px; font-size: 19px; } .wd-carousel-container .dcwb-shopee-card__qty, .related-products .dcwb-shopee-card__qty { width: 38px !important; max-width: 38px !important; font-size: 14px; } .wd-carousel-container .dcwb-shopee-card__cart-btn, .related-products .dcwb-shopee-card__cart-btn { flex: 1 1 auto; width: auto; height: 46px; padding: 0 10px; border-radius: 999px; } /* Ícone + palavra "COMPRAR" juntos brigavam por espaço com o stepper (minus/qty/plus) na mesma linha -- o texto sempre perdia e cortava no meio ("COMPR"), sem reticências, porque overflow:hidden só corta mesmo. Ícone é redundante ao lado da palavra por extenso (só faz sentido no card estreito da loja, onde a palavra nem cabe) -- removido aqui, sobrando espaço de verdade pro texto. text-overflow:ellipsis fica como rede de segurança caso ainda falte espaço numa tela bem pequena. */ .wd-carousel-container .dcwb-shopee-card__cart-btn svg, .related-products .dcwb-shopee-card__cart-btn svg { display: none; } .wd-carousel-container .dcwb-shopee-card__cart-btn-label, .related-products .dcwb-shopee-card__cart-btn-label { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 13px; } .wd-carousel-container .dcwb-shopee-card__discount-badge, .related-products .dcwb-shopee-card__discount-badge { min-width: 46px; height: 46px; font-size: 13px; } /* "Fly to cart" feedback (product-card-shopee.js): quick bump on the header cart icon when the flying image clone lands on it. */ @keyframes dcwbCartBump { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 65% { transform: scale(0.94); } 100% { transform: scale(1); } } .dcwb-cart-bump { animation: dcwbCartBump 0.32s ease; }