/*
 * Sticky add-to-cart bar. Phones only: 767px is Divi's mobile breakpoint.
 * Colours: docs/specs/conversion-overhaul/phase-6-sticky-atc.md, "Palette".
 */

.fourlocked-sticky-atc {
    --fourlocked-sticky-atc-surface: #ffffff;
    --fourlocked-sticky-atc-line: #e2e2e2;
    --fourlocked-sticky-atc-ink: #1a1a1a;
    --fourlocked-sticky-atc-accent: #2ea3f2;

    display: none;
}

@media (max-width: 767px) {
    .fourlocked-sticky-atc.is-ready {
        display: flex;
        align-items: center;
        gap: 12px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        /* Under Divi's mobile menu. */
        z-index: 9000;
        box-sizing: border-box;
        padding: 10px 14px;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        background: var(--fourlocked-sticky-atc-surface);
        border-top: 1px solid var(--fourlocked-sticky-atc-line);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.12);
        /* Backstop for the script's `inert`: visibility keeps the hidden bar's button out of the tab
           order, but only after the slide-out delay below. */
        visibility: hidden;
        transform: translateY(110%);
        transition: transform 0.25s ease, visibility 0s linear 0.25s;
    }

    .fourlocked-sticky-atc.is-ready.is-visible {
        visibility: visible;
        transform: translateY(0);
        transition: transform 0.25s ease, visibility 0s;
    }

    .fourlocked-sticky-atc__info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-width: 0;
        flex: 1 1 auto;
        line-height: 1.2;
    }

    .fourlocked-sticky-atc__title {
        font-size: 13px;
        font-weight: 600;
        color: var(--fourlocked-sticky-atc-ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fourlocked-sticky-atc__price {
        font-size: 14px;
        color: var(--fourlocked-sticky-atc-ink);
    }

    .fourlocked-sticky-atc__price .amount {
        font-weight: 700;
    }

    .fourlocked-sticky-atc__price del {
        opacity: 0.6;
        margin-right: 4px;
        font-weight: 400;
    }

    .fourlocked-sticky-atc__price ins {
        text-decoration: none;
    }

    .fourlocked-sticky-atc__button {
        flex: 0 0 auto;
        display: inline-block;
        margin: 0;
        padding: 12px 20px;
        border: 2px solid var(--fourlocked-sticky-atc-accent);
        border-radius: 3px;
        background: var(--fourlocked-sticky-atc-accent);
        color: var(--fourlocked-sticky-atc-ink);
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        text-transform: uppercase;
        letter-spacing: 0.3px;
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .fourlocked-sticky-atc__button:hover,
    .fourlocked-sticky-atc__button:focus {
        background: var(--fourlocked-sticky-atc-ink);
        color: var(--fourlocked-sticky-atc-accent);
    }

    .fourlocked-sticky-atc__button:focus-visible {
        outline: 2px solid var(--fourlocked-sticky-atc-ink);
        outline-offset: 2px;
    }
}