.item-overlay {
    position: relative;
    width: 80px;
    height: 80px;
    display: inline-block;

    --overlay-url: none;
    --overlay-url-2: none;
}

/* Item image (under overlay) */
.item-overlay img {
    position: absolute;
    width: var(--img-size, 100%);
    height: var(--img-size, 100%);
    left: 50%;
    top: var(--img-top, 50%);
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 1;
}

.item-overlay::before {
    content: "";
    position: absolute;
    inset: 0;

    background-image: var(--overlay-url), var(--overlay-url-2);
    background-size: contain, contain;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;

    z-index: 2;
    pointer-events: none;
}

.item-overlay::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--overlay-url) center/contain no-repeat;
    z-index: 2;
    pointer-events: none;
}

/* Categories */
.item--common {
    --overlay-url: url("https://images.maraholic.org/assets/overlays/overlay-common.gif");
    --img-size: 80px;
    --img-top: 50%;
}

.item--commontwo {
    --overlay-url-2: url("https://images.maraholic.org/assets/overlays/common2.gif");
    --img-size: 80px;
    --img-top: 50%;
}

.item--fake-costume {
    --overlay-url: url("https://images.maraholic.org/assets/overlays/overlay-fakebox.png");
    --img-size: 80px;
    --img-top: 48%;
}

.item--photo {
    --overlay-url: url("https://images.maraholic.org/assets/overlays/overlay-photo.png");
    --img-size: 38px;
    --img-top: 45%;
}

.item--minipet-plate {
    --overlay-url: url("https://images.maraholic.org/assets/overlays/overlay-minipet-plate.png");
    --img-size: 44px;
    --img-top: 50%;
}

/* Hair Dye */
.item--hair-dye {
    --overlay-url: url("https://images.maraholic.org/assets/overlays/hairdye.png");
}

/* Eyebrow Colors */
.item--eyebrow-color {
    --overlay-url: url("https://images.maraholic.org/assets/overlays/eyebrow.png");
}

/* Lipstick */
.item--lipstick {
    --overlay-url: url("https://images.maraholic.org/assets/overlays/lipstick.png");
}

/* Face Dye */
.item--face-dye {
    --overlay-url: url("https://images.maraholic.org/assets/overlays/facedye.png");
}

/* Eye Makeup */
.item--eye-makeup {
    --overlay-url: url("https://images.maraholic.org/assets/overlays/eyemakeup.png");
}

/* Base color */
.item-overlay.color-bg {
    background: var(--bg-color, #ccc);
    overflow: hidden;
}

.item-overlay.color-bg img {
    display: none;
}

.item-wrapper {
    position: relative;
}

.x2-badge {
    position: absolute;
    z-index: 5;
}

/* higher than overlay */
.item-overlay {
    position: relative;
    z-index: 1;
}