/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

.single-product div#content {
    padding: 180px 0 0 0;
}
.woocommerce-js ul.products li.product a.ast-loop-product__link {
    min-height: 50px;
}
@media (max-width: 921px) {
.woocommerce-js ul.products li.product a.ast-loop-product__link {
    min-height: 80px;
}
	.woocommerce-js div.product form.cart .button.single_add_to_cart_button {
    margin: 3px 0 0 0;
}
}

a.showcoupon {
    color: var(--ast-global-color-0);
}
.woocommerce-product-gallery__wrapper .woocommerce-product-gallery__image img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
}
/*連結樣式 顏色*/
a {
    color: #ffffff;
}
/*手機版子選單 顏色*/
/* --- 強制清除手機版選單連結的預設背景色，讓底層容器的磨砂效果透出來 --- */
@media (max-width: 921px) {
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-link,
    .ast-builder-menu-mobile .main-navigation .main-header-menu .menu-item:hover > .menu-link,
    .ast-builder-menu-mobile .main-navigation .menu-item.current-menu-item > .menu-link {
        background: transparent !important;
        background-color: transparent !important;
    }
}
/*頁尾樣式 間距*/
#menu-shopping {
    display: flex;         /* 啟動彈性佈局 */
    list-style: none;      /* 移除清單圓點 */
    padding: 0;            /* 移除預設內邊距 */
    margin: 0;
    gap: 5px;             /* 這裡調整間距大小，例如 20px */
    flex-wrap: wrap;       /* 手機版若太長會自動換行 */
	flex-direction: column;
	font-size: 15px;
}

#menu-shopping li {
    margin: 0;             /* 清除預設 margin */
}
/* 1. 強制設定所有輸入框的底邊框為白色，並去掉其他三邊 */
.woocommerce-checkout input,
.woocommerce-checkout textarea,
.woocommerce-checkout select {
    background-color: #133b62 !important;
    color: #ffffff !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #ffffff !important; /* 下底線保留白色 */
    border-radius: 0 !important; /* 確保線條平直 */
}

/* 2. 修正下拉選單 (Select2) 選中的文字顏色 */
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #ffffff !important;
    line-height: 40px; /* 根據你的高度調整，確保文字置中 */
}

/* 3. 修正下拉選單的背景與下底線 (因為 Select2 是動態生成的 HTML) */
.woocommerce-checkout .select2-container--default .select2-selection--single {
    background-color: #133b62 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 2px solid #ffffff !important;
    border-radius: 0 !important;
    height: 45px; /* 視情況調整高度 */
}

/* 4. 修正下拉選單的小箭頭顏色 */
.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #ffffff transparent transparent transparent !important; /* 箭頭向下時 */
}

.woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--arrow b {
    border-color: transparent transparent #ffffff transparent !important; /* 展開箭頭向上時 */
}

/* 1. 下拉選單展開後的搜尋框 (Search Field) */
.select2-dropdown .select2-search__field {
    background-color: #133b62 !important;
    color: #ffffff !important;
    border: none !important;
    border-bottom: 2px solid #ffffff !important; /* 保留白色下底線 */
    border-radius: 0 !important;
}

/* 2. 下拉選單整體的背景顏色 (結果清單的外框) */
.select2-dropdown {
    background-color: #133b62 !important;
    border: 1px solid #ffffff !important; /* 給外框一個淡淡的邊界，避免跟背景混在一起 */
    color: #ffffff !important;
}

/* 3. 未選中的選項文字顏色 */
.select2-results__option {
    background-color: #133b62 !important;
    color: #ffffff !important;
}

/* 4. 滑鼠移過 (Hover) 或 正在選取中的選項背景顏色 */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: #1a528a !important; /* 稍微亮一點的藍色，方便辨識選中狀態 */
    color: #ffffff !important;
}

