@media (min-width: 701px) and (max-width: 1024px) {
    /* 1. Global Resets - Stop squashing content */
    html, body {
        display: block !important;
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
        max-width: 100vw;
        margin: 0;
        padding: 0;
    }

    * {
        box-sizing: border-box;
    }

    /* 2. Header & Navigation */
    .header {
        width: 100% !important;
        max-width: 100vw !important;
        position: fixed;
        box-sizing: border-box;
        display: flex;
        overflow: hidden;
        justify-content: space-between !important;
        z-index: 9999;
    }

    .logo img {
        width: 160px !important; /* Mid-size for tablet */
    }

    .product-container {
        display: grid;
        /* FIX: Removed the comma and set to 1 column by default for mobile */
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        text-align: center;
        /* FIX: Ensure the width calculation is strict */
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow: hidden; /* Prevents children from pushing the frame */
    }

    .nav-links {
        display: flex !important; /* Show links on tablet instead of just hamburger */
        position: static !important;
        width: auto !important;
        background: transparent !important;
        padding: 0 !important;
        gap: 20px !important;
    }

    .hamburger {
        display: none !important; /* Hide hamburger if links fit */
    }

    /* 3. Hero & Content Sections */
    .signupform-container, .login-package, .tag-container {
        padding: 100px 40px !important; /* Balanced padding */
    }

    .tag {
        font-size: 32px !important; /* Larger than mobile */
        justify-content: center;
    }

    /* 4. Square & Part Grids (Switch to 2 columns) */
    .square-container {
        grid-template-columns: repeat(2, 1fr) !important;
        padding-top: 200px !important; /* Reduced from 450px */
        gap: 30px;
    }

    .part-one, .part-two {
        grid-template-columns: 1fr 1fr !important;
        text-align: left !important;
        padding-bottom: 100px !important;
    }

    .part-one, .part-two p {
        text-align: left !important;
        padding: 0 20px;
    }

    /* 5. Images - Scaling up from mobile */
    .square img, .squared1 img {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto;
    }

    .item img {
        width: 150px !important;
    }

    .front-container .item {
        justify-content: center;
        margin: 0;
    }

    /* 6. Form & Login Fixes (No fixed pixels!) */
    #signupform #email, #signupform #password, .signin, .login-container {
        width: 100% !important; /* Use percentages for tablet */
        max-width: 450px !important;
        margin: 0 auto !important;
    }

    .signup-container {
        padding: 50px !important;
    }

    /* 7. Order Summary */
    #order-summary {
        width: 80% !important; /* Wider than desktop's 50% */
    }

    #payment-form input {
        width: 100% !important;
    }

    .nav-links {
        /* 1. Reset display for logic - use 'flex' when .active is added via JS */
        display: none; 

        /* 2. Fix the position and size */
        position: fixed;
        top: 0; /* Changed from 140px to 0 for a full-height mobile feel */
        width: 80%; /* Much better for mobile than 25% */
        height: 100vh;

        /* 3. Layout */
        flex-direction: column; /* Stack links vertically */
        justify-content: flex-start;
        padding-top: 80px; /* Space for a close button or header */

        /* 4. The "Frame Fixers" */
        box-sizing: border-box; 
        max-width: 100vw;
        transition: right 0.3s ease-in-out;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    }

    /* When the menu is toggled open */
    .nav-links.active {
        display: flex;
        right: 0;
    }

    .nav-links a {
        width: 100%;
        padding: 20px;
        border-bottom: 1px solid rgba(0,0,0,0.05);
        box-sizing: border-box;
    }

    /* 1. Adjust the Modal Box to fit the screen */
    #cart-modal .box {
        width: 92%; /* Gives a small margin on left/right */
        max-width: 100vw;
        margin: 10px;
        padding: 15px;
        max-height: 90vh; /* Prevents modal from being taller than the screen */
        overflow-y: hidden; /* Allows the whole box to scroll if content is long */
        overflow-x: hidden;
        inset: 0;
        box-sizing: border-box;
    }

    /* 2. Adjust the Cart List height for small screens */
    .cart-list {
        max-height: 50vh; /* Relative to screen height, not fixed pixels */
        box-sizing: border-box;
    }

    /* 3. Make Cart Items wrap if they are too wide */
    .cart-item {
        flex-wrap: wrap; /* Allows quantity controls to drop below if name is long */
        gap: 8px;
        box-sizing: border-box;
    }

    /* 4. Ensure the Cart Button doesn't get cut off */
    .product-container .cart-button {
        right: 15px;
        bottom: 15px;
        padding: 10px;
        font-size: 16px;
        overflow-x: hidden;
        inset: 1;
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* 5. Improve Button Tap Targets */
    .modal-actions {
        flex-direction: column-reverse; /* Stack buttons for easier thumb tapping */
        box-sizing: border-box;
    }

    .modal-actions .btn {
        width: 100%; /* Full width buttons are easier to click on mobile */
        max-width: 100vw;
        padding: 12px;
        box-sizing: border-box;
    }
}