/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


/* === 讓分類按鈕平均分配整個版面（Flatsome + WooCommerce）=== */

/* A. 先把「左區塊」撐成 100% 寬，避免右側排序擠壓 */
.category-filtering .row > div:first-child {
  order: 1 !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* B. 右側排序（若存在）丟到下一行；不需要可直接 display:none */
.category-filtering .row > div:last-child {
  order: 2 !important;
  flex: 0 0 100% !important;
  max-width: 100% !important;
  margin-top: 10px !important;
  display: flex !important;
  justify-content: flex-end;  /* 需要置中就改成 center */
}
/* 完全不要排序/結果就開這段： */
/*
.woocommerce-ordering, .woocommerce-result-count {
  display: none !important;
}
*/

/* C. 讓「左區塊裡包著按鈕的那層」變成 Flex 容器，允許換行並使用 gap */
.category-filtering .row > div:first-child,
.category-filtering .row > div:first-child > *,
.category-filtering .row > div:first-child > * > * {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 14px !important;              /* 按鈕之間的間距 */
}

/* D. 把按鈕改成「等寬伸展」，自動平均分配整行寬度 */
.category-filtering .row > div:first-child a,
.category-filtering .row > div:first-child .rl-cat.btn,
.category-filtering .row > div:first-child .button,
.category-filtering .row > div:first-child > * > a,
.category-filtering .row > div:first-child > * > .rl-cat.btn,
.category-filtering .row > div:first-child > * > .button {
  flex: 1 1 0 !important;           /* 每顆按鈕可等分伸展 */
  min-width: 140px !important;      /* 太窄時就自動換行，可調 */
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: auto !important;
  margin: 0 !important;             /* 清掉主題預設左右 margin，改用 gap 控制 */
}

/* E. 小尺寸裝置時可調整最小寬度，避免擠壓 */
@media (max-width: 640px) {
  .category-filtering .row > div:first-child a,
  .category-filtering .row > div:first-child .rl-cat.btn,
  .category-filtering .row > div:first-child .button {
    min-width: 120px !important;
  }
}


/* 讓 rl-catbar 內的按鈕平均分配整個寬度 */
.rl-catbar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;           /* 按鈕之間的間距 */
}

/* ✱ 這行會覆蓋你先前加的 inline-block，否則 flex 等寬會失效 */
.rl-catbar .rl-cat.btn {
  display: flex !important;       /* 取代你先前的 inline-block */
  flex: 1 1 0 !important;         /* 等寬伸展，平均分配 */
  min-width: 140px !important;    /* 太窄時自動換行，可依需要調整 */
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;           /* 清掉主題/自訂的左右 margin，用 gap 控制間距 */
  width: auto !important;
}

/* 桌機想固定 7 等分也可以這樣寫（擇一使用）： */
/*
@media (min-width: 1024px) {
  .rl-catbar { display: grid !important; grid-template-columns: repeat(7, 1fr) !important; gap:14px !important; }
  .rl-catbar .rl-cat.btn { width: 100% !important; }
}
*/

/* RWD：平板 3 欄、手機 2 欄（可調） */
@media (max-width: 1024px) {
  .rl-catbar .rl-cat.btn { min-width: 160px !important; }
}
@media (max-width: 560px) {
  .rl-catbar .rl-cat.btn { min-width: 120px !important; }
}



@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}


/* === 桌機固定 7 等分 === */
@media (min-width: 1024px) {
  .rl-catbar-wrap { width: 100% !important; }

  .rl-catbar{
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important; /* 7 等分 */
    gap: 14px !important;                              /* 按鈕間距，可調 */
    align-items: stretch !important;
    justify-items: stretch !important;
  }

  /* 每顆按鈕撐滿格子並置中 */
  .rl-catbar .rl-cat.btn{
    display: flex !important;          /* 覆蓋先前的 inline-block */
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;              /* 間距交給 gap 控制 */
  }
}

/* 平板/手機自動分欄（可依需要調整） */
@media (max-width: 1023.98px){
  .rl-catbar{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px !important;
  }
}
@media (max-width: 560px){
  .rl-catbar{
    grid-template-columns: repeat(2, 1fr) !important;
  }
}


/* 分類按鈕改成方框（可搭配你先前的 7 等分網格一起用） */
.rl-catbar .rl-cat.btn{
  border-radius: 6px !important;      /* 要全直角就改成 0 */
  border: 1px solid rgba(0,0,0,.12) !important;  /* 方框外框，可依喜好調色 */
  padding: 10px 18px !important;       /* 依字數調整高度/寬度感 */
  display: flex !important;            /* 保持垂直置中 */
  justify-content: center !important;
  align-items: center !important;
  margin: 0 !important;                /* 間距用你設定的 gap 控制 */
}

/* 滑過與選中狀態（可改你喜歡的色系） */
.rl-catbar .rl-cat.btn:hover{
  background: #f2f2f2 !important;
}
.rl-catbar .rl-cat.btn.rl-cat--active{
  background: #111 !important;
  color: #fff !important;
  border-color: #111 !important;
}