/* --- MOBILE MASTER OVERRIDE (Max 600px) --- */
@media (max-width: 700px) {
    /* 1. Reset Body - STOP Grid centering which squashes 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 & Hamburger Fixes */
    .header {
        width: 100% !important;
        max-width: 100vw !important;
        display: flex;
        position: fixed;
        box-sizing: border-box;
        justify-content: space-between !important;
        height: 90px !important; /* This is the "Big" mobile height */
        overflow: hidden;
        transition: height 0.3s ease, padding 0.3s ease; /* Put transition here */
        z-index: 9999;
    }

    /* This is what was missing! */
    .header.shrunk {
        height: 50px !important; /* This is the "Small" mobile height */
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .logo {
        width: 130px !important; 
        height: auto !important;
        transition: width 0.3s ease; /* Transition width for the logo */
        padding: 0;
    }

    /* Optional: Shrink the logo too when the header shrinks */
    .header.shrunk .logo {
        width: 80px !important;
    }

    .hamburger {
        padding-right: 0 !important; 
    }

    .hamburger .line {
        width: 35px !important; 
        height: 2px;
    }

    /* 3. Neutralize Massive Section Gaps */
    .signupform-container, .login-package, .tag-container, .part-two {
        padding: 40px 20px !important; /* Was 200px-450px! */
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box;
        height: auto !important;
        background-attachment: scroll !important; /* Smooth scroll for mobile */
        padding-bottom: 0;
    }

    /* 4. Square & Image Content (The "Diminish" Fix) */
    .square-container {
        grid-template-columns: repeat(2, 1fr) !important;
        max-width: 100vw !important;
        box-sizing: border-box;
        overflow: hidden;
        padding-bottom: 70px;
    }

    .square, .squared1 {
        flex: 1;
        padding: 0px;
        border-radius: 8px;
        max-width: 100vw !important;
        box-sizing: border-box;
    }

    .square, .squared1 {
        img {
            margin-top: 5px;
        }
    }

    .square, .squared1 {
        img {
            max-width: 60% !important; /* Was 300px */
            height: auto !important;
        }
    }

    .squared1 #bottle {
        width: 100px !important; /* Was 300px */
        box-sizing: border-box;
        height: auto !important;
        margin: 0 auto !important;
        margin-left: 0 !important;
        align-items: flex-end;   /* Image moves to the RIGHT */
    }

    .part-one, .part-two {
        /* 1. Force a single centered column */
        display: flex !important; /* Flex is more reliable for centering on mobile */
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center !important;    /* Fixes the left/right tilt */
        justify-content: center !important; /* Fills the "empty middle" */
        /* 2. Reset the height/padding gaps */
        padding: 0px !important;
        width:100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow: hidden; /* This kills horizontal scrolling */
    }

    .part-one, .part-two {
        p {
            text-align: left !important;
            font-size: 6px!important;
            box-sizing: border-box !important;
            overflow-wrap: break-word !important;
            word-wrap: break-word !important;
        }
    }

    /* 5. Tag & Image (Fast Delivery) Centering */
    .tag {
        font-size: 1.1rem !important; 
        font-weight:bold;
        display: block !important;

        /* 1. Force the container to stay within the screen */
        width: 100% !important;
        max-width: 100vw !important; /* Limits width to the visible screen */
        box-sizing: border-box !important; /* Ensures padding doesn't add to width */

        /* 2. Prevent text from overflowing horizontally */
        overflow-wrap: break-word !important; 
        word-wrap: break-word !important;
        hyphens: auto; /* Adds a hyphen if a word is too long and needs to break */

        /* 3. Spacing and Alignment */
        text-align: center !important;
        padding: 10px !important; /* Safety margin so text doesn't touch the glass */
        line-height: 1.2 !important;
        margin: 0 auto !important;
    }

    .fast-delivery {
        margin: 0 auto 10px auto !important;
        width: 70px !important;
        box-sizing: border-box;
        height: auto !important;
    }

    #scrollButton {
        width: 140px !important;
        box-sizing: border-box;
        height: 40px !important;
        font-size: 0.4rem;
        text-align: center;
        justify-content: center;
        margin: 0 auto !important;
        padding: 0;
    }

    .main-container {
        padding: 0;
        margin: 0;

        h1 {
            font-size: 1.3rem;
            display: block !important;
            /* 2. Prevent text from overflowing horizontally */
            overflow-wrap: break-word !important; 
            word-wrap: break-word !important;
            hyphens: auto; /* Adds a hyphen if a word is too long and needs to break */
        }
    }

    /* 6. Form & Login Fixes (Kill fixed widths) */
    #signupform #email, #signupform #password, .signin, .login-container, .form-container {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 20px !important;
    }

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

    /* 7. Product & Summary Fixes */
    #order-summary {
        width: 90% !important;
        box-sizing: border-box;
    }

    .item img {
        width: 120px !important; /* Was 200px */
        box-sizing: border-box;
    }

    .main, .background-container {
        /* 1. Perfect Container Sizing */
        width: 100%;
        max-width: 100%; /* Changed from 100vw to 100% for better compatibility */
        margin: 0 auto;
        box-sizing: border-box; /* THE CRITICAL ADDITION */

        /* 2. Responsive Background */
        background-image: url(./seaandchairs.jpg) !important;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        /* 3. Height Correction */
        height: auto;
        /* Changed 180vw to a more stable aspect ratio or fixed min-height */
        min-height: 60vh; 
        /* 4. Layout */
        display: flex;
        flex-direction: column;
        align-items: center; /* Ensures content inside is centered */
        justify-content: center;
        
        /* 5. Clean up */
        overflow: hidden; /* Prevents internal elements from pushing the frame */
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    }
}

