:root{
    --bg:#050505;
    --surface:#0d0d0d;
    --surface2:#151515;
    --text:#fff;
    --muted:#9b9b9b;
    --line:rgba(255,255,255,.12);
    --max:1440px;
    --ease:cubic-bezier(.2,.75,.2,1);
}

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

html{
    scroll-behavior:smooth;
}

body{
    background:var(--bg);
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
    overflow-x:hidden;
}

button,
input{
    font:inherit;
}

button{
    cursor:pointer;
    border:0;
    outline:0;
}

a{
    color:inherit;
    text-decoration:none;
}

.app{
    min-height:100vh;
    background:var(--bg);
}


/* ======================================================
   HEADER
====================================================== */

.header{
    position:fixed;
    z-index:1000;
    top:0;
    left:0;
    right:0;
    height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 28px;
    border-bottom:1px solid transparent;
    transition:.45s var(--ease);

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.65),
            transparent
        );
}

.header.scrolled{
    background:rgba(5,5,5,.92);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    border-color:var(--line);
}

.logo{
    border:0;
    background:none;
    color:#fff;
    font-weight:900;
    letter-spacing:.16em;
    font-size:17px;
    white-space:nowrap;

    transition:
        transform .35s var(--ease),
        letter-spacing .35s var(--ease),
        opacity .35s;
}

.logo:hover{
    transform:
        translateY(-3px)
        scale(1.035);

    letter-spacing:.19em;
}

.logo:active{
    transform:scale(.96);
}

.nav{
    display:flex;
    align-items:center;
    gap:26px;
}

.nav button,
.tools button{
    border:0;
    background:none;
    color:#fff;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.13em;
}

.nav button{
    position:relative;

    transition:
        transform .3s var(--ease),
        opacity .3s;
}

.nav button:hover{
    transform:translateY(-3px);
}

.nav button:after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-8px;
    width:0;
    height:1px;
    background:#fff;
    transform:translateX(-50%);
    transition:.35s var(--ease);
}

.nav button:hover:after{
    width:100%;
}

.tools{
    display:flex;
    gap:14px;
    align-items:center;
}

.icon-btn{
    position:relative;
    min-width:24px;

    transition:
        transform .3s var(--ease),
        background .3s,
        color .3s;
}

.icon-btn:hover{
    transform:translateY(-3px);
}


/* ======================================================
   ACCOUNT HEADER BUTTON
====================================================== */

.account-trigger{
    display:flex;
    align-items:center;
    gap:8px;
    border:0!important;
    padding:10px 15px!important;
    border-radius:999px;
    background:rgba(255,255,255,.075)!important;

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

    transition:
        transform .32s var(--ease),
        background .32s var(--ease),
        color .32s var(--ease),
        box-shadow .32s var(--ease);
}

.account-trigger:hover{
    border:0!important;

    transform:
        translateY(-4px)
        scale(1.02);

    background:#fff!important;
    color:#000!important;

    box-shadow:
        0 12px 35px
        rgba(255,255,255,.12);
}

.account-trigger:active{
    transform:scale(.96);
}

.account-trigger svg{
    width:16px;
    height:16px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
}

.account-trigger-text{
    font-size:10px;
    letter-spacing:.12em;
    font-weight:800;
}


/* GOOGLE AVATAR */

.vance-google-avatar{
    width:28px!important;
    height:28px!important;
    border-radius:50%;
    object-fit:cover;
    display:block;
    flex-shrink:0;

    box-shadow:
        0 0 0 2px
        rgba(255,255,255,.12);
}


/* CART HEADER */

.cart-header-btn{
    padding:10px 15px!important;
    border-radius:999px;
    background:rgba(255,255,255,.075)!important;
    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);
}

.cart-header-btn:hover{
    background:#fff!important;
    color:#000!important;
}

.badge{
    position:absolute;
    top:-8px;
    right:-6px;
    min-width:17px;
    height:17px;
    border-radius:99px;
    background:#fff;
    color:#000;
    font-size:9px;
    display:grid;
    place-items:center;
    font-weight:700;
}


/* ======================================================
   HERO
====================================================== */

.landing{
    display:block;
}

.hero{
    min-height:100svh;
    position:relative;
    display:grid;
    place-items:end start;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 65% 40%,
            #303030 0,
            #111 34%,
            #050505 72%
        );
}

.hero-video,
.video-panel video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:.82;
}

.video-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.18),
            rgba(0,0,0,.15) 40%,
            rgba(0,0,0,.9)
        );
}

.hero-content{
    position:relative;
    z-index:2;
    padding:0 7vw 9vh;
    max-width:950px;
}

.hero-animate{
    animation:
        heroEntrance
        1s
        var(--ease)
        both;
}

@keyframes heroEntrance{

    from{
        opacity:0;

        transform:
            translateY(55px)
            scale(.97);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}

.kicker{
    font-size:11px;
    letter-spacing:.35em;
    text-transform:uppercase;
    color:#ccc;
    margin-bottom:22px;
}

.hero h1{
    font-size:clamp(55px,10vw,150px);
    line-height:.82;
    letter-spacing:-.065em;
    font-weight:900;
    text-transform:uppercase;
}

.hero p{
    max-width:530px;
    color:#ddd;
    margin:28px 0;
    font-size:15px;
    line-height:1.7;
}


/* ======================================================
   BUTTONS
====================================================== */

.primary,
.secondary,
.small-btn,
.filter,
.opt,
.search-quick-btn,
.search-category-result,
.search-product-result,
.account-menu-item{
    border:0!important;
    border-radius:999px;

    transition:
        transform .32s var(--ease),
        background .32s var(--ease),
        color .32s var(--ease),
        box-shadow .32s var(--ease),
        opacity .32s var(--ease);
}

.primary{
    background:#fff;
    color:#000;
    padding:15px 25px;
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:11px;
    font-weight:800;

    box-shadow:
        0 12px 35px
        rgba(255,255,255,.08);
}

.secondary{
    background:rgba(255,255,255,.075);
    color:#fff;
    padding:15px 25px;
    text-transform:uppercase;
    letter-spacing:.16em;
    font-size:11px;
    font-weight:800;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.primary:hover,
.secondary:hover,
.small-btn:hover,
.filter:hover,
.opt:hover,
.search-quick-btn:hover,
.search-category-result:hover,
.search-product-result:hover,
.account-menu-item:hover{
    transform:
        translateY(-4px)
        scale(1.02);
}

.primary:active,
.secondary:active,
.small-btn:active,
.filter:active,
.opt:active,
.search-quick-btn:active,
.search-category-result:active,
.search-product-result:active,
.account-menu-item:active{
    transform:
        translateY(0)
        scale(.97);
}

.hero-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.scroll-indicator{
    position:absolute;
    right:30px;
    bottom:34px;
    z-index:3;
    writing-mode:vertical-rl;
    text-transform:uppercase;
    letter-spacing:.28em;
    font-size:9px;
    color:#aaa;
}


/* ======================================================
   SECTIONS
====================================================== */

.section{
    padding:120px 5vw;
    max-width:var(--max);
    margin:auto;
}

.section-head{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-bottom:45px;
}

.eyebrow{
    font-size:10px;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:#888;
    margin-bottom:14px;
}

.section-title{
    font-size:clamp(38px,6vw,80px);
    letter-spacing:-.05em;
    line-height:.9;
}

.section-note{
    color:#888;
    font-size:12px;
    max-width:280px;
    line-height:1.7;
}


/* ======================================================
   PRODUCT GRID
====================================================== */

.product-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:10px;
}

.card{
    background:#101010;
    min-width:0;
    cursor:pointer;
    overflow:hidden;

    transition:
        transform .5s var(--ease),
        background .3s,
        box-shadow .5s var(--ease);
}

.card:hover{
    transform:
        translateY(-13px)
        scale(1.018);

    background:#171717;

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.4);
}

.card-img{
    aspect-ratio:3/4;

    background:
        linear-gradient(
            145deg,
            #191919,
            #090909
        );

    position:relative;
    overflow:hidden;
}

.card-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .8s var(--ease);
}

.card:hover img{
    transform:scale(1.055);
}

.card-info{
    padding:17px 15px 21px;
}

.card-name{
    font-size:13px;
    font-weight:700;
    line-height:1.35;
}

.card-category{
    color:#777;
    font-size:10px;
    margin-top:7px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.card-price{
    margin-top:12px;
    font-size:12px;
}

.old-price{
    text-decoration:line-through;
    color:#666;
    margin-right:7px;
}


/* PRODUCT ENTRANCE */

.product-card-enter{
    animation:
        vanceCardIn
        .7s
        var(--ease)
        both;
}

@keyframes vanceCardIn{

    from{
        opacity:0;

        transform:
            translateY(38px)
            scale(.96);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* ======================================================
   REVEAL
====================================================== */

.reveal{
    opacity:0;

    transform:
        translateY(45px)
        scale(.985);

    transition:
        opacity .85s var(--ease),
        transform .85s var(--ease);
}

.reveal.visible{
    opacity:1;

    transform:
        translateY(0)
        scale(1);
}


/* ======================================================
   VIDEO PANEL
====================================================== */

.video-panel{
    position:relative;
    height:82svh;
    overflow:hidden;
    background:#111;
}

.video-copy{
    position:absolute;
    z-index:2;
    left:6vw;
    bottom:8vh;
}

.video-copy h2{
    font-size:clamp(45px,8vw,110px);
    line-height:.86;
    letter-spacing:-.06em;
    text-transform:uppercase;
}


/* ======================================================
   COLLECTIONS
====================================================== */

.collections{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.collection{
    min-height:440px;
    background:#111;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    display:flex;
    align-items:end;

    transition:
        transform .5s var(--ease),
        box-shadow .5s var(--ease);
}

.collection:before{
    content:"";
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.08),
            rgba(0,0,0,.72)
        ),
        var(
            --collection-cover,
            linear-gradient(
                135deg,
                #242424,
                #070707
            )
        );

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;

    transition:
        transform .7s var(--ease);
}

.collection:hover{
    transform:
        translateY(-11px)
        scale(1.012);

    box-shadow:
        0 30px 70px
        rgba(0,0,0,.4);
}

.collection:hover:before{
    transform:scale(1.08);
}

.collection-content{
    position:relative;
    z-index:2;
    padding:28px;
}

.collection h3{
    font-size:27px;
    letter-spacing:-.04em;
    margin-bottom:10px;
}

.collection span{
    color:#aaa;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.13em;
}


/* ======================================================
   BRAND
====================================================== */

.brand-section{
    padding:150px 6vw;
    text-align:center;
    max-width:1100px;
    margin:auto;
}

.brand-section h2{
    font-size:clamp(50px,10vw,140px);
    line-height:.82;
    letter-spacing:-.065em;
}

.brand-section p{
    max-width:620px;
    margin:30px auto;
    color:#999;
    line-height:1.8;
}


/* ======================================================
   FOOTER
====================================================== */

.footer{
    border-top:1px solid var(--line);
    padding:80px 5vw 35px;
    color:#777;
    font-size:11px;
}

.footer-grid{
    max-width:var(--max);
    margin:auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:50px;
    padding-bottom:70px;
}

.footer-brand .logo-text{
    color:#fff;
    font-weight:900;
    letter-spacing:.18em;
    margin-bottom:20px;
}

.footer-brand p{
    max-width:330px;
    line-height:1.8;
}

.footer-title{
    color:#fff;
    text-transform:uppercase;
    letter-spacing:.15em;
    font-size:10px;
    margin-bottom:20px;
}

.footer-links{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
}

.footer-links button,
.footer-links a{
    background:none;
    border:0;
    color:#777;
    padding:0;
    font-size:11px;
    letter-spacing:.04em;
    text-align:left;

    transition:
        color .25s,
        transform .25s;
}

.footer-links button:hover,
.footer-links a:hover{
    color:#fff;
    transform:translateX(4px);
}

.footer-bottom{
    max-width:var(--max);
    margin:auto;
    border-top:1px solid var(--line);
    padding-top:28px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    text-transform:uppercase;
    letter-spacing:.12em;
}


/* ======================================================
   STORE
====================================================== */

.store-view{
    display:none;
    padding-top:76px;
    min-height:100vh;
}

.store-view.active{
    display:block;
    animation:viewIn .65s var(--ease);
}

@keyframes viewIn{

    from{
        opacity:0;
        transform:translateY(28px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.store-top{
    padding:70px 5vw 35px;
    max-width:var(--max);
    margin:auto;
}

.store-top h1{
    font-size:clamp(50px,9vw,120px);
    letter-spacing:-.07em;
    text-transform:uppercase;
}

.store-top-row{
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:20px;
    margin-top:25px;
}

.store-top-row p{
    color:#888;
    font-size:13px;
}

.filters{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:35px 0 20px;
}

.filter{
    background:rgba(255,255,255,.07);
    color:#aaa;
    padding:11px 15px;
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    backdrop-filter:blur(12px);
}

.filter.active,
.filter:hover{
    background:#fff;
    color:#000;
}

.store-products{
    padding:0 5vw 100px;
    max-width:var(--max);
    margin:auto;
}

.empty{
    padding:80px 20px;
    text-align:center;
    color:#777;
}


/* ======================================================
   SEARCH
====================================================== */

.search-panel,
.modal-wrap{
    position:fixed;
    inset:0;
    z-index:2000;
    background:rgba(0,0,0,.76);
    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    display:none;
}

.search-panel.open,
.modal-wrap.open{
    display:block;
}

.search-box{
    max-width:900px;
    margin:12vh auto 0;
    padding:30px;
}

.search-input{
    width:100%;
    background:transparent;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.2);
    color:#fff;
    font-size:clamp(30px,6vw,70px);
    outline:0;
    padding:15px 0 20px;
}

.search-input::placeholder{
    color:#555;
}

.search-results{
    margin-top:25px;
    max-height:58vh;
    overflow:auto;
}

.search-section-title{
    margin:25px 0 12px;
    color:#777;
    font-size:9px;
    letter-spacing:.2em;
    text-transform:uppercase;
}

.search-quick-grid{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:22px;
}

.search-quick-btn{
    background:rgba(255,255,255,.07);
    color:#ddd;
    padding:11px 16px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.search-category-result{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:17px 18px;
    margin-bottom:7px;
    background:rgba(255,255,255,.055);
    color:#fff;
    text-align:left;
}

.search-product-result{
    width:100%;
    display:grid;
    grid-template-columns:65px 1fr auto;
    align-items:center;
    gap:15px;
    padding:10px;
    margin-bottom:7px;
    background:rgba(255,255,255,.045);
    color:#fff;
    text-align:left;
}

.search-product-result img{
    width:65px;
    height:78px;
    object-fit:cover;
    border-radius:12px;
}

.search-product-name{
    font-size:12px;
    font-weight:700;
}

.search-product-category{
    color:#777;
    font-size:10px;
    margin-top:5px;
}


/* ======================================================
   CLOSE BUTTON
====================================================== */

.close{
    position:fixed;
    right:30px;
    top:25px;
    border:0;
    background:rgba(255,255,255,.07);
    color:#fff;
    width:43px;
    height:43px;
    border-radius:50%;
    font-size:24px;
    z-index:20;

    transition:
        transform .3s var(--ease),
        background .3s;
}

.close:hover{
    transform:
        rotate(90deg)
        scale(1.08);

    background:rgba(255,255,255,.15);
}


/* ======================================================
   PRODUCT MODAL
====================================================== */

.modal{
    width:min(1100px,92vw);
    max-height:90vh;
    overflow:auto;
    background:#0b0b0b;
    margin:5vh auto;
    padding:25px;
}

.product-detail{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:35px;
}

.detail-main{
    aspect-ratio:1/1;
    background:#111;
    overflow:hidden;
}

.detail-main img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.thumbs{
    display:flex;
    gap:7px;
    margin-top:8px;
    overflow:auto;
}

.thumb{
    width:70px;
    height:70px;
    flex:0 0 70px;
    background:#161616;
    cursor:pointer;
    overflow:hidden;
    border-radius:8px;
}

.thumb.active{
    opacity:1;
}

.thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.detail-copy{
    padding:20px 0;
}

.detail-copy h2{
    font-size:42px;
    line-height:.95;
    letter-spacing:-.05em;
}

.detail-price{
    font-size:20px;
    margin:22px 0;
}

.detail-desc{
    color:#999;
    line-height:1.7;
    font-size:13px;
}

.option-label{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.18em;
    color:#888;
    margin:25px 0 10px;
}

.options{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
}

.opt{
    background:rgba(255,255,255,.07);
    color:#fff;
    padding:10px 14px;
    font-size:11px;
}

.opt.selected{
    background:#fff;
    color:#000;
}


/* ======================================================
   CART
====================================================== */

.cart-drawer{
    position:fixed;
    z-index:2100;
    right:0;
    top:0;
    bottom:0;
    width:min(470px,100%);
    background:rgba(9,9,9,.96);
    border-left:1px solid var(--line);
    transform:translateX(100%);
    transition:.5s var(--ease);
    padding:28px;
    display:flex;
    flex-direction:column;
    backdrop-filter:blur(20px);
}

.cart-drawer.open{
    transform:none;
}

.cart-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding-bottom:20px;
    border-bottom:1px solid var(--line);
}

.cart-items{
    flex:1;
    overflow:auto;
}

.cart-item{
    display:grid;
    grid-template-columns:75px 1fr auto;
    gap:12px;
    padding:15px 0;
    border-bottom:1px solid var(--line);
}

.cart-item img{
    width:75px;
    height:90px;
    object-fit:cover;
    background:#111;
}

.cart-item h4{
    font-size:12px;
}

.cart-item p{
    color:#888;
    font-size:11px;
    margin-top:8px;
}

.remove{
    border:0;
    background:none;
    color:#777;
    font-size:10px;
}

.cart-total{
    border-top:1px solid var(--line);
    padding-top:18px;
}

.cart-total-row{
    display:flex;
    justify-content:space-between;
    margin-bottom:18px;
}


/* ======================================================
   BASIC ACCOUNT SUPPORT
====================================================== */

.account-box{
    width:min(470px,calc(100vw - 30px));
    margin:10vh auto;
    padding:38px;
    background:rgba(14,14,14,.58);
    border:0;
    border-radius:30px;

    box-shadow:
        0 35px 100px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.08);

    backdrop-filter:blur(28px) saturate(135%);
    -webkit-backdrop-filter:blur(28px) saturate(135%);

    animation:
        accountIn
        .55s
        var(--ease)
        both;
}

@keyframes accountIn{

    from{
        opacity:0;

        transform:
            translateY(25px)
            scale(.97);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}

.account-box h2{
    font-size:35px;
    letter-spacing:-.05em;
    margin-bottom:20px;
}

.account-status{
    color:#999;
    font-size:12px;
    line-height:1.7;
    margin-bottom:20px;
}

.field{
    width:100%;
    background:rgba(255,255,255,.07);
    border:0;
    border-radius:16px;
    color:#fff;
    padding:15px 16px;
    margin-bottom:10px;
    outline:0;

    transition:
        background .3s,
        transform .3s;
}

.field:focus{
    background:rgba(255,255,255,.11);
    transform:translateY(-1px);
}

.small-btn{
    background:rgba(255,255,255,.075);
    color:#fff;
    padding:12px 17px;
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.1em;
    backdrop-filter:blur(12px);
}

.account-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    margin:18px 0;
    color:#666;
    font-size:9px;
    letter-spacing:.2em;
}

.account-divider:before,
.account-divider:after{
    content:"";
    height:1px;
    background:rgba(255,255,255,.1);
    flex:1;
}

.account-divider span{
    padding:0 14px;
}

.account-action-row{
    display:flex;
    gap:8px;
}

.profile-card{
    display:flex;
    align-items:center;
    gap:17px;
    padding:10px 0 24px;
}

.account-profile-image{
    width:62px;
    height:62px;
    border-radius:50%;
    object-fit:cover;
    flex-shrink:0;

    box-shadow:
        0 0 0 3px
        rgba(255,255,255,.08);
}

.profile-card h2{
    margin:5px 0 5px;
    font-size:26px;
}

.profile-welcome{
    color:#777;
    font-size:9px;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.profile-email{
    color:#999;
    font-size:11px;
}

.account-menu{
    display:flex;
    flex-direction:column;
    gap:7px;
}

.account-menu-item{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 17px;
    background:rgba(255,255,255,.065);
    color:#fff;
    text-align:left;
    border-radius:16px;
}


/* ======================================================
   TOAST
====================================================== */

.toast{
    position:fixed;
    z-index:3000;
    left:50%;
    bottom:25px;

    transform:
        translate(
            -50%,
            20px
        );

    background:#fff;
    color:#000;
    padding:13px 18px;
    border-radius:999px;
    opacity:0;
    pointer-events:none;
    transition:.35s;
}

.toast.show{
    opacity:1;

    transform:
        translate(
            -50%,
            0
        );
}


/* ======================================================
   ACCESSIBILITY
====================================================== */

button:focus-visible{
    outline:
        1px solid
        rgba(255,255,255,.45)!important;

    outline-offset:4px;
}


/* ======================================================
   GENERAL MOBILE
====================================================== */

@media(max-width:900px){

    .nav{
        display:none;
    }

    .header{
        padding:0 17px;
    }

    .tools{
        gap:10px;
    }

    .hero-content{
        padding-left:6vw;
    }

    .product-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .collections{
        grid-template-columns:1fr;
    }

    .collection{
        min-height:330px;
    }

    .product-detail{
        grid-template-columns:1fr;
    }

    .footer-grid{
        grid-template-columns:1fr 1fr;
        gap:40px;
    }

    .footer-bottom{
        flex-direction:column;
    }
}

@media(max-width:560px){

    .logo{
        font-size:13px;
    }

    .section{
        padding:85px 5vw;
    }

    .section-head{
        display:block;
    }

    .section-note{
        margin-top:15px;
    }

    .video-panel{
        height:68svh;
    }

    .brand-section{
        padding:110px 6vw;
    }

    .search-box{
        padding:20px;
        margin-top:10vh;
    }

    .modal{
        padding:15px;
    }

    .account-trigger{
        padding:9px 11px!important;
    }

    .account-trigger-text{
        display:none;
    }

    .cart-header-btn{
        padding:9px 11px!important;
    }

    .footer-grid{
        grid-template-columns:1fr;
        gap:32px;
    }

    .account-box{
        padding:30px 22px;
        margin-top:8vh;
    }
}


/* ======================================================
   VANCE CEYLON
   NEW SIGN IN + MY ACCOUNT
   COMPACT DARK TRANSPARENT GLASS DESIGN
====================================================== */

#accountModal{
    background:rgba(0,0,0,.72);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    overflow-y:auto;
}


/* ======================================================
   MAIN ACCOUNT GLASS
====================================================== */

#accountModal .account-box.vance-auth-glass{
    position:relative;

    width:min(500px,calc(100vw - 32px));
    max-height:90vh;

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

    margin:5vh auto;

    padding:31px 31px 27px;

    border-radius:31px;

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

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(255,255,255,.065),
            transparent 34%
        ),
        radial-gradient(
            circle at 8% 95%,
            rgba(255,255,255,.025),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            rgba(27,27,27,.78),
            rgba(7,7,7,.90)
        );

    box-shadow:
        0 32px 90px rgba(0,0,0,.72),
        inset 0 1px 0 rgba(255,255,255,.10);

    backdrop-filter:blur(34px) saturate(115%);
    -webkit-backdrop-filter:blur(34px) saturate(115%);

    animation:
        vanceGlassOpen
        .55s
        cubic-bezier(.16,.8,.25,1)
        both;
}


/* SCROLLBAR */

#accountModal .account-box.vance-auth-glass::-webkit-scrollbar{
    width:5px;
}

