/* ==========================================================================
   eo · Mobile checkout flow
   --------------------------------------------------------------------------
   Scope: shipping-login (all widths), shipping (<768px), checkout (<768px),
          shipping-welcome (all widths).
   Desktop ≥768px is intentionally untouched by every rule below except those
   inside .eo-signin-gate (the dual-form layout was acknowledged broken on
   both viewports and is replaced everywhere).
   ========================================================================== */

.eo-mobile-checkout {
    --eo-orange: #ff4305;
    --eo-blue: #2405f2;
    --eo-blue-hover: #1d04c2;
    --eo-ink-200: #1a1a1a;
    --eo-ink-300: #666666;
    --eo-off-white: #f2f2f2;
    --eo-white: #ffffff;
    --eo-r1: 8px;
}

/* ==========================================================================
   1 · Sign-in gate — applies at all viewport widths
   ========================================================================== */

.eo-mobile-checkout.eo-signin-gate {
    background: var(--eo-off-white);
    padding: 0;
}

.eo-mobile-checkout.eo-signin-gate .eo-title-block {
    padding: 24px 16px 16px;
}

.eo-mobile-checkout.eo-signin-gate .eo-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 32px;
    line-height: 0.95;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #000;
    margin: 0;
}

.eo-mobile-checkout.eo-signin-gate .eo-help {
    font-size: 13px;
    color: var(--eo-ink-300);
    line-height: 1.5;
    padding: 0 16px 16px;
    margin: 0;
}

.eo-mobile-checkout.eo-signin-gate .eo-help b {
    font-weight: 700;
    color: var(--eo-ink-200);
}

/* Tabs */
.eo-mobile-checkout .eo-tabs {
    margin: 0 16px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--eo-ink-200);
    border-radius: var(--eo-r1);
    overflow: hidden;
}

.eo-mobile-checkout .eo-tab {
    padding: 14px 0;
    text-align: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: transparent;
    color: var(--eo-ink-200);
    cursor: pointer;
    border: 0;
    min-height: 48px;
    line-height: 1.4;
    transition: background 0.12s ease, color 0.12s ease;
}

.eo-mobile-checkout .eo-tab.active {
    background: #000;
    color: var(--eo-white);
}

.eo-mobile-checkout .eo-tab:focus-visible {
    outline: 2px solid var(--eo-orange);
    outline-offset: -2px;
}

.eo-mobile-checkout .eo-tab-panel[hidden] {
    display: none;
}

/* Float-label field cell — sign-in gate at all widths.
   Markup: <div class="form-group eo-field-host"> <input> <label> </div>
   Layout uses column-reverse so the existing label-after-input markup
   visually reads label-on-top, input-below — no DOM reorder required.
   These same rules are re-applied inside the section-2 @media block for
   shipping/review on mobile only. Desktop shipping/review intentionally
   does NOT pick up these styles. */
.eo-mobile-checkout.eo-signin-gate .eo-field-host {
    display: flex;
    flex-direction: column-reverse;
    margin: 0 16px 12px;
    background: var(--eo-white);
    border: 1px solid var(--eo-ink-200);
    border-radius: var(--eo-r1);
    padding: 8px 16px 6px;
    min-height: 56px;
    position: relative;
    transition: border-color 0.12s ease, padding 0.12s ease;
}

.eo-mobile-checkout.eo-signin-gate .eo-field-host > label,
.eo-mobile-checkout.eo-signin-gate .eo-field-host > .custom-control-label {
    font-family: 'Archivo', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--eo-ink-300);
    margin: 0 0 2px;
    padding: 0;
    line-height: 1.2;
    /* Force the label out of the absolute positioning that the existing
       .prod-form .form-group > label rule applies (left: 20px, top: 0,
       transform: translateY(50%)). With position: static the label flows
       inside the flex cell, picks up the cell's 16px horizontal padding,
       and aligns with the input below it. Also stops the label from
       showing "through" autofill paint, since the label is no longer
       overlapping the input area. */
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
}

.eo-mobile-checkout.eo-signin-gate .eo-field-host > .form-control {
    border: 0;
    background: transparent;
    padding: 0;
    font-family: 'Archivo', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--eo-ink-200);
    min-height: 22px;
    width: 100%;
    box-shadow: none;
    border-radius: 0;
    line-height: 1.4;
}

.eo-mobile-checkout.eo-signin-gate .eo-field-host > .form-control::placeholder {
    color: var(--eo-ink-300);
    font-weight: 400;
}

.eo-mobile-checkout.eo-signin-gate .eo-field-host > .form-control:focus {
    outline: none;
    box-shadow: none;
}

.eo-mobile-checkout.eo-signin-gate .eo-field-host:focus-within {
    border-width: 2px;
    border-color: var(--eo-blue);
    padding: 7px 15px 5px;
}

.eo-mobile-checkout.eo-signin-gate .eo-field-host.eo-field-error {
    border-width: 2px;
    border-color: var(--eo-orange);
    padding: 7px 15px 5px;
}

/* Field-level validation errors — sign-in gate.
   jQuery Validate inserts <label class="error">message</label> after the
   input. Without intervention, our column-reverse flex would push the error
   to the top of the cell, expanding its height. Position the error absolutely
   below the cell so the cell keeps its constant height; reserve 24px below
   the cell when an error is present so the next field isn't covered. */
.eo-mobile-checkout.eo-signin-gate .eo-field-host > label.error {
    position: absolute;
    top: calc(100% + 4px);
    left: 4px;
    right: 4px;
    margin: 0;
    padding: 0;
    font-family: 'Archivo', sans-serif;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--eo-orange);
    text-transform: none;
    letter-spacing: 0;
    background: transparent;
    pointer-events: none;
    z-index: 5;
}

