/* ==========================================================================
   Smart Hero Banner
   ========================================================================== */

.shb-slider{
    position:relative;
    overflow:hidden;
    border-radius:10px;
    margin:20px 0;
    background:#f7f8fc;
    min-height:520px;
    box-shadow:
        0 10px 40px rgba(0,0,0,.06);
}

.shb-track{
    position:relative;
    min-height:520px;
}

.shb-slide{

    position:absolute;

    inset:0;

    overflow:hidden;

    opacity:0;

    visibility:hidden;

    transition:

    opacity .55s ease,

    transform .55s ease;

    transform:translateY(10px);

}
.shb-bg{

    position:absolute;

    inset:-35%;

    background-repeat:no-repeat;

    background-position:center;

    background-size:contain;

    filter:

    blur(4px)

    saturate(22%)

    brightness(120%);
    opacity:.60;

    transform:scale(2.2);

    z-index:0;

    pointer-events:none;

}
.shb-right img{

    will-change:transform,opacity;

}
.shb-slide.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
    z-index:2;
}

.shb-content{

    position:relative;

    z-index:5;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

    padding:70px;

    min-height:520px;

}
.shb-bg::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        90deg,

        rgba(247,248,252,.92),

        rgba(247,248,252,.45),

        rgba(247,248,252,.92)

    );

}

/* ==========================================================================
   Left
   ========================================================================== */

.shb-left{
    width:50%;
    max-width:550px;
}

.shb-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:8px 14px;
    border-radius:30px;
    background:#e8efff;
    color:#2563eb;
    font-size:12px;
    font-weight:700;
    letter-spacing:.5px;
    margin-bottom:20px;
}

.shb-title{
    margin:0 0 10px;
    font-size:24px;
    line-height:1.1;
    font-weight:700;
    color:#0f172a;
}

.shb-desc{
    font-size:16px;
    line-height:1.8;
    color:#64748b;
    margin:0 0 14px;
}

.shb-price{
    font-size:24px;
    font-weight:800;
    color:#111827;
    margin-bottom:12px;
}

.shb-price del{
    opacity:.5;
    margin-right:10px;
}

.shb-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:14px 28px;
    border-radius:10px;
    background:#ff9800;
    color:#fff !important;
    text-decoration:none;
    font-weight:700;
    transition:.3s;
}

.shb-btn:hover{
    transform:translateY(-2px);
    background:#111;
}

/* ==========================================================================
   Right
   ========================================================================== */

.shb-right{

    position:relative;

    width:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    overflow:hidden;

}
.shb-glow{

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    filter:blur(55px);

    transform:scale(1.4);

    z-index:1;

}
.shb-main-img{

    position:relative;

    z-index:5;

    max-width:92%;

    max-height:430px;

    object-fit:contain;

    animation:shbFloat 3s ease-in-out infinite;
    border-radius: 20px !important;

}




/* ==========================================================================
   Navigation
   ========================================================================== */

.shb-nav{
    position:absolute;
    right:30px;
    bottom:25px;
    z-index:20;
    display:flex;
    align-items:center;
    gap:8px;
}

.shb-prev,
.shb-next{
    width:42px;
    height:42px;
    border:none;
    cursor:pointer;
    border-radius:50%;
    background:#fff;
    color:#111827;
    font-size:20px;
    box-shadow:
        0 5px 15px rgba(0,0,0,.08);
    transition:.3s;
}

.shb-prev:hover,
.shb-next:hover{
    transform:translateY(-2px);
}

.shb-counter{
    min-width:60px;
    text-align:center;
    font-size:14px;
    font-weight:700;
    color:#475569;
}

/* ==========================================================================
   Decorative Waves
   ========================================================================== */

.shb-slider::after{
    content:"";
    position:absolute;
    left:-10%;
    right:-10%;
    bottom:-180px;
    height:350px;
    border-radius:50%;
    border:1px solid rgba(37,99,235,.08);
}