#accountModal .account-box.vance-auth-glass::-webkit-scrollbar-track{
    background:transparent;
}

#accountModal .account-box.vance-auth-glass::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.10);
    border-radius:999px;
}


/* ======================================================
   OPEN MOTION
====================================================== */

@keyframes vanceGlassOpen{

    0%{
        opacity:0;

        transform:
            translateY(25px)
            scale(.95);

        filter:blur(7px);
    }

    65%{
        opacity:1;

        transform:
            translateY(-2px)
            scale(1.004);

        filter:blur(0);
    }

    100%{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* ======================================================
   ACCOUNT CLOSE
====================================================== */

#accountModal .vance-account-close{
    position:fixed;

    top:25px;
    right:30px;

    width:40px;
    height:40px;

    display:grid;
    place-items:center;

    border-radius:50%;

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

    background:rgba(20,20,20,.55);

    color:#969696;

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

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

#accountModal .vance-account-close:hover{
    transform:
        rotate(90deg)
        scale(1.06);

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

    border-color:rgba(255,255,255,.15);

    color:#ddd;
}


/* ======================================================
   ACCOUNT BRAND
====================================================== */

.vance-account-brand{
    text-align:center;
    margin-bottom:22px;
}

.vance-account-logo{
    padding-left:.27em;

    color:#d0d0d0;

    font-size:25px;
    font-weight:800;

    letter-spacing:.27em;

    line-height:1;
}

.vance-account-logo-sub{
    margin-top:5px;

    padding-left:.45em;

    color:#6f6f6f;

    font-size:7px;
    font-weight:600;

    letter-spacing:.45em;
}


/* ======================================================
   ACCOUNT HEADINGS
====================================================== */

.vance-account-heading{
    margin-bottom:19px;
}

.vance-account-tagline{
    margin-bottom:6px;

    color:#707070;

    font-size:7px;
    font-weight:700;

    letter-spacing:.27em;

    text-transform:uppercase;
}

.vance-account-heading h1{
    margin:0;

    color:#dedede;

    font-size:36px;

    line-height:1;

    font-weight:500;

    letter-spacing:-.055em;
}

.vance-account-heading p{
    margin-top:9px;

    color:#707070;

    font-size:10px;

    line-height:1.55;
}


/* ======================================================
   ACCOUNT STATUS
====================================================== */

.vance-account-status{
    min-height:0;

    margin:0 0 11px;

    color:#929292;

    font-size:10px;

    line-height:1.5;
}

.vance-account-status:empty{
    display:none;
}


/* ======================================================
   GOOGLE + ACCOUNT OPTION CARDS
====================================================== */

.vance-auth-option,
.vance-account-option{
    position:relative;

    width:100%;

    min-height:62px;

    display:grid;

    grid-template-columns:
        39px
        1fr
        auto;

    align-items:center;

    gap:11px;

    padding:9px 13px;

    overflow:hidden;

    color:#d0d0d0;

    text-align:left;

    border:
        1px solid
        rgba(255,255,255,.10)!important;

    border-radius:17px!important;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        )!important;

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    transition:
        transform .35s cubic-bezier(.16,.8,.25,1),
        border-color .35s,
        background .35s,
        box-shadow .35s;
}


/* LIGHT REFLECTION */

.vance-auth-option::before,
.vance-account-option::before{
    content:"";

    position:absolute;

    top:-80%;
    left:-35%;

    width:28%;
    height:260%;

    transform:rotate(18deg);

    pointer-events:none;

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

    transition:
        left .75s
        cubic-bezier(.16,.8,.25,1);
}

.vance-auth-option:hover::before,
.vance-account-option:hover::before{
    left:120%;
}

.vance-auth-option:hover,
.vance-account-option:hover{
    transform:
        translateY(-3px)
        scale(1.006);

    border-color:
        rgba(255,255,255,.18)!important;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.02)
        )!important;

    box-shadow:
        0 15px 35px
        rgba(0,0,0,.28);
}

.vance-auth-option:active,
.vance-account-option:active{
    transform:scale(.985);
}


/* ======================================================
   ICONS
====================================================== */

.vance-auth-icon,
.vance-option-icon{
    width:38px;
    height:38px;

    display:grid;
    place-items:center;

    color:#c8c8c8;

    border-radius:11px;

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

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

    transition:
        transform .35s cubic-bezier(.16,.8,.25,1),
        background .35s,
        border-color .35s,
        box-shadow .35s;
}

.vance-auth-icon svg{
    width:22px;
    height:22px;
}

.vance-option-icon svg{
    width:22px;
    height:22px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.45;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.vance-auth-option:hover .vance-auth-icon,
.vance-account-option:hover .vance-option-icon{
    transform:
        translateY(-2px)
        scale(1.07);
}


/* ======================================================
   OPTION TEXT
====================================================== */

.vance-auth-option-text,
.vance-option-copy{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.vance-auth-option-text strong,
.vance-option-copy strong{
    color:#d4d4d4;

    font-size:14px;

    font-weight:500;
}

.vance-auth-option-text small,
.vance-option-copy small{
    color:#707070;

    font-size:8px;
}


/* ARROWS */

.vance-auth-arrow,
.vance-option-arrow{
    color:#858585;

    font-size:22px;

    transition:
        transform .35s,
        color .35s;
}

.vance-auth-option:hover .vance-auth-arrow,
.vance-account-option:hover .vance-option-arrow{
    transform:translateX(4px);

    color:#d0d0d0;
}


/* ======================================================
   SIGN IN DIVIDER
====================================================== */

.vance-auth-divider{
    display:grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items:center;

    gap:11px;

    margin:17px 0;
}

.vance-auth-divider::before,
.vance-auth-divider::after{
    display:none;
}

.vance-auth-divider .vance-divider-line{
    height:1px;

    padding:0;

    background:rgba(255,255,255,.07);
}

.vance-auth-divider small{
    color:#606060;

    font-size:7px;

    letter-spacing:.2em;
}


/* ======================================================
   EMAIL LOGIN
====================================================== */

.vance-email-login{
    display:flex;
    flex-direction:column;
}

.vance-field-label{
    margin:0 0 5px;

    color:#707070;

    font-size:7px;

    font-weight:700;

    letter-spacing:.2em;
}

#accountModal .vance-auth-field{
    width:100%;

    height:44px;

    margin-bottom:11px;

    padding:0 14px;

    outline:none;

    color:#d2d2d2;

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

    border-radius:13px;

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

    font-size:11px;

    transition:
        border-color .3s,
        background .3s,
        box-shadow .3s;
}

#accountModal .vance-auth-field::placeholder{
    color:#505050;
}

#accountModal .vance-auth-field:focus{
    border-color:rgba(255,255,255,.17);

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

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

    transform:none;
}


/* ======================================================
   EMAIL SIGN IN
====================================================== */

#accountModal .vance-email-signin{
    width:100%;

    height:45px;

    margin-top:2px;

    border:
        1px solid
        rgba(255,255,255,.13)!important;

    border-radius:14px;

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

    color:#d6d6d6;

    font-size:9px;

    font-weight:700;

    letter-spacing:.1em;

    text-transform:uppercase;

    transition:
        transform .3s,
        background .3s,
        box-shadow .3s,
        border-color .3s;
}

#accountModal .vance-email-signin:hover{
    transform:translateY(-2px);

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

    border-color:
        rgba(255,255,255,.20)!important;

    box-shadow:
        0 12px 25px
        rgba(0,0,0,.25);
}


/* ======================================================
   CREATE ACCOUNT
====================================================== */

.vance-create-account{
    display:flex;

    justify-content:center;

    align-items:center;

    gap:7px;

    margin-top:17px;

    color:#626262;

    font-size:9px;
}

.vance-create-account-btn{
    padding:0;

    border:0;

    background:none;

    color:#9a9a9a;

    font-size:9px;

    text-decoration:underline;

    text-underline-offset:4px;

    transition:
        color .3s,
        transform .3s;
}

.vance-create-account-btn:hover{
    color:#d0d0d0;

    transform:translateY(-1px);
}


/* ======================================================
   SIGNED IN ACCOUNT MOTION
====================================================== */

.vance-account-panel{
    animation:
        vanceAccountOpen
        .42s
        cubic-bezier(.2,.75,.2,1)
        both;

    transform-origin:top center;
}

@keyframes vanceAccountOpen{

    from{
        opacity:0;

        transform:
            translateY(-10px)
            scale(.97);

        filter:blur(4px);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);

        filter:blur(0);
    }
}


/* ======================================================
   PROFILE
====================================================== */

.vance-account-user{
    position:relative;

    display:flex;

    align-items:center;

    gap:14px;

    padding:11px 14px;

    margin-bottom:17px;

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

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.035),
            rgba(255,255,255,.01)
        );

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

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

.vance-account-user:hover{
    transform:translateY(-2px);

    border-color:
        rgba(255,255,255,.13);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.015)
        );
}


/* PROFILE IMAGE */

.vance-avatar-holder{
    position:relative;

    width:58px;
    height:58px;

    flex:0 0 58px;
}

.vance-avatar-holder .account-profile-image,
.vance-avatar-fallback{
    width:58px;
    height:58px;

    border-radius:50%;
}

.vance-avatar-holder .account-profile-image{
    position:relative;

    z-index:2;

    object-fit:cover;

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

    box-shadow:
        0 10px 26px
        rgba(0,0,0,.3);

    transition:
        transform .4s
        cubic-bezier(.16,.8,.25,1),
        box-shadow .4s
        cubic-bezier(.16,.8,.25,1);
}

.vance-account-user:hover .account-profile-image{
    transform:
        translateY(-2px)
        scale(1.05);

    box-shadow:
        0 14px 30px
        rgba(0,0,0,.38);
}

.vance-avatar-fallback{
    position:absolute;

    inset:0;

    display:grid;

    place-items:center;

    color:#d0d0d0;

    font-size:25px;

    background:
        linear-gradient(
            145deg,
            #3a3a3a,
            #202020
        );

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


/* ONLINE DOT */

.vance-profile-status{
    position:absolute;

    z-index:3;

    right:1px;

    bottom:2px;

    width:10px;
    height:10px;

    border-radius:50%;

    background:#bdbdbd;

    border:
        2px solid
        #111;
}


/* USER INFORMATION */

.vance-user-details{
    min-width:0;
}

.vance-user-details h2{
    margin:3px 0 4px;

    color:#d8d8d8;

    font-size:17px;

    font-weight:500;

    letter-spacing:-.025em;
}

.vance-user-details .profile-email{
    color:#7b7b7b;

    font-size:9px;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;
}

.profile-welcome{
    color:#6f6f6f;

    font-size:7px;

    font-weight:600;

    letter-spacing:.15em;

    text-transform:uppercase;
}


/* ======================================================
   ACCOUNT MENU
====================================================== */

#loggedInAccount .account-menu{
    display:flex;

    flex-direction:column;

    gap:8px;
}

#loggedInAccount
.account-menu-item.vance-account-option{
    display:grid;
}


/* ======================================================
   MY ORDERS
====================================================== */

.vance-orders-section{
    width:100%;

    animation:
        vanceOrdersOpen
        .4s
        cubic-bezier(.16,.8,.25,1)
        both;
}

@keyframes vanceOrdersOpen{

    from{
        opacity:0;

        transform:translateX(16px);
    }

    to{
        opacity:1;

        transform:translateX(0);
    }
}

.vance-orders-header{
    display:flex;

    gap:12px;

    align-items:flex-start;

    margin-bottom:17px;
}

.vance-orders-header h2{
    margin:4px 0;

    color:#d5d5d5;

    font-size:25px;

    font-weight:500;
}

.vance-orders-header p,
.vance-delivery-note{
    color:#707070;

    font-size:9px;

    line-height:1.5;
}

.vance-orders-back{
    width:36px;
    height:36px;

    display:grid;

    place-items:center;

    flex:0 0 auto;

    color:#999;

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

    border-radius:50%;

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

    transition:
        transform .3s,
        background .3s,
        color .3s,
        border-color .3s;
}

.vance-orders-back:hover{
    transform:
        translateX(-4px)
        scale(1.04);

    color:#d0d0d0;

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

    border-color:
        rgba(255,255,255,.16);
}

#myOrdersList{
    max-height:48vh;

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

    padding-right:3px;
}

.vance-no-orders{
    padding:21px 15px;

    text-align:center;

    color:#888;

    font-size:10px;

    line-height:1.6;

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

    border-radius:15px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.018)
        );

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}


/* ======================================================
   SIGN OUT
====================================================== */

.signout-btn{
    opacity:1;
    pointer-events:auto;
}

#loggedInAccount .vance-sign-out{
    min-width:128px;

    height:39px;

    margin:17px auto 0;

    padding:0 18px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    opacity:1;

    pointer-events:auto;

    color:#999;

    border:
        1px solid
        rgba(255,255,255,.11)!important;

    border-radius:999px!important;

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

    font-size:8px;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.08em;

    transition:
        transform .3s,
        color .3s,
        border-color .3s,
        background .3s,
        box-shadow .3s;
}

#loggedInAccount .vance-sign-out svg{
    width:15px;
    height:15px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.5;

    stroke-linecap:round;

    stroke-linejoin:round;
}

#loggedInAccount .vance-sign-out:hover{
    transform:translateY(-3px);

    color:#d0d0d0;

    border-color:
        rgba(255,255,255,.2)!important;

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

    box-shadow:
        0 12px 28px
        rgba(0,0,0,.25);
}


/* ======================================================
   GOOGLE BUTTON
====================================================== */

.vance-google-login{
    margin-top:3px;
}

.vance-google-icon{
    border-radius:11px;

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

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


/* ======================================================
   ACCOUNT VIEW TRANSITIONS
====================================================== */

#loggedOutAccount,
#loggedInAccount{
    animation:
        vanceAuthStateIn
        .42s
        cubic-bezier(.16,.8,.25,1)
        both;
}

@keyframes vanceAuthStateIn{

    from{
        opacity:0;

        transform:
            translateY(12px)
            scale(.985);
    }

    to{
        opacity:1;

        transform:
            translateY(0)
            scale(1);
    }
}


/* ======================================================
   SHORT LAPTOP SCREEN
====================================================== */

@media(max-height:800px) and (min-width:601px){

    #accountModal .account-box.vance-auth-glass{
        margin:3vh auto;

        padding:25px 29px 22px;
    }

    .vance-account-brand{
        margin-bottom:17px;
    }

    .vance-account-heading{
        margin-bottom:15px;
    }

    .vance-account-user{
        margin-bottom:14px;
    }

    #loggedInAccount .account-menu{
        gap:6px;
    }

    .vance-auth-option,
    .vance-account-option{
        min-height:58px;
    }

    #loggedInAccount .vance-sign-out{
        margin-top:13px;
    }
}


/* ======================================================
   ACCOUNT MOBILE
====================================================== */

@media(max-width:600px){

    #accountModal .account-box.vance-auth-glass{
        width:calc(100vw - 24px);

        margin:3vh auto;

        padding:
            28px 19px
            23px;

        border-radius:26px;

        max-height:94vh;
    }

    #accountModal .vance-account-close{
        top:15px;
        right:15px;
    }

    .vance-account-brand{
        margin-bottom:20px;
    }

    .vance-account-logo{
        font-size:23px;
    }

    .vance-account-logo-sub{
        font-size:7px;
    }

    .vance-account-heading{
        margin-bottom:17px;
    }

    .vance-account-heading h1{
        font-size:32px;
    }

    .vance-account-heading p{
        font-size:10px;
    }

    .vance-account-user{
        gap:12px;

        padding:10px 11px;

        margin-bottom:15px;
    }

    .vance-avatar-holder,
    .vance-avatar-holder .account-profile-image,
    .vance-avatar-fallback{
        width:52px;
        height:52px;
    }

    .vance-avatar-holder{
        flex-basis:52px;
    }

    .vance-avatar-fallback{
        font-size:23px;
    }

    .vance-user-details h2{
        font-size:16px;
    }

    .vance-user-details .profile-email{
        font-size:9px;
    }

    .vance-auth-option,
    .vance-account-option{
        min-height:58px;

        grid-template-columns:
            35px
            1fr
            auto;

        gap:9px;

        padding:8px 11px;

        border-radius:15px!important;
    }

    .vance-auth-icon,
    .vance-option-icon{
        width:35px;
        height:35px;
    }

    .vance-auth-icon svg,
    .vance-option-icon svg{
        width:20px;
        height:20px;
    }

    .vance-auth-option-text strong,
    .vance-option-copy strong{
        font-size:13px;
    }

    .vance-auth-option-text small,
    .vance-option-copy small{
        font-size:8px;
    }

    .vance-auth-arrow,
    .vance-option-arrow{
        font-size:20px;
    }

    #accountModal .vance-auth-field{
        height:43px;
    }

    #accountModal .vance-email-signin{
        height:44px;
    }

    #loggedInAccount .vance-sign-out{
        height:38px;

        margin-top:15px;
    }

    .vance-orders-header h2{
        font-size:23px;
    }
}


