/* =========================================================
   VAERO SYSTEM APP
   ENGINE SERVICE + PAYMENT CORE
   FINAL CONSOLIDATED EDITION

   NOTE
   ---------------------------------------------------------
   Legacy class names such as:
   .vaero-cart-items
   .vaero-cart-item

   are preserved for JS / DOM compatibility.

   They represent transaction / payment rows,
   NOT a physical shopping cart.
========================================================= */


/* =========================================================
   01. TOKENS
========================================================= */

.vaero-commerce-app{
    --vaero-commerce-text:
        #f6f1e8;

    --vaero-commerce-muted:
        rgba(241,238,232,.5);

    --vaero-commerce-dim:
        rgba(241,238,232,.32);

    --vaero-commerce-gold:
        #d9b77f;

    --vaero-commerce-gold-bright:
        #edcf9c;

    --vaero-commerce-blue:
        #72b7f2;

    --vaero-commerce-green:
        #6ee7a8;

    --vaero-commerce-warning:
        #dfb56e;

    --vaero-commerce-danger:
        #df8589;

    --vaero-commerce-line:
        rgba(255,255,255,.065);

    --vaero-commerce-line-strong:
        rgba(220,184,125,.2);

    --vaero-commerce-ease:
        cubic-bezier(.22,.78,.2,1);
}


/* =========================================================
   02. ROOT
========================================================= */

.vaero-commerce-app{
    position:relative;

    width:100%;
    max-width:1040px;

    height:100%;

    min-width:0;
    min-height:0;

    margin:0 auto;

    padding:
        4px
        4px
        74px;

    display:grid;

    grid-template-rows:
        auto
        minmax(0,1fr);

    gap:12px;

    overflow:hidden;

    color:
        var(--vaero-commerce-text);

    isolation:isolate;
}


/* =========================================================
   03. AMBIENT BACKGROUND
========================================================= */

.vaero-commerce-app::before{
    content:"";

    position:absolute;

    inset:-60px;

    z-index:-2;

    pointer-events:none;

    background:
        radial-gradient(
            circle at 86% 8%,
            rgba(79,148,202,.055),
            transparent 27%
        ),

        radial-gradient(
            circle at 10% 38%,
            rgba(217,183,127,.025),
            transparent 30%
        );
}

.vaero-commerce-app::after{
    content:"";

    position:absolute;

    top:-180px;
    right:8%;

    z-index:-1;

    width:420px;
    height:420px;

    pointer-events:none;

    border-radius:50%;

    background:
        rgba(78,146,201,.022);

    filter:blur(72px);
}


/* =========================================================
   04. HEADER
========================================================= */

.vaero-commerce-header{
    position:relative;

    z-index:2;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:14px;

    min-width:0;

    margin:0;

    padding:
        0
        2px;

    flex:
        0
        0
        auto;
}

.vaero-commerce-header > div:first-child{
    min-width:0;

    margin-right:auto;
}


/* =========================================================
   05. LABEL LANGUAGE
========================================================= */

.vaero-commerce-eyebrow,
.vaero-product-type,
.vaero-commerce-section-head > span{
    display:block;

    color:
        var(--vaero-commerce-gold);

    font-size:8px;
    font-weight:750;

    line-height:1;

    letter-spacing:.17em;

    text-transform:uppercase;
}


/* =========================================================
   06. HEADER TYPE
========================================================= */

.vaero-commerce-header h1{
    margin:
        6px
        0
        4px;

    overflow:hidden;

    color:
        #f7f2e9;

    font-size:
        clamp(
            26px,
            3vw,
            34px
        );

    font-weight:510;

    line-height:1;

    letter-spacing:-.038em;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.vaero-commerce-header p{
    max-width:520px;

    margin:0;

    overflow:hidden;

    color:
        var(--vaero-commerce-muted);

    font-size:10px;

    line-height:1.4;

    text-overflow:ellipsis;
    white-space:nowrap;
}


/* =========================================================
   07. ACCOUNT / ID BUTTON
========================================================= */

.vaero-commerce-id-btn{
    display:flex;

    align-items:center;
    justify-content:center;

    gap:8px;

    flex:
        0
        0
        auto;

    min-height:34px;

    padding:
        0
        12px;

    border:
        1px solid
        rgba(220,184,125,.16);

    border-radius:999px;

    outline:none;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.027),
            rgba(255,255,255,.012)
        );

    color:#f4ecdf;

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.018);

    font:inherit;

    font-size:9px;
    font-weight:620;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s
        var(--vaero-commerce-ease);
}

