/** * WD Wishlist — front end styles. * * Colour comes from four custom properties the plugin computes in PHP from a * single accent: --wdwl-accent, --wdwl-accent-ink, --wdwl-accent-border, * --wdwl-accent-strong, --wdwl-accent-hover. Light and dark accents both stay * readable without any per-theme overrides. * * --wdwl-on is the filled/unfilled switch for a heart. It is set by a ~500 byte * inline script in , which is why hearts paint correctly on the very * first frame of a fully cached page. */ :root { --wdwl-accent: #f4f4f4; --wdwl-accent-ink: #1c1c1c; --wdwl-accent-border: #d2d2d2; --wdwl-accent-strong: #2b2b2b; --wdwl-accent-hover: #e6e6e6; --wdwl-heart: #d64545; --wdwl-surface: #fff; --wdwl-line: rgba(0, 0, 0, 0.1); --wdwl-muted: #6b6b6b; --wdwl-radius: 10px; --wdwl-gap: 18px; } /* ===================================================================== * Heart button * ================================================================== */ .wdwl-btn { --wdwl-on: 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin: 0; padding: 9px; line-height: 1; color: var(--wdwl-accent-strong); background: var(--wdwl-surface); border: 1px solid var(--wdwl-accent-border); border-radius: var(--wdwl-radius); cursor: pointer; box-shadow: none; transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease; -webkit-appearance: none; appearance: none; } .wdwl-btn:hover, .wdwl-btn:focus-visible { background: var(--wdwl-accent-hover); border-color: var(--wdwl-accent-strong); } .wdwl-btn:focus-visible { outline: 2px solid var(--wdwl-accent-strong); outline-offset: 2px; } .wdwl-btn:active { transform: scale(0.94); } .wdwl-btn__ico { display: block; position: relative; width: 20px; height: 20px; } .wdwl-btn__ico svg { display: block; } .wdwl-heart-line { opacity: calc(1 - var(--wdwl-on, 0)); } .wdwl-heart-fill { fill: var(--wdwl-heart); opacity: var(--wdwl-on, 0); transform-origin: 12px 13px; } .wdwl-btn__txt { font-size: 0.9em; letter-spacing: 0.01em; } /* The one flourish: the heart springs when a product is saved. */ .wdwl-btn.is-pop .wdwl-heart-fill { animation: wdwl-pop 0.42s cubic-bezier(0.2, 1.4, 0.4, 1); } @keyframes wdwl-pop { 0% { transform: scale(0.2); } 55% { transform: scale(1.22); } 100% { transform: scale(1); } } /* Overlay placement on archive cards. */ .wdwl-btn--overlay { position: absolute; top: 10px; right: 10px; z-index: 3; padding: 8px; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(140%) blur(4px); border-color: transparent; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); } .wdwl-btn--overlay:hover { background: #fff; } /* Most themes leave the loop item unpositioned. */ .woocommerce ul.products li.product, ul.products li.product { position: relative; } .wdwl-btn--single { padding: 10px 16px; vertical-align: middle; } /* ===================================================================== * Header counter * ================================================================== */ .wdwl-counter { position: relative; display: inline-flex; align-items: center; justify-content: center; color: inherit; text-decoration: none; line-height: 1; } .wdwl-counter:hover { color: inherit; opacity: 0.75; } .wdwl-counter__ico svg { display: block; } .wdwl-counter__n { position: absolute; top: -6px; right: -8px; min-width: 17px; height: 17px; padding: 0 4px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; line-height: 1; color: #fff; background: var(--wdwl-heart); border-radius: 999px; box-sizing: border-box; opacity: var(--wdwl-has, 0); transform: scale(calc(0.5 + 0.5 * var(--wdwl-has, 0))); transition: opacity 0.18s ease, transform 0.18s ease; } .wdwl-counter__n::after { content: var(--wdwl-n, "0"); } .wdwl-counter--zero .wdwl-counter__n { opacity: 1; transform: none; } .wdwl-menu-item { display: flex; align-items: center; } /* Counter dropped next to a theme's own header icons. Inherits the header's own colour and font size, so it sits with the cart icon rather than beside it looking imported. */ .wdwl-header-slot { display: inline-flex; align-items: center; margin: 0 14px 0 0; vertical-align: middle; } .wdwl-counter--placed { color: inherit; font-size: inherit; } /* ===================================================================== * Shared buttons * ================================================================== */ .wdwl-btn-solid, .wdwl-btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 18px; font-size: 0.92rem; font-weight: 600; line-height: 1.2; text-decoration: none; border-radius: var(--wdwl-radius); border: 1px solid var(--wdwl-accent-border); cursor: pointer; transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease; -webkit-appearance: none; appearance: none; } .wdwl-btn-solid { color: var(--wdwl-accent-ink); background: var(--wdwl-accent); } .wdwl-btn-solid:hover, .wdwl-btn-solid:focus-visible { color: var(--wdwl-accent-ink); background: var(--wdwl-accent-hover); border-color: var(--wdwl-accent-strong); } .wdwl-btn-ghost { color: var(--wdwl-accent-strong); background: transparent; } .wdwl-btn-ghost:hover, .wdwl-btn-ghost:focus-visible { color: var(--wdwl-accent-strong); background: var(--wdwl-accent-hover); border-color: var(--wdwl-accent-strong); } .wdwl-btn-ghost--danger:hover { color: var(--wdwl-heart); border-color: var(--wdwl-heart); background: transparent; } .wdwl-btn-solid--sm, .wdwl-btn-ghost--sm { padding: 8px 12px; font-size: 0.82rem; } .wdwl-btn-solid:focus-visible, .wdwl-btn-ghost:focus-visible { outline: 2px solid var(--wdwl-accent-strong); outline-offset: 2px; } .wdwl-btn-solid.is-busy, .wdwl-btn-ghost.is-busy { opacity: 0.6; pointer-events: none; } .wdwl-link { color: var(--wdwl-accent-strong); text-decoration: underline; text-underline-offset: 3px; font-size: 0.9rem; } /* ===================================================================== * Wishlist page * ================================================================== */ .wdwl-page { margin: 0 0 40px; } .wdwl-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding: 0 0 16px; margin: 0 0 var(--wdwl-gap); border-bottom: 1px solid var(--wdwl-line); } .wdwl-toolbar__count { margin: 0; font-size: 0.95rem; color: var(--wdwl-muted); } .wdwl-toolbar__count strong { color: inherit; } .wdwl-toolbar__actions { display: flex; flex-wrap: wrap; gap: 8px; } .wdwl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--wdwl-gap); margin: 0; padding: 0; list-style: none; } .wdwl-card { display: flex; flex-direction: column; overflow: hidden; background: var(--wdwl-surface); border: 1px solid var(--wdwl-line); border-radius: var(--wdwl-radius); transition: opacity 0.22s ease, transform 0.22s ease, border-color 0.18s ease; } .wdwl-card:hover { border-color: var(--wdwl-accent-border); } .wdwl-card.is-leaving { opacity: 0; transform: scale(0.96); } .wdwl-card.is-out .wdwl-card__media { filter: grayscale(1); opacity: 0.65; } .wdwl-card__media { position: relative; display: block; line-height: 0; } .wdwl-card__media img { width: 100%; height: auto; display: block; } .wdwl-tag { position: absolute; top: 10px; left: 10px; padding: 4px 8px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 999px; } .wdwl-tag--sale { color: var(--wdwl-accent-ink); background: var(--wdwl-accent); border: 1px solid var(--wdwl-accent-border); } .wdwl-tag--out { color: #fff; background: rgba(0, 0, 0, 0.7); } .wdwl-card__body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 14px; } .wdwl-card__title { margin: 0; font-size: 0.95rem; font-weight: 600; line-height: 1.35; } .wdwl-card__title a { color: inherit; text-decoration: none; } .wdwl-card__title a:hover { text-decoration: underline; text-underline-offset: 2px; } .wdwl-card__price { font-size: 0.95rem; color: var(--wdwl-muted); } .wdwl-card__price ins { text-decoration: none; font-weight: 700; color: inherit; } .wdwl-card__price del { opacity: 0.6; margin-right: 6px; } .wdwl-card__actions { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 4px; } .wdwl-card__actions .wdwl-btn-solid, .wdwl-card__actions .wdwl-btn-ghost { flex: 1; padding: 10px 12px; font-size: 0.85rem; } .wdwl-remove { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; padding: 0; color: var(--wdwl-muted); background: transparent; border: 1px solid var(--wdwl-line); border-radius: var(--wdwl-radius); cursor: pointer; transition: color 0.18s ease, border-color 0.18s ease; } .wdwl-remove:hover, .wdwl-remove:focus-visible { color: var(--wdwl-heart); border-color: var(--wdwl-heart); } /* Empty state */ .wdwl-empty { padding: 48px 20px; text-align: center; border: 1px dashed var(--wdwl-line); border-radius: var(--wdwl-radius); } .wdwl-empty__ico { display: block; color: var(--wdwl-accent-border); margin: 0 auto 14px; width: 44px; } .wdwl-empty__title { margin: 0 0 6px; font-size: 1.15rem; } .wdwl-empty__text { margin: 0 0 20px; color: var(--wdwl-muted); } /* Shared list banner */ .wdwl-shared { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: var(--wdwl-gap); padding: 14px 16px; background: var(--wdwl-accent); color: var(--wdwl-accent-ink); border: 1px solid var(--wdwl-accent-border); border-radius: var(--wdwl-radius); } .wdwl-shared p { margin: 0; } /* ===================================================================== * Upsells * ================================================================== */ .wdwl-upsells { margin: 44px 0 0; padding-top: 28px; border-top: 1px solid var(--wdwl-line); } .wdwl-upsells__title { margin: 0 0 var(--wdwl-gap); font-size: 1.15rem; letter-spacing: 0.01em; } .wdwl-card--upsell .wdwl-card__actions .wdwl-btn { flex: none; } /* ===================================================================== * Cart page strip * ================================================================== */ .wdwl-cart-block { margin: 40px 0 0; padding-top: 26px; border-top: 1px solid var(--wdwl-line); } .wdwl-cart-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .wdwl-cart-block__head h2 { margin: 0; font-size: 1.05rem; } .wdwl-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(150px, 1fr); gap: 14px; margin: 0; padding: 0 4px 10px; list-style: none; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; } .wdwl-rail__item { display: flex; flex-direction: column; gap: 6px; scroll-snap-align: start; } .wdwl-rail__media img { width: 100%; height: auto; display: block; border-radius: var(--wdwl-radius); } .wdwl-rail__title { font-size: 0.85rem; line-height: 1.3; color: inherit; text-decoration: none; } .wdwl-rail__price { font-size: 0.85rem; color: var(--wdwl-muted); } .wdwl-rail__item .wdwl-btn-solid, .wdwl-rail__item .wdwl-btn-ghost { margin-top: auto; width: 100%; } /* "Save for later" under a cart line */ .wdwl-save-later { display: inline-block; margin-top: 4px; padding: 0; font-size: 0.78rem; color: var(--wdwl-muted); background: none; border: 0; border-bottom: 1px dotted currentColor; cursor: pointer; line-height: 1.4; } .wdwl-save-later:hover { color: var(--wdwl-heart); } /* ===================================================================== * Toasts * ================================================================== */ .wdwl-toasts { position: fixed; left: 50%; bottom: 24px; z-index: 99999; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; } .wdwl-toast { display: flex; align-items: center; gap: 14px; max-width: min(92vw, 460px); padding: 12px 18px; font-size: 0.9rem; color: #fff; background: #1c1c1c; border-radius: 999px; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22); opacity: 0; transform: translateY(10px); transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: auto; } .wdwl-toast.is-in { opacity: 1; transform: translateY(0); } .wdwl-toast--warn { background: #7a2020; } .wdwl-toast a { color: #fff; font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; } /* ===================================================================== * Responsive + motion * ================================================================== */ @media (max-width: 600px) { .wdwl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } .wdwl-toolbar { align-items: flex-start; flex-direction: column; } .wdwl-toolbar__actions { width: 100%; } .wdwl-toolbar__actions .wdwl-btn-solid, .wdwl-toolbar__actions .wdwl-btn-ghost { flex: 1; } .wdwl-card__body { padding: 10px; } .wdwl-toasts { bottom: 16px; } } @media (prefers-reduced-motion: reduce) { .wdwl-btn, .wdwl-card, .wdwl-toast, .wdwl-counter__n, .wdwl-btn-solid, .wdwl-btn-ghost { transition: none; } .wdwl-btn.is-pop .wdwl-heart-fill { animation: none; } }