.eo-mobile-checkout.eo-signin-gate .eo-field-host:has(> label.error) {
    margin-bottom: 28px;
    border-width: 2px;
    border-color: var(--eo-orange);
    padding: 7px 15px 5px;
}

.eo-mobile-checkout.eo-signin-gate .eo-field-host:has(> input.is-invalid),
.eo-mobile-checkout.eo-signin-gate .eo-field-host:has(> select.is-invalid) {
    border-width: 2px;
    border-color: var(--eo-orange);
    padding: 7px 15px 5px;
}

/* Autofill override (sign-in gate).
   Browsers (Chromium especially) paint a yellow/blue inset background and a
   different text colour on autofilled inputs. The :-webkit-autofill styles
   below paint OVER that with the cell background colour using a 1000px inset
   box-shadow (the only way to override Chrome's autofill colour) and force
   the text colour to ink-200 via -webkit-text-fill-color. The 9999s
   transition delay prevents the autofill colour from fading back in. */
.eo-mobile-checkout.eo-signin-gate .eo-field-host > input:-webkit-autofill,
.eo-mobile-checkout.eo-signin-gate .eo-field-host > input:-webkit-autofill:hover,
.eo-mobile-checkout.eo-signin-gate .eo-field-host > input:-webkit-autofill:focus,
.eo-mobile-checkout.eo-signin-gate .eo-field-host > input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--eo-white) inset;
    box-shadow: 0 0 0 1000px var(--eo-white) inset;
    -webkit-text-fill-color: var(--eo-ink-200);
    caret-color: var(--eo-ink-200);
    border: 0;
    border-radius: 0;
    background: transparent;
    background-image: none;
    transition:
        background-color 9999s ease-in-out 0s,
        color 9999s ease-in-out 0s;
}

/* Two-up row — sign-in gate */
.eo-mobile-checkout.eo-signin-gate .eo-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0 16px 12px;
}

.eo-mobile-checkout.eo-signin-gate .eo-row2 > .eo-field-host {
    margin: 0;
}

/* Buttons — sign-in gate */
.eo-mobile-checkout.eo-signin-gate .eo-btn {
    border: 0;
    border-radius: var(--eo-r1);
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 15px;
    padding: 14px 24px;
    min-height: 48px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    line-height: 1;
    text-decoration: none;
    transition: background 0.12s ease, color 0.12s ease;
}

.eo-mobile-checkout.eo-signin-gate .eo-btn.primary {
    background: var(--eo-blue);
    color: #fff;
    letter-spacing: 0;
}

.eo-mobile-checkout.eo-signin-gate .eo-btn.primary:hover,
.eo-mobile-checkout.eo-signin-gate .eo-btn.primary:focus {
    background: var(--eo-blue-hover);
    color: #fff;
}

.eo-mobile-checkout.eo-signin-gate .eo-btn.primary:focus-visible {
    outline: 3px solid var(--eo-orange);
    outline-offset: 2px;
}

.eo-mobile-checkout.eo-signin-gate .eo-btn.full {
    width: 100%;
    display: flex;
}

.eo-mobile-checkout.eo-signin-gate .eo-btn-row {
    padding: 4px 16px 20px;
}

/* Tertiary links — sign-in gate only */
.eo-mobile-checkout.eo-signin-gate .eo-tertiary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 13px;
    color: #000;
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: 0;
    padding: 0;
    letter-spacing: 0.02em;
}

.eo-mobile-checkout.eo-signin-gate .eo-tertiary:hover,
.eo-mobile-checkout.eo-signin-gate .eo-tertiary:focus {
    color: var(--eo-blue);
    text-decoration: none;
}

.eo-mobile-checkout.eo-signin-gate .eo-tertiary-row {
    text-align: center;
    padding: 0 16px 24px;
}

/* T&C checkbox row — sign-in gate only.
   The existing .prod-form .form-group > input rule in styles.css applies
   default input styling (47px tall, 1px black border, padding, etc.) to all
   inputs inside a prod-form form-group — including the checkbox. We need to
   reset those properties explicitly. Same for the label, which the existing
   .prod-form .form-group > label rule absolutely-positions — that ejects it
   from the flex flow next to the checkbox, hence the "I a" overlapping the
   checkbox icon. We restore static positioning. */
.eo-mobile-checkout.eo-signin-gate .eo-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 16px 16px;
}

.eo-mobile-checkout.eo-signin-gate .eo-check > input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    max-width: 20px;
    margin: 1px 0 0;
    padding: 0;
    flex: none;
    accent-color: var(--eo-blue);
    cursor: pointer;
    border: 1.5px solid var(--eo-ink-200);
    border-radius: 2px;
    background: var(--eo-white);
    position: static;
    appearance: auto;
    -webkit-appearance: auto;
}

.eo-mobile-checkout.eo-signin-gate .eo-check > label {
    flex: 1 1 auto;
    font-size: 13px;
    line-height: 1.5;
    color: var(--eo-ink-200);
    margin: 0;
    padding: 0;
    cursor: pointer;
    position: static;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
}

.eo-mobile-checkout.eo-signin-gate .eo-check > label a {
    color: var(--eo-ink-200);
    text-decoration: underline;
}

/* Form-loader spinner — sign-in gate only (shipping/checkout get the same
   styling inside the section-2 mobile @media block) */
.eo-mobile-checkout.eo-signin-gate .form-loader {
    display: none;
}

.eo-mobile-checkout.eo-signin-gate .form-state-loading .form-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.eo-mobile-checkout.eo-signin-gate .form-msg:empty {
    display: none;
}

.eo-mobile-checkout.eo-signin-gate .form-msg {
    margin: 0 16px 12px;
    padding: 12px 14px;
    border-radius: var(--eo-r1);
    background: #fff5f0;
    border: 1px solid var(--eo-orange);
    font-size: 13px;
    line-height: 1.4;
    color: var(--eo-ink-200);
}

