/* =========================================================
   RESET
========================================================= */

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

body{
    font-family:'Cairo',sans-serif;
    background:#f6f7fb;
    color:#222;
}

img{
    max-width:100%;
    display:block;
}

a{
    text-decoration:none;
}

button{
    font-family:'Cairo',sans-serif;
    cursor:pointer;
}


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

.header{
    position:fixed;
    top:0;
    right:0;
    width:100%;
    z-index:999;
    transition:.35s;
    background:#fff;
}

.header.scrolled{
    background:#fff;
    backdrop-filter:blur(14px);
    box-shadow:0 5px 25px rgba(0,0,0,.08);
}

.header-container{
    background:#fff;
    max-width:1400px;
    margin:auto;
    padding:18px 40px;

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

.logo img{
    height:58px;
}

nav{
    display:flex;
    gap:40px;
}

nav a{
    color:#222;
    font-size:18px;
    font-weight:700;
    transition:.3s;
}

nav a:hover{
    color:#f47521;
}


/* =========================================================
   CONTAINER
========================================================= */

.container{
    width:92%;
    max-width:1400px;
    margin:auto;
}


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

.bwoo-hero{
    position:relative;
    width:100%;
    aspect-ratio:1920 / 940;
    overflow:hidden;
    background:#111;
}

.hero-slider{
    width:100%;
    height:100%;
    position:relative;
}

.hero-slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;

    opacity:0;
    visibility:hidden;

    transform:scale(1.04);

    transition:
        opacity 1s ease,
        transform 6s ease;
}

.hero-slide.active{
    opacity:1;
    visibility:visible;
    transform:scale(1);
}

.hero-slide img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
}


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

.hero-arrow{
    position:absolute;
    z-index:10;

    top:50%;
    transform:translateY(-50%);

    width:52px;
    height:52px;

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

    background:rgba(0,0,0,.25);
    color:#fff;

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

    transition:.3s;

    backdrop-filter:blur(5px);
}

.hero-arrow:hover{
    background:#616060;
    border-color:#616060;
}

.hero-prev{
    right:30px;
}

.hero-next{
    left:30px;
}


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

.hero-dots{
    position:absolute;
    z-index:10;

    bottom:28px;
    left:50%;

    transform:translateX(-50%);

    display:flex;
    gap:9px;
}

.hero-dot{
    width:9px;
    height:9px;

    padding:0;
    border:0;
    border-radius:50%;

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

    transition:.3s;
}

.hero-dot.active{
    width:30px;
    border-radius:10px;
    background:#616060;
}


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

.bwoo-divider{
    width:92%;
    max-width:1400px;

    margin:0 auto;
    height:120px;

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

    gap:45px;
}

.bwoo-divider span{
    flex:1;
    height:1px;
    background:#d5d5d5;
}

.bwoo-divider img{
    width:180px;
    height:auto;
    object-fit:contain;
}


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

.products-section{
    padding-top:20px;
    text-align:center;
}

.products-section h2{
    color:#616060;
    font-size:38px;
    margin-bottom:10px;
}

.products-section p{
    color:#777;
    margin-bottom:35px;
}


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

.search-box{
    position:relative;
    margin-bottom:30px;
}

.search-box input{
    width:100%;
    height:58px;

    border:none;
    border-radius:15px;

    padding:0 60px 0 20px;

    background:#fff;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    font-size:16px;
    outline:none;
}

.search-box i{
    position:absolute;

    right:22px;
    top:50%;

    transform:translateY(-50%);

    color:#999;
}


/* =========================================================
   FILTERS
========================================================= */

.filters-wrapper{
    display:flex;
    flex-direction:column;

    align-items:center;

    gap:6px;
}

.filters{
    width:100%;

    display:flex;
    flex-wrap:nowrap;

    gap:26px;

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

    padding:10px 5px 14px;

    scrollbar-width:none;

    -webkit-overflow-scrolling:touch;

    scroll-behavior:smooth;

    cursor:grab;
}

.filters::-webkit-scrollbar{
    display:none;
}

.filters.dragging{
    cursor:grabbing;
}

