.elementor-745 .elementor-element.elementor-element-39cfa6f{padding:30px 0px 0px 0px;}.elementor-745 .elementor-element.elementor-element-fdc7f53 .elementor-spacer-inner{--spacer-size:50px;}.elementor-745 .elementor-element.elementor-element-6a9f9c9{text-align:center;}.elementor-745 .elementor-element.elementor-element-6a9f9c9 .elementor-heading-title{color:#54595F;font-family:"Noto Sans TC", Sans-serif;font-size:28px;font-weight:300;letter-spacing:15px;}.elementor-745 .elementor-element.elementor-element-18c3425 .elementor-spacer-inner{--spacer-size:22px;}.elementor-745 .elementor-element.elementor-element-3a1dd19 .elementor-spacer-inner{--spacer-size:200px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-745 .elementor-element.elementor-element-3fa5f03{width:16%;}.elementor-745 .elementor-element.elementor-element-d30743c{width:83.666%;}}@media(max-width:767px){.elementor-745 .elementor-element.elementor-element-39cfa6f{padding:20px 0px 0px 0px;}.elementor-745 .elementor-element.elementor-element-6a9f9c9 .elementor-heading-title{font-size:22px;letter-spacing:10px;}}/* Start custom CSS for heading, class: .elementor-element-6a9f9c9 */.cute-taiwan-text {
  letter-spacing: 0.15em; /* 這裡調整字元間距大小，您可以嘗試 0.05em, 0.1em, 0.2em 等值 */
  font-size: 22.5px; /* 這裡調整字體大小，您可以嘗試不同的像素值，例如 14px, 18px, 20px 等 */
  /* 您也可以使用相對單位，例如 1em (基於父元素字體大小), 1.2rem (基於根元素字體大小) */
  /* 如果原本 strong 有其他內聯樣式，也要考慮是否需要在此處添加 */
  /* 例如，如果 strong 曾經有 font-weight: bold; 但現在沒有，您可能需要在這裡添加 */
}/* End custom CSS */
/* Start custom CSS for wp-widget-block, class: .elementor-element-8859142 */.product-category-menu {
  background-color: #fff;
  padding: 20px;
  border: 1px solid #eee;
  max-width: 300px; /* 注意：這個寬度可能會使菜單在桌面版上很窄，如果需要全寬，可能需要調整或使用響應式設定 */
  font-family: "Helvetica Neue", sans-serif;
}

.category-section {
  margin-bottom: 20px;
}

.category-title {
  font-size: 18px;
  color: #333;
  border-bottom: 2px solid #A6A6A6;
  padding-bottom: 8px;
  margin-bottom: 10px;
}

.category-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.category-list li {
  margin-bottom: 8px;
}

.category-list a {
  color: #555;
  text-decoration: none;
  transition: color 0.3s ease;
}

.category-list a:hover {
  color: #A6A6A6;
}/* End custom CSS */
/* Start custom CSS for wp-widget-block, class: .elementor-element-a8712b8 *//* 來自您第一張圖片的菜單/分類區塊的 CSS */
.product-category-menu {
    background-color: #fff;
    padding: 20px;
    border: 1px solid #eee;
    max-width: 300px; /* 這個寬度相當小，如果菜單應該更寬，可能會影響排版 */
    font-family: "Helvetica Neue", sans-serif;
}
.category-section {
    margin-bottom: 20px;
}
.category-title {
    font-size: 18px;
    color: #333;
    border-bottom: 2px solid #A6A6A6;
    padding-bottom: 8px;
    margin-bottom: 10px;
}
.category-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.category-list li {
    margin-bottom: 8px;
}
.category-list a {
    color: #555;
    text-decoration: none;
    transition: color 0.3s ease;
}
.category-list a:hover {
    color: #A6A6A6;
}

/* 考慮這裡的 'body' 樣式是否必要，或者您的佈景主題是否已處理。 */
/* 如果您的佈景主題已經設定了 body 字體/外邊距/背景，請移除這些以避免衝突。 */
body {
    font-family: "Noto Sans TC", "Microsoft JhengHei", sans-serif;
    margin: 20px;
    background-color: #f9f9f9;
}

/* 來自您完整 HTML 範例的產品網格的 CSS - 已合併和優化 */
.product-grid {
    display: grid;
    /* 調整此處來更改格子大小和每行數量 */
    /*
     * 選項 A: 固定列數（推薦，如果您想要確切的「每四格換一行」）
     * repeat(4, 1fr) 表示創建 4 個等寬的列
     * 您可以更改 '4' 這個數字來決定每行顯示多少個格子
     */
    grid-template-columns: repeat(4, 1fr);
    
    /*
     * 選項 B: 自動填充列數（如果您想要格子在符合最小寬度時自動調整數量）
     * minmax(200px, 1fr) 中的 '200px' 是格子的最小寬度。
     * 您可以更改這個 '200px' 來調整每個格子的基礎大小。
     * 當螢幕寬度允許時，會填充更多格子；不夠時則換行。
     * 如果您使用此選項，請將上面的 repeat(4, 1fr); 註釋掉或刪除。
     */
    /* grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); */

    gap: 24px; /* 網格項目之間的間距 */
    padding: 0 20px; /* 在較小螢幕上左右各 20 像素的內邊距 */
}

/* 為了更好的響應式設計，您應該為小螢幕設備添加媒體查詢 */
@media (max-width: 768px) { /* 當螢幕寬度小於或等於 768px 時 */
    .product-grid {
        /* 在平板上顯示為 2 列 */
        grid-template-columns: repeat(2, 1fr);
        /* 如果您使用了 minmax 方式，這裡也可以調整 minmax 的值 */
        /* grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); */
    }
}

@media (max-width: 480px) { /* 當螢幕寬度小於或等於 480px 時 */
    .product-grid {
        /* 在更小的手機上顯示為 1 列 */
        grid-template-columns: repeat(1, 1fr);
        /* 如果您使用了 minmax 方式，這裡也可以調整 minmax 的值 */
        /* grid-template-columns: repeat(auto-fill, minmax(calc(100% - 40px), 1fr)); */
        /* calc(100% - 40px) 是為了考慮 padding: 0 20px; */
    }
}

/* 商品項目的樣式 - 這也會影響格子的大小和視覺呈現 */
.product-item {
    text-align: center;
    background-color: #fff;
    border-radius: 8px;
    padding: 20px; /* 這裡的內邊距會增加格子視覺上的大小 */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.product-item img {
    width: 100%; /* 圖片寬度為 100% 會填滿格子內部可用空間 */
    height: auto;
    border-radius: 4px;
}

.product-title {
    margin-top: 8px;
    font-size: 14px; /* 標題字體大小 */
    color: #333;
}

.product-price {
    font-weight: bold;
    color: #B28B58;
    margin-top: 4px;
}/* End custom CSS */