/* 5. 修正搜尋框內的輸入提示 (Placeholder) 顏色 */
.select2-search--dropdown .select2-search__field::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}
/*頁尾 標題*/
/* 統一設定頁尾所有標題的金色漸層樣式 */
.site-footer .wp-block-heading {
    /* 1. 設定徑向漸層背景 */
    background: radial-gradient(circle at 50% 50%, #ffeea4, #e7c468);

    /* 2. 核心：將背景裁剪至文字形狀 */
    -webkit-background-clip: text;
    background-clip: text;

    /* 3. 核心：將文字本身顏色設為透明，透出背景色 */
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* 4. 樣式微調 */
    display: inline-block;    /* 確保漸層精確包裹文字長度 */
    font-weight: bold;        /* 粗體讓金色更顯眼 */
    font-size: 24px !important;          /* 根據需求調整標題大小 */
    
    /* 5. 增加一點文字陰影，讓金色在深/淺背景更有層次感（選配） */
    filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.1));
}
.woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-column__title, .woocommerce-page.woocommerce-checkout .woocommerce-order h2.woocommerce-order-details__title, .woocommerce.woocommerce-checkout .woocommerce-order h2.woocommerce-column__title, .woocommerce.woocommerce-checkout .woocommerce-order h2.woocommerce-order-details__title {
    background: var(--ast-global-color-0);
}
/* 1. 先把原本容器的邊框設為 0 */
.site-primary-footer-wrap[data-section="section-primary-footer-builder"] {
    background-color: rgba(250, 250, 250, 0);
    background-image: none;
    border-top-width: 0px !important; /* 取消原本的邊框 */
    position: relative; /* 確保虛擬元素定位基準點在此 */
}

/* 2. 使用虛擬元素製作「縮進」的邊線 */
.site-primary-footer-wrap[data-section="section-primary-footer-builder"]::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10%;  /* 這裡控制左邊縮進量 (例如 10%) */
    right: 10%; /* 這裡控制右邊縮進量 (例如 10%) */
    height: 1px; /* 線的粗細 */
    background-color: var(--ast-global-color-subtle-background, --ast-global-color-7); /* 線的顏色 */
}

/* 確保 Astra 主題的預設樣式不會覆蓋掉透明效果 */
.site-footer aside .widget-title,
.site-footer .wp-block-heading {
    border: none !important;
    padding: 0 !important;
}
.widget {
    margin-bottom: 0.7em;
}

/*頁尾 社交分享*/
/* 1. 容器佈局 */
.huge-brand-social-wrap {
    display: flex;
    gap: 30px; /* 圖示之間的間距 */
    align-items: center;
    justify-content: flex-start; 
}
@media (max-width: 921px) {
	.huge-brand-social-wrap {
		justify-content: center;
	}
}
/* 2. 放大圖示容器 */
.huge-brand-social-wrap .huge-social-link {
    width: auto !important;
    height: auto !important;
    display: block;
    line-height: 0;
    transition: all 0.3s ease !important;
}

/* 3. 放大 SVG 本身 (比照你要求的 60px) */
.huge-brand-social-wrap .huge-social-link svg {
    width: 32px !important;
    height: 32px !important;
    transform-origin: center;
}
section#block-23 {
    font-size: 15px;
}

/* 4. 懸停動態效果 */
.huge-brand-social-wrap .huge-social-link:hover {
    transform: translateY(-8px) scale(1.1); /* 向上浮動並放大 */
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15)); /* 增加陰影感 */
}

/* 5. 針對手機版的自動縮放 (可選) */
@media (max-width: 768px) {
    .huge-brand-social-wrap .huge-social-link svg {
        width: 45px !important;
        height: 45px !important;
    }
    .huge-brand-social-wrap {
        gap: 20px;
    }
}


/* 如果你的網站後台可以上傳自訂 SVG 漸層，效果會更好。 */

/* === 5. 懸停動態效果 (選用) === */
.wp-block-social-links .wp-social-link:hover {
    transform: scale(1.1) !important; /* 懸停時稍微放大 */
}

/* 1. 預設狀態：將頁首完全隱藏並推到上方 */
selector {
    transform: translateY(-100%);
    transition: all 0.4s ease-in-out;
    background-color: transparent !important; /* 初始透明 */
}

/* 2. 觸發狀態：滑動超過設定的 Offset 後滑入並變色 */
selector.elementor-sticky--effects {
    transform: translateY(0);
    background-color: rgba(255, 255, 255, 0.8) !important; /* 半透明白色 */
    backdrop-filter: blur(10px); /* 磨砂玻璃效果，若不需要可刪除 */
    box-shadow: 0px 4px 15px rgba(0,0,0,0.05); /* 淡淡的陰影增加質感 */
}

/*產品加入購物車按鈕 樣式*/
.hfe-woo-products-wrapper .hfe-product-add-to-cart .button {
	border-radius: 32px;	
}
p#coupon-error-notice {
    margin: 0 0 0 12px;
}
/* 1. 確保每一列的產品卡片高度整齊劃一 */
ul.products {
    display: flex;
    flex-wrap: wrap;
}

