/* Reset 基本樣式 */
body, h1, h2, h3, p, a, ul, li {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #fff; /* 背景設為白色 */
    color: #000; /* 字體顏色設為黑色 */
    line-height: 1.6;
}

.main-nav {
    margin-top: 10px;
    background: #fff; /* 背景白色 */
    padding: 10px;
    text-align: center;
}

.main-nav a {
    color: #000; /* 黑色文字 */
    text-decoration: none;
    margin: 0 15px;
    font-size: 18px;
}

.featured-products {
    max-width: 1140px;
    margin: 20px auto;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.featured-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;/*靠左*/
}

.featured-item {
    flex: 1 1 calc(25% - 20px);
    max-width: calc(25% - 20px);
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px;
    text-align: center;
    padding: 15px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-decoration: none;
    color: #333;
}

.featured-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.featured-item img {
    width: 100%; /* 圖片寬度佔滿容器 */
    height: 200px; /* 自動調整高度 */
    max-height: 200px;/*  限制圖片最大高度 */
    object-fit: contain; /* 保持圖片比例並確保圖片內容完全顯示在容器內 */
    border: 2px solid #eee; /* 輕微邊框增加層次感 */
    border-radius: 10px; /* 圓角效果，讓圖片更柔和 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加陰影效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑過渡效果 */
}

.labels {
    margin-top: 10px;
    display: flex;
    gap: 5px;
    justify-content: center;
}

.label {
    display: inline-block;
    padding: 5px 20px;
    border-radius: 5px;
    font-size: 15px;
    color: #fff;
    background-color: #007BFF;
}

.label.new {
    background-color: #28a745; /* 新品標籤綠色 */
}

.label.sale {
    background-color: #dc3545; /* 特價標籤紅色 */
}

/* 頁腳主容器 */
.footer {
    background-color: #f9f9f9; /* 與 .breadcrumbs 一致的淺灰背景 */
    padding: 40px 20px;
    border-top: 1px solid #ddd;
}

/* 頁腳內容區域，使用 Flexbox 實現左右佈局 */
.footer-content {
    display: flex;
    flex-wrap: wrap; /* 允許內容在小螢幕上換行 */
    justify-content: space-between; /* 左右分佈 */
    max-width: 1440px; /* 與 .container 一致 */
    margin: 0 auto;
}

/* 聯絡資訊區（左邊） */
.footer-contact {
    text-align: left;
    padding: 0 20px;
    max-width: 500px;
    flex: 1 1 40%; /* 佔據約 40% 寬度 */
}

/* 導航選單區（右邊） */
.footer-menu {
    text-align: left;
    padding: 0 20px;
    max-width: 300px;
    flex: 1 1 40%; /* 佔據約 40% 寬度 */
}

/* 聯絡資訊和導航選單的公共樣式 */
.footer-contact h4,
.footer-menu h4 {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #2c3e50; /* 與 .terms-content h2 一致 */
}

.footer-contact p {
    font-size: 17px;
    margin-bottom: 10px;
    color: #333;
}

.footer-contact address {
    font-style: normal;
    font-size: 17px;
    margin-bottom: 20px;
    color: #333;
}

.social-icons a {
    margin-right: 10px;
}

.social-icons img {
    width: 30px;
    height: 30px;
    transition: transform 0.3s ease;
}

.social-icons img:hover {
    transform: scale(1.1); /* 懸停時放大 */
}

.footer-menu ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    list-style: none;
    margin: 5px 0;
    padding: 0;
}

.footer-menu li {
    width:33%;
    margin-bottom: 10px;
}

.footer-menu a {
    text-decoration: none;
    color: #333;
    font-size: 17px;
    transition: color 0.3s ease;
}

.footer-menu a:hover {
    color: #007BFF; /* 與 .breadcrumbs a 一致的藍色 */
}

/* 隱藏 SEO 文案區 */
.footer-seo {
    display: none;
}

/* 頁腳版權資訊 */
.footer-copyright {
    text-align: center;
    margin-top: 30px;
    font-size: 14px;
    color: #999;
    width: 100%; /* 確保版權資訊佔滿寬度 */
}

.footer-copyright p {
    margin: 5px 0;
}

/* 跑馬燈外框 */
.carousel {
    position: relative;/* 設為相對定位，為內部絕對定位元素提供參考 */
    max-width: 1200px;/* 修改此值來增加跑馬燈的寬度 */
    margin: 20px auto;
    overflow: hidden; /* 隱藏超出區域的圖片 */
    border: 2px solid #ddd;
    border-radius: 5px;
}

