/* PC專用調整：僅大於等於 992px 時套用 */
@media (min-width: 992px) {

  /* 搜索區塊靠右，向上偏移 */
  #searchCart {
    margin-left: auto;
    transform: translateY(-16px);
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
  }

  #searchCart .compact-search-bar {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
  }

  /* LOGO 向下偏移 */
  #siteLogo {
    transform: translateY(24px);
  }
}

:root {
    --theme-color-0: #C2B280;  /* 主色调金色 */
    --theme-color-00: #D1A7D5; /* 柔和绿色 */
    --theme-color-1: #A3B8D3;  /* 柔和蓝色 */
    --theme-color-2: #121212;  /* 深灰色 */
    --theme-color-3: #f2f2f2;  /* 背景灰色 */
    --bg-white: #ffffff;       /* 白色 */
    --bg-black: #111111;       /* 深色背景 */
    --font-color: #444444;     /* 正文字体颜色 - 略加深 */
    --heading-color: #2A2A2A;  /* 标题颜色 - 略加深 */
    --font-white: #ffffff;     /* 白色 */
    --font-black: #000000;     /* 黑色 */

/* 扩展配色（用于不同语义与层级） */
  --font-color-1: #2A2A2A;     /* 主标题、重要说明（较深） */
  --font-color-2: #5E5E7E;   /* 副标题、引导文（灰紫调，柔和） */
  --font-color-3: #777777;       /* 说明文字、辅助信息 */
  --font-color-4: #AAAAAA;       /* 非重要提示、标签、时间等 */

  --font-color-accent: var(--theme-color-4);  /* 珊瑚粉色高亮，如关键词、价格 */
  --font-color-link: var(--theme-color-5);    /* 链接色：暖橙色，易识别 */
  --font-color-info: var(--theme-color-1);    /* 蓝色信息提示，温和 */
  --font-color-success: var(--theme-color-6); /* 绿色：成功类信息提示 */
  --font-color-warning: var(--theme-color-8); /* 番茄红：警示类信息 */
  --font-color-brand: var(--theme-color-7);   /* 品牌色或特殊点缀（紫） */

  --font-color-white: var(--font-white);      /* 白字：深色背景上使用 */
  --font-color-black: var(--font-black);      /* 黑字：浅色背景上使用 */
  
    /* 扩展颜色 */
    --theme-color-4: #A64D79;  /* 珊瑚粉色 */
    --theme-color-5: #FF8C00;  /* 暖橙色 */
    --theme-color-6: #3CB371;  /* 海洋绿 */
    --theme-color-7: #9B59B6;  /* 紫罗兰色 */
    --theme-color-8: #FF6347;  /* 番茄红 */
    --theme-color-9: #1E90FF;  /* 道奇蓝 */
    
    
    /* 按钮边框和背景色 */
    --button-primary-bg: var(--theme-color-5);  /* 按钮背景：暖橙色 */
    --button-secondary-bg: var(--theme-color-1); /* 按钮背景：柔和蓝色 */
    --button-outline-bg: transparent; /* 边框按钮透明背景 */
    --button-outline-border: var(--theme-color-5); /* 边框颜色：暖橙色 */
    --button-outline-color: var(--theme-color-5); /* 边框按钮字体颜色 */
    
  --font-color-accent1: #FCEFD9;         /* 柔和米白字 */
  --block-bg-light: #D8E3F2;            /* 主色浅版，作内容区背景 */
  --block-bg-accent: #EBD4E8;           /* 淡紫粉，用于强调区域 */
  --box-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.05); /* 柔光阴影 */
    
    
--heading-color: #2A2A2A;
  --line-green: #00c300;
  --line-green-hover: #009900;  
  --card-border: #e0e6ed;
  --card-shadow: 0 2px 6px rgba(0,0,0,0.06);
  --card-radius: 8px;
  --btn-radius: 6px;
  
  --bg-light: #f9f9f9;
  --card-radius: 12px;
  --max-width: 1320px; /* 新的最大宽度 */
  
  }

    body {
      background-color: var(--bg-white);
      margin: 0;
      padding: 0;
      font-size: 17px;
      line-height: 25px;
      font-family: 'CenturyGothic-Regular', sans-serif;
      font-weight: normal;
      color: var(--font-color);
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 999;
      background: white;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    }



    .container-1320 {
      max-width: 1320px;
      margin: 0 auto;
      padding: 0 10px;
    }

