/* =============================================================================
 * ✅ 2) Chaty：tooltip 內的  預設 margin 清掉（避免多餘內距）
 * ========================================================================== */
.chaty-tooltip p { margin: 0; }

/* =============================================================================
 * ✅ 3) 結帳 / 購物車表格：隱藏 td 裡的 small（你註解寫稅率）
 * - 會影響所有 shop_table 內 td 的 
 *   例如：稅率提示、某些運費或備註小字
 * ========================================================================== */
.woocommerce-js table.shop_table td small {
  display: none;
}

/* =============================================================================
 * ✅ 4) 結帳頁：訂單明細表（#checkout-cart-content）
 * - 隱藏「每個 cart_item 後面緊接的下一列」，且那列不能是 cart_item
 * - 常見用途：把某些額外說明列、meta 列或空白列藏起來
 * ========================================================================== */
#checkout-cart-content table.shop_table
tr.woocommerce-cart-form__cart-item + tr:not(.woocommerce-cart-form__cart-item) {
  display: none !important;
}




/* =============================================================================
 * ✅ 8) 結帳頁：表單欄位錯誤訊息（自訂 .checkout-inline-error-message）
 * - 讓錯誤訊息用 absolute 貼在欄位下方，避免把版面撐得忽上忽下
 * - form-row 加 position:relative 當定位基準
 * ========================================================================== */
.woocommerce-checkout .form-row {
  position: relative;  /* 讓錯誤訊息絕對定位於此 */
  margin-bottom: 24px; /* 與下一列留距（≈ 欄位高 + 訊息高） */
}

/* 錯誤訊息樣式（你自訂 class：.checkout-inline-error-message） */
.woocommerce-checkout .checkout-inline-error-message {
  position: absolute;
  left: 0;
  top: calc(100% + 2px);
  width: 100%;
  font-size: 12px;
  line-height: 1.3;
  color: #d63637;     /* WooCommerce 預設錯誤紅 */
  padding-left: 2px;  /* 微縮排 */
  margin: 0;
  pointer-events: none;
  word-break: break-word;
  white-space: normal;
  z-index: 2;         /* 避免被 Select2 箭頭蓋住 */
}

/* 平板/桌機以上：半寬欄位的錯誤訊息不跨到旁邊欄位（你註解寫行動裝置，但實際是 min-width） */
@media (min-width: 768px) {
  .woocommerce-checkout .form-row-first,
  .woocommerce-checkout .form-row-last {
    padding-right: 12px;
  }
}



/* =============================================================================
 * ✅ 12) 首頁：文章縮圖隱藏（has-post-thumbnail 的 post-thumb img）
 * - 會影響所有 .page 且有特色圖的頁面縮圖區塊
 * ========================================================================== */
.page .has-post-thumbnail .post-thumb img {
  display: none;
} /* 首頁縮圖隱藏 */

/* =============================================================================
 * ✅ 13) WooCommerce：提示訊息隱藏
 * - .woocommerce-message：例如「已加入購物車」那種綠色提示條
 * ========================================================================== */
.woocommerce-message {
  display: none;
} /* 購物車通知取消 */




/* =============================================================================
 * ✅ 16) 商品單頁：加入購物車後的「查看購物車」連結（.added_to_cart）隱藏
 * ========================================================================== */
.woocommerce .added_to_cart {
  display: none;
} /* 商品 single page 加入購物車後隱藏 */

/* =============================================================================
 * ✅ 17) 部落格文章單頁：上一篇/下一篇導覽隱藏（Astra）
 * ========================================================================== */
.ast-separate-container .post-navigation {
  display: none;
} /* 文章單頁上一篇下一篇按鈕隱藏 */

/* =============================================================================
 * ✅ 18) 食譜頁：Icon Box 在手機版改為 flex 排列（你註解：食材作法位置修正）
 * ========================================================================== */
.elementor-widget-icon-box.elementor-mobile-position-top .elementor-icon-box-wrapper {
  display: flex;
} /* 食譜手機版食材作法位置修正 */

/* =============================================================================
 * ✅ 19) 訂單完成/感謝頁：文字顏色調整（Text Editor Widget）
 * - 會影響所有 .elementor-widget-text-editor（範圍偏大，注意是否誤傷其他頁）
 * ========================================================================== */
.elementor-widget-text-editor {
  color: #00324B;
} /* 訂單完成感謝頁顏色調整 */

/* =============================================================================
 * ✅ 20) 指定 Elementor 區塊：img overflow hidden（可能是修剪超出容器）
 * ========================================================================== */
.elementor-3374 .elementor-element.elementor-element-1b7c23c5 img {
  overflow: hidden;
}

/* =============================================================================
 * ✅ 21) 全站：Widget container 內的 ul 左邊距調整
 * - 影響範圍偏大：所有 .elementor-widget-container ul
 * ========================================================================== */
.elementor-widget-container ul {
  margin-left: 5%;
} /* 商品頁面 ul 右移 5% */

/* =============================================================================
 * ✅ 22) 註冊/表單：input padding
 * - 影響 Woo 表單 input.input-text
 * ========================================================================== */
.woocommerce form .form-row input.input-text {
  padding: 10px;
} /* 註冊頁面 padding */

/* =============================================================================
 * ✅ 23) Header：手機版兩個 element 寬度 50%（Elementor 指定 element）
 * ========================================================================== */
@media (max-width: 767px) {
  .elementor-1508 .elementor-element.elementor-element-bec2410 {
    width: 50%;
  }
} /* header 寬度調整 */

@media (max-width: 767px) {
  .elementor-1508 .elementor-element.elementor-element-19226bb {
    width: 50%;
  }
} /* header 寬度調整 */

/* =============================================================================
 * ✅ 24) 指定 Elementor 區塊：寬度 100%
 * ========================================================================== */
.elementor-7840 .elementor-element.elementor-element-f6539da {
  width: 100%;
}

/* =============================================================================
 * ✅ 25) 商品列表：極小螢幕下（<=544px）商品卡上方間距
 * - 影響 elementor 的 wc-products grid
 * ========================================================================== */
@media (max-width: 544px) {
  .elementor-element .elementor-wc-products .woocommerce[class*="columns-"] ul.products li.product {
    margin-top: 40px;
  }
}

/* =============================================================================
 * ✅ 26) 【覆蓋】商品列表卡：價格區塊（同 selector 再寫一次）
 * - 這段會覆蓋上面第 15 段的 position/left/width 等設定
 * - position: inherit 通常會把 absolute 改回跟父層一致 → 版面會變
 * ========================================================================== */
.elementor-widget-woocommerce-products.elementor-wc-products ul.products li.product .price {
  display: flex;
  position: inherit;
}

/* =============================================================================
 * ✅ 27) 商品列表卡：縮圖下方間距（Elementor 指定頁面/元件）
 * ========================================================================== */
.elementor-1646 .elementor-element.elementor-element-42254d82.elementor-wc-products .attachment-woocommerce_thumbnail {
  margin-bottom: 5%;
}