/* 如果黑框是偽元素畫出來的 */
.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) {
    .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;           /* 加上 !important 避免被手機版主題覆蓋 */
        padding: 4px 24px !important;             /* 稍微縮小內距，適應手機螢幕尺寸 */

        font-family: "Noto Serif HK", "Noto Serif TC", serif !important; 
        font-size: 15px !important;               /* 手機版建議稍微縮小字體，避免文字被截斷或按鈕過大 */
        font-weight: 700 !important;              
        letter-spacing: 2px !important;           
    }

    /* 手機版沒有游標 Hover，改為點擊（Active）時的變色效果 */
    .woocommerce ul.products li.product .button:active,
    .woocommerce .products .product .button:active {
        background-color: #4a151b !important;     
        color: #ffffff !important;                
    }
}

/* 修改購物車商品名稱的大小、粗細與間距 */
.woocommerce-mini-cart-item a {
    font-size: 18px !important;
    font-weight: bold !important;
    letter-spacing: 2.5px !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: 2.5px !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%;
    }
}