﻿#mobile-navigation {
    display: none;
}


@media only screen and (max-width: 767px) {

    #mobile-navigation {
        display: block;
    }

    #astrum_header_cart,
    #responsive,
    .search-container {
        display: none;
    }

    .container .columns.nav-menu-container {
        width: 98%
    }
    #content-wrapper {
        padding-top: 79px;
        padding: 0 0 40px 0;
        background-color: #fff;
        padding-top: 79px; /* 給內容區域添加 padding，確保不被 header 擋住 */
    }
    #header {
        z-index: 999; /* 確保 header 顯示在其他元素之上 */
        background-color: #fff; /* 背景顏色 */
        height: 79px; /* 設定 header 高度 */
        margin-top: 0; /* 預設 top margin */
        position: fixed; /* 固定在視窗上 */
        top: 0; /* 固定在頂部 */
        left: 0; /* 左對齊 */
        width: 100%; /* 寬度 100% */
    }

    body {
        padding-top: 0;
    }

    #header-full #logo,
    #header #logo {
        width: 124px;
        /*  left: 0;
			right: 0;
			position: absolute; */
        margin: 0 auto;
        text-align: center;
        margin-top: 21px;
        z-index: 99;
        float: none;
    }

    #blogdesc {
        display: none;
    }

    #logo img {
        max-height: 51px;
        width: auto;
    }

    #header-full #contact-details {
        float: left;
        margin-top: 0px;
    }

        #header-full #contact-details ul {
            margin-left: 0px
        }

    a.menu-trigger {
        color: #a0a0a0;
        display: block;
        font-size: 28px;
        float: left;
        background: #fff;
        z-index: 100;
        position: relative;
    }

    .search-trigger {
        color: #a0a0a0;
        display: block;
        font-size: 28px;
        float: right;
        cursor: pointer;
        background: #fff;
        z-index: 100;
        position: relative;
    }

    #menu-search {
        display: none;
    }

        #menu-search input {
            float: left;
            box-shadow: none;
            border: 0;
            font-size: 16px;
            color: #aaa;
            width: 50%;
            padding: 27px 0 23px 0;
        }

    a.menu-trigger,
    .search-trigger {
        padding: 25px 30px;
    }

    a.menu-trigger {
        padding-left: 0;
    }

    .search-trigger {
        padding-right: 0;
    }

    #menu-search input:focus {
        color: #888;
    }

    #menu-search input::-webkit-input-placeholder {
        color: #a0a0a0;
        opacity: 1;
    }

    #menu-search input::-moz-placeholder {
        color: #a0a0a0;
        opacity: 1;
    }

    #menu-search input:-ms-input-placeholder {
        color: #a0a0a0;
        opacity: 1;
    }

    #menu-search input:focus::-webkit-input-placeholder {
        color: #888;
        opacity: 1;
    }

    #menu-search input:focus::-moz-placeholder {
        color: #888;
        opacity: 1;
    }

    #menu-search input:focus:-ms-input-placeholder {
        color: #888;
        opacity: 1;
    }

    .jPanelMenu-panel {
        -webkit-box-shadow: 3px 0 20px 0 rgba(0, 0, 0, 0.28);
        box-shadow: 3px 0 20px 0 rgba(0, 0, 0, 0.28);
    }
    #responsive {
        position: fixed; /* 固定在螢幕上 */
        top: 79px;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.8); /* 半透明背景 */
        color: white;
        z-index: 9999; /* 顯示在最上層 */
        display: none; /* 預設隱藏 */
    }
    .iconhidden {
        display: none;
    }
}