/* ======================================================
   SMALL MOBILE
====================================================== */

@media(max-width:390px){

    #accountModal .account-box.vance-auth-glass{
        padding:
            25px 16px
            21px;
    }

    .vance-account-heading h1{
        font-size:30px;
    }

    .vance-account-logo{
        font-size:21px;
    }

    .vance-account-option{
        min-height:56px;
    }

    .vance-avatar-holder,
    .vance-avatar-holder .account-profile-image,
    .vance-avatar-fallback{
        width:49px;
        height:49px;
    }

    .vance-avatar-holder{
        flex-basis:49px;
    }

    .vance-user-details h2{
        font-size:15px;
    }
}


/* ======================================================
   REDUCED MOTION
====================================================== */

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

    *,
    *::before,
    *::after{
        scroll-behavior:auto!important;
    }

    #accountModal *,
    #accountModal *::before,
    #accountModal *::after{
        animation-duration:.01ms!important;
        animation-iteration-count:1!important;
        transition-duration:.01ms!important;
    }
}
/* ======================================================
   VANCE CEYLON — NEW GLASS MY ACCOUNT
   FINAL OVERRIDE
====================================================== */

/* MAIN ACCOUNT GLASS BOX */
#accountModal .account-box.vance-auth-glass{
    width:min(500px, calc(100vw - 32px));
    max-height:88vh;
    overflow-y:auto;

    margin:6vh auto;
    padding:32px 32px 28px;

    border:1px solid rgba(255,255,255,.13);
    border-radius:32px;

    background:
        radial-gradient(
            circle at 85% 8%,
            rgba(255,255,255,.065),
            transparent 34%
        ),
        linear-gradient(
            145deg,
            rgba(27,27,27,.82),
            rgba(7,7,7,.94)
        );

    box-shadow:
        0 40px 120px rgba(0,0,0,.75),
        inset 0 1px 0 rgba(255,255,255,.09);

    backdrop-filter:blur(35px) saturate(115%);
    -webkit-backdrop-filter:blur(35px) saturate(115%);
}


/* ======================================================
   LOGGED-IN PROFILE
====================================================== */

#loggedInAccount.vance-profile-panel{
    width:100%;
    color:#fff;
}


/* ======================================================
   BRAND
====================================================== */

.vance-profile-brand{
    text-align:center;
    margin-bottom:20px;
}

.vance-profile-brand-main{
    font-size:24px;
    font-weight:800;
    letter-spacing:.18em;
}

.vance-profile-brand-sub{
    margin-top:4px;

    font-size:7px;
    letter-spacing:.42em;

    color:rgba(255,255,255,.42);
}


/* ======================================================
   TITLE
====================================================== */

.vance-profile-title{
    text-align:center;
    margin-bottom:20px;
}

.vance-profile-title span{
    display:block;

    margin-bottom:6px;

    font-size:7px;
    font-weight:700;
    letter-spacing:.25em;

    color:rgba(255,255,255,.38);
}

.vance-profile-title h2{
    margin:0;

    font-size:34px;
    line-height:1;

    font-weight:400;
    letter-spacing:-1px;

    color:#fff;
}


/* ======================================================
   USER GLASS CARD
====================================================== */

.vance-profile-user{
    display:flex;
    align-items:center;

    gap:15px;

    padding:13px 15px;
    margin-bottom:18px;

    border:1px solid rgba(255,255,255,.10);
    border-radius:19px;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.060),
            rgba(255,255,255,.018)
        );

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

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}


/* PROFILE IMAGE */

.vance-profile-avatar{
    position:relative;

    width:58px;
    height:58px;

    flex:0 0 58px;
}

.vance-profile-avatar .account-profile-image,
.vance-profile-fallback{
    width:58px;
    height:58px;

    border-radius:50%;

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

.vance-profile-avatar .account-profile-image{
    object-fit:cover;
}

.vance-profile-fallback{
    display:flex;
    align-items:center;
    justify-content:center;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.12),
            rgba(255,255,255,.035)
        );

    color:#fff;

    font-size:25px;
    font-weight:500;
}


/* ONLINE DOT */

.vance-profile-online{
    position:absolute;

    right:1px;
    bottom:2px;

    width:11px;
    height:11px;

    border:2px solid #111;
    border-radius:50%;

    background:#fff;
}


/* ======================================================
   USER DETAILS
====================================================== */

.vance-profile-info{
    display:flex;
    flex-direction:column;

    min-width:0;
}

.vance-profile-info small{
    margin-bottom:4px;

    color:rgba(255,255,255,.35);

    font-size:7px;
    font-weight:700;

    letter-spacing:.18em;
}

.vance-profile-info strong{
    overflow:hidden;

    color:#fff;

    font-size:17px;
    font-weight:500;

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

.vance-profile-info span{
    margin-top:4px;

    overflow:hidden;

    color:rgba(255,255,255,.43);

    font-size:10px;

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


/* ======================================================
   GLASS MENU
====================================================== */

.vance-profile-menu{
    display:flex;
    flex-direction:column;

    gap:9px;
}


/* EACH GLASS OPTION */

.vance-profile-option{
    width:100%;
    min-height:64px;

    display:grid;

    grid-template-columns:
        40px
        1fr
        auto;

    align-items:center;

    gap:12px;

    padding:10px 14px;

    border:1px solid rgba(255,255,255,.09) !important;
    border-radius:18px !important;

    outline:none;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.050),
            rgba(255,255,255,.015)
        ) !important;

    color:#fff;

    font-family:inherit;
    text-align:left;

    cursor:pointer;

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

    transition:
        transform .30s ease,
        background .30s ease,
        border-color .30s ease,
        box-shadow .30s ease;
}


/* GLASS HOVER */

.vance-profile-option:hover{
    transform:
        translateY(-2px)
        translateX(2px);

    border-color:rgba(255,255,255,.19) !important;

    background:
        linear-gradient(
            110deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025)
        ) !important;

    box-shadow:
        0 14px 35px rgba(0,0,0,.28);
}


/* ======================================================
   OPTION ICON
====================================================== */

.vance-profile-option-icon{
    width:40px;
    height:40px;

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

    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;

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

    color:rgba(255,255,255,.72);
}

.vance-profile-option-icon svg{
    width:22px;
    height:22px;

    fill:none;

    stroke:currentColor;
    stroke-width:1.4;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* ======================================================
   OPTION TEXT
====================================================== */

.vance-profile-option-text{
    display:flex;
    flex-direction:column;

    gap:3px;
}

.vance-profile-option-text strong{
    color:rgba(255,255,255,.88);

    font-size:14px;
    font-weight:500;
}

.vance-profile-option-text small{
    color:rgba(255,255,255,.37);

    font-size:9px;
}


/* ARROW */

.vance-profile-arrow{
    color:rgba(255,255,255,.40);

    font-size:24px;

    transition:
        transform .30s ease,
        color .30s ease;
}

.vance-profile-option:hover .vance-profile-arrow{
    transform:translateX(4px);

    color:#fff;
}


/* ======================================================
   SIGN OUT — SMALL GLASS PILL
====================================================== */

#loggedInAccount .vance-profile-signout{
    min-width:135px;
    height:42px;

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

    gap:8px;

    margin:20px auto 0;
    padding:0 20px;

    border:1px solid rgba(255,255,255,.13) !important;
    border-radius:999px !important;

    background:rgba(255,255,255,.035) !important;

    color:rgba(255,255,255,.68);

    font-size:8px;
    font-weight:700;
    letter-spacing:.16em;

    cursor:pointer;

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease;
}

#loggedInAccount .vance-profile-signout svg{
    width:16px;
    height:16px;

    fill:none;

    stroke:currentColor;
    stroke-width:1.5;

    stroke-linecap:round;
    stroke-linejoin:round;
}

#loggedInAccount .vance-profile-signout:hover{
    background:#fff !important;
    color:#000;

    transform:translateY(-2px);
}


/* ======================================================
   MOBILE
====================================================== */

@media(max-width:600px){

    #accountModal .account-box.vance-auth-glass{
        width:calc(100vw - 22px);

        margin:4vh auto;

        padding:27px 18px 23px;

        border-radius:27px;
    }

    .vance-profile-brand{
        margin-bottom:17px;
    }

    .vance-profile-title{
        margin-bottom:17px;
    }

    .vance-profile-title h2{
        font-size:31px;
    }

    .vance-profile-user{
        gap:12px;

        padding:11px 12px;

        margin-bottom:16px;
    }

    .vance-profile-avatar,
    .vance-profile-avatar .account-profile-image,
    .vance-profile-fallback{
        width:52px;
        height:52px;
    }

    .vance-profile-avatar{
        flex-basis:52px;
    }

    .vance-profile-fallback{
        font-size:23px;
    }

    .vance-profile-info strong{
        font-size:15px;
    }

    .vance-profile-option{
        min-height:59px;

        grid-template-columns:
            36px
            1fr
            auto;

        gap:10px;

        padding:9px 11px;
    }

    .vance-profile-option-icon{
        width:36px;
        height:36px;
    }

    .vance-profile-option-icon svg{
        width:20px;
        height:20px;
    }

    .vance-profile-option-text strong{
        font-size:13px;
    }

    .vance-profile-option-text small{
        font-size:8px;
    }

    #loggedInAccount .vance-profile-signout{
        height:39px;
        margin-top:16px;
    }
}
/* ==========================================================
   VANCE CEYLON — PREMIUM MY ACCOUNT GLASS DESIGN
========================================================== */

#loggedInAccount{
    width:100%;
}


/* ================= BRAND ================= */

.vance-account-brand{
    text-align:center;
    margin-bottom:28px;
}

.vance-account-logo{
    color:#f3f3f3;
    font-size:27px;
    font-weight:800;
    letter-spacing:.34em;
    line-height:1;
}

.vance-account-logo-sub{
    margin-top:7px;

    color:#777;

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

    letter-spacing:.55em;
}


/* ================= HEADING ================= */

.vance-account-heading{
    margin-bottom:24px;
}

.vance-account-tagline{
    margin-bottom:7px;

    color:#8b8b8b;

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

    letter-spacing:.24em;

    text-transform:uppercase;
}

.vance-account-heading h1{
    margin:0;

    color:#f5f5f5;

    font-size:40px;
    font-weight:400;

    line-height:1.05;

    letter-spacing:-.04em;
}


/* ================= PROFILE CARD ================= */

.vance-account-user{
    position:relative;

    display:flex;
    align-items:center;

    gap:17px;

    padding:15px 17px;

    margin-bottom:25px;

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

    border-radius:23px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.012)
        );

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

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease;
}

.vance-account-user:hover{
    transform:translateY(-3px);

    border-color:
        rgba(255,255,255,.16);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.065),
            rgba(255,255,255,.018)
        );
}


/* ================= AVATAR ================= */

.vance-avatar-holder{
    position:relative;

    width:70px;
    height:70px;

    flex:0 0 70px;
}

.vance-avatar-holder
.account-profile-image,

.vance-avatar-fallback{
    width:70px;
    height:70px;

    border-radius:50%;

    object-fit:cover;
}

.vance-avatar-fallback{
    display:flex;

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

    color:white;

    background:
        linear-gradient(
            145deg,
            #38a996,
            #08796d
        );

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

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.28);

    font-size:31px;
    font-weight:500;
}

.vance-profile-status{
    position:absolute;

    right:1px;
    bottom:4px;

    width:11px;
    height:11px;

    background:#eee;

    border:
        2px solid
        #161616;

    border-radius:50%;
}


/* ================= PROFILE TEXT ================= */

.vance-user-details{
    min-width:0;
}

.profile-welcome{
    margin-bottom:5px;

    color:#8e8e8e;

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

    letter-spacing:.17em;

    text-transform:uppercase;
}

.vance-user-details h2{
    margin:0 0 5px;

    color:#f3f3f3;

    font-size:20px;
    font-weight:500;

    letter-spacing:-.025em;
}

.vance-user-details
.profile-email{
    color:#9a9a9a;

    font-size:11px;

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


/* ================= MENU ================= */

#loggedInAccount .account-menu{
    display:flex;

    flex-direction:column;

    gap:10px;
}


/* ================= GLASS OPTION ================= */

.vance-account-option{
    width:100%;

    min-height:72px;

    display:grid;

    grid-template-columns:
        44px
        1fr
        auto;

    align-items:center;

    gap:13px;

    padding:
        11px
        16px;

    color:#e8e8e8;

    text-align:left;

    border:
        1px solid
        rgba(255,255,255,.10) !important;

    border-radius:
        20px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018)
        ) !important;

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

    cursor:pointer;

    transition:
        transform .35s ease,
        background .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}

.vance-account-option:hover{
    transform:
        translateY(-3px)
        translateX(2px);

    border-color:
        rgba(255,255,255,.18) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.085),
            rgba(255,255,255,.025)
        ) !important;

    box-shadow:
        0 13px 32px
        rgba(0,0,0,.18),
        inset 0 1px 0
        rgba(255,255,255,.055);
}


/* ================= ICON ================= */

.vance-option-icon{
    width:42px;
    height:42px;

    display:flex;

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

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

    border-radius:14px;

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

    transition:
        transform .35s ease,
        background .35s ease;
}

.vance-option-icon svg{
    width:23px;
    height:23px;

    fill:none;

    stroke:#dedede;

    stroke-width:1.45;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.vance-account-option:hover
.vance-option-icon{
    transform:scale(1.05);

    background:
        rgba(255,255,255,.055);
}


/* ================= OPTION TEXT ================= */

.vance-option-copy{
    display:flex;

    flex-direction:column;

    gap:4px;
}

.vance-option-copy strong{
    color:#ececec;

    font-size:16px;
    font-weight:500;
}

.vance-option-copy small{
    color:#888;

    font-size:9px;
    font-weight:400;
}


/* ================= ARROW ================= */

.vance-option-arrow{
    color:#a3a3a3;

    font-size:28px;
    font-weight:200;

    line-height:1;

    transition:
        transform .3s ease,
        color .3s ease;
}

.vance-account-option:hover
.vance-option-arrow{
    color:#fff;

    transform:
        translateX(4px);
}


/* ================= SIGN OUT ================= */

.signout-btn{
    opacity:1;
    pointer-events:auto;
}

#loggedInAccount
.vance-sign-out{
    min-width:145px;

    height:45px;

    margin:
        22px auto
        0;

    padding:
        0 22px;

    display:flex;

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

    gap:9px;

    color:#999;

    border:
        1px solid
        rgba(255,255,255,.11) !important;

    border-radius:
        999px !important;

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

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

    letter-spacing:.08em;

    transition:
        transform .3s ease,
        color .3s ease,
        background .3s ease,
        border-color .3s ease;
}

#loggedInAccount
.vance-sign-out svg{
    width:17px;
    height:17px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.5;

    stroke-linecap:round;
    stroke-linejoin:round;
}

#loggedInAccount
.vance-sign-out:hover{
    transform:translateY(-3px);

    color:#ddd;

    border-color:
        rgba(255,255,255,.20) !important;

    background:
        rgba(255,255,255,.045);
}


/* ================= MOBILE ================= */

@media(max-width:600px){

    .vance-account-brand{
        margin-bottom:22px;
    }

    .vance-account-logo{
        font-size:24px;
    }

    .vance-account-heading h1{
        font-size:35px;
    }

    .vance-account-user{
        gap:14px;

        padding:12px;

        margin-bottom:20px;
    }

    .vance-avatar-holder,
    .vance-avatar-holder
    .account-profile-image,
    .vance-avatar-fallback{
        width:60px;
        height:60px;
    }

    .vance-avatar-holder{
        flex-basis:60px;
    }

    .vance-avatar-fallback{
        font-size:27px;
    }

    .vance-user-details h2{
        font-size:18px;
    }

    .vance-account-option{
        min-height:65px;

        grid-template-columns:
            39px
            1fr
            auto;

        gap:10px;

        padding:
            9px
            12px;
    }

    .vance-option-icon{
        width:38px;
        height:38px;
    }

    .vance-option-icon svg{
        width:21px;
        height:21px;
    }

    .vance-option-copy strong{
        font-size:15px;
    }

    #loggedInAccount
    .vance-sign-out{
        height:42px;

        margin-top:18px;
    }
}
/* ==========================================================
   VANCE CEYLON
   PREMIUM GLASS MY ACCOUNT — LOGGED IN ONLY
========================================================== */

#loggedInAccount{
    width:100%;
}


/* ==========================================================
   BRAND — KEEP VANCE CEYLON ON ONE STRAIGHT LINE
========================================================== */

#loggedInAccount .vance-account-brand{
    width:100%;
    margin:0 0 27px;
    text-align:center;
}

#loggedInAccount .vance-account-logo{
    display:block;
    width:100%;

    color:#f2f2f2;

    font-size:23px;
    font-weight:700;

    letter-spacing:.25em;
    line-height:1;

    white-space:nowrap;

    text-align:center;
}


/* ==========================================================
   HEADING
========================================================== */

#loggedInAccount .vance-account-heading{
    margin-bottom:22px;
}

#loggedInAccount .vance-account-tagline{
    margin-bottom:7px;

    color:rgba(255,255,255,.42);

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

    letter-spacing:.23em;

    text-transform:uppercase;
}

#loggedInAccount .vance-account-heading h1{
    margin:0;

    color:#f4f4f4;

    font-size:39px;
    font-weight:400;

    line-height:1.05;
    letter-spacing:-.04em;
}


/* ==========================================================
   PROFILE GLASS CARD
========================================================== */

#loggedInAccount .vance-account-user{
    position:relative;

    display:flex;
    align-items:center;

    gap:16px;

    padding:14px 16px;

    margin-bottom:22px;

    border:1px solid rgba(255,255,255,.11);
    border-radius:22px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.060),
            rgba(255,255,255,.018)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.05),
        0 15px 40px rgba(0,0,0,.12);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    transition:
        transform .3s ease,
        border-color .3s ease,
        background .3s ease;
}

#loggedInAccount .vance-account-user:hover{
    transform:translateY(-2px);

    border-color:rgba(255,255,255,.18);

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.080),
            rgba(255,255,255,.025)
        );
}


/* ==========================================================
   AVATAR
========================================================== */

#loggedInAccount .vance-avatar-holder{
    position:relative;

    width:64px;
    height:64px;

    flex:0 0 64px;
}

#loggedInAccount .account-profile-image,
#loggedInAccount .vance-avatar-fallback{
    width:64px;
    height:64px;

    border-radius:50%;
}

#loggedInAccount .account-profile-image{
    display:block;

    object-fit:cover;

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

#loggedInAccount .vance-avatar-fallback{
    display:flex;

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

    color:#fff;

    background:
        linear-gradient(
            145deg,
            #3da995,
            #08766b
        );

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

    box-shadow:
        0 10px 28px rgba(0,0,0,.30);

    font-size:28px;
    font-weight:500;
}

#loggedInAccount .vance-profile-status{
    position:absolute;

    right:0;
    bottom:3px;

    width:11px;
    height:11px;

    border:2px solid #171717;
    border-radius:50%;

    background:#f3f3f3;
}


/* ==========================================================
   PROFILE DETAILS
========================================================== */

#loggedInAccount .vance-user-details{
    min-width:0;
    flex:1;
}

#loggedInAccount .profile-welcome{
    margin-bottom:5px;

    color:rgba(255,255,255,.45);

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

    letter-spacing:.16em;

    text-transform:uppercase;
}

#loggedInAccount .vance-user-details h2{
    margin:0 0 5px;

    color:#f4f4f4;

    font-size:19px;
    font-weight:500;

    line-height:1.15;

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

#loggedInAccount .profile-email{
    color:rgba(255,255,255,.50);

    font-size:10px;

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