.filter-group{
    margin-bottom:25px;
}

.filter-group h4{
    margin-bottom:12px;
    font-size:16px;
    color:#555;
    font-weight:700;
}


/* =========================================================
   FILTER BUTTON (ICON + LABEL)
========================================================= */

.filter-btn{
    flex:0 0 auto;

    width:90px;

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

    gap:8px;

    border:none;
    background:transparent;

    padding:4px 0;

    transition:.25s;
}

.filter-icon{
    width:56px;
    height:56px;

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

    border-radius:50%;

    background:#20c7d000;

    border:2px solid transparent;

    transition:.25s;
}

.filter-icon img{
    width:80%;
    height:80%;
opacity: 80%;
    object-fit:contain;
}

.filter-icon i{
    font-size:20px;
    color:#333333;
}

.filter-label{
    font-size:13px;

    color:#666;

    font-weight:600;

    white-space:nowrap;

    transition:.25s;
}

.filter-btn:hover .filter-icon{
    background:#e6e6e9;
}

.filter-btn.active .filter-icon{
    background:#fff;

    border-color:#20c7d0;

    box-shadow:
        0 4px 14px #20c7d02f;
}

.filter-btn.active .filter-label{
    color:#20c7d0;
    font-weight:800;
}


/* زر "الكل" بشكل مختلف قليلاً */



/* =========================================================
   FILTERS NAV ARROWS
========================================================= */

.filters-nav{
    display:flex;

    gap:14px;
}

.filters-nav-btn{
    width:34px;
    height:34px;

    border:none;
    border-radius:50%;

    background:#f2f2f4;

    color:#616060;

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

    font-size:13px;

    cursor:pointer;

    transition:.25s;
}

.filters-nav-btn:hover{
    background:#616060;
    color:#fff;
}

.products-count{
    margin:10px 0 25px;

    text-align:center;

    color:#555;

    font-size:16px;

    font-weight:700;
}


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

.products-grid{
    display:grid;

    grid-template-columns:
        repeat(auto-fill,minmax(290px,1fr));

    gap:30px;
}


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

.product-card{
    padding:15px;
    display:flex;
    flex-direction:column;

    height:100%;

    position:relative;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:.3s;
}

.product-card:hover{
    transform:translateY(-8px);

    box-shadow:
        0 20px 40px rgba(0,0,0,.15);
}


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

.product-image-wrapper{
    position:relative;
padding-top: 20px;
    width:100%;
    height:260px;

    overflow:hidden;

    background:#fff;

    flex-shrink:0;
}

.product-image-wrapper .product-image{
    width:100%;
    height:100%;

    object-fit:contain;

    padding:10px;

    cursor:pointer;

    transition:.3s;
}

.product-image-wrapper .product-image:hover{
    transform:scale(1.05);
}


/* =========================================================
   PRODUCT IMAGE ARROWS
========================================================= */

.product-image-arrow{
    position:absolute;

    top:12px;

    width:32px;
    height:32px;

    border:none;

    border-radius:50%;

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

    color:#555;

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

    font-size:12px;

    z-index:5;

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

    transition:.3s;
}

.product-image-arrow:hover{
    background:#f47521;
    color:#fff;
}

.product-image-prev{
    right:12px;
}

.product-image-next{
    left:12px;
}


/* =========================================================
   PRODUCT IMAGE DOTS
========================================================= */

.product-image-dots{
    position:absolute;

    bottom:8px;
    left:50%;

    transform:translateX(-50%);

    display:flex;

    gap:5px;

    z-index:5;
}

.image-dot{
    width:5px;
    height:5px;

    border-radius:50%;

    background:#bbb;

    transition:.25s;
}

.image-dot.active{
    width:14px;
    border-radius:10px;

    background:#f47521;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.product-info{
    padding: 2px;

    display:flex;
    flex-direction:column;

    flex:1;
}

.product-info h3{
    font-size:22px;
    margin-bottom:1px;
}

.product-info p{
    color:#777;

    min-height:45px;

    margin-bottom:1px;
}

