/*====================================
        TOM STORE PRODUCT PAGE
        BIRTHDAY CSS
====================================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    background:#571212;
    color:#222;
    overflow-x:hidden;
}


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

.header{
    width:100%;
    background:#111;
    padding:18px 8%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    position:sticky;
    top:0;
    z-index:999;
    box-shadow:0 8px 20px rgba(0,0,0,.15);
}

.logo{
    text-decoration:none;
    font-size:34px;
    font-weight:800;
    color:#fff;
}

.logo span{
    color:#d90429;
}


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

.search-box{
    width:45%;
    display:flex;
    overflow:hidden;
    border-radius:50px;
    background:#fff;
}

.search-box input{
    flex:1;
    border:none;
    outline:none;
    padding:14px 20px;
    font-size:15px;
}

.search-box button{
    width:60px;
    border:none;
    background:#d90429;
    color:#fff;
    cursor:pointer;
    transition:.3s;
}

.search-box button:hover{
    background:#b10322;
}


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

.cart{
    text-decoration:none;
    color:#fff;
    background:#d90429;
    padding:12px 22px;
    border-radius:40px;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    transition:.3s;
}

.cart:hover{
    background:#b10322;
    transform:translateY(-2px);
}

.cart-count{
    width:24px;
    height:24px;
    border-radius:50%;
    background:#fff;
    color:#d90429;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:13px;
    font-weight:700;
}


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

.page-title{
    padding:60px 8%;
    text-align:center;
    background:#640c0c;
}

.page-title h1{
    font-size:52px;
    margin-bottom:15px;
    color:#ffffff;
}

.page-title p{
    color:#ffffff;
    font-size:18px;
}


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

.products{
    width:90%;
    max-width:1400px;
    margin:50px auto;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px;
}


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

.product-card{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    display:flex;
    gap:20px;
    padding:20px;
    min-width:0;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.35s;
}

.product-card:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.15);
}


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

.image-slider{
    width:250px;
    height:250px;
    position:relative;
    overflow:hidden;
    border-radius:15px;
    flex-shrink:0;
}

.slides{
    width:100%;
    height:100%;
    position:relative;
}

.slides img{
    width:100%;
    height:100%;
    object-fit:cover;
    position:absolute;
    top:0;
    left:0;
    opacity:0;
    transition:.5s ease;
    pointer-events:none;
}

.slides img.active{
    opacity:1;
    pointer-events:auto;
    z-index:2;
    cursor:zoom-in;
}

.slide-btn{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:36px;
    height:36px;
    border:none;
    border-radius:50%;
    background:rgba(255,255,255,.85);
    color:#111;
    font-size:18px;
    cursor:pointer;
    z-index:10;
    transition:.3s;
}

.slide-btn:hover{
    background:#fff;
    transform:translateY(-50%) scale(1.1);
}

.prev{
    left:10px;
}

.next{
    right:10px;
}


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

.discount{
    position:absolute;
    background:#d90429;
    color:#fff;
    padding:8px 16px;
    border-radius:30px;
    font-size:14px;
    font-weight:700;
    margin:15px;
    z-index:20;
}


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

.product-info{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}

.product-info h3{
    font-size:28px;
    margin-bottom:10px;
    color:#111;
}

.rating{
    color:#f6b400;
    font-size:18px;
    margin-bottom:15px;
}

.rating span{
    color:#666;
    font-size:15px;
}

.price{
    margin-bottom:20px;
}

.new-price{
    color:#d90429;
    font-size:30px;
    font-weight:700;
}

.old-price{
    color:#888;
    margin-left:15px;
    text-decoration:line-through;
    font-size:18px;
}

.product-info p{
    color:#666;
    line-height:1.8;
    margin-bottom:20px;
}

.stock{
    color:#1a8d32;
    font-weight:600;
    margin-bottom:25px;
}


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

.buttons{
    display:flex;
    gap:15px;
    margin-top:auto;
}


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

.buy-btn{
    flex:1;
    padding:15px 20px;
    border:none;
    border-radius:50px;
    background:linear-gradient(135deg,#ffb300,#ff8800);
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    transition:.35s;
    box-shadow:0 10px 25px rgba(255,136,0,.35);
}

.buy-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(255,136,0,.45);
    background:linear-gradient(135deg,#ff9800,#ff6d00);
}


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

.cart-btn{
    flex:1;
    padding:15px 20px;
    border:none;
    border-radius:50px;
    background:linear-gradient(135deg,#d90429,#950019);
    color:#fff;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:10px;
    transition:.35s;
    box-shadow:0 10px 25px rgba(217,4,41,.35);
}

.cart-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 35px rgba(217,4,41,.45);
    background:linear-gradient(135deg,#ff0037,#a4001d);
}

.cart-btn i{
    font-size:18px;
}


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

.back-container{
    width:90%;
    max-width:1400px;
    margin:40px auto 80px;
}

.back-btn{
    border:none;
    background:#111;
    color:#fff;
    padding:14px 30px;
    border-radius:50px;
    font-size:15px;
    font-weight:600;
    cursor:pointer;
    transition:.35s;
    display:flex;
    align-items:center;
    gap:10px;
}

.back-btn:hover{
    background:#d90429;
    transform:translateX(-5px);
}


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

.product-card img{
    transition:.4s;
}

.product-card:hover img{
    transform:scale(1.05);
}


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

.product-card:hover .product-info h3{
    color:#d90429;
}

.product-card:hover .new-price{
    transform:scale(1.05);
    display:inline-block;
}


/*=========================================
        TABLET RESPONSIVE
        2 PRODUCTS PER ROW
=========================================*/