.vaero-commerce-id-btn:hover{
    border-color:
        rgba(220,184,125,.28);

    background:
        rgba(220,184,125,.045);
}

.vaero-commerce-id-btn:active{
    transform:
        scale(.97);
}

.vaero-commerce-id-btn:focus-visible{
    outline:
        1px solid
        rgba(220,184,125,.5);

    outline-offset:2px;
}

.vaero-commerce-id-btn span{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-width:18px;
    height:18px;

    padding:
        0
        5px;

    border-radius:999px;

    background:
        rgba(217,179,115,.1);

    color:#e8c58e;

    font-size:8px;
}


/* =========================================================
   08. MAIN SYSTEM AREA
========================================================= */

.vaero-commerce-section{
    min-width:0;
    min-height:0;

    margin:0;

    display:flex;

    flex-direction:column;

    overflow:hidden;
}


/* =========================================================
   09. SECTION HEAD
========================================================= */

.vaero-commerce-section-head{
    flex:
        0
        0
        auto;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:10px;

    min-width:0;

    margin-bottom:7px;
}

.vaero-commerce-section-head button{
    flex:
        0
        0
        auto;

    padding:0;

    border:0;

    outline:none;

    background:none;

    color:#e5c28c;

    font:inherit;

    font-size:9px;
    font-weight:620;

    cursor:pointer;

    transition:
        color .18s ease,
        opacity .18s ease;
}

.vaero-commerce-section-head button:hover{
    color:
        var(--vaero-commerce-gold-bright);
}


/* =========================================================
   10. CORE STATUS
========================================================= */

.vaero-core-status{
    position:relative;

    flex:
        0
        0
        auto;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    align-items:center;

    gap:12px;

    padding:
        13px
        15px;

    margin-bottom:9px;

    overflow:hidden;

    border:
        1px solid
        var(--vaero-commerce-line);

    border-radius:16px;

    background:
        radial-gradient(
            circle at 92% 20%,
            rgba(91,157,205,.08),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.027),
            rgba(255,255,255,.008)
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.015);
}

.vaero-core-status::before{
    content:"";

    position:absolute;

    top:0;
    left:16%;

    width:58%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.055),
            transparent
        );

    pointer-events:none;
}

.vaero-core-status > div{
    min-width:0;
}

.vaero-core-status strong{
    display:block;

    overflow:hidden;

    color:#f7f2e9;

    font-size:12px;
    font-weight:610;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.vaero-core-status small{
    display:block;

    margin-top:3px;

    overflow:hidden;

    color:
        var(--vaero-commerce-dim);

    font-size:8px;

    text-overflow:ellipsis;
    white-space:nowrap;
}


/* =========================================================
   11. PAYMENT INTENT
========================================================= */

.vaero-payment-intent{
    position:relative;

    flex:
        0
        0
        auto;

    padding:
        13px
        15px;

    margin-bottom:9px;

    overflow:hidden;

    border:
        1px solid
        rgba(224,188,125,.12);

    border-radius:16px;

    background:
        radial-gradient(
            circle at 90% 0%,
            rgba(224,188,125,.035),
            transparent 34%
        ),

        linear-gradient(
            145deg,
            rgba(224,188,125,.035),
            rgba(255,255,255,.008)
        );
}

.vaero-payment-intent strong{
    display:block;

    color:#f6f1e8;

    font-size:12px;
    font-weight:610;
}

.vaero-payment-intent small{
    display:block;

    margin-top:3px;

    color:
        var(--vaero-commerce-muted);

    font-size:8px;

    line-height:1.35;
}


/* =========================================================
   12. PAYMENT META
========================================================= */

.vaero-payment-meta{
    display:grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0,1fr)
        );

    gap:6px;

    margin-top:9px;
}

