@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@400;600;700;900&display=swap');
*{font-family:'Unbounded',sans-serif;box-sizing:border-box}
body{background:#f5f5f5;color:#1a1a1a}

/* Breadcrumb */
.moto-breadcrumb{padding:15px 20px;font-size:13px}

/* Main Layout */
.moto-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1400px;margin:0 auto 40px;padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.1)}


/* Main Image with Magnify */
.moto-main-image-wrap{position:relative;margin-bottom:20px;border-radius:12px;overflow:hidden;background:#f5f5f5;border:2px solid #e8e8e8;cursor:crosshair}
.main-img{width:100%;height:auto;display:block;border-radius:8px;border:2px solid #e8e8e8;transition:all 0.3s}


/* Thumbnail Scroll (2 columns, auto rows) */
.moto-thumbs-scroll{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;max-height:400px;overflow-y:auto;padding-right:5px}

/* Scrollbar */
.moto-thumbs-scroll::-webkit-scrollbar{width:6px}
.moto-thumbs-scroll::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}
.moto-thumbs-scroll::-webkit-scrollbar-thumb{background:#FB8104;border-radius:10px}

/* Thumbs */
.moto-thumb{border-radius:8px;overflow:hidden;cursor:pointer;border:2px solid #e8e8e8;transition:all 0.3s}
.moto-thumb:hover,.moto-thumb.active{border-color:#FB8104;transform:scale(1.05)}
.thumb-img{width:100%;height:auto;display:block;object-fit:cover}

/* Info Side */
.moto-info{padding:20px;background:#fff;border-left:3px solid #FB8104}
.moto-title{font-size:32px;font-weight:900;margin:0 0 15px;text-transform:uppercase;line-height:1.1}
.moto-rating{margin-bottom:15px}
.moto-price{font-size:28px;font-weight:900;color:#FB8104;margin-bottom:20px}
.moto-short-desc{font-size:14px;line-height:1.6;color:#555;margin-bottom:25px;padding:15px;background:#f8f8f8;border-radius:8px}


/* Spec Boxes */
.moto-specs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:25px}
.spec-box{background:#000;color:#fff;padding:15px 10px;border-radius:8px;text-align:center}
.spec-box:hover{background:#fb8104;color:#efefef;padding:15px 10px;border-radius:8px;text-align:center}
.spec-box .label{font-size:11px;font-weight:700;text-transform:uppercase;margin-bottom:6px}
.spec-box .val{font-size:14px;font-weight:900}

/* ONE Cart Section (no duplicate) */
.moto-single-cart{margin-bottom:20px}
.moto-single-cart .cart{display:flex;gap:10px;align-items:center}
.moto-single-cart .quantity{display:flex;background:#f5f5f5;border-radius:8px;border:2px solid #e0e0e0}
.moto-single-cart .quantity input{width:60px;height:44px;text-align:center;border:none;background:none;font-weight:700}
.moto-single-cart .single_add_to_cart_button{flex:1;height:44px;background:#000;color:#fff;border:none;border-radius:8px;font-weight:900;text-transform:uppercase;cursor:pointer}
.moto-single-cart .single_add_to_cart_button:hover{background:#FB8104}

/* Buttons */
.moto-actions{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:20px}
.moto-btn{height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;font-weight:900;text-transform:uppercase;text-decoration:none;font-size:13px}
.moto-btn.whatsapp{background:#25D366;color:#fff}
.moto-btn.whatsapp:hover{background:#000000}
.moto-btn.test-drive{background:#FB8104;color:#fff}
.moto-btn.test-drive:hover{background:#000000}

/* Upsells */
.moto-upsells{max-width:1400px;margin:0 auto 40px;padding:20px;background:#fff;border-radius:12px}
.upsells-title{font-size:24px;font-weight:900;text-transform:uppercase;margin-bottom:5px}
.upsells-sub{font-size:11px;color:#999;margin-bottom:20px}
.upsells-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.upsell-item{display:grid;grid-template-columns:100px 1fr 140px;gap:15px;padding:15px;background:#f8f8f8;border-radius:8px;align-items:center}
.upsell-img{width:100px;height:100px;background:#fff;border-radius:8px;overflow:hidden}
.upsell-img img{width:100%;height:100%;object-fit:cover}
.upsell-name{font-size:14px;font-weight:900;margin-bottom:0px;margin-left:20px}
.upsell-price{font-size:16px;font-weight:900;color:#FB8104;margin-left:20px}
.upsell-btn{padding:0px;height:40px;background:#000;color:#fff;border:none;border-radius:6px;font-weight:900;font-size:11px;cursor:pointer;white-space: nowrap;transition:all 0.3s ease;}
.upsell-btn:hover{background:#333}
.upsell-btn.added{background:#FB8104;color:#fff;cursor:default}
.upsell-btn.added:hover{background:#FB8104}

/* Tabs */
.moto-tabs{max-width:1400px;margin:0 auto 40px;padding:0 20px}
.tabs-nav{display:flex;border-radius:0px;border-bottom:3px solid #FB8104}
.tab-link{border-radius:0px;flex:1;padding:0px;background:#000;border:none;font-weight:900;text-transform:uppercase;cursor:pointer;font-size:14px;color:#fff}
.tab-link.active{background:#FB8104;color:#fff}
.tabs-content{background:#fff;padding:15px;min-height:300px;border-radius:0 0 8px 8px;border:2px solid #e8e8e8;border-top:none}
.tab-pane{display:none}
.tab-pane.active{display:block}
.spec-block{margin-bottom:30px;padding:20px;background:#f8f8f8;border-radius:8px;border-left:4px solid #FB8104}
.spec-title{font-size:22px;font-weight:900;margin-bottom:15px;text-transform:uppercase}.spec-list li{padding:10px 0;font-size:14px;border-bottom:1px solid #b5b5b5}

/* Related Products - BOXED CONTAINER */
.moto-related{max-width:1400px;margin:40px auto;padding:30px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.1)}
.moto-related h2{font-size:28px;font-weight:900;margin-bottom:25px;text-transform:uppercase;color:#000;border-bottom:3px solid #FB8104;padding-bottom:15px}

/* RESPONSIVE */
@media(max-width:768px){
.moto-layout{grid-template-columns:1fr}
.moto-specs-grid{grid-template-columns:repeat(2,1fr)}
.moto-single-cart .cart{flex-direction:row}
.moto-actions{grid-template-columns:1fr}
.upsells-grid{grid-template-columns:1fr}
.upsell-item{grid-template-columns:80px 1fr;gap:12px}
.upsell-btn{grid-column:1/-1;margin-top:10px}

/* Related Products on Mobile */
.moto-related{margin:20px 10px;padding:20px 15px}
.moto-related h2{font-size:22px;margin-bottom:20px}
.moto-related .product{width:100%!important;margin:0!important}
}
/**
 * SHOP PAGE FIXES
 * - Stable buttons on mobile (no animation)
 * - Proper button size on desktop
 * - No slide animation
 */

/* DESKTOP: Proper button position and size */
.product-item .button {
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 15px;
    padding: 12px 20px;
    font-size: 14px;
    transition: background 0.3s ease, color 0.3s ease;
}

.product-item:hover .button {
    transform: none !important;
    background: #FB8104 !important;
    color: #fff !important;
}

/* Quick view and wishlist - stable positioning */
.ajax-quick-view-popup,
.yith-wcwl-add-to-wishlist {
    position: absolute;
    top: 15px;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.ajax-quick-view-popup {
    right: 15px;
}

.yith-wcwl-add-to-wishlist {
    right: 55px;
}

/* Remove ALL hover animations on mobile */
@media (max-width: 768px) {
    .product-item .button,
    .ajax-quick-view-popup,
    .yith-wcwl-add-to-wishlist {
        position: static !important;
        transform: none !important;
        transition: none !important;
        opacity: 1 !important;
    }
    
    .product-item {
        transition: none !important;
    }
    
    .product-item:hover {
        transform: none !important;
    }
    
    .product-item-image {
        transition: none !important;
    }
    
    .flip-box,
    .flip-box-inner {
        transition: none !important;
    }
    
    /* Make buttons full width and stable on mobile */
    .product-item .button {
        width: 100% !important;
        margin-top: 15px;
        position: relative !important;
    }
    
    /* Stack icons horizontally on mobile */
    .ajax-quick-view-popup,
    .yith-wcwl-add-to-wishlist {
        position: relative !important;
        display: inline-block;
        margin: 10px 5px 0 0;
    }
}

/* Remove transform on product items */
.product-item {
    transform: none !important;
}

.product-item:hover {
    transform: translateY(-5px) !important;
}

@media (max-width: 768px) {
    .product-item:hover {
        transform: none !important;
    }
}
/**
 * Simple Lightbox Gallery
 * Click image = full screen with arrows and X
 */

/* Lightbox Overlay */
.moto-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    align-items: center;
    justify-content: center;
}

.moto-lightbox.active {
    display: flex;
}

/* Main Image */
.moto-lightbox img {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
}

/* Close Button (X) */
.moto-lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: #000;
    font-size: 40px;
    font-weight: 400;
    cursor: pointer;
    z-index: 10000;
    transition: color 0.3s;
    background: none;
    border: none;
    line-height: 1;
}

.moto-lightbox-close:hover {
    color: #FB8104;
}

/* Arrow Buttons */
.moto-lightbox-prev,
.moto-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
    font-size: 50px;
    font-weight: 700;
    cursor: pointer;
    z-index: 10000;
    transition: color 0.3s;
    background: none;
    border: none;
    padding: 20px;
    user-select: none;
}

.moto-lightbox-prev {
    left: 20px;
}

.moto-lightbox-next {
    right: 20px;
}

.moto-lightbox-prev:hover,
.moto-lightbox-next:hover {
    color: #FB8104;
}

/* Image Counter */
.moto-lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: #000;
    font-size: 16px;
    font-weight: 600;
    z-index: 10000;
}

/* Loading State */
.moto-lightbox.loading img {
    opacity: 0.3;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .moto-lightbox img {
        max-width: 95%;
        max-height: 85vh;
    }
    
    .moto-lightbox-close {
        top: 10px;
        right: 10px;
        font-size: 35px;
    }
    
    .moto-lightbox-prev,
    .moto-lightbox-next {
        font-size: 40px;
        padding: 15px;
    }
    
    .moto-lightbox-prev {
        left: 5px;
    }
    
    .moto-lightbox-next {
        right: 5px;
    }
}