.price{
    font-size:30px;

    color:#20c7d0;

    font-weight:800;

    margin-top:auto;
    margin-bottom:2px;
}


/* =========================================================
   BADGES
========================================================= */

.badge{
    position:absolute;

    top:15px;
    right:15px;

    background:#f47521;

    color:#fff;

    padding:7px 15px;

    border-radius:30px;

    font-size:13px;

    font-weight:bold;

    z-index:5;
}

.badge.available{
    display:none;
    background:#22c55e;
}

.badge.new{
    background:#f97316;
}

.badge.offer{
    background:#3b82f6;
}

.badge.best{
    background:#eab308;
    color:#222;
}

.badge.out{
    background:#ef4444;
}


/* =========================================================
   QUANTITY
========================================================= */

.quantity-box{
    display:flex;

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

    gap:10px;

    margin-top:12px;
}

.quantity-box button{
    width:42px;
    height:42px;

    border:none;

    border-radius:10px;

    color:#000;

    font-size:22px;

    transition:.3s;
}

.quantity-box button:hover{
    background:#797979;
}

.quantity-box input{
    width:70px;
    height:42px;

    border:2px solid #ddd;

    border-radius:10px;

    text-align:center;

    font-size:16px;
}


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

.add-cart{
    
    width:100%;
    height:48px;

    border:none;

    border-radius:12px;

    /* background:#000; */

    color:#000000;

    font-size:16px;

    font-weight:bold;

    transition:.3s;

    margin-top:10px;
     margin-bottom: 10px;
}

.add-cart:hover{
    background:#797979;
}

.add-cart.disabled{
    background:#cfcfcf;

    color:#777;

    cursor:not-allowed;

    opacity:.8;

    pointer-events:none;
}




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

#cartButton{
    position:fixed;

    bottom:25px;
    left:25px;

    width:65px;
    height:65px;

    background:#616060;

    border-radius:50%;

    display:flex;

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

    font-size:28px;

    color:#fff;

    cursor:pointer;

    z-index:999;

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

#cartCount{
    position:absolute;

    top:-6px;
    right:-6px;

    background:red;

    color:#fff;

    width:24px;
    height:24px;

    border-radius:50%;

    display:flex;

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

    font-size:13px;

    font-weight:bold;
}


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

#cartSidebar{
    position:fixed;

    top:0;
    left:-420px;

    width:400px;
    height:100%;

    background:#fff;

    z-index:10000;

    transition:.35s;

    display:flex;

    flex-direction:column;

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

#cartSidebar.show{
    left:0;
}

.cart-header{
    padding:20px;

    display:flex;

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

    border-bottom:1px solid #eee;
}

.cart-header span{
    font-size:34px;
    cursor:pointer;
}

.cart-header-actions{
    display:flex;

    align-items:center;

    gap:16px;
}

.clear-cart-btn{
    border:none;
    background:transparent;

    color:#999;

    font-size:18px;

    cursor:pointer;

    transition:.25s;

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

.clear-cart-btn:hover{
    color:#e53935;
}

#cartItems{
    flex:1;

    overflow:auto;

    padding:20px;
}

.cart-item{
    display:flex;

    gap:15px;

    margin-bottom:20px;

    align-items:center;
}

.cart-item img{
    width:70px;
    height:70px;

    object-fit:contain;
}

.cart-info{
    flex:1;
}

.cart-info strong{
    display:block;
    margin-bottom:6px;
}

.cart-qty{
    display:flex;

    align-items:center;

    gap:10px;

    margin-top:10px;
}

.cart-qty button{
    width:30px;
    height:30px;

    border:none;

    border-radius:8px;

   

    color:#000;

    font-size:18px;

    cursor:pointer;
}

.cart-qty span{
    min-width:25px;

    text-align:center;

    font-weight:bold;
}

.remove-btn{
    border:none;

    background:#e53935;

    color:#fff;

    width:35px;
    height:35px;

    border-radius:8px;

    cursor:pointer;
}

.cart-footer{
    padding:20px;

    border-top:1px solid #eee;
}

