/************************************************
 * 0. 基本原則：
 *    全部都加上 .woocommerce.single-product
 *    只影響單一商品頁，不動首頁與文章頁
 ************************************************/

/* 1. 隱藏產品頁底部「分類／標籤／品牌」那一串  */
.woocommerce.single-product div.product .product_meta {
    display: none !important;
}

/* 2. 結帳頁：隱藏「運送至 XXX 地址」等小字說明 */
.woocommerce-shipping-destination,
.woocommerce-order-review .woocommerce-shipping-totals small,
.woocommerce-order-review small.woocommerce-shipping-destination,
.woocommerce-order-review .shipping-destination {
    display: none !important;
}

/* 3. 商品頁上方主區塊：圖片＆文字排版（Muji 感）  */
.woocommerce.single-product div.product {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;           /* 圖片與文字之間的距離，想再近可以改成 30px */
}

/* 左側圖片區 */
.woocommerce.single-product div.product .woocommerce-product-gallery {
    flex: 0 0 45%;
    max-width: 45%;
}

/* 右側文字區（商品名稱／價格／規格／按鈕） */
.woocommerce.single-product div.product .summary {
    flex: 1 1 0;
    max-width: 50%;
    margin: 0;          /* 拿掉多餘 margin，避免拉太開 */
    padding: 0;         /* 不要框線＆內距，保持極簡 */
    border: none;
    background: transparent;
}

/* 圖片本身大小控制（避免過大，仍保有留白） */
.woocommerce.single-product
div.product .woocommerce-product-gallery__wrapper
.woocommerce-product-gallery__image img {
    max-width: 560px;   /* 覺得太大／太小可以自行微調 */
    width: 100%;
    height: auto;
}

/* 讓下方「香氣介紹 / 香氣結構 / …」確定跑到整個區塊的下一行 */
.woocommerce.single-product div.product::after {
    content: "";
    display: block;
    width: 100%;
    clear: both;
}

/* 4. 數量欄位：簡單、乾淨的邊框 */
.woocommerce.single-product div.product form.cart .quantity input.qty {
    border: 1px solid #ccc;
    padding: 6px 10px;
    width: 64px;
    box-sizing: border-box;
    border-radius: 4px;
    font-size: 14px;
}

/* 5. 手機版調整：小螢幕改為上下排列即可 */
@media (max-width: 767px) {

    .woocommerce.single-product div.product {
        display: block;
    }

    .woocommerce.single-product div.product .woocommerce-product-gallery,
    .woocommerce.single-product div.product .summary {
        max-width: 100%;
        width: 100%;
    }

    .woocommerce.single-product
    div.product .woocommerce-product-gallery__wrapper
    .woocommerce-product-gallery__image img {
        max-width: 100%;
    }
}

/* 6. 內容區下方標題（香氣介紹 / 香氣結構 / 商品特色 / 使用方式 / 注意事項）
 *   → 只要在 Gutenberg 裡幫標題加 class：product-page-section-title
 */
.woocommerce.single-product .product-page-section-title {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    margin: 42px 0 14px;
    display: flex;
    align-items: center;
}

/* 左邊那個 ▌ 的樣式 */
.woocommerce.single-product .product-page-section-title::before {
    content: "▌";
    color: #222;
    margin-right: 8px;
    font-size: 18px;
}

/* 7. 微調段落文字（讓商品說明稍微精緻一點，但仍保有 Muji 的簡潔） */
.woocommerce.single-product .entry-content p {
    line-height: 1.8;
    margin-bottom: 0.75em;
    font-size: 15px;
}





/* -----------------------------------------------------
   Footer 法律連結：置中、行內排列、分隔線、精品風
------------------------------------------------------ */

/* 讓 footer 選單置中排列 */
footer .ast-footer-widget-1 .menu,
footer .ast-footer-widget-2 .menu,
footer .ast-footer-widget-3 .menu {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 22px; 
	
	/* 連結間距 */
    padding: 0;
    margin: 16px 0;
    list-style: none;
}

/* 每個 li 改成 inline，給分隔線 */
footer .ast-footer-widget-1 .menu li,
footer .ast-footer-widget-2 .menu li,
footer .ast-footer-widget-3 .menu li {
    position: relative;
    padding: 0 10px;
}

/* 分隔線（最後一個不加） */
footer .ast-footer-widget-1 .menu li:not(:last-child)::after,
footer .ast-footer-widget-2 .menu li:not(:last-child)::after,
footer .ast-footer-widget-3 .menu li:not(:last-child)::after {
    content: "│";
    position: absolute;
    right: -3px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    font-size: 14px;
}

/* 文字樣式 */
footer .ast-footer-widget-1 .menu a,
footer .ast-footer-widget-2 .menu a,
footer .ast-footer-widget-3 .menu a {
    color: #444;
    font-size: 15px;
    letter-spacing: 0.5px;
    text-decoration: none;
}

footer .ast-footer-widget-1 .menu a:hover,
footer .ast-footer-widget-2 .menu a:hover,
footer .ast-footer-widget-3 .menu a:hover {
    color: #000;
}


/* Evergreen 導購頁 iframe 外層 */
.lovable-wrapper {
  width: 100%;
  max-width: 1200px;   /* 跟你內容寬度差不多就好，不喜歡可以刪掉這行 */
  margin: 0 auto;
}

/* iframe：拉高，讓它內部不用再出現捲軸 */
.lovable-frame {
  width: 100%;
  border: none;
  display: block;
  height: 2800px;      /* 覺得還不夠長就改成 3000、3200… */
}

/* 手機版：內容通常更長一點，給更高 */
@media (max-width: 768px) {
  .lovable-frame {
    height: 3600px;
  }
}