/* ========================================================================= Evermed — product grid + the one product card Used by shop, category, search, related, cross-sells and Evermed Product Carousel ("Site card" mode). Buttons/badges come from ShopBooster; this file only arranges and shapes them. ====================================================================== */ /* ---------- Grid (not the Evermed carousel track, which is a flex slider) ---------- */ ul.products:not(.ee-pc__track) { display: grid !important; grid-template-columns: repeat(var(--ev-cols-m, 2), minmax(0, 1fr)); gap: clamp(10px, 1.6vw, 20px); margin: 0 0 2em !important; padding: 0 !important; list-style: none; } @media (min-width: 768px) { ul.products:not(.ee-pc__track) { grid-template-columns: repeat(var(--ev-cols-t, 3), minmax(0, 1fr)); } } @media (min-width: 1025px) { ul.products:not(.ee-pc__track) { grid-template-columns: repeat(var(--ev-cols-d, 4), minmax(0, 1fr)); } } ul.products::before, ul.products::after { content: none !important; display: none !important; } /* WooCommerce's float layout off — the grid decides the width */ .woocommerce ul.products li.product.ev-card, ul.products li.product.ev-card { width: auto !important; float: none !important; clear: none !important; margin: 0 !important; } /* ---------- Card ---------- */ .woocommerce ul.products li.product.ev-card, li.product.ev-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 10px 10px 12px; background: var(--ev-surface); border: 1px solid var(--ev-line); border-radius: var(--ev-radius); overflow: hidden; list-style: none; transition: border-color .2s, box-shadow .2s; } li.product.ev-card:hover { border-color: color-mix(in srgb, var(--ev-primary) 40%, var(--ev-line)); box-shadow: 0 8px 24px rgb(16 24 20 / 8%); } .ev-card__media { position: relative; aspect-ratio: var(--ev-card-ratio, 1 / 1); border-radius: var(--ev-radius-sm); overflow: hidden; background: #fff; } .ev-card__image-link { display: block; width: 100%; height: 100%; } .woocommerce ul.products li.product.ev-card .ev-card__media img, .ev-card__media img { width: 100%; height: 100% !important; margin: 0 !important; object-fit: contain; border-radius: 0; box-shadow: none; } /* Second image on hover (desktop only; never downloaded on touch screens) */ .ev-card__hover { position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease; background: #fff; } .ev-card__hover img { width: 100%; height: 100%; object-fit: contain; } li.product.ev-card:hover .ev-card__hover { opacity: 1; } @media (hover: none) { .ev-card__hover { display: none; } } /* Sale badge (theme-owned since ShopBooster 6.0) */ .woocommerce span.onsale, .woocommerce ul.products li.product .onsale, li.product.ev-card .onsale { position: absolute; top: 8px; right: 8px; left: auto; margin: 0; min-width: 0; min-height: 0; padding: 4px 8px; border-radius: var(--ev-radius-sm); line-height: 1.3; background: var(--ev-badge-bg); color: var(--ev-badge-text); font-size: .8rem; font-weight: 700; } .woocommerce span.onsale { position: absolute; } /* Card buttons — layout by count (data-n): 1: full width · 2: side by side · 3: order button on top, two below · 4: two rows of two */ li.product.ev-card .ev-card__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; margin: auto 0 0 !important; padding: 10px 0 0 !important; } li.product.ev-card .ev-card__actions > .woocommerce-loop-product__buttons { display: contents; } li.product.ev-card .ev-card__actions[data-n="1"] .button, li.product.ev-card .ev-card__actions[data-n="3"] :is(.sb-cod-btn, .buy_now_archive), li.product.ev-card .ev-card__actions[data-n="3"]:not(:has(.sb-cod-btn, .buy_now_archive)) .add_to_cart_button { grid-column: 1 / -1; } /* Most important first: order / Buy Now, then Add to cart, WhatsApp, Call */ li.product.ev-card .ev-card__actions :is(.sb-cod-btn, .buy_now_archive) { order: -2; } li.product.ev-card .ev-card__actions .add_to_cart_button { order: -1; } /* ul.products in the selector: WooCommerce's ".woocommerce ul.products li.product .button" (inline-block, text on the left) is heavier than a plain card selector. */ li.product.ev-card .ev-card__actions .button, .woocommerce ul.products li.product.ev-card .ev-card__actions .button { width: 100%; min-width: 0; min-height: 38px; margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 0; padding: 6px 6px !important; border-radius: var(--ev-radius-sm); font-size: .85rem; font-weight: 600; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; float: none !important; } li.product.ev-card .add_to_cart_button { background: var(--ev-primary) !important; color: #fff !important; } li.product.ev-card .whatsapp_button { background: #25d366; color: #fff; } li.product.ev-card .whatsapp_button:hover { background: #1ebe5a; color: #fff; } li.product.ev-card .call_now_button { background: var(--ev-call-now-bg); color: var(--ev-call-now-text); } li.product.ev-card .buy_now_archive { background: var(--ev-buy-now-bg) !important; color: var(--ev-buy-now-text) !important; } li.product.ev-card .added_to_cart { display: none; } /* "View cart" link after adding: the header cart shows it */ @media (max-width: 767px) { li.product.ev-card .ev-card__actions { gap: 5px; } /* !important: ShopBooster's own card CSS forces 11px on small screens */ li.product.ev-card .ev-card__actions .button { font-size: .8rem !important; min-height: 38px; height: auto !important; padding: 5px 3px !important; letter-spacing: -.01em; } /* The order button has room: bigger, bolder words */ li.product.ev-card .ev-card__actions :is(.sb-cod-btn, .buy_now_archive) { font-size: .95rem !important; font-weight: 700; } } /* Gentle zoom instead of ShopBooster's 110% on every image in the card */ .woocommerce ul.products li.product.ev-card:hover img { transform: none; } .woocommerce ul.products li.product.ev-card:hover .ev-card__media img { transform: scale(1.04); transition: transform .35s ease, opacity .3s ease; } .ev-card__stock { position: absolute; left: 8px; bottom: 8px; z-index: 2; padding: 3px 8px; border-radius: var(--ev-radius-sm); background: var(--ev-ink); color: #fff; font-size: .75rem; font-weight: 600; } li.product.ev-card.outofstock .ev-card__media img { opacity: .6; } .ev-card__body { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; padding-top: 10px; } /* The blog-card padding (base.css) must not reach product cards — it was the extra side space */ li.product.ev-card .ev-card__body { padding: 10px 2px 0; } .woocommerce ul.products li.product.ev-card .ev-card__title, .ev-card__title { margin: 0; padding: 0; font-size: clamp(.86rem, .8rem + .2vw, .98rem); font-weight: 500; line-height: 1.4; color: var(--ev-ink); display: -webkit-box; -webkit-line-clamp: var(--ev-card-lines, 2); -webkit-box-orient: vertical; overflow: hidden; min-height: calc(1.4em * var(--ev-card-lines, 2)); } .ev-card__title a { color: inherit; text-decoration: none; } .ev-card__title a:hover { color: var(--ev-primary); } /* Whole card is clickable via the title link, without nesting links */ .ev-card__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .woocommerce ul.products li.product.ev-card .star-rating { margin: 2px 0 0; font-size: .8em; } .woocommerce ul.products li.product.ev-card .price, li.product.ev-card .price { display: block; margin: 2px 0 0; color: var(--ev-primary); font-weight: 700; font-size: 1rem; } li.product.ev-card .price del { color: var(--ev-muted); font-weight: 400; font-size: .85em; opacity: 1; margin-right: 4px; } li.product.ev-card .price ins { text-decoration: none; background: none; } /* ShopBooster buttons: bottom of the card, above the card-wide title link */ li.product.ev-card .sb-archive-buttons-wrapper { margin-top: auto; padding-top: 8px; } /* Buttons sit above the card-wide title link. (The wrapper itself must stay unpositioned: Quick View / Wishlist inside it are placed relative to the card.) */ li.product.ev-card .sb-archive-buttons-wrapper > :not(.quick-view-button):not(.bdm-wishlist-button-archive), li.product.ev-card > .button, li.product.ev-card .added_to_cart { position: relative; z-index: 2; } /* Quick View + Wishlist: small round icons at the image's top-left corner. Always visible on touch screens (there is no hover there). */ /* (Selectors match ShopBooster's own strength so these win.) */ .woocommerce ul.products li.product.ev-card .quick-view-button, .woocommerce ul.products li.product.ev-card .bdm-wishlist-button-archive { top: 18px !important; left: 18px !important; right: auto !important; transform: none !important; z-index: 3; } .woocommerce ul.products li.product.ev-card .bdm-wishlist-button-archive { top: 60px !important; } /* Quick View + Wishlist icons: Settings → Shop (computers: mouse-over / always / hide; phones: hide / always) */ @media (hover: hover) and (pointer: fine) and (min-width: 768px) { .ev-icons-d-always .woocommerce ul.products li.product.ev-card .quick-view-button, .ev-icons-d-always .woocommerce ul.products li.product.ev-card .bdm-wishlist-button-archive, .ev-icons-d-always ul.products li.product.ev-card :is(.quick-view-button, .bdm-wishlist-button-archive) { display: flex !important; opacity: 1 !important; } .ev-icons-d-off ul.products li.product.ev-card :is(.quick-view-button, .bdm-wishlist-button-archive) { display: none !important; } } @media (hover: none), (pointer: coarse), (max-width: 767px) { .ev-icons-m-off ul.products li.product.ev-card :is(.quick-view-button, .bdm-wishlist-button-archive) { display: none !important; } .ev-icons-m-always ul.products li.product.ev-card :is(.quick-view-button, .bdm-wishlist-button-archive) { display: flex !important; opacity: 1 !important; width: 32px !important; height: 32px !important; } .ev-icons-m-always ul.products li.product.ev-card :is(.quick-view-button, .bdm-wishlist-button-archive) svg { width: 16px !important; height: 16px !important; } .ev-icons-m-always .woocommerce ul.products li.product.ev-card .bdm-wishlist-button-archive, .ev-icons-m-always ul.products li.product.ev-card .bdm-wishlist-button-archive { top: 54px !important; } } li.product.ev-card .onsale { z-index: 3; } @media (max-width: 767px) { /* Slim cards on phones; !important beats page-builder box padding */ .woocommerce ul.products li.product.ev-card, li.product.ev-card { padding: 6px 6px 8px !important; } li.product.ev-card :is(.woocommerce-loop-product__title, .price, .star-rating, .ev-card__rating) { padding-inline: 2px !important; margin-inline: 0 !important; } ul.products:not(.ee-pc__track) { gap: 8px !important; } .woocommerce ul.products li.product.ev-card .quick-view-button, .woocommerce ul.products li.product.ev-card .bdm-wishlist-button-archive { left: 14px !important; } } @media (prefers-reduced-motion: reduce) { .woocommerce ul.products li.product.ev-card:hover .ev-card__media img { transform: none; } } /* ---------- Product ribbons (ShopBooster ≥ 6.1 data) ---------- */ .ev-ribbon { position: absolute; top: 0; left: 0; z-index: 3; width: 96px; height: 96px; overflow: hidden; pointer-events: none; } .ev-ribbon > span { position: absolute; top: 20px; left: -34px; width: 140px; transform: rotate(-45deg); padding: 4px 0; text-align: center; background: var(--ev-ribbon-bg); color: var(--ev-ribbon-fg); font-size: .68rem; font-weight: 700; line-height: 1.2; letter-spacing: .02em; box-shadow: 0 2px 6px rgb(0 0 0 / 15%); } .ev-ribbon--single { width: 120px; height: 120px; } .ev-ribbon--single > span { top: 26px; left: -38px; width: 170px; font-size: .78rem; padding: 5px 0; } /* With a ribbon in the top-left corner, Quick View + Wishlist sit on the right, under the badge */ .woocommerce ul.products li.product.ev-card .quick-view-button, .woocommerce ul.products li.product.ev-card .bdm-wishlist-button-archive { left: auto !important; right: 18px !important; top: 48px !important; } .woocommerce ul.products li.product.ev-card .bdm-wishlist-button-archive { top: 90px !important; } @media (max-width: 767px) { .woocommerce ul.products li.product.ev-card .quick-view-button, .woocommerce ul.products li.product.ev-card .bdm-wishlist-button-archive { left: auto !important; right: 14px !important; } } /* ---------- Review stars (colour from Evermed Settings → Design → Review stars) ---------- */ .woocommerce .star-rating, .star-rating { color: var(--ev-star, #ffb400); } .woocommerce .star-rating::before, .star-rating::before { color: #d3dad8; opacity: 1; } .woocommerce .star-rating span, .woocommerce .star-rating span::before, .star-rating span, .star-rating span::before { color: var(--ev-star, #ffb400) !important; } /* beats page-builder / plugin kits that colour text black */ .woocommerce p.stars a, .woocommerce p.stars a::before { color: var(--ev-star, #ffb400); } .woocommerce p.stars:hover a::before, .woocommerce p.stars.selected a.active::before { color: var(--ev-star, #ffb400); } .woocommerce-product-rating .woocommerce-review-link { color: var(--ev-muted); font-size: .88rem; } /* ---------- Narrow cards (phones, 2 per row) ---------- Text buttons share the width; WhatsApp / Call turn into icon squares when a text button is next to them, so nothing is ever cut off: 1 → [full] 2 → [Order ........][◯] or [WhatsApp ....][☎] 3 → [Order full] / [WhatsApp ....][☎] or [Add to cart ...][◯] 4 → [Order full] / [Add to cart ...][◯][☎] */ li.product.ev-card { container: evcard / inline-size; } li.product.ev-card .ev-card__actions .button svg { width: 18px; height: 18px; flex: 0 0 auto; fill: currentColor; } li.product.ev-card .ev-card__actions .button .ev-btn__txt { overflow: hidden; text-overflow: ellipsis; } li.product.ev-card .ev-card__actions .button svg + .ev-btn__txt { margin-left: 5px; } @container evcard (max-width: 230px) { li.product.ev-card .ev-card__actions { display: flex; flex-wrap: wrap; } li.product.ev-card .ev-card__actions .button { flex: 1 1 0; width: auto; } li.product.ev-card .ev-card__actions:is([data-n="3"], [data-n="4"]) :is(.sb-cod-btn, .buy_now_archive) { flex-basis: 100%; } li.product.ev-card .ev-card__actions:is([data-n="3"], [data-n="4"]):not(:has(.sb-cod-btn, .buy_now_archive)) .add_to_cart_button { flex-basis: 100%; } /* Icon squares */ li.product.ev-card .ev-card__actions:not([data-n="1"]) .call_now_button, li.product.ev-card .ev-card__actions[data-n="2"]:has(.sb-cod-btn, .buy_now_archive, .add_to_cart_button) .whatsapp_button, li.product.ev-card .ev-card__actions:is([data-n="3"], [data-n="4"]):has(.add_to_cart_button):has(.sb-cod-btn, .buy_now_archive) .whatsapp_button { flex: 0 0 38px; width: 38px; padding: 0 !important; } li.product.ev-card .ev-card__actions:not([data-n="1"]) .call_now_button .ev-btn__txt, li.product.ev-card .ev-card__actions[data-n="2"]:has(.sb-cod-btn, .buy_now_archive, .add_to_cart_button) .whatsapp_button .ev-btn__txt, li.product.ev-card .ev-card__actions:is([data-n="3"], [data-n="4"]):has(.add_to_cart_button):has(.sb-cod-btn, .buy_now_archive) .whatsapp_button .ev-btn__txt { display: none; } } @container evcard (min-width: 231px) { li.product.ev-card .ev-card__actions .button svg { display: none; } /* wide cards: words only, as before */ li.product.ev-card .ev-card__actions .button svg + .ev-btn__txt { margin-left: 0; } }