/* MarketExp membership lock/badge frontend styles. Dynamic values are supplied through CSS variables in wp_add_inline_style(). */
ul.products li.product,
.products .product,
.wc-block-grid__product,
.product-grid-item,
.wd-product {
    position: relative !important;
}

.me-membership-badge-stack {
    position: absolute !important;
    z-index: 12222 !important;
    display: flex !important;
    gap: 6px !important;
    align-items: flex-start !important;
    pointer-events: none !important;
    filter: none !important;
    opacity: 1 !important;
}

.me-membership-badge-stack--horizontal { flex-direction: row !important; }
.me-membership-badge-stack--vertical { flex-direction: column !important; }
.me-membership-badge-stack--auto { flex-direction: row !important; }
.me-membership-badge-stack--reverse.me-membership-badge-stack--horizontal { flex-direction: row-reverse !important; }
.me-membership-badge-stack--reverse.me-membership-badge-stack--vertical { flex-direction: column-reverse !important; }
.me-membership-badge-stack--reverse.me-membership-badge-stack--auto { flex-direction: row-reverse !important; }
.me-membership-badge-stack--auto.me-membership-badge-stack--normal { flex-direction: row !important; }
.me-membership-badge-stack--auto { max-width: calc(100% - 16px) !important; flex-wrap: wrap !important; }

.me-membership-badge {
    position: relative !important;
    z-index: 12222 !important;
    background: var(--me-membership-badge-bg, #7c3aed) !important;
    color: var(--me-membership-badge-fg, #fff) !important;
    font-size: var(--me-membership-badge-font-size, 10px) !important;
    font-weight: 700 !important;
    letter-spacing: .03em !important;
    padding: var(--me-membership-badge-padding, 3px 9px) !important;
    border-radius: var(--me-membership-badge-radius, 100px) !important;
    border: var(--me-membership-badge-border, none) !important;
    pointer-events: auto !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    filter: none !important;
    opacity: 1 !important;
    transform: none;
}

.me-membership-lock-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: all !important;
    cursor: default !important;
    border-radius: inherit !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.me-membership-lock-overlay svg {
    display: block !important;
    flex-shrink: 0 !important;
    pointer-events: none !important;
    filter: none !important;
    opacity: 1 !important;
}

.me-membership-locked-placeholder {
    filter: blur(var(--me-membership-placeholder-blur, 10px)) grayscale(1) !important;
    opacity: var(--me-membership-placeholder-opacity, .18) !important;
    transform: scale(1.08) !important;
    pointer-events: none !important;
    transition: none !important;
    width: 100% !important;
    height: auto !important;
}

ul.products li.product:has(.me-membership-lock-overlay) .overlay:not(.me-membership-lock-overlay),
ul.products li.product:has(.me-membership-lock-overlay) [class*="quick-view"],
ul.products li.product:has(.me-membership-lock-overlay) .woodmart-hover-info,
ul.products li.product:has(.me-membership-lock-overlay) .wd-hover-info,
ul.products li.product:has(.me-membership-lock-overlay) .product-image-hover,
ul.products li.product:has(.me-membership-lock-overlay) .hover-img,
ul.products li.product:has(.me-membership-lock-overlay) figure img:nth-child(n+2),
.me-membership-locked-product .overlay:not(.me-membership-lock-overlay),
.me-membership-locked-product [class*="quick-view"],
.me-membership-locked-product .woodmart-hover-info,
.me-membership-locked-product .wd-hover-info,
.me-membership-locked-product .product-image-hover,
.me-membership-locked-product .hover-img,
.me-membership-locked-product figure img:nth-child(n+2) {
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    display: none !important;
    transition: none !important;
}

.me-membership-badge-icon {
    width: var(--me-membership-badge-icon-size, 50px) !important;
    height: var(--me-membership-badge-icon-size, 50px) !important;
    max-width: var(--me-membership-badge-icon-size, 50px) !important;
    max-height: var(--me-membership-badge-icon-size, 50px) !important;
    object-fit: cover !important;
    border-radius: var(--me-membership-badge-icon-radius, 999px) !important;
    display: inline-block !important;
    vertical-align: middle !important;
    filter: none !important;
    opacity: var(--me-membership-badge-icon-opacity, 1) !important;
}

.me-membership-badge-text {
    display: inline-block !important;
    vertical-align: middle !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Tier icon must stay visible above theme hover layers. */
.me-membership-badge .me-membership-badge-icon {
    width: var(--me-membership-badge-icon-size, 50px) !important;
    height: var(--me-membership-badge-icon-size, 50px) !important;
    max-width: var(--me-membership-badge-icon-size, 50px) !important;
    max-height: var(--me-membership-badge-icon-size, 50px) !important;
    object-fit: cover !important;
    border-radius: var(--me-membership-badge-icon-radius, 999px) !important;
    display: inline-block !important;
    vertical-align: middle !important;
    filter: none !important;
    opacity: var(--me-membership-badge-icon-opacity, 1) !important;
}
.me-membership-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
}
.me-membership-badge .me-membership-badge-icon + .me-membership-badge-text {
    margin-left: 0 !important;
}


/* Icon-only mode can be displayed as a clean 50x50 icon without pill background. */
.me-membership-badge--icon-clean {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.me-membership-badge--icon-clean .me-membership-badge-icon {
    margin: 0 !important;
}