/* ===================================
   LOTUS CUPCAKES - RESPONSIVE DESIGN
=================================== */


/* ===================================
   TABLETS
=================================== */

@media(max-width:1024px){

    /* HEADER */

    header{
        padding:20px 5%;
    }

    .logo{
        font-size:28px;
    }

    nav a{
        margin-left:15px;
        font-size:14px;
    }


    /* HERO */

    .hero h1,
    .shop-hero h1{
        font-size:50px;
    }


    /* SECTION TITLES */

    .section-title{
        font-size:38px;
    }


    /* PRODUCT GRID */

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


    /* REDESIGNED PRODUCT PAGE */

    .product-page{
        padding:55px 24px 75px;
    }

    .product-container{
        grid-template-columns:minmax(0,1fr) minmax(360px,460px);
        gap:38px;
    }

    .product-info{
        padding:30px;
    }

    .product-info h1{
        font-size:38px;
    }

    .product-info .price{
        font-size:24px;
    }


    /* CONTACT */

    .contact-grid{
        gap:35px;
    }

}


/* ===================================
   MOBILE DEVICES
=================================== */

@media(max-width:768px){

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }


    /* HEADER */

    header{
        flex-direction:column;
        gap:15px;
        padding:20px;
    }

    .logo{
        font-size:26px;
    }

    nav{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        gap:15px;
    }

    nav a{
        margin:0;
        font-size:14px;
    }


    /* SHARED SITE HEADER */

    .site-header{
        position:relative;
        min-height:auto;

        flex-direction:column;

        gap:15px;

        padding:16px 18px;
    }

    body{
        padding-top:0;
        background-attachment:scroll;
    }

    .site-logo-image{
        width:50px;
        height:50px;
    }

    .site-logo-text{
        font-size:25px;
    }

    .site-nav{
        width:100%;

        justify-content:center;
        flex-wrap:wrap;

        gap:14px 18px;
    }

    .site-nav a{
        font-size:14px;
    }

    .basket-link{
        padding:8px 13px;
    }


    /* HERO */

    .hero{
        min-height:70vh !important;
        padding:35px 18px;
    }

    .shop-hero{
        min-height:28vh;
        padding:30px 18px;
    }

    .hero h1,
    .shop-hero h1{
        font-size:38px;
        line-height:1.15;
    }

    .hero p,
    .shop-hero p{
        font-size:16px;
    }


    /* GENERAL SECTIONS */

    section{
        padding:60px 5%;
    }

    .section-title{
        font-size:34px;
        margin-bottom:35px;
    }


    /* PRODUCT GRID */

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

    .product-card img{
        height:250px;
    }

    .product-card .product-info h3{
        font-size:24px;
    }


    /* ===================================
       REDESIGNED PRODUCT PAGE
    =================================== */

    .product-page{
        width:100%;
        max-width:100%;

        padding:30px 14px 55px;

        text-align:left;
    }

    .product-container{
        width:100%;
        max-width:620px;

        margin:0 auto;

        display:flex;
        flex-direction:column;

        gap:24px;
    }


    /* PRODUCT GALLERY FIRST */

    .product-gallery{
        order:1;

        position:static;

        width:100%;
        max-width:100%;

        padding:0;
    }

    .main-image-wrapper{
        width:100%;
        aspect-ratio:1 / 1;

        border-radius:19px;
    }

    #product-image{
        width:100%;
        height:100%;

        object-fit:contain;

        border-radius:19px;
    }

    .gallery-arrow{
        width:42px;
        height:42px;

        font-size:22px;
    }

    .gallery-arrow-left{
        left:10px;
    }

    .gallery-arrow-right{
        right:10px;
    }


    /* PRODUCT THUMBNAILS */

    .product-thumbnails{
        width:100%;

        grid-template-columns:
        repeat(4,minmax(0,1fr));

        gap:8px;
    }

    .thumbnail-button{
        width:100%;
        min-width:0;
    }


    /* PRODUCT OPTIONS SECOND */

    .product-info{
        order:2;

        width:100%;
        max-width:100%;

        margin:0;
        padding:25px 18px;

        text-align:left;

        border-radius:19px;
    }

    .product-heading{
        flex-direction:column;
        gap:8px;
    }

    .product-info h1{
        font-size:34px;
        line-height:1.15;
        text-align:left;
    }

    .product-info .price{
        margin:0;
        font-size:25px;
        text-align:left;
    }

    .description{
        font-size:15px;
        text-align:left;
    }


    /* PRODUCT FORM ELEMENTS */

    .custom-dropdown,
    .dropdown-toggle,
    .dropdown-menu,
    .option textarea,
    .image-upload-box,
    .quantity-section{
        width:100%;
        max-width:100%;
    }

    .dropdown-menu{
        left:0;
        right:0;
    }

    .quantity-section{
        grid-template-columns:90px 1fr;
    }


    /* INFO GRID */

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


    /* BASKET */

    .basket-item{
        grid-template-columns:1fr !important;

        gap:20px;

        text-align:left;
    }

    .basket-item img{
        width:100% !important;
        height:auto !important;
        max-height:260px;

        margin:0 auto;
    }

    .basket-summary{
        text-align:center;
    }

    .basket-buttons{
        flex-direction:column;
        justify-content:center;
    }

    .basket-buttons button,
    .basket-buttons .btn{
        width:100%;
    }


    /* CHECKOUT */

    .checkout-section{
        padding:45px 14px;
    }

    .checkout-container{
        width:100%;
    }

    .checkout-box,
    .payment-box{
        padding:28px 20px;
        border-radius:18px;
    }

    .checkout-box h2,
    .payment-box h2{
        font-size:32px;
    }

    .checkout-box input,
    .checkout-box select,
    .checkout-box textarea{
        padding:15px;
        font-size:16px;
    }

    .checkout-total{
        font-size:28px;
    }

    .payment-box button{
        font-size:18px;
        padding:17px;
    }


    /* CONTACT */

    .contact-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .contact-info,
    .contact-form{
        padding:28px 22px;
    }


    /* REVIEWS */

    .review-card{
        display:block;
        margin:15px 0;
    }


    /* GALLERY GRID */

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

    .gallery-item{
        height:320px;
    }

    .gallery-overlay{
        padding:18px 14px;
        font-size:18px;
    }


    /* GALLERY LIGHTBOX */

    .gallery-modal{
        padding:10px !important;
    }

    .gallery-modal-content{
        width:100% !important;
        max-width:100% !important;
        max-height:96vh !important;

        grid-template-columns:
        44px minmax(0,1fr) 44px !important;

        gap:5px !important;

        padding:14px 5px 12px !important;

        overflow:hidden !important;
    }

    .gallery-image-area{
        width:100% !important;
        height:62vh !important;
        max-height:520px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        overflow:hidden !important;
    }

    #gallery-image{
        width:100% !important;
        height:100% !important;

        max-width:100% !important;
        max-height:100% !important;

        object-fit:contain !important;

        margin:0 auto !important;

        border-radius:14px !important;
    }

    .gallery-prev,
    .gallery-next{
        width:40px !important;
        height:40px !important;
        min-height:40px !important;

        font-size:23px !important;
    }

    .close-gallery{
        top:6px;
        right:6px;

        width:40px !important;
        height:40px !important;
        min-height:40px !important;

        font-size:27px !important;
    }

    .gallery-modal-thumbnails{
        width:100% !important;

        justify-content:flex-start !important;

        overflow-x:auto !important;

        padding:8px 2px 4px !important;
    }

    .gallery-modal-thumbnail{
        flex:0 0 70px !important;

        width:70px !important;
        height:56px !important;
        min-height:56px !important;
    }

    .gallery-modal-thumbnail img{
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
    }

    .gallery-counter,
    #gallery-counter{
        display:none !important;
    }


    /* GOOGLE MAP */

    .map-section{
        margin:50px auto;
        padding:0 14px;
    }

    .map-section h2{
        font-size:34px;
        margin-bottom:25px;
    }

    .map-container iframe{
        height:280px;
    }

    .collection-note iframe{
        display:block;

        width:100% !important;
        max-width:340px !important;
        height:220px !important;

        margin:20px auto 0;
    }


    /* SOCIAL LINKS */

    .social-section{
        padding:55px 18px;
    }

    .social-section h2{
        font-size:34px;
    }

    .social-links{
        gap:18px;
    }

    .social-links a{
        width:58px;
        height:58px;

        font-size:27px;
    }


    /* FOOTER */

    footer{
        padding:30px 20px;
    }

}
/* ===================================
   SMALL PHONES
=================================== */

