@media all
and (min-width : 320px)
and (max-width : 667px) {
    header {
        padding: 10px 0;
        height: 76px;
    }

    #mobile-menu {
        height: 100%;
        width: 0;
        position: fixed;
        z-index: 10;
        top: 0;
        left: 0px;
        background: white;
        transition: 0.5s;
        overflow-x: hidden;
        display: block;
    }

    #mobile-menu-toggler {
        display: block;
        position: relative;
        top: -43px;
        left: 23px;
        font-size: 1.2em;
        color: white;
    }

    #left-header {
        text-align: center;
    }

    #main {
        transition: margin-left 0.5s;
    }

    #middle-header {
        display: none;
    }

    #header-cart {
        position: relative;
        top: -67px;
        right: -79vw;
    }

        #header-cart #search {
            display: none;
        }

        #header-cart #cart-header-icon {
            top: 17px;
        }

        .menu-container {
            display: none;
        }

    #mobile-search {
        background: #f0f0f0;
        position: relative;
        padding: 10px;
    }

        #mobile-search input {
            border: none;
            padding: 12px 60px 12px 15px;
            color: #666;
        }

        #mobile-search input::placeholder {
            color: #aaa;
            border-radius: 0;
        }
        
        #mobile-search input:focus {
            box-shadow: none;
        }

        #mobile-search button {
            position: absolute;
            border: none;
            background: none;
            top: 50%;
            right: 20px;
            width: 25px;
            height: 25px;
            padding: 0;
            transform: translateY(-50%);
        }

        #mobile-menu ul {
            margin: 0;
            padding: 0;
        }

        #mobile-menu ul > li {
            background: #fafafa;
            border-bottom: 1px solid #f0f0f0;
        }

        #mobile-menu ul > li > a {
            font-weight: 800;
            font-size: 17px;
            color: #262626;
            text-transform: uppercase;
            display: block;
            padding: 13px 20px;
            position: relative;
        }

        #mobile-menu > ul > li > a {
            background: white;
        }

        #mobile-menu ul > li > a > i.menu-arrow {
            font-size: 1.3rem !important;
            position: absolute;
            right: 13px;
            top: 50%;
            transform: translateY(-50%);
            font-weight: 300;
            padding: 10px 7px;
        }

        #mobile-menu ul > li > a > i.menu-arrow.fa-minus {
            font-weight: 600;
        }

        #mobile-menu ul .dropdown-menu {
            position: initial;
            background: #f0f0f0;
            border-radius: 0;
            border: none;
            padding: 15px 0;
        }

            #mobile-menu ul .dropdown-menu ul > li {
                background: none;
                padding-left: 10px;
            }

                #mobile-menu ul .dropdown-menu ul > li > a {
                    color: #666;
                    padding: 6px 10px;
                    font-size: 1em;
                    text-transform: none;
                    font-weight: 400;
                }

                #mobile-menu ul .dropdown-menu ul > li > a > i.menu-arrow {
                    font-size: 1.05em !important;
                    font-weight: 600;
                    color: #888;
                    right: 16px;
                }

        #mobile-menu ul .subcat-menu {
            display: none;
        }

