.site-header .main-header-menu a {
  display: block !important;
  width: auto !important;
  color: #000 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ✅ 頁首背景改為純白色，不透明 */
.site-header {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  position: sticky;        /* 讓頁首固定在視窗上方 */
  top: 0;                  /* ✅ 修正：應設為 0 才會貼齊最上方 */
  z-index: 9999;           /* 確保在最上層 */
}

/* ✅ 下拉選單背景改為白色 */
.site-header .sub-menu {
  background-color: #ffffff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* 添加一點立體感 */
}

/* ✅ Logo 不要白底（假如圖片是透明 PNG） */
.site-header .custom-logo-link,
.site-header .site-logo,
.site-header img.custom-logo {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  border: none !important;
}

/* ✅ 選單文字為黑色，移除描邊 */
.site-header .main-header-menu a,
.site-header .menu-item a {
  color: #000000 !important;
  text-shadow: none !important;
}
/* ✅ 滑鼠靠近選單連結時變成橘色 */
.site-header .main-header-menu a:hover,
.site-header .menu-item a:hover,
.site-header .main-header-menu a:focus,
.site-header .menu-item a:focus {
  color: orange !important;
}

/* ✅ 當選單項目被點選、處於 active 狀態時也變成橘色 */
.site-header .main-header-menu .current-menu-item > a,
.site-header .menu-item.current-menu-item > a {
  color: orange !important;
}

/* 1. 強制鎖定每列 4 個商品，不論滑到哪都不准變大 */
.ast-woocommerce-container ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

/* 2. 解決圖片變形：強制正方形比例 */
.woocommerce ul.products li.product img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    height: auto !important;
}

/* 3. 強制顯現被隱藏的數字分頁按鈕 */
.woocommerce-pagination {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    clear: both !important;
    padding: 2em 0 !important;
}

/* 4. 隱藏 Jetpack 的「載入更多」按鈕防止干擾 */
#infinite-handle, .infinite-loader {
    display: none !important;
}

/* 限制產品內頁主圖的最大寬度 */
.hp-listing__image img {
    max-width: 500px; /* 你可以根據需求調整像素，例如 400px 或 50% */
    height: auto;
    margin: 0 auto; /* 讓圖片置中 */
    display: block;
}

/* 如果是列表頁面的圖片也太大 */
.hp-listing--view-grid .hp-listing__image {
    height: 200px; /* 固定列表圖片高度 */
    object-fit: contain; /* 確保圖片不被切掉，而是縮放 */
}

/* --- HivePress 卡片美化 --- */
.hp-listing--view-block {
    border: 1px solid #f0f0f0 !important; /* 極淺邊框 */
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important; /* 柔和陰影 */
    overflow: hidden;
    transition: all 0.3s ease;
    background: #ffffff;
}

/* 懸停時增加橘色底線感與浮起 */
.hp-listing--view-block:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(255, 136, 0, 0.15) !important; /* 橘色系投影 */
    border-color: #FF8800 !important; /* 懸停時邊框變橘色 */
}

/* --- 搜尋按鈕與主要按鈕 (橘色系) --- */
.hp-form--listing-search .hp-form__button, 
.button.hp-button--primary,
.hp-button--primary {
    background-color: #FF8800 !important; /* 公司橘 */
    color: #ffffff !important;
    border-radius: 8px !important; 
    padding: 12px 28px !important;
    font-weight: 600 !important;
    border: none !important;
    transition: background 0.3s ease;
}

.hp-form--listing-search .hp-form__button:hover, 
.button.hp-button--primary:hover {
    background-color: #e67a00 !important; /* 懸停時深橘 */
    box-shadow: 0 4px 12px rgba(255, 136, 0, 0.3);
}

/* --- 標籤與分類樣式 (黑橘配) --- */
.hp-listing__category a {
    color: #333333 !important; /* 分類用黑色 */
    font-weight: 500;
    text-decoration: none;
}

.hp-listing__category a:hover {
    color: #FF8800 !important; /* 懸停變橘色 */
}

/* --- 搜尋框優化 --- */
.hp-form--listing-search input {
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
}

