/* =========================
EXCELLO VARIABLES
========================= */

.exl-gallery-wrap *{
    box-sizing:border-box;
}

.exl-gallery-wrap{
    --exl-primary:#0f172a;
    --exl-secondary:#111827;
    --exl-accent:#2563eb;
    --exl-accent-light:#3b82f6;
    --exl-white:#ffffff;
    --exl-border:#e5e7eb;
    --exl-muted:#64748b;
    --exl-bg:#f8fafc;
    --exl-radius:24px;
    --exl-shadow:
        0 10px 40px rgba(15,23,42,.08);

    position:relative;

    font-family: "Inter", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;

}

/* =========================
MAIN CARD
========================= */

.exl-gallery-card{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    box-shadow:var(--exl-shadow);
    border:1px solid rgba(255,255,255,.6);
    position:relative;
}

/* =========================
SHIMMER
========================= */

.exl-gallery-skeleton{
    position:absolute;
    inset:0;
    z-index:9;
    background:#fff;
    padding:20px;
    transition:.4s ease;
}

.exl-gallery-skeleton.hide{
    opacity:0;
    visibility:hidden;
}

.exl-shimmer{
    position:relative;
    overflow:hidden;
    background:#edf2f7;
}

.exl-shimmer::before{
    content:"";
    position:absolute;
    top:0;
    left:-150%;
    width:120%;
    height:100%;
    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.75),
        transparent
    );
    animation:exlShimmer 1.2s infinite;
}

@keyframes exlShimmer{
    100%{
        left:150%;
    }
}

.exl-main-shimmer{
    width:100%;
    aspect-ratio:2/3;
    border-radius:22px;
}

.exl-thumb-shimmer-wrap{
    display:flex;
    gap:12px;
    margin-top:16px;
}

.exl-thumb-shimmer{
    width:74px;
    height:74px;
    border-radius:16px;
}

/* =========================
MAIN IMAGE
========================= */

.exl-main-slider{
    width:100%;
    background:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #f8fbff 100%
    );
}

.exl-main-slider .swiper-slide{
    overflow:hidden;
    border-radius:0px;
}

.exl-main-slider img{
    width:100%;
    aspect-ratio:2/3;
    object-fit:cover;
    display:block;
    transition:
        transform .5s ease,
        opacity .3s ease;
    will-change:transform;
}

.exl-main-slider img:hover{
    transform:scale(1.04);
}

/* =========================
THUMBNAILS
========================= */

.exl-thumb-slider{
    padding-top:18px;
}

.exl-thumb-slider .swiper-slide{
    border-radius:18px;
    overflow:hidden;
    border:2px solid transparent;
    transition:.3s ease;
    cursor:pointer;
    opacity:.65;
    background:#fff;
}

.exl-thumb-slider .swiper-slide-thumb-active{
    border-color:var(--exl-accent);
    opacity:1;
    transform:translateY(-2px);
    box-shadow:
        0 8px 18px rgba(37,99,235,.18);
}

.exl-thumb-slider img{
    width:100%;
    aspect-ratio:1/1;
    object-fit:cover;
    display:block;
}


.swiper,
.swiper-wrapper,
.swiper-slide {
    transform: translate3d(0,0,0);
    will-change: transform;
    backface-visibility: hidden;
}

.swiper-slide {
    overflow: hidden;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;

    transform: translateZ(0);

    image-rendering: auto;
}

.swiper {
    touch-action: pan-y;
}


.exl-main-slider,
.exl-main-slider .swiper-wrapper,
.exl-main-slider .swiper-slide,
.exl-thumb-slider,
.exl-thumb-slider .swiper-wrapper,
.exl-thumb-slider .swiper-slide{

    transform: translate3d(0,0,0);

    will-change: transform;

    backface-visibility: hidden;

    -webkit-font-smoothing: antialiased;
}

.swiper-slide{

    overflow:hidden;
}

.swiper-slide img{

    width:100%;

    height:100%;

    object-fit:cover;

    transform:translateZ(0);

    backface-visibility:hidden;
}

/* =========================
BADGE
========================= */

/* =========================
EXCELLO PREMIUM BADGE
========================= */

.exl-gallery-badge{

    position:absolute;

    top:18px;
    left:18px;

    z-index:12;

    display:flex;
    align-items:center;
    gap:10px;

    padding: 1px 10px 1px 0px;

    border-radius:999px;

    background:
    linear-gradient(
        135deg,
        rgba(37,99,235,.96) 0%,
        rgba(29,78,216,.96) 35%,
        rgba(15,23,42,.96) 100%
    );

    backdrop-filter:
    blur(18px);

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

    overflow:hidden;

    box-shadow:
        0 10px 30px rgba(37,99,235,.35),
        0 2px 10px rgba(0,0,0,.12),
        inset 0 1px 1px rgba(255,255,255,.22);

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

/* =========================
GLOW EFFECT
========================= */

.exl-gallery-badge::before{

    content:"";

    position:absolute;

    inset:-2px;

    border-radius:inherit;

    background:
    linear-gradient(
        120deg,
        rgba(255,255,255,.35),
        transparent,
        rgba(255,255,255,.15)
    );

    opacity:.65;

    pointer-events:none;
}

/* =========================
SHINE ANIMATION
========================= */

.exl-gallery-badge::after{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

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

    transform:skewX(-20deg);

    animation:exlBadgeShine 3.5s infinite;
}

@keyframes exlBadgeShine{

    100%{
        left:180%;
    }
}

/* =========================
HOVER
========================= */

.exl-gallery-badge:hover{

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

    box-shadow:
        0 16px 40px rgba(37,99,235,.42),
        0 6px 18px rgba(0,0,0,.16);
}

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

.exl-gallery-badge i{

    width:30px;
    height:30px;

    border-radius:50%;

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

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

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

    color:#fff;

    font-size:13px;

    flex-shrink:0;

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

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

.exl-gallery-badge span{

    color:#fff;

    font-size:10px;

    font-weight:normal;

    letter-spacing:1px;

    text-transform:uppercase;

    line-height:1;
}

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

@media(max-width:768px){

    .exl-gallery-badge{

        top:14px;
        left:14px;

        padding:0px 10px 0px 0px;

        gap:4px;
    }

    .exl-gallery-badge span{

        font-size:9px;
        letter-spacing:1px;
    }

    .exl-gallery-badge i{

        width:26px;
        height:26px;

        font-size:11px;
    }
}


/* =========================
PAGINATION
========================= */

.exl-gallery-wrap .swiper-pagination {
    margin-bottom: 0px !important;
    text-align: right;
    padding-right: 10px;
}

.exl-gallery-wrap .swiper-pagination-bullet{
    width:8px !important;
    height:8px !important;
    background:#cbd5e1 !important;
    opacity:1 !important;
    border: none !important;
}

.exl-gallery-wrap .swiper-pagination-bullet-active{
    width:28px !important;
    border-radius:999px !important;
    background:#17248c !important;
}

/* =========================
MOBILE
========================= */
.exl-gallery-wrap{
    width:100%;
    max-width:100%;
    overflow:hidden;
    position:relative;
}
@media(max-width:768px){

    .exl-gallery-card{
        border-radius:0;
        box-shadow:none;
        border:none;
    }

    .exl-gallery-wrap{
        /*margin-inline:-12px;*/
    }

    .exl-thumb-slider{
        padding-inline:12px;
    }

    .exl-gallery-badge{
        top:12px;
        left:12px;
    }

}



/* =========================
EXCELLO FLOATING BUTTONS
========================= */

.exl-floating-actions{

    position:absolute;

    top:18px;
    right:18px;

    z-index:15;

    display:flex;
    flex-direction:column;
    gap:12px;
}

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

.exl-float-btn{

    width:46px;
    height:46px;

    border-radius:16px;

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

    text-decoration:none;

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

    backdrop-filter:
    blur(18px);

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

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

    box-shadow:
        0 10px 30px rgba(15,23,42,.10),
        inset 0 1px 1px rgba(255,255,255,.45);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;

    overflow:hidden;

    position:relative;
}

/* =========================
GLOW
========================= */

.exl-float-btn::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.35),
        transparent
    );

    pointer-events:none;
}

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