/* ==========================================================
   ACCOUNT MENU
========================================================== */

#loggedInAccount .account-menu{
    display:flex;
    flex-direction:column;

    gap:10px;
}


/* ==========================================================
   GLASS OPTION CARDS
========================================================== */

#loggedInAccount .vance-account-option{
    width:100%;
    min-height:68px;

    display:grid;

    grid-template-columns:42px 1fr auto;

    align-items:center;

    gap:13px;

    padding:10px 15px;

    color:#eee;

    text-align:left;

    border:1px solid rgba(255,255,255,.11) !important;

    border-radius:20px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.060),
            rgba(255,255,255,.018)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 12px 30px rgba(0,0,0,.10);

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

    cursor:pointer;

    transition:
        transform .30s ease,
        border-color .30s ease,
        background .30s ease,
        box-shadow .30s ease;
}

#loggedInAccount .vance-account-option:hover{
    transform:
        translateY(-3px)
        translateX(2px);

    border-color:rgba(255,255,255,.20) !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.095),
            rgba(255,255,255,.028)
        ) !important;

    box-shadow:
        0 15px 35px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.06);
}


/* ==========================================================
   OPTION ICONS
========================================================== */

#loggedInAccount .vance-option-icon{
    width:40px;
    height:40px;

    display:flex;

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

    border:1px solid rgba(255,255,255,.07);
    border-radius:13px;

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

    transition:
        transform .30s ease,
        background .30s ease,
        border-color .30s ease;
}

#loggedInAccount .vance-option-icon svg{
    width:22px;
    height:22px;

    fill:none;

    stroke:#e7e7e7;
    stroke-width:1.5;

    stroke-linecap:round;
    stroke-linejoin:round;
}

#loggedInAccount
.vance-account-option:hover
.vance-option-icon{
    transform:scale(1.05);

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

    border-color:rgba(255,255,255,.12);
}


/* ==========================================================
   OPTION TEXT
========================================================== */

#loggedInAccount .vance-option-copy{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:3px;
}

#loggedInAccount .vance-option-copy strong{
    color:#f1f1f1;

    font-size:15px;
    font-weight:500;

    line-height:1.2;
}

#loggedInAccount .vance-option-copy small{
    color:rgba(255,255,255,.43);

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

    line-height:1.3;
}


/* ==========================================================
   ARROWS
========================================================== */

#loggedInAccount .vance-option-arrow{
    color:rgba(255,255,255,.55);

    font-size:27px;
    font-weight:200;

    line-height:1;

    transition:
        transform .30s ease,
        color .30s ease;
}

#loggedInAccount
.vance-account-option:hover
.vance-option-arrow{
    color:#fff;

    transform:translateX(4px);
}


/* ==========================================================
   SIGN OUT
========================================================== */

#loggedInAccount .vance-sign-out{
    min-width:140px;
    height:43px;

    margin:21px auto 0;

    padding:0 21px;

    display:flex;

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

    gap:9px;

    color:rgba(255,255,255,.52);

    border:1px solid rgba(255,255,255,.12) !important;

    border-radius:999px !important;

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

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

    letter-spacing:.12em;

    cursor:pointer;

    opacity:1;
    pointer-events:auto;

    transition:
        transform .30s ease,
        color .30s ease,
        border-color .30s ease,
        background .30s ease;
}

#loggedInAccount .vance-sign-out svg{
    width:16px;
    height:16px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.5;

    stroke-linecap:round;
    stroke-linejoin:round;
}

#loggedInAccount .vance-sign-out:hover{
    transform:translateY(-3px);

    color:#fff;

    border-color:rgba(255,255,255,.23) !important;

    background:rgba(255,255,255,.055);
}


/* ==========================================================
   MY ORDERS
========================================================== */

#loggedInAccount .vance-orders-section{
    width:100%;
}

#loggedInAccount .vance-orders-header{
    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:20px;
}

#loggedInAccount .vance-orders-header h2{
    margin:2px 0 7px;

    color:#f4f4f4;

    font-size:29px;
    font-weight:400;
}

#loggedInAccount .vance-orders-back{
    width:38px;
    height:38px;

    flex:0 0 38px;

    display:flex;

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

    color:#eee;

    border:1px solid rgba(255,255,255,.11);
    border-radius:50%;

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

    cursor:pointer;
}

#loggedInAccount .vance-delivery-note{
    margin:0;

    color:rgba(255,255,255,.47);

    font-size:10px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width:600px){

    #loggedInAccount .vance-account-brand{
        margin-bottom:22px;
    }

    #loggedInAccount .vance-account-logo{
        font-size:19px;
        letter-spacing:.20em;
    }

    #loggedInAccount .vance-account-heading h1{
        font-size:34px;
    }

    #loggedInAccount .vance-account-user{
        gap:13px;

        padding:12px;

        margin-bottom:18px;
    }

    #loggedInAccount .vance-avatar-holder,
    #loggedInAccount .account-profile-image,
    #loggedInAccount .vance-avatar-fallback{
        width:56px;
        height:56px;
    }

    #loggedInAccount .vance-avatar-holder{
        flex-basis:56px;
    }

    #loggedInAccount .vance-avatar-fallback{
        font-size:25px;
    }

    #loggedInAccount .vance-user-details h2{
        font-size:17px;
    }

    #loggedInAccount .vance-account-option{
        min-height:63px;

        grid-template-columns:38px 1fr auto;

        gap:10px;

        padding:9px 12px;

        border-radius:17px !important;
    }

    #loggedInAccount .vance-option-icon{
        width:37px;
        height:37px;

        border-radius:11px;
    }

    #loggedInAccount .vance-option-icon svg{
        width:20px;
        height:20px;
    }

    #loggedInAccount .vance-option-copy strong{
        font-size:14px;
    }

    #loggedInAccount .vance-option-copy small{
        font-size:8px;
    }

    #loggedInAccount .vance-sign-out{
        height:41px;

        margin-top:18px;
    }
}
/* Targeted profile repair and compact order popup */
#accountModal.is-signed-in .account-box > .vance-account-brand { display:none; }
#accountModal.is-signed-in .account-box.vance-auth-glass { width:min(540px, calc(100vw - 32px)); }
#loggedInAccount .vance-account-logo-sub { margin-top:8px; }
#loggedInAccount .vance-user-details .profile-welcome { display:block; }
#loggedInAccount .vance-option-copy { min-width:0; }
#loggedInAccount .vance-option-copy strong { white-space:normal; }
#loggedInAccount button:focus-visible, .vance-order-dialog button:focus-visible { outline:2px solid white; outline-offset:4px; }
.vance-order-dialog {
    box-sizing:border-box; margin:auto; width:min(460px, calc(100vw - 32px));
    max-height:80vh; padding:30px 24px; overflow:auto;
    color:#f4f4f4; background:linear-gradient(145deg,#252525,#0b0b0b);
    border:1px solid #ffffff30; border-radius:24px; box-shadow:0 30px 90px #000b;
}
.vance-order-dialog[open] { animation:vanceOrdersOpen .25s ease both; }
.vance-order-dialog::backdrop { background:#0009; backdrop-filter:blur(6px); }
.vance-order-dialog .vance-orders-header { padding-right:32px; }
.vance-order-dialog .vance-orders-header span { font-size:9px; letter-spacing:.15em; color:#aaa; }
.vance-order-dialog .vance-orders-header h2 { margin-top:8px; font-size:28px; }
.vance-order-close { position:absolute; top:14px; right:14px; width:32px; height:32px; border:1px solid #ffffff30; border-radius:50%; background:#ffffff0d; color:white; font-size:24px; cursor:pointer; }
.vance-order-dialog .vance-delivery-note { margin:20px 0; padding:16px; background:#ffffff09; border:1px solid #ffffff22; border-radius:14px; font-size:14px; line-height:1.7; }
.vance-order-dialog .vance-delivery-note small { color:#aaa; font-size:12px; }
@media (prefers-reduced-motion:reduce) { .vance-order-dialog[open] { animation:none; } }
/* VANCE SMART CART */

.vance-cart-backdrop {
    position: fixed;
    inset: 0;
    z-index: 2099;
    background: #0009;
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s, visibility .3s;
}

.vance-cart-backdrop.open {
    opacity: 1;
    visibility: visible;
}

#cartDrawer {
    width: min(490px, 100%);
    padding: 28px;
    height: 100dvh;
    bottom: auto;
    color: #f5f5f5;
    background: linear-gradient(145deg, #232323f5, #090909fa);
    border-left: 1px solid #ffffff26;
    box-shadow: -20px 0 80px #0006;
    visibility: hidden;
    transition: transform .35s ease, visibility .35s;
}

#cartDrawer.open {
    visibility: visible;
}

#cartDrawer .cart-head {
    gap: 16px;
    flex-shrink: 0;
    padding-bottom: 22px;
}

#cartDrawer .vance-cart-eyebrow {
    display: block;
    font-size: 10px;
    letter-spacing: .28em;
    color: #aaa;
    margin-bottom: 10px;
}

#cartDrawer h2 {
    margin: 0;
    font-size: 36px;
    font-weight: 500;
    letter-spacing: -.04em;
}

#cartDrawer h2 span {
    color: #888;
}

#cartDrawer #cartSummary {
    margin-top: 8px;
    font-size: 12px;
    color: #aaa;
}

#cartDrawer .vance-cart-close {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border: 1px solid #ffffff30;
    border-radius: 50%;
    background: #ffffff08;
    color: #fff;
    font-size: 26px;
    cursor: pointer;
}

#cartDrawer .cart-items {
    min-height: 0;
    padding: 8px 0;
    overscroll-behavior: contain;
}

#cartDrawer .cart-item {
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 16px;
    padding: 20px 0;
}

#cartDrawer .vance-cart-image {
    padding: 0;
    background: #151515;
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    align-self: start;
    cursor: pointer;
}

#cartDrawer .cart-item img {
    display: block;
    width: 86px;
    height: 112px;
    object-fit: cover;
}

#cartDrawer .vance-cart-name {
    border: 0;
    background: none;
    padding: 0;
    text-align: left;
    color: #f5f5f5;
    font: inherit;
    font-size: 14px;
    line-height: 1.5;
    cursor: pointer;
    overflow-wrap: anywhere;
}

#cartDrawer .vance-cart-variant {
    color: #aaa;
    font-size: 11px;
    margin: 5px 0 10px;
}

#cartDrawer .vance-cart-line-total {
    display: block;
    font-size: 14px;
}

#cartDrawer .vance-cart-controls {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    flex-wrap: wrap;
}

#cartDrawer .vance-cart-quantity {
    display: flex;
    align-items: center;
    border: 1px solid #ffffff26;
    border-radius: 999px;
    overflow: hidden;
}

#cartDrawer .vance-cart-quantity button {
    width: 36px;
    height: 36px;
    border: 0;
    background: transparent;
    color: white;
    font-size: 18px;
    cursor: pointer;
}

#cartDrawer .vance-cart-quantity span {
    min-width: 26px;
    text-align: center;
    font-size: 12px;
}

#cartDrawer .remove {
    min-height: 36px;
    color: #bbb;
    text-decoration: underline;
    cursor: pointer;
}

#cartDrawer button:disabled {
    opacity: .35;
    cursor: not-allowed;
}

#cartDrawer .cart-total {
    flex-shrink: 0;
    padding-top: 18px;
}

#cartDrawer .cart-total-row {
    font-size: 14px;
    margin-bottom: 12px;
}

#cartDrawer #cartTotal {
    font-size: 23px;
}

#cartDrawer .vance-cart-delivery {
    font-size: 11px;
    line-height: 1.7;
    color: #999;
    margin-bottom: 16px;
}

#cartDrawer .vance-cart-delivery strong {
    color: #ddd;
    font-weight: 500;
}

#cartDrawer .vance-cart-checkout {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 20px;
    border: 0;
    border-radius: 14px;
    background: white;
    color: #111;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

#cartDrawer .vance-cart-continue {
    width: 100%;
    min-height: 44px;
    margin-top: 8px;
    border: 0;
    background: transparent;
    color: #ddd;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

#cartDrawer .vance-cart-saved {
    text-align: center;
    color: #888;
    font-size: 10px;
    line-height: 1.5;
    margin: 4px 0 0;
}

#cartDrawer .vance-cart-empty {
    padding: 45px 12px;
    text-align: center;
    color: #aaa;
}

#cartDrawer .vance-cart-empty strong {
    display: block;
    font-size: 20px;
    color: #fff;
    margin-bottom: 10px;
}

#cartDrawer .vance-cart-empty p {
    font-size: 13px;
    line-height: 1.7;
}

#cartDrawer button:focus-visible,
#vanceBackToCart:focus-visible {
    outline: 2px solid white;
    outline-offset: 3px;
}

#vanceBackToCart {
    margin-bottom: 18px;
    padding: 12px 18px;
    border: 1px solid #ffffff40;
    border-radius: 999px;
    background: #171717;
    color: #fff;
    cursor: pointer;
}

@media (max-width: 520px) {
    #cartDrawer {
        padding: 22px 18px;
    }

    #cartDrawer h2 {
        font-size: 30px;
    }
}

@media (max-height: 650px) {
    #cartDrawer {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    #cartDrawer .cart-head {
        padding-bottom: 12px;
    }

    #cartDrawer .vance-cart-delivery {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    #cartDrawer,
    .vance-cart-backdrop {
        transition: none;
    }
}
/* =========================================================
   VANCE CEYLON — MINIMAL CHECKOUT
========================================================= */

#vanceCheckout {
    box-sizing: border-box;

    width: min(520px, calc(100vw - 24px));
    max-height: 90dvh;

    margin: auto;
    padding: 26px;

    color: #f4f4f4;

    background: linear-gradient(
        145deg,
        #252525,
        #0b0b0b
    );

    border: 1px solid #ffffff26;
    border-radius: 28px;

    box-shadow: 0 30px 100px #0009;

    overflow-y: auto;
    overscroll-behavior: contain;

    font-family: inherit;
}

#vanceCheckout::backdrop {
    background: #000a;
    backdrop-filter: blur(12px);
}

#vanceCheckout[open] {
    animation: vcEnter .25s ease both;
}

#vanceCheckout [hidden] {
    display: none !important;
}

/* TOP CONTROLS */

#vanceCheckout .vc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
    margin-bottom: 20px;
}

#vanceCheckout .vc-back {
    border: 0;
    padding: 10px 0;

    color: #ccc;
    background: none;

    font: inherit;
    font-size: 12px;

    cursor: pointer;
}

#vanceCheckout .vc-close {
    width: 38px;
    height: 38px;

    border: 1px solid #ffffff30;
    border-radius: 50%;

    background: #ffffff08;
    color: white;

    font-size: 24px;
    cursor: pointer;
}

/* BRAND AND HEADING */

#vanceCheckout .vc-brand {
    text-align: center;

    font-size: 23px;
    font-weight: 700;
    letter-spacing: .3em;

    margin-bottom: 28px;
}

#vanceCheckout .vc-brand small {
    display: block;

    margin-top: 5px;

    font-size: 8px;
    letter-spacing: .4em;

    color: #aaa;
}

#vanceCheckout .vc-eyebrow {
    font-size: 8px;
    letter-spacing: .22em;

    color: #999;
    margin: 0 0 8px;
}

#vanceCheckout h2 {
    margin: 0;

    font-size: 36px;
    font-weight: 400;
    letter-spacing: -.04em;
}

#vanceCheckout .vc-intro {
    margin: 8px 0 26px;

    font-size: 12px;
    color: #aaa;
}

/* DELIVERY FORM */

#vanceCheckout fieldset {
    min-width: 0;
    padding: 0;

    border: 0;
    margin: 0 0 25px;
}

#vanceCheckout legend {
    margin-bottom: 14px;

    font-size: 11px;
    letter-spacing: .06em;

    color: #ccc;
}

#vanceCheckout .vc-fields label {
    display: block;

    color: #aaa;
    font-size: 11px;

    margin-bottom: 12px;
}

#vanceCheckout .vc-fields input {
    box-sizing: border-box;
    display: block;

    width: 100%;
    margin-top: 7px;
    padding: 13px;

    border: 1px solid #ffffff22;
    border-radius: 11px;

    color: #fff;
    background: #ffffff05;

    font: inherit;
    font-size: 14px;
}

#vanceCheckout input::placeholder {
    color: #777;
}

#vanceCheckout .vc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* PAYMENT METHODS */

#vanceCheckout .vc-method {
    display: flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 9px;
    padding: 15px;

    border: 1px solid #ffffff22;
    border-radius: 15px;

    background: #ffffff04;
    cursor: pointer;
}

#vanceCheckout .vc-method:has(input:checked) {
    border-color: #ffffffa0;
    background: #ffffff0d;
}

#vanceCheckout .vc-method input {
    accent-color: #fff;

    width: 16px;
    height: 16px;

    flex-shrink: 0;
}

#vanceCheckout .vc-method strong {
    display: block;

    font-size: 13px;
    font-weight: 500;
}

#vanceCheckout .vc-method small {
    display: block;

    margin-top: 5px;

    color: #999;
    font-size: 10px;
}

#vanceCheckout .vc-method-icon {
    margin-left: auto;

    font-size: 10px;
    white-space: nowrap;

    color: #bbb;
}

/* SUMMARY */

#vanceCheckout .vc-summary {
    padding: 17px;
    margin-bottom: 18px;

    border: 1px solid #ffffff1f;
    border-radius: 15px;

    background: #ffffff04;
}

#vanceCheckout .vc-summary > div {
    display: flex;
    justify-content: space-between;

    gap: 16px;

    font-size: 12px;
    margin-bottom: 12px;
}

#vanceCheckout .vc-summary > div:nth-child(2) {
    color: #aaa;
    font-size: 11px;
}

#vanceCheckout .vc-summary p {
    color: #999;

    font-size: 10px;
    line-height: 1.8;

    margin: 14px 0 0;
}

#vanceCheckout .vc-summary p strong {
    color: #ccc;
    font-weight: 500;
}

/* BUTTONS */

#vanceCheckout .vc-primary {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;
    min-height: 48px;

    padding: 14px 18px;

    border: 0;
    border-radius: 12px;

    background: #f4f4f4;
    color: #111;

    font: inherit;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;
}

#vanceCheckout .vc-primary:disabled {
    opacity: .4;
    cursor: not-allowed;
}

#vanceCheckout .vc-preview {
    margin: 12px 0 0;

    text-align: center;

    font-size: 10px;
    line-height: 1.6;

    color: #999;
}

/* REVIEW */

#vanceCheckout .vc-review-details {
    white-space: pre-wrap;
    overflow-wrap: anywhere;

    font-size: 13px;
    line-height: 1.9;

    padding: 18px;
    margin: 16px 0;

    border: 1px solid #ffffff22;
    border-radius: 14px;
}

#vanceCheckout .vc-notice {
    color: #bbb;

    font-size: 12px;
    line-height: 1.7;

    margin-bottom: 20px;
}

#vanceCheckout button:focus-visible,
#vanceCheckout input:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ANIMATION AND MOBILE */

@keyframes vcEnter {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 480px) {
    #vanceCheckout {
        padding: 20px;
        border-radius: 22px;
    }

    #vanceCheckout .vc-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #vanceCheckout[open] {
        animation: none;
    }
}
/* =========================================================
   VANCE CEYLON — BRAND NAME ON ONE STRAIGHT LINE
========================================================= */

/* SIGN IN, MY ACCOUNT AND CHECKOUT */

#accountModal .vance-account-brand,
#vanceCheckout .vc-brand {
    display: flex;
    align-items: baseline;
    justify-content: center;

    flex-wrap: nowrap;
    gap: .32em;

    width: 100%;

    color: #f4f4f4;

    font-family: inherit;
    font-size: clamp(18px, 5vw, 23px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .12em;

    white-space: nowrap;
    text-align: center;
}

/* MAKE VANCE AND CEYLON THE SAME SIZE */

#accountModal .vance-account-brand .vance-account-logo,
#accountModal .vance-account-brand .vance-account-logo-sub,
#vanceCheckout .vc-brand small {
    display: inline;
    flex: 0 0 auto;

    width: auto;
    margin: 0;
    padding: 0;

    color: inherit;

    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;

    white-space: nowrap;
}