/* --- 1. 縮減左側篩選選單寬度 --- */
/* Astra 預設側邊欄寬度通常較大，這裡強制調整比例 */
.hp-template--listings-view-page .hp-page__sidebar {
    flex-basis: 20% !important; /* 從預設的約 25-30% 縮減至 20% */
    max-width: 20% !important;
    padding-right: 30px !important; /* 與右側內容保持適當間距 */
}

/* 調整右側內容區塊自動填滿剩餘空間 */
.hp-template--listings-view-page .hp-page__content {
    flex-basis: 80% !important;
    max-width: 80% !important;
}

/* --- 2. 縮小篩選選單內的字體與間距 --- */
.hp-widget--listing-filter {
    font-size: 0.9rem !important; /* 稍微縮小字體讓視覺更精緻 */
}

/* 縮短「篩選」按鈕的寬度，不要讓它顯得太笨重 */
.hp-widget--listing-filter .hp-form__button {
    width: auto !important;
    padding: 10px 40px !important;
    margin: 0 auto !important;
    display: block !important;
}

/* --- 3. 響應式修正（確保手機版不會被壓縮） --- */
@media screen and (max-width: 992px) {
    .hp-template--listings-view-page .hp-page__sidebar,
    .hp-template--listings-view-page .hp-page__content {
        flex-basis: 100% !important;
        max-width: 100% !important;
        padding-right: 0 !important;
    }
}
.hp-form--listing-search input:focus {
    border-color: #FF8800 !important; /* 點擊時外框變橘色 */
    box-shadow: 0 0 0 2px rgba(255, 136, 0, 0.1);
}

/* --- 側邊欄篩選器標題 --- */
.hp-widget--listing-filter .hp-widget__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a; /* 黑色標題 */
    border-left: 5px solid #FF8800; /* 橘色裝飾線 */
    padding-left: 12px;
}

/* --- 1. 縮小卡片尺寸 --- */
.hp-listings .hp-grid__item {
    flex-basis: calc(30% - 25px) !important; /* 強制一排四個，卡片自然變小 */
    max-width: calc(30% - 20px) !important;
}

.hp-listing--view-block .hp-listing__content {
    padding: 5px !important; /* 減少內距讓卡片更緊湊 */
}

.hp-listing--view-block .hp-listing__title {
    font-size: 1rem !important; /* 縮小標題字體 */
}

/* --- 2. 搜尋列置中且縮短 --- */
.hp-form--listing-search {
    max-width: 600px !important; /* 限制寬度 */
    margin: 0 auto !important;   /* 置中 */
    background: rgba(255, 255, 255, 0.9); /* 半透明白色背景 */
    padding: 10px !important;
    border-radius: 50px !important; /* 膠囊狀 */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
}

/* 移除搜尋列原有的背景與邊框 */
.hp-template--listings-view-page .hp-page__header {
    background: none !important;
    border: none !important;
}

/* --- 搜尋區域背景圖：高度固定，內容上移 --- */
.hp-template--listings-view-page .hp-page__header {
    background-image: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), 
                      url('https://trgreat.com/wp-content/uploads/2026/02/Gemini_Generated_Image_gios80gios80gios.png') !important; 
    background-size: cover !important;
    
    /* 這裡控制圖片內容的位移，將 center 20% 的 20% 往小調會更往上 */
    background-position: center 70% !important; 
    
    padding: 150px 0 !important; 
    margin-left: calc(0%) !important;
    margin-right: calc(-50vw + 50%) !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    margin-top: -80px !important; 
    display: flex !important;
    justify-content: center;
    align-items: center;
}
/* --- 強制全站背景洗白 --- */
body, 
.site, 
#page, 
.ast-separate-container, 
.ast-separate-container #primary, 
.ast-separate-container #secondary,
.hp-page,
#content,
.site-content,
.hp-template--listings-view-page {
    background-color: #ffffff !important;
    background-image: none !important;
}

/* 確保側邊欄篩選區塊也是白色 */
.hp-widget--listing-filter {
    background: #ffffff !important;
}

/* 隱藏 Jetpack AI 聊天區塊 */
.wp-block-jetpack-ai-chat {
    display: none !important;
}