/* 圖片軌道 */
.carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out; /* 平滑過渡效果 */
}

/* 每張幻燈片 */
.carousel-slide {
    min-width: 100%; /* 每張圖片佔據 100% 的可見區域 */
}

/* 圖片樣式 */
.carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
}

/* 控制按鈕樣式 */
.carousel-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.carousel-button.prev {
    left: 10px;
}

.carousel-button.next {
    right: 10px;
}

/* 圓點導航容器 */
.carousel-nav {
    position: absolute; /* 絕對定位，疊加在圖片上 */
    bottom: 10px; /* 距離圖片底部 10px */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 水平居中對齊調整 */
    z-index: 10; /* 保證在圖片上層顯示 */
}

/* 圓點樣式 */
.dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: rgba(255, 255, 255, 0.7); /* 半透明白色圓點 */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: rgba(0, 0, 0, 0.9); /* 當前頁面圓點為深色 */
}

/* 商品分類區塊 */
.product-categories {
    text-align: center;
    margin: 20px 0;
}

.product-categories ul {
    list-style: none;
    padding: 0;
}

.product-categories li {
    display: inline-block;
    margin: 0 15px;
}

.product-categories a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

.product-categories a:hover {
    color: #333;
}

/* 商品列表 */
.product-list {
    margin: 40px auto;
    max-width: 960px;
    padding: 20px;
    background: #f9f9f9;
    border-radius: 5px;
}

.product-list h2 {
    margin-bottom: 20px;
}

.product-item h3 {
    font-size: 18px;
    margin-bottom: 5px;
    color: #000;
}

.product-item p {
    font-size: 16px;
    color: #888;
}

/* 商品顯示區域樣式 */
.products {
    max-width: 1140px; /* 設定最大寬度，適應桌面顯示 */
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;/* 商品向左對齊 */
    list-style-type: none; /* 去除列表項目的小點 */
    /* gap: 20px; 商品間距 */
    /*margin: 0 auto;  使商品區域居中 */
}

.product-item {
    flex: 1 1 calc(20% - 20px);/* 每個商品寬度為容器的 20% 減去間距 */
    width: calc(20% - 20px); /* 每行顯示 5 個商品 */
    margin: 15px 5px;/* 垂直間距 */
    background: #fff;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);/* 增加陰影讓商品區塊更突出 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;/* 動態效果 */
    margin-bottom: 20px;
}

.product-item:hover {
    transform: translateY(-5px); /* 懸停時向上浮動 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* 懸停時陰影加深 */
}

.product-item img {
    width: 100%; /* 圖片寬度佔滿容器 */
    height: 200px; /* 自動調整高度 */
    max-height: 200px;/*  限制圖片最大高度 */
    object-fit: contain; /* 保持圖片比例並確保圖片內容完全顯示在容器內 */
    border: 2px solid #eee; /* 輕微邊框增加層次感 */
    border-radius: 10px; /* 圓角效果，讓圖片更柔和 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 添加陰影效果 */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* 平滑過渡效果 */
}

.product-item img:hover {
    transform: scale(1.05); /* 滑鼠懸停時放大圖片 */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* 懸停時陰影加強 */
}

/* 商品分類下拉選單 */
.sidebar {
    width: 20%; /* 左側分類選單寬度 */
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.sidebar h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
    text-align: center;
}

/* 主容器：左右布局 */
.container {
    display: flex;
    justify-content: flex-start;
    padding: 20px;
    width: 100%;  /* 確保容器寬度為 100% */
    max-width: 1440px;  /* 設置最大寬度 */
    margin: 0 auto;  /* 水平居中 */
    box-sizing: border-box;  /* 確保 padding 不影響寬度計算 */
}

/* 左側分類選單與產品列表 */
.sidebar-left {
    list-style: none;
    padding: 0;
    margin: 0 40px 0 0;
    background-color: #f9f9f9;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    width: 260px;
    position: static; /* 確保靜態定位，隨著頁面滾動 */
}

/* 選單項目 */
.sidebar-left > li {
    margin-bottom: 10px;/* 子項之間的間距 */
}

/* 分類鏈接 */
.category-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background-color: #ffffff;
    text-decoration: none;
    color: #333;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    padding-left: 20px; /* 增加左邊距離，可以根據需要調整 */
}