@media (max-width:992px){

    .products{
        width:95%;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:18px;
    }

    .product-card{
        flex-direction:column;
        align-items:stretch;
        text-align:left;
        padding:15px;
        gap:12px;
    }

    .image-slider{
        width:100%;
        max-width:none;
        height:280px;
    }

    .product-info{
        width:100%;
    }

    .buttons{
        width:100%;
    }

}


/*=========================================
        MOBILE RESPONSIVE
        2 PRODUCTS PER ROW
=========================================*/

@media (max-width:768px){

    body{
        overflow-x:hidden;
    }


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

    .header{
        padding:12px 15px;
        flex-direction:row;
        gap:10px;
    }

    .logo{
        font-size:24px;
    }

    .search-box{
        display:none;
    }

    .cart{
        padding:9px 14px;
        font-size:13px;
    }

    .cart-count{
        width:20px;
        height:20px;
        font-size:11px;
    }


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

    .page-title{
        padding:30px 15px;
    }

    .page-title h1{
        font-size:28px;
        margin-bottom:10px;
    }

    .page-title p{
        font-size:14px;
        line-height:1.6;
    }


    /*=====================================
          TWO PRODUCTS PER ROW
    =====================================*/

    .products{
        width:96%;
        margin:20px auto 40px;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:12px;
    }


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

    .product-card{
        width:100%;
        min-width:0;
        padding:8px;
        gap:8px;
        border-radius:12px;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        text-align:left;
    }


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

    .image-slider{
        width:100%;
        height:180px;
        border-radius:10px;
    }

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


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

    .slide-btn{
        width:28px;
        height:28px;
        font-size:14px;
    }

    .prev{
        left:5px;
    }

    .next{
        right:5px;
    }


    /*=========================
        DISCOUNT
    =========================*/

    .discount{
        font-size:10px;
        padding:5px 8px;
        margin:6px;
        z-index:20;
    }


    /*=====================================
          PRODUCT INFORMATION
    =====================================*/

    .product-info{
        width:100%;
        min-width:0;
        display:flex;
        flex-direction:column;
    }

    .product-info h3{
        font-size:15px;
        line-height:1.35;
        margin-bottom:6px;

        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    .rating{
        font-size:13px;
        margin-bottom:6px;
    }

    .rating span{
        font-size:11px;
    }


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

    .price{
        margin-bottom:8px;
        white-space:nowrap;
    }

    .new-price{
        font-size:19px;
    }

    .old-price{
        font-size:12px;
        margin-left:5px;
    }


    /*=========================
         DESCRIPTION
    =========================*/

    .product-info p{
        font-size:11px;
        line-height:1.45;
        margin-bottom:10px;

        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }


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

    .stock{
        font-size:11px;
        margin-bottom:10px;
    }


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

    .buttons{
        width:100%;
        display:flex;
        flex-direction:column;
        gap:6px;
        margin-top:auto;
    }

    .buy-btn,
    .cart-btn{
        width:100%;
        min-width:0;
        padding:9px 5px;
        font-size:11px;
        border-radius:25px;
    }

    .cart-btn i{
        font-size:12px;
    }


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

    .back-container{
        width:94%;
        margin:25px auto 50px;
    }

    .back-btn{
        width:100%;
        justify-content:center;
        padding:12px 20px;
        font-size:13px;
    }

}


/*=========================================
        SMALL MOBILE
        2 PRODUCTS PER ROW
=========================================*/

@media (max-width:480px){

    .logo{
        font-size:21px;
    }

    .cart{
        padding:8px 11px;
        font-size:12px;
    }


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

    .page-title{
        padding:25px 12px;
    }

    .page-title h1{
        font-size:24px;
    }

    .page-title p{
        font-size:13px;
    }


    /*=========================
        TWO COLUMNS
    =========================*/

    .products{
        width:96%;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:9px;
        margin:15px auto 30px;
    }


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

    .product-card{
        width:100%;
        min-width:0;
        padding:7px;
        gap:7px;
        border-radius:10px;
    }


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

    .image-slider{
        width:100%;
        height:160px;
        border-radius:8px;
    }

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


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

    .slide-btn{
        width:25px;
        height:25px;
        font-size:13px;
    }


    /*=========================
          DISCOUNT
    =========================*/

    .discount{
        font-size:8px;
        padding:4px 6px;
        margin:5px;
    }


    /*=========================
        PRODUCT NAME
    =========================*/

    .product-info h3{
        font-size:13px;
        line-height:1.3;
        margin-bottom:5px;

        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }


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

    .new-price{
        font-size:17px;
    }

    .old-price{
        font-size:11px;
        margin-left:3px;
    }


    /*=========================
          DESCRIPTION
    =========================*/

    .product-info p{
        font-size:10px;
        line-height:1.4;
        margin-bottom:8px;

        display:-webkit-box;
        -webkit-line-clamp:3;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }


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

    .buttons{
        gap:5px;
    }

    .buy-btn,
    .cart-btn{
        width:100%;
        padding:8px 4px;
        font-size:10px;
    }

    .cart-btn i{
        font-size:11px;
    }

}


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

::-webkit-scrollbar{
    width:10px;
}

::-webkit-scrollbar-track{
    background:#ececec;
}

::-webkit-scrollbar-thumb{
    background:#d90429;
    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:#b10322;
}


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

.product-card{
    animation:fadeUp .6s ease;
}

@keyframes fadeUp{

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

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/*=========================================
        FULL SCREEN IMAGE VIEWER
=========================================*/

.slides img{
    cursor:zoom-in;
}

.image-modal{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.95);
    z-index:9999;

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

    overflow:hidden;
}

.image-modal.active{
    display:flex;
}


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

.modal-image-container{
    width:100%;
    height:100%;

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

    overflow:hidden;
    cursor:grab;
}

.modal-image-container.dragging{
    cursor:grabbing;
}


/*=========================
       FULL SCREEN IMAGE
=========================*/

.modal-image{
    max-width:90%;
    max-height:85vh;

    object-fit:contain;

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

    transition:transform .2s ease;
}


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

.modal-close{
    position:absolute;
    top:20px;
    right:25px;

    width:50px;
    height:50px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.9);
    color:#111;

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

    cursor:pointer;
    z-index:10005;

    transition:.3s;
}