.top-bar {
 border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 8px 0;
  color: var(--bs-primary-text-emphasis);
      
      
    }

    .top-bar .slogan i {
      margin-right: 6px;
    }

    .top-bar .line-service {
    }

    .top-bar .promo {
      font-weight: bold;
    }

    .lang-dropdown .dropdown-toggle {
      background: transparent;
      border: none;
    color:var(--bs-primary-text-emphasis);
          font-size: 15px;
      padding: 0;
    }

    .middle-bar {
      padding: 12px 0;
      border-bottom: 1px solid #eee;
      background-color: white;
    }

    .middle-bar .logo img {
    }

    .main-nav {
      display: flex;
      justify-content: center;
      white-space: nowrap;
      position: relative;
      overflow-x: visible;
    }

    .navbar-nav {
      display: flex !important;
      flex-direction: row !important;
      flex-wrap: nowrap;
      white-space: nowrap;
      width: max-content;
      margin: 0;
      padding: 0;
    }

    .nav-item {
      white-space: nowrap;
    }

    .nav-link {
      display: block;
      padding: 12px 12px;
      color: var(--theme-color-2);
      font-weight: bold;
    }

    .nav-item:hover > .nav-link {
      background-color: var(--theme-color-00);
    }

    .dropdown-menu {
      position: absolute;
      background-color: #fff;
      z-index: 9999;
    }

    .dropdown-menu a {
      color: var(--theme-color-2);
      padding: 8px 16px;
    }

    .search-cart {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .search-input {
      padding: 6px 12px;
      border: 1px solid #ccc;
      border-radius: 6px;
    }

    .search-btn {
      background-color: var(--theme-color-0);
      border: none;
      padding: 6px 10px;
      color: white;
      border-radius: 6px;
    }

    .cart-icon {
      font-size: 20px;
      color: var(--theme-color-2);
    }

  .pc-cart-icon {
  display: inline-block;
  line-height: 1;
}  


.search-type {
  width: 120px !important;  /* 或使用 max-width: 80px; 依需求調整 */
  min-width: unset;
  font-size: 0.875rem;
}
.search-input{
  width: 150px !important;  /* 或使用 max-width: 80px; 依需求調整 */
  min-width: unset;
  font-size: 0.875rem;
}


/* Search cart icon */
.search-cart-icon {
  font-size: 57px;
  line-height: 1;
  margin-left: 5px;
  color: var(--theme-color-3);
  background-color: var(--theme-color-1);
}

/* 調整 search-type 寬度 */
#search-type {
  width: 80px;
}

/* 對齊調整 */
.line-service {
  margin-right: auto;
  font-size:15px;
  color:var(--bs-primary-text-emphasis);

}

.top-bar .lang-dropdown {
  margin-left: auto;
    font-size:16px;

}


/* 遮罩層 */
.mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 998;
}

/* 搜尋欄浮動樣式（手機） */
#searchCart.floating {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 999;
  background: white;
  width: calc(100% - 40px);
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  animation: fadeIn 0.3s ease-in-out;
}

/* 動畫 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}


/* PC版搜尋區的購物車按鈕樣式 */
.pc-cart-btn {
  margin-left: 5px;
  color: var(--theme-color-3);
  background-color: var(--theme-color-1);
  border: none;
  font-size: 18px;
  border-radius: 6px;
  padding: 6px 10px;
}