/* 滑鼠懸停效果 */
.category-link:hover {
    background-color: #f0f0f0;
}

/* 左側分類選單高亮樣式 */
.category-link.active {
    background-color: #007BFF;
    color: #fff;
    font-weight: bold;
}

/* 當前產品高亮 */
.sidebar-left li a.active {
    background-color: #ffffff;
    color: #000000;
    font-weight: bold;
}

.nav-links a,
.sidebar-left ol li a,
.sidebar-left ol li a.active,
.product-item a {
    text-decoration: none; /* 移除下底線 */
}

/* 子分類顯示樣式 */
.sidebar-left ol {
    list-style: none;
    margin: 0;
    padding: 0 0 0 20px; /* 子分類內縮 */
    display: none; /* 預設隱藏子分類 */
}

/* 展開的子分類 */
.sidebar-left ol.show {
    display: block; /* 顯示子分類 */
}

/* 隱藏子分類（默認） */
.sidebar-left ol {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: none; /* 預設隱藏子分類 */
}

/* 顯示子分類 */
.sidebar-left ol.show {
    display: block;
}

.sidebar-left ol li {
    padding-left: 20px;
    margin-bottom: 5px;
}

.sidebar-left ol li a {
    text-decoration: none;
    color: #555;
}

.sidebar-left ol li a:hover {
    color: #007BFF;
}

.sidebar-left ul {
    padding-left: 30px;
}

.sidebar-left ul li a {
    font-size: 14px;
    color: #666;
}

.sidebar-left ul li a:hover {
    color: #FF6600;
}
/* 顯示次分類 */
.bg-open {
    background: rgba(87, 87, 87, 0.158); /* 淺灰色背景 */
    padding: 4px 6px;
    border-radius: 4px;
}

/* 顯示展開/收起箭頭 */
.sidebar-left ol.show + .category-link b {
    background-image: url('/圖片/arrow-up.png'); /* 顯示箭頭向上 */
}

.sidebar-left ol + .category-link b {
    background-image: url('/圖片/arrow-down.png'); /* 顯示箭頭向下 */
}

/*麵包屑導航 */
.breadcrumbs {
    font-size: 14px;
    color: #666;
    max-width: 1440px;  /* 設置最大寬度 */
    margin: 0 auto;  /* 水平居中 */
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.breadcrumbs a {
    text-decoration: none;
    color: #007BFF;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

/* 分頁樣式 */
.pagination {
    display: flex;
    justify-content: center; /* 居中對齊 */
    align-items: center;
    margin: 20px 0; /* 上下間距 */
    padding: 10px;
    background-color: #f9f9f9; /* 淺灰背景，與網站風格一致 */
    border-radius: 8px; /* 圓角邊框 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 輕微陰影 */
}

/* 分頁連結（上一頁、下一頁、頁碼） */
.pagination a {
    display: inline-block;
    padding: 8px 12px; /* 按鈕內邊距 */
    margin: 0 5px; /* 按鈕間距 */
    text-decoration: none;
    color: #007BFF; /* 藍色文字，與網站高亮色一致 */
    background-color: #fff; /* 白色背景 */
    border: 1px solid #ddd; /* 輕灰色邊框 */
    border-radius: 5px; /* 圓角邊框 */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.1s ease; /* 過渡效果 */
}

/* 滑鼠懸停效果 */
.pagination a:hover {
    background-color: #007BFF; /* 藍色背景 */
    color: #fff; /* 白色文字 */
    transform: translateY(-2px); /* 輕微上移效果 */
}

/* 當前頁碼樣式 */
.pagination .current {
    display: inline-block;
    padding: 8px 12px;
    margin: 0 5px;
    color: #fff; /* 白色文字 */
    background-color: #007BFF; /* 藍色背景 */
    border: 1px solid #007BFF; /* 藍色邊框 */
    border-radius: 5px;
    font-weight: bold; /* 加粗文字 */
}

/* 禁用狀態（例如第一頁的「上一頁」或最後一頁的「下一頁」） */
.pagination a.disabled {
    color: #999; /* 灰色文字 */
    background-color: #f0f0f0; /* 淺灰背景 */
    border: 1px solid #ddd;
    cursor: not-allowed; /* 禁用游標 */
    pointer-events: none; /* 禁止點擊 */
}