body { 
  margin: 0; 
  font-family: "Noto Sans TC", sans-serif; 
  background: #f6f6f8; 
}

/* ====== Header (單行置中設計) ====== */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center; /* 關鍵：讓內容置中 */
  height: 60px;
  background: #be3242;
  color: #fff;
  /* 移除 position: relative 以避免佔用文檔流空間造成空白 */
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px #0001;
}

/* 導覽列：置中 */
.main-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  /* 確保不會被壓縮 */
  flex-shrink: 0; 
}

.main-nav-btn {
  background: none; border: none; color: #fff; font-size: 1.04em;
  padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: background 0.13s;
  text-decoration: none; display: inline-block;
  white-space: nowrap;
}
.main-nav-btn.active, .main-nav-btn:hover { background: #fff3; color: #fff; font-weight: bold;}

/* 右側：購物車 (絕對定位) */
.cart-btn-wrap {
  display: flex;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  /* 預設針對大螢幕的定位，與 max-width: 1400px 的內容右緣對齊 */
  right: calc((100vw - 1400px)/2 + 20px); 
}

.cart-btn {
  background: none; border: none; cursor: pointer; font-size: 1.45em; color: #fff;
  position: relative; padding: 2px 0 2px 0;
}
.cart-count {
  position: absolute; top: -5px; right: -10px; background: #fff; color: #be3242;
  font-size: 0.88em; border-radius: 99px; min-width: 22px; height: 22px; display: flex;
  align-items: center; justify-content: center; font-weight: bold; border: 2px solid #be3242;
  box-shadow: 0 1px 6px #be32423a;
  pointer-events: none;
}

/* ====== 主內容區 (寬度擴大) ====== */
.main-content { 
  max-width: 1400px;
  margin: 0 auto; 
  padding: 88px 10px 36px 10px;
  min-height: 60vh; 
  box-sizing: border-box;
}
.page-main { display: flex; width: 100%; margin: 0 auto; }
.sidebar {
  min-width: 180px; max-width: 220px; background: #fff;
  border-radius: 10px; box-shadow: 0 2px 10px #0001; margin-right: 22px; padding: 24px 12px;
}
.category-list { display: flex; flex-direction: column; gap: 10px; }
.category-btn {
  padding: 7px 10px; border: none; background: #f2f3f8;
  border-radius: 7px; font-size: 1em; text-align: left;
  color: #333; cursor: pointer;
}
.category-btn.active { background: #f8e1e1; color: #c23; font-weight: bold;}
.product-area { flex: 1; }

/* 搜尋區增加上邊距 */
.search-sort-bar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 20px; margin-top: 15px; 
  gap: 18px;
}
.search-input {
  width: 230px; padding: 7px 12px; border-radius: 7px; border: 1px solid #ccc;
  font-size: 1em; background: #f5f5f5;box-sizing: border-box;
}
.sort-btns { display: flex; gap: 6px; overflow-x: auto; } 
.sort-btn {
  padding: 6px 10px;
  border: none; 
  background: #e4e7ed;
  border-radius: 6px; 
  color: #666; 
  cursor: pointer; 
  font-size: 0.9em; 
  white-space: nowrap;
  flex-shrink: 0;
}
.sort-btn.active { background: #be3242; color: #fff; font-weight: bold;}
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }

/* 商品卡片區塊 */
.product-card {
  background: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 12px #0001;
  padding: 16px;
  display: flex;
  flex-direction: column;
  height: 100%; 
  box-sizing: border-box;
  transition: box-shadow .13s;
  justify-content: space-between; 
}

/* 列表圖片區域 */
.product-img-box {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  position: relative;
  border: 1px solid #f5f5f5;
}

.product-img-box img {
  width: 100%;
  height: 100%;
  object-fit: contain; 
  display: block;
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover {
  box-shadow: 0 6px 28px rgba(190, 50, 66, 0.18);
}
.product-card:hover .product-img-box img {
  transform: scale(1.08);
}

/* 現貨標籤樣式 */
.stock-badge {
  position: absolute; top: 8px; left: 8px;
  background: #28a745; color: #fff;
  font-size: 0.85em; padding: 2px 8px;
  border-radius: 4px; font-weight: bold;
  z-index: 2; box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}

/* 商品標題 */
.product-title {
  font-weight: bold;
  font-size: 1em;
  margin: 0 0 12px 0;
  text-align: center;
  line-height: 1.5em; 
  height: 3.2em;      /* 調整為 3.2em，避免高度過大露出第三行殘影，同時保留 LINE 瀏覽器字尾空間 */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 底部資訊區塊 */
.product-bottom {
    margin-top: auto; 
}

.product-price { color: #be3242; font-size: 1.13em; margin-bottom: 2px; }

.product-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.84em;
  color: #bbb;
  margin-top: 4px;
  text-align: left;
  letter-spacing: 0.5px;
  padding: 0 2px;
}

.product-card .add-cart-btn {
  margin-top: 8px; 
  background: #be3242;
  color: #fff;
  border: none;
  padding: 7px 26px;
  border-radius: 8px;
  font-size: 1em;
  cursor: pointer;
  transition: background .13s;
  width: 100%; 
}
.product-card .add-cart-btn:hover { background: #b12932; }

/* 側欄購物車 */
.cart-sidebar-bg {
  position: fixed; z-index: 99; left: 0; top: 0; width: 100vw; height: 100vh;
  background: #0004; display: none;
  animation: cartFadeIn .22s;
}
@keyframes cartFadeIn { from { opacity: 0;} to {opacity: 1;} }
.cart-sidebar {
  position: fixed; z-index: 100; top: 0; right: -410px; width: 390px; height: 100vh;
  background: #fff; box-shadow: -2px 0 16px #be324223;
  padding: 0 0 12px 0; transition: right 0.25s cubic-bezier(.71,.28,.29,.95);
  display: flex; flex-direction: column;
}
.cart-sidebar.open { right: 0; }
.cart-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #be3242; color: #fff; font-size: 1.15em; padding: 20px 22px;
  font-weight: bold; border-top-left-radius: 0; border-top-right-radius: 0;
}
.cart-sidebar-close {
  font-size: 1.8em; cursor: pointer; font-weight: bold; opacity: 0.9; background: none; border: none; color: #fff;
}
.cart-items-list { flex: 1; overflow-y: auto; padding: 15px 20px 0 22px;}
.cart-empty { text-align: center; color: #888; padding: 48px 0; }
.cart-item {
  display: flex; align-items: center; gap: 14px; margin-bottom: 18px; border-bottom: 1px solid #eee; padding-bottom: 14px;
}
.cart-item-img { width: 56px; height: 56px; border-radius: 7px; object-fit: cover; background: #fafafb;}
.cart-item-info { flex: 1; }
.cart-item-title { font-size: 1.03em; font-weight: bold;}
.cart-item-price { color: #be3242; }
.cart-item-qty {
  display: flex; align-items: center; gap: 7px; margin-top: 5px;
}
.qty-btn {
  width: 28px; height: 28px; background: #f6f6f8; color: #be3242; border: 1.2px solid #ddd;
  border-radius: 7px; font-size: 1.18em; cursor: pointer; font-weight: bold;
}
.cart-item-remove {
  background: none; border: none; color: #999; cursor: pointer; font-size: 1.14em; margin-left: 5px;
}
.cart-sidebar-footer {
  border-top: 1px solid #eee; padding: 13px 22px 0 22px;
}
.cart-total-row {
  display: flex; justify-content: space-between; align-items: center; font-size: 1.12em;
  margin-bottom: 10px;
}
.checkout-btn {
  width: 100%; padding: 11px 0; background: #be3242; color: #fff; font-size: 1.13em;
  border: none; border-radius: 8px; cursor: pointer; font-weight: bold; margin-top: 2px;
  box-shadow: 0 2px 8px #be324211;
}
/* 其他分頁內容 */
.simple-panel {
  background: #fff; border-radius: 12px; box-shadow: 0 2px 12px #0001; padding: 22px 20px;
  max-width: 600px; margin: 0 auto; font-size: 1.07em;
}
.category-select { display: none; }

/* Media Queries */
@media (max-width: 1300px) {
  .main-header { padding-left: 26px; padding-right: 26px; }
  .cart-btn-wrap { right: 26px; }
}
@media (max-width: 950px) {
  .product-grid { grid-template-columns: repeat(3, 1fr);}
  .cart-sidebar { width: 98vw; min-width: 0; max-width: 440px;}
}
@media (max-width: 700px) {
  .main-header {
    justify-content: center; /* Header 容器本身水平置中 */
    padding: 0 10px;
  }
  .cart-btn-wrap {
    right: 12px; /* 手機版購物車靠右距離 */
  }
  
  /* 手機版導覽列：強制佔滿寬度並置中 */
  .main-nav {
    flex: 0 1 auto;
    width: 100%;
    justify-content: center; /* 內容置中 */
    margin-right: 0;
    gap: 6px; /* 稍微縮小間距 */
  }
  
  .main-nav-btn {
    font-size: 0.95em;
    padding: 6px 10px;
  }

  .main-content {
    /* [重要] 縮減上方 padding 以消除空隙 */
    /* Header 60px + 2px 緩衝 = 62px */
    padding-top: 62px; 
  }
  .page-main { flex-direction: column; max-width: 100%; }
  .sidebar { display: none !important; }
  
  .product-area { padding: 0 4px; }
  .product-grid { 
      grid-template-columns: repeat(2, 1fr) !important; 
      gap: 6px; 
  }
  .product-card { padding: 10px; }
  
  .search-sort-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-bottom: 10px;
    margin-top: 10px; /* 增加一點上距避免太貼 Header */
    padding: 0 4px;
  }
  .search-input { width: 100%; margin-bottom: 0; }
  .category-select { display: block; width: 100%; font-size: 1.1em; border-radius: 7px; padding: 7px 12px; border: 1px solid #ccc; margin: 0 0 6px 0; background: #fff;}
  .sort-btns { justify-content: flex-start; margin-bottom: 8px;}
}

@media (max-width: 480px) {
  .product-grid { grid-template-columns: repeat(2, 1fr) !important;}
  .sidebar { padding: 10px 5px; }
}
@media (max-width: 700px) {
  .category-select { display: block; }
}
/* ====== 商品大圖左右切換箭頭 ====== */
.bigimg-arrow-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: none;
  transition: box-shadow .15s, transform .13s;
}
.bigimg-arrow-btn:hover svg {
  filter: drop-shadow(0 2px 10px #be324280) brightness(1.09);
  transform: scale(1.13);
  transition: .16s;
}
.bigimg-arrow-btn svg {
  transition: .16s;
}
.member-panel { position: relative; }

.logout-btn.top-logout {
  position: absolute;
  right: 18px;
  top: 18px;
  background: #aaa;
  color: #fff;
  padding: 8px 18px;
  border-radius: 7px;
  font-weight: bold;
  z-index: 2;
}
.cart-item-price-remove {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.cart-item-remove {
  padding: 4px 20px;
  background: #fff0f2;
  border: 1.6px solid #be3242;
  color: #be3242;
  border-radius: 8px;
  font-size: 1em;
  cursor: pointer;
  font-weight: bold;
  transition: background .15s, color .15s, border .15s;
}
.cart-item-remove:hover {
  background: #be3242;
  color: #fff;
  border: 1.6px solid #be3242;
}