/* Sign-in gate column override — neutralise the col-md-8/lg-6 mx-auto so it
   doesn't push the gate into a narrow desktop column when the surrounding
   layout already constrains width. We let Bootstrap handle the centering
   container, but inside, the eo-signin-gate is full-width up to ~520px. */
@media (min-width: 768px) {
    .eo-mobile-checkout.eo-signin-gate {
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        padding: 8px 0 32px;
    }
}

/* ==========================================================================
   2 · Shipping (Step 1/2) — mobile-only restyle
   --------------------------------------------------------------------------
   Default state at every viewport: mobile-only DOM hooks are hidden. Inside
   the @media (max-width: 767px) block they're revealed and the existing
   desktop markup is hidden in turn. Desktop ≥768px layout is untouched.
   ========================================================================== */

.eo-mobile-checkout.eo-shipping .eo-mobile-only,
.eo-mobile-checkout.eo-shipping .eo-stepper-host,
.eo-mobile-checkout.eo-shipping .eo-sticky-host,
.eo-mobile-checkout.eo-shipping .eo-pad-bottom {
    display: none;
}

/* Cart (Step 0) — same default-hidden contract as shipping above. The cart
   page opts in by carrying .eo-cart on its .cart wrapper; everything else
   about /cart is left to styles.css and cart-bundle-row.css. */
.eo-mobile-checkout.eo-cart .eo-sticky-host,
.eo-mobile-checkout.eo-cart .eo-pad-bottom {
    display: none;
}