/* 浮動效果 + 動畫（適用搜尋或主選單） */
.floating {
  position: fixed;
  top: 60px;
  left: 0;
  width: 100vw;
  background-color: white;
  z-index: 9999;
  animation: fadeIn 0.3s ease-in-out;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 淡入動畫 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



 @media (max-width: 991.98px) {
 
.top-bar,
.middle-bar {
text-align: center;
flex-direction: column !important;
}
      .top-bar{
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  font-size: 14px;
  color: var(--bs-primary-text-emphasis);

      }
      .search-cart {
        flex-direction: column;
        align-items: stretch;
        margin-top: 10px;
      }

 
 
 
    .middle-bar {
      flex-wrap: nowrap !important;
      padding:2px 0;
    }

    .search-cart {
      flex-wrap: nowrap;
      white-space: nowrap;
    }

    .search-input {
      width: 150px;
      font-size: 16px;
    }

    .search-btn {
      padding: 6px 10px;
    }

    .cart-icon {
      font-size: 28px;
      color: #000;
    }

    .menu-toggle {
      background: none;
      border: none;
      font-size: 28px;
      color: #000;
    }

    .main-nav {
      width: 100%;
      margin-top: 10px;
    }

  #mainNav {
    width: 100%;
  }

  #mainNav .navbar-nav {
    display: block !important;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  #mainNav .nav-item {
    display: block !important;   /* ✅ 每個 li 為區塊元素 */
    width: 100%;
    border-bottom: 1px solid #eee;
  }

  #mainNav .nav-link {
    display: block !important;
    padding: 12px 16px;
    width: 100%;
  }

  #mainNav .dropdown-menu {
    position: static;
    display: none;
    background: #fff;
    box-shadow: none;
    padding: 0;
  }

  #mainNav .nav-item.dropdown:hover .dropdown-menu,
  #mainNav .nav-item.dropdown:focus-within .dropdown-menu {
    display: block;
  }
  #mainNav .nav-link {
    text-align: left;
    position: relative;
    padding-left: 2.2em;
    font-weight: 500;
  }

  #mainNav .nav-link::before {
    content: "\f054"; /* FontAwesome fa-angle-right */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0.9em;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-color-0);
    font-size: 0.8em;
  }

  #mainNav .nav-item {
    border-bottom: 1px solid #e2e2e2;
    background-color: #fff;
  }
  #mainNav .dropdown-menu {
    display: none !important;
    background-color: #fafafa;
    padding-left: 1.5em;
  }

  #mainNav .dropdown.show .dropdown-menu {
    display: block !important;
  }

  #mainNav .dropdown-menu .nav-link::before {
    content: "\f105"; /* fa-angle-double-right */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 8px;
    color: var(--theme-color-1);
  }

  #mainNav .dropdown-menu .nav-link {
    padding: 10px 10px 10px 1.5em;
    font-size: 0.95em;
  }
  #mainNav .nav-link {
    position: relative;
    padding-right: 2.5em; /* 預留右側空間 */
  }

  #mainNav .nav-link::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    right: 1em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
  }

  /* 若是 dropdown-toggle，讓箭頭向下 */
  #mainNav .dropdown-toggle::after {
  }
  
  
  #mainNav .dropdown-menu {
    position: static !important; /* 不要絕對定位 */
    float: none;
    background-color: transparent;
    border: none;
    padding-left: 1.5em;
    padding-bottom: 0.5em;
    margin-top: 0.3em;
    display: none;
  }

  #mainNav .dropdown-menu.show {
    display: block !important; /* 顯示展開項目 */
  }

  #mainNav .dropdown-menu .nav-link {
    padding-left: 1.5em;
    font-size: 0.95em;
    color: var(--bs-primary-text-emphasis);
  }
  .main-nav .dropdown-menu {
    display: none !important;
    position: static !important;
    padding-left: 1rem;
    margin-top: 0.5rem;
    background-color: transparent;
    border: none;
    box-shadow: none;
  }

  .main-nav .dropdown-menu.show {
    display: block !important;
  }

  .main-nav .dropdown-toggle::after {
    float: right;
    margin-left: 5px;
  }
  .main-nav .nav-link {
    color: var(--theme-color-2); /* 主文字色 */
    padding: 0.75rem 1rem;
    display: block;
    font-weight: 600;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    transition: background-color 0.3s, transform 0.1s ease;
    position: relative;
  }

  .main-nav .nav-link:hover,
  .main-nav .nav-link:focus {
    background-color: var(--font-color-brand);
    color: #fff;
  }

  .main-nav .nav-link:active {
    transform: scale(0.98);
    background-color: var(--theme-color-0);
  }
  .main-nav .nav-item .dropdown-toggle.show {
    background-color: var(--theme-color-2) !important;
    color: #fff !important;
  }
}

/* 👉 手機（小於 LG）情況，dropdown-menu 全寬展開 */
@media (max-width: 991.98px) {
  .main-nav .dropdown-menu {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    box-shadow: none;
    background-color: var(--theme-color-0);
    margin-top: 0;
  }
}