@media(max-width:480px){

    /* HEADER */

    .logo{
        font-size:23px;
    }

    .site-logo-text{
        font-size:22px;
    }

    .site-nav{
        gap:11px 14px;
    }

    .site-nav a{
        font-size:13px;
    }


    /* HERO */

    .hero{
        min-height:65vh !important;
        padding:28px 14px;
    }

    .hero h1,
    .shop-hero h1{
        font-size:32px;
    }

    .hero p,
    .shop-hero p{
        font-size:15px;
    }


    /* BUTTONS */

    button,
    .btn{
        padding:12px 22px;
    }


    /* SECTION TITLES */

    .section-title{
        font-size:30px;
    }


    /* PRODUCT CARDS */

    .product-card img{
        height:220px;
    }


    /* PRODUCT PAGE */

    .product-page{
        padding:22px 10px 45px;
    }

    .product-info{
        padding:22px 15px;
    }

    .product-info h1{
        font-size:30px;
    }

    .main-image-wrapper{
        aspect-ratio:1 / 1;
    }

    .gallery-arrow{
        width:38px;
        height:38px;

        font-size:20px;
    }

    .gallery-arrow-left{
        left:7px;
    }

    .gallery-arrow-right{
        right:7px;
    }

    .product-thumbnails{
        gap:6px;
    }

    .quantity-section{
        grid-template-columns:1fr;
    }

    .quantity-field input{
        text-align:left;
    }


    /* CHECKOUT */

    .checkout-box,
    .payment-box{
        padding:24px 16px;
    }

    .checkout-box h2,
    .payment-box h2{
        font-size:28px;
    }


    /* CONTACT */

    .contact-info,
    .contact-form{
        padding:24px 17px;
    }


    /* GALLERY */

    .gallery-item{
        height:280px;
    }

    .gallery-image-area{
        height:55vh !important;
        max-height:440px !important;
    }


    /* MAP */

    .collection-note iframe{
        max-width:300px !important;
        height:190px !important;
    }

    .map-container iframe{
        height:240px;
    }


    /* SOCIAL LINKS */

    .social-section h2{
        font-size:30px;
    }

    .social-links a{
        width:54px;
        height:54px;

        font-size:25px;
    }

}