/* Floating icon on a category page: placed in the window. */
.floating_icon { position: fixed; z-index: 50; line-height: 0; }
.floating_icon.icon_leftTop { top: 30px; left: 10px; }
.floating_icon.icon_leftMiddle { top: 49%; left: 10px; }
.floating_icon.icon_leftBottom { bottom: 30px; left: 10px; }
.floating_icon.icon_rightTop { top: 30px; right: 10px; }
.floating_icon.icon_rightMiddle { top: 49%; right: 10px; }
.floating_icon.icon_rightBottom { bottom: 30px; right: 10px; }

/* Where the window has no empty margin beside the page, the page gives the icon room so it covers no product. */
@media (min-width: 768px) and (max-width: 1420px) {
    .floating_icon img { height: 40px !important; }
    body:has(.floating_icon[class*="icon_right"]) .page-main { padding-right: 72px; }
    body:has(.floating_icon[class*="icon_left"]) .page-main { padding-left: 72px; }
}

/* Icon on each product in a listing: placed on the product card. */
.product-item-info:has(.fme-whatsapp-share) { position: relative; }
.fme-whatsapp-share { position: absolute; z-index: 10; display: block; line-height: 0; }
.fme-whatsapp-share.icon_leftTop { top: 10px; left: 10px; }
.fme-whatsapp-share.icon_rightTop { top: 10px; right: 10px; }
.fme-whatsapp-share.icon_leftMiddle { top: 40%; left: 10px; }
.fme-whatsapp-share.icon_rightMiddle { top: 40%; right: 10px; }
.fme-whatsapp-share.icon_leftBottom { bottom: 10px; left: 10px; }
.fme-whatsapp-share.icon_rightBottom { bottom: 10px; right: 10px; }

.fme-whatsapp-product-share { display: inline-block; vertical-align: middle; margin: 0 0 10px 12px; }

/* A phone has no margin to spare, so the icon goes to the bottom corner, the usual place for a floating button. */
@media (max-width: 767px) {
    .floating_icon img { height: 36px !important; }
    .floating_icon[class*="icon_right"] { top: auto; bottom: 15px; right: 12px; }
    .floating_icon[class*="icon_left"] { top: auto; bottom: 15px; left: 12px; }
}

/* The bundled logo is a white glyph: give it WhatsApp's green disc so it shows on any background. */
.floating_icon img,
.fme-whatsapp-share img,
.fme-whatsapp-product-share img {
    display: block;
    padding: 6px;
    box-sizing: content-box;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}