.vaero-payment-meta > div{
    min-width:0;

    padding:
        8px
        9px;

    border:
        1px solid
        rgba(255,255,255,.05);

    border-radius:10px;

    background:
        rgba(255,255,255,.018);

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.01);
}

.vaero-payment-meta span{
    display:block;

    overflow:hidden;

    color:
        var(--vaero-commerce-dim);

    font-size:6px;

    line-height:1.1;

    letter-spacing:.08em;

    text-overflow:ellipsis;
    white-space:nowrap;

    text-transform:uppercase;
}

.vaero-payment-meta strong{
    display:block;

    margin-top:3px;

    overflow:hidden;

    color:#f5efe5;

    font-size:9px;
    font-weight:610;

    text-overflow:ellipsis;
    white-space:nowrap;
}


/* =========================================================
   13. TRANSACTION LIST
   Legacy .vaero-cart-* names preserved
========================================================= */

.vaero-cart-items{
    flex:
        1
        1
        auto;

    min-width:0;
    min-height:0;

    display:grid;

    grid-auto-rows:
        minmax(
            54px,
            auto
        );

    align-content:start;

    gap:6px;

    margin:0;

    padding-right:2px;

    overflow-x:hidden;
    overflow-y:auto;

    overscroll-behavior-y:contain;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;
}

.vaero-cart-items::-webkit-scrollbar{
    display:none;
}


/* =========================================================
   14. TRANSACTION ROW
========================================================= */

.vaero-cart-item{
    position:relative;

    min-width:0;
    min-height:54px;

    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:
        9px
        11px;

    overflow:hidden;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius:13px;

    background:
        radial-gradient(
            circle at 92% 20%,
            rgba(77,128,165,.07),
            transparent 28%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.027),
            rgba(255,255,255,.008)
        );

    box-shadow:
        inset
        0
        1px
        0
        rgba(255,255,255,.012);

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s
        var(--vaero-commerce-ease);
}

.vaero-cart-item:hover{
    border-color:
        rgba(220,184,125,.13);

    background:
        radial-gradient(
            circle at 92% 20%,
            rgba(77,128,165,.09),
            transparent 30%
        ),

        linear-gradient(
            145deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.011)
        );
}


/* =========================================================
   15. TRANSACTION COPY
========================================================= */

.vaero-cart-item-copy{
    min-width:0;

    display:flex;

    flex:
        1
        1
        auto;

    flex-direction:column;

    align-items:flex-start;

    gap:2px;
}

.vaero-cart-item-copy strong{
    max-width:100%;

    overflow:hidden;

    color:#f7f1e7;

    font-size:10px;
    font-weight:560;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.vaero-cart-item-copy small{
    max-width:100%;

    overflow:hidden;

    color:
        var(--vaero-commerce-dim);

    font-size:7px;

    line-height:1.3;

    text-overflow:ellipsis;
    white-space:nowrap;
}

.vaero-product-type{
    font-size:6px;

    color:
        #d6b17b;
}


/* =========================================================
   16. PAYMENT METHODS
========================================================= */

.vaero-payment-methods{
    flex:
        0
        0
        auto;

    margin:
        9px
        0
        0;

    padding:
        11px
        13px;

    border:
        1px solid
        rgba(255,255,255,.055);

    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.021),
            rgba(255,255,255,.008)
        );
}

.vaero-payment-methods strong{
    color:
        var(--vaero-commerce-text);

    font-size:10px;

    font-weight:610;
}

.vaero-payment-methods small{
    color:
        var(--vaero-commerce-dim);

    font-size:7px;

    line-height:1.4;
}


/* =========================================================
   17. ACTIONS
========================================================= */

.vaero-commerce-actions{
    flex:
        0
        0
        auto;

    display:flex;

    align-items:center;

    gap:7px;

    margin-top:9px;
}

.vaero-commerce-actions button{
    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:32px;

    padding:
        0
        11px;

    border:
        1px solid
        rgba(224,188,125,.14);

    border-radius:999px;

    outline:none;

    background:
        rgba(255,255,255,.022);

    color:#e5c28c;

    font:inherit;

    font-size:8px;
    font-weight:650;

    white-space:nowrap;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        transform .18s
        var(--vaero-commerce-ease),

        border-color .18s ease,

        background .18s ease,

        color .18s ease;
}

