@media screen and (max-width: 768px) {

    /* Global Adjustments */
    :root {
        --container-width: 100%;
    }

    .container {
        padding: 0 20px;
    }

    h1 {
        font-size: 2.5rem;
        /* Down from 3.5rem or 120px */
    }

    h2 {
        font-size: 2rem;
    }

    .section {
        padding: 60px 0;
        /* Reduced from 120px */
    }

    /* Header & Navigation */
    .navbar {
        height: 80px;
        /* Reduced specific height for mobile */
        padding: 10px 0;
    }

    .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
    }

    .logo {
        height: 60px;
        /* Reduced height */
        width: auto;
        z-index: 1001;
    }

    .nav-logo-img {
        height: 60px;
        transform: none;
        /* Remove the massive scale for mobile */
        max-width: 100%;
    }

    .nav-links {
        display: none;
        /* Hidden by default, toggled by JS */
        /* JS handles the display:flex and positioning, 
           but we need to ensure styles when it IS shown */
        flex-direction: column;
        gap: 20px;
        text-align: center;
        background: rgba(255, 255, 255, 0.98);
        width: 100%;
        position: absolute;
        top: 80px;
        /* Match navbar height */
        left: 0;
        padding: 30px 0;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }

    .nav-links.active {
        display: flex !important;
    }

    .nav-links a {
        font-size: 1.2rem;
        display: block;
        padding: 10px;
    }

    /* Hide desktop CTA in nav, maybe show in menu? 
       For now, let's keep it simplest: hide or adapt.
       If we hide it here, user can't book. 
       Better to put it in the mobile menu or simplify it.
    */
    /* Hide desktop CTA in nav, maybe show in menu? */
    .nav-cta {
        display: none;
    }

    .nav-actions {
        gap: 10px;
    }

    .btn-cart {
        height: 40px;
        padding: 0 15px;
        font-size: 15px !important;
    }

    /* Mobile Menu Button - Styled by class .btn-icon already, 
       just positioning adjustments if needed */
    .btn-icon {
        display: flex;
        /* Ensure it's visible */
        z-index: 1001;
        background: transparent;
        color: var(--text-dark);
        font-size: 1.5rem;
        border: none;
        box-shadow: none;
    }

    .btn-icon:hover {
        background: transparent;
        color: var(--primary-color);
    }

    /* Hero Section */
    .hero {
        margin-top: 80px;
        /* Match new navbar height */
        min-height: auto;
        height: 100vh;
        /* Keep view height but flexible */
        background-position: center center;
        /* Better centering for portrait */
        background-attachment: scroll;
        /* Fix for some mobile browsers */
    }

    .hero-content h1 {
        font-size: 3.5rem;
        /* Smaller but still big */
        line-height: 1.2;
    }

    .hero-content p {
        font-size: 1rem;
        padding: 0 15px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 15px;
        padding: 0 20px;
    }

    .hero-buttons .btn {
        width: 100%;
        text-align: center;
    }

    /* Services Section */
    .services-grid {
        grid-template-columns: 1fr;
        /* Stack cards */
        gap: 30px;
    }

    .service-image {
        height: 250px;
        /* Reduced from 460px */
    }

    .service-info {
        min-height: auto;
        padding: 20px;
    }

    /* Features Section */
    .feature-container {
        grid-template-columns: 1fr;
        padding: 40px 20px;
        gap: 40px;
        width: 100%;
        margin: 0;
        border-radius: 0;
        /* Full width look on mobile often cleaner, or keep radius */
    }

    .feature-image-wrapper {
        height: 300px;
        /* Reduced from 891px */
        width: 100%;
        max-width: 100%;
    }

    .feature-content h2 {
        font-size: 2.5rem;
    }

    .feature-stats {
        flex-direction: column;
        /* Stack stats */
        gap: 30px;
    }

    .stat-item {
        align-items: center;
        text-align: center;
    }

    /* Gallery Section */
    .gallery-grid {
        grid-template-columns: 1fr;
        /* Single column */
    }

    .gallery-col {
        gap: 15px;
    }

    /* Reset specific masonry heights for mobile flow */
    .gallery-grid .gallery-col:nth-child(n) .gallery-item:nth-child(n) img {
        height: 300px;
        /* Uniform height for mobile */
    }

    /* Salon Page Specifics */
    .salon-hero {
        height: 400px;
        margin-top: 80px;
    }

    .salon-hero-content .salon-title {
        font-size: 50px;
    }

    .salon-hero-content .subtitlex {
        font-size: 16px;
    }

    .salon-grid {
        grid-template-columns: 1fr;
    }

    .appointment-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .appointment-info h2 {
        font-size: 40px;
    }

    .appointment-form-wrapper {
        padding: 30px 20px;
    }

    .appointment-form .form-row-2 {
        grid-template-columns: 1fr;
    }

    .appointment-form .time-slots {
        grid-template-columns: repeat(2, 1fr);
    }

    /* CTA Banner */
    .cta-banner {
        padding: 80px 0;
        text-align: center;
    }

    .cta-content h2 {
        font-size: 2.5rem;
    }

    .cta-buttons {
        flex-direction: column;
        gap: 15px;
    }

    .cta-buttons .btn {
        width: 100%;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
        /* Stack footer cols if grid */
        text-align: center;
        gap: 40px;
    }

    .footer-logo-img {
        transform: none;
        /* Remove scale */
        height: 60px;
        margin: 0 auto 20px;
        /* Center it */
    }

    .footer-messaging-section {
        text-align: center;
    }

    .contact-form {
        padding: 20px;
    }
    /* Hair Shop Specifics */
    .hairshop-main {
        margin-top: 80px;
    }

    .product-detail-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .product-title {
        font-size: 32px;
    }

    .shipping-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .related-title {
        font-size: 40px;
    }

    .related-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Photo Studio Responsiveness */
    .ps-about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .ps-image-grid {
        max-width: 500px;
        margin: 0 auto;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
    }

    .booking-layout {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .calendar-days-row {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Boutique Responsiveness */
    .boutique-title {
        font-size: 70px;
    }

    .elevate-title {
        font-size: 48px;
    }

    .filter-bar {
        flex-direction: column;
        gap: 15px;
        border-radius: 20px;
    }

    .filter-search-box {
        width: 100%;
        max-width: 100%;
        margin-bottom: 10px;
    }

    .filter-buttons {
        width: 100%;
        flex-wrap: wrap;
        justify-content: center;
    }

    .btn-filter {
        flex: 1 1 calc(50% - 10px);
        text-align: center;
        padding: 10px;
    }

    .boutique-grid {
        grid-template-columns: 1fr;
    }

    .boutique-features-grid {
        grid-template-columns: 1fr;
    }

    /* Boutique Product Details Responsiveness */
    .product-detail-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .product-detail-title {
        font-size: 32px;
    }

    .shipping-info-grid {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    /* Order Confirmation Responsiveness */
    .order-details-grid {
        grid-template-columns: 1fr;
        padding: 40px 30px;
        gap: 40px;
    }

    .order-summary-table th {
        width: 150px;
    }

    /* Info Pages Responsiveness */
    .info-page-title {
        font-size: 42px;
    }

    .info-section-title {
        font-size: 24px;
    }

    .info-text, .info-list li {
        font-size: 16px;
    }
}

/* Photo Studio Tablet Responsiveness */
@media screen and (min-width: 769px) and (max-width: 1200px) {
    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .boutique-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .boutique-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-detail-grid {
        gap: 30px;
    }

    .order-details-grid {
        padding: 40px 50px;
        gap: 40px;
    }
}