@media (max-width: 767px) {
    /* Float-label field cell — same rules as the sign-in gate above, applied
       here on mobile only so desktop shipping/review preserves its existing
       Bootstrap form layout. */
    .eo-mobile-checkout .eo-field-host {
        display: flex;
        flex-direction: column-reverse;
        margin: 0 16px 12px;
        background: var(--eo-white);
        border: 1px solid var(--eo-ink-200);
        border-radius: var(--eo-r1);
        padding: 8px 16px 6px;
        min-height: 56px;
        position: relative;
        transition: border-color 0.12s ease, padding 0.12s ease;
    }
    .eo-mobile-checkout .eo-field-host > label,
    .eo-mobile-checkout .eo-field-host > .custom-control-label {
        font-family: 'Archivo', sans-serif;
        font-weight: 500;
        font-size: 11px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--eo-ink-300);
        margin: 0 0 2px;
        padding: 0;
        line-height: 1.2;
        /* Same reset as section 1 — kicks the label out of the absolute
           positioning applied by .prod-form .form-group > label so it flows
           inside the flex cell and aligns with the input. */
        position: static;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
    }
    /* Type selectors (`input.form-control`, `select.custom-select`) bump
       specificity to (0,4,1) so we beat the existing .prod-form .form-group
       > input { border:1px solid #000 } rule in styles.css (0,3,1) — without
       these, the native select still draws its own border/height/padding
       inside the eo-field-host, producing a "box inside a box". */
    .eo-mobile-checkout .eo-field-host > input.form-control,
    .eo-mobile-checkout .eo-field-host > select.form-control,
    .eo-mobile-checkout .eo-field-host > select.custom-select,
    .eo-mobile-checkout .eo-field-host > textarea.form-control {
        border: 0;
        background: transparent;
        background-image: none;
        padding: 0;
        margin: 0;
        font-family: 'Archivo', sans-serif;
        font-size: 15px;
        font-weight: 500;
        color: var(--eo-ink-200);
        min-height: 22px;
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        line-height: 1.4;
        height: auto;
    }
    .eo-mobile-checkout .eo-field-host > input.form-control::placeholder,
    .eo-mobile-checkout .eo-field-host > textarea.form-control::placeholder {
        color: var(--eo-ink-300);
        font-weight: 400;
    }
    .eo-mobile-checkout .eo-field-host > input.form-control:focus,
    .eo-mobile-checkout .eo-field-host > select.form-control:focus,
    .eo-mobile-checkout .eo-field-host > select.custom-select:focus,
    .eo-mobile-checkout .eo-field-host > textarea.form-control:focus {
        outline: none;
        box-shadow: none;
    }
    .eo-mobile-checkout .eo-field-host:focus-within {
        border-width: 2px;
        border-color: var(--eo-blue);
        padding: 7px 15px 5px;
    }
    .eo-mobile-checkout .eo-field-host.eo-field-error {
        border-width: 2px;
        border-color: var(--eo-orange);
        padding: 7px 15px 5px;
    }

    /* Field-level validation errors on mobile shipping/review (same pattern
       as the sign-in gate above). Error label sits absolutely below the cell
       so the cell keeps a constant height. */
    .eo-mobile-checkout .eo-field-host > label.error {
        position: absolute;
        top: calc(100% + 4px);
        left: 4px;
        right: 4px;
        margin: 0;
        padding: 0;
        font-family: 'Archivo', sans-serif;
        font-size: 11px;
        font-weight: 500;
        line-height: 1.3;
        color: var(--eo-orange);
        text-transform: none;
        letter-spacing: 0;
        background: transparent;
        pointer-events: none;
        z-index: 5;
    }
    .eo-mobile-checkout .eo-field-host:has(> label.error) {
        margin-bottom: 28px;
        border-width: 2px;
        border-color: var(--eo-orange);
        padding: 7px 15px 5px;
    }
    .eo-mobile-checkout .eo-field-host:has(> input.is-invalid),
    .eo-mobile-checkout .eo-field-host:has(> select.is-invalid) {
        border-width: 2px;
        border-color: var(--eo-orange);
        padding: 7px 15px 5px;
    }

    /* Autofill override on mobile shipping/review (same pattern as sign-in
       above). Paint over Chrome's autofill background with the cell white. */
    .eo-mobile-checkout .eo-field-host > input:-webkit-autofill,
    .eo-mobile-checkout .eo-field-host > input:-webkit-autofill:hover,
    .eo-mobile-checkout .eo-field-host > input:-webkit-autofill:focus,
    .eo-mobile-checkout .eo-field-host > input:-webkit-autofill:active {
        -webkit-box-shadow: 0 0 0 1000px var(--eo-white) inset;
        box-shadow: 0 0 0 1000px var(--eo-white) inset;
        -webkit-text-fill-color: var(--eo-ink-200);
        caret-color: var(--eo-ink-200);
        border: 0;
        border-radius: 0;
        background: transparent;
        background-image: none;
        transition:
            background-color 9999s ease-in-out 0s,
            color 9999s ease-in-out 0s;
    }

    /* Buttons — mobile sticky bar, mobile shipping/review */
    .eo-mobile-checkout .eo-btn {
        border: 0;
        border-radius: var(--eo-r1);
        font-family: 'Archivo', sans-serif;
        font-weight: 700;
        font-size: 15px;
        padding: 14px 24px;
        min-height: 48px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        line-height: 1;
        text-decoration: none;
        transition: background 0.12s ease, color 0.12s ease;
    }
    .eo-mobile-checkout .eo-btn.primary {
        background: var(--eo-blue);
        color: #fff;
        letter-spacing: 0;
    }
    .eo-mobile-checkout .eo-btn.primary:hover,
    .eo-mobile-checkout .eo-btn.primary:focus {
        background: var(--eo-blue-hover);
        color: #fff;
    }
    .eo-mobile-checkout .eo-btn.primary:focus-visible {
        outline: 3px solid var(--eo-orange);
        outline-offset: 2px;
    }

    /* Form-loader / form-msg — same banner-style mobile treatment for
       shipping/review as the sign-in gate */
    .eo-mobile-checkout .form-loader {
        display: none;
    }
    .eo-mobile-checkout .form-state-loading .form-loader {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 16px;
    }
    .eo-mobile-checkout .form-msg:empty {
        display: none;
    }
    .eo-mobile-checkout .form-msg {
        margin: 0 16px 12px;
        padding: 12px 14px;
        border-radius: var(--eo-r1);
        background: #fff5f0;
        border: 1px solid var(--eo-orange);
        font-size: 13px;
        line-height: 1.4;
        color: var(--eo-ink-200);
    }

    .eo-mobile-checkout.eo-shipping {
        background: var(--eo-off-white);
        padding-bottom: 0;
    }

    /* Hide the existing centred header (the "1/2" + checkout-mamba block) */
    .eo-mobile-checkout.eo-shipping .eo-desktop-header {
        display: none;
    }

    /* Reveal mobile-only structural hooks */
    .eo-mobile-checkout.eo-shipping .eo-stepper-host {
        display: block;
        padding: 16px 16px 4px;
    }
    .eo-mobile-checkout.eo-shipping .eo-mobile-only {
        display: block;
    }

    /* Stepper bars */
    .eo-mobile-checkout .eo-stepper .bars {
        display: flex;
        gap: 6px;
    }
    .eo-mobile-checkout .eo-stepper .bar {
        flex: 1;
        height: 4px;
        background: rgba(26, 26, 26, 0.15);
        border-radius: 2px;
    }
    .eo-mobile-checkout .eo-stepper .bar.now {
        background: var(--eo-blue);
    }
    .eo-mobile-checkout .eo-stepper .bar.done {
        background: #000;
    }
    .eo-mobile-checkout .eo-stepper .meta {
        display: flex;
        justify-content: space-between;
        margin-top: 8px;
        font-family: 'Archivo', sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--eo-ink-200);
    }
    .eo-mobile-checkout .eo-stepper .meta .next {
        color: var(--eo-ink-300);
        font-weight: 500;
    }

    /* Title block on the shipping page */
    .eo-mobile-checkout.eo-shipping .eo-title-block {
        padding: 16px 16px 16px;
    }
    .eo-mobile-checkout.eo-shipping .eo-title {
        font-family: 'Archivo', sans-serif;
        font-weight: 900;
        font-size: 40px;
        line-height: 0.95;
        letter-spacing: -0.02em;
        text-transform: uppercase;
        color: #000;
        margin: 0;
    }

    /* Section header — "Address" */
    .eo-mobile-checkout .eo-section-h {
        font-family: 'Archivo', sans-serif;
        font-weight: 900;
        font-size: 13px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #000;
        padding: 20px 16px 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
    }
    .eo-mobile-checkout .eo-section-h .num {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: #000;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
    }
    .eo-mobile-checkout .eo-section-h.done .num {
        background: var(--eo-blue);
    }

    /* Two-up field rows (City/State, Postcode/Phone) */
    .eo-mobile-checkout.eo-shipping .eo-row2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 0 16px 12px;
    }
    .eo-mobile-checkout.eo-shipping .eo-row2 > .eo-field-host {
        margin: 0;
    }

    /* Select-style field cell — chevron decoration */
    .eo-mobile-checkout .eo-field-host--select {
        position: relative;
    }
    .eo-mobile-checkout .eo-field-host--select::after {
        content: "";
        position: absolute;
        right: 18px;
        top: 50%;
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--eo-ink-200);
        border-bottom: 2px solid var(--eo-ink-200);
        transform: translateY(-70%) rotate(45deg);
        pointer-events: none;
    }
    .eo-mobile-checkout .eo-field-host > select.custom-select,
    .eo-mobile-checkout .eo-field-host > select.form-control {
        appearance: none;
        -webkit-appearance: none;
        background-image: none;
        padding-right: 28px;
    }

    /* Help paragraph inside the form */
    .eo-mobile-checkout.eo-shipping .eo-help {
        font-size: 12px;
        color: var(--eo-ink-300);
        line-height: 1.5;
        padding: 0 16px 8px;
        margin: 0;
    }

    /* Hide the existing right-column summary on mobile (it gets re-shown as a
       fixed-position panel only when the sticky toggle expands it). */
    .eo-mobile-checkout.eo-shipping .eo-summary-host,
    .eo-mobile-checkout.eo-shipping .eo-summary-col > .eo-desktop-submit,
    .eo-mobile-checkout.eo-shipping .eo-form-col > #shipping-container .row > .col-6.d-none.d-lg-inline-block {
        display: none;
    }

    /* Hide the in-fieldset desktop heading (the existing <h4>) on mobile */
    .eo-mobile-checkout.eo-shipping fieldset > h4.eo-desktop-header {
        display: none;
    }

    /* Sticky bottom bar */
    .eo-mobile-checkout.eo-shipping .eo-pad-bottom {
        display: block;
        height: calc(96px + env(safe-area-inset-bottom));
    }
    .eo-mobile-checkout.eo-shipping .eo-sticky-host {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
    }
    .eo-mobile-checkout .eo-sticky {
        background: var(--eo-white);
        border-top: 1px solid var(--eo-ink-200);
        padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 12px;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
    }
    .eo-mobile-checkout .eo-sticky .left {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    .eo-mobile-checkout .eo-sticky .total-label {
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--eo-ink-300);
        line-height: 1.2;
    }
    .eo-mobile-checkout .eo-sticky .total-amt {
        font-family: 'Archivo', sans-serif;
        font-weight: 900;
        font-size: 20px;
        line-height: 1;
        color: #000;
    }
    .eo-mobile-checkout .eo-sticky .toggle {
        font-size: 12px;
        font-weight: 500;
        color: var(--eo-ink-200);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        text-align: left;
        margin-top: 2px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
        line-height: 1.2;
    }
    .eo-mobile-checkout .eo-sticky .toggle svg {
        width: 10px;
        height: 10px;
        transition: transform 0.18s ease;
    }
    .eo-mobile-checkout .eo-sticky .toggle .toggle-label-close {
        display: none;
    }
    .eo-mobile-checkout .eo-sticky .toggle .toggle-label-open {
        display: inline;
    }
    .eo-mobile-checkout .eo-sticky .eo-btn {
        padding: 14px 24px;
        min-height: 48px;
    }

    /* Anchor-qualified so the component outranks the page-level link rules in
       styles.css:

           .section a:not(.btn)           { text-decoration: underline }  (0,2,1)
           .section.light-box a:not(.btn) { color: #000 }                 (0,3,1)

       Both beat the component's own .eo-mobile-checkout .eo-btn (0,2,0) and
       .eo-btn.primary (0,3,0) by a single element selector, so a sticky
       Checkout rendered as an <a> came out black and underlined.

       Only /cart hits this: shipping and review submit their forms, so their
       sticky CTA is a <button>, which a:not(.btn) cannot match. Cart navigates
       to the next step instead, so it is correctly an <a> — and an <a> without
       Bootstrap's .btn, since that class would drag in its own padding,
       border, font-size and uppercasing and fight .eo-btn.

       Scoped through .eo-sticky so both selectors below strictly outrank the
       styles.css pair on specificity rather than relying on load order.
       The review page's .eo-sticky-back anchor already wins on its own
       (0,4,0)/(0,4,0) and is deliberately left alone. */
    .eo-mobile-checkout .eo-sticky a.eo-btn {
        text-decoration: none;
    }
    .eo-mobile-checkout .eo-sticky a.eo-btn.primary,
    .eo-mobile-checkout .eo-sticky a.eo-btn.primary:hover,
    .eo-mobile-checkout .eo-sticky a.eo-btn.primary:focus {
        color: #fff;
        text-decoration: none;
    }

    /* Sticky → expanded order summary panel
       When the user taps "View order summary", JS adds .summary-open to the
       page wrapper. The existing .checkout-summary block (hidden by default
       on mobile) is re-shown as a fixed-position panel above the sticky bar. */
    .eo-mobile-checkout.eo-shipping.summary-open .eo-summary-host {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: calc(96px + env(safe-area-inset-bottom));
        max-height: 60vh;
        overflow-y: auto;
        background: var(--eo-white);
        border-top: 1px solid var(--eo-ink-200);
        padding: 16px 16px 8px;
        z-index: 89;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
    }
    .eo-mobile-checkout.eo-shipping.summary-open .eo-sticky .toggle svg {
        transform: rotate(180deg);
    }
    .eo-mobile-checkout.eo-shipping.summary-open .eo-sticky .toggle .toggle-label-open {
        display: none;
    }
    .eo-mobile-checkout.eo-shipping.summary-open .eo-sticky .toggle .toggle-label-close {
        display: inline;
    }

    /* Backdrop covering the form area when the summary panel is open
       (so the page reads as locked-focus on the panel). */
    .eo-mobile-checkout.eo-shipping.summary-open::before {
        content: "";
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: calc(96px + env(safe-area-inset-bottom));
        background: rgba(0, 0, 0, 0.32);
        z-index: 88;
    }

    /* ----------------------------------------------------------------------
       Review & pay (Step 2/2) — mobile only
       ---------------------------------------------------------------------- */

    .eo-mobile-checkout.eo-review {
        background: var(--eo-off-white);
    }

    /* Hide the existing centred header on mobile */
    .eo-mobile-checkout.eo-review .eo-desktop-header {
        display: none;
    }

    /* Hide the desktop "your details" fieldset (replaced by mobile cards) */
    .eo-mobile-checkout.eo-review .eo-desktop-only {
        display: none;
    }

    /* Title block */
    .eo-mobile-checkout.eo-review .eo-title-block {
        padding: 16px 16px 16px;
    }
    .eo-mobile-checkout.eo-review .eo-title {
        font-family: 'Archivo', sans-serif;
        font-weight: 900;
        font-size: 40px;
        line-height: 0.95;
        letter-spacing: -0.02em;
        text-transform: uppercase;
        color: #000;
        margin: 0;
    }

    /* Reorder columns: summary on top, details below */
    .eo-mobile-checkout.eo-review .row.prod-form {
        display: flex;
        flex-direction: column;
        margin-left: 0;
        margin-right: 0;
    }
    .eo-mobile-checkout.eo-review .eo-summary-col {
        order: -1;
        padding-left: 0;
        padding-right: 0;
    }
    .eo-mobile-checkout.eo-review .eo-form-col {
        padding-left: 0;
        padding-right: 0;
    }

    /* Mobile accordion head — sits above the existing .checkout-summary */
    .eo-mobile-checkout.eo-review .eo-acc-head {
        margin: 8px 16px 0;
        background: var(--eo-white);
        border: 1px solid var(--eo-ink-200);
        border-radius: var(--eo-r1);
        padding: 14px 16px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        width: calc(100% - 32px);
        text-align: left;
        font-family: inherit;
        color: var(--eo-ink-200);
        transition: border-radius 0.2s ease;
    }
    .eo-mobile-checkout.eo-review .eo-acc-head .l {
        font-family: 'Archivo', sans-serif;
        font-weight: 700;
        font-size: 11px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--eo-ink-300);
    }
    .eo-mobile-checkout.eo-review .eo-acc-head .r {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .eo-mobile-checkout.eo-review .eo-acc-head .amt {
        font-family: 'Archivo', sans-serif;
        font-weight: 900;
        font-size: 18px;
        color: #000;
        line-height: 1;
    }
    .eo-mobile-checkout.eo-review .eo-acc-head .chev {
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--eo-ink-200);
        border-bottom: 2px solid var(--eo-ink-200);
        transform: rotate(45deg);
        margin-bottom: 3px;
        transition: transform 0.18s ease;
    }
    .eo-mobile-checkout.eo-review[aria-expanded="false"] .eo-acc-head .chev,
    .eo-mobile-checkout.eo-review.summary-collapsed .eo-acc-head .chev {
        transform: rotate(-135deg);
        margin-top: 4px;
        margin-bottom: 0;
    }

    /* Pair the accordion head visually with the summary body below it */
    .eo-mobile-checkout.eo-review .eo-acc-head + .checkout-summary {
        margin: 0 16px 16px;
        background: var(--eo-white);
        border: 1px solid var(--eo-ink-200);
        border-top: 0;
        border-radius: 0 0 var(--eo-r1) var(--eo-r1);
        padding: 4px 16px 12px;
    }
    .eo-mobile-checkout.eo-review .eo-acc-head:not([aria-expanded="false"]) {
        border-radius: var(--eo-r1) var(--eo-r1) 0 0;
        border-bottom: 0;
    }
    .eo-mobile-checkout.eo-review.summary-collapsed .eo-acc-head + .checkout-summary {
        display: none;
    }

    /* Reset desktop right-column summary internals so they read as line items
       inside the mobile accordion. The existing .prod-buy / .prod-buy-entry
       markup is preserved (so #promocode-value / #promocode-apply / #promo-box
       / #remove-promocode / #discount-sum / #total-sum keep working with the
       existing AJAX handler in Checkout.php), but the layout is restyled to
       match the mobile aesthetic. */
    .eo-mobile-checkout.eo-review .checkout-summary .prod-buy {
        margin: 0;
    }
    .eo-mobile-checkout.eo-review .checkout-summary .prod-buy-entry {
        padding: 8px 0;
        border-bottom: 1px solid rgba(26, 26, 26, 0.08);
    }
    .eo-mobile-checkout.eo-review .checkout-summary .prod-buy-entry:last-child,
    .eo-mobile-checkout.eo-review .checkout-summary .prod-buy-entry.total {
        border-bottom: 0;
    }
    .eo-mobile-checkout.eo-review .checkout-summary .prod-buy-entry h5 {
        font-family: 'Archivo', sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
        margin: 0;
        color: var(--eo-ink-200);
    }
    .eo-mobile-checkout.eo-review .checkout-summary .prod-buy-entry h5 strong {
        font-weight: 700;
        color: #000;
    }
    .eo-mobile-checkout.eo-review .checkout-summary .prod-buy-entry small {
        font-size: 12px;
        color: var(--eo-ink-300);
    }
    .eo-mobile-checkout.eo-review .checkout-summary .prod-buy-entry .col-4 {
        font-family: 'Archivo', sans-serif;
        font-weight: 700;
        font-size: 14px;
        color: #000;
        white-space: nowrap;
    }
    .eo-mobile-checkout.eo-review .checkout-summary > hr {
        border: 0;
        border-top: 1px solid var(--eo-ink-200);
        margin: 12px 0 4px;
    }
    .eo-mobile-checkout.eo-review .checkout-summary .prod-buy-entry.total h5 {
        font-family: 'Archivo', sans-serif;
        font-weight: 900;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }
    .eo-mobile-checkout.eo-review .checkout-summary .prod-buy-entry.total .col-4 {
        font-family: 'Archivo', sans-serif;
        font-weight: 900;
        font-size: 18px;
    }

    /* Promo input row inside the accordion body. Bootstrap's .input-group
       defaults to flex-wrap: wrap, so without explicit overrides the Apply
       button gets pushed to its own line below the input. flex-wrap: nowrap
       pins them to one row; min-width: 0 on the input lets it shrink below
       its placeholder length so the button has guaranteed room. */
    .eo-mobile-checkout.eo-review .checkout-summary #promo-box {
        margin: 12px 0 4px;
    }
    .eo-mobile-checkout.eo-review .checkout-summary #promo-box .input-group {
        margin: 0;
        gap: 10px;
        align-items: stretch;
        display: flex;
        flex-wrap: nowrap;
    }
    .eo-mobile-checkout.eo-review .checkout-summary #promo-box .input-group input.form-control {
        flex: 1 1 0;
        min-width: 0;
        background: var(--eo-white);
        border: 1px solid var(--eo-ink-200);
        border-radius: var(--eo-r1);
        padding: 12px 14px;
        font-size: 14px;
        height: auto;
        color: var(--eo-ink-200);
    }
    .eo-mobile-checkout.eo-review .checkout-summary #promo-box .input-group input.form-control::placeholder {
        color: var(--eo-ink-300);
    }
    .eo-mobile-checkout.eo-review .checkout-summary #promo-box .input-group-append {
        margin: 0;
        flex: 0 0 auto;
        display: flex;
    }
    .eo-mobile-checkout.eo-review .checkout-summary #promo-box .input-group-append button#promocode-apply.btn {
        background: transparent;
        color: #000;
        border: 2px solid #000;
        border-radius: var(--eo-r1);
        font-family: 'Archivo', sans-serif;
        font-weight: 700;
        font-size: 13px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        padding: 0 16px;
        min-height: 44px;
        white-space: nowrap;
    }
    .eo-mobile-checkout.eo-review .checkout-summary #remove-promocode {
        font-size: 12px;
        color: var(--eo-ink-300);
        padding: 4px 0;
    }

    /* Fineprint copy */
    .eo-mobile-checkout.eo-review .checkout-summary .text {
        margin: 12px 0 0;
        font-size: 12px;
        color: var(--eo-ink-300);
        line-height: 1.5;
    }
    .eo-mobile-checkout.eo-review .checkout-summary .text p {
        margin: 0 0 8px;
    }
    .eo-mobile-checkout.eo-review .checkout-summary .text p:last-child {
        margin: 0;
    }
    .eo-mobile-checkout.eo-review .checkout-summary .text h5 {
        font-family: 'Archivo', sans-serif;
        font-weight: 900;
        font-size: 13px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #000;
        margin: 12px 0 6px;
    }

    /* Section header — numbered/checked rows below the accordion */
    .eo-mobile-checkout.eo-review .eo-section-h {
        font-family: 'Archivo', sans-serif;
        font-weight: 900;
        font-size: 13px;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: #000;
        padding: 16px 16px 8px;
        display: flex;
        align-items: center;
        gap: 8px;
        margin: 0;
    }
    .eo-mobile-checkout.eo-review .eo-section-h .num {
        width: 22px;
        height: 22px;
        min-width: 22px;
        border-radius: 50%;
        background: var(--eo-ink-200);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 11px;
        font-weight: 700;
    }
    .eo-mobile-checkout.eo-review .eo-section-h.done .num {
        background: var(--eo-blue);
    }
    .eo-mobile-checkout.eo-review .eo-section-h.done .num svg {
        width: 11px;
        height: 11px;
        color: #fff;
    }

    /* Detail card (Ship to / Contact) */
    .eo-mobile-checkout.eo-review .eo-detail {
        margin: 0 16px 8px;
        background: var(--eo-white);
        border: 1px solid var(--eo-ink-200);
        border-radius: var(--eo-r1);
        padding: 14px 16px;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
    }
    .eo-mobile-checkout.eo-review .eo-detail .l {
        font-size: 13px;
        line-height: 1.5;
        flex: 1 1 auto;
        min-width: 0;
    }
    .eo-mobile-checkout.eo-review .eo-detail .l .name {
        font-weight: 700;
        font-size: 14px;
        color: #000;
    }
    .eo-mobile-checkout.eo-review .eo-detail .l .body {
        margin-top: 2px;
        color: var(--eo-ink-200);
    }
    .eo-mobile-checkout.eo-review .eo-detail .l .body.muted {
        color: var(--eo-ink-300);
        font-size: 12px;
    }
    .eo-mobile-checkout.eo-review .eo-detail .edit {
        font-family: 'Archivo', sans-serif;
        font-weight: 700;
        font-size: 12px;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--eo-blue);
        text-decoration: none;
        white-space: nowrap;
        flex: none;
    }
    .eo-mobile-checkout.eo-review .eo-detail .edit:hover {
        text-decoration: underline;
    }

    /* Stripe handoff card */
    .eo-mobile-checkout.eo-review .eo-stripe-note {
        margin: 0 16px 16px;
        background: var(--eo-white);
        border: 1px solid rgba(26, 26, 26, 0.15);
        border-radius: var(--eo-r1);
        padding: 14px 16px;
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .eo-mobile-checkout.eo-review .eo-stripe-note .icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 50%;
        background: var(--eo-off-white);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #000;
    }
    .eo-mobile-checkout.eo-review .eo-stripe-note .icon svg {
        width: 18px;
        height: 18px;
    }
    .eo-mobile-checkout.eo-review .eo-stripe-note .body {
        font-size: 13px;
        line-height: 1.4;
        color: var(--eo-ink-200);
    }
    .eo-mobile-checkout.eo-review .eo-stripe-note .body b {
        font-weight: 700;
        color: #000;
    }
    .eo-mobile-checkout.eo-review .eo-stripe-note .body .meta {
        font-size: 11px;
        color: var(--eo-ink-300);
        text-transform: uppercase;
        letter-spacing: 0.06em;
        font-weight: 700;
        margin-top: 2px;
    }

    /* Hide the existing desktop submit row (sticky bar replaces it) */
    .eo-mobile-checkout.eo-review .eo-desktop-submit {
        display: none;
    }

    /* Sticky bottom bar */
    .eo-mobile-checkout.eo-review .eo-pad-bottom {
        display: block;
        height: calc(96px + env(safe-area-inset-bottom));
    }
    .eo-mobile-checkout.eo-review .eo-sticky-host {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
    }
    .eo-mobile-checkout.eo-review .eo-sticky .toggle.eo-sticky-back {
        text-decoration: none;
        color: var(--eo-ink-300);
        font-weight: 500;
    }
    .eo-mobile-checkout.eo-review .eo-sticky .toggle.eo-sticky-back:hover {
        color: var(--eo-blue);
    }

    /* Hide the inline "back to shipping" anchor on mobile (sticky bar provides it) */
    .eo-mobile-checkout.eo-review .row.d-none.d-lg-flex {
        display: none !important;
    }

    /* ======================================================================
       5 · Cart (Step 0) — sticky checkout bar
       ----------------------------------------------------------------------
       /cart was the one step of the funnel without a sticky bar: on a phone
       the Checkout button sat below the rows and the membership copy, off
       screen. Reuses the .eo-sticky component above unchanged, minus the
       "View order summary" toggle — cart needs no summary panel, its items
       are the page. Pure CSS; no JS hooks in this markup.

       Note on breakpoint: this is 767px to stay in step with the rest of the
       flow, but .cart-list in styles.css doesn't switch from stacked blocks
       to a table until 992px. So 768–991px keeps the stacked cart with its
       inline button and no sticky bar — acceptable because that range has
       the vertical room the bar exists to buy back.
       ====================================================================== */
    .eo-mobile-checkout.eo-cart .eo-pad-bottom {
        display: block;
        height: calc(96px + env(safe-area-inset-bottom));
    }
    .eo-mobile-checkout.eo-cart .eo-sticky-host {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 90;
    }

    /* ----------------------------------------------------------------------
       Cookie banner vs sticky bar (applies to ALL THREE funnel steps).
       #cookie-consent is position:fixed, bottom:16px, z-index:99 — above every
       .eo-sticky-host (z-index:90, bottom:0) and directly over it, so the
       primary CTA is unreachable until the banner is dismissed. Lift the
       banner clear of the 96px bar. .cc-above-sticky is set in
       partials/footer.php on the cart/checkout controllers only.

       This was already live on shipping and review before /cart gained a bar;
       fixing it here fixes all three at once.
       ---------------------------------------------------------------------- */
    #cookie-consent.cc-above-sticky {
        bottom: calc(112px + env(safe-area-inset-bottom));
    }

    /* One Checkout per screen: the sticky bar replaces the tfoot button, and
       "back to selection" takes the width it frees up. */
    .eo-mobile-checkout.eo-cart .cart-list tfoot .eo-inline-checkout {
        display: none;
    }
    .eo-mobile-checkout.eo-cart .cart-list tfoot .col-6.text-left {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Hide the review page's mobile-only DOM hooks at desktop. Wrapped in a
   desktop-only media query (instead of an unscoped `display: none`) because
   the mobile reveal rules live inside an `@media (max-width: 767px)` block
   ABOVE this point in the file — an unscoped `display: none` here would
   come later in source order and beat the mobile reveals on equal
   specificity, leaving everything hidden at every viewport. */
@media (min-width: 768px) {
    .eo-mobile-checkout.eo-review .eo-mobile-only,
    .eo-mobile-checkout.eo-review .eo-stepper-host,
    .eo-mobile-checkout.eo-review .eo-sticky-host,
    .eo-mobile-checkout.eo-review .eo-pad-bottom,
    .eo-mobile-checkout.eo-review .eo-acc-head {
        display: none;
    }
}

/* ==========================================================================
   3 · Welcome state — applies at all viewport widths
   ========================================================================== */

.eo-welcome-screen {
    background: var(--eo-off-white);
    min-height: 60vh;
    padding: 8px 0 32px;
}

.eo-welcome-screen .eo-welcome {
    padding: 32px 16px 0;
    max-width: 520px;
    margin: 0 auto;
}

.eo-welcome-screen .eo-eyebrow {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--eo-ink-300);
    margin: 0 0 8px;
}

