/* =====================================================
   PRINT STUDIO NZ - MOBILE CATALOGUE OVERRIDE
   Only active on screens 991px and below.
   All modal rules are scoped to #productModal to prevent
   any bleed into Bootstrap or other page elements.
   ===================================================== */

@media (max-width: 991px) {

    /* =====================================================
       1. CATALOGUE GRID: 2-COLUMN SCAN
       ===================================================== */
    #product-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 10px !important;
    }

    .product-card {
        height: auto !important;
        border-radius: 12px !important;
    }

    /* aspect-ratio instead of fixed height — tall/wide products
       won't be squished regardless of device width */
    .card-img-container {
        height: auto !important;
        aspect-ratio: 4 / 3 !important;
    }


    /* =====================================================
       2. MODAL: FULL-SCREEN SINGLE-COLUMN LAYOUT
       ===================================================== */

    /* Full-screen dialog */
    #productModal .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
    }

    /* Full-screen content shell */
    #productModal .modal-content {
        height: 100dvh !important; /* dvh accounts for browser chrome on mobile */
        height: 100vh !important;  /* fallback for older iOS */
        max-height: 100vh !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Compact sticky header */
    #productModal .modal-header {
        flex-shrink: 0 !important;
        background: #fff !important;
        padding: 12px 15px !important;
        border-bottom: 1px solid #eee !important;
        z-index: 10 !important;
    }

    #productModal .modal-body {
        flex: 1 1 0% !important;
        min-height: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        height: auto !important;
        padding: 0 0 120px 0 !important;
        background: #f8f9fa !important;
    }

    #productModal .modal-body .row.g-0 {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        height: auto !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
    }

    #productModal .modal-body .col-lg-5,
    #productModal .modal-body .col-lg-7 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto !important;
        height: auto !important;
        overflow: visible !important;
        border: none !important;
    }

    #productModal #modal-right-scrollable {
        flex: 0 0 auto !important;
        height: auto !important;
        overflow: visible !important;
        padding: 15px !important;
        min-height: 0 !important;
    }


/* =====================================================
       3. IMAGE SLIDER (No Thumbnails)
       ===================================================== */
    #productModal .modal-main-img-wrap {
        height: 280px !important; /* Slightly taller for better impact */
        border-radius: 12px !important;
        margin-bottom: 10px !important;
        order: 3; /* Keeps it under the title */
    }

    /* Hide the old thumbnail container entirely */
    #productModal #modal-thumbs {
        display: none !important;
    }


    /* =====================================================
       4. THUMB-FRIENDLY ACTION CARDS
       ===================================================== */

    /* Larger touch targets for colour swatches (44px = WCAG minimum) */
    .color-swatch {
        width: 44px !important;
        height: 44px !important;
        margin: 6px !important;
    }

    /* Branding buttons: 2-per-row for easier tapping */
    #branding-options-container .btn {
        flex: 1 1 calc(50% - 10px) !important;
        padding: 12px 5px !important;
        font-size: 0.82rem !important;
        font-weight: 700 !important;
    }

    /* Step 2 contact fields: full width on mobile */
    #productModal #step-2 .col-md-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }


    /* =====================================================
       5. STICKY PRICE + BUTTON BAR
       ===================================================== */
    #productModal .modal-footer-fixed {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        background: #fff !important;
        padding: 12px 16px !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
        box-shadow: 0 -6px 24px rgba(0,0,0,0.1) !important;
        z-index: 2000 !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
        margin-top: 0 !important;
    }

    #productModal .footer-price-block .js-quote-total {
        font-size: 1.35rem !important;
        display: block !important;
        line-height: 1 !important;
    }

    #productModal .footer-actions {
        flex-shrink: 0 !important;
    }

    #productModal .footer-actions .btn {
        border-radius: 50px !important;
        padding: 11px 22px !important;
        font-weight: 800 !important;
        font-size: 0.9rem !important;
    }


    /* =====================================================
       6. REORDERING LAYOUT (Quote Builder Above Description)
       ===================================================== */
    
    /* Flatten the columns so their children become direct siblings of .row */
    #productModal .modal-body .col-lg-5,
    #productModal .modal-body .col-lg-7,
    #productModal #modal-right-scrollable {
        display: contents !important;
    }

    /* Make the row a flex column and restore the padding lost from the columns */
    #productModal .modal-body .row.g-0 {
        display: flex !important;
        flex-direction: column !important;
        padding: 15px !important; 
    }

    /* Assign the new visual order */
    #productModal #modal-code { order: 1; align-self: flex-start; }
    #productModal #modal-title { order: 2; margin-bottom: 15px !important; }
    #productModal .modal-main-img-wrap { order: 3; }
    #productModal #modal-thumbs { order: 4; margin-bottom: 20px !important; }
    
    /* Bring the builder right under the images */
    #productModal #dynamic-status-bar { order: 5; margin-bottom: 15px !important; }
    #productModal #quote-form { order: 6; width: 100%; }
    
    /* Push the description and downloads to the bottom */
    #productModal #modal-desc { 
        order: 7; 
        margin-top: 25px !important; 
        padding-top: 20px !important; 
        border-top: 1px solid #dee2e6;
        position: relative;
    }
    #productModal #modal-downloads { order: 8; }

    /* =====================================================
       7. DESCRIPTION "READ MORE" TRUNCATION
       ===================================================== */
    
    #productModal .mobile-desc-truncate {
        display: -webkit-box;
        -webkit-line-clamp: 4; /* Limit to 4 lines */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: all 0.3s ease;
    }

    #productModal .mobile-desc-expanded {
        display: block;
        -webkit-line-clamp: unset;
    }

/* The 'Read More' toggle button injected via JS */
    #productModal .read-more-btn {
        order: 7; 
        background: none;
        border: none;
        color: #1C1C1C;
        font-weight: 800;
        font-size: 0.85rem;
        padding: 0;
        margin-top: 5px;
        text-decoration: underline;
        cursor: pointer;
        text-align: left;
    }

    /* Ensures the summary box sits exactly where the images were in Step 2 */
    #productModal .quote-summary-box { order: 3; }
} /* <-- This is the ONLY closing bracket that should be at the end of the file */

/* --- ARTWORK PREVIEW UPLOAD BOX --- */
#artwork-preview-box { transition: all 0.3s ease; border-color: #e2e8f0 !important; }
#artwork-thumbnail i { text-shadow: 0 2px 4px rgba(0,0,0,0.05); }

/* Ensure the file input looks clean when a file is selected */
input[type="file"]::file-selector-button {
    background-color: var(--color-dark);
    color: white; border: none; padding: 6px 12px; border-radius: 4px; margin-right: 15px; transition: background-color 0.2s; cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background-color: var(--color-primary); color: var(--color-dark); }

/* --- DYNAMIC BRANDING HELPER BOX --- */
#branding-info-box { animation: fadeIn 0.3s ease-in-out; }

/* --- SAFE ZONE FOR MIX AND MATCH ALIGNMENT --- */
.color-label-safe-zone {
    height: 2.6em; /* Locks the height for 2 lines of text max */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}