/* WPO Product Experience - Artist badge (v4.9.51)
 * Profile photo (white ring, overhanging the top-right corner) and a
 * "Canadian Artist" pill (bottom-right) on artist products, in the catalogue
 * and on the product page. Selectors are doubled up / !important only where
 * Hello Elementor and WooCommerce image rules would otherwise win. */

/* ---- Catalogue cards ---- */
li.product.wpe-artist-product,
li.product.wpe-artist-product > a.woocommerce-LoopProduct-link { overflow: visible !important; }

li.product .wpe-artist-media {
    position: relative !important;
    display: block !important;
    overflow: visible !important;
}

/* ---- Shared pieces ---- */
.wpe-artist-pill {
    position: absolute;
    right: 12px;
    bottom: 12px;
    z-index: 4;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: calc(100% - 24px);
    padding: 6px 10px 6px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .94);
    color: #1a1a1a;
    font: 600 11px/1 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .14);
    pointer-events: none;
}
.wpe-artist-pill .wpe-artist-leaf {
    width: 12px;
    height: 12px;
    flex: none;
    fill: #d52b1e;
}

.wpe-artist-avatar {
    position: absolute !important;
    top: -10px !important;
    right: -10px !important;
    z-index: 5;
    display: block !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    background-color: #ddd;
    background-size: cover;
    background-position: center 20%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
    pointer-events: none;
}

.wpe-artist-by {
    display: block;
    margin: 2px 0 4px;
    font: 400 13px/1.3 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    color: #6b6b6b;
}
.wpe-artist-by strong { display: inline !important; font-weight: 500; color: #1a1a1a; }

@media (max-width: 480px) {
    .wpe-artist-avatar { width: 40px !important; height: 40px !important; top: -8px !important; right: -8px !important; }
    .wpe-artist-pill { font-size: 10px; padding: 5px 8px 5px 7px; right: 8px; bottom: 8px; }
}

/* ---- Product page ---- */
.wpe-artist-gallery { position: relative !important; overflow: visible !important; }
/* Inside the image here, not overhanging: Elementor columns clip overflow on the product page. */
.wpe-artist-gallery .wpe-artist-avatar { width: 64px !important; height: 64px !important; top: 16px !important; right: 16px !important; }
.wpe-artist-gallery .wpe-artist-pill { font-size: 12px; padding: 7px 12px 7px 10px; right: 16px; bottom: 16px; }
.wpe-artist-gallery .wpe-artist-pill .wpe-artist-leaf { width: 13px; height: 13px; }
/* The zoom icon lives top-right too - move it clear of the photo. */
.wpe-artist-gallery .woocommerce-product-gallery__trigger { top: 92px !important; }

.wpe-artist-by--pdp { margin: 4px 0 10px; font-size: 15px; }
.wpe-artist-by--pdp a { color: #1a1a1a; font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
.wpe-artist-by--pdp a:hover { color: #000; }

@media (max-width: 767px) {
    .wpe-artist-gallery .wpe-artist-avatar { width: 52px !important; height: 52px !important; top: 12px !important; right: 12px !important; }
    .wpe-artist-gallery .wpe-artist-pill { font-size: 11px; right: 12px; bottom: 12px; }
    .wpe-artist-gallery .woocommerce-product-gallery__trigger { top: 74px !important; }
}