#sendWhatsapp{
    width:100%;

    height:50px;

    background:#25D366;

    border:none;

    color:#fff;

    font-size:16px;

    font-weight:bold;

    border-radius:10px;

    cursor:pointer;

    margin-top:15px;
}

#cartOverlay{
    position:fixed;

    inset:0;

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

    display:none;

    z-index:9999;
}

#cartOverlay.show{
    display:block;
}


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

.modal{
    position:fixed;

    inset:0;

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

    display:none;

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

    z-index:20000;
}

.modal.show{
    display:flex;
}

.modal-box{
    background:#fff;

    width:420px;

    max-width:95%;

    padding:25px;

    border-radius:15px;
}

.modal-box h2{
    margin-bottom:20px;

    text-align:center;
}

.modal-box input{
    width:100%;

    height:50px;

    margin-bottom:15px;

    padding:0 15px;

    border:1px solid #ddd;

    border-radius:10px;

    font-size:15px;
}

.modal-box button{
    width:100%;

    height:50px;

    background:#25D366;

    color:#fff;

    border:none;

    border-radius:10px;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;
}

.cancel-btn{
    width:100%;

    margin-top:10px;

    height:50px;

    border:none;

    background:#888;

    color:#fff;

    border-radius:10px;

    cursor:pointer;
}


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

.toast{
    position:fixed;

    bottom:60px;
    right:30px;

    background:#1db954;

    color:#fff;

    padding:15px 22px;

    border-radius:12px;

    display:flex;

    align-items:center;

    gap:12px;

    font-size:15px;

    font-weight:600;

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

    transform:translateX(450px);

    opacity:0;

    transition:.35s;

    z-index:99999;
}

.toast.show{
    transform:translateX(0);
    opacity:1;
}

.toast i{
    font-size:22px;
}


/* =========================================================
   CONTACT
========================================================= */

.contact-section{
    padding:100px 20px;
    background:#f5f8fc;
}

.contact-card{
    max-width:850px;

    margin:auto;

    background:#fff;

    border-radius:30px;

    padding:60px;

    box-shadow:
        0 20px 60px rgba(0,0,0,.08);
}

.contact-card h2{
    text-align:center;

    font-size:42px;

    margin-bottom:15px;
}

.contact-card p{
    text-align:center;

    color:#666;

    margin-bottom:45px;
}

.contact-list{
    display:grid;

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

    gap:20px;
}

.contact-item{
    display:flex;

    align-items:center;

    gap:18px;

    color:#222;

    background:#f8f9fc;

    padding:22px;

    border-radius:18px;

    transition:.3s;
}