/* CART BRAND NAME */

#cartDrawer .vance-cart-eyebrow {
    display: block;

    color: #f4f4f4;

    font-family: inherit;
    font-size: clamp(16px, 4.5vw, 20px);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .12em;

    white-space: nowrap;

    margin-bottom: 14px;
}
/* =========================================================
   CART SCROLL + PRODUCT QUANTITY AND COLORS
========================================================= */

#cartDrawer {
    box-sizing: border-box;

    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

#cartDrawer .cart-head,
#cartDrawer .cart-total {
    flex: 0 0 auto;
}

#cartDrawer #cartItems {
    flex: 1 1 0;
    min-height: 0;

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

    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
    scrollbar-color: #888 #191919;
    scrollbar-gutter: stable;
}

#cartDrawer #cartItems::-webkit-scrollbar {
    width: 6px;
}

#cartDrawer #cartItems::-webkit-scrollbar-track {
    background: #191919;
}

#cartDrawer #cartItems::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 9px;
}

#cartDrawer .cart-item {
    flex-shrink: 0;
}

/* QUANTITY SELECTOR */

#productModal .vance-product-quantity {
    margin-top: 22px;
}

#productModal .vance-product-quantity label {
    display: block;
    margin-bottom: 10px;

    color: #aaa;
    font-size: 12px;
}

#productModal .vance-quantity-stepper {
    display: inline-flex;
    align-items: center;

    border: 1px solid #ffffff35;
    border-radius: 12px;

    overflow: hidden;
}

#productModal .vance-quantity-stepper button {
    width: 44px;
    height: 44px;

    color: #fff;
    background: #ffffff08;

    border: 0;
    font-size: 20px;

    cursor: pointer;
}

#productModal #vanceProductQuantity {
    width: 72px;
    height: 44px;

    padding: 0 5px;

    text-align: center;
    color: #fff;
    background: #111;

    border: 0;
    font: inherit;
}

/* COLOR OPTIONS */

#productModal #colorOptions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#productModal #colorOptions .opt {
    display: inline-flex;
    align-items: center;

    gap: 8px;
    min-height: 40px;
}

#productModal .vance-color-dot {
    width: 14px;
    height: 14px;

    border-radius: 50%;
    border: 1px solid #ffffff70;

    flex-shrink: 0;
}

#productModal .vance-quantity-stepper :focus-visible {
    outline: 2px solid white;
    outline-offset: -3px;
}

/* SHORT SCREENS: ALLOW THE WHOLE CART TO SCROLL */

@media (max-height: 520px) {
    #cartDrawer {
        overflow-y: auto;
    }

    #cartDrawer #cartItems {
        flex: 1 0 auto;
        overflow-y: visible;
    }
}
/* BUY NOW AND CHECKOUT ITEM DETAILS */

#vanceBuyNow {
    width: 100%;
    min-height: 48px;
    margin-top: 10px;

    border: 1px solid #ffffff55;
    border-radius: 12px;

    background: transparent;
    color: #fff;

    font: inherit;
    cursor: pointer;
}

#vanceBuyNow:hover {
    background: #ffffff0c;
}

#vanceCheckout .vb-items {
    border: 1px solid #ffffff22;
    border-radius: 14px;

    padding: 16px;
    margin: 0 0 20px;
}

#vanceCheckout .vb-items h3 {
    font-size: 13px;
    font-weight: 500;
    margin: 0 0 14px;
}

#vanceCheckout .vb-item-list {
    max-height: 230px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

#vanceCheckout .vb-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;

    gap: 10px;
    padding: 12px 0;

    border-top: 1px solid #ffffff14;
}

#vanceCheckout .vb-item:first-child {
    border-top: 0;
}

#vanceCheckout .vb-item img {
    width: 48px;
    height: 62px;

    object-fit: cover;
    border-radius: 7px;
    background: #111;
}

#vanceCheckout .vb-item strong {
    display: block;

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

    overflow-wrap: anywhere;
}

#vanceCheckout .vb-item small {
    display: block;

    color: #aaa;
    font-size: 10px;
    line-height: 1.7;

    margin-top: 3px;
}

#vanceCheckout .vb-item-price {
    font-size: 12px;
    white-space: nowrap;
}

#vanceCheckout .vb-edit-cart {
    padding: 8px 0;

    border: 0;
    background: none;

    color: #ddd;
    text-decoration: underline;
    font-size: 11px;

    cursor: pointer;
}

#vanceCheckout #vancePaymentAction {
    margin: 16px 0 10px;
}

#vanceCheckout #vancePaymentAction:disabled {
    opacity: .55;
    cursor: not-allowed;
}

#vanceBuyNow:focus-visible {
    outline: 2px solid white;
    outline-offset: 3px;
}/* Hide decorative account arrows */
.vance-auth-arrow,
.vance-option-arrow {
  display: none !important;
}

/* Clear back and edit buttons */
#vanceCheckout .vc-back,
#vanceCheckout .vb-edit-cart,
#vanceCheckout #vcEdit,
#cartDrawer .vance-cart-continue {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 12px;
  background: #191919;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

#vanceCheckout #vcEdit {
  width: 100%;
  margin-top: 12px;
}

#vanceCheckout .vc-back:hover,
#vanceCheckout .vb-edit-cart:hover,
#vanceCheckout #vcEdit:hover,
#cartDrawer .vance-cart-continue:hover {
  background: #2a2a2a;
  border-color: #fff;
}

#vanceCheckout .vc-back:focus-visible,
#vanceCheckout .vb-edit-cart:focus-visible,
#vanceCheckout #vcEdit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

#cartDrawer .vance-cart-checkout {
  justify-content: center;
}
/* VANCE CUSTOMER: day/night surfaces */

:root[data-shop-theme="night"] {
  color-scheme: dark;
  --bg: #050505;
  --surface: #0d0d0d;
  --surface2: #151515;
  --text: #fff;
  --muted: #aaa;
  --line: #ffffff26;
}

:root[data-shop-theme="day"] {
  color-scheme: light;
  --bg: #f4f3ef;
  --surface: #fff;
  --surface2: #eae9e4;
  --text: #171717;
  --muted: #595959;
  --line: #00000024;
}

/* Theme button */

#vanceThemeButton {
  position: fixed;
  left: 16px;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 1001;
  min-height: 44px;
  padding: 11px 17px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  box-shadow: 0 5px 24px #0002;
  cursor: pointer;
}

#vanceThemeButton:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* Day-mode header */

html[data-shop-theme="day"] :is(
  .header,
  .header.scrolled
) {
  background: #fffffff2;
  border-bottom-color: var(--line);
  backdrop-filter: blur(18px);
}

html[data-shop-theme="day"] :is(
  .logo,
  .nav button,
  .icon-btn,
  .account-trigger-text
) {
  color: var(--text);
}

html[data-shop-theme="day"] :is(
  .account-default-icon,
  .vance-option-icon svg,
  .vance-auth-icon svg
) {
  stroke: currentColor;
}

/* Page backgrounds */

html[data-shop-theme="day"] :is(
  .store-view,
  .store-top,
  .footer,
  .brand-section,
  .search-panel
) {
  background: var(--bg);
  color: var(--text);
}

/* Glass panels and product cards */

html[data-shop-theme="day"] :is(
  .search-box,
  .modal,
  .product-detail,
  .card,
  .account-box.vance-auth-glass,
  #cartDrawer,
  #vanceCheckout,
  .vance-order-dialog
) {
  background: linear-gradient(
    145deg,
    #fffffff7,
    #eeede8f7
  );
  color: var(--text);
  border-color: var(--line);
  box-shadow: 0 20px 70px #0002;
}

/* Panel text */

html[data-shop-theme="day"] :is(
  .footer,
  .brand-section,
  .store-view,
  .search-box,
  .product-detail,
  .account-box,
  #cartDrawer,
  #vanceCheckout,
  .vance-order-dialog
) :is(
  h1,
  h2,
  h3,
  h4,
  p,
  label,
  strong,
  small,
  legend,
  .detail-price,
  .option-label,
  .vance-option-copy,
  .vance-account-logo,
  .vance-account-logo-sub,
  .vance-account-heading,
  .vc-brand,
  .vc-review-details
) {
  color: var(--text);
}

html[data-shop-theme="day"] :is(
  .card-name,
  .card-price,
  .section-title,
  .section-head,
  .footer-brand,
  .footer-title,
  .footer-links a,
  .store-top button,
  .filters button,
  .vance-user-details,
  .vance-account-tagline,
  .vance-field-label
) {
  color: var(--text);
}

html[data-shop-theme="day"] :is(
  .card-category,
  .section-note,
  .footer-bottom,
  .detail-desc,
  .profile-email,
  .vance-cart-variant,
  #cartSummary
) {
  color: var(--muted);
}

/* Inputs */

html[data-shop-theme="day"] :is(
  .search-input,
  .account-box input,
  .product-detail input,
  #vanceCheckout input,
  #vanceCheckout select,
  #vanceCheckout textarea,
  #productModal #vanceProductQuantity
) {
  background: #fff;
  color: #171717;
  border-color: var(--line);
}

html[data-shop-theme="day"] input::placeholder {
  color: #696969;
}

/* Account, search and product controls */

html[data-shop-theme="day"] :is(
  .vance-auth-option,
  .vance-account-option,
  .vance-sign-out,
  .vance-create-account,
  .vance-email-signin,
  .vance-create-account-btn,
  .vance-account-close,
  .vance-order-close,
  .search-category-result,
  .search-result,
  .opt,
  #vanceBackToCart,
  #productModal .vance-quantity-stepper button
) {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--line);
}

html[data-shop-theme="day"] :is(
  .vance-auth-option-text,
  .vance-auth-option-text span,
  .vance-option-copy small,
  .vance-option-copy strong,
  .vance-profile-status,
  .vance-option-icon,
  .vance-auth-icon
) {
  color: var(--text);
}

/* Checkout and cart */

html[data-shop-theme="day"] :is(
  .vc-summary,
  .vc-method,
  .vc-notice,
  .vance-delivery-note,
  .vance-cart-quantity,
  .vance-quantity-stepper
) {
  background: #00000005;
  color: var(--text);
  border-color: var(--line);
}

html[data-shop-theme="day"]
#vanceCheckout .vc-method:has(input:checked) {
  border-color: #171717;
  background: #0000000b;
}

html[data-shop-theme="day"] :is(
  #cartDrawer .vance-cart-name,
  #cartDrawer .vance-cart-quantity button,
  #cartDrawer .remove
) {
  color: var(--text);
}

html[data-shop-theme="day"] :is(
  #vanceCheckout .vc-back,
  #vanceCheckout #vcEdit,
  #vanceCheckout .vb-edit-cart,
  #cartDrawer .vance-cart-continue,
  #cartDrawer .vance-cart-close,
  #vanceCheckout .vc-close
) {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--line);
}

/* Main action buttons */

html[data-shop-theme="day"] :is(
  .primary,
  .opt.selected,
  .filters button.active,
  #vanceCheckout .vc-primary,
  #cartDrawer .vance-cart-checkout
) {
  background: #171717;
  color: #fff;
  border-color: #171717;
}

/* Keep photo and video overlay text readable */

html[data-shop-theme="day"] :is(
  .hero,
  .video-panel,
  .collection
) {
  color: #fff;
}

html[data-shop-theme="day"] :is(
  .hero,
  .video-panel,
  .collection
) .primary {
  background: #fff;
  color: #111;
}

html[data-shop-theme="day"] :is(
  .account-box,
  .product-detail,
  #cartDrawer,
  #vanceCheckout
) button:focus-visible {
  outline: 2px solid #171717;
  outline-offset: 3px;
}

/* COMPACT CART */

#cartDrawer {
  top: 88px;
  right: 16px;
  bottom: auto;

  width: min(400px, calc(100vw - 32px));

  height: min(560px, calc(100vh - 108px));
  height: min(560px, calc(100dvh - 108px));
  max-height: calc(100dvh - 108px);

  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 22px;

  display: flex;
  flex-direction: column;
  overflow: hidden;

  transform: translateX(calc(100% + 24px));
}

#cartDrawer.open {
  transform: none;
}

#cartDrawer .cart-head {
  flex: 0 0 auto;
  padding-bottom: 12px;
}

#cartDrawer h2 {
  font-size: 25px;
}

#cartDrawer .vance-cart-eyebrow {
  font-size: 9px;
  margin-bottom: 5px;
}

#cartDrawer #cartSummary {
  margin-top: 4px;
}

/* Only the product list scrolls */

#cartDrawer #cartItems {
  flex: 1 1 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 5px 0 0;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
}

#cartDrawer #cartItems::-webkit-scrollbar-track {
  background: transparent;
}

#cartDrawer .cart-item {
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 0;
}

#cartDrawer .cart-item img {
  width: 62px;
  height: 80px;
}

#cartDrawer .vance-cart-name {
  font-size: 13px;
}

#cartDrawer .vance-cart-variant {
  margin: 3px 0 5px;
}

#cartDrawer .vance-cart-controls {
  margin-top: 6px;
  gap: 8px;
}

#cartDrawer .vance-cart-quantity button {
  width: 40px;
  height: 40px;
}

/* Total and checkout stay visible */

#cartDrawer .cart-total {
  flex: 0 0 auto;
  padding-top: 12px;
}

#cartDrawer .cart-total-row {
  margin-bottom: 8px;
}

#cartDrawer #cartTotal {
  font-size: 21px;
}

#cartDrawer .vance-cart-delivery {
  margin-bottom: 8px;
  font-size: 10px;
}

#cartDrawer .vance-cart-checkout {
  min-height: 44px;
  padding: 12px 16px;
}

#cartDrawer .vance-cart-continue {
  min-height: 44px;
  padding: 9px 12px;
  margin-top: 6px;
}

#cartDrawer .vance-cart-saved {
  display: none;
}

/* Short screens and landscape phones */

@media (max-height: 520px) {
  #cartDrawer {
    top: 12px;
    height: calc(100dvh - 24px);
    max-height: calc(100dvh - 24px);
  }

  #cartDrawer .vance-cart-eyebrow,
  #cartDrawer .vance-cart-delivery,
  #cartDrawer #cartSummary {
    display: none;
  }
}/* Homepage banner image */
#vanceHeroImage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Remove the blank advertising gap when no video is saved */
#vanceHeroImage[hidden],
.video-panel[hidden] {
  display: none !important;
}

/* Keep video controls clickable */
.video-panel .video-overlay,
.video-panel .video-copy {
  pointer-events: none;
}
/* VANCE FRAME UPDATE — layout only */

/* First homepage banner */
#landing .hero {
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 100vh;
  min-height: 100svh;
  position: relative;
  overflow: hidden;
}

#landing .hero-content {
  width: 100%;
  padding:
    clamp(100px, 10vw, 150px)
    5vw
    clamp(36px, 5vw, 76px);
}

#landing .hero-video,
#landing #vanceHeroImage,
#landing .video-panel video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Homepage section spacing */
#landing .section {
  padding-top: clamp(56px, 7vw, 100px);
  padding-bottom: clamp(56px, 7vw, 100px);
}

/* Products on homepage and category pages */
#landingProducts,
#storeProducts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 30px 16px;
  align-items: stretch;
}

:is(#landingProducts, #storeProducts) .card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

/* Consistent portrait product frames */
:is(#landingProducts, #storeProducts) .card-img {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 3 / 4;
  flex: 0 0 auto;
  overflow: hidden;
}

:is(#landingProducts, #storeProducts) .card-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Align product details and prices */
:is(#landingProducts, #storeProducts) .card-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 16px 14px 20px;
}

:is(#landingProducts, #storeProducts) .card-name {
  min-height: 2.7em;
  overflow-wrap: anywhere;
}

:is(#landingProducts, #storeProducts) .card-price {
  margin-top: auto;
  padding-top: 12px;
}

/* Second image/video banner */
#landing .video-panel {
  height: clamp(340px, 50vw, 760px);
  min-height: 0;
  background-size: cover;
  background-position: center;
}

#landing .video-copy {
  left: 5vw;
  right: 5vw;
  bottom: clamp(48px, 5vw, 76px);
}

/* Discover Collections frames */
#collections .collections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

#collections .collection {
  width: 100%;
  min-width: 0;
  min-height: 0;
  height: auto;
  aspect-ratio: 3 / 4;
}

#collections .collection-content {
  width: 100%;
  padding: clamp(18px, 2.5vw, 32px);
  overflow-wrap: anywhere;
}

/* Tablet */
@media (max-width: 1100px) {
  #landingProducts,
  #storeProducts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #collections .collections {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mobile */
@media (max-width: 760px) {
  #landing .hero {
    height: 100svh;
    min-height: 100svh;
  }

  #landing .hero-content {
    padding: 110px 5vw 40px;
  }

  #landingProducts,
  #storeProducts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 10px;
  }

  :is(#landingProducts, #storeProducts) .card-info {
    padding: 12px 10px 16px;
  }

  #landing .video-panel {
    height: clamp(360px, 65svh, 600px);
  }
}

/* Small-screen collection cards */
@media (max-width: 560px) {
  #collections .collections {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}
/* ======================================================
   VANCE CEYLON — MOBILE CATEGORY MENU
====================================================== */
body.mobile-menu-open {
    overflow: hidden;
}
.mobile-menu-btn{
    display:none;
    width:42px;
    height:42px;
    padding:0!important;

    border:1px solid rgba(255,255,255,.22)!important;
    border-radius:50%;

    background:rgba(255,255,255,.07)!important;

    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:4px;

    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);

    position:relative;
    z-index:1102;

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

.mobile-menu-btn span{
    display:block;
    width:15px;
    height:1.5px;

    background:#fff;

    border-radius:10px;

    transition:
        transform .35s var(--ease),
        opacity .25s,
        width .35s var(--ease);
}

.mobile-menu-btn:hover{
    background:rgba(255,255,255,.13)!important;
}

.mobile-menu-btn.active span:nth-child(1){
    transform:translateY(5.5px) rotate(45deg);
}

.mobile-menu-btn.active span:nth-child(2){
    opacity:0;
    width:0;
}

.mobile-menu-btn.active span:nth-child(3){
    transform:translateY(-5.5px) rotate(-45deg);
}


/* MOBILE MENU PANEL */

.mobile-category-menu{
    display:none;
}


/* MOBILE ONLY */

@media(max-width:900px){

    .mobile-menu-btn{
        display:flex;
    }

    .mobile-category-menu{
        display:block;

        position:fixed;

        top:76px;
        left:0;
        right:0;
        bottom:0;

        z-index:1090;

        background:rgba(5,5,5,.96);

        backdrop-filter:blur(22px);
        -webkit-backdrop-filter:blur(22px);

        opacity:0;
        visibility:hidden;
        pointer-events:none;

        transform:translateY(-14px);

        transition:
            opacity .35s var(--ease),
            transform .45s var(--ease),
            visibility .35s;
    }

    .mobile-category-menu.open{
        opacity:1;
        visibility:visible;
        pointer-events:auto;

        transform:translateY(0);
    }

    .mobile-category-menu-inner{
        height:100%;

        padding:
            38px
            24px
            50px;

        overflow-y:auto;

        display:flex;
        flex-direction:column;
    }

    .mobile-menu-eyebrow{
        margin-bottom:25px;

        color:#888;

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

        letter-spacing:.2em;
    }

    .mobile-category-menu button{
        width:100%;

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

        padding:19px 2px;

        border:0;
        border-bottom:1px solid rgba(255,255,255,.12);

        background:transparent;

        color:#fff;

        text-align:left;

        font-size:18px;
        font-weight:600;

        letter-spacing:-.02em;

        transition:
            padding-left .3s var(--ease),
            opacity .3s;
    }

    .mobile-category-menu button span{
        color:#777;
        font-size:19px;

        transition:
            transform .3s var(--ease),
            color .3s;
    }

    .mobile-category-menu button:active{
        opacity:.65;
        padding-left:5px;
    }

    .mobile-category-menu button:active span{
        transform:translateX(5px);
        color:#fff;
    }

    body.mobile-menu-open{
        overflow:hidden;
    }
}
.vcc-dialog {
  box-sizing: border-box;
  width: min(720px, calc(100vw - 24px));
  max-height: 90dvh;
  padding: 22px;
  border: 1px solid #555;
  border-radius: 20px;
  background: rgba(18, 18, 18, .98);
  color: #fff;
  overflow: auto;
  font: 14px/1.5 Arial, sans-serif;
  box-shadow: 0 24px 80px #0008;
}

.vcc-dialog::backdrop {
  background: #000a;
  backdrop-filter: blur(8px);
}

.vcc-dialog *,
.vcc-panel * {
  box-sizing: border-box;
}

.vcc-dialog label,
.vcc-panel label {
  display: block;
  margin: 12px 0;
}

.vcc-dialog input,
.vcc-dialog select,
.vcc-dialog textarea,
.vcc-panel input,
.vcc-panel select {
  display: block;
  width: 100%;
  padding: 12px;
  border: 1px solid #666;
  border-radius: 9px;
  background: #151515;
  color: #fff;
  font: inherit;
}

.vcc-dialog button,
.vcc-panel button {
  padding: 11px 15px;
  border: 1px solid #666;
  border-radius: 9px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.vcc-dialog button:disabled,
.vcc-panel button:disabled {
  opacity: .5;
  cursor: wait;
}

.vcc-dialog .vcc-primary,
.vcc-panel .vcc-primary {
  background: #fff;
  color: #111;
}

.vcc-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0;
}

.vcc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.vcc-dialog fieldset,
.vcc-panel fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}