.vaero-commerce-actions button:first-child{
    border-color:
        rgba(239,214,169,.32);

    background:
        linear-gradient(
            135deg,
            #d2ac6f,
            #ead09b
        );

    color:#10151b;
}

.vaero-commerce-actions button:hover{
    border-color:
        rgba(224,188,125,.3);
}

.vaero-commerce-actions button:active{
    transform:
        scale(.97);
}

.vaero-commerce-actions button.is-active{
    border-color:
        rgba(224,188,125,.48);

    background:
        rgba(224,188,125,.1);

    color:#f0d39d;
}

.vaero-commerce-actions button:focus-visible{
    outline:
        1px solid
        rgba(224,188,125,.48);

    outline-offset:2px;
}

.vaero-commerce-actions button:disabled{
    opacity:.4;

    cursor:not-allowed;

    pointer-events:none;
}


/* =========================================================
   18. PAYMENT STATUS
========================================================= */

.vaero-payment-status{
    flex:
        0
        0
        auto;

    display:flex;

    flex-direction:column;

    gap:3px;

    margin:
        9px
        0
        0;

    padding:
        10px
        12px;

    border:
        1px solid
        rgba(224,188,125,.14);

    border-radius:13px;

    background:
        rgba(224,188,125,.035);
}

.vaero-payment-status strong{
    color:#f6f1e8;

    font-size:10px;

    font-weight:610;
}

.vaero-payment-status small{
    color:
        var(--vaero-commerce-dim);

    font-size:7px;

    line-height:1.4;
}


/* =========================================================
   19. EMPTY STATE
========================================================= */

.vaero-payment-empty{
    flex:
        1
        1
        auto;

    min-width:0;
    min-height:0;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    padding:20px;

    border:
        1px solid
        rgba(255,255,255,.05);

    border-radius:16px;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(217,183,127,.025),
            transparent 35%
        ),

        rgba(255,255,255,.012);

    text-align:center;
}

.vaero-payment-empty strong{
    color:#f5efe6;

    font-size:12px;

    font-weight:560;
}

.vaero-payment-empty span,
.vaero-payment-empty small{
    max-width:340px;

    margin-top:4px;

    color:
        var(--vaero-commerce-dim);

    font-size:8px;

    line-height:1.4;
}

/* =========================================================
   20. TABLET
========================================================= */

@media (max-width:820px){

    .vaero-commerce-app{
        padding-bottom:70px;
    }

    .vaero-commerce-header h1{
        font-size:27px;
    }

    .vaero-payment-meta{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );
    }

}


/* =========================================================
   21. MOBILE
========================================================= */

