/* 如果黑框是偽元素畫出來的 */ .single-product .woocommerce-product-gallery .flex-control-thumbs li::before, .single-product .woocommerce-product-gallery .flex-control-thumbs li::after, .single-product .woocommerce-product-gallery .flex-control-thumbs li a::before, .single-product .woocommerce-product-gallery .flex-control-thumbs li a::after { content: none !important; display: none !important; } /* 巃蕪 — 精選禮盒商品間距 */ .elementor-widget-shortcode ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 48px 28px; } .elementor-widget-shortcode ul.products li.product { width: 100% !important; margin: 0 !important; float: none !important; clear: none !important; padding: 0 4px; } @media (max-width: 767px) { .elementor-widget-shortcode ul.products { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; } } /* 巃蕪 — 商品標題克數樣式 */ .woocommerce ul.products li.product .lg-weight, .woocommerce div.product .product_title .lg-weight { display: inline-block; margin-top: 10px; font-size: 0.8em; font-weight: 700; letter-spacing: 0.06em; line-height: 1.4; opacity: 1; } /* 給商品卡片的「選擇規格」按鈕加上外框與字型設定 */ .woocommerce ul.products li.product .button, .woocommerce .products .product .button { background-color: transparent !important; /* 背景設為透明 */ color: #4a151b !important; /* 文字設為深紅色 */ border: 1.5px solid #4a151b !important; /* 設定 1.5px 實線外框 */ border-radius: 40px; /* 設定膠囊圓角 */ padding: 3px 35px; /* 調整按鈕內距 */ /* === 字型相關設定 === */ font-family: "Noto Serif HK", "Noto Serif TC", serif !important; /* 字體名稱（如思源宋體） */ font-size: 18px !important; /* 文字大小 */ font-weight: 700 !important; /* 文字粗細（400一般, 500中粗, 700粗體） */ letter-spacing: 2px !important; /* 字距（讓文字稍微拉開） */ } /* 滑鼠移上去（Hover）時的變色效果 */ .woocommerce ul.products li.product .button:hover, .woocommerce .products .product .button:hover { background-color: #4a151b !important; /* 懸停時背景填滿 */ color: #ffffff !important; /* 懸停時文字變白 */ } /* 針對手機版（螢幕寬度小於 768px）的專屬設定 */ @media (max-width: 768px) { /* 1. 修改購物車按鈕：縮小字體、內距與字距，解決文字擠壓重疊 */ .woocommerce ul.products li.product .button, .woocommerce .products .product .button { background-color: transparent !important; color: #4a151b !important; border: 1.5px solid #4a151b !important; border-radius: 40px !important; padding: 3px 10px !important; /* 縮小按鈕內距 */ font-family: "Noto Serif HK", "Noto Serif TC", serif !important; font-size: 13px !important; /* 縮小按鈕文字 */ font-weight: 700 !important; letter-spacing: 1px !important; /* 縮小字距 */ } /* 手機版按鈕點擊（Active）時的變色效果 */ .woocommerce ul.products li.product .button:active, .woocommerce .products .product .button:active { background-color: #4a151b !important; color: #ffffff !important; } /* 2. 修改手機版商品名稱 (標題) 大小與間距 */ .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .product-title, .woocommerce ul.products li.product h2, .woocommerce ul.products li.product h3 { font-size: 15px !important; /* 標題字體大小 */ letter-spacing: 1px !important; /* 字與字的間距 */ line-height: 1.3 !important; /* 行距 */ margin-bottom: 1px !important; /* 標題與下方價格的距離 */ } /* 3. 修改手機版商品價格大小 */ .woocommerce ul.products li.product .price { font-size: 14px !important; /* 價格字體大小 */ } } .woocommerce ul.products li.product .price { font-size: 18px !important; /* 👈 縮小商品價格字體 */ } } /* 修改購物車商品名稱的大小、粗細與間距 */ .woocommerce-mini-cart-item a { font-size: 16px !important; font-weight: bold !important; letter-spacing: 1px !important; /* 調整這裡的數字來改變字距 */ } /* 修改購物車價格、小計與按鈕的大小、粗細與間距 */ .woocommerce-mini-cart-item .quantity, .woocommerce-mini-cart__total, .woocommerce-mini-cart__buttons a { font-size: 16px !important; font-weight: bold !important; letter-spacing: 0px !important; /* 調整這裡的數字來改變字距 */ } /* ===== 巃蕪首頁 Banner 輪播：改用比例，不再被裁切 ===== */ /* 桌機橫式 Banner 4000 x 2225 */ .elementor-element-ddfff80 .htslider-item-img.single-slide-item.htslider-single-post-slide{ position: relative; /* 作為按鈕定位的基準 */ height: auto !important; aspect-ratio: 4000 / 2225; background-size: cover; background-position: center center; background-repeat: no-repeat; } /* 外層容器不要再撐最小高度 */ .elementor-element-5d67a57{ --min-height: 0px !important; } /* 按鈕：絕對定位，用百分比座標對齊 Banner（原本 550px 寫死） */ .elementor-element-ddfff80 .htslider-single-post-slide .post-btn a.readmore-btn{ position: absolute !important; margin: 0 !important; top: 90.9%; /* 上下位置：0% 最上、100% 最下 */ left: 50%; /* 左右位置 */ transform: translate(-50%, -50%); /* 以按鈕中心對齊上面的座標 */ } /* 手機直式 Banner 2250 x 4000 */ @media (max-width: 767px){ .elementor-element-ddfff80 .htslider-item-img.single-slide-item.htslider-single-post-slide{ height: auto !important; aspect-ratio: 2250 / 4000; } /* 手機按鈕位置（直式圖比例不同，想分開調就改這裡） */ .elementor-element-ddfff80 .htslider-single-post-slide .post-btn a.readmore-btn{ top: 90.9%; left: 50%; } } @media (max-width: 767px) { .woocommerce ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 8px; /* 調整商品之間的間距 */ } .woocommerce ul.products li.product { width: 100% !important; margin-bottom: 15px !important; } } @media screen and (max-width: 768px) { /* 1. 幫母標題加上專屬大圓點 */ .ct-header-offcanvas .menu-item > a.ct-menu-link::before, #offcanvas .menu-item > a.ct-menu-link::before, .ct-mobile-menu .menu-item > a.ct-menu-link::before, .ct-header-offcanvas .menu-item .ct-sub-menu-parent > a.ct-menu-link::before, #offcanvas .menu-item .ct-sub-menu-parent > a.ct-menu-link::before, .ct-mobile-menu .menu-item .ct-sub-menu-parent > a.ct-menu-link::before { content: "\2022" !important; margin-right: 8px !important; display: inline-block !important; font-size: 30px !important; /* 在此調整母標題圓點大小 */ line-height: 1 !important; vertical-align: middle !important; } /* 2. 獨立覆寫子選單的點點，讓它可以單獨調整大小 */ .ct-header-offcanvas .sub-menu a.ct-menu-link::before, #offcanvas .sub-menu a.ct-menu-link::before, .ct-mobile-menu .sub-menu a.ct-menu-link::before { content: "\2022" !important; display: inline-block !important; font-size: 20px !important; /* 👈 在此獨立調整「子標題」圓點大小 */ margin-right:8px !important; } }