@media (max-width: 700px) {
    /* 1. Change 3-column grids to 1-column stack */
    .wine-sparkling, .product-list {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important; /* Fallback */
        width: 100% !important;
        box-sizing: border-box;
        padding: 15px !important;
        gap: 30px !important; /* More space between stacked items */
    }

    .front-window {
        display: grid;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
        overflow: hidden; /* Prevents children from pushing the frame */
    }

    .product-container {
        display: grid;
        /* FIX: Removed the comma and set to 1 column by default for mobile */
        grid-template-columns: 1fr;
        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 */
    }

    .vins {
        width: 100% !important;
        margin: 0px auto !important;

        h1 {
            font-size: 20px;
            text-align: center;
        }
    }

    /* 2. Resize images to fit the phone screen width */
    .product-list img, .product-list .wine, .wine-sparkling img {
        width: 100% !important;   /* Responsive width */
        max-width: 250px !important; /* Prevents it from getting too huge */
        box-sizing: border-box;
        height: auto !important;
        margin: 0 auto !important; /* Centers the image */
    }

    .front-container {
        display: flex !important;
        flex-direction: column !important;
    }

    .front-container .item {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px !important;
        text-align: center !important;
        padding: 10px;
        width: 100% !important;
        max-width: 100vw;
        font-size: 14px;

        .description {
            text-align: start;
        }

        .price {
            font-size: 18px;
            font-weight: lighter;
            text-align: start;
        }

        .reservation {
            font-size: 16px;
            color: yellow;
            font-weight: bold;
            text-align: start;
        }

        #qty {
            width: 40px;
        }

        #qty-decr, #qty-incr {
            width: 30px;
            box-sizing: border-box;
            align-items: center;
        }

        button, input {
            width: 40px;
            box-sizing: border-box;
        }
    }

    .controls {
        display: flex;
        flex-direction: column;
    }

    /* 4. The Cart Section Fix */
    .cart {
        position: relative !important; /* Sticky can be annoying on small mobile screens */
        top: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
        margin-top: 20px !important;
        box-sizing: border-box !important;
    }

    .cart-sign {
        position: fixed !important; /* Keeps the cart icon visible while scrolling */
        right: 15px !important;
        top: 80px !important; /* Below your header */
        width: 50px !important;
        height: 50px !important;
        box-sizing: border-box;
        z-index: 999;
    }

    .controls #add-cart {
        width: 100px;
        box-sizing: border-box;
    }

    .controls #link-product button {
        width: 100px;
        box-sizing: border-box;
    }

    /* 5. Typography Adjustments */
    .wine-sparkling h1 {
        font-size: 24px !important;
        text-align: center !important;
    }

    .wine-sparkling h4 {
        font-size: 18px !important;
    }
}

