/* * Iclicks_ProductBadges — badge stack positioned in the top-right corner * of the product image container by default (category list, search, * related, upsell, cross-sell, widgets). On the product detail page the * stack is flipped to the top-left so it sits opposite the wishlist * heart and Fotorama nav controls. One stylesheet serves every context * because the plugin injects the same DOM into every .product-image-container * render. */ .product-image-container, .product-item-photo, .gallery-placeholder, .gallery-placeholder[data-gallery-role="gallery-placeholder"] { position: relative; } .iclicks-product-badges { position: absolute; top: 10px; right: 10px; left: auto; /* Fotorama's own layers sit at z-index 1-3 for stage, spinner, and nav; sit above everything except fullscreen mode. */ z-index: 20; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; max-width: calc(100% - 20px); } /* Badges are injected inside .gallery-placeholder but Fotorama inserts its own .fotorama wrapper next to them; keep our stack pinned to the gallery viewport and above the fotorama stage. */ .gallery-placeholder .iclicks-product-badges { top: 12px; right: 12px; left: auto; z-index: 20; } /* Product detail page: flip the stack to the top-left of the gallery so it sits opposite the wishlist heart / fotorama controls. Listings and widgets keep the default top-right placement. */ .catalog-product-view .iclicks-product-badges, .catalog-product-view .gallery-placeholder .iclicks-product-badges { right: auto; left: 12px; align-items: flex-start; } /* Hide our badges in fullscreen mode so they don't float over the lightbox-style expanded gallery (fotorama adds .fotorama--fullscreen to / .fotorama when open). */ .fotorama--fullscreen .iclicks-product-badges, body.fotorama__fullscreen .iclicks-product-badges { display: none; } .iclicks-product-badge { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; min-height: 22px; background-color: #0c3d62; color: #ffffff; font-size: 11px; font-weight: 500; line-height: 1; letter-spacing: 0; text-transform: none; border-radius: 40px !important; box-shadow: none; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } /* Bigger pill on the product detail page gallery so it reads well next * to the larger image. Falls back to the listing size on mobile. */ .catalog-product-view .gallery-placeholder .iclicks-product-badge, .catalog-product-view .product.media .iclicks-product-badge { font-size: 13px; padding: 7px 14px; min-height: 26px; } /* Slightly smaller badges on narrow viewports to stay out of the thumb's way */ @media (max-width: 767px) { .iclicks-product-badges { top: 6px; right: 6px; left: auto; gap: 4px; } .catalog-product-view .iclicks-product-badges, .catalog-product-view .gallery-placeholder .iclicks-product-badges { right: auto; left: 6px; } .iclicks-product-badge { font-size: 10px; padding: 5px 10px; min-height: 20px; } }