.ewpg-grid { display: grid; width: 100%; align-items: stretch; } /* Cards beyond the current device's Rows x Columns limit. Toggled by frontend.js based on viewport width. */ .ewpg-card--row-limit-hidden { display: none !important; } .ewpg-card { display: flex; flex-direction: column; overflow: hidden; position: relative; height: 100%; transition: transform var(--ewpg-hover-duration, 300ms) ease, box-shadow var(--ewpg-hover-duration, 300ms) ease; } .ewpg-card__image-wrap { position: relative; overflow: hidden; display: block; aspect-ratio: 1 / 1; } .ewpg-card__image { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform var(--ewpg-hover-duration, 300ms) ease; } /* ---------- Hover effects (class set per-widget in PHP) ---------- */ .ewpg-hover-lift .ewpg-card:hover { transform: translateY(var(--ewpg-hover-lift, -6px)); } .ewpg-hover-shadow .ewpg-card:hover { box-shadow: 0 var(--ewpg-hover-shadow-y, 10px) var(--ewpg-hover-shadow-blur, 25px) var(--ewpg-hover-shadow-color, rgba(0, 0, 0, 0.15)); } .ewpg-hover-lift_shadow .ewpg-card:hover { transform: translateY(var(--ewpg-hover-lift, -6px)); box-shadow: 0 var(--ewpg-hover-shadow-y, 10px) var(--ewpg-hover-shadow-blur, 25px) var(--ewpg-hover-shadow-color, rgba(0, 0, 0, 0.15)); } .ewpg-hover-border .ewpg-card:hover { box-shadow: inset 0 0 0 2px var(--ewpg-hover-border-color, #7f54b3); } .ewpg-imgzoom-yes .ewpg-card__image-wrap:hover .ewpg-card__image { transform: scale(var(--ewpg-hover-zoom, 1.08)); } /* ---------- Entrance animation (uses `animation`, kept independent of hover `transition`) ---------- */ @keyframes ewpg-fade-up { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes ewpg-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ewpg-zoom-in { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } @keyframes ewpg-slide-left { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } } @keyframes ewpg-slide-right { from { opacity: 0; transform: translateX(-40px); } to { opacity: 1; transform: translateX(0); } } /* * IMPORTANT: cards are visible by default. They are only ever hidden * pre-animation once the element carries the "ewpg-js" class, * which frontend.js adds the instant it actually runs. If a caching / * performance plugin delays or blocks that script (common on mobile * with "delay JS execution" settings), this rule never applies and * products simply show immediately with no animation — never blank. */ html.ewpg-js .ewpg-grid[class*="ewpg-anim-"]:not(.ewpg-anim-none) .ewpg-card { opacity: 0; } .ewpg-anim-fade-up.ewpg-in-view .ewpg-card { animation: ewpg-fade-up var(--ewpg-anim-duration, 600ms) ease forwards; } .ewpg-anim-fade-in.ewpg-in-view .ewpg-card { animation: ewpg-fade-in var(--ewpg-anim-duration, 600ms) ease forwards; } .ewpg-anim-zoom-in.ewpg-in-view .ewpg-card { animation: ewpg-zoom-in var(--ewpg-anim-duration, 600ms) ease forwards; } .ewpg-anim-slide-left.ewpg-in-view .ewpg-card { animation: ewpg-slide-left var(--ewpg-anim-duration, 600ms) ease forwards; } .ewpg-anim-slide-right.ewpg-in-view .ewpg-card{ animation: ewpg-slide-right var(--ewpg-anim-duration, 600ms) ease forwards; } @media (prefers-reduced-motion: reduce) { html.ewpg-js .ewpg-grid[class*="ewpg-anim-"] .ewpg-card { opacity: 1 !important; animation: none !important; } } /* "Disable Animation on Mobile" widget switch (on by default in the editor). Forces an instant, fully visible grid on phones — no opacity delay, no waiting on scroll position, fastest possible perceived load. */ @media (max-width: 767px) { .ewpg-grid.ewpg-mobile-anim-off[class*="ewpg-anim-"] .ewpg-card { opacity: 1 !important; animation: none !important; transform: none !important; } } .ewpg-card__badge { position: absolute; top: 10px; left: 10px; background: #e74c3c; color: #fff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 3px; z-index: 2; text-transform: uppercase; } .ewpg-card__body { display: flex; flex-direction: column; flex-grow: 1; } .ewpg-card__title { text-decoration: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; /* Reserve space for exactly 2 lines so every card's title block is the same height, regardless of how long the product name is. */ min-height: calc(1.3em * 2); line-height: 1.3em; } .ewpg-card__title a { text-decoration: none; color: inherit; } .ewpg-card__rating { line-height: 1; min-height: 20px; } .ewpg-card__rating .star-rating { font-size: 14px; margin: 6px 0; } .ewpg-card__price { display: block; } .ewpg-card__price del { opacity: 0.6; margin-right: 6px; font-weight: 400; } .ewpg-card__price ins { text-decoration: none; } .ewpg-card__button { display: inline-block; text-align: center; text-decoration: none; cursor: pointer; border: none; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.25s ease, color 0.25s ease, opacity 0.2s ease; } /* This class is also used on a real