@media (max-width: 700px) {
    /* 1. Reset massive padding that squashes content */
    #promo-section {
        padding: 60px 20px !important; /* Reduced from 200px */
        justify-content: center !important;
        text-align: center !important;
        gap: 0px !important;
        font-size: 1rem;

        h1 {
            font-size: 1.5rem;
            padding-top: 10px;
        }
    }

    /* 2. Stack the Cocktail/Image Grid */
    .cepage-cocktail {
        grid-template-columns: 1fr !important; /* 2 columns to 1 */
        grid-template-rows: auto !important;
        gap: 40px !important;
        padding: 80px 15px 40px !important;
    }

    .cepage-cocktail img {
        width: 100% !important; /* Responsive width */
        max-width: 250px !important; /* Prevent it from being too big */
        box-sizing: border-box;
        margin: 0 auto;
    }

    /* 3. Neutralize Mailchimp's hardcoded 800px width */
    #mc_embed_signup {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    /* 4. Stack Footer columns */
    .footie {
        display: flex !important;
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center !important;
    }

    .footie div div {
        text-align: center !important;
    }

    .footie div div h2 {
        text-align: center !important;
    }

    /* 5. Fix Social Container gaps */
    .social-container {
        gap: 20px !important; /* Reduced from 70px */
        justify-content: center !important;
        padding: 0 !important;
    }

    /* 6. Cleanup Copyright & Consent Banner */
    .copyright {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center;
        align-items: center !important;
        margin: 0;
        padding: 0;
        width: 100% !important;
        box-sizing: border-box;
    }

    .copyright .links {
        display: flex !important;
        flex-direction: row !important;
        gap: 40px;

        a {
            font-size: 12px;
            max-width: 100%;
            box-sizing: border-box;
        }
    }

    .consent-banner {
        padding: 20px 10px !important;
    }

    /* 7. Wave Mask Adjustment */
    .promo-wave, .wave-bottom {
        height:90px !important; /* Shorter waves for mobile */
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    #mc_embed_signup .mc-field-group input {
        /* 1. Reset Width: Use 90-100% so it's readable on small screens */
        width: 70% !important;
        max-width: 100% !important; 

        /* 2. Reset Padding: Remove the 150px pushing it to the side */
        padding-left: 15px !important; 
        padding-right: 15px !important;
        height: 30px; /* Makes it easier to tap on mobile */

        /* 3. Horizontal Centering */
        display: block !important;
        margin-left: 100px !important;
        margin-right: 100px !important;

        /* 4. Text Alignment */
        text-align: center !important; 
        box-sizing: border-box !important; /* Vital to keep padding inside the width */
    }

    .content-container {
        width: auto;
        height: auto;
        box-sizing: border-box;
        background-color: white;
        padding: 50px;
        padding-top: 70px;
        text-align: justify;
        align-items: justify;

        h1, h2 {
            text-align: left;
            align-items: left;
        }
    }

    .text {
        width: auto;
        height: auto;
        background-color: white;
        padding: 50px;
        padding-top: 100px; 
        text-align: justify;
        align-items: justify;
        box-sizing: border-box;

        h1, h2 {
            text-align: left;
            align-items: left;
        }
    }

    .privacy-container {
        width: auto;
        height: auto;
        box-sizing: border-box;
        background-color: white;
        padding: 50px;
        padding-top: 100px; 
        text-align: justify;
        align-items: justify;

        h1, h2 {
            text-align: left;
            align-items: left;
        }
    }
}