.contact-item:hover{
    transform:translateY(-4px);

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

.contact-item i{
    width:60px;
    height:60px;

    flex-shrink:0;

    border-radius:50%;

    background:#f47521;

    color:#fff;

    display:flex;

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

    font-size:24px;
}

.contact-item strong{
    display:block;
    margin-bottom:5px;
}

.contact-item span{
    color:#666;
}

.social-icons{
    margin-top:45px;

    display:flex;

    justify-content:center;

    gap:18px;
}

.social-icons a{
    width:58px;
    height:58px;

    border-radius:50%;

    background:#f47521;

    color:#fff;

    display:flex;

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

    font-size:24px;

    transition:.3s;
}

.social-icons a:hover{
    background:#f57c20;

    transform:scale(1.1);
}


/* =========================================================
   PRODUCT POPUP - NEW
========================================================= */

.product-popup{
    position:fixed;

    inset:0;

    width:100%;
    height:100%;

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

    display:none;

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

    padding:20px;

    z-index:99999;

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

    -webkit-overflow-scrolling:touch;
}

.product-popup.show{
    display:flex;
}


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

.product-popup-content{
    position:relative;

    width:min(1000px,95vw);

    min-height:0;

    max-height:2000px;

    background:#fff;

    border-radius:22px;

    padding:55px 60px 30px;

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

    overflow:none;

    box-shadow:
        0 25px 80px rgba(0,0,0,.35);

    margin:auto 0;
}


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

.product-popup-close{
    position:absolute;

    top:15px;
    left:15px;

    width:45px;
    height:45px;

    border:none;
    border-radius:50%;

    background:#fff;

    color:#333;

    font-size:30px;

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

    cursor:pointer;

    z-index:20;

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

    transition:.25s;
}

.product-popup-close:hover{
    background:#616060;
    color:#fff;
}


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

.product-popup-gallery{
    position:relative;

    width:100%;
    height:400px;

    min-height:400px;
    max-height:400px;

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

    flex-shrink:0;

    overflow:hidden;
}


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

.product-popup-main{
    width:100%;
    height:400px;

    display:flex;

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

    overflow:hidden;

    touch-action:pan-y;
}

#productPopupImage{
    display:block;

    width:auto;
    height:auto;

    max-width:90%;
    max-height:380px;

    object-fit:contain;

    border-radius:12px;

    user-select:none;
    -webkit-user-drag:none;

    transform:translateX(0);
    opacity:1;

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

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

.product-popup-arrow{
    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:50px;
    height:50px;

    border:none;

    border-radius:50%;

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

    color:#444;

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

    font-size:18px;

    cursor:pointer;

    z-index:10;

    box-shadow:
        0 5px 20px rgba(0,0,0,.2);

    transition:.25s;
}

.product-popup-arrow:hover{
    background:#616060;
    color:#fff;

    transform:
        translateY(-50%)
        scale(1.08);
}

.product-popup-prev{
    right:0;
}

.product-popup-next{
    left:0;
}


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

.product-popup-thumbs{
    width:100%;

    min-height:90px;

    margin-top:10px;

    padding:8px 5px;

    display:flex;

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

    gap:10px;

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

    scrollbar-width:none;
}

.product-popup-thumbs::-webkit-scrollbar{
    display:none;
}


/* =========================================================
   THUMB
========================================================= */

.product-popup-thumb{
    position:relative;

    flex:0 0 auto;

    width:78px;
    height:65px;

    padding:4px;

    border:2px solid #ddd;

    border-radius:10px;

    background:#fff;

    cursor:pointer;

    overflow:hidden;

    transition:.25s;
}

.product-popup-thumb:hover{
    border-color:#999;
}

.product-popup-thumb.active{
    border-color:#616060;

    box-shadow:
        0 0 0 2px rgba(0, 0, 0, 0.15);
}

.product-popup-thumb img{
    width:100%;
    height:100%;

    object-fit:contain;
}


/* =========================================================
   SPECS THUMB
========================================================= */

.product-popup-thumb.specs{
    background:#f5f5f5;
}

.product-popup-thumb.specs::after{
    content:"المواصفات";

    position:absolute;

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

    padding:3px;

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

    color:#fff;

    font-family:'Cairo',sans-serif;

    font-size:9px;

    text-align:center;
}


/* =========================================================
   PRODUCT INFO
========================================================= */

.product-popup-info{
    width:100%;

    display:flex;
    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    padding:5px 20px 0;

    overflow:visible;
}

.product-popup-info h2{
    font: size 20px;;

    color:#222;

    
}

.product-popup-info p{
    max-width:800px;

    color:#777;

    font-size:15px;

    line-height:1.7;


}

.product-popup-price{
   font-size:30px;

    font-weight:800;

    color:#20c7d0;

  
}


/* =========================================================
   QUANTITY
========================================================= */

.product-popup-quantity{
    display:flex;

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

    gap:10px;

    margin-bottom:12px;
}

.product-popup-quantity button{
    width:42px;
    height:42px;

    border:none;

    border-radius:10px;

    background:#eee;

    color:#222;

    font-size:22px;

    cursor:pointer;

    transition:.25s;
}

.product-popup-quantity button:hover{
    background:#616060;

    color:#fff;
}

#productPopupQuantity{
    width:70px;
    height:42px;

    border:2px solid #ddd;

    border-radius:10px;

    text-align:center;

    font-size:17px;

    outline:none;
}


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

.product-popup-add-cart{
    width:100%;

    max-width:500px;

    height:52px;

    border:none;

    border-radius:12px;

    /* background:#000;

    color:#fff; */

    font-family:'Cairo',sans-serif;

    font-size:17px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;
}