.exl-float-btn i{

    font-size:18px;

    color:#0f172a;

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

/* =========================
HOVER
========================= */

.exl-float-btn:hover{

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

    box-shadow:
        0 16px 35px rgba(37,99,235,.18);
}

.exl-float-btn:hover i{

    transform:scale(1.08);
}

/* =========================
WISHLIST ACTIVE
========================= */

.exl-wishlist-btn.active{

    background:
    linear-gradient(
        135deg,
        #ff4d6d,
        #e11d48
    );

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

    box-shadow:
        0 12px 30px rgba(225,29,72,.32);
}

.exl-wishlist-btn.active i{

    color:#fff;
}

/* =========================
SHARE BUTTON
========================= */

.exl-share-btn{

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,.92),
        rgba(248,250,252,.88)
    );
}

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

@media(max-width:768px){

    .exl-floating-actions{

        top:14px;
        right:14px;

        gap:10px;
    }

    .exl-float-btn{

        width:42px;
        height:42px;

        border-radius:14px;
    }

    .exl-float-btn i{

        font-size:16px;
    }
}





/* =========================
EXCELLO MINI RATING
========================= */

.exl-mini-rating-wrap{

    padding:16px 0 8px;
    position: absolute;
    bottom: 115px;
    left: 8px;
    z-index: 2;
}

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