@media (max-width: 700px) {
    #mc_embed_signup {
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centering children horizontally */
        justify-content: center !important;
    }

    .newsletter-container #mc_embed_signup .optionalParent #mc-embedded-subscribe {
        box-sizing: border-box !important;
        margin-top: 50px;
        align-items: center;
        justify-content: center;
    }

    #mc_embed_signup img {
        width: 70% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        align-items: center !important; /* Centering children horizontally */
        justify-content: center !important;
    }

    /* 1. Force the main Mailchimp wrapper to be full width */
    #mc_embed_signup, #mc_embed_signup_scroll {
        width: 100% !important;
        max-width: 100vw;
        box-sizing: border-box;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Centering children horizontally */
        justify-content: center !important;
    }

    /* 2. Target the group container that holds the input */
    #mc_embed_signup .mc-field-group {
        width: 100% !important; /* Give it some breathing room from the edges */
        max-width: 100vw !important;
        box-sizing: border-box;
        font-size: 10px;
        text-align: center !important;
    }

    /* Find this block and change the margins */
    #mc_embed_signup .mc-field-group input {
        width: 100% !important; /* Increase width for better mobile use */
        max-width: 100% !important;
        margin: 10px auto !important; /* REMOVE the 100px margins */
        display: block !important;
        padding: 12px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        align-items: center !important; /* Centering children horizontally */
        justify-content: center !important;
    }

    /* 4. Fix the 'Subscribe' button to match */
    #mc_embed_signup .clear, #mc_embed_signup .button {
        width: 60% !important;
        box-sizing: border-box;
        margin: 10px auto !important;
        display: block !important;
        text-align: center;
        align-items: center !important;
        justify-content: center !important;
    }
}

@media (max-width: 700px) {
    .login-package {
        display: flex !important;
        flex-direction: column !important;
        padding: 40px 20px !important; /* Reduced from 200px */
        width: 100% !important;
        box-sizing: border-box;
        min-height: 100vh;
        background-color: white;
    }

    #auth-container {
        background-attachment: scroll !important; /* Fixed bg often breaks on mobile */
        width: 100% !important;
        box-sizing: border-box;
        padding: 10px;
    }

    .login-container, .signin {
        width: 100% !important; /* Box fills the phone width */
        max-width: 100% !important;
        box-sizing: border-box;
        padding: 30px 15px !important;
        margin-bottom: 20px;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important;
    }

    label {
        font-size: 16px !important;
        text-align: left;
        display: block;
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    /* 🛠️ THE CRITICAL FIX: No more 400px inputs */
    #signupform #email, #signupform #password {
        width: 100% !important; 
        max-width: 100% !important;
        padding: 12px !important;
        margin: 8px 0 !important;
        box-sizing: border-box !important;
    }
}

/* Keep your existing desktop styles, then add this: */

@media (max-width: 700px) {
    .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 */
        right: -100%; /* Start off-screen to the right */
        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%;
    max-width:100vw;
    padding: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    box-sizing: border-box;
  }

  .side-menu a {
    text-decoration: none;
    font-size: 16px;
    border-bottom: 1px solid #eee;
  }
}

@media (max-width: 700px) {
    /* 1. Adjust the Modal Box to fit the screen */
    #cart-modal .box {
        width: 92%; /* Gives a small margin on left/right */
        max-width: 100vw;
        box-sizing: border-box;
        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: 14px;
        max-width: 100vw;
        overflow-x: hidden;
        inset: 1;
        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 */
        padding: 12px;
        max-width: 100vw;
        box-sizing: border-box;
    }
}