.vcc-message {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: inherit;
}

.vcc-card {
  border: 1px solid #555;
  border-radius: 14px;
  padding: 16px;
  margin: 14px 0;
  overflow-wrap: anywhere;
}

.vcc-gift {
  background: linear-gradient(120deg, #080808, #333);
  color: #fff;
  border: 1px solid #888;
  border-radius: 18px;
  padding: 24px;
  margin: 14px 0;
}

.vcc-gift code {
  display: block;
  overflow-wrap: anywhere;
  margin-top: 15px;
  font-size: 16px;
}

.vcc-panel [hidden],
.vcc-dialog [hidden] {
  display: none !important;
}

@media (max-width: 480px) {
  .vcc-grid {
    grid-template-columns: 1fr;
  }

  .vcc-dialog {
    padding: 16px;
  }
}
/* =========================================================
   VANCE CEYLON — MY ORDERS SINGLE-FRAME COMPACT FIX
   SAFE CSS ADD-ON ONLY

   PURPOSE
   - Keep My Orders popup small.
   - Put all orders inside ONE scrollable frame.
   - Make each order compact.
   - Do NOT change checkout, invoice logic, payment, account,
     admin, products, or existing JavaScript.
========================================================= */

/* Main My Orders popup stays compact */
#myOrdersSection.vance-order-dialog{
    width:min(520px, calc(100vw - 22px)) !important;
    max-height:72dvh !important;
    height:auto !important;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;

    padding:20px !important;
    border-radius:24px !important;
}

/* Keep title and delivery message fixed */
#myOrdersSection .vance-orders-header,
#myOrdersSection #orderDeliveryNote{
    flex:0 0 auto !important;
}

/* ONE frame containing every order */
#myOrdersSection #myOrdersList{
    flex:1 1 auto !important;

    max-height:350px !important;
    min-height:0 !important;

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

    margin-top:12px !important;
    padding:6px 12px !important;

    border:1px solid rgba(255,255,255,.16) !important;
    border-radius:16px !important;

    background:rgba(255,255,255,.025) !important;

    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.30) transparent;
}

/* Chrome / Edge scrollbar */
#myOrdersSection #myOrdersList::-webkit-scrollbar{
    width:6px;
}

#myOrdersSection #myOrdersList::-webkit-scrollbar-track{
    background:transparent;
}

#myOrdersSection #myOrdersList::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.28);
    border-radius:999px;
}

/* Remove the huge separate-card feeling.
   Each order becomes one compact row inside the single frame. */
#myOrdersSection .vance-order-card,
#myOrdersSection #myOrdersList article{
    margin:0 !important;
    padding:12px 2px !important;

    min-height:0 !important;

    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.12) !important;
    border-radius:0 !important;

    background:transparent !important;
    box-shadow:none !important;

    line-height:1.22 !important;
}

/* Last order does not need a divider */
#myOrdersSection .vance-order-card:last-child,
#myOrdersSection #myOrdersList article:last-child{
    border-bottom:0 !important;
}

/* Order number */
#myOrdersSection .vance-order-card h3,
#myOrdersSection #myOrdersList article h3{
    margin:0 0 4px !important;

    font-size:11px !important;
    line-height:1.25 !important;

    overflow-wrap:anywhere !important;
    word-break:break-word !important;
}

/* Small labels and general text */
#myOrdersSection .vance-order-card small,
#myOrdersSection .vance-order-card p,
#myOrdersSection .vance-order-card span,
#myOrdersSection #myOrdersList article small,
#myOrdersSection #myOrdersList article p,
#myOrdersSection #myOrdersList article span{
    margin-top:2px !important;
    margin-bottom:2px !important;

    font-size:10px !important;
    line-height:1.28 !important;
}

/* Compact top row */
#myOrdersSection .vance-order-top{
    gap:8px !important;
    margin-bottom:6px !important;
}

/* Compact order status */
#myOrdersSection .vance-order-status{
    padding:4px 7px !important;
    border-radius:999px !important;

    font-size:9px !important;
    line-height:1 !important;
}

/* Compact product row */
#myOrdersSection .vance-order-item{
    min-height:0 !important;

    gap:7px !important;
    padding:5px 0 !important;
}

/* Smaller product image */
#myOrdersSection .vance-order-item img{
    width:38px !important;
    height:38px !important;

    flex:0 0 38px !important;

    border-radius:8px !important;
    object-fit:cover !important;
}

/* Compact product details */
#myOrdersSection .vance-order-item-info{
    gap:1px !important;
}

#myOrdersSection .vance-order-item-info strong{
    font-size:10px !important;
    line-height:1.2 !important;
}

#myOrdersSection .vance-order-item-info span{
    font-size:9px !important;
    line-height:1.2 !important;
}

/* Compact invoice button */
#myOrdersSection .vance-invoice-button{
    width:auto !important;

    min-height:34px !important;

    margin-top:7px !important;
    padding:0 12px !important;

    border-radius:9px !important;

    font-size:8.5px !important;
    letter-spacing:.08em !important;
}

/* Keep delivery message smaller */
#myOrdersSection #orderDeliveryNote{
    margin:10px 0 0 !important;
    padding:11px 13px !important;

    font-size:10px !important;
    line-height:1.35 !important;
}

/* MOBILE */
@media(max-width:600px){

    #myOrdersSection.vance-order-dialog{
        width:calc(100vw - 18px) !important;
        max-height:76dvh !important;

        padding:16px !important;
        border-radius:20px !important;
    }

    #myOrdersSection #myOrdersList{
        max-height:390px !important;
        padding:5px 10px !important;
    }

    #myOrdersSection .vance-order-card,
    #myOrdersSection #myOrdersList article{
        padding:10px 1px !important;
    }

    #myOrdersSection .vance-invoice-button{
        min-height:33px !important;
        padding:0 11px !important;
    }
}
/* =========================================================
   VANCE CEYLON — MY ORDERS CLOSE / HIDDEN FIX
   Keep dialog completely hidden when closed
========================================================= */

/* CLOSED = completely hidden */
#myOrdersSection.vance-order-dialog:not([open]){
    display:none !important;
}


/* OPEN = compact scrollable My Orders */
#myOrdersSection.vance-order-dialog[open]{
    display:flex !important;
    flex-direction:column !important;
}
/* =========================================================
   VANCE CEYLON — CHECKOUT DELIVERY AREA MESSAGE FIX
   ========================================================= */

#vanceCheckoutForm .vc-fields label:has(select[name="area"]) {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    margin-bottom: 28px !important;
    overflow: visible !important;
}

#vanceCheckoutForm .vc-fields select[name="area"] {
    display: block !important;
    width: 100% !important;
    margin: 8px 0 0 !important;
    position: relative !important;
}

/* COD availability message under area selector */
#vanceCheckoutForm .vc-fields label:has(select[name="area"]) small {
    display: block !important;
    position: static !important;
    transform: none !important;

    width: 100% !important;
    margin: 11px 2px 0 !important;
    padding: 0 !important;

    color: #ffffff !important;
    opacity: 1 !important;

    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    letter-spacing: 0.1px !important;

    white-space: normal !important;
    overflow: visible !important;
}
/* =====================================================
   VANCE CEYLON - TOP AD BAR / HEADER OVERLAP FIX
===================================================== */

.header{
    top:32px !important;
    z-index:1000 !important;
}

/* Keep navigation vertically centred */
.header .logo,
.header .nav,
.header .tools{
    position:relative;
    z-index:2;
}

/* Desktop */
@media (min-width:901px){

    .header{
        height:76px !important;
        top:32px !important;
    }
}

/* Mobile */
@media (max-width:900px){

    .header{
        top:28px !important;
    }
}
/* =====================================================
   VANCE CEYLON HEADER - DO NOT FOLLOW SCROLL
===================================================== */

.header{
    position:absolute !important;
    top:32px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    z-index:1000 !important;
}

/* Prevent the scrolled header style from behaving like a floating bar */
.header.scrolled{
    position:absolute !important;
    top:32px !important;
}

/* Mobile */
@media (max-width:900px){

    .header,
    .header.scrolled{
        position:absolute !important;
        top:28px !important;
    }
}
/* =========================================================
   VANCE CEYLON — CHECKOUT GLASS FRAME FIX
   Paste at the VERY BOTTOM of style.css
   ========================================================= */

/* Checkout overlay */
.checkout-overlay,
#checkoutOverlay,
.checkout-modal {
    position: fixed !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100dvh !important;

    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    padding: 20px !important;

    background: rgba(0, 0, 0, 0.58) !important;

    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    overflow: hidden !important;

    z-index: 99999 !important;

    box-sizing: border-box !important;
}


/* =========================================================
   MAIN CHECKOUT GLASS FRAME
   ========================================================= */

.checkout-panel,
.checkout-container,
.checkout-content,
#checkoutPanel,
#checkoutContainer {

    width: min(760px, 100%) !important;

    /*
      IMPORTANT:
      Keeps the complete checkout INSIDE the screen.
    */
    max-height: calc(100dvh - 40px) !important;

    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.14),
            rgba(255,255,255,0.055)
        ) !important;

    border: 1px solid rgba(255,255,255,0.20) !important;

    border-radius: 24px !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.18) !important;

    backdrop-filter: blur(25px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(25px) saturate(130%) !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    color: #111 !important;
}


/* =========================================================
   CHECKOUT HEADER
   ========================================================= */

.checkout-header {
    flex-shrink: 0 !important;

    padding: 22px 24px 17px !important;

    background: rgba(255,255,255,0.13) !important;

    border-bottom: 1px solid rgba(255,255,255,0.15) !important;

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    position: relative !important;

    z-index: 5 !important;
}


.checkout-header h1,
.checkout-header h2,
.checkout-header h3 {
    color: #111 !important;
    margin: 0 !important;
    font-weight: 700 !important;
}


/* =========================================================
   SCROLLABLE CHECKOUT BODY
   THIS FIXES THE BOTTOM GOING OUT OF FRAME
   ========================================================= */

.checkout-body,
.checkout-scroll,
.checkout-form,
#checkoutBody {

    flex: 1 1 auto !important;

    min-height: 0 !important;

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

    padding: 22px 24px 30px !important;

    overscroll-behavior: contain !important;

    -webkit-overflow-scrolling: touch !important;

    box-sizing: border-box !important;

    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.35) transparent;
}


/* Chrome / Edge scrollbar */

.checkout-body::-webkit-scrollbar,
.checkout-scroll::-webkit-scrollbar,
.checkout-form::-webkit-scrollbar,
#checkoutBody::-webkit-scrollbar {
    width: 6px;
}


.checkout-body::-webkit-scrollbar-track,
.checkout-scroll::-webkit-scrollbar-track,
.checkout-form::-webkit-scrollbar-track,
#checkoutBody::-webkit-scrollbar-track {
    background: transparent;
}


.checkout-body::-webkit-scrollbar-thumb,
.checkout-scroll::-webkit-scrollbar-thumb,
.checkout-form::-webkit-scrollbar-thumb,
#checkoutBody::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.30);
    border-radius: 20px;
}


/* =========================================================
   SECTIONS / CARDS INSIDE CHECKOUT
   ========================================================= */

.checkout-section,
.checkout-card,
.payment-option,
.delivery-option,
.order-summary,
.shipping-section,
.payment-section {

    background: rgba(255,255,255,0.22) !important;

    border: 1px solid rgba(255,255,255,0.32) !important;

    border-radius: 18px !important;

    padding: 18px !important;

    margin-bottom: 15px !important;

    box-shadow:
        0 10px 30px rgba(0,0,0,0.08),
        inset 0 1px 0 rgba(255,255,255,0.30) !important;

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    box-sizing: border-box !important;
}


/* =========================================================
   INPUTS
   ========================================================= */

.checkout-panel input,
.checkout-panel select,
.checkout-panel textarea,
.checkout-container input,
.checkout-container select,
.checkout-container textarea,
.checkout-content input,
.checkout-content select,
.checkout-content textarea {

    width: 100% !important;

    background: rgba(255,255,255,0.40) !important;

    border: 1px solid rgba(0,0,0,0.12) !important;

    color: #111 !important;

    border-radius: 13px !important;

    padding: 14px 15px !important;

    outline: none !important;

    box-shadow: none !important;

    box-sizing: border-box !important;

    transition:
        border-color .2s ease,
        background .2s ease,
        transform .2s ease !important;
}


.checkout-panel input:focus,
.checkout-panel select:focus,
.checkout-panel textarea:focus,
.checkout-container input:focus,
.checkout-container select:focus,
.checkout-container textarea:focus {

    border-color: #000 !important;

    background: rgba(255,255,255,0.60) !important;
}


/* Placeholder */

.checkout-panel input::placeholder,
.checkout-panel textarea::placeholder {
    color: rgba(0,0,0,0.50) !important;
}


/* =========================================================
   VANCE BLACK BUTTON
   ========================================================= */

.checkout-panel button,
.checkout-container button,
.checkout-content button,
.checkout-btn,
.place-order-btn,
.confirm-order-btn,
.confirm-cod-btn,
.review-order-btn,
.next-btn {

    min-height: 48px !important;

    padding: 13px 20px !important;

    background: #000 !important;

    color: #fff !important;

    border: 1px solid #000 !important;

    border-radius: 14px !important;

    font-size: 14px !important;
    font-weight: 650 !important;

    cursor: pointer !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,0.22) !important;

    transition:
        transform .18s ease,
        background .18s ease,
        border .18s ease,
        box-shadow .18s ease !important;
}


/* Hover */

.checkout-panel button:hover,
.checkout-container button:hover,
.checkout-content button:hover,
.checkout-btn:hover,
.place-order-btn:hover,
.confirm-order-btn:hover,
.confirm-cod-btn:hover {

    transform: translateY(-1px) !important;

    box-shadow:
        0 12px 30px rgba(0,0,0,0.28) !important;
}


/* =========================================================
   WHEN BUTTON IS CLICKED
   BLACK -> TRANSPARENT GLASS
   ========================================================= */

.checkout-panel button:active,
.checkout-container button:active,
.checkout-content button:active,
.checkout-btn:active,
.place-order-btn:active,
.confirm-order-btn:active,
.confirm-cod-btn:active {

    transform: scale(0.98) !important;

    background: rgba(0,0,0,0.38) !important;

    border: 1px solid rgba(255,255,255,0.35) !important;

    color: #fff !important;

    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        0 5px 15px rgba(0,0,0,0.20) !important;
}


/* =========================================================
   BACK / EDIT BUTTONS
   ========================================================= */

.checkout-back-btn,
.edit-details-btn,
.back-cart-btn {

    background: #000 !important;
    color: #fff !important;

    border: 1px solid #000 !important;

    border-radius: 14px !important;
}


/* =========================================================
   PAYMENT METHOD GLASS BUTTON
   COD / BANK DEPOSIT
   ========================================================= */

.payment-method,
.payment-method-option,
.checkout-payment-option {

    background: rgba(255,255,255,0.22) !important;

    border: 1px solid rgba(0,0,0,0.12) !important;

    border-radius: 16px !important;

    padding: 16px !important;

    cursor: pointer !important;

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    transition: .2s ease !important;
}


.payment-method:hover,
.payment-method-option:hover,
.checkout-payment-option:hover {

    background: rgba(255,255,255,0.38) !important;

    border-color: rgba(0,0,0,0.35) !important;
}


/* Selected payment method */

.payment-method.active,
.payment-method.selected,
.payment-method-option.active,
.payment-method-option.selected,
.checkout-payment-option.active,
.checkout-payment-option.selected {

    background: rgba(0,0,0,0.88) !important;

    color: #fff !important;

    border-color: #000 !important;

    box-shadow:
        0 10px 28px rgba(0,0,0,0.24) !important;
}


/* =========================================================
   FOOTER / FINAL ACTION AREA
   ========================================================= */

.checkout-footer,
.checkout-actions {

    flex-shrink: 0 !important;

    padding: 16px 24px 20px !important;

    background: rgba(255,255,255,0.20) !important;

    border-top: 1px solid rgba(255,255,255,0.25) !important;

    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);

    box-sizing: border-box !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .checkout-overlay,
    #checkoutOverlay,
    .checkout-modal {

        padding: 10px !important;

        align-items: center !important;
    }


    .checkout-panel,
    .checkout-container,
    .checkout-content,
    #checkoutPanel,
    #checkoutContainer {

        width: 100% !important;

        max-height: calc(100dvh - 20px) !important;

        border-radius: 20px !important;
    }


    .checkout-header {

        padding: 18px 17px 14px !important;
    }


    .checkout-body,
    .checkout-scroll,
    .checkout-form,
    #checkoutBody {

        padding: 17px 16px 25px !important;
    }


    .checkout-footer,
    .checkout-actions {

        padding: 14px 16px 16px !important;
    }


    .checkout-panel button,
    .checkout-container button,
    .checkout-content button {

        width: 100% !important;

        min-height: 50px !important;
    }
}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

    .checkout-overlay,
    #checkoutOverlay,
    .checkout-modal {

        padding: 6px !important;
    }


    .checkout-panel,
    .checkout-container,
    .checkout-content,
    #checkoutPanel,
    #checkoutContainer {

        max-height: calc(100dvh - 12px) !important;

        border-radius: 17px !important;
    }


    .checkout-section,
    .checkout-card,
    .payment-option,
    .delivery-option,
    .order-summary {

        padding: 14px !important;

        border-radius: 15px !important;
    }
}
/* =========================================================
   VANCE CEYLON — MY ACCOUNT PREMIUM GLASS REDESIGN
   SAFE CSS OVERRIDE
   Paste at VERY BOTTOM of style.css
   ========================================================= */


/* =========================================================
   ACCOUNT FULL SCREEN BACKDROP
   ========================================================= */

#accountModal.vance-account-modal{
    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(255,255,255,.08),
            transparent 38%
        ),
        rgba(0,0,0,.72) !important;

    backdrop-filter:blur(22px) saturate(120%) !important;
    -webkit-backdrop-filter:blur(22px) saturate(120%) !important;

    padding:28px 18px !important;
}


/* =========================================================
   MAIN GLASS ACCOUNT FRAME
   ========================================================= */

#accountModal .account-box.vance-auth-glass{

    width:min(540px, calc(100vw - 32px)) !important;

    max-height:92dvh !important;

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

    padding:42px 36px 32px !important;

    border:
        1px solid rgba(255,255,255,.22) !important;

    border-radius:32px !important;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(255,255,255,.10),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.095),
            rgba(255,255,255,.025)
        ) !important;

    box-shadow:
        0 35px 100px rgba(0,0,0,.55),
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -1px 0 rgba(255,255,255,.035) !important;

    backdrop-filter:
        blur(38px)
        saturate(135%) !important;

    -webkit-backdrop-filter:
        blur(38px)
        saturate(135%) !important;

    color:#fff !important;

    scrollbar-width:thin;
    scrollbar-color:
        rgba(255,255,255,.22)
        transparent;
}