/* 👉 桌機（大於 LG）情況，保持 Bootstrap 原有樣式 */
@media (min-width: 992px) {
  .main-nav .dropdown-menu {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    z-index: 1000;
    float: left;
    min-width: 10rem;
    padding: .5rem 0;
    margin: 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.175);
  }

  .main-nav .dropdown:hover .dropdown-menu {
    display: block;
  }
}



.right-area {
  justify-content: flex-end;
  flex-shrink: 0;
  gap: 12px;
}
/****************************************/
/****************************************/


/* Pro02-1 新增：圖片固定高度並保持比例 */
.pro02-1-section {
  padding: 20px 20px;
  background: var(--bg-white);
}
.pro02-1-container {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.pro02-1-card {
  display: flex;
  width: calc(50% - 12px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.08);
  overflow: hidden;
  transition: transform 0.3s ease;
  position: relative;
}
.pro02-1-card:hover {
  transform: translateY(-4px);
}
.pro02-1-image {
  flex: 0 0 267px;
  height: 200px;
  overflow: hidden;
  position: relative;
}
.pro02-1-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 使用 Pro01 風格的圖片左上角浮標 */
.pro02-1-tags-overlay {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 2;
}
.pro02-1-tag-overlay {
  color: #fff;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 8px;
  white-space: nowrap;
}

/* Pro01風格：產品功能標籤（圖片下方） */
.pro02-1-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pro02-1-tag {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 9px;
  white-space: nowrap;
}
.pro02-1-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.pro02-1-toprow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.pro02-1-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--theme-color-1);
  text-align: right;
}
.pro02-1-price .price-hk,.pro02-1-price .price-nt {
  margin-left: 12px;
  font-size: 0.9rem;
  color: #888;
}
.pro02-1-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 8px;
}
.pro02-1-desc {
  font-size: 0.9rem;
  color: var(--font-color);
  line-height: 1.4;
  margin-bottom: 16px;
}
.pro02-1-actions a {
  display: inline-block;
  padding: 6px 14px;
  font-size: 0.85rem;
  margin-right: 8px;
  border-radius: 6px;
  text-decoration: none;
  background: var(--theme-color-1);
  color: #fff;
  transition: background 0.2s ease;
}
.pro02-1-actions a.hk {
  background: #888;
}
.pro02-1-actions a:hover {
  opacity: 0.9;
}
.pro02-1-actions .btn-buy.tw {
  background-color: var(--theme-color-1);
  color: white;
}

.pro02-1-actions .btn-buy.hk {
  background-color: #eee;
  color: #333;
}