.category-info {
    padding-right: 0px !important;
    padding-left: 0px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-top: -18px !important;
}

    .category-info .cat-image {
        flex-basis: 100%;
        width: 100%;
    }

    .category-info .cat-details {
        flex-basis: 80%;
        width: 80%;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-left: auto;
        margin-right: auto;
    }

    .subcategory-list li {
        width: 100%;
    }

    h2.subcategory-title {
        font-size: 2.1em;
        text-align: center;
    }

    .subcat-flex {
        margin-top: 1.5em !important;
        margin-bottom: 3em !important;
        flex-direction: column;
    }

    .sort-by {
        margin-top: 1rem;
        width: 100%;
        justify-content: center;
        text-align: center;
    }

        .sort-by select {
            width: auto;
            margin: 10px auto 0 auto;
            border: 1px solid #d9d9d9;
        }

    .product-list {
        justify-content: center;
        gap: 4;
    }

        .product-list .product-thumb .image,
        .product-list .product-thumb .content {
            width: 100%;
            margin-bottom: 0;
        }

        .product-list .product-thumb .content .price {
            font-size: 1em;
        }

    .product-list .product-thumb, .related-products .product-thumb {
        flex-basis: 45%;

    }

    .product-info-flex .product-images-grid .main-image {
        order: 1;
    }

        .product-info-flex .product-images-grid {
            width: 100%;
            flex-basis: 100%;
            padding-left: 15px;
            padding-right: 15px;
        }

    .product-info-flex .product-images-grid .other-images {
        order: 2;
        width: 80%;
        margin: 0 auto;
    }

        .product-info-flex .product-images-grid .slick-track > a {
            margin-right: 15px;
        }

        .product-info-flex .product-images-grid .slick-track > a > img {
            border: none;
        }

        .product-info-flex .product-info-grid {
            width: 100%;
            flex-basis: 100%;
            padding-left: 15px;
            padding-right: 15px;
            padding-top: 40px;
            text-align: center;
        }

        .other-images-slider .slick-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }

        .other-images-slider .slick-arrow.next-arrow {
            right: -10%;
        }

        .other-images-slider .slick-arrow.prev-arrow {
            left: -11%;
            z-index: 1;
            transform: translateY(-50%);
        }

        .social-container {
            flex-direction: column;
            align-items: start;
        }

            .social-container .social-icons {
                margin-left: 0 !important;
                margin-top: 8px;
            }

            .social-icons a {
                font-size: 1.1em;
            }

            .social-icons a:first-child {
                padding-left: 0;
            }

    .product-tabs.nav-tabs, .product-content.tab-content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .product-content.tab-content iframe {
        width: 100%;
    }

    .product-info-grid h4 {
        text-align: left;
    }

    .login-container, .register-container {
        width: 94%;
    }

    #carousel-banner-0, #carousel-banner-1 {
        margin-top: -18px;
    }

    #carousel-banner-0 {
        display: none;
    }

    #carousel-banner-1 {
        display: block;
    }

    #carousel-banner-0.slick-initialized .slick-slide, #carousel-banner-1.slick-initialized .slick-slide {
        height: 490px;
    }

    #carousel-banner-0 .slide-item .slide-info, #carousel-banner-1 .slide-item .slide-info {
        bottom: 70px !important;
    }

    #carousel-banner-0 .slide-item .slide-info .controls .page-counter, #carousel-banner-1 .slide-item .slide-info .controls .page-counter {
        font-size: 0.7em;
        min-width: 35px;
        height: 32px;
        padding: 6px 10px;
    }

    #carousel-banner-0 .slide-item .slide-info .controls .control-button.misc-button, #carousel-banner-1 .slide-item .slide-info .controls .control-button.misc-button {
        font-size: 0.7em;
    }

    #carousel-banner-0 .slide-item .slide-info h1, #carousel-banner-1 .slide-item .slide-info h1 {
        font-size: 2.5em;
    }

    #carousel-banner-0 .slide-item .slide-info .controls .control-button, #carousel-banner-1 .slide-item .slide-info .controls .control-button {
        font-size: 0.7em;
        min-width: 35px;
        height: 32px;
    }

    .intro-container {
        width: calc(100% - 20px);
        margin-top: -15px;
    }

    .home-category-container {
        width: calc(100% - 20px);
    }

    .featured-container {
        margin-top: 5rem;
    }

        .featured-container h1 {
            padding-left: 15px;
        }

    .featured-articles #latestblog {
        margin-top: 35px;
    }

    .featured-articles .featured-article-item {
        width: 100%;
        flex-basis: 100%;
    }

    #latestpost .allblog-elem {
        flex-basis: 100%;
        width: 100%;
        margin-bottom: 0.3rem;
    }

    #latestpost .product-thumb {
        margin-bottom: 5px !important;
    }

    .category-title, .section-title {
        font-size: 1.9em;
    }

    .category-list {
        grid-template-columns: repeat(auto-fill, 48%);
        grid-gap: 0.3%;
    }

    .category-list li .category-name {
        font-size: 0.9em;
        padding: 8px 0;
    }

    .category-list li .category-image img {
        /*max-height: 245px;*/
        aspect-ratio: 1;
    }

        .category-list li .category-name {
            font-size: 1em;
        }

    .newsletter-info {
        width: 100%;
        font-size: 1em;
    }

    .newsletter-container input[type=email] {
        width: calc(100% - 48px);
    }

    #account-account, #account-edit, #account-password, #account-forgotten, #account-reset, #account-address, #information-information, #checkout-cart {
        padding-left: 10px !important;
        padding-right: 10px !important;
        margin-top: 1.5rem !important;
    }

    .information-about {
        padding-left: 0px !important;
        padding-right: 0px !important;
        transform: translateY(-18px);
    }

        .information-about .container {
            width: 92%;
        }

        .information-about .about-flex {
            gap: 20px;
        }

        .information-about .about-flex div {
            width: 100% !important;
        }

        .information-about .about-flex img {
            width: 85% !important;
            margin: 0 auto;
        }

    .info-faq {
        padding: 1.5rem !important;
    }

    .info-details {
        width: 95%;
    }

        .account-content {
            width: 100%;
        }

        .account-content h2 {
            font-size: 1.3em;
        }

        .account-content > .p-5 {
            padding: 1.5rem !important;
        }

        .account-nav {
            margin-top: 15px;
            width: 100%;
        }

        .account-nav #column-right {
            display: block !important;
        }

    .address-list li {
        flex-basis: calc(50% - 15px);
    }

    .search-results-container, .subcat-flex {
        margin-top: 1rem !important;
        padding-top: 0 !important;
    }

    .search-label h1, .search-label p {
        text-align: center;
    }

       .product-search-box {
           width: 100% !important;
       }

        .product-search-box > div {
            justify-content: center !important;
        }

       .product-search-box input[type=text] {
           width: calc(100% - 60px);
       }

       .search-subtitle {
           text-align: center;
       }

    /* CHECKOUT */
    #checkout-cart {
        margin-top: 1rem !important;
    }

    .shopping-cart-title {
        text-align: center;
        font-size: 2.1em;
    }

    #shopping-cart tr {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        width: calc(100vw - 20px);
        border-bottom: 1px solid #d9d9d9;
    }

    #shopping-cart table tr td {
        padding: 10px;
        width: 100% !important;
        text-align: center !important;
        border: none;
    }

    .qty-label {
        display: block !important;
        padding-bottom: 12px;
        text-transform: uppercase;
        font-weight: 600;
        font-size: 0.9em;
        color: #666;
    }

    .total-flex > .ms-auto {
        margin-right: auto;
    }

        .total-flex h5 {
            text-align: center;
        }

        #checkout-cart #checkout-btn {
            flex: initial;
            text-align: center;
        }

    .checkout-grid {
        display: flex;
        flex-direction: column;
    }

        .checkout-details {
            width: 100%;
            order: 2;
            padding-left: 15px;
            padding-right: 15px;
        }

        .checkout-summary {
            position: initial;
            min-height: auto;
            order: 1;
        }

        .checkout-details .checkout-details-pad {
            padding-right: 0;
            padding-top: 1.5rem;
            padding-bottom: 1.5rem;
        }

        .store-data-flex {
            width: calc(100% - 50px);
        }

        .white-header #left-header {
            text-align: left;
            padding-left: 30px;
            padding-top: 3px;
        }

        header.white-header {
            height: 90px;
        }

    .mobile-order-summary {
        display: flex !important;
        flex-wrap: wrap;
        padding: 15px 18px 15px 20px; 
        width: 100vw;
    }

        .mobile-order-summary a {
            color: var(--red-color);
            font-weight: 500;
            font-size: 0.95em;
            z-index: 2;
        }

        .mobile-order-summary > a > i {
            font-size: 0.7em;
            font-weight: 600;
            padding-left: 10px;
        }

        .mobile-order-summary > span {
            font-weight: 700;
            font-size: 1.25em;
            color: #222;
        }

        .confirm-container {
            height: 0;
            overflow: hidden;
            padding: 0;
            transition: height 0.25s ease-in;
        }

            .confirm-container.expanded {
                height: auto;
                padding: 1.2rem 1rem 1.2rem 1rem;
            }

            .confirm-products-img {
                width: 54px;
                height: 54px;
            }

            .confirm-products-img img { height: 54px; }

        #form-coupon input {
            width: 77%;
        }

    /* END CHECKOUT */

    footer  {
        padding-top: 15px;
        padding-left: 15px;
        padding-right: 15px;
    }

    footer ul.footer-items {
        flex-direction: column;
        margin-bottom: 1.5rem;
    }

    footer ul.footer-items.sns {
        flex-direction: row;
    }
    
    footer .col-sm-2, footer .col-sm-3 {
        padding-left: 0 !important;
    }

    .desktop-only {
        display: none;
    }

    .mobile-only {
        display: block;
    }

    .related-flex {
        justify-content: center;
    }

    .left-related {
        width: 100%;
        order: 1;
    }

    .right-related {
        width: 100%;
        order: 0;
        margin-top: 2rem;
        text-align: center;
    }

        .right-related img {
            width: 75% !important;
        }

    .author-flex {
        width: 100%;
        flex-basis: 100%;
        text-align: center;
        margin-bottom: 2rem;
    }

        .author-flex img {
            width: 75% !important;
        }

    .author-content {
        width: 100%;
        flex-basis: 100%;
    }
}