/* scrollbar */

#accountModal
.account-box.vance-auth-glass::-webkit-scrollbar{
    width:5px !important;
}

#accountModal
.account-box.vance-auth-glass::-webkit-scrollbar-track{
    background:transparent !important;
}

#accountModal
.account-box.vance-auth-glass::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.20) !important;
    border-radius:999px !important;
}


/* =========================================================
   STRAIGHT VANCE CEYLON LOGO
   ========================================================= */

#accountModal .vance-account-brand{
    position:relative;

    display:flex !important;
    justify-content:center !important;
    align-items:center !important;

    margin:0 0 34px !important;

    text-align:center;
}


/*
   Hide separate original VANCE / CEYLON text.
   We rebuild it as one straight line with ::after.
*/

#accountModal .vance-account-logo,#accountModal .vance-account-logo,
#accountModal .vance-account-logo-sub{
    font-size:0 !important;
}

#accountModal .vance-account-brand::after{
    content:"VANCE CEYLON";
}


#accountModal .vance-account-brand::after{
    content:"VANCE CEYLON";

    display:block;

    color:#fff;

    font-size:24px;
    font-weight:800;

    letter-spacing:.26em;

    line-height:1;

    padding-left:.26em;

    text-transform:uppercase;

    text-shadow:
        0 2px 18px rgba(255,255,255,.13);
}


/* =========================================================
   ACCOUNT HEADING
   ========================================================= */

#accountModal .vance-account-tagline{
    color:rgba(255,255,255,.52) !important;

    font-size:9px !important;
    font-weight:700 !important;

    letter-spacing:.30em !important;
}


#accountModal .vance-account-heading h1{
    color:#fff !important;

    font-size:42px !important;
    font-weight:500 !important;

    letter-spacing:-.045em !important;
}


#accountModal .vance-account-heading p{
    color:rgba(255,255,255,.58) !important;
}


/* =========================================================
   USER PROFILE CARD
   ========================================================= */

#accountModal .vance-account-user{

    border:
        1px solid rgba(255,255,255,.18) !important;

    border-radius:23px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 12px 35px rgba(0,0,0,.12) !important;

    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
}


#accountModal .vance-user-details h2{
    color:#fff !important;
}


#accountModal .vance-user-details .profile-email{
    color:rgba(255,255,255,.60) !important;
}


/* =========================================================
   MY ORDERS / MY CART / CONTINUE SHOPPING CARDS
   ========================================================= */

#accountModal .vance-account-option,
#accountModal .account-menu button{

    border:
        1px solid rgba(255,255,255,.18) !important;

    border-radius:21px !important;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025)
        ) !important;

    color:#fff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 10px 30px rgba(0,0,0,.10) !important;

    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;

    transition:
        transform .22s ease,
        background .22s ease,
        border-color .22s ease !important;
}


#accountModal .vance-account-option:hover,
#accountModal .account-menu button:hover{

    transform:translateY(-2px);

    background:
        rgba(255,255,255,.13) !important;

    border-color:
        rgba(255,255,255,.30) !important;
}


#accountModal .vance-option-copy strong,
#accountModal .vance-account-option strong{
    color:#fff !important;
}


#accountModal .vance-option-copy small,
#accountModal .vance-account-option small{
    color:rgba(255,255,255,.55) !important;
}


/* =========================================================
   ICON BOXES
   ========================================================= */

#accountModal .vance-option-icon,
#accountModal .vance-auth-icon{

    border:
        1px solid rgba(255,255,255,.12) !important;

    background:
        rgba(255,255,255,.055) !important;

    color:#fff !important;

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}


/* =========================================================
   SIGN OUT
   ========================================================= */

#accountModal .vance-sign-out,
#accountModal #signOutBtn{

    color:#fff !important;

    border:
        1px solid rgba(255,255,255,.20) !important;

    background:
        rgba(255,255,255,.055) !important;

    border-radius:999px !important;

    opacity:1 !important;

    visibility:visible !important;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

#accountModal .vance-account-close{

    background:
        rgba(255,255,255,.08) !important;

    border:
        1px solid rgba(255,255,255,.17) !important;

    color:#fff !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08) !important;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}


/* =========================================================
   MY ORDERS WINDOW
   ========================================================= */

#myOrdersSection.vance-order-dialog,
#myOrdersSection{

    background:
        linear-gradient(
            145deg,
            rgba(245,245,245,.94),
            rgba(224,224,224,.91)
        ) !important;

    color:#111 !important;

    border:
        1px solid rgba(255,255,255,.70) !important;

    box-shadow:
        0 25px 70px rgba(0,0,0,.35),
        inset 0 1px 0 rgba(255,255,255,.80) !important;

    backdrop-filter:blur(28px) !important;
    -webkit-backdrop-filter:blur(28px) !important;
}


/* heading */

#myOrdersSection .vance-orders-header h2,
#myOrdersSection h2,
#myOrdersSection h3{
    color:#111 !important;
}


/* delivery note */

#myOrdersSection #orderDeliveryNote{
    color:rgba(0,0,0,.60) !important;
}


/* =========================================================
   ORDER CARDS
   ========================================================= */

#myOrdersSection .vance-order-card{

    background:
        rgba(255,255,255,.45) !important;

    border:
        1px solid rgba(0,0,0,.10) !important;

    color:#111 !important;

    border-radius:18px !important;

    box-shadow:
        0 8px 25px rgba(0,0,0,.07) !important;

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}


#myOrdersSection .vance-order-card *{
    color:#111;
}


/* =========================================================
   FIX PAYMENT PENDING / UNPAID TEXT
   THIS IS THE IMPORTANT PART YOU ASKED FOR
   ========================================================= */

#myOrdersSection .vance-pending-status,
#myOrdersSection .payment-pending,
#myOrdersSection .payment-status,
#myOrdersSection .unpaid,
#myOrdersSection [data-payment-status="pending"],
#myOrdersSection [data-payment-status="unpaid"]{

    color:#111 !important;

    font-weight:800 !important;

    opacity:1 !important;
}


/* pending payment section */

#myOrdersSection .vance-pending-tools,
#myOrdersSection .vance-pending-tools *,
#myOrdersSection .vance-pending-buttons{

    color:#111 !important;
}


/* buttons */

#myOrdersSection .vance-pending-receipt-button,
#myOrdersSection .vance-pending-whatsapp-button{

    background:#111 !important;

    color:#fff !important;

    border:1px solid #111 !important;

    border-radius:11px !important;
}


/* =========================================================
   UNPAID / PAYMENT REQUIRED POPUP
   ========================================================= */

#vancePendingReceiptOverlay .vance-unpaid-warning,
.vance-unpaid-overlay .vance-unpaid-warning{

    color:#111 !important;

    background:
        rgba(255,255,255,.78) !important;

    border:
        1px solid rgba(0,0,0,.12) !important;

    border-radius:14px !important;

    font-weight:700 !important;
}


#vancePendingReceiptOverlay .vance-unpaid-warning *,
.vance-unpaid-overlay .vance-unpaid-warning *{
    color:#111 !important;
}


/* =========================================================
   MY ORDERS SCROLLBAR
   ========================================================= */

#myOrdersList{
    scrollbar-width:thin;
    scrollbar-color:
        rgba(0,0,0,.28)
        transparent;
}


#myOrdersList::-webkit-scrollbar{
    width:6px;
}


#myOrdersList::-webkit-scrollbar-track{
    background:transparent !important;
}


#myOrdersList::-webkit-scrollbar-thumb{
    background:rgba(0,0,0,.25) !important;
    border-radius:999px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

    #accountModal.vance-account-modal{
        padding:10px !important;
    }


    #accountModal
    .account-box.vance-auth-glass{

        width:100% !important;

        max-height:96dvh !important;

        padding:
            34px 18px
            24px !important;

        border-radius:25px !important;
    }


    #accountModal
    .vance-account-brand::after{

        font-size:20px !important;

        letter-spacing:.20em !important;

        padding-left:.20em !important;
    }


    #accountModal
    .vance-account-heading h1{

        font-size:36px !important;
    }


    #accountModal
    .vance-account-user{

        border-radius:19px !important;
    }


    #accountModal
    .vance-account-option{

        border-radius:18px !important;
    }
}
/* =========================================================
   VANCE CEYLON — MY ACCOUNT WHITE GLASS THEME
   THEME ONLY — NO STRUCTURE / FUNCTION CHANGES
   ========================================================= */


/* MAIN ACCOUNT BACKDROP */
#accountModal.vance-account-modal{
    background: rgba(245,245,245,.72) !important;

    backdrop-filter: blur(22px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(120%) !important;
}


/* =========================================================
   MAIN WHITE GLASS FRAME
   ========================================================= */

#accountModal .account-box.vance-auth-glass{

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.76),
            rgba(245,245,245,.58)
        ) !important;

    border:
        1px solid rgba(0,0,0,.10) !important;

    box-shadow:
        0 25px 65px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.95) !important;

    backdrop-filter:
        blur(30px)
        saturate(130%) !important;

    -webkit-backdrop-filter:
        blur(30px)
        saturate(130%) !important;

    color:#111 !important;
}


/* =========================================================
   LOGO
   ========================================================= */

#accountModal .vance-account-logo,
#accountModal .vance-account-logo-sub{
    color:#111 !important;
}


/* =========================================================
   TITLE
   ========================================================= */

#accountModal .vance-account-tagline{
    color:rgba(0,0,0,.48) !important;
}

#accountModal .vance-account-heading h1{
    color:#111 !important;
}

#accountModal .vance-account-heading p{
    color:rgba(0,0,0,.58) !important;
}


/* =========================================================
   USER PROFILE GLASS CARD
   ========================================================= */

#accountModal .vance-account-user{

    background:
        rgba(255,255,255,.52) !important;

    border:
        1px solid rgba(0,0,0,.10) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.90),
        0 8px 25px rgba(0,0,0,.05) !important;

    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
}


#accountModal .vance-user-details h2{
    color:#111 !important;
}

#accountModal .vance-user-details .profile-email{
    color:rgba(0,0,0,.58) !important;
}


/* VANCE CEYLON MEMBER */
#accountModal .vance-user-details small,
#accountModal .vance-user-label{
    color:rgba(0,0,0,.55) !important;
}


/* =========================================================
   MY ORDERS / MY CART / CONTINUE SHOPPING
   ========================================================= */

#accountModal .vance-account-option{

    background:
        rgba(255,255,255,.46) !important;

    border:
        1px solid rgba(0,0,0,.10) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.92),
        0 7px 20px rgba(0,0,0,.045) !important;

    color:#111 !important;

    backdrop-filter:blur(16px) !important;
    -webkit-backdrop-filter:blur(16px) !important;
}


/* hover */
#accountModal .vance-account-option:hover{

    background:
        rgba(255,255,255,.75) !important;

    border-color:
        rgba(0,0,0,.18) !important;
}


/* titles */
#accountModal .vance-option-copy strong{
    color:#111 !important;
}


/* description */
#accountModal .vance-option-copy small{
    color:rgba(0,0,0,.55) !important;
}


/* arrow */
#accountModal .vance-option-arrow{
    color:#111 !important;
}


/* =========================================================
   ICON BOX
   ========================================================= */

#accountModal .vance-option-icon,
#accountModal .vance-auth-icon{

    background:
        rgba(255,255,255,.60) !important;

    border:
        1px solid rgba(0,0,0,.09) !important;

    color:#111 !important;
}


#accountModal .vance-option-icon svg{
    stroke:#111 !important;
}


/* =========================================================
   SIGN OUT
   ========================================================= */

#accountModal .vance-sign-out,
#accountModal #signOutBtn{

    background:
        rgba(255,255,255,.55) !important;

    border:
        1px solid rgba(0,0,0,.12) !important;

    color:#111 !important;
}


#accountModal .vance-sign-out:hover,
#accountModal #signOutBtn:hover{

    background:#111 !important;
    color:#fff !important;
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

#accountModal .vance-account-close{

    background:
        rgba(255,255,255,.72) !important;

    border:
        1px solid rgba(0,0,0,.12) !important;

    color:#111 !important;

    box-shadow:
        0 5px 18px rgba(0,0,0,.08) !important;
}


/* =========================================================
   ACCOUNT STATUS / MESSAGES
   ========================================================= */

#accountModal .vance-account-status{
    color:rgba(0,0,0,.70) !important;
}


/* =========================================================
   SCROLLBAR — WHITE THEME
   ========================================================= */

#accountModal
.account-box.vance-auth-glass{

    scrollbar-color:
        rgba(0,0,0,.25)
        transparent !important;
}


#accountModal
.account-box.vance-auth-glass::-webkit-scrollbar-track{

    background:transparent !important;
}


#accountModal
.account-box.vance-auth-glass::-webkit-scrollbar-thumb{

    background:
        rgba(0,0,0,.23) !important;

    border-radius:999px !important;
}
/* =========================================================
   VANCE CEYLON — ACCOUNT LOGO + SIGN OUT FIX
   Paste at the VERY BOTTOM of style.css
   ========================================================= */


/* =========================================================
   SHOW ONLY ONE BRAND NAME
   ========================================================= */

/* remove any fake generated logo */
#accountModal .vance-account-brand::before,
#accountModal .vance-account-brand::after{
    content: none !important;
    display: none !important;
}

/* brand wrapper */
#accountModal .vance-account-brand{
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 0 18px !important;
    text-align: center !important;
}

/* real logo only */
#accountModal .vance-account-logo,
#accountModal .vance-account-logo-sub{
    display: inline-block !important;
    font-size: unset !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-indent: 0 !important;
}

/* VANCE */
#accountModal .vance-account-logo{
    color: #111 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: .24em !important;
}

/* CEYLON */
#accountModal .vance-account-logo-sub{
    color: #111 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: .18em !important;
}


/* =========================================================
   SIGN OUT BUTTON — MAKE VISIBLE
   ========================================================= */

#accountModal .vance-sign-out,
#accountModal #signOutBtn{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;

    min-height: 46px !important;
    width: 100% !important;
    margin-top: 14px !important;
    padding: 0 16px !important;

    background: #111 !important;
    color: #fff !important;

    border: 1px solid #111 !important;
    border-radius: 999px !important;

    opacity: 1 !important;
    visibility: visible !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .08em !important;

    box-shadow: 0 8px 20px rgba(0,0,0,.10) !important;
}

/* sign out text / icon inside */
#accountModal .vance-sign-out *,
#accountModal #signOutBtn *{
    color: #fff !important;
    fill: #fff !important;
    stroke: #fff !important;
    opacity: 1 !important;
}

/* hover */
#accountModal .vance-sign-out:hover,
#accountModal #signOutBtn:hover{
    background: #2a2a2a !important;
    border-color: #2a2a2a !important;
}


/* =========================================================
   IF THE BUTTON CONTAINER IS TOO LIGHT / HIDDEN
   ========================================================= */

#accountModal .vance-sign-out-wrap,
#accountModal .signout-wrap,
#accountModal .account-signout{
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   VANCE CEYLON — STORE CATEGORY PRODUCT SPACING FIX
   Applies to:
   Everything / New Arrivals / Men's Long Sleeve /
   Men's Short Sleeve / Kids Long Sleeve /
   Kids Short Sleeve / Shorts / Unisex
   ========================================================= */

/* Give the filter/category row comfortable breathing room below it */
#storeView .store-top{
    padding-bottom:44px !important;
}

/* Keep the category buttons separated from the products */
#storeView .filters{
    margin-top:35px !important;
    margin-bottom:0 !important;
}

/* Main product area starts lower, never touching the filter block */
#storeView .store-products{
    padding-top:52px !important;
    padding-bottom:110px !important;
}

/* Preserve the product grid itself */
#storeView #storeProducts{
    margin-top:0 !important;
}

/* Tablet */
@media (max-width:1100px){
    #storeView .store-top{
        padding-bottom:38px !important;
    }

    #storeView .store-products{
        padding-top:44px !important;
    }
}

/* Mobile */
@media (max-width:760px){
    #storeView .store-top{
        padding-bottom:30px !important;
    }

    #storeView .filters{
        margin-top:26px !important;
    }

    #storeView .store-products{
        padding-top:34px !important;
        padding-bottom:80px !important;
    }
}



/* =========================================================
   VANCE CEYLON — MOBILE MENU VISIBILITY FIX
   Announcement bar 28px + header 76px = drawer begins at 104px.
   ========================================================= */
@media (max-width:900px){
    body > #mobileCategoryMenu.mobile-category-menu{
        display:block !important;
        position:fixed !important;
        top:104px !important;
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        width:100vw !important;
        height:auto !important;
        z-index:2147483000 !important;

        background:#ffffff !important;
        color:#111 !important;

        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transform:translateY(-10px) !important;

        overflow:hidden !important;
        transition:
            opacity .28s ease,
            transform .32s ease,
            visibility .28s !important;
    }

    body > #mobileCategoryMenu.mobile-category-menu.open{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transform:translateY(0) !important;
    }

    body > #mobileCategoryMenu .mobile-category-menu-inner{
        height:100% !important;
        padding:26px 22px 40px !important;
        overflow-y:auto !important;
        -webkit-overflow-scrolling:touch;
        background:#ffffff !important;
    }

    body > #mobileCategoryMenu .mobile-menu-eyebrow{
        color:#777 !important;
        margin-bottom:18px !important;
    }

    body > #mobileCategoryMenu button{
        width:100% !important;
        padding:18px 2px !important;
        background:transparent !important;
        color:#111 !important;
        border:0 !important;
        border-bottom:1px solid rgba(0,0,0,.12) !important;
        text-align:left !important;
        font-size:18px !important;
        font-weight:700 !important;
    }

    body.mobile-menu-open{
        overflow:hidden !important;
    }
}


/* =========================================================
   VANCE CEYLON — HEADER CONTROL SIZE BALANCE
   Desktop + mobile
   ========================================================= */

/* Keep all right-side header controls visually aligned */
.header .tools{
    display:flex !important;
    align-items:center !important;
}

/* Search button: larger, clearer icon and proper tap target */
.header .tools > button.icon-btn[aria-label="Search"]{
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    font-size:22px !important;
    font-weight:500 !important;
}

/* Account and cart use the same control height */
.header .account-trigger,
.header .cart-header-btn{
    min-height:42px !important;
    height:42px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}

/* Make the account icon match the visual weight of search */
.header .account-trigger svg{
    width:20px !important;
    height:20px !important;
}

/* Mobile hamburger gets the same 42 × 42 control size */
.header .mobile-menu-btn{
    width:42px !important;
    min-width:42px !important;
    height:42px !important;
    min-height:42px !important;
}

/* Mobile: keep search/account/cart balanced and easy to tap */
@media (max-width:900px){
    .header .tools{
        gap:8px !important;
    }

    .header .tools > button.icon-btn[aria-label="Search"]{
        width:42px !important;
        min-width:42px !important;
        height:42px !important;
        min-height:42px !important;
        font-size:22px !important;
    }

    .header .account-trigger{
        width:42px !important;
        min-width:42px !important;
        height:42px !important;
        min-height:42px !important;
        padding:0 !important;
        border-radius:999px !important;
    }

    .header .account-trigger svg{
        width:20px !important;
        height:20px !important;
    }

    .header .cart-header-btn{
        min-height:42px !important;
        height:42px !important;
        padding:0 10px !important;
    }
}


/* =========================================================
   VANCE CEYLON — TEXT VISIBILITY + READABILITY FIX
   Safe final override for desktop + mobile.
   Keeps all existing layout/functions.
   ========================================================= */

/* ---------- GENERAL SMALL TEXT: slightly larger ---------- */
.eyebrow,
.card-category,
.collection span,
.footer-title,
.filter,
.search-quick-btn,
.search-product-category,
.option-label,
.small-btn,
.mobile-menu-eyebrow,
.account-trigger-text{
    font-size:12px !important;
    line-height:1.45 !important;
}