.exl-mini-rating-card{

    display:inline-flex;

    align-items:center;

    gap:10px;

    height:40px;

    padding:0 14px;

    border-radius:14px;

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

    backdrop-filter:
    blur(10px);

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

    border:
    1px solid rgba(15,23,42,.05);

    box-shadow:
        0 4px 18px rgba(15,23,42,.05);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.exl-mini-rating-card:hover{

    transform:
        translateY(-1px);

    box-shadow:
        0 10px 24px rgba(37,99,235,.10);
}

/* =========================
RATING
========================= */

.exl-mini-rating-score{

    display:flex;
    align-items:center;
    gap:4px;

    color:#0f172a;

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

.exl-mini-rating-score i{

    color:#16a34a;

    font-size:12px;
}

/* =========================
DIVIDER
========================= */

.exl-mini-rating-divider{

    width:1px;
    height:14px;

    background:
    rgba(100,116,139,.22);
}

/* =========================
COUNT
========================= */

.exl-mini-rating-count{

    color:#64748b;

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

    letter-spacing:.2px;
}

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

@media(max-width:768px){

    .exl-mini-rating-wrap{

        padding:0px 0 6px;
    }

    .exl-mini-rating-card{

        height:32px;

        padding:0 12px;

        border-radius:12px;

        gap:8px;
    }

    .exl-mini-rating-score{

        font-size:13px;
    }

    .exl-mini-rating-count{

        font-size:12px;
    }
}






/* =========================
EXCELLO ULTRA INFO
========================= */

.exl-ultra-info-wrap{

    position:relative;

    padding:24px 0 18px;
}

/* =========================
TOP
========================= */

.exl-ultra-top{

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

    gap:12px;

    margin-bottom:18px;
}

/* =========================
BRAND
========================= */
/* =========================
EXCELLO SALES BADGE
========================= */

.exl-ultra-brand{

    position:relative;

    display:inline-flex;
    align-items:center;
    gap:10px;

    height:42px;

    padding:0 16px;

    border-radius:999px;

    background:
    linear-gradient(
        135deg,
        rgba(255,106,0,.10),
        rgba(255,59,48,.06)
    );

    border:
    1px solid rgba(255,106,0,.12);

    backdrop-filter:
    blur(12px);

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

    overflow:hidden;

    box-shadow:
        0 8px 22px rgba(255,106,0,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}

/* =========================
HOVER
========================= */

.exl-ultra-brand:hover{

    transform:
        translateY(-2px);

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

/* =========================
GLOW
========================= */

.exl-ultra-brand::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:60%;
    height:100%;

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

    transform:skewX(-20deg);

    animation:exlSalesGlow 3.5s infinite;
}

@keyframes exlSalesGlow{

    100%{
        left:180%;
    }
}

/* =========================
DOT
========================= */

.exl-brand-dot{

    width:12px;
    height:12px;

    border-radius:50%;

    background:
    linear-gradient(
        135deg,
        #ff7a00,
        #ff3b30
    );

    position:relative;

    flex-shrink:0;

    box-shadow:
        0 0 16px rgba(255,106,0,.45);
}

.exl-brand-dot::before{

    content:"";

    position:absolute;

    inset:-5px;

    border-radius:50%;

    border:
    1px solid rgba(255,106,0,.35);

    animation:exlPulseSale 1.8s infinite;
}

@keyframes exlPulseSale{

    100%{

        transform:scale(1.8);

        opacity:0;
    }
}

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

.exl-ultra-brand small{

    display:flex;
    align-items:center;
    gap:7px;

    margin:0;

    color:#111827;

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

    letter-spacing:.2px;
}

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

.exl-ultra-brand small i{

    color:#ff6a00;

    font-size:14px;

    filter:
    drop-shadow(
        0 2px 6px rgba(255,106,0,.25)
    );
}

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

@media(max-width:768px){

    .exl-ultra-brand{

        height:38px;

        padding:0 14px;

        gap:8px;
    }

    .exl-ultra-brand small{

        font-size:12px;
    }

    .exl-brand-dot{

        width:10px;
        height:10px;
    }
}

/* =========================
STOCK
========================= */

.exl-ultra-stock{

    display:flex;
    align-items:center;
    gap:8px;

    padding:8px 14px;

    border-radius:999px;

    background:
    rgba(22,163,74,.08);

    color:#15803d;

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

.exl-stock-pulse{

    width:8px;
    height:8px;

    border-radius:50%;

    background:#22c55e;

    position:relative;
}

.exl-stock-pulse::before{

    content:"";

    position:absolute;

    inset:-4px;

    border-radius:50%;

    border:1px solid rgba(34,197,94,.4);

    animation:exlPulse 1.8s infinite;
}

@keyframes exlPulse{

    100%{

        transform:scale(1.8);

        opacity:0;
    }
}

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

.exl-ultra-title{

    font-size:20px;

    line-height:1.15;

    font-weight:normal;

    letter-spacing:0px;

    color:#020617ed;

    margin-bottom:0px;

    max-width:95%;
}

/* =========================
META
========================= */

.exl-ultra-meta{

    display:flex;
    flex-wrap:wrap;

    gap:10px;

    margin-bottom:26px;
}

.exl-ultra-pill{

    height:38px;

    padding:0 16px;

    border-radius:999px;

    display:flex;
    align-items:center;
    gap:8px;

    background:
    rgba(248,250,252,.9);

    border:
    1px solid rgba(15,23,42,.06);

    color:#334155;

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

    backdrop-filter:blur(12px);
}

.exl-ultra-pill i{

    color:#2563eb;
}

/* =========================
PRICE AREA
========================= */
/* =========================
EXCELLO CLEAN PRICE
========================= */

.exl-clean-price-wrap{

    padding:12px 0 6px;
}

/* =========================
ROW
========================= */

.exl-clean-price-row{

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:14px;

    flex-wrap:wrap;
}

/* =========================
LEFT
========================= */

.exl-clean-price-left{

    display:flex;
    align-items:center;

    gap:12px;

    flex-wrap:wrap;
}

/* =========================
MAIN PRICE
========================= */

.exl-clean-main-price{

    margin-left: 17px;
    font-size: 29px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -1px;
    color: #020617;
    font-weight: 00;
}

/* =========================
OLD PRICE
========================= */

.exl-clean-old-price{

    color:#94a3b8;

    font-size:14px;

    font-weight:700;

    text-decoration:line-through;

    transform:translateY(2px);
}

/* =========================
OFF
========================= */

.exl-clean-off{

    height: 28px;
    padding: 0 14px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(22, 163, 74, .08);
    color: #16a34a;
    font-size: 12px;
    font-weight: 800;
}

.exl-clean-off i{

    font-size:14px;
}

/* =========================
SAVE
========================= */

.exl-clean-save{

    color:#16a34a;

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

    white-space:nowrap;
}

/* =========================
TAX
========================= */

.exl-clean-tax{

    margin-top:10px;

    color:#64748b;

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

/* =========================
TABLET
========================= */

@media(max-width:992px){

    .exl-clean-main-price{

        /*font-size:44px;*/
    }

    .exl-clean-old-price{

        font-size:20px;
    }
}

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

@media(max-width:768px){

    .exl-clean-price-wrap{

        padding:0px 0 4px;
    }

    .exl-clean-price-row{

        align-items:center;

        gap:10px;
    }

    .exl-clean-price-left{

        gap:10px;
    }

    .exl-clean-main-price{

        font-size: 30px;
        letter-spacing: 0px;
        margin-left: 0px;
    }

    .exl-clean-old-price{

        font-size:18px;
    }

    .exl-clean-off{

        height:34px;

        padding:0 12px;

        font-size:13px;
    }

    .exl-clean-save{

        font-size:13px;
    }

    .exl-clean-tax{

        margin-top:8px;

        font-size:12px;
    }
}

.font-inter{
    font-family: "Inter", sans-serif !important;
    font-optical-sizing: auto;
    font-style: normal;
}

/* =========================
TABLET
========================= */

@media(max-width:992px){

    .exl-ultra-title{

        font-size:32px;
    }

    .exl-ultra-price{

        font-size:52px;
    }

    .exl-ultra-old-price{

        font-size:22px;
    }

    .exl-ultra-offer{

        width:90px;
        height:90px;
    }

    .exl-ultra-offer span{

        font-size:28px;
    }
}

/* =========================
MOBILE
========================= */
.px-15{
    padding-left: 15px !important;
    padding-right: 15px !important;
}
@media(max-width:768px){

    .exl-ultra-info-wrap{

        padding:18px 15px 12px;
    }

    .exl-ultra-top{

        margin-bottom:14px;
    }

    .exl-ultra-title{

        font-size: 13px;
        line-height: 1.35;
        letter-spacing: 0;
        margin-bottom: 0px;
        max-width: 100%;
        font-weight: 500;
    }

    .exl-ultra-meta{

        gap:8px;

        margin-bottom:20px;
    }

    .exl-ultra-pill{

        height:34px;

        padding:0 12px;

        font-size:11px;
    }

    .exl-ultra-price-area{

        align-items:center;

        gap:18px;
    }

    .exl-ultra-price{

        font-size:42px;

        letter-spacing:-2px;
    }

    .exl-ultra-old-price{

        font-size:18px;

        transform:none;
    }

    .exl-ultra-offer{

        width:72px;
        height:72px;

        border-radius:22px;

        font-size:11px;
    }

    .exl-ultra-offer span{

        font-size:22px;

        margin-bottom:4px;
    }

    .exl-tax-info{

        font-size:12px;
    }

    .exl-save-info{

        font-size:12px;
    }
}


.hrborder{
    margin-top: 1rem;
    border: 1px solid #ccc;
}

.textsku{
    letter-spacing: 0px !important;
    font-size: 10px;
}

.offer-card{
    border: 1px solid #1e3a8a;
}




/* =========================================================
EXCELLO VARIANTS 2026
========================================================= */

.exl-variant-main-wrap{

    margin-top:24px;
}

/* =========================================================
SECTION
========================================================= */

.exl-var-section{

    margin-bottom:34px;
}

/* =========================================================
HEAD
========================================================= */

.exl-var-head{

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

    gap:12px;

    margin-bottom:16px;
}

.exl-var-title{

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

    color:#111827;

    letter-spacing:-.2px;
}

.exl-var-title span{

    color:#4b5563;

    font-weight:700;
}

/* =========================================================
SIZE GUIDE
========================================================= */

.exl-size-chart-btn{

    border:none;
    background:none;

    color:#2563eb;

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

    padding:0;

    outline: none;
}

/* =========================================================
COLOR WRAP
========================================================= */
/* =========================================================
COLOR SCROLL
========================================================= */

.exl-color-scroll{

    display:flex;

    gap:14px;

    overflow-x:auto;

    overflow-y:hidden;

    scrollbar-width:none;

    scroll-behavior:smooth;

    padding:6px 5px 10px;

    cursor:grab;

    -webkit-overflow-scrolling:touch;
}

.exl-color-scroll::-webkit-scrollbar{
    height:8px;
}

/* =========================================================
DESKTOP SCROLLBAR
========================================================= */

@media(min-width:992px){

    .exl-color-scroll{

        scrollbar-width:thin;

        scrollbar-color:
        #cbd5e1
        transparent;
    }

    .exl-color-scroll::-webkit-scrollbar{

        display:block;

        height:8px;
    }

    .exl-color-scroll::-webkit-scrollbar-track{

        background:
        #edf2f7;

        border-radius:999px;
    }

    .exl-color-scroll::-webkit-scrollbar-thumb{

        background:
        linear-gradient(
            90deg,
            #2563eb,
            #1d4ed8
        );

        border-radius:999px;
    }

    .exl-color-scroll::-webkit-scrollbar-thumb:hover{

        background:
        linear-gradient(
            90deg,
            #1d4ed8,
            #1e40af
        );
    }
}

/* =========================================================
ACTIVE CURSOR
========================================================= */

.exl-color-scroll:active{
    cursor:grabbing;
}

.exl-color-scroll::-webkit-scrollbar{
    display:none;
}

/* =========================================================
COLOR CARD
========================================================= */

.exl-color-card{

    width:116px;

    min-width:116px;

    background:#fff;

    border:
    1.5px solid #e5e7eb;

    border-radius:24px;

    overflow:hidden;

    position:relative;

    padding:0;

    text-align:left;

    transition:
        transform .25s ease,
        border .25s ease,
        box-shadow .25s ease;

    box-shadow:
        0 2px 10px rgba(15,23,42,.04);
}

/* =========================================================
ACTIVE
========================================================= */

.exl-color-card.active{

    color: #0F1111 !important;
    border-color: #2563eb;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
    transform: translateY(-2px);
    border: 1px solid transparent;
    outline: 3px solid #2162a1;
    background-color: #EDFDFF;
}

/* =========================================================
DISABLED
========================================================= */

.exl-color-card.permanently-disabled{

    opacity:.45;

    filter:grayscale(1);

    pointer-events:none;
}

/* =========================================================
IMAGE
========================================================= */

.exl-color-img{

    width:100%;
    height:116px;

    overflow:hidden;

    background:#f8fafc;
}

.exl-color-img img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

/* =========================================================
CONTENT
========================================================= */

.exl-color-info{

    padding:10px;
    border-top: 1px solid #f4f4f4ed;
}

.exl-color-name{

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

    color:#11182791;

    line-height:1.3;

    margin-bottom:6px;

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

.exl-color-price{

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

    color:#111827;

    line-height:1;
}

.exl-color-old{

    margin-top:4px;

    color:#94a3b8;

    font-size:12px;

    text-decoration:line-through;
}

/* =========================================================
LIMITED
========================================================= */

.exl-limited{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    background:
    linear-gradient(
        135deg,
        #e11d48,
        #be123c
    );

    color:#fff;

    text-align:center;

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

    padding:5px;
}

/* =========================================================
SIZE WRAP
========================================================= */

.exl-size-scroll{

    display:flex;

    gap:12px;

    overflow-x:auto;

    overflow-y:hidden;

    scrollbar-width:none;

    scroll-behavior:smooth;

    -webkit-overflow-scrolling:touch;

    flex-wrap:nowrap;
    padding-top: 5px;
    padding-bottom: 5px;
}

.exl-size-scroll::-webkit-scrollbar{
    display:none;
}

/* IMPORTANT */

.exl-size-scroll .exl-size-btn{

    flex:0 0 auto;
}

/* =========================================================
SIZE BUTTON
========================================================= */

.exl-size-btn{

    min-width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 13px;

    border:
    1.5px solid #e5e7eb;

    background:#fff;

    color:#111827;

    font-weight:500;

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

/* =========================================================
SIZE ACTIVE
========================================================= */

.exl-size-btn.active{

    color: #0F1111 !important;
    border-color: #2563eb;
    box-shadow: 0 10px 22px rgba(37, 99, 235, .18);
    transform: translateY(-2px);
    border: 1px solid transparent;
    outline: 3px solid #2162a1;
    background-color: #EDFDFF;
}

/* =========================================================
SIZE DISABLED
========================================================= */

.exl-size-btn.permanently-disabled{

    opacity:.4;

    text-decoration:line-through;

    pointer-events:none;
}

/* =========================================================
SKELETON
========================================================= */

.exl-variant-skeleton-wrap{

    display:flex;

    gap:14px;

    overflow:hidden;

    margin-top:18px;
}

.exl-sk-card{

    width:116px;
    height:176px;

    border-radius:24px;

    background:
    linear-gradient(
        90deg,
        #f1f5f9 25%,
        #e2e8f0 37%,
        #f1f5f9 63%
    );

    background-size:400% 100%;

    animation:
    exlSkeleton 1.3s ease infinite;
}

@keyframes exlSkeleton{

    0%{
        background-position:100% 50%;
    }

    100%{
        background-position:0 50%;
    }
}

/* =========================================================
TABLET
========================================================= */

@media(max-width:992px){

    .exl-color-card{

        width:104px;
        min-width:104px;
    }

    .exl-color-img{

        height:104px;
    }

    .exl-sk-card{

        width:104px;
        height:164px;
    }
}

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

@media(max-width:768px){

    .exl-var-section{

        margin-bottom:26px;
    }

    .exl-var-head{

        margin-bottom:14px;
    }

    .exl-var-title{

        font-size:14px;
    }

    .exl-color-scroll{

        gap:10px;
    }

    .exl-color-card{

        width:92px;
        min-width:92px;

        border-radius:20px;
    }

    .exl-color-img{

        height:92px;
    }

    .exl-color-info{

        padding:8px;
    }

    .exl-color-name{

        font-size:12px;

        margin-bottom:4px;
    }

    .exl-color-price{

        font-size:14px;
    }

    .exl-color-old{

        font-size:11px;
    }

    .exl-size-scroll{

        gap:10px;
    }



    .exl-sk-card{

        width:92px;
        height:152px;

        border-radius:20px;
    }

    .exl-limited{

        font-size:9px;

        padding:4px;
    }
}


/* =========================================================
EXCELLO SIZE MODAL
========================================================= */

.exl-size-modal{

    border:none;

    border-radius:28px;

    overflow:hidden;
}

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

.exl-size-header{

    background:
    linear-gradient(
        135deg,
        #111827,
        #1f2937
    );

    border:none;

    padding:18px 22px;
}

.exl-size-header h5{

    color:#fff;

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

    margin:0;
}

/* =========================================================
BODY
========================================================= */

.sizechart-scroll-wrapper{

    max-height:78vh;

    overflow-y:auto;

    background:#fff;
}

/* =========================================================
IMAGE
========================================================= */

.sizechart-img-box{

    padding:12px;
}

.sizechart-img-box img{

    width:100%;

    border-radius:18px;

    display:block;
}

/* =========================================================
SKELETON
========================================================= */

.exl-size-skeleton-wrap{

    padding:16px;
}

.exl-size-skeleton{

    width:100%;
    height:420px;

    border-radius:24px;

    background:
    linear-gradient(
        90deg,
        #f1f5f9 25%,
        #e2e8f0 37%,
        #f1f5f9 63%
    );

    background-size:400% 100%;

    animation:
    exlSkeleton 1.4s ease infinite;
}

@keyframes exlSkeleton{

    0%{
        background-position:100% 50%;
    }

    100%{
        background-position:0 50%;
    }
}






/* =========================================================
EXCELLO OFFER SKELETON
========================================================= */

.exl-offer-skeleton-wrap{

    padding-top:10px;
}

/* =========================================================
PRICE
========================================================= */

.exl-offer-sk-price{

    width:180px;
    height:34px;

    border-radius:12px;

    margin-bottom:18px;

    background:
    linear-gradient(
        90deg,
        #f1f5f9 25%,
        #e2e8f0 37%,
        #f1f5f9 63%
    );

    background-size:400% 100%;

    animation:
    exlOfferSkeleton 1.4s ease infinite;
}

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

.exl-offer-sk-card{

    width:100%;
    height:110px;

    border-radius:22px;

    background:
    linear-gradient(
        90deg,
        #f1f5f9 25%,
        #e2e8f0 37%,
        #f1f5f9 63%
    );

    background-size:400% 100%;

    animation:
    exlOfferSkeleton 1.4s ease infinite;
}

/* =========================================================
ANIMATION
========================================================= */

@keyframes exlOfferSkeleton{

    0%{
        background-position:100% 50%;
    }

    100%{
        background-position:0 50%;
    }
}






/* =========================================================
VARIANT WRAPPER
========================================================= */

.exl-variant-wrapper{

    position:relative;
}

/* =========================================================
OVERLAY
========================================================= */

.exl-variant-overlay{

    position:absolute;

    inset:0;

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

    backdrop-filter:
    blur(10px);

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

    z-index:50;

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

    opacity:0;

    visibility:hidden;

    transition:
        opacity .28s ease,
        visibility .28s ease;
}

/* =========================================================
ACTIVE
========================================================= */

.exl-variant-overlay.active{

    opacity:1;

    visibility:visible;
}

/* =========================================================
LOADER BOX
========================================================= */

.exl-variant-loader{

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:14px;

    padding:22px 28px;

    border-radius:24px;

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

    box-shadow:
        0 20px 50px rgba(15,23,42,.12);
}

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

.exl-variant-loader span{

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

    color:#111827;
}

/* =========================================================
RING
========================================================= */

.exl-loader-ring{

    width:42px;
    height:42px;

    border-radius:50%;

    border:
    3px solid #dbeafe;

    border-top:
    3px solid #2563eb;

    animation:
    exlRotate 1s linear infinite;
}

/* =========================================================
ANIMATION
========================================================= */

@keyframes exlRotate{

    100%{
        transform:rotate(360deg);
    }
}



/*MAIN*/
/* =========================================================
MINI DELIVERY
========================================================= */

.exl-mini-delivery{

    display:flex;
    align-items:start;
    justify-content:space-between;

    gap:12px;

    padding:0px;

    background:#fff;

    /*border:
    1px solid #edf2f7;*/

    border-radius:22px;

    /*box-shadow:
        0 4px 14px rgba(15,23,42,.04);

    margin-top:14px;*/
}

/* =========================================================
LEFT
========================================================= */

.exl-mini-left{

    display:flex;
    align-items:center;

    gap:12px;

    min-width:0;
}

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

.exl-mini-icon{

    width:44px;
    height:44px;

    flex-shrink:0;

    border-radius:14px;

    background:
    rgba(37,99,235,.08);

    color:#2563eb;

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

    font-size:18px;
}

/* =========================================================
CONTENT
========================================================= */

.exl-mini-content{

    min-width:0;
}

.exl-mini-title{

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

    color:#111827;

    line-height:1.3;
}

.exl-mini-title span{

    font-weight: 500;
    display: block;
    margin-top: 3px;
    color: #686767;
}

.exl-mini-date{

    margin-top:2px;

    font-size:12px;

    color:#64748b;
}

.exl-mini-date span{

    color:#16a34a;

    font-weight:700;
}

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

.exl-mini-btn{

    border:none;

    height:40px;

    padding:0 16px;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    color:#fff;

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

    flex-shrink:0;
}

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

.exl-delivery-modal{

    border:none;

    border-radius:26px;

    overflow:hidden;
}

/* =========================================================
INPUT WRAP
========================================================= */

.exl-input-wrap{

    display:flex;

    gap:10px;
}

/* =========================================================
INPUT
========================================================= */

.exl-pin-input{

    flex:1;

    height:50px;

    border:
    1.5px solid #e2e8f0;

    border-radius:16px;

    padding:20px 16px;

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

    outline:none;
}

.exl-pin-input:focus{

    border-color:#2563eb;

    box-shadow:
        0 0 0 4px rgba(37,99,235,.08);
}

/* =========================================================
BTN
========================================================= */

.exl-pin-btn{

    width:100px;

    border:none;

    border-radius:16px;

    background: linear-gradient(135deg, #0b1246, #1d4ed8);

    color:#fff;

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

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

@media(max-width:768px){

    .exl-mini-delivery{

        padding:0px;

        border-radius:18px;
    }

    .exl-mini-icon{

        width:40px;
        height:40px;

        border-radius:12px;

        font-size:16px;
    }

    .exl-mini-title{

        font-size:13px;
    }

    .exl-mini-date{

        font-size:11px;
    }



    .exl-input-wrap{

        flex-direction:column;
    }

    .exl-pin-btn{

        width:100%;

        height:48px;
    }
}


/* =========================================================
EXCELLO POLICY SECTION
========================================================= */

.exl-policy-wrap{

    display:flex;
    flex-direction:column;

    gap:14px;

    margin-top:8px;
}

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

.exl-policy-card{

    position:relative;

    display:flex;
    align-items:flex-start;

    gap:14px;

    padding:16px;

    border-radius:24px;

    overflow:hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

    will-change:transform;

    contain:layout paint;

    margin-top: 10px;
}

/* =========================================================
HOVER
========================================================= */

.exl-policy-card:hover{

    transform:
        translateY(-2px);
}

/* =========================================================
BLUE
========================================================= */

.exl-policy-blue{

    background:
    linear-gradient(
        135deg,
        #eff6ff,
        #dbeafe
    );

    border:
    1px solid rgba(37,99,235,.12);

    box-shadow:
        0 10px 26px rgba(37,99,235,.08);
}

/* =========================================================
RED
========================================================= */

.exl-policy-red{

    background:
    linear-gradient(
        135deg,
        #fff1f2,
        #ffe4e6
    );

    border:
    1px solid rgba(225,29,72,.10);

    box-shadow:
        0 10px 26px rgba(225,29,72,.08);

        margin-top: 0px !important;
}

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

.exl-policy-icon{

    width:52px;
    height:52px;

    flex-shrink:0;

    border-radius:18px;

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

    font-size:20px;
}

.exl-policy-blue
.exl-policy-icon{

    background:
    rgba(37,99,235,.12);

    color:#2563eb;
}

.exl-policy-red
.exl-policy-icon{

    background:
    rgba(225,29,72,.12);

    color:#e11d48;
}

/* =========================================================
CONTENT
========================================================= */

.exl-policy-content{

    min-width:0;
}

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

.exl-policy-title{

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

    color:#111827;

    line-height:1.3;

    margin-bottom:4px;
}

/* =========================================================
DESC
========================================================= */

.exl-policy-desc{

    font-size:13px;

    color:#475569;

    line-height:1.5;
}

.exl-policy-desc span{

    font-weight:800;

    color:#111827;
}

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

@media(max-width:768px){

    .exl-policy-wrap{

        gap:12px;
    }

    .exl-policy-card{

        padding:10px;

        border-radius:10px;

        gap:12px;
    }

    .exl-policy-icon{

        width:46px;
        height:46px;

        border-radius:16px;

        font-size:18px;
    }

    .exl-policy-title{

        font-size:14px;
    }

    .exl-policy-desc{

        font-size:12px;
    }
}



/* =========================================================
EXCELLO ICON TRUST
========================================================= */

.exl-icon-trust{

    display:flex;

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

    gap:8px;

    padding:0px 0;
}

/* =========================================================
ITEM
========================================================= */

.exl-icon-item{

    text-align:center;
}

/* =========================================================
CIRCLE
========================================================= */

.exl-icon-circle{

    width:42px;
    height:42px;

    margin:0 auto 8px;

    border-radius:50%;

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

    font-size:18px;
}

/* =========================================================
COLORS
========================================================= */

.exl-blue{

    background:
    rgba(37,99,235,.10);

    color:#2563eb;
}

.exl-green{

    background:
    rgba(22,163,74,.10);

    color:#16a34a;
}

.exl-orange{

    background:
    rgba(249,115,22,.10);

    color:#f97316;
}

.exl-purple{

    background:
    rgba(147,51,234,.10);

    color:#9333ea;
}

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

.exl-icon-text{

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

    line-height:1.35;

    color:#374151;
}

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

@media(max-width:768px){



    .exl-icon-circle{

        width:38px;
        height:38px;

        font-size:16px;

        margin-bottom:6px;
    }

    .exl-icon-text{

        font-size:11px;
    }
}



/* =========================================================
RELATED WRAP
========================================================= */

.exl-related-wrap{

    margin-top:5px;
}

/* =========================================================
HEAD
========================================================= */

.exl-related-head{

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

    margin-bottom:16px;
}

.exl-related-head h3{

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

    color:#111827;

    margin:0;
}

.exl-related-arrow{

    width:42px;
    height:42px;

    border-radius:50%;

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

    background:#111827;

    color:#fff;

    font-size:18px;
}

/* =========================================================
SLIDER
========================================================= */

/* =========================================================
RELATED WRAP
========================================================= */

.exl-related-wrap{

    margin-top:5px;
}

/* =========================================================
RELATED SLIDER
========================================================= */

.exl-related-slider{

    display:flex;

    gap:14px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    padding-bottom:10px;

    -webkit-overflow-scrolling:touch;
}

/* =========================================================
MOBILE HIDE SCROLLBAR
========================================================= */

@media(max-width:991px){

    .exl-related-slider{

        scrollbar-width:none;
    }

    .exl-related-slider::-webkit-scrollbar{
        display:none;
    }
}

/* =========================================================
DESKTOP PREMIUM SCROLLBAR
========================================================= */

@media(min-width:992px){

    .exl-related-slider{

        scrollbar-width:thin;

        scrollbar-color:
        #cbd5e1
        transparent;
    }

    .exl-related-slider::-webkit-scrollbar{

        height:8px;
    }

    .exl-related-slider::-webkit-scrollbar-track{

        background:
        #edf2f7;

        border-radius:999px;
    }

    .exl-related-slider::-webkit-scrollbar-thumb{

        background:
        linear-gradient(
            90deg,
            #2563eb,
            #1d4ed8
        );

        border-radius:999px;
    }

    .exl-related-slider::-webkit-scrollbar-thumb:hover{

        background:
        linear-gradient(
            90deg,
            #1d4ed8,
            #1e40af
        );
    }
}

.exl-related-slider::-webkit-scrollbar{
    display:none;
}

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

.exl-related-card{

    width:210px;

    min-width:210px;

    background:#fff;

    border:
    1px solid #edf2f7;

    border-radius:22px;

    overflow:hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

    box-shadow:
        0 4px 16px rgba(15,23,42,.04);

    text-decoration:none;
}

.exl-related-card:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 28px rgba(15,23,42,.08);
}

/* =========================================================
IMAGE
========================================================= */

.exl-related-img{

    aspect-ratio:1/1;

    overflow:hidden;

    background:#f8fafc;
}

.exl-related-img img{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;
}

/* =========================================================
BODY
========================================================= */

.exl-related-body{

    padding:12px;
    border-top: 1px solid #cccccc66;
}

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

.exl-related-title{

    font-size:14px;
    font-weight:normal;

    color:#111827;

    line-height:1.45;

    margin-bottom:3px;

    overflow:hidden;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    min-height:40px;
}

/* =========================================================
PRICE
========================================================= */

.exl-related-price{

    display:flex;
    align-items:center;

    gap:8px;

    flex-wrap:wrap;

    margin-bottom:0px;
}

.exl-related-price strong{

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

    color:#111827;
}

.exl-related-price del{

    font-size:13px;

    color:#94a3b8;
}

/* =========================================================
OFF
========================================================= */

.exl-related-off{

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

    color:#16a34a;
}

/* =========================================================
OFFER
========================================================= */

.exl-related-offer{

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

    color:#2563eb;
}

/* =========================================================
SKELETON
========================================================= */

.exl-related-skeleton{

    display:flex;

    gap:14px;

    overflow:hidden;
}

.exl-related-sk-card{

    width:210px;

    min-width:210px;
}

.exl-related-sk-img{

    width:100%;
    aspect-ratio:1/1;

    border-radius:20px;

    margin-bottom:10px;

    background:
    linear-gradient(
        90deg,
        #f1f5f9 25%,
        #e2e8f0 37%,
        #f1f5f9 63%
    );

    background-size:400% 100%;

    animation:
    exlSkeleton 1.4s ease infinite;
}

.exl-related-sk-line{

    height:14px;

    border-radius:8px;

    margin-bottom:10px;

    background:
    linear-gradient(
        90deg,
        #f1f5f9 25%,
        #e2e8f0 37%,
        #f1f5f9 63%
    );

    background-size:400% 100%;

    animation:
    exlSkeleton 1.4s ease infinite;
}

.exl-related-sk-line.sm{

    width:60%;
}

.exl-related-sk-line{

    width:100%;
}

.exl-related-sk-line.xs{

    width:45%;
}

@keyframes exlSkeleton{

    0%{
        background-position:100% 50%;
    }

    100%{
        background-position:0 50%;
    }
}

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

@media(max-width:768px){

    .exl-related-head h3{

        font-size:15px;
    }

    .exl-related-arrow{

        width:36px;
        height:36px;

        font-size:16px;
    }

    .exl-related-slider{

        gap:12px;
    }

    .exl-related-card{

        width:165px;

        min-width:165px;

        border-radius:18px;
    }

    .exl-related-body{

        padding:10px;
    }

    .exl-related-title{

        font-size:13px;

        min-height:36px;
    }

    .exl-related-price strong{

        font-size:17px;
    }

    .exl-related-off{

        font-size:12px;
    }

    .exl-related-offer{

        font-size:11px;
    }

    .exl-related-sk-card{

        width:165px;

        min-width:165px;
    }
}




/* =========================================================
EXCELLO ACCORDION
========================================================= */

.exl-acc-wrap{

    margin-top:20px;

    border-top:
    1px solid #f1f5f9;
}

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

.exl-acc-card{

    border-bottom:
    1px solid #f1f5f9;
}

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

.exl-acc-btn{

    width:100%;

    border:none;

    background:none;

    padding:18px 0;

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

    cursor:pointer;
}

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

.exl-acc-btn span{

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

    color:#111827;
}

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

.exl-acc-btn i{

    width:34px;
    height:34px;

    border-radius:12px;

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

    background:#f8fafc;

    color:#475569;

    font-size:14px;

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

/* =========================================================
ACTIVE
========================================================= */

.exl-acc-btn:not(.collapsed) i{

    transform:rotate(180deg);

    background:#eff6ff;

    color:#2563eb;
}

/* =========================================================
BODY
========================================================= */

.exl-acc-body{

    padding-bottom:18px;
}

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

.exl-high-grid{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:18px;
}

/* =========================================================
ITEM
========================================================= */

.exl-high-item{

    padding-bottom:12px;

    border-bottom:
    1px solid #f1f5f9;
}

.exl-high-item small{

    display:block;

    font-size:12px;

    color:#64748b;

    margin-bottom:4px;
}

.exl-high-item h6{

    margin:0;

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

    color:#111827;

    line-height:1.4;
}

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

.exl-detail-desc{

    font-size:14px;

    line-height:1.8;

    color:#475569;
}

.exl-detail-desc p{

    margin-bottom:12px;
}

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

@media(max-width:768px){

    .exl-acc-btn{

        padding:16px 0;
    }

    .exl-acc-btn span{

        font-size:15px;
    }

    .exl-acc-btn i{

        width:30px;
        height:30px;

        border-radius:10px;

        font-size:13px;
    }

    .exl-high-grid{

        gap:14px;
    }

    .exl-high-item h6{

        font-size:14px;
    }

    .exl-detail-desc{

        font-size:13px;
    }
}



/* =========================================================
WRAP
========================================================= */

.exl-review-wrap{
    padding-top:18px;
}

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

.exl-review-head{

    display:flex;
    justify-content:space-between;
    align-items:flex-start;

    margin-bottom:2px;
}

.exl-review-head h3{

    margin:0 0 6px;

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

    color:#111827;
}

/* =========================================================
SCORE
========================================================= */

.exl-review-score{

    display:flex;
    align-items:center;

    gap:7px;

    margin-bottom:5px;
}

.exl-review-score span{

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

    color:#111827;
}

.exl-review-score i{

    color:#05b546;

    font-size:16px;
}

.exl-review-score small{

    background:
    rgba(22,163,74,.10);

    color:#16a34a;

    padding:5px 10px;

    border-radius:999px;

    font-size:11px;
    font-weight:800;
}

.exl-review-sub{

    font-size:12px;

    color:#94a3b8;

    margin-bottom: 10px;
}

/* =========================================================
BTN
========================================================= */

.exl-review-top-btn{

    width:30px;
    height:30px;

    border:none;

    border-radius:10px;

    background:#f8fafc;

    color:#64748b;

    font-size:13px;
}

/* =========================================================
GALLERY
========================================================= */

.exl-review-gallery-wrap{

    margin-bottom:5px;
}

.exl-review-gallery-head h4{

    margin:0 0 12px;

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

    color:#111827;
}

/* =========================================================
GRID
========================================================= */
/* =========================================================
REVIEW GALLERY
========================================================= */

.exl-review-gallery{

    display:flex;

    gap:8px;

    overflow-x:auto;

    padding-bottom:4px;

    scrollbar-width:none;
}

.exl-review-gallery::-webkit-scrollbar{
    display:none;
}

/* =========================================================
ITEM
========================================================= */

.exl-review-gallery .review-thumb{

    flex:0 0 calc(20% - 7px);

    max-width:calc(20% - 7px);

    position:relative;

    border-radius:16px;

    overflow:hidden;

    display:block;

    background:#f4f4f4;
}

/* =========================================================
IMAGE
========================================================= */

.exl-review-gallery img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    display:block;

    border-radius:16px;
}

/* =========================================================
MORE
========================================================= */

.exl-review-more{

    position:absolute;

    inset:0;

    background:
    rgba(0,0,0,.42);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

    font-weight:700;

    backdrop-filter:blur(2px);
}

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

@media(max-width:768px){

    .exl-review-gallery{

        gap:6px;
    }

    .exl-review-gallery .review-thumb{

        flex:0 0 78px;

        max-width:78px;

        border-radius:14px;
    }

    .exl-review-gallery img{

        border-radius:14px;
    }

    .exl-review-more{

        font-size:18px;
    }
}

/* =========================================================
SLIDER
========================================================= */

/* =========================================================
REVIEW GRID
========================================================= */

.exl-review-grid{

    display:flex;

    gap:12px;

    overflow-x:auto;

    overflow-y:hidden;

    scroll-behavior:smooth;

    padding-bottom:10px;

    -webkit-overflow-scrolling:touch;
}

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

@media(max-width:991px){

    .exl-review-grid{

        scrollbar-width:none;
    }

    .exl-review-grid::-webkit-scrollbar{
        display:none;
    }
}

/* =========================================================
DESKTOP SCROLLBAR
========================================================= */

@media(min-width:992px){

    .exl-review-grid{

        scrollbar-width:thin;

        scrollbar-color:
        #cbd5e1
        transparent;
    }

    .exl-review-grid::-webkit-scrollbar{

        height:8px;
    }

    .exl-review-grid::-webkit-scrollbar-track{

        background:
        #edf2f7;

        border-radius:999px;
    }

    .exl-review-grid::-webkit-scrollbar-thumb{

        background:
        linear-gradient(
            90deg,
            #2563eb,
            #1d4ed8
        );

        border-radius:999px;
    }

    .exl-review-grid::-webkit-scrollbar-thumb:hover{

        background:
        linear-gradient(
            90deg,
            #1d4ed8,
            #1e40af
        );
    }
}

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

.exl-review-card{

    width:250px;

    min-width:250px;

    background:#fff;

    border:
    1px solid #edf2f7;

    border-radius:5px;

    padding:9px 10px;
}

/* =========================================================
TOP
========================================================= */

.exl-review-top{

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

    margin-bottom:10px;
}

.exl-review-badge{

    display:inline-flex;
    align-items:center;

    gap:5px;

    background:#05b546;

    color:#fff;

    height:24px;

    padding:0 10px;

    border-radius:999px;

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

.exl-review-date{

    font-size:11px;

    color:#94a3b8;
}

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

.exl-review-text{

    font-size:12px;

    line-height:1.5;

    color:#111827;

    margin-bottom:5px;

    overflow:hidden;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    min-height:auto;
}

/* =========================================================
REVIEW IMAGES
========================================================= */

.exl-review-imgs{

    display:flex;

    gap:6px;

    overflow-x:auto;

    scrollbar-width:none;

    margin-bottom:12px;
}

.exl-review-imgs::-webkit-scrollbar{
    display:none;
}

.exl-review-imgs img{

    width:54px;
    height:54px;

    border-radius:10px;

    object-fit:cover;

    flex-shrink:0;
}

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

.exl-review-user{

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

    color:#475569;
}

/* =========================================================
SHOW BTN
========================================================= */

.exl-review-show{

    width: 100%;
    height: 39px;
    margin-top: 2px;
    border: 1px solid #e2e8f0;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #111827;
}

/* =========================================================
SKELETON
========================================================= */

.exl-review-skeleton{

    display:flex;

    gap:12px;
}

.exl-review-sk-card{

    width:100%;

    min-width:100%;

    height:180px;

    border-radius:18px;

    background:
    linear-gradient(
        90deg,
        #f1f5f9 25%,
        #e2e8f0 37%,
        #f1f5f9 63%
    );

    background-size:400% 100%;

    animation:
    exlReviewSkeleton 1.4s ease infinite;
}

@keyframes exlReviewSkeleton{

    0%{
        background-position:100% 50%;
    }

    100%{
        background-position:0 50%;
    }
}

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

@media(max-width:768px){

    .exl-review-head h3{

        font-size:15px;
    }

    .exl-review-score span{

        font-size:28px;
    }

    .exl-review-gallery{

        gap:6px;
    }

    .exl-review-gallery a.big{

        min-height:180px;
    }

    .exl-review-card{

        width:220px;

        min-width:220px;
    }

    .exl-review-sk-card{

        width:100%;

        min-width:100%;
    }
}


/* =========================================================
FANCYBOX REVIEW
========================================================= */
/* =========================================================
FANCYBOX REVIEW CAPTION
========================================================= */

.exl-fancy-review{

    padding:12px 4px;

    text-align:center;

    max-width:700px;

    margin:auto;
}

.exl-fancy-stars{

    font-size:18px;

    margin-bottom:10px;
}

.exl-fancy-review-text{

    font-size:15px;

    line-height:1.7;

    color:#fff;

    margin-bottom:12px;
}

.exl-fancy-review-user{

    font-size:14px;

    font-weight:500;

    color:#fff;

    margin-bottom:4px;
}

.exl-fancy-review-date{

    font-size:12px;

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

.modal-body .exl-review-card {
    width: 100% !important;
    min-width: 100% !important;
    margin-bottom: 20px !important;
}




/* =========================================================
BOTTOM SPACE
========================================================= */


/* =========================================================
STICKY BAR
========================================================= */

.exl-sticky-cart-bar{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    z-index:999;

    display:flex;

    gap:10px;

    padding:10px 14px calc(10px + env(safe-area-inset-bottom));

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

    backdrop-filter:
    blur(14px);

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

    border-top:
    1px solid rgba(226,232,240,.7);

    box-shadow:
    0 -8px 30px rgba(15,23,42,.06);
}

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

.exl-sticky-btn{

    flex: 1;
    height: 52px;
    border: none;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    transition: .2s ease;
    font-family: "Inter", sans-serif;
    letter-spacing: 0.5px;
}

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

.exl-cart-btn{

    background:#fff;

    border:
    1.5px solid #dbe2ea;

    color:#111827;
}

.exl-cart-btn:active{

    transform:scale(.98);
}

/* =========================================================
BUY
========================================================= */

.exl-buy-btn{

    background:
    linear-gradient(
        135deg,
        #ffd600,
        #ffcc00
    );

    color:#111827;

    box-shadow:
    0 8px 18px rgba(255,214,0,.35);
}

.exl-buy-btn:active{

    transform:scale(.98);
}

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

.exl-cart-btn i{

    font-size:16px;
}

/* =========================================================
DESKTOP HIDE
========================================================= */

@media(min-width:992px){

    .exl-sticky-cart-bar{

        display:none;
    }

    body{

        padding-bottom:0;
    }
}



/* =====================================================
REFER CARD
===================================================== */

.exl-refer-card{

    position:relative;

    overflow:hidden;

    border-radius:5px;

    background:#f5f5f5;

    contain:layout paint;

    margin-top: 10px;
}

/* =====================================================
IMAGE
===================================================== */

.exl-refer-img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    border-radius:5px;

    transform:translateZ(0);

    backface-visibility:hidden;
}



/* =====================================================
RECENTLY VIEWED
===================================================== */

.exl-recent-wrap{

    margin-top:18px;

    position:relative;
}


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

.exl-related-nav{

    width:38px;

    height:38px;

    border:none;

    border-radius:50%;

    background:#111827;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    transition:.2s ease;
}

.exl-related-nav:hover{

    transform:scale(1.05);
}





/* =====================================================
WRAP
===================================================== */

.exl-explore-wrap{

    padding:16px 12px;

    background:#fff;

    overflow:hidden;

    border-top: 1px solid #f1f5f9;
}

/* =====================================================
HEAD
===================================================== */

.exl-explore-head{

    margin-bottom:14px;
}

.exl-explore-head h3{

    font-size:15px;

    font-weight:600;

    margin:0;

    color:#111827;
}

/* =====================================================
TAGS
===================================================== */

.exl-explore-tags{

    display:flex;

    gap:10px;

    overflow-x:auto;

    scrollbar-width:none;

    margin-bottom:18px;
}

.exl-explore-tags::-webkit-scrollbar{
    display:none;
}

.exl-exp-tag{

    border:none;

    background:#fff;

    border:
    1px solid #e5e7eb;

    height:38px;

    padding:0 16px;

    border-radius:999px;

    font-size:13px;

    font-weight:500;

    white-space:nowrap;

    flex-shrink:0;
}

.exl-exp-tag.active{

    background:#111827;

    color:#fff;

    border-color:#111827;
}

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

.exl-exp-grid{

    display:grid;

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

    gap:14px;

    contain:layout paint;
}

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

.exl-exp-card{

    text-decoration:none;

    color:inherit;
}

/* =====================================================
IMAGE
===================================================== */

.exl-exp-img{

    position:relative;

    border-radius:16px;

    overflow:hidden;

    background:#f3f4f6;

    aspect-ratio:3/4;

    margin-bottom:8px;
}

.exl-exp-img img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;
}

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

.exl-exp-title{

    font-size:13px;

    font-weight:normal;

    line-height:1.45;

    color:#111827;

    overflow:hidden;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    min-height:40px;

    margin-bottom:4px;
}

/* =====================================================
PRICE
===================================================== */

.exl-exp-price{

    display:flex;

    gap:6px;

    align-items:center;

    flex-wrap:wrap;
}

.exl-exp-price strong{

    font-size:17px;
    font-weight: 600;
    color:#111827;
}

.exl-exp-price del{

    color:#9ca3af;

    font-size:13px;
}

/* =====================================================
OFF
===================================================== */

.exl-exp-off{

    color:#16a34a;

    font-size:13px;

    font-weight:700;
}

/* =====================================================
SKELETON
===================================================== */

.exl-exp-sk{

    aspect-ratio:3/4;

    border-radius:18px;

    background:
    linear-gradient(
        90deg,
        #f3f4f6 25%,
        #e5e7eb 37%,
        #f3f4f6 63%
    );

    background-size:400% 100%;

    animation:
    exlSk 1.2s infinite;
}

@keyframes exlSk{

    0%{
        background-position:100% 50%;
    }

    100%{
        background-position:0 50%;
    }
}