/** * Supra Force — Home product grid, responsive column overrides * (Tablet + Mobile). * * Isolated override for a bug in the PARENT THEME's own stylesheet * (hello-commerce/assets/css/custom-home-products.css): its 4-column base * rule — * body.home .woocommerce ul.products li.product { * flex: 0 0 23% !important; width: 23% !important; max-width: 23% !important; * } * — has no media query and sits AFTER that same file's own tablet * (max-width:1024px) and mobile (max-width:768px) media queries in source * order. Same selector, same specificity, same !important weight — with * all three equal, the LAST rule in the file wins the cascade regardless * of viewport, so the unconditional 4-column rule always beats both * media queries, at every width. They are dead code today, not missing * code. * * NOT fixed by reordering/editing that theme file directly, for two * reasons: (1) it belongs to the parent theme (hello-commerce) and any * theme update would silently overwrite the fix (see * docs/RESPONSIVE-AUDIT-SUPRA-FORCE.md, Seção 13 — governance finding * already on record for this exact file); (2) fixing tablet or mobile by * touching that file's structure would reactivate ALL of its dead rules * at once, including whichever ones hadn't been explicitly approved yet * at each stage of this work. * * Instead: this file is enqueued in supra-force-custom.php as an explicit * dependent of the theme's own 'supra-force-home-product-cards' handle — * guaranteeing this always prints after it in , regardless of any * future change to that file's own internal rule order. Because of that, * every override below only ever needs to win by *source order*, not by * artificially raised specificity. * * !important below is required, and is not a workaround: the theme's * currently-winning rule (the 23% one) also uses !important on the exact * same three properties. Without matching !important here, this file's * plain (non-!important) declarations would still lose to the theme's * !important ones, even loading later — !important always outranks * normal declarations regardless of source order. * * Scope discipline: body.home only (mirrors the theme file's own * scoping — this can never reach category, single-product, cart or * checkout pages, all of which use a completely separate implementation, * supra-force-custom/assets/css/product-archive.css, untouched here). * * FULL COLUMN CONTRACT (approved 2026-07-23, all validated live): * Desktop >=1025px 4 columns (unchanged — theme's own base rule) * Tablet 768px–1024px 3 columns (this file) * Mobile amplo 480px–767px 2 columns (this file) * Mobile estreito <=479px 1 column (this file) * * The 480px split is a documented, deliberately-scoped exception to the * project's normal 3-tier breakpoint contract (docs/RESPONSIVE-GOVERNANCE- * SUPRA-FORCE.md, Seção 8 — extra breakpoints require a proven real break * that flex/grid/clamp alone can't resolve within the official tiers). * Justification, measured against the container's own frozen mobile * padding (16px each side, elementor-element-30c8485): * - a single column across the full 320-767px mobile range makes the * card ~720px wide at 767px — disproportionately large, low content * density for the widest phones/phablets in range; * - two columns across that same full range leaves only ~98px of * usable card width (after the card's own 20px internal padding) at * 320px — real risk of the two-line "ADICIONAR AO PEDIDO" button * wrapping awkwardly at the narrowest supported width. * Neither a single mobile rule nor a fluid clamp() resolves both ends * without compromising one of them, hence the explicit split — scoped * exclusively to this file/component, not a change to the project's * official breakpoint contract itself (Mobile as a whole is still * <=767px; this is a column-count refinement inside it, not a new * top-level breakpoint). */ @media (min-width: 768px) and (max-width: 1024px) { /* Tablet — 3 columns: (100% - 3 × 2% margin) / 3 = 31.333333%, matching the theme's own per-card margin (1% each side, 2% total) so 3 cards + their margins sum to exactly 100%, same technique the theme file already uses for its own 4/2/1-column math. */ body.home .woocommerce ul.products li.product { flex: 0 0 31.333333% !important; width: 31.333333% !important; max-width: 31.333333% !important; } } @media (min-width: 480px) and (max-width: 767px) { /* Mobile amplo — 2 columns: 2 × 48% + 2 × 2% margin = 100%, same per-card margin (1% each side) preserved from the theme's own rule. */ body.home .woocommerce ul.products li.product { flex: 0 0 48% !important; width: 48% !important; max-width: 48% !important; } } @media (max-width: 479px) { /* Mobile estreito — 1 column: 98% + 2% margin = 100%. Deliberately 98% with the existing 1%-each-side margin preserved, not 100% with margin — dropping the margin while keeping width:100% would add the margin back on top of a full-width box and reintroduce the exact overflow pattern already fixed on the 30c8485 container (docs/HANDOFF-RESPONSIVE-FOOTER-SUPRA-FORCE.md). */ body.home .woocommerce ul.products li.product { flex: 0 0 98% !important; width: 98% !important; max-width: 98% !important; } } /** * CARD SCALE — Tablet/Mobile, added 2026-07-24. * * Independent concern from the column-width blocks above: those control * how many cards fit per row (frozen, untouched by this section); this * controls how TALL each individual card is at each of those same three * width tiers, via one set of --supra-card-* custom properties per tier * consumed by every element below (card, image frame, title, price, * buttons) — one variable driving several selectors instead of repeating * literal values across each of them. * * Root cause of "cards excessively tall": the theme's own base card * (custom-home-products.css, unmodified, still governs Desktop) uses a * 4:5 portrait image frame + an unclamped title (min-height:77px, grows * for long titles) + 24px/20px/14px of accumulated vertical spacing + * a 48px button. None of that is reduced by a narrower card alone — width * and height are independent here (flex-basis controls width; every * height-contributing property below is untouched by the width overrides * above). This section reduces each height-contributing property in * proportion, together, at each tier — not by scaling the card as a * whole (no transform:scale, no fixed card height, no overflow:hidden * cropping content). * * Image: aspect-ratio switches from the Desktop 4:5 (portrait) to 1:1 * (square) at every tier here — the single largest height reduction in * the card, and image-frame padding is reduced too (was a flat 22px at * every width). object-fit:contain is untouched (inherited from the * theme rule, only aspect-ratio/padding/radius are overridden here), so * the product photo is never cropped. * * Title: the theme's Desktop title has NO line-clamp (min-height:77px is * a floor, not a ceiling — a long title can grow the card taller than * its neighbors). Tablet/Mobile here switch to -webkit-line-clamp:3 with * a min-height sized to roughly 3 lines of each tier's own font-size × * line-height (e.g. Tablet: 14px × 1.3 × 3 ≈ 54.6px, rounded to 54px) — * caps worst-case title height instead of leaving it unbounded, while * still allowing short titles to sit shorter (min-height, not a fixed * height). * * Buttons: height reduced tier-by-tier (48px Desktop -> 46/44/46) with a * matching, proportionally smaller vertical padding (was a flat 12px at * every width) — width:100%/border-radius:999px/click behavior/AJAX/ * "Adicionado ✓"/Quick View classes are all untouched, only size. * * Card-to-card row spacing (the theme's own margin:0 1% 24px 1%) is * reduced here too (the "24px" only) — 1% side margins driving the * column math above are left exactly as they were. * * Desktop (>=1025px) has no rule in this section at all — every property * touched here keeps inheriting the theme's original, unmodified value. */ @media (min-width: 768px) and (max-width: 1024px) { body.home .woocommerce ul.products li.product { --supra-card-padding: 14px; --supra-card-image-ratio: 1 / 1; --supra-card-image-padding: 16px; --supra-card-title-size: 14px; --supra-card-title-line-height: 1.3; --supra-card-title-min-height: 54px; --supra-card-price-size: 22px; --supra-card-button-height: 46px; --supra-card-button-size: 11px; --supra-card-gap: 10px; --supra-card-radius: 20px; /* --supra-card-price-top-gap: kept — genuinely the sole, working source of the title->price gap, applied to the title's own margin-bottom below (see the full reasoning where this was introduced, still valid). --supra-card-buttons-gap: REMOVED 2026-07-24 — live DevTools measurement proved it was never the real controller of the button->button distance (see the block below this one for the actual cause and fix). Deleting a variable no consumer references anymore, not leaving it as dead CSS. */ --supra-card-price-top-gap: 13px; padding: var(--supra-card-padding) !important; margin: 0 1% 16px 1% !important; border-radius: var(--supra-card-radius) !important; } body.home .woocommerce ul.products li.product .supra-product-image-frame { aspect-ratio: var(--supra-card-image-ratio) !important; padding: var(--supra-card-image-padding) !important; margin: 0 0 calc(var(--supra-card-gap) + 2px) 0 !important; border-radius: var(--supra-card-radius) !important; } body.home .woocommerce ul.products li.product .woocommerce-loop-product__title { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; min-height: var(--supra-card-title-min-height) !important; font-size: var(--supra-card-title-size) !important; line-height: var(--supra-card-title-line-height) !important; margin: 0 0 var(--supra-card-price-top-gap) 0 !important; } body.home .woocommerce ul.products li.product .price { font-size: var(--supra-card-price-size) !important; margin: auto 0 calc(var(--supra-card-gap) + 2px) 0 !important; } body.home .woocommerce ul.products li.product .button { min-height: var(--supra-card-button-height) !important; padding: 10px 14px !important; font-size: var(--supra-card-button-size) !important; } /* ---- button-to-button gap: real cause + fix, 2026-07-24 ---------- Live DevTools measurement (user-supplied) found the true source: .woocommerce ul.products li.product itself is display:flex; flex-direction:column;gap:1em (hello-commerce-woocommerce.css, the theme's own unscoped rule, confirmed computed at exactly 16px) — this flex `gap` applies BETWEEN EVERY CHILD PAIR of li.product, including link-block -> button 1 AND button 1 -> button 2 alike. It is a single container-level value; it cannot be set differently for one specific child pair. Every previous round's margin-bottom on the first button was real and WAS applying (confirmed computed 3px) — it just landed ON TOP of this 16px gap (16+3=19px measured), never replacing it, which is why changing that margin alone could never reach a genuinely small total distance. Fix: margin-bottom on the first button is neutralized (0 — no longer a spacing source), and the SECOND button gets a NEGATIVE margin-top that cancels most of the inherited 16px gap, leaving exactly the target: margin-top = target - 16px. This is the single source of truth for this spacing now; the link -> first-button gap (price's own breathing room, explicitly out of scope this round) still comes from the same untouched 16px container gap, unaffected by a margin change on the button that comes after it. */ body.home .woocommerce ul.products li.product > a.add_to_cart_button { margin-bottom: 0 !important; } body.home .woocommerce ul.products li.product > a.yith-wcqv-button { /* target 3px - the container's own 16px gap = -13px */ margin-top: calc(3px - 16px) !important; } } @media (min-width: 480px) and (max-width: 767px) { /* Most critical tier per the request (~215-353px cards) — smallest values in the whole scale, floors respected: button-size never below 10px, button-height never below 44px. */ body.home .woocommerce ul.products li.product { --supra-card-padding: 12px; --supra-card-image-ratio: 1 / 1; --supra-card-image-padding: 12px; --supra-card-title-size: 13px; --supra-card-title-line-height: 1.25; --supra-card-title-min-height: 50px; --supra-card-price-size: 20px; --supra-card-button-height: 44px; --supra-card-button-size: 10px; --supra-card-gap: 8px; --supra-card-radius: 18px; /* Same "Mobile" target as the <=479px tier below (section 5 of this round's request treats 480-767 and <=479 as one combined "Mobile" band for these two spacings specifically) — kept as two dedicated variables for the same reason documented in the Tablet block above (title's margin-bottom stays the sole source, price keeps its load-bearing margin-top:auto untouched). */ --supra-card-price-top-gap: 11px; padding: var(--supra-card-padding) !important; margin: 0 1% 14px 1% !important; border-radius: var(--supra-card-radius) !important; } body.home .woocommerce ul.products li.product .supra-product-image-frame { aspect-ratio: var(--supra-card-image-ratio) !important; padding: var(--supra-card-image-padding) !important; margin: 0 0 calc(var(--supra-card-gap) + 2px) 0 !important; border-radius: var(--supra-card-radius) !important; } body.home .woocommerce ul.products li.product .woocommerce-loop-product__title { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; min-height: var(--supra-card-title-min-height) !important; font-size: var(--supra-card-title-size) !important; line-height: var(--supra-card-title-line-height) !important; margin: 0 0 var(--supra-card-price-top-gap) 0 !important; } body.home .woocommerce ul.products li.product .price { font-size: var(--supra-card-price-size) !important; margin: auto 0 calc(var(--supra-card-gap) + 2px) 0 !important; } /* Two-line wrap allowed here per explicit instruction (not forced, not clamped/truncated — white-space:normal already lets the theme's flex button wrap naturally; only height/padding/font are set). */ body.home .woocommerce ul.products li.product .button { min-height: var(--supra-card-button-height) !important; padding: 9px 12px !important; font-size: var(--supra-card-button-size) !important; } /* Real cause + fix — see the Tablet block above for the full explanation (li.product's own gap:1em/16px, confirmed live). */ body.home .woocommerce ul.products li.product > a.add_to_cart_button { margin-bottom: 0 !important; } body.home .woocommerce ul.products li.product > a.yith-wcqv-button { margin-top: calc(3px - 16px) !important; } } @media (max-width: 479px) { /* Compacted further 2026-07-24 (isolated 1-column card only, per explicit request — Tablet/Mobile amplo tiers above are untouched this round). Every value below is a deliberate reduction from the previous pass: gap 10->8px (-20%, inside the requested 15-25% range), title 15->14px, price 23->20px, button 46->44px/11->10px, radius 20->18px, image-frame padding 16->13px. Price (20px) still reads clearly larger than the title (14px) and the primary button keeps its existing color/order dominance over the secondary one — only size changed, hierarchy untouched. */ body.home .woocommerce ul.products li.product { --supra-card-padding: 14px; --supra-card-image-ratio: 1 / 1; --supra-card-image-padding: 13px; --supra-card-title-size: 14px; --supra-card-title-line-height: 1.3; --supra-card-title-min-height: 54px; --supra-card-price-size: 20px; --supra-card-button-height: 44px; --supra-card-button-size: 10px; --supra-card-gap: 8px; --supra-card-radius: 18px; --supra-card-price-top-gap: 11px; padding: var(--supra-card-padding) !important; margin: 0 1% 16px 1% !important; border-radius: var(--supra-card-radius) !important; } body.home .woocommerce ul.products li.product .supra-product-image-frame { aspect-ratio: var(--supra-card-image-ratio) !important; padding: var(--supra-card-image-padding) !important; margin: 0 0 calc(var(--supra-card-gap) + 2px) 0 !important; border-radius: var(--supra-card-radius) !important; } body.home .woocommerce ul.products li.product .woocommerce-loop-product__title { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important; min-height: var(--supra-card-title-min-height) !important; font-size: var(--supra-card-title-size) !important; line-height: var(--supra-card-title-line-height) !important; margin: 0 0 var(--supra-card-price-top-gap) 0 !important; } body.home .woocommerce ul.products li.product .price { font-size: var(--supra-card-price-size) !important; margin: auto 0 calc(var(--supra-card-gap) + 2px) 0 !important; } body.home .woocommerce ul.products li.product .button { min-height: var(--supra-card-button-height) !important; padding: 9px 12px !important; font-size: var(--supra-card-button-size) !important; } /* Real cause + fix — see the Tablet block above for the full explanation (li.product's own gap:1em/16px, confirmed live). */ body.home .woocommerce ul.products li.product > a.add_to_cart_button { margin-bottom: 0 !important; } body.home .woocommerce ul.products li.product > a.yith-wcqv-button { margin-top: calc(3px - 16px) !important; } } /* ==================================================================== * PRODUCTS SECTION -> FOOTER GAP — added 2026-07-24 * ==================================================================== * Container: .elementor-element-30c8485 (the Home products section * wrapper — id confirmed live in wp-content/uploads/elementor/css/ * post-22.css, read-only). Its own responsive padding/margin-top/width * are Elementor-native settings, explicitly frozen/untouched here — only * margin-bottom is overridden, and only <=1024px. * * Elementor's own compiled values for this element (post-22.css): * >=768px (Tablet+Desktop): margin-bottom: 64px * <=767px (Mobile): margin-bottom: 0px <- the actual bug * Mobile drops to a flat 0px, which is why the Footer reads as landing * directly on the last card there; Tablet already had 64px natively, * already at the low end of this round's own 64-80px target. * * "Espaço visível final, não somar": li.product's own row margin-bottom * (16px Mobile / 16px Tablet, set in the CARD SCALE section above) sits * BEFORE this container's own margin-bottom in the same vertical run — * flex items never margin-collapse with an ancestor, so the two ARE * fully additive. Values below are chosen with that addition already * accounted for, not on top of it: * Mobile: 16px (card) + 40px (this) = ~56px (target 48-56px) * Tablet: 16px (card) + 56px (this) = ~72px (target 64-80px) * Uses margin-bottom (not padding-bottom) because that's already the * mechanism Elementor itself uses on this exact element — consolidating * into the existing mechanism rather than layering a second, competing * one on top of it. */ @media (max-width: 767px) { body.home .elementor-element.elementor-element-30c8485 { margin-bottom: 40px !important; } } @media (min-width: 768px) and (max-width: 1024px) { body.home .elementor-element.elementor-element-30c8485 { margin-bottom: 56px !important; } } /* ==================================================================== * IMAGE-BOX STANDARDIZATION — added 2026-07-24 * ==================================================================== * Previous rounds already gave every <=1024px tier the same frame * aspect-ratio (1/1, via --supra-card-image-ratio in each tier block * above) — but the itself was still sized by the theme's own * base rule (width:auto;height:auto;max-width:85%;max-height:80%), * which lets each product PHOTO'S OWN intrinsic dimensions decide how * much of the (identical) frame it actually fills — a near-square photo * fills most of the box, a tall/narrow one fills only a sliver of its * width, reading as visually inconsistent even though every frame is * the same shape. This block standardizes the itself to fill the * frame's full content box (100%/100%) and lets object-fit:contain do * 100% of the proportional scaling/centering — every product now * occupies the same predictable box, whatever its own native ratio. * No cropping (contain, not cover): the full product is always visible. * The frame's own padding (set per tier above, 12-16px depending on * width) already keeps the image off the frame's edges, so no separate * max-width/max-height cap is layered on top of it here — one is * redundant with the other, and doubling up would only shrink the * image further for no visual benefit. * One shared rule for all three <=1024px tiers (Tablet/Mobile amplo/ * Mobile estreito) — nothing here varies by tier, so it isn't * duplicated three times. Desktop (>=1025px) keeps the theme's original * rule untouched, exactly as instructed. */ @media (max-width: 1024px) { body.home .woocommerce ul.products li.product .supra-product-image-frame img { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center !important; } } /* ==================================================================== * DESKTOP BUTTON-TO-BUTTON GAP — added 2026-07-24 * ==================================================================== * Same confirmed cause/technique as the Mobile/Tablet fix above (live * DevTools-validated, now frozen): li.product's own gap:1em (16px, * hello-commerce-woocommerce.css, unscoped, applies at every width * including Desktop) sits between every flex child pair, including the * two buttons. Before this block, Desktop still fell through to the * theme's own unconditional margin-bottom:4px !important on the first * button (custom-home-products.css) — total 16+4=20px, never overridden * here until now (Desktop was deliberately left untouched through the * Mobile/Tablet rounds). Same single-source fix, same two selectors, * only the target number and breakpoint change: margin-top on the * second button = target - 16px = 5 - 16 = -11px. Mobile/Tablet's own * <=1024px rules above are untouched — this block only ever matches * >=1025px, so their approved/frozen 3px stays exactly as validated. */ @media (min-width: 1025px) { body.home .woocommerce ul.products li.product > a.add_to_cart_button { margin-bottom: 0 !important; } body.home .woocommerce ul.products li.product > a.yith-wcqv-button { /* target 5px - the container's own 16px gap = -11px */ margin-top: calc(5px - 16px) !important; } }