@media (max-width:600px){

    .vaero-commerce-app{
        height:100%;

        padding:
            1px
            1px
            64px;

        gap:8px;
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .vaero-commerce-header{
        align-items:center;

        gap:8px;
    }

    .vaero-commerce-eyebrow{
        font-size:7px;
    }

    .vaero-commerce-header h1{
        margin:
            3px
            0
            2px;

        font-size:
            clamp(
                20px,
                6.7vw,
                25px
            );
    }

    .vaero-commerce-header p{
        max-width:250px;

        margin-top:2px;

        font-size:10px;

        line-height:1.35;
    }

    .vaero-commerce-id-btn{
        min-height:31px;

        padding:
            0
            8px;

        gap:5px;

        font-size:9px;
    }

    .vaero-commerce-id-btn span{
        min-width:16px;
        height:16px;

        font-size:7px;
    }


    /* -----------------------------------------------------
       SECTION
    ----------------------------------------------------- */

    .vaero-commerce-section-head{
        margin-bottom:5px;
    }

    .vaero-commerce-section-head > span{
        font-size:7px;
    }

    .vaero-commerce-section-head button{
        font-size:9px;
    }


    /* -----------------------------------------------------
       CORE STATUS
    ----------------------------------------------------- */

    .vaero-core-status{
        padding:
            9px
            10px;

        margin-bottom:6px;

        border-radius:12px;
    }

    .vaero-core-status strong{
        font-size:10px;
    }

    .vaero-core-status small{
        font-size:8px;
    }


    /* -----------------------------------------------------
       INTENT
    ----------------------------------------------------- */

    .vaero-payment-intent{
        padding:
            9px
            10px;

        margin-bottom:6px;

        border-radius:12px;
    }

    .vaero-payment-intent strong{
        font-size:10px;
    }

    .vaero-payment-intent small{
        font-size:8px;
    }


    /* -----------------------------------------------------
       META
    ----------------------------------------------------- */

    .vaero-payment-meta{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:4px;

        margin-top:7px;
    }

    .vaero-payment-meta > div{
        padding:
            6px
            7px;

        border-radius:8px;
    }

    .vaero-payment-meta span{
        font-size:7px;
    }

    .vaero-payment-meta strong{
        margin-top:2px;

        font-size:9px;
    }


    /* -----------------------------------------------------
       TRANSACTIONS
    ----------------------------------------------------- */

    .vaero-cart-items{
        grid-auto-rows:
            minmax(
                46px,
                auto
            );

        gap:4px;
    }

    .vaero-cart-item{
        min-height:46px;

        gap:7px;

        padding:
            7px
            8px;

        border-radius:10px;
    }

    .vaero-cart-item-copy{
        gap:2px;
    }

    .vaero-cart-item-copy strong{
        font-size:9px;
    }

    .vaero-cart-item-copy small{
        font-size:7px;
    }

    .vaero-product-type{
        font-size:6px;
    }


    /* -----------------------------------------------------
       METHODS
    ----------------------------------------------------- */

    .vaero-payment-methods{
        margin-top:6px;

        padding:
            8px
            9px;

        border-radius:10px;
    }

    .vaero-payment-methods strong{
        font-size:9px;
    }

    .vaero-payment-methods small{
        font-size:7px;
    }


    /* -----------------------------------------------------
       ACTIONS
    ----------------------------------------------------- */

    .vaero-commerce-actions{
        gap:5px;

        margin-top:6px;
    }

    .vaero-commerce-actions button{
        min-height:30px;

        padding:
            0
            8px;

        font-size:8px;
    }


    /* -----------------------------------------------------
       STATUS
    ----------------------------------------------------- */

    .vaero-payment-status{
        gap:2px;

        margin-top:6px;

        padding:
            8px
            9px;

        border-radius:10px;
    }

    .vaero-payment-status strong{
        font-size:9px;
    }

    .vaero-payment-status small{
        font-size:7px;
    }


    /* -----------------------------------------------------
       EMPTY
    ----------------------------------------------------- */

    .vaero-payment-empty{
        padding:14px;

        border-radius:12px;
    }

    .vaero-payment-empty strong{
        font-size:10px;
    }

    .vaero-payment-empty span,
    .vaero-payment-empty small{
        max-width:260px;

        font-size:8px;
    }

}


/* =========================================================
   22. SMALL PHONE
========================================================= */

@media (max-width:390px){

    .vaero-commerce-header h1{
        font-size:19px;
    }

    .vaero-commerce-header p{
        max-width:190px;
    }

    .vaero-commerce-id-btn{
        padding-inline:6px;
    }

    .vaero-payment-meta{
        gap:3px;
    }

    .vaero-commerce-actions{
        width:100%;
    }

    .vaero-commerce-actions button{
        flex:
            1
            1
            0;

        min-width:0;
    }

}


/* =========================================================
   23. SHORT VIEWPORT
========================================================= */

@media (max-height:720px){

    .vaero-commerce-app{
        gap:6px;
    }

    .vaero-commerce-header h1{
        font-size:20px;
    }

    .vaero-commerce-header p{
        display:none;
    }

    .vaero-core-status,
    .vaero-payment-intent{
        margin-bottom:4px;

        padding-top:7px;
        padding-bottom:7px;
    }

    .vaero-payment-meta{
        margin-top:5px;
    }

    .vaero-cart-item{
        min-height:41px;

        padding-top:5px;
        padding-bottom:5px;
    }

    .vaero-payment-methods,
    .vaero-payment-status{
        margin-top:4px;

        padding-top:6px;
        padding-bottom:6px;
    }

    .vaero-commerce-actions{
        margin-top:4px;
    }

}


/* =========================================================
   24. VERY SHORT VIEWPORT
========================================================= */

@media (max-height:620px){

    .vaero-commerce-app{
        gap:4px;
    }

    .vaero-commerce-eyebrow{
        display:none;
    }

    .vaero-commerce-header h1{
        margin:0;

        font-size:18px;
    }

    .vaero-commerce-id-btn{
        min-height:27px;
    }

    .vaero-commerce-section-head{
        margin-bottom:3px;
    }

    .vaero-core-status{
        margin-bottom:3px;
    }

    .vaero-payment-intent{
        margin-bottom:3px;
    }

    .vaero-payment-intent small{
        display:none;
    }

    .vaero-payment-meta{
        margin-top:4px;
    }

    .vaero-cart-items{
        gap:3px;
    }

    .vaero-cart-item{
        min-height:37px;
    }

    .vaero-payment-methods{
        padding:
            5px
            7px;
    }

    .vaero-payment-status{
        padding:
            5px
            7px;
    }

    .vaero-commerce-actions button{
        min-height:27px;
    }

}


/* =========================================================
   25. LANDSCAPE MOBILE
========================================================= */

@media
(
    orientation:landscape
)
and
(
    max-height:520px
){

    .vaero-commerce-app{
        padding:
            1px
            1px
            6px;

        gap:4px;
    }

    .vaero-commerce-header h1{
        font-size:18px;
    }

    .vaero-commerce-header p{
        display:none;
    }

    .vaero-commerce-section{
        display:grid;

        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        grid-template-rows:
            auto
            minmax(0,1fr);

        gap:
            5px
            8px;
    }

    .vaero-commerce-section-head{
        grid-column:
            1 / -1;
    }

    .vaero-cart-items{
        min-height:0;
    }

}


/* =========================================================
   26. TOUCH DEVICES
========================================================= */

@media (hover:none){

    .vaero-commerce-id-btn:hover{
        border-color:
            rgba(220,184,125,.16);

        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.027),
                rgba(255,255,255,.012)
            );
    }

    .vaero-cart-item:hover{
        border-color:
            rgba(255,255,255,.055);

        background:
            radial-gradient(
                circle at 92% 20%,
                rgba(77,128,165,.07),
                transparent 28%
            ),

            linear-gradient(
                145deg,
                rgba(255,255,255,.027),
                rgba(255,255,255,.008)
            );
    }

}


