:root{--wf:#111;--wfmuted:#777;--wfline:#e8e8e8} .wishflow-heart{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:#111;padding:7px 0;cursor:pointer;font:inherit}.wishflow-heart-icon{font-size:20px;line-height:1}.wishflow-heart-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.wishflow-heart.is-active .wishflow-heart-icon{font-weight:700} .wishflow-count-link{color:#111;text-decoration:none}.wishflow-page{max-width:1100px;margin:auto;padding:28px 18px 60px}.wishflow-page-head{display:flex;justify-content:space-between;align-items:end;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--wfline)}.wishflow-eyebrow{margin:0 0 4px;color:#999;font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.wishflow-page h1{margin:0;font-size:32px}.wishflow-page-actions{display:flex;gap:8px}.wishflow-page button,.wishflow-create-list{border:1px solid #ddd;background:#fff;color:#111;padding:8px 11px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;cursor:pointer} .wishflow-list-toolbar{display:flex;justify-content:space-between;align-items:end;padding:18px 0;gap:12px}.wishflow-list-toolbar label{display:grid;gap:5px;color:#777;font-size:10px;text-transform:uppercase;letter-spacing:.09em}.wishflow-list-selector{min-width:220px;padding:9px;border:1px solid #ddd;background:#fff} .wishflow-items{border-top:1px solid var(--wfline)}.wishflow-item{display:grid;grid-template-columns:150px 1fr;gap:22px;padding:22px 0;border-bottom:1px solid var(--wfline)}.wishflow-item-image img{width:100%;aspect-ratio:1;object-fit:cover;display:block}.wishflow-item-top{display:flex;justify-content:space-between;gap:16px}.wishflow-item-name{color:#111;text-decoration:none;font-size:17px;font-weight:600}.wishflow-item-price{margin-top:5px}.wishflow-remove{border:0!important;background:transparent!important;font-size:24px!important;color:#777!important}.wishflow-stock{margin:9px 0;font-size:11px;font-weight:650}.wishflow-price-drop{margin-left:8px;color:#39724a;font-size:10px;text-transform:uppercase;font-weight:700}.wishflow-price-rise{margin-left:8px;color:#8a6a2f;font-size:10px;text-transform:uppercase;font-weight:700} .wishflow-pro-fields{display:grid;grid-template-columns:150px 1fr auto;gap:8px;margin:14px 0}.wishflow-priority,.wishflow-note{border:1px solid #ddd;padding:8px;background:#fff}.wishflow-item-actions a,.wishflow-empty a{display:inline-flex;border:1px solid #111;padding:9px 13px;color:#111;text-decoration:none;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em}.wishflow-empty{text-align:center;padding:70px 20px;border-bottom:1px solid var(--wfline)}.wishflow-empty span{font-size:44px}.wishflow-empty h2{margin:8px 0}.wishflow-empty p{color:#777} @media(max-width:700px){.wishflow-page-head,.wishflow-list-toolbar{align-items:stretch;flex-direction:column}.wishflow-list-selector{width:100%;min-width:0}.wishflow-item{grid-template-columns:100px 1fr;gap:14px}.wishflow-pro-fields{grid-template-columns:1fr}} /* ========================================================= WishFlow Pro Private v1.0.1 — Uniform Shop Card Controls Wishlist first, Astra Select Options / bag second. ========================================================= */ /* The product card becomes the positioning context. */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { position:relative !important; } /* LOOP heart only: circular icon over the product image. */ .woocommerce ul.products li.product .wishflow-heart--loop, .woocommerce-page ul.products li.product .wishflow-heart--loop { position:absolute !important; top:1em !important; right:3.75em !important; /* directly before Astra's bag at right:1em */ z-index:12 !important; width:2.45em !important; height:2.45em !important; min-width:2.45em !important; min-height:2.45em !important; padding:0 !important; margin:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:0 !important; border:0 !important; border-radius:50% !important; background:#fff !important; background-color:#fff !important; color:#111 !important; -webkit-text-fill-color:#111 !important; box-shadow:0 4px 10px rgba(0,0,0,.12) !important; opacity:1 !important; visibility:visible !important; transform:none !important; cursor:pointer !important; transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease !important; } /* Hide wording on shop cards: icon only. */ .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-label, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-label { position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important; } /* Heart itself matches the visual weight of Astra's bag SVG. */ .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-icon, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-icon { display:block !important; width:auto !important; height:auto !important; font-size:1.65em !important; font-family:Arial, Helvetica, sans-serif !important; font-weight:400 !important; line-height:1 !important; color:#111 !important; -webkit-text-fill-color:#111 !important; } /* Selected wishlist stays uniform; only the heart becomes filled. */ .woocommerce ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-icon, .woocommerce-page ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-icon { font-size:1.48em !important; } /* Gentle feedback, without moving the control out of alignment. */ .woocommerce ul.products li.product .wishflow-heart--loop:hover, .woocommerce ul.products li.product .wishflow-heart--loop:focus-visible, .woocommerce-page ul.products li.product .wishflow-heart--loop:hover, .woocommerce-page ul.products li.product .wishflow-heart--loop:focus-visible { transform:translateY(-1px) !important; box-shadow:0 5px 13px rgba(0,0,0,.17) !important; outline:none !important; } /* Astra modern WooCommerce card button: force the bag/select-options control to match WishFlow's circle. */ .woocommerce ul.products li.product .ast-on-card-button.ast-select-options-trigger, .woocommerce-page ul.products li.product .ast-on-card-button.ast-select-options-trigger { top:1em !important; right:1em !important; z-index:11 !important; opacity:1 !important; visibility:visible !important; } /* Same 2.45em white circle for Astra's actual SVG container. */ .woocommerce ul.products li.product .ast-select-options-trigger .ahfb-svg-iconset, .woocommerce-page ul.products li.product .ast-select-options-trigger .ahfb-svg-iconset { width:2.45em !important; height:2.45em !important; min-width:2.45em !important; min-height:2.45em !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; background:#fff !important; background-color:#fff !important; color:#111 !important; opacity:1 !important; box-shadow:0 4px 10px rgba(0,0,0,.12) !important; transition:transform .15s ease, box-shadow .15s ease !important; } .woocommerce ul.products li.product .ast-select-options-trigger:hover .ahfb-svg-iconset, .woocommerce ul.products li.product .ast-select-options-trigger:focus .ahfb-svg-iconset, .woocommerce-page ul.products li.product .ast-select-options-trigger:hover .ahfb-svg-iconset, .woocommerce-page ul.products li.product .ast-select-options-trigger:focus .ahfb-svg-iconset { transform:translateY(-1px); box-shadow:0 5px 13px rgba(0,0,0,.17) !important; } /* Keep Astra's "Select options" text as a tooltip rather than a big button. */ .woocommerce ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip, .woocommerce-page ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip { white-space:nowrap !important; } /* Mobile/tablet: same relationship, slightly tighter offsets. */ @media (max-width:921px) { .woocommerce ul.products li.product .wishflow-heart--loop, .woocommerce-page ul.products li.product .wishflow-heart--loop { top:.7em !important; right:3.35em !important; width:2.2em !important; height:2.2em !important; min-width:2.2em !important; min-height:2.2em !important; } .woocommerce ul.products li.product .ast-on-card-button.ast-select-options-trigger, .woocommerce-page ul.products li.product .ast-on-card-button.ast-select-options-trigger { top:.7em !important; right:.7em !important; } .woocommerce ul.products li.product .ast-select-options-trigger .ahfb-svg-iconset, .woocommerce-page ul.products li.product .ast-select-options-trigger .ahfb-svg-iconset { width:2.2em !important; height:2.2em !important; min-width:2.2em !important; min-height:2.2em !important; } .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-icon, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-icon { font-size:1.45em !important; } } /* ========================================================= WishFlow Pro Private v1.0.2 — Uniform Icons + Hover Reveal ========================================================= */ /* Product card is the hover/focus context. */ .woocommerce ul.products li.product, .woocommerce-page ul.products li.product { position:relative !important; } /* --------------------------------------------------------- 1) HEART GLYPH = SAME VISUAL SIZE AS BAG GLYPH --------------------------------------------------------- */ .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-icon, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-icon { font-size:1.18em !important; line-height:1 !important; font-weight:400 !important; width:1.18em !important; height:1.18em !important; display:flex !important; align-items:center !important; justify-content:center !important; } /* Keep filled state from becoming visually larger. */ .woocommerce ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-icon, .woocommerce-page ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-icon { font-size:1.18em !important; } /* Match Astra bag SVG dimensions. */ .woocommerce ul.products li.product .ast-select-options-trigger svg, .woocommerce-page ul.products li.product .ast-select-options-trigger svg { width:1.18em !important; height:1.18em !important; } /* --------------------------------------------------------- 2) BOTH CIRCLES SAME SIZE / SAME SHADOW / SAME POSITIONING --------------------------------------------------------- */ .woocommerce ul.products li.product .wishflow-heart--loop, .woocommerce-page ul.products li.product .wishflow-heart--loop, .woocommerce ul.products li.product .ast-select-options-trigger .ahfb-svg-iconset, .woocommerce-page ul.products li.product .ast-select-options-trigger .ahfb-svg-iconset { width:2.45em !important; height:2.45em !important; min-width:2.45em !important; min-height:2.45em !important; border-radius:50% !important; background:#fff !important; background-color:#fff !important; box-shadow:0 4px 10px rgba(0,0,0,.12) !important; } /* --------------------------------------------------------- 3) SAME LABEL / TOOLTIP STYLE WishFlow "Add to wishlist" and Astra "Select options" --------------------------------------------------------- */ /* WishFlow label becomes a hover tooltip. */ .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-label, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-label { position:absolute !important; top:50% !important; right:calc(100% + 8px) !important; transform:translateY(-50%) translateX(3px) !important; width:max-content !important; height:auto !important; margin:0 !important; padding:6px 9px !important; overflow:visible !important; clip:auto !important; border:0 !important; border-radius:3px !important; background:#111 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; box-shadow:0 4px 10px rgba(0,0,0,.13) !important; font-size:10px !important; font-weight:600 !important; line-height:1.2 !important; letter-spacing:.01em !important; text-transform:none !important; white-space:nowrap !important; opacity:0 !important; visibility:hidden !important; pointer-events:none !important; transition:opacity .12s ease, transform .12s ease !important; } /* Small arrow for WishFlow tooltip. */ .woocommerce ul.products li.product .wishflow-heart--loop::after, .woocommerce-page ul.products li.product .wishflow-heart--loop::after { content:''; position:absolute; top:50%; right:calc(100% + 3px); transform:translateY(-50%); border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:5px solid #111; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .12s ease; } /* WishFlow tooltip reveal. */ .woocommerce ul.products li.product .wishflow-heart--loop:hover .wishflow-heart-label, .woocommerce ul.products li.product .wishflow-heart--loop:focus-visible .wishflow-heart-label, .woocommerce-page ul.products li.product .wishflow-heart--loop:hover .wishflow-heart-label, .woocommerce-page ul.products li.product .wishflow-heart--loop:focus-visible .wishflow-heart-label { opacity:1 !important; visibility:visible !important; transform:translateY(-50%) translateX(0) !important; } .woocommerce ul.products li.product .wishflow-heart--loop:hover::after, .woocommerce ul.products li.product .wishflow-heart--loop:focus-visible::after, .woocommerce-page ul.products li.product .wishflow-heart--loop:hover::after, .woocommerce-page ul.products li.product .wishflow-heart--loop:focus-visible::after { opacity:1 !important; visibility:visible !important; } /* Make Astra's Select Options tooltip use the SAME style. */ .woocommerce ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip, .woocommerce-page ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip { padding:6px 9px !important; border-radius:3px !important; background:#111 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; box-shadow:0 4px 10px rgba(0,0,0,.13) !important; font-size:10px !important; font-weight:600 !important; line-height:1.2 !important; letter-spacing:.01em !important; text-transform:none !important; white-space:nowrap !important; } /* --------------------------------------------------------- 4) DESKTOP: ICONS ONLY POP OUT WHEN CARD/IMAGE IS HOVERED --------------------------------------------------------- */ @media (min-width:922px) { .woocommerce ul.products li.product .wishflow-heart--loop, .woocommerce-page ul.products li.product .wishflow-heart--loop, .woocommerce ul.products li.product .ast-on-card-button.ast-select-options-trigger, .woocommerce-page ul.products li.product .ast-on-card-button.ast-select-options-trigger { opacity:0 !important; visibility:hidden !important; transform:translateY(4px) !important; pointer-events:none !important; transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important; } /* Reveal both together on card hover or keyboard focus. */ .woocommerce ul.products li.product:hover .wishflow-heart--loop, .woocommerce-page ul.products li.product:hover .wishflow-heart--loop, .woocommerce ul.products li.product:focus-within .wishflow-heart--loop, .woocommerce-page ul.products li.product:focus-within .wishflow-heart--loop, .woocommerce ul.products li.product:hover .ast-on-card-button.ast-select-options-trigger, .woocommerce-page ul.products li.product:hover .ast-on-card-button.ast-select-options-trigger, .woocommerce ul.products li.product:focus-within .ast-on-card-button.ast-select-options-trigger, .woocommerce-page ul.products li.product:focus-within .ast-on-card-button.ast-select-options-trigger { opacity:1 !important; visibility:visible !important; transform:translateY(0) !important; pointer-events:auto !important; } /* Keep active wishlist heart available while card is hovered/focused. It still hides with the rest when the card isn't being interacted with. */ .woocommerce ul.products li.product .wishflow-heart--loop.is-active, .woocommerce-page ul.products li.product .wishflow-heart--loop.is-active { color:#111 !important; } } /* --------------------------------------------------------- 5) TOUCH DEVICES: ALWAYS VISIBLE --------------------------------------------------------- */ @media (max-width:921px) { .woocommerce ul.products li.product .wishflow-heart--loop, .woocommerce-page ul.products li.product .wishflow-heart--loop, .woocommerce ul.products li.product .ast-on-card-button.ast-select-options-trigger, .woocommerce-page ul.products li.product .ast-on-card-button.ast-select-options-trigger { opacity:1 !important; visibility:visible !important; transform:none !important; pointer-events:auto !important; } /* Don't show hover tooltips on touch layouts. */ .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-label, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-label, .woocommerce ul.products li.product .wishflow-heart--loop::after, .woocommerce-page ul.products li.product .wishflow-heart--loop::after { display:none !important; } } /* ========================================================= WishFlow Pro Private v1.0.3 — Unified Tooltips + All-Device Reveal ========================================================= */ /* --------------------------------------------------------- 1) SAME TOOLTIP STYLE FOR BOTH CONTROLS --------------------------------------------------------- */ /* WishFlow tooltip */ .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-label, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-label, /* Astra Select Options tooltip */ .woocommerce ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip, .woocommerce-page ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip { padding:6px 9px !important; border:0 !important; border-radius:3px !important; background:#111 !important; background-color:#111 !important; color:#fff !important; -webkit-text-fill-color:#fff !important; box-shadow:0 4px 10px rgba(0,0,0,.13) !important; font-size:10px !important; font-weight:600 !important; line-height:1.2 !important; letter-spacing:.01em !important; text-transform:none !important; white-space:nowrap !important; } /* Keep both tooltips positioned to the LEFT of their icons. */ .woocommerce ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip, .woocommerce-page ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip { top:50% !important; right:calc(100% + 8px) !important; left:auto !important; bottom:auto !important; transform:translateY(-50%) translateX(3px) !important; } /* Normalize tooltip arrows where Astra provides one. */ .woocommerce ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip::after, .woocommerce-page ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip::after { border-left-color:#111 !important; } /* --------------------------------------------------------- 2) BOTH CONTROLS HIDDEN UNTIL HOVER/FOCUS — ALL DEVICES --------------------------------------------------------- */ .woocommerce ul.products li.product .wishflow-heart--loop, .woocommerce-page ul.products li.product .wishflow-heart--loop, .woocommerce ul.products li.product .ast-on-card-button.ast-select-options-trigger, .woocommerce-page ul.products li.product .ast-on-card-button.ast-select-options-trigger { opacity:0 !important; visibility:hidden !important; transform:translateY(4px) !important; pointer-events:none !important; transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important; } /* Reveal both when product card is hovered or focus enters the card. */ .woocommerce ul.products li.product:hover .wishflow-heart--loop, .woocommerce-page ul.products li.product:hover .wishflow-heart--loop, .woocommerce ul.products li.product:focus-within .wishflow-heart--loop, .woocommerce-page ul.products li.product:focus-within .wishflow-heart--loop, .woocommerce ul.products li.product:hover .ast-on-card-button.ast-select-options-trigger, .woocommerce-page ul.products li.product:hover .ast-on-card-button.ast-select-options-trigger, .woocommerce ul.products li.product:focus-within .ast-on-card-button.ast-select-options-trigger, .woocommerce-page ul.products li.product:focus-within .ast-on-card-button.ast-select-options-trigger { opacity:1 !important; visibility:visible !important; transform:translateY(0) !important; pointer-events:auto !important; } /* --------------------------------------------------------- 3) TOOLTIP REVEAL BEHAVIOR ALSO MATCHES --------------------------------------------------------- */ .woocommerce ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip, .woocommerce-page ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip { opacity:0 !important; visibility:hidden !important; transition:opacity .12s ease, transform .12s ease !important; } .woocommerce ul.products li.product .ast-select-options-trigger:hover .ast-card-action-tooltip, .woocommerce ul.products li.product .ast-select-options-trigger:focus .ast-card-action-tooltip, .woocommerce ul.products li.product .ast-select-options-trigger:focus-visible .ast-card-action-tooltip, .woocommerce-page ul.products li.product .ast-select-options-trigger:hover .ast-card-action-tooltip, .woocommerce-page ul.products li.product .ast-select-options-trigger:focus .ast-card-action-tooltip, .woocommerce-page ul.products li.product .ast-select-options-trigger:focus-visible .ast-card-action-tooltip { opacity:1 !important; visibility:visible !important; transform:translateY(-50%) translateX(0) !important; } /* --------------------------------------------------------- 4) TOUCH / SMALL SCREENS Keep the same reveal rule. Tapping/focusing the card/control reveals it. --------------------------------------------------------- */ @media (max-width:921px) { .woocommerce ul.products li.product .wishflow-heart--loop, .woocommerce-page ul.products li.product .wishflow-heart--loop, .woocommerce ul.products li.product .ast-on-card-button.ast-select-options-trigger, .woocommerce-page ul.products li.product .ast-on-card-button.ast-select-options-trigger { opacity:0 !important; visibility:hidden !important; transform:translateY(4px) !important; pointer-events:none !important; } .woocommerce ul.products li.product:hover .wishflow-heart--loop, .woocommerce-page ul.products li.product:hover .wishflow-heart--loop, .woocommerce ul.products li.product:focus-within .wishflow-heart--loop, .woocommerce-page ul.products li.product:focus-within .wishflow-heart--loop, .woocommerce ul.products li.product:hover .ast-on-card-button.ast-select-options-trigger, .woocommerce-page ul.products li.product:hover .ast-on-card-button.ast-select-options-trigger, .woocommerce ul.products li.product:focus-within .ast-on-card-button.ast-select-options-trigger, .woocommerce-page ul.products li.product:focus-within .ast-on-card-button.ast-select-options-trigger { opacity:1 !important; visibility:visible !important; transform:translateY(0) !important; pointer-events:auto !important; } /* Re-enable WishFlow tooltip on smaller screens for focused controls. */ .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-label, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-label, .woocommerce ul.products li.product .wishflow-heart--loop::after, .woocommerce-page ul.products li.product .wishflow-heart--loop::after { display:block !important; } } /* WishFlow Pro v1.0.4 — Bigger heart + bottom-only tooltips */ .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-icon, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-icon, .woocommerce ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-icon, .woocommerce-page ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-icon{ font-size:1.42em!important;width:1.42em!important;height:1.42em!important;line-height:1!important;font-weight:400!important; display:flex!important;align-items:center!important;justify-content:center!important; } .woocommerce ul.products li.product .ast-select-options-trigger svg, .woocommerce-page ul.products li.product .ast-select-options-trigger svg{ width:1.35em!important;height:1.35em!important; } /* Add to wishlist — bottom only */ .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-label, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-label{ position:absolute!important;top:calc(100% + 8px)!important;bottom:auto!important;left:50%!important;right:auto!important; transform:translateX(-50%) translateY(-3px)!important;width:max-content!important;height:auto!important;margin:0!important;padding:6px 9px!important; overflow:visible!important;clip:auto!important;border:0!important;border-radius:3px!important;background:#111!important;color:#fff!important; -webkit-text-fill-color:#fff!important;box-shadow:0 4px 10px rgba(0,0,0,.13)!important;font-size:10px!important;font-weight:600!important; line-height:1.2!important;letter-spacing:.01em!important;text-transform:none!important;white-space:nowrap!important;opacity:0!important; visibility:hidden!important;pointer-events:none!important;transition:opacity .12s ease,transform .12s ease!important; } .woocommerce ul.products li.product .wishflow-heart--loop::after, .woocommerce-page ul.products li.product .wishflow-heart--loop::after{ content:''!important;position:absolute!important;top:calc(100% + 3px)!important;bottom:auto!important;left:50%!important;right:auto!important; transform:translateX(-50%)!important;border-left:5px solid transparent!important;border-right:5px solid transparent!important; border-bottom:5px solid #111!important;border-top:0!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important; } /* Select options — same bottom tooltip */ .woocommerce ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip, .woocommerce-page ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip{ position:absolute!important;top:calc(100% + 8px)!important;bottom:auto!important;left:50%!important;right:auto!important; transform:translateX(-50%) translateY(-3px)!important;padding:6px 9px!important;border:0!important;border-radius:3px!important; background:#111!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 4px 10px rgba(0,0,0,.13)!important; font-size:10px!important;font-weight:600!important;line-height:1.2!important;letter-spacing:.01em!important;text-transform:none!important; white-space:nowrap!important;opacity:0!important;visibility:hidden!important;transition:opacity .12s ease,transform .12s ease!important; } .woocommerce ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip::after, .woocommerce-page ul.products li.product .ast-select-options-trigger .ast-card-action-tooltip::after{ top:-5px!important;bottom:auto!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important; border-left:5px solid transparent!important;border-right:5px solid transparent!important;border-bottom:5px solid #111!important;border-top:0!important; } .woocommerce ul.products li.product .wishflow-heart--loop:hover .wishflow-heart-label, .woocommerce ul.products li.product .wishflow-heart--loop:focus-visible .wishflow-heart-label, .woocommerce-page ul.products li.product .wishflow-heart--loop:hover .wishflow-heart-label, .woocommerce-page ul.products li.product .wishflow-heart--loop:focus-visible .wishflow-heart-label, .woocommerce ul.products li.product .ast-select-options-trigger:hover .ast-card-action-tooltip, .woocommerce ul.products li.product .ast-select-options-trigger:focus .ast-card-action-tooltip, .woocommerce-page ul.products li.product .ast-select-options-trigger:hover .ast-card-action-tooltip, .woocommerce-page ul.products li.product .ast-select-options-trigger:focus .ast-card-action-tooltip{ opacity:1!important;visibility:visible!important;transform:translateX(-50%) translateY(0)!important; } .woocommerce ul.products li.product .wishflow-heart--loop:hover::after, .woocommerce ul.products li.product .wishflow-heart--loop:focus-visible::after, .woocommerce-page ul.products li.product .wishflow-heart--loop:hover::after, .woocommerce-page ul.products li.product .wishflow-heart--loop:focus-visible::after{ opacity:1!important;visibility:visible!important; } /* ========================================================= WishFlow Pro Private v1.0.5 3× larger wishlist heart glyph ========================================================= */ /* * v1.0.4 used a 1.42em heart glyph. * This release makes the glyph exactly 3× that size = 4.26em. * The white circular wishlist button itself remains aligned with * the Select Options button; overflow is allowed so the enlarged * heart is not clipped. */ .woocommerce ul.products li.product .wishflow-heart--loop, .woocommerce-page ul.products li.product .wishflow-heart--loop { overflow:visible !important; } .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-icon, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-icon, .woocommerce ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-icon, .woocommerce-page ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-icon { font-size:4.26em !important; width:1em !important; height:1em !important; min-width:1em !important; min-height:1em !important; line-height:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; transform:none !important; transform-origin:center center !important; } /* Keep the existing bottom-only tooltip above the enlarged glyph. */ .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-label, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-label { z-index:30 !important; } /* ========================================================= WishFlow Pro Private v1.0.6 Heart adjusted from 3× to 2× the v1.0.4 size ========================================================= */ .woocommerce ul.products li.product .wishflow-heart--loop, .woocommerce-page ul.products li.product .wishflow-heart--loop { overflow:visible !important; } .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-icon, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-icon, .woocommerce ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-icon, .woocommerce-page ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-icon { font-size:2.84em !important; width:1em !important; height:1em !important; min-width:1em !important; min-height:1em !important; line-height:1 !important; display:flex !important; align-items:center !important; justify-content:center !important; transform:none !important; transform-origin:center center !important; } /* Preserve bottom-only tooltip. */ .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-label, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-label { z-index:30 !important; } /* ========================================================= WishFlow Pro Private v1.0.7 Precise heart centering inside circular button ========================================================= */ .woocommerce ul.products li.product .wishflow-heart--loop, .woocommerce-page ul.products li.product .wishflow-heart--loop { display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; padding:0 !important; line-height:1 !important; } /* Remove font-box sizing that could visually push the glyph off-center. */ .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-icon, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-icon, .woocommerce ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-icon, .woocommerce-page ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-icon { position:absolute !important; top:50% !important; left:50% !important; right:auto !important; bottom:auto !important; width:auto !important; height:auto !important; min-width:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; display:block !important; line-height:1 !important; text-align:center !important; /* Preserve v1.0.6's requested 2× heart size. */ font-size:2.84em !important; /* Optical centering for the Unicode heart inside its font box. */ transform:translate(-50%, -51%) !important; transform-origin:center center !important; } /* ========================================================= WishFlow Pro Private v1.0.8 True SVG heart centering ========================================================= */ /* The button itself is the exact centering box. */ .woocommerce ul.products li.product .wishflow-heart--loop, .woocommerce-page ul.products li.product .wishflow-heart--loop { position:absolute !important; display:flex !important; align-items:center !important; justify-content:center !important; padding:0 !important; text-align:center !important; line-height:0 !important; overflow:visible !important; } /* Reset all previous font/unicode positioning overrides. */ .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-icon, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-icon, .woocommerce ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-icon, .woocommerce-page ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-icon { position:static !important; inset:auto !important; width:100% !important; height:100% !important; min-width:0 !important; min-height:0 !important; margin:0 !important; padding:0 !important; transform:none !important; display:flex !important; align-items:center !important; justify-content:center !important; line-height:0 !important; font-size:0 !important; } /* SVG has a symmetric viewBox, so this is genuinely centered. */ .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-svg, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-svg { display:block !important; width:66% !important; height:66% !important; margin:0 !important; padding:0 !important; overflow:visible !important; fill:none !important; stroke:#111 !important; stroke-width:1.8 !important; stroke-linecap:round !important; stroke-linejoin:round !important; vector-effect:non-scaling-stroke; } /* Selected state fills the same perfectly centered shape. */ .woocommerce ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-svg, .woocommerce-page ul.products li.product .wishflow-heart--loop.is-active .wishflow-heart-svg { fill:#111 !important; stroke:#111 !important; } /* Preserve bottom tooltip above SVG. */ .woocommerce ul.products li.product .wishflow-heart--loop .wishflow-heart-label, .woocommerce-page ul.products li.product .wishflow-heart--loop .wishflow-heart-label { z-index:30 !important; } /* ========================================================= WishFlow Pro Private v1.0.9 Heart hover lift matching Select Options bag ========================================================= */ .woocommerce ul.products li.product .wishflow-heart--loop, .woocommerce-page ul.products li.product .wishflow-heart--loop { transition: transform .15s ease, box-shadow .15s ease, opacity .18s ease, visibility .18s ease !important; } /* Same small upward movement used by the bag control. */ .woocommerce ul.products li.product .wishflow-heart--loop:hover, .woocommerce ul.products li.product .wishflow-heart--loop:focus-visible, .woocommerce-page ul.products li.product .wishflow-heart--loop:hover, .woocommerce-page ul.products li.product .wishflow-heart--loop:focus-visible { transform:translateY(-1px) !important; box-shadow:0 5px 13px rgba(0,0,0,.17) !important; } /* Preserve the reveal transition when the whole product card is hovered. */ .woocommerce ul.products li.product:hover .wishflow-heart--loop, .woocommerce-page ul.products li.product:hover .wishflow-heart--loop, .woocommerce ul.products li.product:focus-within .wishflow-heart--loop, .woocommerce-page ul.products li.product:focus-within .wishflow-heart--loop { opacity:1 !important; visibility:visible !important; pointer-events:auto !important; } /* When the heart itself is hovered/focused, lift it after reveal. */ .woocommerce ul.products li.product:hover .wishflow-heart--loop:hover, .woocommerce-page ul.products li.product:hover .wishflow-heart--loop:hover, .woocommerce ul.products li.product:focus-within .wishflow-heart--loop:focus-visible, .woocommerce-page ul.products li.product:focus-within .wishflow-heart--loop:focus-visible { transform:translateY(-1px) !important; } /* ========================================================= WishFlow Pro v1.1.0 — Premium Wishlist Page ========================================================= */ .wishflow-page--pro { max-width:1180px; margin:0 auto; padding:36px 20px 72px; } .wishflow-page--pro .wishflow-page-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding-bottom:22px; border-bottom:1px solid #ececec; } .wishflow-page--pro .wishflow-page-subtitle { margin:8px 0 0; max-width:560px; color:#777; font-size:13px; line-height:1.6; } .wishflow-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:20px 0; } .wishflow-summary-card { padding:15px 16px; border:1px solid #ececec; background:#fff; display:flex; align-items:baseline; gap:8px; } .wishflow-summary-card strong { font-size:22px; font-weight:650; } .wishflow-summary-card span { color:#888; font-size:10px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .wishflow-pro-toolbar { display:grid; grid-template-columns:1fr auto; align-items:end; gap:20px; padding:18px 0; } .wishflow-page--pro .wishflow-list-toolbar { display:flex; justify-content:flex-start; align-items:end; gap:10px; padding:0; } .wishflow-view-tools { display:flex; gap:8px; align-items:center; } .wishflow-search, .wishflow-sort { min-height:40px; border:1px solid #ddd; background:#fff; color:#111; padding:9px 11px; font-size:12px; } .wishflow-search { min-width:230px; } .wishflow-sort { min-width:175px; } .wishflow-active-list-meta { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; } .wishflow-active-list-name { font-size:12px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; } .wishflow-active-list-count { color:#999; font-size:11px; } .wishflow-page--pro .wishflow-items { border-top:0; } .wishflow-page--pro .wishflow-item { display:grid; grid-template-columns:170px minmax(0,1fr); gap:24px; padding:24px 0; border-bottom:1px solid #ececec; } .wishflow-page--pro .wishflow-item-image { position:relative; overflow:hidden; background:#f7f7f7; } .wishflow-page--pro .wishflow-item-image img { width:100%; aspect-ratio:4/5; object-fit:cover; display:block; transition:transform .25s ease; } .wishflow-page--pro .wishflow-item-image:hover img { transform:scale(1.015); } .wishflow-item-main { min-width:0; } .wishflow-item-title-group { min-width:0; } .wishflow-page--pro .wishflow-item-name { display:inline-block; color:#111; text-decoration:none; font-size:18px; font-weight:600; line-height:1.35; } .wishflow-page--pro .wishflow-item-price { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:7px; color:#444; } .wishflow-badge { display:inline-flex; align-items:center; padding:4px 7px; border-radius:999px; font-size:9px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; } .wishflow-badge--drop { background:#f0f7f2; color:#356645; } .wishflow-badge--changed { background:#f7f4ec; color:#7b6433; } .wishflow-page--pro .wishflow-stock { display:inline-flex; align-items:center; gap:6px; margin:12px 0 0; font-size:11px; font-weight:650; } .wishflow-page--pro .wishflow-stock i { width:6px; height:6px; border-radius:50%; background:currentColor; } .wishflow-page--pro .wishflow-stock.is-in-stock { color:#4c7658; } .wishflow-page--pro .wishflow-stock.is-out-stock { color:#999; } .wishflow-page--pro .wishflow-pro-fields { display:grid; grid-template-columns:140px minmax(0,1fr) auto; gap:10px; align-items:end; margin:18px 0 0; } .wishflow-page--pro .wishflow-pro-fields label { display:grid; gap:5px; } .wishflow-page--pro .wishflow-pro-fields label > span { color:#999; font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; } .wishflow-page--pro .wishflow-priority, .wishflow-page--pro .wishflow-note { width:100%; border:1px solid #ddd; background:#fff; color:#111; padding:9px 10px; font-size:12px; box-sizing:border-box; } .wishflow-page--pro .wishflow-note { min-height:40px; resize:vertical; } .wishflow-page--pro .wishflow-item-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; } .wishflow-page--pro .wishflow-primary-action, .wishflow-page--pro .wishflow-secondary-action { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:9px 15px; text-decoration:none; font-size:10px; font-weight:750; letter-spacing:.07em; text-transform:uppercase; box-sizing:border-box; } .wishflow-page--pro .wishflow-primary-action { border:1px solid #111; background:#111; color:#fff; } .wishflow-page--pro .wishflow-secondary-action { border:1px solid #ddd; background:#fff; color:#111; } .wishflow-page--pro .wishflow-remove { width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; padding:0 !important; border:1px solid #e5e5e5 !important; border-radius:50% !important; background:#fff !important; color:#777 !important; font-size:18px !important; line-height:1 !important; } .wishflow-page--pro .wishflow-remove:hover, .wishflow-page--pro .wishflow-remove:focus-visible { border-color:#bbb !important; color:#111 !important; } .wishflow-empty--search { padding:48px 20px; } @media (max-width:850px) { .wishflow-pro-toolbar { grid-template-columns:1fr; } .wishflow-view-tools { width:100%; } .wishflow-search-wrap, .wishflow-sort-wrap { flex:1; } .wishflow-search, .wishflow-sort { width:100%; min-width:0; } .wishflow-page--pro .wishflow-pro-fields { grid-template-columns:1fr; } } @media (max-width:620px) { .wishflow-page--pro { padding:24px 14px 56px; } .wishflow-page--pro .wishflow-page-head { align-items:flex-start; flex-direction:column; } .wishflow-summary { grid-template-columns:1fr; } .wishflow-view-tools { flex-direction:column; align-items:stretch; } .wishflow-page--pro .wishflow-item { grid-template-columns:105px minmax(0,1fr); gap:14px; } .wishflow-page--pro .wishflow-item-name { font-size:15px; } .wishflow-page--pro .wishflow-item-actions { flex-direction:column; } .wishflow-page--pro .wishflow-primary-action, .wishflow-page--pro .wishflow-secondary-action { width:100%; } } /* ========================================================= WishFlow Ultimate v2.0 — Commercial-grade management UI ========================================================= */ .wishflow-list-manager { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:7px; } .wishflow-list-manager button, .wishflow-privacy-control { min-height:30px; border:1px solid #e2e2e2; background:#fff; color:#555; padding:6px 9px; font-size:9px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .wishflow-privacy-control { display:inline-flex; align-items:center; gap:6px; } .wishflow-move-tools { display:flex; align-items:center; gap:6px; margin-left:auto; } .wishflow-move-target { min-height:40px; border:1px solid #ddd; background:#fff; padding:8px 9px; font-size:11px; } .wishflow-move-tools button { min-height:40px; border:1px solid #ddd !important; background:#fff !important; color:#111 !important; padding:8px 10px !important; font-size:9px !important; font-weight:700 !important; letter-spacing:.05em !important; text-transform:uppercase !important; } .wishflow-item { position:relative; } .wishflow-drag-handle { position:absolute; top:50%; right:-2px; transform:translateY(-50%); width:28px; height:42px; border:0 !important; background:transparent !important; color:#bbb !important; font-size:16px !important; cursor:grab !important; letter-spacing:-3px; } .wishflow-item.is-dragging { opacity:.45; } .wishflow-add-all { background:#111 !important; border-color:#111 !important; color:#fff !important; } @media (max-width:850px) { .wishflow-list-manager { width:100%; justify-content:flex-start; } .wishflow-move-tools { width:100%; margin-left:0; flex-wrap:wrap; } .wishflow-move-target { flex:1; min-width:150px; } .wishflow-drag-handle { display:none; } } /* WishFlow Ultimate v2.1 editable table */ .wishflow-table-scroll{width:100%;overflow-x:auto;border-top:1px solid #e9e9e9} .wishflow-table{width:100%;border-collapse:collapse;background:#fff} .wishflow-table th{padding:11px 9px;border-bottom:1px solid #ddd;text-align:left;color:#888;font-size:9px;letter-spacing:.08em;text-transform:uppercase} .wishflow-table td{padding:14px 9px;border-bottom:1px solid #ececec;vertical-align:middle} .wishflow-table-product{display:flex;align-items:center;gap:11px;min-width:210px} .wishflow-table-image{display:block;flex:0 0 84px;width:84px;background:#f7f7f7;overflow:hidden} .wishflow-table-image img{display:block;width:84px;height:105px;object-fit:cover} .wishflow-table .wishflow-item-name{font-size:13px;font-weight:650;color:#111;text-decoration:none} .wishflow-table .wishflow-stock{display:block;margin-top:5px;font-size:10px} .wishflow-col-price{white-space:nowrap;min-width:105px} .wishflow-inline-options{display:flex;align-items:flex-end;gap:7px;flex-wrap:wrap;min-width:250px} .wishflow-variant-field,.wishflow-qty-field{display:grid;gap:4px} .wishflow-variant-field>span,.wishflow-qty-field>span{font-size:8px;font-weight:700;color:#999;text-transform:uppercase} .wishflow-variant-select,.wishflow-qty{height:35px;border:1px solid #ddd;background:#fff;padding:6px 7px;font-size:11px;box-sizing:border-box}.wishflow-qty{width:55px;text-align:center} .wishflow-col-action{white-space:nowrap} .wishflow-table-cart{min-height:37px;padding:8px 11px!important;border:1px solid #111!important;background:#111!important;color:#fff!important;font-size:9px!important;font-weight:700!important;text-transform:uppercase!important} .wishflow-table-cart:disabled{opacity:.45}.wishflow-table .wishflow-remove{position:static!important;margin-left:5px!important}.wishflow-table .wishflow-drag-handle{display:none!important} @media(max-width:720px){.wishflow-table thead{display:none}.wishflow-table,.wishflow-table tbody,.wishflow-table tr,.wishflow-table td{display:block;width:100%;box-sizing:border-box}.wishflow-table tr{padding:13px 0;border-bottom:1px solid #e9e9e9}.wishflow-table td{padding:5px 0;border:0}.wishflow-table-image{flex-basis:70px;width:70px}.wishflow-table-image img{width:70px;height:88px}.wishflow-inline-options{min-width:0}.wishflow-variant-field{flex:1;min-width:100px}.wishflow-col-action{display:flex!important;align-items:center}.wishflow-table-cart{flex:1}} /* ========================================================= WishFlow Ultimate v2.2.0 — Final Full-Width Wishlist Table ========================================================= */ /* Let the wishlist itself use the available content width. */ .wishflow-page--pro { width:100% !important; max-width:1280px !important; box-sizing:border-box !important; } .wishflow-page--pro .wishflow-items { width:100% !important; max-width:none !important; box-sizing:border-box !important; } /* Premium table container */ .wishflow-table-shell { width:100%; margin-top:14px; border:1px solid #e7e7e7; background:#fff; box-sizing:border-box; } .wishflow-table-scroll { width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .wishflow-table { width:100% !important; min-width:880px; border-collapse:collapse; table-layout:fixed !important; background:#fff; } .wishflow-table col.wishflow-width-product { width:30%; } .wishflow-table col.wishflow-width-price { width:13%; } .wishflow-table col.wishflow-width-options { width:27%; } .wishflow-table col.wishflow-width-quantity { width:12%; } .wishflow-table col.wishflow-width-action { width:18%; } .wishflow-table thead th { height:42px; padding:0 16px !important; border-bottom:1px solid #dfdfdf !important; background:#fafafa; color:#7f7f7f; text-align:left; vertical-align:middle; font-size:9px !important; font-weight:750 !important; line-height:1 !important; letter-spacing:.09em !important; text-transform:uppercase; box-sizing:border-box; } .wishflow-table tbody tr { background:#fff; } .wishflow-table tbody tr:hover { background:#fcfcfc; } .wishflow-table td { padding:16px !important; border:0 !important; border-bottom:1px solid #ededed !important; vertical-align:middle !important; box-sizing:border-box; } .wishflow-table tbody tr:last-child td { border-bottom:0 !important; } /* Product cell */ .wishflow-table-product { display:flex !important; align-items:center !important; gap:13px !important; min-width:0 !important; } .wishflow-table-image { display:block !important; flex:0 0 72px !important; width:72px !important; height:90px !important; overflow:hidden; background:#f5f5f5; } .wishflow-table-image img { display:block !important; width:72px !important; height:90px !important; object-fit:cover !important; margin:0 !important; } .wishflow-product-copy { min-width:0; } .wishflow-table .wishflow-item-name { display:block; margin:0; color:#111; text-decoration:none; font-size:13px !important; font-weight:650 !important; line-height:1.35 !important; } .wishflow-table .wishflow-stock { display:inline-flex !important; align-items:center; gap:5px; margin:6px 0 0 !important; font-size:9px !important; line-height:1 !important; } .wishflow-table .wishflow-stock i { width:5px; height:5px; border-radius:50%; background:currentColor; } .wishflow-view-link { display:block; width:max-content; margin-top:8px; color:#888; text-decoration:underline; text-underline-offset:2px; font-size:9px; font-weight:600; } /* Price */ .wishflow-col-price { white-space:normal !important; } .wishflow-table .wishflow-item-price { margin:0 !important; color:#333; font-size:12px !important; font-weight:600; line-height:1.35; } .wishflow-table .wishflow-badge { margin-top:7px; } /* Size / Color */ .wishflow-inline-options { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px !important; min-width:0 !important; width:100%; } .wishflow-variant-field { display:grid; gap:5px; min-width:0; } .wishflow-variant-field > span { color:#999; font-size:8px !important; font-weight:700; line-height:1; letter-spacing:.07em; text-transform:uppercase; } .wishflow-no-variants { color:#aaa; font-size:12px; } /* Quantity gets its own clean column. */ .wishflow-qty-field { width:96px; height:36px; display:grid !important; grid-template-columns:28px 40px 28px; align-items:center; gap:0 !important; border:1px solid #dcdcdc; background:#fff; box-sizing:border-box; } .wishflow-qty-minus, .wishflow-qty-plus { width:28px !important; height:34px !important; min-width:0 !important; min-height:0 !important; padding:0 !important; margin:0 !important; border:0 !important; background:transparent !important; color:#555 !important; font-size:15px !important; font-weight:400 !important; line-height:34px !important; cursor:pointer; } .wishflow-qty-minus:hover, .wishflow-qty-plus:hover { color:#111 !important; background:#f7f7f7 !important; } .wishflow-qty { width:40px !important; height:34px !important; min-width:0 !important; padding:0 !important; border:0 !important; border-left:1px solid #eee !important; border-right:1px solid #eee !important; background:#fff !important; color:#111 !important; text-align:center; font-size:11px !important; box-sizing:border-box; -moz-appearance:textfield; } .wishflow-qty::-webkit-inner-spin-button, .wishflow-qty::-webkit-outer-spin-button { margin:0; -webkit-appearance:none; } /* Action */ .wishflow-col-action { white-space:normal !important; } .wishflow-table .wishflow-table-cart { width:auto !important; min-width:104px; min-height:38px !important; margin:0 !important; padding:0 13px !important; border:1px solid #111 !important; border-radius:0 !important; background:#111 !important; color:#fff !important; font-size:9px !important; font-weight:750 !important; line-height:36px !important; letter-spacing:.06em !important; text-transform:uppercase !important; vertical-align:middle; } .wishflow-table .wishflow-table-cart:hover:not(:disabled), .wishflow-table .wishflow-table-cart:focus-visible:not(:disabled) { background:#333 !important; } .wishflow-table .wishflow-table-cart:disabled { border-color:#ddd !important; background:#eee !important; color:#999 !important; } .wishflow-table .wishflow-remove { position:static !important; width:34px !important; height:38px !important; min-width:34px !important; margin:0 0 0 6px !important; padding:0 !important; border:1px solid #ddd !important; border-radius:0 !important; background:#fff !important; color:#777 !important; font-size:17px !important; line-height:36px !important; vertical-align:middle; } .wishflow-table .wishflow-remove:hover, .wishflow-table .wishflow-remove:focus-visible { border-color:#aaa !important; color:#111 !important; } /* Disable old row/card constraints from earlier WishFlow versions. */ .wishflow-page--pro .wishflow-item.wishflow-table-row { display:table-row !important; grid-template-columns:none !important; gap:0 !important; padding:0 !important; } .wishflow-table .wishflow-drag-handle, .wishflow-table .wishflow-pro-fields, .wishflow-table .wishflow-item-actions, .wishflow-table .wishflow-move-tools { display:none !important; } /* Medium desktop */ @media (max-width:1050px) and (min-width:721px) { .wishflow-table { min-width:820px; } .wishflow-table col.wishflow-width-product { width:28%; } .wishflow-table col.wishflow-width-price { width:13%; } .wishflow-table col.wishflow-width-options { width:29%; } .wishflow-table col.wishflow-width-quantity { width:12%; } .wishflow-table col.wishflow-width-action { width:18%; } .wishflow-table-image { flex-basis:62px !important; width:62px !important; height:78px !important; } .wishflow-table-image img { width:62px !important; height:78px !important; } } /* Mobile: table becomes clean stacked cards, not squeezed columns. */ @media (max-width:720px) { .wishflow-table-shell { border:0; background:transparent; } .wishflow-table-scroll { overflow:visible; } .wishflow-table { min-width:0 !important; display:block !important; background:transparent; } .wishflow-table colgroup, .wishflow-table thead { display:none !important; } .wishflow-table tbody { display:grid !important; gap:12px; } .wishflow-table tbody tr.wishflow-item { display:grid !important; grid-template-columns:1fr 1fr !important; gap:12px 10px !important; padding:14px !important; border:1px solid #e8e8e8 !important; background:#fff !important; } .wishflow-table td { display:block !important; width:auto !important; padding:0 !important; border:0 !important; } .wishflow-col-product { grid-column:1 / -1; } .wishflow-table-product { align-items:flex-start !important; } .wishflow-table-image { flex-basis:64px !important; width:64px !important; height:80px !important; } .wishflow-table-image img { width:64px !important; height:80px !important; } .wishflow-col-price, .wishflow-col-quantity { align-self:end; } .wishflow-col-options { grid-column:1 / -1; } .wishflow-inline-options { grid-template-columns:repeat(2,minmax(0,1fr)); } .wishflow-col-action { grid-column:1 / -1; display:flex !important; align-items:center; } .wishflow-table .wishflow-table-cart { flex:1; width:100% !important; } .wishflow-table .wishflow-remove { flex:0 0 38px; height:38px !important; } } /* Very small phones */ @media (max-width:420px) { .wishflow-inline-options { grid-template-columns:1fr; } .wishflow-table tbody tr.wishflow-item { grid-template-columns:1fr; } .wishflow-col-product, .wishflow-col-options, .wishflow-col-action { grid-column:1; } } /* ========================================================= WishFlow Ultimate v2.2.1 — Cart success feedback ========================================================= */ .wishflow-table-row { transition: opacity .22s ease, transform .22s ease, height .22s ease, padding .22s ease; } .wishflow-table-row.is-adding-to-cart { opacity:.65; } .wishflow-table-row.is-added-to-cart { background:#fafdfb !important; } .wishflow-table-row.is-removing { opacity:0; transform:translateX(10px); } @media (prefers-reduced-motion: reduce) { .wishflow-table-row { transition:none; } } /* ========================================================= WishFlow Ultimate v2.2.5 — Header cleanup + New List fix ========================================================= */ /* Lower duplicate list title removed; keep the count only. */ .wishflow-active-list-meta--count-only { justify-content:flex-end !important; min-height:34px; } .wishflow-active-list-meta--count-only .wishflow-active-list-count { margin-left:auto; } /* Clear disabled/loading state for New List. */ .wishflow-create-list:disabled { opacity:.55; cursor:wait; } /* ========================================================= WishFlow Ultimate v2.2.6 — Simplified wishlist toolbar ========================================================= */ /* Remove the wishlist selector and + New List controls. */ .wishflow-list-controls, .wishflow-toolbar-left, .wishflow-list-selector, .wishflow-create-list { display:none !important; } /* Keep the useful controls together and level. */ .wishflow-toolbar, .wishflow-page-toolbar, .wishflow-controls { display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:12px !important; width:100% !important; min-height:46px; } .wishflow-toolbar-right, .wishflow-search-sort { display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:12px !important; margin-left:auto !important; } .wishflow-search, .wishflow-search input, .wishflow-sort, .wishflow-sort select { margin-top:0 !important; margin-bottom:0 !important; } /* Search and sort visually share the same height/baseline. */ .wishflow-search input, .wishflow-sort select, .wishflow-search-input, .wishflow-sort-select { height:44px !important; box-sizing:border-box !important; vertical-align:middle !important; } /* Remove excess vertical space left by the old list controls. */ .wishflow-toolbar, .wishflow-page-toolbar { padding-top:0 !important; padding-bottom:18px !important; } @media(max-width:720px){ .wishflow-toolbar, .wishflow-page-toolbar, .wishflow-controls, .wishflow-toolbar-right, .wishflow-search-sort { align-items:stretch !important; } .wishflow-toolbar-right, .wishflow-search-sort { width:100% !important; } .wishflow-search, .wishflow-search input, .wishflow-search-input { flex:1 1 auto !important; width:100% !important; } } /* ========================================================= WishFlow Ultimate v2.2.7 — Premium Layout Polish Functional behavior unchanged. ========================================================= */ /* Overall page rhythm */ .wishflow-page--pro { max-width:1240px !important; padding-top:26px !important; padding-bottom:54px !important; } /* Header becomes tighter and more intentional */ .wishflow-page--pro .wishflow-page-head { align-items:flex-start !important; padding-bottom:16px !important; margin-bottom:0 !important; } .wishflow-page--pro .wishflow-eyebrow { margin-bottom:8px !important; font-size:9px !important; letter-spacing:.14em !important; } .wishflow-page--pro h1 { margin:0 !important; font-size:30px !important; line-height:1.1 !important; } .wishflow-page--pro .wishflow-page-subtitle { margin-top:7px !important; font-size:12px !important; color:#777 !important; } /* Header actions line up with content instead of floating far away */ .wishflow-page--pro .wishflow-page-actions { align-self:flex-end !important; margin:0 0 2px 0 !important; gap:8px !important; } .wishflow-page--pro .wishflow-page-actions button { min-height:34px !important; padding:0 12px !important; border:1px solid #ddd !important; background:#fff !important; color:#222 !important; font-size:9px !important; font-weight:700 !important; letter-spacing:.06em !important; } /* Stats become smaller, more premium summary boxes */ .wishflow-summary { gap:8px !important; margin:16px 0 18px !important; } .wishflow-summary-card { min-height:58px !important; padding:12px 14px !important; border-color:#e8e8e8 !important; background:#fff !important; } .wishflow-summary-card strong { font-size:19px !important; line-height:1 !important; } .wishflow-summary-card span { font-size:8px !important; letter-spacing:.09em !important; } /* Remove the huge blank section between summary and controls */ .wishflow-pro-toolbar { display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:10px !important; padding:0 !important; margin:0 0 12px !important; min-height:44px !important; } .wishflow-page--pro .wishflow-list-toolbar { display:none !important; } .wishflow-view-tools { display:flex !important; align-items:center !important; justify-content:flex-end !important; gap:8px !important; width:auto !important; margin:0 !important; } .wishflow-search-wrap, .wishflow-sort-wrap { margin:0 !important; } .wishflow-search, .wishflow-sort { height:40px !important; min-height:40px !important; margin:0 !important; border:1px solid #dedede !important; background:#fff !important; box-sizing:border-box !important; font-size:11px !important; } .wishflow-search { width:230px !important; min-width:230px !important; padding:0 12px !important; } .wishflow-sort { width:155px !important; min-width:155px !important; padding:0 28px 0 10px !important; } /* Count line becomes subtle and close to table */ .wishflow-active-list-meta--count-only { min-height:28px !important; padding:0 0 8px !important; margin:0 !important; border-top:0 !important; border-bottom:0 !important; } .wishflow-active-list-count { color:#999 !important; font-size:9px !important; letter-spacing:.04em; } /* Table directly follows controls */ .wishflow-table-shell { margin-top:0 !important; border:1px solid #e4e4e4 !important; } .wishflow-table thead th { height:38px !important; padding:0 14px !important; background:#fafafa !important; border-bottom:1px solid #e2e2e2 !important; color:#8b8b8b !important; font-size:8px !important; letter-spacing:.1em !important; } .wishflow-table td { padding:13px 14px !important; } /* Product image becomes slightly smaller and cleaner */ .wishflow-table-image { flex-basis:62px !important; width:62px !important; height:78px !important; border:1px solid #f0f0f0; } .wishflow-table-image img { width:62px !important; height:78px !important; } .wishflow-table-product { gap:11px !important; } .wishflow-table .wishflow-item-name { font-size:12px !important; line-height:1.3 !important; } .wishflow-view-link { margin-top:6px !important; font-size:8px !important; } /* Price is visually quieter */ .wishflow-table .wishflow-item-price { font-size:11px !important; font-weight:600 !important; } /* Option controls are compact and equal */ .wishflow-inline-options { gap:6px !important; } /* Quantity proportions */ .wishflow-qty-field { width:90px !important; height:34px !important; grid-template-columns:26px 38px 26px !important; } .wishflow-qty-minus, .wishflow-qty-plus { width:26px !important; height:32px !important; line-height:32px !important; } .wishflow-qty { width:38px !important; height:32px !important; font-size:10px !important; } /* Cleaner action area */ .wishflow-table .wishflow-table-cart { min-width:96px !important; min-height:34px !important; line-height:32px !important; padding:0 11px !important; font-size:8px !important; } .wishflow-table .wishflow-remove { width:32px !important; height:34px !important; min-width:32px !important; line-height:32px !important; } /* Subtle row hover */ .wishflow-table tbody tr:hover { background:#fbfbfb !important; } /* Mobile keeps the compact polished feel */ @media (max-width:720px) { .wishflow-page--pro { padding:18px 12px 44px !important; } .wishflow-page--pro .wishflow-page-head { gap:12px !important; } .wishflow-page--pro .wishflow-page-actions { align-self:stretch !important; width:100% !important; } .wishflow-page--pro .wishflow-page-actions button { flex:1; } .wishflow-summary { grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:5px !important; } .wishflow-summary-card { min-height:52px !important; padding:9px !important; display:grid !important; gap:4px !important; } .wishflow-summary-card strong { font-size:16px !important; } .wishflow-summary-card span { font-size:7px !important; } .wishflow-pro-toolbar { justify-content:stretch !important; } .wishflow-view-tools { width:100% !important; display:grid !important; grid-template-columns:minmax(0,1fr) 130px !important; gap:6px !important; } .wishflow-search, .wishflow-sort { width:100% !important; min-width:0 !important; } .wishflow-table tbody { gap:9px !important; } .wishflow-table tbody tr.wishflow-item { padding:12px !important; gap:10px 8px !important; } .wishflow-table-image { flex-basis:58px !important; width:58px !important; height:72px !important; } .wishflow-table-image img { width:58px !important; height:72px !important; } } /* ========================================================= WishFlow Ultimate v2.2.8 — Exact search/sort alignment ========================================================= */ .wishflow-pro-toolbar, .wishflow-view-tools { display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-end !important; gap:12px !important; line-height:1 !important; } /* Remove wrapper offsets that made the two controls look unlevel. */ .wishflow-view-tools > *, .wishflow-search-wrap, .wishflow-sort-wrap { align-self:center !important; margin:0 !important; padding:0 !important; position:relative !important; top:0 !important; bottom:auto !important; transform:none !important; } /* Make BOTH actual controls use exactly the same box model. */ .wishflow-search, .wishflow-search-input, .wishflow-search-wrap input, .wishflow-sort, .wishflow-sort-select, .wishflow-sort-wrap select { display:block !important; height:44px !important; min-height:44px !important; max-height:44px !important; margin:0 !important; box-sizing:border-box !important; border:1px solid #dedede !important; border-radius:0 !important; line-height:42px !important; vertical-align:top !important; } /* Longer search bar. */ .wishflow-search-wrap { width:360px !important; min-width:360px !important; } .wishflow-search, .wishflow-search-input, .wishflow-search-wrap input { width:360px !important; min-width:360px !important; padding:0 15px !important; } /* Sorting stays compact beside it. */ .wishflow-sort-wrap { width:160px !important; min-width:160px !important; } .wishflow-sort, .wishflow-sort-select, .wishflow-sort-wrap select { width:160px !important; min-width:160px !important; padding:0 30px 0 12px !important; } /* Mobile remains responsive rather than forcing 520px of controls. */ @media (max-width:720px) { .wishflow-view-tools { display:grid !important; grid-template-columns:minmax(0,1fr) 135px !important; gap:7px !important; width:100% !important; } .wishflow-search-wrap, .wishflow-search, .wishflow-search-input, .wishflow-search-wrap input { width:100% !important; min-width:0 !important; } .wishflow-sort-wrap, .wishflow-sort, .wishflow-sort-select, .wishflow-sort-wrap select { width:135px !important; min-width:135px !important; } } /* ========================================================= WishFlow Ultimate v2.2.9 — Variation row alignment ========================================================= */ /* Hide the small grey SIZE / COLOR labels above the dropdowns. */ .wishflow-option-label, .wishflow-inline-option > label, .wishflow-variation-field > label, .wishflow-table td[data-label="Size & Color"] label { display:none !important; } /* Size and Color boxes sit directly beside each other. */ .wishflow-inline-options { display:flex !important; flex-direction:row !important; align-items:center !important; gap:8px !important; margin:0 !important; padding:0 !important; } .wishflow-inline-option, .wishflow-variation-field { display:flex !important; align-items:center !important; margin:0 !important; padding:0 !important; } /* Give every interactive box in the row the exact same height. */ .wishflow-variant-select, .wishflow-qty-field, .wishflow-table .wishflow-table-cart, .wishflow-table .wishflow-remove { height:38px !important; min-height:38px !important; max-height:38px !important; margin-top:0 !important; margin-bottom:0 !important; box-sizing:border-box !important; }/* Dropdowns */ /* Quantity box and its three inner controls */ .wishflow-qty-field { display:grid !important; align-items:stretch !important; } .wishflow-qty-minus, .wishflow-qty, .wishflow-qty-plus { height:36px !important; min-height:36px !important; max-height:36px !important; line-height:36px !important; margin:0 !important; padding-top:0 !important; padding-bottom:0 !important; box-sizing:border-box !important; } /* Add to Cart + remove */ .wishflow-table .wishflow-table-cart, .wishflow-table .wishflow-remove { display:inline-flex !important; align-items:center !important; justify-content:center !important; line-height:1 !important; padding-top:0 !important; padding-bottom:0 !important; } /* Vertically center every table cell containing the controls. */ .wishflow-table tbody td { vertical-align:middle !important; } .wishflow-table td[data-label="Size & Color"], .wishflow-table td[data-label="Quantity"], .wishflow-table td[data-label="Action"] { padding-top:13px !important; padding-bottom:13px !important; } /* Keep action controls on one baseline. */ .wishflow-table-actions { display:flex !important; align-items:center !important; gap:7px !important; margin:0 !important; } @media (max-width:720px) { .wishflow-inline-options { align-items:center !important; } .wishflow-variant-select, .wishflow-qty-field, .wishflow-table .wishflow-table-cart, .wishflow-table .wishflow-remove { height:40px !important; min-height:40px !important; max-height:40px !important; } } /* ========================================================= WishFlow Ultimate v2.2.10 — Restore Size/Color selectors v2.2.9 correction ========================================================= */ /* * v2.2.9 hid