.product-anchor { position: absolute; inset-block-start: var(--desktop-top, 50%); inset-inline-start: var(--desktop-left, 50%); z-index: var(--z-index-popover); } @media (max-width: 959px) { .product-anchor { inset-block-start: var(--mobile-top); inset-inline-start: var(--mobile-left); } } .product-anchor__trigger { position: relative; width: 30px; height: 30px; color: transparent; text-decoration: none; cursor: pointer; background: transparent; border-radius: 50%; outline: 0; transform: translate(-50%, -50%); --sl-popover-top-with-arrow: 6px; } .product-anchor__trigger::before, .product-anchor__trigger::after { position: absolute; inset: 0; width: 15px; height: 15px; margin: auto; content: ""; background-color: #fff; border-radius: 50%; transition: transform 0.2s; } .product-anchor__trigger::after { box-shadow: 0 0 0 rgb(var(--color-background)); opacity: 0.5; animation: pulse 2s infinite; } @media (max-width: 959px) { .product-anchor__trigger { --sl-popover-top-with-arrow: 4px; } } .product-anchor__content { position: absolute; inset-block-start: 100%; inset-inline-start: 50%; z-index: var(--z-index-hover); display: flex; gap: 16px; align-items: stretch; min-width: 320px; max-width: 400px; padding: 16px; margin-block-start: 8px; color: rgb(var(--color-text)); text-align: start; pointer-events: none; visibility: hidden; background: rgb(var(--color-background)); border-radius: 0; box-shadow: 0 4px 12px rgb(0 0 0 / 10%); opacity: 0; transition: all 0.3s ease; transform: translateX(-50%); } .product-anchor__content::before, .product-anchor__content::after { display: none; } .product-anchor__content[open="true"] { pointer-events: auto; visibility: visible; opacity: 1; } .product-anchor__trigger[open] .product-anchor__content { display: flex !important; pointer-events: auto; visibility: visible !important; opacity: 1 !important; } @media (max-width: 959px) { .product-anchor__content { min-width: 280px; max-width: 320px; margin-block-start: 4px; } .product-anchor__content::before { position: absolute; inset-block-start: -8px; inset-inline-start: 50%; display: block; width: 0; height: 0; content: ""; transform: translateX(-50%); } } .product-anchor__product-text { display: flex; flex: 1; flex-direction: column; gap: 8px; justify-content: center; min-width: 0; } .product-anchor__link { display: flex; gap: 16px; align-items: stretch; width: 100%; color: inherit; text-decoration: none; transition: opacity 0.2s ease; } .product-anchor__link:hover { opacity: 0.8; } .product-anchor__link:focus { outline: 2px solid rgba(var(--color-accent)); outline-offset: 2px; } .product-anchor__product-image { flex-shrink: 0; width: 72px; height: 72px; overflow: hidden; } .product-anchor__product-image>img, .product-anchor__product-image>svg { width: 100%; height: auto; object-fit: cover; } @media (max-width: 959px) { .product-anchor__product-image { width: 70px; height: 70px; } } .product-anchor__placeholder-image { width: 100%; height: auto; background-color: rgb(var(--color-image-background)); } .product-anchor__title { display: -webkit-box; margin: 0; overflow: hidden; color: rgba(var(--color-text)); font-family: "Figtree", var(--font-body-family, Arial, sans-serif) !important; font-size: 11.7px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0 !important; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .product-anchor__description { display: -webkit-box; overflow: hidden; color: rgba(var(--color-text)); text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } @media (max-width: 959px) { .product-anchor__text .product-anchor__title { -webkit-line-clamp: 1; } .product-anchor__text .product-anchor__description { -webkit-line-clamp: 2; } } .product-anchor .product-price__sale { color: rgba(var(--color-text)); font-family: "Figtree", var(--font-body-family, Arial, sans-serif) !important; font-size: 10.4px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0 !important; } .product-anchor .product-price, .product-anchor .product-price__item, .product-anchor .product-price__origin { font-family: "Figtree", var(--font-body-family, Arial, sans-serif) !important; font-size: 10.4px !important; font-weight: 400 !important; line-height: 1.4 !important; letter-spacing: 0 !important; } .product-anchor .popover-wrapper { position: relative; display: inline-block; } .product-anchor .popover-wrapper:hover .product-anchor__trigger::before, .product-anchor .popover-wrapper:hover .product-anchor__trigger::after { transform: scale(1.1); } .product-anchor .popover-wrapper:hover .product-anchor__content { pointer-events: auto; visibility: visible; opacity: 1; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 #fff; opacity: 0.5; } 70% { box-shadow: 0 0 0 10px #fff; opacity: 0.5; } 95% { box-shadow: 0 0 0 10px #fff; opacity: 0; } 100% { box-shadow: 0 0 0 0 #fff; opacity: 0; } }