/* phone.css */

/* 小螢幕適配（寬度 ≤ 768px） */
@media (max-width: 768px) {
    /* 頂部導航 */
    .top-nav {
        padding: 0 10px;
        position: relative;
    }

    .logo {
        width: 120px;
        height: 40px;
    }

    .menu-toggle {
        display: block;
    }

    .nav-links {
        flex-direction: column;
        gap: 10px;
        padding:20px;
    }

    .nav-links a {
        display: block;
        padding: 10px 0;
        font-size: 14px;
        text-decoration: none;
    }

    .search-bar {
        padding: 10px 20px;
    }

    .search-bar form {
        display: flex;
        gap: 10px;
    }

    .search-bar input {
        /*width: 100%;*/
        max-width: 290px;
        padding: 6px;
        font-size: 12px;
    }

    .search-bar button {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* 桌面端的 sidebar-left 在手機端隱藏 */
    .desktop-sidebar {
        display: none;
    }

    /* 漢堡選單中的 sidebar-left */
    .mobile-sidebar-placeholder {
        display: block;
    }

    .mobile-sidebar-placeholder .sidebar-left {
        display: block;
        width: 100%;
        margin: 0;
        padding: 10px 20px;
        background: none;
        box-shadow: none;
    }

    .mobile-sidebar-placeholder .category-link {
        padding: 8px;
        font-size: 14px;
        border: none;
        background: #f5f5f5;
        border-radius: 3px;
        color: #333;
        text-decoration: none;
    }

    .mobile-sidebar-placeholder .category-link.active {
        background: none;
        color: #007BFF;
        font-weight: bold;
        text-decoration: none;
    }

    .mobile-sidebar-placeholder .sidebar-left ol li a {
        font-size: 12px;
        color: #555;
        text-decoration: none;
    }

    .mobile-sidebar-placeholder .sidebar-left ol li a.active {
        color: #007BFF;
        font-weight: bold;
        text-decoration: none;
    }

    /* 調整 container，去掉左邊選單後的空間 */
    .container {
        padding: 10px;
    }

    .item-detail-container,
    .product-display,
    .featured-products {
        width: 100%;
    }

    /* 輪播圖 */
    .carousel {
        width: 100%;
        padding: 0;
    }

    .carousel-track {
        width: 100%;
    }

    .carousel-slide img {
        width: 100%;
        height: auto;
        max-height: 200px;
        object-fit: cover;
    }

    .carousel-button {
        padding: 5px 10px;
        font-size: 14px;
    }

    .carousel-nav {
        margin-top: 5px;
    }

    .dot {
        width: 8px;
        height: 8px;
        margin: 0 3px;
    }

    /* 推薦商品 */
    .featured-products {
        padding: 10px;
    }

    .featured-products h2 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .featured-list {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: space-between;
        align-items: center;
    }

    .featured-item {
        flex: 1 1 calc(50% - 10px);
        width: calc(50% - 10px);
        margin: 0;
        padding: 5px;
        text-decoration: none;
        background: none;
        border: none;
        box-shadow: none;
    }

    .featured-item img {
        width: 100%;
        height: 120px;
        object-fit: contain;
        border: none;
        box-shadow: none;
    }

    .featured-item h3 {
        font-size: 12px;
        margin: 3px 0;
        text-decoration: none;
    }

    .featured-item p {
        font-size: 10px;
        color: #666;
        margin: 3px 0;
    }

    .labels {
        display: flex;
        gap: 5px;
        margin-top: 3px;
    }

    .label {
        font-size: 10px;
        padding: 2px 5px;
    }
    /*手機模式置中*/
    .sidebar-left ol li {
        padding-left: 0px;
        margin-bottom: 5px;
    }    

    /* 麵包屑導航 */
    .breadcrumbs {
        font-size: 12px;
        padding: 5px 10px;
        background: #f5f5f5;
        box-shadow: none;
    }

    .breadcrumbs a {
        text-decoration: none;
    }

    /* 商品顯示區域 */
    .product-display {
        width: 100%;
    }

    .products {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 0;
        margin: 0;
    }

    .product-item {
        flex: 1 1 calc(50% - 10px); /* 每行 2 個，考慮間距 */
        width: calc(50% - 10px);
        margin: 0;
        padding: 5px;
        border: none;
        box-shadow: none;
        background: none;
    }

    .product-item img {
        width: 100%;
        height: 120px;
        object-fit: contain;
        border: none;
        box-shadow: none;
    }

    .product-item h3 {
        font-size: 12px;
        margin: 3px 0;
        text-decoration: none;
    }

    .product-item .price {
        font-size: 13px;
        color: #666;
        margin: 3px 0;
    }

    .pagination {
        margin: 10px 0;
        padding: 0;
        background: none;
        box-shadow: none;
    }

    .pagination a {
        padding: 5px 8px;
        font-size: 14px;
        border: none;
        background: none;
        color: #333;
        text-decoration: none;
    }

    .pagination a.disabled {
        color: #ccc;
    }

    .pagination a:hover {
        background: none;
        transform: none;
        color: #007BFF;
    }

    /* 商品詳細容器 */
    .item-detail-container {
        padding: 10px;
    }

    /* 商品詳細區域 */
    .item-detail {
        padding: 10px;
    }

    /* 商品標題 */
    .item-detail h1 {
        font-size: 20px;
        margin-bottom: 15px;
    }

    /* 詳細內容區域 */
    .detail-content {
        flex-direction: column;
        gap: 15px;
    }

    /* 商品圖片 */
    .item-image img {
        max-width: 100%;
    }

    .item-image img {
        width: 100%;
        height: auto;
        max-width: 100%;
        max-height: 250px;
        object-fit: contain;
        border: 1px solid #ddd;
        border-radius: 10px;
    }

    /* 商品資訊 */
    .item-info {
        gap: 8px;
    }

    /* 描述 */
    .description {
        font-size: 14px;
    }

    /* 價格 */
    .price {
        font-size: 16px;
    }

    /* 數量選擇器 */
    .quantity-selector {
        gap: 8px;
    }

    .quantity-btn {
        width: 25px;
        height: 25px;
        font-size: 14px;
    }

    .quantity-input {
        width: 50px;
        height: 25px;
        font-size: 14px;
    }

    /* 操作按鈕區域 */
    .action-buttons {
        gap: 8px;
    }

    .add-to-cart,
    .back-btn {
        padding: 8px 15px;
        font-size: 14px;
        text-align: center;
    }

    /* 頁腳 */
    .footer-content {
        flex-direction: column; /* 手機端垂直排列 */
        align-items: center;
    }

    .footer-contact,
    .footer-menu,
    .footer-copyright {
        flex: 1 1 100%; /* 佔滿寬度 */
        max-width: 100%;
        margin: 0 0 20px 0; /* 增加垂直間距 */
        text-align: center; /* 手機端居中對齊 */
    }

    /* 調整顯示順序 */
    .footer-menu {
        order: 1; /* 網站導航最上方 */
    }

    .footer-contact {
        order: 2; /* 聯絡方式在中間 */
    }

    .footer-copyright {
        order: 3; /* 版權資訊在最下方 */
    }

    .footer-menu ul {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .footer-menu li {
        width:33.33%;
        margin-bottom: 15px;
    }

    .social-icons {
        display: flex;
        justify-content: center;
    }
}

/* 極小螢幕適配（寬度 ≤ 480px） */
@media (max-width: 480px) {
    .carousel-slide img {
        max-height: 150px;
    }

    .featured-item {
        flex: 1 1 calc(50% - 10px);
        width: calc(50% - 10px);
    }

    .featured-item img {
        height: 100px;
    }

    .featured-item h3 {
        font-size: 11px;
    }

    .featured-item p {
        font-size: 9px;
    }

    .label {
        font-size: 9px;
        padding: 1px 3px;
    }

    /* 商品標題 */
    .item-detail h1 {
        font-size: 18px;
    }

    /* 描述 */
    .description {
        font-size: 12px;
    }

    /* 價格 */
    .price {
        font-size: 14px;
    }

    /* 數量選擇器 */
    .quantity-btn {
        width: 20px;
        height: 20px;
        font-size: 12px;
        padding: 0;
    }

    .quantity-input {
        width: 40px;
        height: 20px;
        font-size: 12px;
    }

    /* 操作按鈕 */
    .add-to-cart,
    .back-btn {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* 桌面端適配（寬度 > 768px） */
@media (min-width: 769px) {
    .mobile-sidebar-placeholder {
        display: none;
    }

    .desktop-sidebar {
        display: block;
    }
}