.product-popup-add-cart:hover{
    background:#797979;
}

.product-popup-add-cart.disabled{
    background:#cfcfcf;

    color:#777;

    cursor:not-allowed;

    pointer-events:none;
}










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

@media(max-width:768px){

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

    .header-container{
        padding:15px 20px;
    }

    .logo img{
        height:42px;
    }

    nav{
        gap:20px;

        flex-wrap:wrap;

        justify-content:center;
    }

    nav a{
        font-size:12px;
    }


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

    .bwoo-hero{
        width:100%;

        height:250px;

        aspect-ratio:auto;

        overflow:hidden;
    }

    .hero-slider{
        width:100%;
        height:100%;
    }

    .hero-slide{
        width:100%;
        height:100%;
    }

    .hero-slide img{
        width:100%;
        height:100%;

        object-fit:cover;

        object-position:center center;
    }

    .hero-overlay{
        position:absolute;

        inset:0;

        background:
            linear-gradient(
                90deg,
                rgba(0,0,0,.45),
                rgba(0,0,0,.10)
            );
    }

    .hero-content{
        position:absolute;

        top:50%;
        left:20px;
        right:20px;

        transform:translateY(-50%);

        text-align:center;

        color:#fff;
    }

    .hero-small{
        font-size:10px;

        letter-spacing:1px;

        margin-bottom:5px;
    }

    .hero-content h1{
        font-size:25px;

        line-height:1.15;

        margin:0;
    }

    .hero-content p{
        font-size:11px;

        line-height:1.4;

        margin-top:6px;
        margin-bottom:10px;
    }

    .hero-btn{
        height:35px;

        min-width:120px;

        padding:0 15px;

        font-size:11px;
    }

    .hero-arrow{
        display:none;
    }

    .hero-dots{
        bottom:8px;
    }

    .hero-dot{
        width:6px;
        height:6px;
    }

    .hero-dot.active{
        width:20px;
    }


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

    .bwoo-divider{
        width:90%;

        height:75px;

        gap:20px;
    }

    .bwoo-divider img{
        width:90px;
    }


    /* ================= FILTER ================= */

    .filter-group{
        margin-bottom:30px;
    }

    .filter-group h4{
        margin-bottom:12px;

        font-size:18px;
    }

    .filters-wrapper{
        gap:4px;
    }

    .filters{
        display:flex;

        flex-wrap:nowrap;

        gap:16px;

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

        -webkit-overflow-scrolling:touch;

        scrollbar-width:none;

        touch-action:pan-x;
    }

    .filter-btn{
        flex:0 0 auto;

        width:64px;

        gap:6px;
    }

    .filter-icon{
        width:46px;
        height:46px;
    }

    .filter-icon i{
        font-size:16px;
    }

    .filter-label{
        font-size:11px;
    }

    .filters-nav-btn{
        width:30px;
        height:30px;

        font-size:11px;
    }

    .filters-nav{
        display:none;
    }


    /* ================= PRODUCTS ================= */

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

        gap:8px;

        align-items:stretch;
    }

    .product-card{
        display:flex;

        flex-direction:column;

        padding:8px;

        border-radius:18px;
    }

    .product-card:hover{
        transform:none;

        box-shadow:
            0 20px 40px rgba(0,0,0,.15);
    }

    .product-image-wrapper{
        height:145px;

        flex-shrink:0;
    }

    .product-image-wrapper .product-image{
        width:100%;
        height:100%;

        padding:5px;
    }


    /* PRODUCT IMAGE ARROWS */

    .product-image-arrow{
        width:27px;
        height:27px;

        top:7px;

        font-size:9px;
    }

    .product-image-prev{
        right:7px;
    }

    .product-image-next{
        left:7px;
    }


    /* PRODUCT DOTS */

    .product-image-dots{
        bottom:5px;

        gap:4px;
    }

    .image-dot{
        width:4px;
        height:4px;
    }

    .image-dot.active{
        width:11px;
    }


    /* PRODUCT INFO */

    .product-info{
        display:flex !important;

        flex-direction:column !important;

        flex:1 !important;

        height:auto !important;

        padding:4px;
    }

    .product-info h3{
        font-size:17px;

        line-height:1.5;

        margin:6px 0;

        display:-webkit-box;

        -webkit-line-clamp:2;

        -webkit-box-orient:vertical;

        overflow:hidden;
    }

    .product-info p{
        font-size:11px;

        line-height:1.6;

        margin:4px 0;

        display:-webkit-box;

        -webkit-line-clamp:4;

        -webkit-box-orient:vertical;

        overflow:hidden;
    }

    .price{
        margin-top:auto !important;

        margin-bottom:8px;

        font-size:22px;
    }


    /* QUANTITY */

    .quantity-box{
        margin:6px 0 !important;
    }

    .quantity-box input{
        width:50px;

        height:42px;
    }

    .add-cart{
        width:100%;

        padding:9px 4px;

        font-size:13px;

        margin-top:6px !important;
    }


  

    /* ================= CONTACT ================= */

    .contact-section{
        padding:70px 20px;
    }

    .contact-card{
        width:100%;

        padding:30px 15px;

        border-radius:22px;
    }

    .contact-card h2{
        font-size:30px;
    }

    .contact-card p{
        margin-bottom:30px;
    }

    .contact-list{
        grid-template-columns:1fr;

        gap:15px;
    }

    .contact-item{
        width:100%;

        gap:10px;

        padding:12px;
    }

    .contact-item i{
        width:40px;
        height:40px;

        font-size:20px;
    }

    .contact-item strong{
        font-size:14px;

        margin-bottom:3px;
    }

    .contact-item span{
        font-size:13px;

        color:#666;
    }

    .social-icons{
        margin-top:35px;

        gap:15px;
    }

    .social-icons a{
        width:40px;
        height:40px;

        font-size:18px;
    }


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

    #cartButton{
        width:58px;
        height:58px;

        bottom:20px;
        left:20px;

        font-size:24px;
    }

    #cartSidebar{
        width:90%;

        max-width:400px;

        left:-100%;
    }
    
    
    
  .product-popup{
        padding:10px;
    }