/* 手機端 RWD */
@media (max-width: 768px) {
  .pro02-1-card {
    flex-direction: column;
    width: 100%;
  }
  .pro02-1-image {
    width: 100%;
    height: 200px;
  }
  .pro02-1-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/****************************************/
/****************************************/
/************************************************/
.cat-tabs-01-header {
  padding: 4px 12px 14px 12px;
  background-color: var(--bg-white);
	margin-top: 5px;
}

.cat-tabs-01-tab-header {
 display: flex;
  flex-wrap: wrap;
  justify-content: center; /* ⭐ 关键：按钮居中 */
  gap: 12px;
  margin-bottom: 5px;
}

.cat-tabs-01-tab-btn {
  padding: 10px 16px;
  background-color: var(--theme-color-3);
  color: var(--heading-color);
  border: none;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s;
}

.cat-tabs-01-tab-btn.active {
  background-color: var(--theme-color-1);
  color: var(--font-white);
}

.cat-tabs-01-content {
  display: none;
  padding: 20px 12px;
  background-color: var(--bg-white);
  animation: fadeIn 0.3s ease-in-out;
}

.cat-tabs-01-content.active {
  display: block;
}

.cat-tabs-01-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

@media (max-width: 768px) {
  .cat-tabs-01-grid {
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .recommend-card {
    min-width: 80%;
    flex: 0 0 auto;
  }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/************************************************/
.pro02-2-container {
 max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.pro02-2-card {
  width: calc(33.333% - 13.333px);
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  position: relative;
}

.pro02-2-image-wrapper {
  position: relative;
  width: 100%;
  height: 220px;
  overflow: hidden;
}

.pro02-2-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pro02-2-tags-overlay {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 6px;
  z-index: 2;
}

.pro02-2-tag-overlay {
  background-color: var(--theme-color-1);
  color: white;
  font-size: 0.7rem;
  padding: 2px 8px;
  border-radius: 6px;
}

.pro02-2-actions {
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  z-index: 3;
}

.pro02-2-actions a {
  flex: 1;
  padding: 5px 10px;
  font-size: 0.8rem;
  border-radius: 6px;
  text-align: center;
  text-decoration: none;
  transition: 0.2s ease;
}

.pro02-2-actions .btn-buy.tw {
  background-color: var(--theme-color-1);
  color: #fff;
}

.pro02-2-actions .btn-buy.hk {
  background-color: #eee;
  color: #333;
}

.pro02-2-actions a:hover {
  opacity: 0.9;
}

.pro02-2-content {
  flex: 1;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pro02-2-toprow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.pro02-2-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pro02-2-tag {
  font-size: 0.75rem;
  padding: 3px 10px;
  border-radius: 9px;
  white-space: nowrap;
  background: #f0f0f0;
}

.pro02-2-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--theme-color-1);
  text-align: right;
}
.pro02-2-price .price-hk,
.pro02-2-price .price-nt {
  margin-left: 12px;
  font-size: 0.9rem;
  color: #888;
}

.pro02-2-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 8px;
}

.pro02-2-desc {
  font-size: 0.9rem;
  color: var(--font-color);
  line-height: 1.4;
  margin-bottom: 16px;
}

/* RWD */
@media (max-width: 1024px) {
  .pro02-2-card {
    width: calc(50% - 10px);
  }
}
@media (max-width: 768px) {
.pro02-2-container {
 max-width: 100%;
  padding:1px 20px!important;
}
  .pro02-2-card {
    width: 100%;
  }
  .pro02-2-image-wrapper {
    height: 200px;
  }
  .pro02-2-actions a {
    font-size: 0.75rem;
    padding: 5px 6px;
  }
  .pro02-3-image{
	 max-width: 100%;
	flex: 0 0 100px;
	}
}

/*************************************/
/*************************************/
/*************************************/
.pro02-3-section {
  padding: 30px 20px;
  background: var(--bg-white);
}

.pro02-3-container {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pro02-3-card {
  width: calc(33.333% - 13.333px);
  display: flex;
  flex-direction: row;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease;
  position: relative; /* ⬅️ 为定位按钮做准备 */
}

.pro02-3-card:hover {
  transform: translateY(-4px);
}

.pro02-3-image {
  flex: 0 0 200px;
  height: 160px;
  overflow: hidden;
  position: relative; /* ⬅️ 为按钮定位准备 */
   margin:15px auto auto 15px;
}

.pro02-3-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ✅ actions移动到图片下方叠加 */
.pro02-3-actions {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 6px 0px;
  background: rgba(0, 0, 0, 0.35); /* 半透明背景 */
  display: flex;
  justify-content: center;
  gap: 2px;
  z-index: 2;
}

.pro02-3-tag-overlay {
  color: white;
  font-size: 0.7rem;
  padding: 2px 4px;
  border-radius: 4px;
	
	
}
/* ✅ 缩小按钮尺寸 */
.pro02-3-actions a {
  padding: 4px 5px;
  font-size: 0.75rem;
  border-radius: 4px;
  text-decoration: none;
  background: var(--theme-color-1);
  color: #fff;
  white-space: nowrap;
  transition: background 0.2s ease;
}

.pro02-3-actions a.hk {
  background: #888;
}

.pro02-3-actions a:hover {
  opacity: 0.9;
}

.pro02-3-content {
  flex: 1;
  padding: 22px 22px 22px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.pro02-3-tags {
  margin-bottom: 1px;
}

.pro02-3-tag {
  display: inline-block;
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 8px;
  margin-right: 6px;
}

.pro02-3-tag.tag-1 {
}

.pro02-3-tag.tag-3 {
  background: #b24592;
}

.pro02-3-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制顯示3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro02-3-desc {
  font-size: 0.9rem;
  color: var(--font-color);
  line-height: 1.3;
  margin-bottom: 10px;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制顯示3行 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pro02-3-price {
  font-size: 1rem;
  font-weight: 600;
  color: var(--theme-color-1);
  margin-bottom: 10px;
}

.pro02-3-price .price-hk {
  margin-left: 12px;
  font-size: 0.9rem;
  color: #888;
}

/* ✅ 响应式适配 */
@media (max-width: 768px) {
  .pro02-3-card {
    flex-direction: column;
    width: 100%;
  }

  .pro02-3-image {
    width: 100%;
    height: 160px;
  }

  .pro02-3-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .pro02-3-actions {
    justify-content: center;
    flex-wrap: wrap;
  }
}

/********************************/


#main_nav{
margin-top:0px
}
.suspension {
	bottom: 50px;
	height: 200px;
	position: fixed;
	right: 10px;
	width: 46px;
	z-index: 1801;

	padding:10px;
}

.suspension .consult {
	background-color: #e7492e;
	background-image: url(/shopcss/image/top-icon.png);
	background-position: center -1px;
	background-repeat: no-repeat;
	display: block;
	height: 46px;
	position: relative;
	width: 46px;
	z-index: 34;
}

.suspension .consult .suspension-list {
	display: none;
	position: absolute;
	right: -40px;
	top: -236px;
	width: 240px;
	z-index: 1 !important;
}

.suspension-list-content {
	background: #fff;
	border: 1px solid #ddd;
	box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .15);
	position: absolute;
	right: 85px;
	width: 240px;
	z-index: 31;
}

.suspension-list ul {
	margin: 32px 24px;
}

.suspension-list ul li {
	border-top: 1px solid #f4f4f4;
	display: list-item;
	height: auto;
	margin-top: 10px;
	overflow: hidden;
	padding: 16px 0;
	position: relative;
	width: 100%;
}

.suspension-list ul li:first-child {
	border-top: none;
	margin-top: 0;
	padding-top: 0;
}

.suspension-list ul .suspension-list-bottom {
	margin-bottom: 0;
	padding-bottom: 0;
}

.suspension-list-bottom .info-value {
	color: #999;
	font-size: 14px;
	font-weight: inherit;
}

.service-phone, .service-qq, .service-proposal {
	background-position: 0 0;
	background-repeat: no-repeat;
	display: inline-block;
	height: 100%;
	width: 100%;
}

.service-phone {
	background-image: url(/shopcss/image/suspend_icon_01.png);
}

.service-phone:hover {
	background-image: url(/shopcss/image/suspend_icon_01_blue.png);
}

.service-qq {
	background-image: url(/shopcss/image/suspend_icon_03.png);
}

.service-qq:hover {
	background-image: url(/shopcss/image/suspend_icon_03_blue.png);
}

.service-proposal {
	background-image: url(/shopcss/image/suspend_icon_02.png);
}

.service-proposal:hover {
	background-image: url(/shopcss/image/suspend_icon_02_blue.png);
}

.info-name {
	color: #333;
	display: block;
	font-size: 14px;
	height: 14px;
	padding-left: 52px;
}

.info-value {
	color: #DEDEDE;
	display: block;
	font-size: 18px;
	font-weight: 700;
	height: 18px;
	margin-top: 8px;
	padding-left: 52px;
}

.suspension a.consult:hover .suspension-list {
	display: inline !important;
}

.suspension .cart {
	background-image: url(/shopcss/image/float-2.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	border: 0 solid #bcbcbc;
	display: block;
	height: 46px;
	margin-top: 10px;
	position: relative;
	width: 46px;
}

.suspension a.cart:hover .pic {
	display: block;
}

.suspension .back-top {
	-moz-transition: all 0 ease-in-out;
	-o-transition: all 0 ease-in-out;
	-webkit-transition: all 0 ease-in-out;
	background-color: #fff;
	background-image: url(/shopcss/image/top-icon.png);
	background-position: center bottom;
	background-repeat: no-repeat;
	border: 1px solid #bcbcbc;
	display: block;
	height: 46px;
	margin-top: 10px;
	transition: all 0 ease-in-out;
	width: 46px;
}

.suspension .cart .pic {
	background-color: #fff;
	display: none;
	height: 183px;
	left: -163px;
	position: absolute;
	top: -120px;
	width: 183px;
	padding:10px;
	background-color:white;
}

.pic-content {
	
	border: 1px solid #ddd;
	box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .15);
	height: 163px;
	position: absolute;
	
	width: 163px;
}

.pic-content1 {
	
	border: 1px solid #ddd;
	box-shadow: 0 6px 12px 0 rgba(0, 0, 0, .15);
	height: 163px;
	position: absolute;
	width: 163px;
}


/****************************************/