.eo-welcome-screen .eo-welcome .greet {
    font-family: 'Archivo', sans-serif;
    font-weight: 900;
    font-size: 36px;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    color: #000;
    margin: 0 0 12px;
}

.eo-welcome-screen .eo-welcome .body {
    font-size: 15px;
    color: var(--eo-ink-200);
    margin: 0 0 6px;
    line-height: 1.5;
}

.eo-welcome-screen .eo-welcome .body b {
    font-weight: 700;
}

.eo-welcome-screen .eo-welcome .body.muted {
    color: var(--eo-ink-300);
}

.eo-welcome-screen .eo-loading {
    margin: 24px 16px 0;
    height: 4px;
    border-radius: 2px;
    background: rgba(26, 26, 26, 0.08);
    overflow: hidden;
    position: relative;
    max-width: 520px;
}

@media (min-width: 768px) {
    .eo-welcome-screen .eo-loading {
        margin-left: auto;
        margin-right: auto;
    }
}

.eo-welcome-screen .eo-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--eo-blue) 50%,
        transparent 100%
    );
    animation: eo-welcome-pulse 1.2s linear infinite;
}

@keyframes eo-welcome-pulse {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(350%);
    }
}

.eo-welcome-screen .eo-flash-meta {
    padding: 12px 16px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--eo-ink-300);
    font-weight: 700;
    text-align: center;
}

.eo-welcome-screen .eo-tertiary-row {
    text-align: center;
    padding: 24px 16px 24px;
}

.eo-welcome-screen .eo-tertiary {
    color: var(--eo-ink-300);
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
}

.eo-welcome-screen .eo-tertiary:hover {
    color: var(--eo-blue);
}