html {
    --color-white: #FFFFFF;
    --color-black: #2D2D2D;
    --color-dblack: #000000;
    --color-dbeige: #DFDBD6;
    --color-beige: #EFEEEA;
    --color-ddbeige: #CEC8BF;
    --color-lbeige: #FAF8F5;
    --color-gray: #AFAFAF;
    --color-dgray: #BFBFBF;
    --color-yellow: #F9EE83;
    --color-dyellow: #F8E847;
    --color-green: #DCEBD8;
    --color-dgreen: #C0D2BC;
    --color-purple: #E8DCED;
    --color-dpurple: #C9B0D4;
    --color-red: #D24463;
    --color-blue: #6E9DBC;
}
/* Text colors */
.color-white {
    color: var(--color-white);
}
.color-black {
    color: var(--color-black);
}
.color-black-important {
    color: var(--color-black) !important;
}
.color-dblack {
    color: var(--color-dblack);
}
.color-dbeige {
    color: var(--color-dbeige);
}
.color-beige {
    color: var(--color-beige);
}
.color-ddbeige {
    color: var(--color-ddbeige);
}
.color-lbeige {
    color: var(--color-lbeige);
}
.color-gray {
    color: var(--color-gray);
}
.color-dgray {
    color: var(--color-dgray);
}
.color-yellow {
    color: var(--color-yellow);
}
.color-dyellow {
    color: var(--color-dyellow);
}
.color-green {
    color: var(--color-green);
}
.color-dgreen {
    color: var(--color-dgreen);
}
.color-purple {
    color: var(--color-purple);
}
.color-dpurple {
    color: var(--color-dpurple);
}
.color-red {
    color: var(--color-red);
}
.color-blue {
    color: var(--color-blue);
}
/* Background colors */
.bg-white {
    background-color: var(--color-white);
}
.bg-black {
    background-color: var(--color-black);
}
.bg-dblack {
    background-color: var(--color-dblack);
}
.bg-dbeige {
    background-color: var(--color-dbeige);
}
.bg-beige {
    background-color: var(--color-beige);
}
.bg-ddbeige {
    background-color: var(--color-ddbeige);
}
body, .bg-lbeige {
    background-color: var(--color-lbeige);
}
.bg-gray {
    background-color: var(--color-gray);
}
.bg-dgray {
    background-color: var(--color-dgray);
}
.bg-yellow {
    background-color: var(--color-yellow);
}
.bg-dyellow {
    background-color: var(--color-dyellow);
}
.bg-green {
    background-color: var(--color-green);
}
.bg-dgreen {
    background-color: var(--color-dgreen);
}
.bg-purple {
    background-color: var(--color-purple);
}
.bg-dpurple {
    background-color: var(--color-dpurple);
}
.bg-red {
    background-color: var(--color-red);
}
.bg-blue {
    background-color: var(--color-blue);
}
/*************************************************/
.out-of-stock-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-white);
    color: var(--color-black) !important;
    z-index: 1;
    opacity: 0.9;
    border-radius: 26px;
}
.out-of-stock-overlay.hero {
    border-radius: 0;
}
.out-of-stock-overlay:hover {
    color: var(--color-black) !important;
}
.out-of-stock-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 500;
    text-align: center;
    color: var(--color-black);
    background: var(--color-beige);
    padding: 15px 30px;
    border-radius: 10px;
    z-index: 2 ;
    pointer-events: none;
}