, neither of which uses .davi-section). --section-pad is ONE shared token above, not re-derived per section from Figma. Moved here from davi-home.css (2026-09-26 PDP audit fix) - that file only loads on is_front_page() (functions.php), so a PDP section could never reach a `.davi-home .davi-section` rule kept there, no matter what class it carried; a second, parallel `.davi-pdp > section` mechanism was built instead of just reusing this one, which is the exact duplication this move undoes. Same reasoning already applied to .davi-container just above (its own comment covers why it lives here and not in davi-home.css - identical situation, one class prefixed with .davi-home too many). No margin here on purpose: a margin between sections creates a gap that belongs to neither section, which can't be styled/backgrounded/adjusted from either side. */ .davi-section { padding-block: var(--section-pad); padding-inline: var(--page-padding-inline); } /* Whole-card-clickable pattern: ONE class, on the link itself. Put position:relative directly on your own card's class (whatever it's called - e.g. .davi-categories__item) so it's the overlay's containing block, add real href="" text on the ONE link that should represent the whole card, and give it this class. .clickable-parent itself stays position:static on purpose - giving the LINK its own position:relative would make it its own nearest positioned ancestor, shrinking its ::before overlay down to the link's own text box instead of the whole card. That was a real bug (a click on a card's photo silently did nothing), caught by testing a real click, not by looking at it - found 2026-09-18 implementing this for the first time anywhere in the project. Global (not .davi-home-scoped, 2026-09-22): the product card (.davi-product-card__title) uses this class sitewide - every category/ shop page archive, not just the home page - but the rule only ever matched inside .davi-home, so the whole click-anywhere-on-the-card feature was silently dead everywhere except the home page the entire time. Found via a real computed-style check on a real category page (content:"none" instead of an empty string), not assumed. */ .clickable-parent { position: static; } .clickable-parent::before { content: ""; position: absolute; inset: 0; } /* * Sitewide product card (shop, category archives, related products, home * page picks) - matches Figma node 1:236 "product-card" exactly. Not scoped * under .davi-home: this renders on pages that don't have that wrapper * (shop, category archives), so every value here comes from :root tokens * (tokens.css) instead of .davi-home-scoped ones. */ .davi-product-card { position: relative; display: flex; flex-direction: column; /* height:100% (2026-09-29, client: "kafelki nie są tej samej wysokości w rzędzie") - real cause confirmed live: cards with a catalog price (an extra, conditional line) are genuinely taller by content alone (535.5px vs 510.7px measured on a real category page); CSS Grid already stretches each .col-inner grid cell to match the tallest row-mate (its own default `align-items: stretch`), but this element itself never filled that taller cell - it just sat at its own content height inside it, so the shorter cards' borders/backgrounds stopped short instead of lining up. */ height: 100%; /* This alone was still not enough (client, 2026-09-29 round 2: "kafelki nadal nie są równe") - confirmed live via getBoundingClientRect() on the actual server: Flatsome's own `.products.row` IS a flex row and DOES correctly stretch every `.col` to a uniform height per row (measured 523.125px identically for every column in a row, stable over time - not a lazy-load/timing issue). But `.col-inner` (a plain block child of `.col`, not itself a flex item) never inherits that stretched height - it just sits at its own content height inside the taller `.col` box, so this card's own height:100% had nothing tall enough to resolve against one level up. Scoped to `.products.row` (WooCommerce's own real loop-wrapper class) rather than a bare `.col-inner` - that class is used by many unrelated Flatsome page- builder rows across the site that have nothing to do with product cards and must not be touched here. */ background: #fff; border: 1px solid rgb(var(--card-border)); border-radius: var(--card-radius); overflow: hidden; font-family: 'Onest', sans-serif; transition: box-shadow var(--motion, 0.3s ease-out), transform var(--motion, 0.3s ease-out); } /* Not in Figma - a subtle whole-card hover requested separately (2026-09-18). Only on devices that actually have hover, so it doesn't leave a stuck/lingering shadow after a tap on touch devices. */ @media (hover: hover) { .davi-product-card:hover { box-shadow: 0 8px 24px rgba(var(--base), 0.1); transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .davi-product-card { transition: none; } } .products.row > .col > .col-inner { height: 100%; } .davi-product-card__media { position: relative; width: 100%; /* Mobile card (node 2:10, "mobile-showcase") is a FIXED 215px slider card - the real Figma mobile geometry, not an earlier guess - so its media box is just the real fixed 220px height to match. Desktop (node 1:236) is a fluid grid column, so aspect-ratio (280:220, the real desktop ratio) scales it correctly there instead of a height that would look wrong at whatever column width the grid gives it. */ height: 220px; /* White, not the cream --background token - Figma's own value (node 1:237/2:56 "image-container" is bg-white), a real mistake, not a stylistic choice (2026-09-18). */ background: #fff; } @media (min-width: 782px) { .davi-product-card__media { height: auto; aspect-ratio: 280 / 220; } } .davi-product-card__image { position: absolute; inset: 0; width: 100%; height: 100%; /* object-contain, not cover - Figma's own value (the product photo shouldn't be cropped, the whole bike must stay visible). */ object-fit: contain; } .davi-product-card__image--primary { opacity: 1; } .davi-product-card__image--secondary { opacity: 0; transition: opacity var(--motion, 0.3s ease-out); } /* Hover swap to the product's own first gallery photo - real asset, not a fabricated "alt view". Only ever visible if a secondary image exists at all (inc/product-card.php only renders it when the product has a gallery image), so this never shows a blank/broken state. */ @media (hover: hover) { .davi-product-card:hover .davi-product-card__image--primary { opacity: 0; } .davi-product-card:hover .davi-product-card__image--secondary { opacity: 1; } } /* Touch devices have no hover, so the secondary image just never shows there (2026-09-21 correction) - an earlier version auto-cycled the two images on a timer to give touch "some way" to see it, which was my own improvised idea, not a real UX pattern or something asked for; unprompted automatic motion is a real anti-pattern (surprising, easy to mistake for the page glitching, doesn't communicate interactivity the way hover does). Removed entirely rather than defended. */ @media (prefers-reduced-motion: reduce) { .davi-product-card__image--primary, .davi-product-card__image--secondary { transition: none !important; } } /* Mobile-first: real per-breakpoint values (node 2:55 mobile vs 1:236 desktop) - padding 16px/title 16px on mobile, 20px/15px from 782px up. */ .davi-product-card__body { display: flex; flex-direction: column; gap: 12px; padding: 16px; } .davi-product-card__heading { display: flex; flex-direction: column; } .davi-product-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 700; font-size: 16px; color: rgb(var(--base)); text-decoration: none; } @media (min-width: 782px) { .davi-product-card__body { padding: 20px; } .davi-product-card__title { font-size: 15px; } } .davi-product-card__spec { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 400; font-size: 13px; color: rgb(var(--gray-caption)); } /* Real TrustMate "multihornet" widget now (2026-09-29, inc/product-card.php) - empty until its own