/* =========================================================
   27. HIGH CONTRAST
========================================================= */

@media (prefers-contrast:more){

    .vaero-core-status,
    .vaero-payment-intent,
    .vaero-cart-item,
    .vaero-payment-methods,
    .vaero-payment-status,
    .vaero-payment-empty{
        border-color:
            rgba(255,255,255,.14);
    }

    .vaero-commerce-header p,
    .vaero-core-status small,
    .vaero-payment-intent small,
    .vaero-cart-item-copy small{
        color:
            rgba(246,241,232,.68);
    }

}


/* =========================================================
   28. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion:reduce){

    .vaero-commerce-id-btn,
    .vaero-commerce-actions button,
    .vaero-cart-item{
        transition:none;
    }

}


/* =========================================================
   29. FINAL SIZE SAFETY
========================================================= */

.vaero-commerce-app,
.vaero-commerce-header,
.vaero-commerce-section,
.vaero-commerce-section-head,
.vaero-core-status,
.vaero-payment-intent,
.vaero-payment-meta,
.vaero-cart-items,
.vaero-cart-item,
.vaero-cart-item-copy,
.vaero-payment-methods,
.vaero-commerce-actions,
.vaero-payment-status,
.vaero-payment-empty{
    min-width:0;
}

.vaero-commerce-app,
.vaero-commerce-section,
.vaero-cart-items,
.vaero-payment-empty{
    min-height:0;
}


/* =========================================================
   30. SCROLL AUTHORITY
========================================================= */

.vaero-commerce-app{
    overflow:hidden;
}

.vaero-commerce-section{
    overflow:hidden;
}

.vaero-cart-items{
    overflow-x:hidden;
    overflow-y:auto;
}


/* =========================================================
   END — VAERO SYSTEM APP
========================================================= */