/* ========================================================================== DOT Made — woocommerce.css Product card (shared by shop loop + Elementor rails), shop grid, and the merchandising blocks rendered by the DOT Made Elements plugin. ========================================================================== */ /* ---- Shop / archive grid ------------------------------------------------- */ .dm-shop { padding: 24px 24px 0; display: block; } /* bottom space: .dm-footer margin (footer.css) */ /* AJAX filter/sort in-flight state (theme.js) — a body-level class since the mobile filter/sort sheets live outside .dm-shop (printed in wp_footer) but their bodies also swap on every filter/sort change. Deliberately excludes .dm-shop__aside/.dm-department — the category widget has its own sliding- panel transition (see .dm-department__viewport below) and dimming the whole sidebar around it on every fetch is exactly the "reload" look that was cut. Only the "Filters" section and mobile sheets' non-category content dim, via their own selectors, not a blanket .dm-shop__aside rule. The skeleton grid itself is the loading signal, so it stays at full strength; only its siblings in .dm-shop__main dim. */ .dm-ajax-loading .dm-shop__main > :not(.dm-skeleton-grid), .dm-ajax-loading .dm-shop__aside-section--filters, .dm-ajax-loading .dm-mobile-filters-rest, .dm-ajax-loading #dm-sort-sheet .dm-sheet__body { opacity: 0.5; pointer-events: none; transition: opacity 0.15s ease; } .woocommerce ul.products, ul.products { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dm-gap); grid-template-columns: repeat(4, 1fr); } ul.products::before, ul.products::after { content: none !important; } .dm-cell { list-style: none; margin: 0 !important; width: auto !important; float: none !important; } .woocommerce-products-header__title, .dm-shop h1 { font-family: var(--dm-display); font-weight: 700; } .woocommerce-breadcrumb { font-size: 12.5px; color: var(--dm-muted); margin: 0 0 10px; } .woocommerce-breadcrumb a { color: var(--dm-muted); } .woocommerce-breadcrumb a:hover { color: var(--dm-green-dark); } /* Shop/category/tag title + breadcrumb (inc/archive.php's dotmade_render_shop_header_top() — not WooCommerce's own breadcrumb, which single-product still uses via .woocommerce-breadcrumb above). Only a sub-category (one with a parent) gets the .dm-breadcrumb row; the plain Shop page gets neither, and a top-level category gets just the H1. */ .dm-shop__header-top .woocommerce-products-header__title { margin: 0 0 6px; } .dm-breadcrumb { font-size: 12.5px; color: var(--dm-muted); margin: 0 0 8px; } .dm-breadcrumb a { color: var(--dm-muted); } .dm-breadcrumb a:hover { color: var(--dm-green-dark); } .dm-breadcrumb__sep { margin: 0 5px; color: var(--dm-line-strong); } .dm-breadcrumb__current { color: var(--dm-ink); font-weight: 600; } /* Product count + sort row under the title (see inc/archive.php — the two are rendered together on purpose so they can share this flex row, which isn't possible with WooCommerce's default result-count/ordering hooks since they aren't DOM siblings). */ .dm-shop__meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 6px 0 18px; padding-bottom: 14px; border-bottom: 1px solid var(--dm-line); } .dm-shop__count { color: var(--dm-muted); font-size: 13.5px; margin: 0; } .dm-shop__sort { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .dm-shop__sort-label { font-size: 13.5px; color: var(--dm-body); white-space: nowrap; } .dm-shop__sort select, .woocommerce-ordering select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a9099' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") right 12px center no-repeat; border: 1px solid var(--dm-line-strong); border-radius: 8px; padding: 9px 34px 9px 13px; font: 600 13.5px var(--dm-font); color: var(--dm-ink); cursor: pointer; } .dm-shop__sort select:hover, .woocommerce-ordering select:hover { border-color: var(--dm-green); } /* Desktop filter sidebar on shop/category/tag archives (hidden below 768px — the mobile filter sheet covers that instead, see the media query below). */ .dm-shop.dm-shop--with-sidebar { display: grid; grid-template-columns: 240px 1fr; align-items: start; gap: 28px; } .dm-shop.dm-shop--with-sidebar .dm-shop__main { min-width: 0; } .dm-shop__aside { order: -1; } .dm-shop__aside-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 16px; } .dm-shop__aside-title { font: 700 16px var(--dm-display); margin: 0 0 16px; color: var(--dm-ink); } .dm-shop__aside-head .dm-shop__aside-title { margin: 0; } .dm-shop__aside-clear { font: 600 12.5px var(--dm-font); color: var(--dm-green-dark); } .dm-shop__aside-clear:hover { text-decoration: underline; } /* The sidebar stays in view while the grid scrolls or grows ("Load more"). Only where it sits beside the grid (>1024px; it stacks above it below that). If it's taller than the screen it scrolls on its own. Needs html/body `overflow-x: clip`, not `hidden` (theme.css), or sticky is dead. */ @media (min-width: 1025px) { .dm-shop__aside { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--dm-line-strong) transparent; } .admin-bar .dm-shop__aside { top: 48px; max-height: calc(100vh - 64px); } } /* Desktop sidebar filters: each section is divided from the next, and its option list scrolls on its own once it passes ~8½ rows (the half row hints there's more). Scroll shadows are pure CSS: the --dm-bg "covers" scroll with the content (local) and hide the shadows (scroll) at either end. The mobile filter sheet is untouched; the sheet itself scrolls. */ .dm-shop__aside .dm-filter-widget { margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--dm-line); } .dm-shop__aside .dm-filter-widget:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } .dm-shop__aside .dm-filter-widget ul { max-height: 280px; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; scrollbar-color: var(--dm-line-strong) transparent; background: linear-gradient(var(--dm-bg) 30%, rgba(246, 247, 249, 0)) 0 0 / 100% 28px no-repeat local, linear-gradient(rgba(246, 247, 249, 0), var(--dm-bg) 70%) 0 100% / 100% 28px no-repeat local, radial-gradient(farthest-side at 50% 0, rgba(40, 50, 60, 0.14), rgba(40, 50, 60, 0)) 0 0 / 100% 10px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgba(40, 50, 60, 0.14), rgba(40, 50, 60, 0)) 0 100% / 100% 10px no-repeat scroll; } /* "Refine by Category" as its own peer section, above "Filters" (desktop only — see .dm-department below for the shared drill-down markup, also used, unwrapped in its own section, inside the mobile filter sheet). */ .dm-shop__aside-section--department { padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--dm-line); } /* "Refine by Category" drill-down tree — shared by the desktop sidebar and the mobile filter sheet (inc/archive.php's dotmade_render_department_filter()). Plain navigational links, not checkboxes (unlike .dm-filter-check) — every click is a real category page, so it's styled to read as a menu. */ .dm-dept-tree__back { display: flex; align-items: center; gap: 4px; padding: 0 0 10px; margin-bottom: 8px; border-bottom: 1px solid var(--dm-line); font: 600 13px var(--dm-font); color: var(--dm-body); } .dm-dept-tree__back:hover { color: var(--dm-green-dark); } .dm-dept-tree__current { padding: 9px 10px; margin: 0 0 8px; background: var(--dm-green-tint); color: var(--dm-green-dark); font: 700 13.5px var(--dm-font); border-radius: 6px; } .dm-dept-tree { list-style: none; margin: 0; padding: 0; } .dm-dept-tree--nested { padding-left: 12px; border-left: 2px solid var(--dm-line); margin-left: 2px; } .dm-dept-tree__item a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; color: var(--dm-body); font-size: 13.5px; } .dm-dept-tree__item a:hover { color: var(--dm-green-dark); } .dm-dept-tree__count { color: var(--dm-muted); font-size: 12px; flex: 0 0 auto; } .dm-dept-tree__item--more { display: none; } .dm-dept-tree.is-expanded .dm-dept-tree__item--more { display: list-item; } .dm-dept-tree__toggle { background: none; border: 0; padding: 6px 0 0; cursor: pointer; color: var(--dm-green-dark); font: 700 12.5px var(--dm-font); } .dm-dept-tree__toggle:hover { text-decoration: underline; } /* Sliding-panel transition for Refine-by-Category navigation (theme.js's slideDepartment()/setDepartmentInstant()) — drilling into a child pans the new panel in from the right while the old one exits left; going back via "‹ All Categories"/parent does the reverse. Deliberately not part of the generic AJAX fragment swap so clicking a category never looks like the widget just "reloaded". The viewport's height animates alongside the pan so a shorter/longer child list doesn't just snap to size. */ .dm-department__viewport { position: relative; overflow: hidden; transition: height 220ms var(--dm-ease-in-out); } .dm-department__panel--sliding { position: absolute; top: 0; left: 0; width: 100%; transition: transform 220ms var(--dm-ease-in-out); } .dm-department__panel--from-right { transform: translateX(100%); } .dm-department__panel--from-left { transform: translateX(-100%); } .dm-department__panel--to-left { transform: translateX(-100%); } .dm-department__panel--to-right { transform: translateX(100%); } .dm-department__panel--center { transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .dm-department__viewport, .dm-department__panel--sliding { transition: none; } } /* ---- Form controls (site-wide) ----------------------------------------------- One look for every form field: checkout, basket coupon, login/register, account details and addresses, and Contact Form 7. WooCommerce draws its fields from the --wc-form-* variables (set here) and styles them as `.woocommerce form .form-row .input-text` (0,3,1), so the rules below use that same chain; a shorter selector (as customer.css once had) loses and leaves core's dark 4px-radius boxes. Selects get the theme chevron; the searchable country/province dropdowns (selectWoo/select2) match, and their open list is styled globally because select2 appends it to . */ :root { --wc-form-border-color: #d5dae0; --wc-form-border-radius: 9px; --wc-form-border-width: 1px; --wc-form-color-background: #fff; --wc-form-color-text: var(--dm-ink); --dm-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%234a525b' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea, .woocommerce form .input-text, .woocommerce .select2-container .select2-selection--single, .dm-co-opt__sub select, .wpcf7 input[type="text"], .wpcf7 input[type="email"], .wpcf7 input[type="tel"], .wpcf7 input[type="url"], .wpcf7 input[type="number"], .wpcf7 input[type="date"], .wpcf7 select, .wpcf7 textarea { box-sizing: border-box; width: 100%; min-height: 46px; margin: 0; padding: 11px 14px; border: 1px solid #d5dae0; border-radius: 9px; background-color: #fff; font: 400 14px/1.4 var(--dm-font); letter-spacing: normal; color: var(--dm-ink); box-shadow: none; transition: border-color 0.15s, box-shadow 0.15s; } .woocommerce form .form-row textarea, .woocommerce form textarea.input-text, .wpcf7 textarea { min-height: 110px; line-height: 1.5; resize: vertical; } .woocommerce form .input-text::placeholder, .woocommerce form textarea::placeholder, .wpcf7 input::placeholder, .wpcf7 textarea::placeholder { color: #9aa1a9; opacity: 1; } .woocommerce form .form-row .input-text:hover, .woocommerce form .form-row select:hover, .woocommerce form .input-text:hover, .woocommerce .select2-container .select2-selection--single:hover, .wpcf7 input:hover, .wpcf7 select:hover, .wpcf7 textarea:hover { border-color: #b8bfc7; } .woocommerce form .form-row .input-text:focus, .woocommerce form .form-row select:focus, .woocommerce form .form-row textarea:focus, .woocommerce form .input-text:focus, .woocommerce .select2-container--focus .select2-selection--single, .woocommerce .select2-container--open .select2-selection--single, .dm-co-opt__sub select:focus, .wpcf7 input:focus, .wpcf7 select:focus, .wpcf7 textarea:focus { outline: 0; border-color: var(--dm-green); box-shadow: 0 0 0 3px rgba(116, 190, 114, 0.18); } .woocommerce form .form-row .input-text[readonly], .woocommerce form .form-row .input-text:disabled, .woocommerce form .form-row select:disabled { background-color: #f4f5f7; color: var(--dm-muted); } /* Native selects: the theme chevron instead of the browser's arrow. */ .woocommerce form .form-row select, .woocommerce form select, .dm-co-opt__sub select, .wpcf7 select { -webkit-appearance: none; appearance: none; padding-right: 40px; cursor: pointer; background-image: var(--dm-chevron); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px 8px; } /* select2 / selectWoo (country, province) */ .woocommerce .select2-container .select2-selection--single { display: flex; align-items: center; height: auto; } .woocommerce .select2-container .select2-selection--single .select2-selection__rendered { flex: 1; padding: 0; line-height: 22px; color: var(--dm-ink); } .woocommerce .select2-container .select2-selection--single .select2-selection__placeholder { color: #9aa1a9; } .woocommerce .select2-container .select2-selection--single .select2-selection__arrow { top: 0; right: 10px; width: 22px; height: 100%; background: var(--dm-chevron) center / 12px 8px no-repeat; } .woocommerce .select2-container .select2-selection--single .select2-selection__arrow b { display: none; } .select2-container .select2-dropdown { overflow: hidden; border: 1px solid #d5dae0; border-radius: 9px; background: #fff; box-shadow: 0 10px 28px rgba(40, 50, 60, 0.14); } .select2-container--open .select2-dropdown--below { margin-top: 4px; } .select2-container--open .select2-dropdown--above { margin-top: -4px; } .select2-search--dropdown { padding: 8px; } .select2-container .select2-search--dropdown .select2-search__field { min-height: 40px; padding: 8px 12px; border: 1px solid #d5dae0; border-radius: 8px; font: 400 14px var(--dm-font); } .select2-container .select2-search--dropdown .select2-search__field:focus { outline: 0; border-color: var(--dm-green); } .select2-results__option { padding: 9px 14px; font: 400 14px var(--dm-font); color: var(--dm-ink); } .select2-container .select2-results__option--highlighted[aria-selected], .select2-container .select2-results__option--highlighted[data-selected], .select2-container .select2-results__option--highlighted { background: var(--dm-green-tint); color: var(--dm-ink); } .select2-container .select2-results__option[aria-selected="true"], .select2-container .select2-results__option[data-selected="true"] { background: #f1f3f5; font-weight: 600; } /* States: error red; no green "valid" border (core adds one to every filled field). Core's state rules use `input.input-text` (0,4,2), so ours repeat the element. */ .woocommerce form .form-row.woocommerce-invalid input.input-text, .woocommerce form .form-row.woocommerce-invalid textarea.input-text, .woocommerce form .form-row.woocommerce-invalid select, .woocommerce form .form-row.woocommerce-invalid .select2-container:not(.select2-container--open) .select2-selection, .wpcf7 .wpcf7-not-valid { border-color: #d6452f; } .woocommerce form .form-row.woocommerce-invalid label { color: #d6452f; } .woocommerce form .form-row.woocommerce-validated input.input-text, .woocommerce form .form-row.woocommerce-validated textarea.input-text, .woocommerce form .form-row.woocommerce-validated select, .woocommerce form .form-row.woocommerce-validated .select2-container:not(.select2-container--open) .select2-selection { border-color: #d5dae0; } .woocommerce form .form-row.woocommerce-validated input.input-text:focus, .woocommerce form .form-row.woocommerce-invalid input.input-text:focus { border-color: var(--dm-green); } /* Labels */ .woocommerce form .form-row label, .wpcf7 label { display: block; margin: 0 0 6px; font: 600 13px/1.4 var(--dm-font); color: var(--dm-ink); } .woocommerce form .form-row label.checkbox, .woocommerce form .form-row label.woocommerce-form__label-for-checkbox { display: flex; align-items: center; gap: 10px; font-weight: 500; color: var(--dm-body); } .woocommerce form .form-row .required { color: #d6452f; text-decoration: none; border: 0; } .wpcf7 .wpcf7-not-valid-tip { margin-top: 6px; font-size: 12.5px; color: #c0392b; } /* Phones: 16px stops iOS zooming into a field on focus. */ @media (max-width: 768px) { .woocommerce form .form-row .input-text, .woocommerce form .form-row select, .woocommerce form .form-row textarea, .woocommerce form .input-text, .woocommerce .select2-container .select2-selection--single, .select2-container .select2-search--dropdown .select2-search__field, .wpcf7 input, .wpcf7 select, .wpcf7 textarea { font-size: 16px; } } /* ---- WooCommerce notices (site-wide) ---------------------------------------- Info / success / error messages WooCommerce prints in pages (wc_print_notice, notices/*.php): one card style instead of core's grey box with a purple top bar and icon font. The icon is an inline SVG mask in currentColor (no WooCommerce icon-font download). Both selector forms are listed so these also beat core's `.woocommerce .woocommerce-*` rules on WooCommerce pages. The drawer shows add-to-cart errors itself (inc/cart-drawer.php). */ .woocommerce-error, .woocommerce-info, .woocommerce-message, .woocommerce .woocommerce-error, .woocommerce .woocommerce-info, .woocommerce .woocommerce-message { position: relative; display: block; width: auto; margin: 0 0 16px; padding: 12px 16px 12px 46px; border: 1px solid #d5e2f0; border-radius: 10px; background: #f2f7fc; color: #22466e; font: 400 14px/1.5 var(--dm-font); list-style: none; word-wrap: break-word; } .woocommerce-message, .woocommerce .woocommerce-message { border-color: #cfe6cd; background: var(--dm-green-tint); color: #2b6528; } .woocommerce-error, .woocommerce .woocommerce-error { border-color: #f1c7bd; background: #fdf2ef; color: #8a2f1b; } .woocommerce-error::before, .woocommerce-info::before, .woocommerce-message::before, .woocommerce .woocommerce-error::before, .woocommerce .woocommerce-info::before, .woocommerce .woocommerce-message::before { content: ""; display: block; position: absolute; top: 13px; left: 16px; width: 19px; height: 19px; background: currentColor; font-family: inherit; -webkit-mask: var(--dm-notice-icon) center / contain no-repeat; mask: var(--dm-notice-icon) center / contain no-repeat; } .woocommerce-info, .woocommerce .woocommerce-info { --dm-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5M12 7.5v.01'/%3E%3C/svg%3E"); } .woocommerce-message, .woocommerce .woocommerce-message { --dm-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.5 2.7 2.7L16 9.8'/%3E%3C/svg%3E"); } .woocommerce-error, .woocommerce .woocommerce-error { --dm-notice-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5v5.5M12 16.5v.01'/%3E%3C/svg%3E"); } .woocommerce-error li, .woocommerce .woocommerce-error li { margin: 0; list-style: none; } .woocommerce-error li + li { margin-top: 4px; } .woocommerce-error a, .woocommerce-info a, .woocommerce-message a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } /* The "View cart" / "Continue shopping" .button WooCommerce puts in notices. */ .woocommerce-error .button, .woocommerce-info .button, .woocommerce-message .button, .woocommerce .woocommerce-error a.button, .woocommerce .woocommerce-info a.button, .woocommerce .woocommerce-message a.button { float: right; margin: 0 0 0 16px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: inherit; font: 700 14px/1.5 var(--dm-font); text-decoration: underline; text-underline-offset: 2px; } .woocommerce-notices-wrapper:empty { display: none; } /* "No products found" (woocommerce/loop/no-products-found.php). It keeps .woocommerce-info for the shop's AJAX grid swap, so it undoes the notice card above at higher specificity. */ .woocommerce-info.dm-empty, .woocommerce .woocommerce-info.dm-empty { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 4px 0 24px; padding: 40px 24px; border: 1px dashed #d5d9de; border-radius: 14px; background: #fff; color: var(--dm-body); text-align: center; } .woocommerce-info.dm-empty::before, .woocommerce .woocommerce-info.dm-empty::before { content: none; display: none; } .dm-empty__icon { display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 6px; border-radius: 50%; background: var(--dm-green-tint); color: var(--dm-green-dark); } .dm-empty .dm-empty__title { margin: 0; font: 700 19px/1.3 var(--dm-display); color: var(--dm-ink); } .dm-empty__text { max-width: 440px; margin: 0; font-size: 14px; line-height: 1.55; color: var(--dm-body); } .dm-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 12px; } .dm-empty .dm-empty__btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 1.5px solid var(--dm-line-strong); border-radius: 9px; background: #fff; color: var(--dm-ink); font: 700 14px var(--dm-font); text-decoration: none; } .dm-empty .dm-empty__btn:hover { border-color: var(--dm-green); } .dm-empty .dm-empty__btn--primary { border-color: var(--dm-orange); background: var(--dm-orange); color: #fff; } .dm-empty .dm-empty__btn--primary:hover { border-color: var(--dm-orange); color: #fff; filter: brightness(0.95); } /* ---- Product card -------------------------------------------------------- */ .dm-card { background: var(--dm-card); border: 1px solid var(--dm-line); border-radius: var(--dm-radius); padding: 12px; display: flex; flex-direction: column; gap: 7px; height: 100%; transition: box-shadow 0.15s ease, transform 0.15s ease; } /* Real hover only: phones apply hover on tap and keep it (the card stayed lifted). */ @media (hover: hover) and (pointer: fine) { .dm-card:hover { box-shadow: var(--dm-shadow-hover); transform: translateY(-3px); } } .dm-card__media { position: relative; display: block; border-radius: 8px; overflow: hidden; background: var(--dm-bg); aspect-ratio: 1; } .dm-card__media img { width: 100%; height: 100%; object-fit: cover; } .dm-card__off { position: absolute; top: 8px; left: 8px; background: var(--dm-orange); color: #fff; font: 700 11px var(--dm-font); padding: 3px 7px; border-radius: 5px; } .dm-card__off--single { top: 12px; left: 12px; font-size: 13px; } /* NEW badge — loop card (top-right, clears the wishlist heart on hover) */ .dm-card__new { position: absolute; top: 8px; right: 8px; background: #f4c13d; color: #fff; font: 700 11px var(--dm-font); padding: 3px 7px; border-radius: 5px; pointer-events: none; } .dm-card:hover .dm-card__new { opacity: 0; } /* reveal the heart on hover */ .dm-card__wish { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); border: 0; cursor: pointer; display: grid; place-items: center; color: var(--dm-muted); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); } .dm-card__wish.is-active { color: var(--dm-orange); } @media (hover: hover) and (pointer: fine) { .dm-card__wish:hover { color: var(--dm-orange); } } .dm-card__wish { transition: scale 200ms var(--dm-ease-out); } .dm-card__title { font-size: 12.5px; line-height: 1.32; color: var(--dm-ink); min-height: 33px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .dm-card__title:hover { color: var(--dm-green-dark); } .dm-card__rating { font-size: 12px; color: var(--dm-muted); display: flex; align-items: center; gap: 4px; } .dm-card__star { color: var(--dm-star); } .dm-card__score { color: var(--dm-star); font-weight: 600; } .dm-card__price { font-family: var(--dm-display); font-weight: 700; font-size: 16px; color: var(--dm-ink); } .dm-card__price .woocommerce-Price-amount, .dm-card__price ins { text-decoration: none; } .dm-card__price del { color: var(--dm-muted); font-weight: 400; font-size: 12px; margin-left: 6px; } .dm-card__price ins { color: var(--dm-ink); } /* Add-to-cart button (WooCommerce loop button, restyled) */ .dm-card .button, .dm-btn--cart { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; background: #fff; color: var(--dm-orange); border: 1.5px solid var(--dm-orange); border-radius: 7px; font: 700 12.5px var(--dm-font); padding: 8px 10px; cursor: pointer; transition: background 0.15s, color 0.15s, scale 160ms var(--dm-ease-out); } .dm-card .button:hover, .dm-btn--cart:hover { background: var(--dm-orange); color: #fff; } .dm-card .added_to_cart { font-size: 11px; color: var(--dm-green-dark); text-align: center; margin-top: 4px; } /* Add-to-cart is a POST
+