/* Product names / common supporting copy */
.card-name,
.search-product-name,
.vance-option-copy,
.section-note,
.footer-links,
.footer-links a{
    font-size:14px !important;
    line-height:1.5 !important;
}

/* ---------- LIGHT THEME: remove washed-out grey text ---------- */
html[data-shop-theme="day"] :is(
    .eyebrow,
    .section-note,
    .card-category,
    .collection span,
    .footer-title,
    .filter,
    .search-quick-btn,
    .search-product-category,
    .option-label,
    .mobile-menu-eyebrow,
    .vance-account-heading p,
    .vance-account-status,
    .vance-delivery-note
){
    color:#4a4a4a !important;
}

/* Search overlay/category chips: clear dark text */
html[data-shop-theme="day"] .search-category-result,
html[data-shop-theme="day"] .search-quick-btn{
    color:#222 !important;
    border-color:rgba(0,0,0,.16) !important;
}

html[data-shop-theme="day"] .search-category-result:hover,
html[data-shop-theme="day"] .search-quick-btn:hover{
    color:#000 !important;
    background:rgba(0,0,0,.06) !important;
}

/* Search results */
.search-category-result{
    font-size:14px !important;
    font-weight:700 !important;
    line-height:1.4 !important;
}

.search-product-result{
    font-size:14px !important;
}

.search-product-result strong,
.search-product-name{
    font-size:15px !important;
    line-height:1.4 !important;
}

.search-product-category{
    font-size:12px !important;
    color:#555 !important;
}

/* Search input: keep readable on mobile */
.search-panel input,
.search-modal input,
#searchInput{
    font-size:clamp(20px, 5vw, 30px) !important;
    line-height:1.25 !important;
}

/* ---------- STORE FILTERS ---------- */
.filter{
    color:#4d4d4d !important;
    font-weight:700 !important;
}

.filter.active,
.filters button.active{
    color:#fff !important;
}

/* ---------- CHECKOUT: increase small text ---------- */
#vanceCheckout .vc-back{
    font-size:14px !important;
}

#vanceCheckout .vc-brand small{
    font-size:10px !important;
}

#vanceCheckout .vc-eyebrow{
    font-size:11px !important;
    color:#555 !important;
}

#vanceCheckout .vc-intro{
    font-size:14px !important;
    line-height:1.55 !important;
    color:#555 !important;
}

#vanceCheckout .vc-fields label,
#vanceCheckoutForm .vc-fields label{
    font-size:13px !important;
    line-height:1.45 !important;
    color:#444 !important;
}

#vanceCheckout .vc-fields input,
#vanceCheckout .vc-fields select,
#vanceCheckout .vc-fields textarea,
#vanceCheckoutForm .vc-fields input,
#vanceCheckoutForm .vc-fields select,
#vanceCheckoutForm .vc-fields textarea{
    font-size:15px !important;
}

#vanceCheckout .vc-method strong{
    font-size:15px !important;
}

#vanceCheckout .vc-method small{
    font-size:12px !important;
    line-height:1.45 !important;
    color:#555 !important;
}

#vanceCheckout .vc-method-icon{
    font-size:12px !important;
}

#vanceCheckout .vc-summary > div{
    font-size:14px !important;
}

#vanceCheckout .vc-summary > div:nth-child(2){
    font-size:13px !important;
    color:#555 !important;
}

#vanceCheckout .vc-summary p{
    font-size:12px !important;
    line-height:1.6 !important;
    color:#555 !important;
}

#vanceCheckout .vc-preview{
    font-size:12px !important;
    color:#555 !important;
}

#vanceCheckout .vc-review-details{
    font-size:14px !important;
    line-height:1.75 !important;
}

#vanceCheckout .vc-notice{
    font-size:13px !important;
    line-height:1.6 !important;
    color:#444 !important;
}

/* ---------- ACCOUNT / ORDERS ---------- */
.vance-account-heading p,
.vance-account-status,
#loggedInAccount .profile-email,
#loggedInAccount .vance-delivery-note{
    font-size:12px !important;
    line-height:1.5 !important;
}

#myOrdersSection #myOrdersList article p,
#myOrdersSection #myOrdersList article span{
    font-size:12px !important;
    line-height:1.4 !important;
}

#myOrdersSection .vance-order-item-info strong{
    font-size:13px !important;
}

#myOrdersSection .vance-order-item-info span{
    font-size:12px !important;
}

#myOrdersSection #orderDeliveryNote{
    font-size:12px !important;
    line-height:1.5 !important;
}

/* ---------- MOBILE: readable but still compact ---------- */
@media (max-width:600px){
    .eyebrow,
    .card-category,
    .collection span,
    .filter,
    .search-quick-btn,
    .search-product-category,
    .option-label,
    .mobile-menu-eyebrow{
        font-size:11px !important;
    }

    .card-name,
    .search-category-result,
    .search-product-result{
        font-size:14px !important;
    }

    #vanceCheckout .vc-intro{
        font-size:13px !important;
    }

    #vanceCheckout .vc-fields label,
    #vanceCheckoutForm .vc-fields label{
        font-size:12px !important;
    }

    #vanceCheckout .vc-fields input,
    #vanceCheckout .vc-fields select,
    #vanceCheckout .vc-fields textarea{
        font-size:16px !important; /* prevents mobile zoom and improves readability */
    }

    #vanceCheckout .vc-method strong{
        font-size:14px !important;
    }

    #vanceCheckout .vc-method small,
    #vanceCheckout .vc-summary p,
    #vanceCheckout .vc-preview{
        font-size:12px !important;
    }
}


/* =========================================================
   VANCE CEYLON — CHECKOUT TEXT SIZE / READABILITY ONLY
   No layout or function changes.
   ========================================================= */

/* Section headings / legends */
#vanceCheckout legend,
#vanceCheckout .vc-section-title,
#vanceCheckout .vc-eyebrow{
    font-size:13px !important;
    line-height:1.4 !important;
}

/* Main intro / helper copy */
#vanceCheckout .vc-intro{
    font-size:15px !important;
    line-height:1.6 !important;
}

/* Form field labels */
#vanceCheckout .vc-fields label,
#vanceCheckoutForm .vc-fields label{
    font-size:14px !important;
    line-height:1.5 !important;
}

/* Inputs/selects/textarea values */
#vanceCheckout input:not([type="radio"]),
#vanceCheckout select,
#vanceCheckout textarea{
    font-size:16px !important;
    line-height:1.4 !important;
}

/* Payment method names */
#vanceCheckout .vc-method strong{
    font-size:17px !important;
    line-height:1.35 !important;
}

/* Payment descriptions */
#vanceCheckout .vc-method small{
    font-size:13px !important;
    line-height:1.45 !important;
}

/* Island-wide delivery / bank info / notices */
#vanceCheckout .vc-notice,
#vanceCheckout #vcBankInfo,
#vanceCheckout #vcBankDetails,
#vanceCheckout .vance-bank-islandwide-note,
#vanceCheckout .vance-delivery-note{
    font-size:14px !important;
    line-height:1.65 !important;
}

/* Bank details lines */
#vanceCheckout #vcBankInfo,
#vanceCheckout #vcBankDetails{
    white-space:pre-wrap !important;
    font-size:14px !important;
    line-height:1.75 !important;
}

/* Delivery area helper text */
#vanceCheckoutForm .vc-fields label:has(select[name="area"]) small{
    font-size:13px !important;
    line-height:1.5 !important;
}

/* Summary labels and prices */
#vanceCheckout .vc-summary > div{
    font-size:15px !important;
    line-height:1.45 !important;
}

#vanceCheckout .vc-summary > div:nth-child(2){
    font-size:14px !important;
}

/* Summary totals */
#vanceCheckout .vc-summary strong{
    font-size:16px !important;
}

/* Estimated delivery text */
#vanceCheckout .vc-summary p{
    font-size:13px !important;
    line-height:1.65 !important;
}

/* Review / confirmation text */
#vanceCheckout .vc-review-details{
    font-size:15px !important;
    line-height:1.75 !important;
}

/* Buttons and back/edit text */
#vanceCheckout .vc-primary,
#vanceCheckout .vc-back,
#vanceCheckout #vcEdit,
#vanceCheckout .vb-edit-cart{
    font-size:14px !important;
}

/* Small preview/footer checkout text */
#vanceCheckout .vc-preview{
    font-size:12px !important;
    line-height:1.5 !important;
}

/* Mobile: keep critical checkout data clearly readable */
@media(max-width:600px){
    #vanceCheckout legend,
    #vanceCheckout .vc-section-title,
    #vanceCheckout .vc-eyebrow{
        font-size:12px !important;
    }

    #vanceCheckout .vc-intro{
        font-size:14px !important;
    }

    #vanceCheckout .vc-fields label,
    #vanceCheckoutForm .vc-fields label{
        font-size:13px !important;
    }

    #vanceCheckout input:not([type="radio"]),
    #vanceCheckout select,
    #vanceCheckout textarea{
        font-size:16px !important;
    }

    #vanceCheckout .vc-method strong{
        font-size:16px !important;
    }

    #vanceCheckout .vc-method small,
    #vanceCheckout .vc-notice,
    #vanceCheckout #vcBankInfo,
    #vanceCheckout #vcBankDetails,
    #vanceCheckout .vance-bank-islandwide-note,
    #vanceCheckout .vance-delivery-note{
        font-size:13px !important;
    }

    #vanceCheckout .vc-summary > div{
        font-size:14px !important;
    }

    #vanceCheckout .vc-summary p{
        font-size:13px !important;
    }

    #vanceCheckout .vc-review-details{
        font-size:14px !important;
    }
}


/* =========================================================
   VANCE CEYLON — CHECKOUT TEXT SIZE BIGGER
   Larger readability pass only. No layout/function changes.
   ========================================================= */

/* Section headings */
#vanceCheckout legend,
#vanceCheckout .vc-section-title,
#vanceCheckout .vc-eyebrow{
    font-size:15px !important;
}

/* Intro / helper copy */
#vanceCheckout .vc-intro{
    font-size:17px !important;
    line-height:1.6 !important;
}

/* Form labels */
#vanceCheckout .vc-fields label,
#vanceCheckoutForm .vc-fields label{
    font-size:16px !important;
    line-height:1.5 !important;
}

/* Customer-entered values */
#vanceCheckout input:not([type="radio"]),
#vanceCheckout select,
#vanceCheckout textarea{
    font-size:18px !important;
    line-height:1.4 !important;
}

/* Payment method title */
#vanceCheckout .vc-method strong{
    font-size:19px !important;
    line-height:1.35 !important;
}

/* Payment method description */
#vanceCheckout .vc-method small{
    font-size:15px !important;
    line-height:1.5 !important;
}

/* Delivery / bank / notices */
#vanceCheckout .vc-notice,
#vanceCheckout #vcBankInfo,
#vanceCheckout #vcBankDetails,
#vanceCheckout .vance-bank-islandwide-note,
#vanceCheckout .vance-delivery-note{
    font-size:16px !important;
    line-height:1.7 !important;
}

/* Bank account lines */
#vanceCheckout #vcBankInfo,
#vanceCheckout #vcBankDetails{
    font-size:16px !important;
    line-height:1.8 !important;
}

/* Area helper */
#vanceCheckoutForm .vc-fields label:has(select[name="area"]) small{
    font-size:15px !important;
    line-height:1.55 !important;
}

/* Summary rows */
#vanceCheckout .vc-summary > div{
    font-size:17px !important;
    line-height:1.5 !important;
}

#vanceCheckout .vc-summary > div:nth-child(2){
    font-size:16px !important;
}

/* Prices / totals */
#vanceCheckout .vc-summary strong{
    font-size:18px !important;
}

/* Delivery estimate */
#vanceCheckout .vc-summary p{
    font-size:15px !important;
    line-height:1.7 !important;
}

/* Review and confirmation */
#vanceCheckout .vc-review-details{
    font-size:17px !important;
    line-height:1.8 !important;
}

/* Buttons */
#vanceCheckout .vc-primary,
#vanceCheckout .vc-back,
#vanceCheckout #vcEdit,
#vanceCheckout .vb-edit-cart{
    font-size:16px !important;
}

/* Tiny preview text */
#vanceCheckout .vc-preview{
    font-size:14px !important;
}

/* Mobile */
@media(max-width:600px){
    #vanceCheckout legend,
    #vanceCheckout .vc-section-title,
    #vanceCheckout .vc-eyebrow{
        font-size:14px !important;
    }

    #vanceCheckout .vc-intro{
        font-size:16px !important;
    }

    #vanceCheckout .vc-fields label,
    #vanceCheckoutForm .vc-fields label{
        font-size:15px !important;
    }

    #vanceCheckout input:not([type="radio"]),
    #vanceCheckout select,
    #vanceCheckout textarea{
        font-size:18px !important;
    }

    #vanceCheckout .vc-method strong{
        font-size:18px !important;
    }

    #vanceCheckout .vc-method small,
    #vanceCheckout .vc-notice,
    #vanceCheckout #vcBankInfo,
    #vanceCheckout #vcBankDetails,
    #vanceCheckout .vance-bank-islandwide-note,
    #vanceCheckout .vance-delivery-note{
        font-size:15px !important;
    }

    #vanceCheckout .vc-summary > div{
        font-size:16px !important;
    }

    #vanceCheckout .vc-summary p{
        font-size:15px !important;
    }

    #vanceCheckout .vc-review-details{
        font-size:16px !important;
    }
}


/* =========================================================
   VANCE CEYLON — MY PROFILE / MY ACCOUNT TEXT BIGGER
   Text-size readability only. No layout/function changes.
   ========================================================= */

/* Small line above My Account */
#accountModal .vance-account-tagline,
#loggedInAccount .vance-account-tagline{
    font-size:13px !important;
    line-height:1.45 !important;
}

/* Main title */
#accountModal .vance-account-heading h1,
#loggedInAccount .vance-account-heading h1{
    font-size:44px !important;
    line-height:1.05 !important;
}

/* Customer name */
#accountModal .vance-user-details h2,
#loggedInAccount .vance-user-details h2{
    font-size:22px !important;
    line-height:1.3 !important;
}

/* Email */
#accountModal .vance-user-details .profile-email,
#loggedInAccount .profile-email{
    font-size:14px !important;
    line-height:1.45 !important;
}

/* Profile/member helper text */
#accountModal .profile-welcome,
#accountModal .vance-user-label,
#accountModal .vance-user-details small,
#loggedInAccount .profile-welcome{
    font-size:12px !important;
    line-height:1.45 !important;
}

/* My Orders / My Cart / Continue Shopping */
#accountModal .vance-option-copy strong,
#accountModal .vance-account-option strong,
#loggedInAccount .vance-option-copy strong{
    font-size:18px !important;
    line-height:1.35 !important;
}

/* Descriptions below My Orders / My Cart / Continue Shopping */
#accountModal .vance-option-copy small,
#accountModal .vance-account-option small,
#loggedInAccount .vance-option-copy small{
    font-size:13px !important;
    line-height:1.5 !important;
}

/* Sign out */
#accountModal .vance-sign-out,
#accountModal #signOutBtn,
#loggedInAccount .vance-sign-out{
    font-size:15px !important;
    line-height:1.3 !important;
}

/* Mobile */
@media(max-width:600px){
    #accountModal .vance-account-tagline,
    #loggedInAccount .vance-account-tagline{
        font-size:12px !important;
    }

    #accountModal .vance-account-heading h1,
    #loggedInAccount .vance-account-heading h1{
        font-size:38px !important;
    }

    #accountModal .vance-user-details h2,
    #loggedInAccount .vance-user-details h2{
        font-size:20px !important;
    }

    #accountModal .vance-user-details .profile-email,
    #loggedInAccount .profile-email{
        font-size:13px !important;
    }

    #accountModal .profile-welcome,
    #accountModal .vance-user-label,
    #accountModal .vance-user-details small,
    #loggedInAccount .profile-welcome{
        font-size:11px !important;
    }

    #accountModal .vance-option-copy strong,
    #accountModal .vance-account-option strong,
    #loggedInAccount .vance-option-copy strong{
        font-size:17px !important;
    }

    #accountModal .vance-option-copy small,
    #accountModal .vance-account-option small,
    #loggedInAccount .vance-option-copy small{
        font-size:12px !important;
    }

    #accountModal .vance-sign-out,
    #accountModal #signOutBtn,
    #loggedInAccount .vance-sign-out{
        font-size:14px !important;
    }
}


/* =========================================================
   VANCE CEYLON — SIGN IN / CREATE ACCOUNT TEXT BIGGER
   Text-size readability only. No auth/function changes.
   ========================================================= */

/* Everyday Confidence */
#accountModal .vance-account-tagline{
    font-size:13px !important;
    line-height:1.45 !important;
}

/* Sign In */
#accountModal .vance-account-heading h1{
    font-size:44px !important;
    line-height:1.05 !important;
}

/* Welcome line */
#accountModal .vance-account-heading p{
    font-size:16px !important;
    line-height:1.6 !important;
}

/* Google sign-in main text */
#accountModal .vance-auth-option-text strong{
    font-size:18px !important;
    line-height:1.35 !important;
}

/* Google helper line */
#accountModal .vance-auth-option-text small{
    font-size:13px !important;
    line-height:1.45 !important;
}

/* EMAIL / PASSWORD labels */
#accountModal .vance-field-label{
    font-size:12px !important;
    line-height:1.4 !important;
}

/* Email/password typed text + placeholder */
#accountModal .vance-auth-field,
#accountModal input[type="email"],
#accountModal input[type="password"],
#accountModal input[type="text"]{
    font-size:17px !important;
    line-height:1.4 !important;
}

#accountModal input::placeholder{
    font-size:17px !important;
}

/* OR separator */
#accountModal .vance-auth-divider,
#accountModal .vance-auth-or{
    font-size:12px !important;
}

/* Sign in button */
#accountModal .vance-email-signin{
    font-size:15px !important;
    font-weight:700 !important;
}

/* New to VANCE? */
#accountModal .vance-create-account{
    font-size:14px !important;
    line-height:1.5 !important;
}

/* Create Account */
#accountModal .vance-create-account-btn{
    font-size:14px !important;
    line-height:1.5 !important;
    font-weight:700 !important;
}

/* Mobile */
@media(max-width:600px){
    #accountModal .vance-account-tagline{
        font-size:12px !important;
    }

    #accountModal .vance-account-heading h1{
        font-size:38px !important;
    }

    #accountModal .vance-account-heading p{
        font-size:15px !important;
    }

    #accountModal .vance-auth-option-text strong{
        font-size:17px !important;
    }

    #accountModal .vance-auth-option-text small{
        font-size:12px !important;
    }

    #accountModal .vance-field-label{
        font-size:11px !important;
    }

    #accountModal .vance-auth-field,
    #accountModal input[type="email"],
    #accountModal input[type="password"],
    #accountModal input[type="text"]{
        font-size:16px !important;
    }

    #accountModal input::placeholder{
        font-size:16px !important;
    }

    #accountModal .vance-email-signin{
        font-size:14px !important;
    }

    #accountModal .vance-create-account,
    #accountModal .vance-create-account-btn{
        font-size:13px !important;
    }
}


/* =========================================================
   VANCE CEYLON — CREATE ACCOUNT CLEAN TEXT FIX
   Removes the box / line around "New to VANCE? Create Account"
   No login/auth logic changes.
   ========================================================= */

#accountModal .vance-create-account{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    border-radius:0 !important;
    padding:0 !important;
}

#accountModal .vance-create-account-btn{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    outline:0 !important;
    border-radius:0 !important;
    padding:0 !important;

    text-decoration:none !important;
    text-underline-offset:0 !important;

    color:#111 !important;
    font-weight:700 !important;
}

/* Keep a simple hover without adding any line or box */
#accountModal .vance-create-account-btn:hover{
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    text-decoration:none !important;
    color:#000 !important;
}

/* Keyboard accessibility: clean focus ring only */
#accountModal .vance-create-account-btn:focus-visible{
    outline:2px solid #111 !important;
    outline-offset:4px !important;
    border-radius:4px !important;
}