.product-popup-main{
    width:100%;
    height:200px;

    display:flex;

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

    overflow:hidden;
}
#productPopupImage{
    touch-action:pan-y pinch-zoom;
}
    .product-popup-content{
        width:95%;

        height:85vh;

        max-height:800px;

        padding:45px 12px 15px;

        border-radius:18px;
    }


    /* GALLERY */

    .product-popup-gallery{
        height:50%;

        min-height:220px;
    }


    /* IMAGE */

    #productPopupImage{
        max-width:100%;
        max-height:100%;
        
        
    }


    /* ARROWS */

    .product-popup-arrow{
        width:38px;
        height:38px;

        font-size:14px;
    }


    /* CLOSE */

    .product-popup-close{
        top:8px;
        left:8px;

        width:38px;
        height:38px;

        font-size:25px;
    }


    /* THUMBS */

    .product-popup-thumbs{
        min-height:70px;

        margin-top:5px;

        gap:7px;

        justify-content:center;

        padding:5px;
    }

    .product-popup-thumb{
        width:65px;
        height:55px;
    }


    /* INFO */

    .product-popup-info{
        padding:3px 5px 0;
    }

    .product-popup-info h2{
        font-size:20px;

        line-height:1.4;

        margin:4px 0;
    }

    .product-popup-info p{
        font-size:12px;

        line-height:1.5;

        margin-bottom:5px;

        display:-webkit-box;

        -webkit-line-clamp:3;

        -webkit-box-orient:vertical;

        overflow:hidden;
    }

    .product-popup-price{
        font-size:23px;

        margin-bottom:7px;
    }


    /* QUANTITY */

    .product-popup-quantity{
        margin-bottom:8px;
    }

    .product-popup-quantity button{
        width:38px;
        height:38px;
    }

    #productPopupQuantity{
        width:60px;
        height:38px;
    }


    /* CART */

    .product-popup-add-cart{
        height:46px;

        font-size:14px;

        max-width:100%;
    }
}