.modal-close:hover{
    background:#d90429;
    color:#fff;
    transform:rotate(90deg);
}


/*=========================
      LEFT / RIGHT BUTTONS
=========================*/

.modal-nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:55px;
    height:55px;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.9);
    color:#111;

    font-size:25px;
    cursor:pointer;

    z-index:10005;
    transition:.3s;
}

.modal-nav:hover{
    background:#d90429;
    color:#fff;
}

.modal-prev{
    left:25px;
}

.modal-next{
    right:25px;
}


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

.zoom-controls{
    position:absolute;
    bottom:25px;
    left:50%;
    transform:translateX(-50%);

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

    padding:10px 15px;

    background:rgba(0,0,0,.7);
    border-radius:50px;

    z-index:10005;
}

.zoom-controls button{
    width:42px;
    height:42px;

    border:none;
    border-radius:50%;

    background:#fff;
    color:#111;

    font-size:17px;
    cursor:pointer;

    transition:.3s;
}

.zoom-controls button:hover{
    background:#d90429;
    color:#fff;
    transform:scale(1.1);
}

#zoomLevel{
    color:#fff;
    font-size:14px;
    font-weight:600;
    min-width:50px;
    text-align:center;
}


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

.image-counter{
    position:absolute;
    top:25px;
    left:50%;
    transform:translateX(-50%);

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

    padding:8px 18px;
    border-radius:30px;

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

    z-index:10005;
}


/*=========================================
        IMAGE VIEWER MOBILE
=========================================*/

@media (max-width:768px){

    .modal-image{
        max-width:95%;
        max-height:80vh;
    }

    .modal-nav{
        width:42px;
        height:42px;
        font-size:18px;
    }

    .modal-prev{
        left:10px;
    }

    .modal-next{
        right:10px;
    }

    .modal-close{
        top:15px;
        right:15px;

        width:42px;
        height:42px;

        font-size:28px;
    }

    .zoom-controls{
        bottom:20px;
        gap:7px;
        padding:8px 10px;
    }

    .zoom-controls button{
        width:38px;
        height:38px;
    }

}