ul.products li.product {
    display: flex;
    flex-direction: column;
    height: auto; /* 讓內容決定高度，但同列會對齊最高者 */
}

/* 2. 讓文字資訊區塊充滿剩餘空間 */
.astra-shop-summary-wrap {
    display: flex;
    flex-direction: column;
    flex: 1; /* 強制撐開，填滿卡片下方空白 */
}

/* 3. 關鍵：讓標題後的內容（價格、按鈕）自動往下推 */
.astra-shop-summary-wrap .ast-loop-product__link {
    margin-bottom: 10px; /* 標題下方的間距 */
}

.astra-shop-summary-wrap .price {
    margin-top: auto;    /* 將價格推向底部 */
    margin-bottom: 15px; /* 價格與按鈕之間的間距 */
    display: block;
}

/* 4. 按鈕固定在最下方 */
.astra-shop-summary-wrap .button {
    align-self: center;  /* 按鈕置中 */
    width: 100%;         /* 若希望按鈕填滿寬度可加這行 */
}
/* 1. 修改麵包屑文字與連結顏色 */
.woocommerce-breadcrumb, 
.woocommerce-breadcrumb a {
    color: #ffffff !important;
}

/* 2. 修改下拉選單文字顏色、邊框與背景（透明背景較適合白色字） */
.orderby {
    color: #ffffff !important;
    border-color: #ffffff !important;
    background-color: transparent !important;
    padding-right: 30px !important; /* 留位置給自定義圖標 */
    appearance: none; /* 移除瀏覽器預設樣式 */
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* 3. 修改下拉選單的箭頭 Icon (使用背景圖取代) */
.orderby {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 12px !important;
}

/* 讓選單內的選項背景變深（否則白色字在白色背景會看不到） */
.orderby option {
    background-color: #333333 !important;
    color: #ffffff !important;
}
/*產品加入購物車 數量輸入框 樣式*/
.woocommerce-js .quantity input[type=email], .woocommerce-js .quantity input[type=number], .woocommerce-js .quantity input[type=text] {
    margin: 0 0 .6em 0;
}
/*結帳購物車頁面*/
table.shop_table.shop_table_responsive.cart.woocommerce-cart-form__contents th {
    background-color: var(--ast-global-color-0);
}
td.product-name a {
    color: var(--ast-global-color-2);
}
td.product-name a:hover {
    color: #ffffff;
}
/*購物車文字樣式*/
.ast-single-post .entry-content a, .ast-comment-content a:not(.ast-comment-edit-reply-wrap a), .woocommerce-js .woocommerce-product-details__short-description a {
    text-decoration: none;
}
a.added_to_cart.wc-forward {
    display: none;
}

.free-shipping-threshold-wrapper {
    background: #133B62;
    padding: 15px;
    border: 1px solid #eee;
    margin-bottom: 20px;
    border-radius: 5px;
}
.entry-content[data-ast-blocks-layout] > * {
    margin-top: 120px;
}

.shipping-notice {
    font-size: 14px;
    color: var(--ast-global-color-2);
    margin-bottom: 10px;
}

.shipping-notice .badge {
    padding: 2px 8px;
    border-radius: 3px;
    font-weight: bold;
    margin-right: 5px;
}

.shipping-notice .amount {
    color: #ff4d4f; /* 1Shop 常用的紅色 */
    font-weight: bold;
}
.entry-content .woocommerce-message, .entry-content .woocommerce-error, .entry-content .woocommerce-info {
    background-color: #d1d5db;
}
.woocommerce-cart .cart-collaterals .cart_totals>h2, .woocommerce-cart .cart-collaterals .cross-sells>h2 {
    background-color: #133b62;
}
/* 進度條外框 */
.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
}

/* 進度條填滿部分 */
.progress-bar-fill {
    height: 100%;
    background-color: #ff4d4f; /* 這裡可以改成你的主色調 */
    transition: width 0.5s ease-in-out;
}

.shipping-notice.success {
    color: var(--ast-global-color-2);
    font-weight: bold;
}

/* 手機版：4 欄 shortcode */
@media (max-width: 767px) {
  .mobile-products-4 ul.products.columns-4 {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .mobile-products-4 ul.products.columns-4 li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
  }
}

/* 手機版：3 欄 shortcode */
@media (max-width: 767px) {
  .mobile-products-3 ul.products.columns-3 {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  .mobile-products-3 ul.products.columns-3 li.product {
    width: auto !important;
    float: none !important;
    margin: 0 !important;
    clear: none !important;
  }
}