.shb-slider::before{
    content:"";
    position:absolute;
    left:-20%;
    right:-20%;
    bottom:-220px;
    height:420px;
    border-radius:50%;
    border:1px solid rgba(37,99,235,.05);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media(max-width:991px){

    .shb-content{
        text-align:center;
        padding:10px 10px;
    }

    .shb-left,
    .shb-right{
        width:100%;
        max-width:100%;
    }

    .shb-title{
        font-size:18px;
    }

    .shb-price{
        font-size:18px;
    }

    .shb-right img{
        max-height:320px;
    }

}

@media(max-width:576px){
    .shb-content{
        flex-direction:column-reverse;
        text-align:center;
        gap:5px;

    }
    .shb-slider{
        min-height:auto;
    }

    .shb-content{
        padding:30px 20px;
    }

    .shb-title{
        font-size:16px;
    }

    .shb-desc{
        font-size:14px;
        line-height:1.7;
    }

    .shb-price{
        font-size:16px;
    }

    .shb-btn{
        width:100%;
    }

    .shb-nav{
        position:static;
        justify-content:center;
        padding:20px;
    }

}





/* ==========================================================
   Smart Hero Categories
========================================================== */

.shc-wrap{

    width:100%;

    background:#fff;

    border-radius:0;

    overflow:hidden;
    height:450px;
    max-height:450px;
    display:flex;
    flex-direction:column;

    box-shadow:

    0 8px 25px rgba(0,0,0,.08);

}

/*==========================================================*/

.shc-header{

    display:flex;

    align-items:center;

    gap:12px;

    padding:10px 14px;

    background:#d70100;

    color:#fff;

    font-size:16px;

    font-weight:700;
    flex:0 0 auto;

}

/*==========================================================*/

.shc-icon{

    font-size:20px;

    line-height:1;

}

/*==========================================================*/

.shc-list{

    margin:0;

    padding:0;

    list-style:none;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overflow-x:hidden;
    scrollbar-width:thin;
    scrollbar-color:#d70100 #f4f4f5;

}

.shc-list::-webkit-scrollbar{width:5px}.shc-list::-webkit-scrollbar-track{background:#f4f4f5}.shc-list::-webkit-scrollbar-thumb{border-radius:10px;background:#d70100}

/*==========================================================*/

.shc-list li{

    margin:0;

    padding:0;

}

/*==========================================================*/

.shc-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:8px 14px;

    text-decoration:none;

    color:#222;

    transition:.25s;

    border-bottom:

    1px solid #f1f1f1;

}

/*==========================================================*/

.shc-item:hover{

    background:#fff5f5;
    color:#b91c1c;
    padding-left:16px;

}

/*==========================================================*/

.shc-item img{

    width:30px;

    height:30px;

    min-width:30px;

    border-radius:8px;

    object-fit:cover;

    background:#fafafa;

    border:1px solid #eee;

    transition:.3s;

}

/*==========================================================*/

.shc-item:hover img{

    transform:none;
    border-color:#fecaca;

}

/*==========================================================*/

.shc-item span{

    font-size:15px;

    font-weight:600;

    line-height:1.3;

}

/*==========================================================*/

.shc-more{

    background:#fafafa;

    font-weight:700;

}

/*==========================================================*/

.shc-more:hover{

    background:#111;

    color:#fff;

}

/*==========================================================*/

.shc-more-icon{

    width:30px;

    height:30px;

    min-width:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:8px;

    background:#eee;

    font-size:18px;

    transition:.3s;

}

/*==========================================================*/

.shc-more:hover .shc-more-icon{

    background:#fff;

    color:#16a34a;

}

/*==========================================================*/

@media(max-width:991px){

    .shc-item{

        padding:8px 12px;

    }

}

/*==========================================================*/

@media(max-width:768px){

    .shc-header{

        font-size:16px;

        padding:9px 12px;

    }

    .shc-item{

        gap:8px;

    }

    .shc-item img{

        width:28px;

        height:28px;

        min-width:28px;

    }

    .shc-item span{

        font-size:14px;

    }

}

/*==========================================================*/

@media(max-width:576px){

    .shc-wrap{

        border-radius:0;

    }

}



.shb-desc-wrap {
    position: relative;
    margin-top: 12px;
}

.shb-desc {
    margin: 0;
    line-height: 1.8;
    overflow: hidden;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;

    max-height: calc(1.8em * 3);
    transition: max-height 0.35s ease;
}

.shb-desc-wrap.is-expanded .shb-desc {
    display: block;
    max-height: 1000px;
    overflow: visible;
}

.shb-desc-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 8px;
    padding: 0;

    border: 0;
    background: transparent;

    color: #dc2626;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;

    cursor: pointer;
}

.shb-desc-toggle:hover {
    text-decoration: underline;
}

.shb-desc-toggle:focus {
    outline: 2px solid rgba(220, 38, 38, 0.25);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Professional parent/subcategory accordion. */
.shc-accordion .shc-category{border-bottom:1px solid #f1f1f1}.shc-accordion .shc-category>.shc-item,.shc-parent-line .shc-item{border-bottom:0}.shc-parent-line{position:relative;display:flex;align-items:stretch}.shc-parent-toggle{width:100%;border:0;background:#fff;text-align:left;font:inherit;cursor:pointer}.shc-parent-toggle>span{flex:1}.shc-chevron,.shc-row-arrow{margin-left:auto;color:#94a3b8;font-size:17px;font-style:normal;transition:transform .22s,color .22s}.shc-category.is-open .shc-chevron{color:#d70100;transform:rotate(180deg)}.shc-parent-link{display:grid;place-items:center;flex:0 0 38px;border-left:1px solid #f1f1f1;color:#94a3b8;text-decoration:none;transition:.2s}.shc-parent-link:hover{background:#fff1f2;color:#d70100}.shc-submenu{display:grid;grid-template-rows:0fr;background:#fafafa;transition:grid-template-rows .25s ease}.shc-submenu>div{overflow:hidden}.shc-category.is-open .shc-submenu{grid-template-rows:1fr}.shc-submenu ul{margin:0;padding:5px 10px 7px 52px;list-style:none}.shc-submenu li{border:0!important}.shc-submenu a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 9px;border-radius:6px;color:#475569;font-size:13px;text-decoration:none;transition:.18s}.shc-submenu a:before{content:'•';color:#d70100}.shc-submenu a span{flex:1}.shc-submenu a small{min-width:22px;padding:2px 6px;border-radius:10px;background:#e5e7eb;color:#64748b;text-align:center;font-size:9px}.shc-submenu a:hover{background:#fff;color:#d70100;transform:translateX(2px)}.shc-parent-toggle:hover{background:#fff5f5;padding-left:18px}.shc-accordion .shc-item:hover{background:#fff5f5}
@media(max-width:768px){.shc-parent-link{flex-basis:34px}.shc-submenu ul{padding-left:45px}.shc-submenu a{padding:6px 8px;font-size:12px}}