/**
 * Single Product Page - Mobile & Tablet Responsive Styles
 * Professional clean layout - 2025 Edition
 * Updated: 2026-01-18 - Optimized button sizes
 */

/* =========================================================
   TABLET LANDSCAPE & DESKTOP ADJUSTMENTS (901px - 1024px)
   ========================================================= */
@media (max-width: 1024px) {
    /* Keep grid but reduce gap and padding */
    body.single-product .product-detail {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding: 30px;
    }
    
    body.single-product .main-image {
        min-height: 350px;
        max-height: 450px;
    }
    
    body.single-product .product-title {
        font-size: 28px;
    }
    
    body.single-product .price {
        font-size: 36px;
    }
    
    /* Ensure sticky works or disable if screen too short */
    body.single-product .product-images {
        top: 120px;
    }
}

/* =========================================================
   MOBILE & TABLET PORTRAIT (900px and below)
   ========================================================= */
@media (max-width: 900px) {
    /* ----- HEADER & LAYOUT STRUCTURE ----- */
    /* Force fixed header visibility */
    body.single-product .top-bar,
    body.single-product header.top-bar,
    body.single-product #top-bar-header,
    body.single-product .logo-banner {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999999 !important;
    }
    
    body.single-product .main-nav {
        position: fixed !important;
        top: 55px !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 999998 !important;
    }

    /* Padding to prevent content from hiding behind fixed header */
    body.single-product .product-page {
        padding: 0 0 40px 0;
        margin-top: 0 !important;
        padding-top: 115px !important; /* 55px top bar + 55px nav + 5px buffer */
    }

    /* Container adjustments - Full width feel on mobile */
    body.single-product .container {
        padding: 0 15px;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Collapse Grid to Single Column */
    body.single-product .product-detail {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 20px !important;
        margin-bottom: 30px !important;
        background: #1a1a1a !important;
        border-radius: 12px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Disable sticky images on mobile to allow scrolling */
    body.single-product .product-images {
        position: relative !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    body.single-product .product-info {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* ----- IMAGES ----- */
    body.single-product .main-image {
        min-height: 250px;
        max-height: 350px;
        margin-bottom: 15px !important;
        border-radius: 10px !important;
    }
    
    body.single-product .main-image img {
        padding: 10px !important;
        object-fit: contain !important;
    }

    body.single-product .thumbnail-images {
        gap: 8px !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
    }

    body.single-product .thumbnail {
        width: 60px !important;
        height: 60px !important;
        border-radius: 6px !important;
    }

    /* ----- PRODUCT INFO ----- */
    body.single-product .product-brand {
        font-size: 12px !important;
        margin-bottom: 5px !important;
    }

    body.single-product .product-title {
        font-size: 24px !important;
        margin-bottom: 10px !important;
        line-height: 1.3 !important;
    }

    body.single-product .product-meta {
        margin-bottom: 15px !important;
        padding-bottom: 15px !important;
        gap: 15px !important;
    }
    
    body.single-product .product-meta span {
        font-size: 13px !important;
    }

    body.single-product .product-price-section {
        margin-bottom: 15px !important;
    }

    body.single-product .price {
        font-size: 32px !important;
    }

    body.single-product .regular-price {
        font-size: 16px !important;
    }

    /* ----- ALIGNMENT ADD-ON ----- */
    body.single-product .alignment-addon-section {
        padding: 15px !important;
        margin-bottom: 20px !important;
        border-radius: 10px !important;
    }

    body.single-product .alignment-option {
        padding: 12px 14px !important;
    }

    /* ----- ACTIONS (Quantity & Buttons) ----- */
    /* Stack vertically for clean mobile layout */
    body.single-product .product-actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
        margin-bottom: 20px !important;
        width: 100% !important;
        padding: 15px !important;
    }

    /* Quantity full width on mobile */
    body.single-product .quantity-selector {
        width: 100% !important;
        justify-content: space-between !important;
        padding: 0 0 15px 0 !important;
        box-sizing: border-box !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
    
    body.single-product .quantity-selector label {
        margin-right: auto !important;
    }

    /* Buttons row - keep side by side for quick access */
    body.single-product .buttons-row {
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;
        width: 100% !important;
    }

    body.single-product .btn-add-cart,
    body.single-product .btn-buy-now {
        flex: 1 !important;
        padding: 11px 10px !important;
        font-size: 13px !important;
        min-width: 0 !important;
        justify-content: center !important;
        height: 50px !important; /* Consistent height */
    }

    /* ----- FEATURES ----- */
    body.single-product .product-features {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 10px !important;
        margin-top: 20px !important;
        padding-top: 20px !important;
    }

    body.single-product .feature {
        padding: 5px !important;
    }

    body.single-product .feature i {
        font-size: 20px !important;
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 8px !important;
    }

    body.single-product .feature span {
        font-size: 10px !important;
    }
}

/* =========================================================
   SMALL MOBILE (480px and below)
   ========================================================= */
@media (max-width: 480px) {
    body.single-product .product-page {
        padding-top: 110px !important;
    }
    
    body.single-product .product-detail {
        padding: 15px !important;
        gap: 15px !important;
    }

    body.single-product .main-image {
        min-height: 200px;
        max-height: 300px;
    }

    body.single-product .product-title {
        font-size: 20px !important;
    }

    body.single-product .price {
        font-size: 28px !important;
    }

    /* Hide quantity label to save space if needed, or keep it */
    body.single-product .quantity-selector label {
        font-size: 13px !important;
    }

    /* Stack buttons if screen is REALLY small, but usually row is better */
    body.single-product .buttons-row {
        gap: 8px !important;
    }
    
    body.single-product .btn-add-cart,
    body.single-product .btn-buy-now {
        font-size: 12px !important;
        padding: 10px 5px !important;
        height: 40px !important;
    }

    body.single-product .btn i {
        font-size: 13px !important;
    }
}

/* =========================================================
   EXTRA SMALL MOBILE (360px and below)
   ========================================================= */
@media (max-width: 360px) {
    body.single-product .product-page {
        padding-top: 105px !important;
    }

    body.single-product .container {
        padding: 0 10px !important;
    }

    body.single-product .main-image {
        min-height: 180px;
        max-height: 250px;
    }

    body.single-product .product-title {
        font-size: 18px !important;
    }
    
    body.single-product .price {
        font-size: 26px !important;
    }

    /* Adjust quantity controls size */
    body.single-product .qty-btn {
        width: 34px !important;
        height: 34px !important;
        font-size: 16px !important;
    }
    
    body.single-product .quantity-display {
        width: 40px !important;
        height: 34px !important;
        font-size: 14px !important;
    }
    
    /* Make features vertical list for better readability on tiny screens */
    body.single-product .product-features {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
    
    body.single-product .feature {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: left !important;
        width: 100% !important;
        gap: 15px !important;
    }
    
    body.single-product .feature i {
        margin-bottom: 0 !important;
        width: 24px !important;
        height: 24px !important;
        font-size: 14px !important;
        flex-shrink: 0 !important;
    }
    
    body.single-product .feature span {
        font-size: 12px !important;
    }
}