/* Available from footer and product page banner */
.available-from-footer, .product-page-availability-banner {
    background: rgb(85, 45, 123);
    color: white;
    text-align: center;
    font-size: 1.5rem;
    padding: 0.5rem;
}

@media screen and (max-width: 768px) {
    .out-of-stock-footer {
        font-size: 1.2rem;
    }
}

/**
 * Date-picker on product pages 
 */
:root {
    --litepicker-container-gap: 15px;
    --litepicker-day-width: 38px;
    --litepicker-month-width: calc(var(--litepicker-day-width) * 7 + 7 * var(--litepicker-container-gap));
    --litepicker-day-color-hover: #fab900;
    --litepicker-is-start-color-bg: #fab900;
    --litepicker-is-end-color-bg: #fab900;
    --litepicker-is-start-color: white;
    --litepicker-is-end-color: white;
    --litepicker-is-in-range-color: #feecc4;
}

/* Date-picker header */
.month-item > .month-item-header > div {
    text-align: left;
    font-size: 2rem;
    padding-left: 1rem;
    font-family: Bangers;
}

.month-item-header {
    background: #fab900;
}

/* Date-picker header month switching buttons */
.month-item-header > button > svg {
    fill: #e20615 !important;
}

.month-item-header > button > svg:hover, .month-item-header > button:hover > svg, .month-item-header > button:hover {
    fill: #bc202d !important;
    cursor: pointer !important;
}

/* Date-picker calendar body */
.litepicker .container__days {
    gap: var(--litepicker-container-gap);
    padding: calc(var(--litepicker-container-gap) / 2);
}

.month-item-weekdays-row > div, .day-item {
    font-size: 1.5rem !important;
}

.day-item.unavailable {
    color: #bc202d !important;
    text-decoration: line-through !important;
}

.litepicker .container__days .day-item.is-in-range {
    color: black;
}

.day-item:not(.is-locked, .is-start-date, .is-in-range, .is-end-date) {
    color: #009244 !important;
}