/* ==========================================================================
   落地頁樣式——首屏為定稿 F（滿屏壓圖），以下区块沿用方案 C
   類名 fh- 前綴＝定稿 F 專屬，避免與舊樣式衝突
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body.mldi-landing{font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;font-size:16px;line-height:1.65;color:#333;background:#EDEBE7;padding-bottom:calc(64px + env(safe-area-inset-bottom))}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
.page{max-width:600px;margin:0 auto;background:#fff}
/* ---- 定稿 F：滿屏首屏 ---- */
.fh-hero{position:relative;height:100dvh;min-height:100dvh;overflow:hidden;background:#140f0c}
.fh-hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:30% 100%}
.fh-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,11,8,.82) 0%,rgba(16,11,8,.55) 28%,rgba(16,11,8,.05) 52%,rgba(16,11,8,0) 68%);pointer-events:none}
.fh-copy{position:relative;z-index:1;padding:28px 44px 0;max-width:760px;color:#f6f1ea}
.fh-brand{font-size:15px;font-weight:500;letter-spacing:.04em;color:#f6f1ea}
.fh-copy h1{margin-top:18px;font-size:72px;font-weight:700;line-height:1.12;letter-spacing:-.03em;max-width:9em;color:#f6f1ea}
.fh-sub{margin-top:14px;font-size:20px;font-weight:400;line-height:1.5;color:rgba(246,241,234,.92);max-width:22em}
.fh-buyrow{margin-top:26px;display:flex;align-items:center;gap:22px}
.fh-price{font-size:28px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#f6f1ea}
.fh-price span{margin-left:8px;font-size:16px;font-weight:500}
.fh-buy{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 32px;background:#f6f1ea;color:#140f0c;font-size:20px;font-weight:700;text-decoration:none;border-radius:0}
.fh-buy:hover{background:#fff}
.fh-buy:active{transform:translateY(1px)}
.fh-facts{margin-top:14px;font-size:14px;font-weight:400;color:rgba(246,241,234,.88)}
.fh-note{position:absolute;z-index:1;left:44px;bottom:22px;font-size:12px;color:rgba(246,241,234,.8);text-shadow:0 1px 8px rgba(16,11,8,.65)}
@media (max-width:800px){
  .fh-hero img{object-position:38% 64%}
  .fh-shade{background:linear-gradient(180deg,rgba(16,11,8,.86) 0%,rgba(16,11,8,.42) 18%,rgba(16,11,8,0) 34%)}
  .fh-copy{padding:22px 20px 0}
  .fh-copy h1{margin-top:14px;font-size:36px}
  .fh-sub{margin-top:10px;font-size:16px}
  .fh-buyrow{margin-top:18px;gap:14px}
  .fh-price{font-size:22px}
  .fh-buy{min-height:48px;padding:0 20px;font-size:16px}
  .fh-note{left:20px;bottom:calc(64px + env(safe-area-inset-bottom,0px) + 16px)} /* 避開手機底部固定條 */
}
/* ---- 以下為方案 C 的內容區（照片標籤、說明區、流程、結帳、頁尾）---- */
.ph-label{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:2px 7px;border-radius:3px}
/* sections */
.sec{padding:22px 14px}
.sec.alt{background:#FBF7EF}
.h2{font-size:20px;font-weight:900;color:#222;line-height:1.4;margin-bottom:10px}
.h2::before{content:"▼ ";color:#C2410C;font-size:15px;vertical-align:2px}
.lead{font-size:16px;color:#444;margin-bottom:12px}
mark{background:linear-gradient(transparent 58%,#FFE36B 58%);color:inherit;padding:0 1px}
.photo{position:relative}
.cap{font-size:15px;color:#333;margin:6px 0 0;line-height:1.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.pain .wide .cap{margin-bottom:4px}
.say{margin-top:14px;font-size:16px;background:#fff;border-left:4px solid #F2A541;padding:10px 12px;color:#444}
/* items */
.item{display:flex;gap:12px;padding:12px 0;border-bottom:1px dashed #ddd}
.item:last-child{border-bottom:0}
.item .thumb{flex:none;width:118px;position:relative}
.item .thumb img{aspect-ratio:1/1;object-fit:cover}
.item .thumb .ph-label{font-size:11px;right:4px;bottom:4px;padding:1px 5px}
.item h3{font-size:17px;font-weight:700;color:#222;line-height:1.4}
.item h3 em{font-style:normal;color:#C2410C}
.item p{font-size:15px;color:#555;line-height:1.6;margin-top:2px}
.honest{margin-top:16px;border:1px solid #E7DCC6;background:#fff;padding:12px 14px}
.honest b{display:block;font-size:16px;color:#7A5200;margin-bottom:4px}
.honest li{font-size:15px;color:#555;margin:3px 0 3px 1.2em}
/* steps */
.steps{list-style:none;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:8px 0 8px 40px;border-bottom:1px solid #f0ebe1;font-size:16px}
.steps li::before{content:counter(s);position:absolute;left:0;top:9px;width:28px;height:28px;border-radius:50%;background:#C2410C;color:#fff;font-weight:700;font-size:15px;display:grid;place-items:center}
.steps li small{display:block;color:#777;font-size:14px}
.note{font-size:14px;color:#777;margin-top:10px;line-height:1.6}
/* form */
.form{border:1px solid #e5e5e5;padding:14px;background:#fff}
.form .tag{display:inline-block;font-size:12px;color:#999;margin-bottom:8px}
.f{margin-bottom:12px}
.f label{display:block;font-size:15px;font-weight:700;color:#333;margin-bottom:4px}
.f label i{font-style:normal;color:#D9381E}
.f input,.f textarea{width:100%;border:1px solid #ccc;border-radius:3px;padding:10px;font-size:16px;font-family:inherit;background:#FAFAFA;color:#333}
.f textarea{height:60px;resize:none}
.opts{display:flex;flex-wrap:wrap;gap:6px}
.opt{border:1px solid #ccc;border-radius:3px;padding:7px 12px;font-size:15px;background:#fff}
.opt.on{border-color:#D9381E;color:#D9381E;background:#FFF6F2;font-weight:700}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #eee;padding-top:10px;margin-top:4px;font-size:16px}
.total b{color:#D9381E;font-size:24px;font-weight:900}
.submit{margin-top:10px;width:100%;min-height:52px;border:0;border-radius:4px;background:#D9381E;color:#fff;font-size:18px;font-weight:700;font-family:inherit}
.after{font-size:14px;color:#666;margin-top:8px;text-align:center}
/* footer */
.ft{background:#3B3632;color:#cfc8bf;font-size:13px;line-height:1.8;padding:18px 14px 26px}
.ft b{color:#fff;font-size:15px}
.ft a{color:#fff;text-decoration:underline;margin-right:10px}
.ft .todo{color:#FFC861}
/* bottom bar */
.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:0 0 env(safe-area-inset-bottom);background:#fff;border-top:1px solid #ddd}
.bar .in{max-width:600px;margin:0 auto;display:flex;height:64px;padding:7px 10px;gap:8px}
.bar a{display:flex;align-items:center;justify-content:center;border-radius:4px;font-weight:700}
.bar .l{flex:0 0 36%;border:1.5px solid #06C755;color:#06A64B;font-size:15px;gap:4px}
.bar .b{flex:1;background:#D9381E;color:#fff;font-size:17px;flex-direction:column;line-height:1.2}
.bar .b small{font-size:12px;font-weight:500;opacity:.92}
@media (min-width:700px){ .page{box-shadow:0 0 0 1px #e2ded7;margin-top:16px} }
@media (min-width:960px){
  .page{max-width:1080px}
  .sec{padding:30px calc((100% - 680px)/2)}
  .ft{padding:22px calc((100% - 680px)/2) 30px}
  .bar .in{max-width:1080px;justify-content:flex-end}
  .bar .l{flex:0 0 180px}.bar .b{flex:0 0 300px}
}

/* ==========================================================================
   新增：WordPress / WooCommerce 結帳區適配（同一套設計 token）
   ========================================================================== */

/* 錨點捲動留一點呼吸空間（首屏無吸頂 header） */
#order{scroll-margin-top:12px}

/* ---- 結帳表單：對齊 .f 欄位樣式 ---- */
.mldi-checkout form.checkout,
.mldi-checkout form.checkout *{box-sizing:border-box}
.mldi-checkout form.checkout{display:block}
.mldi-checkout form.checkout h3{display:none}
.mldi-checkout .woocommerce-billing-fields__field-wrapper,
.mldi-checkout .woocommerce-additional-fields__field-wrapper{display:block}
.mldi-checkout .form-row{float:none!important;width:100%;margin:0 0 12px;padding:0}
.mldi-checkout .form-row label{display:block;font-size:15px;font-weight:700;color:#333;margin-bottom:4px;line-height:1.5}
.mldi-checkout .form-row label .required{color:#D9381E;text-decoration:none}
.mldi-checkout .form-row input[type=text],
.mldi-checkout .form-row input[type=tel],
.mldi-checkout .form-row input[type=email],
.mldi-checkout .form-row input[type=password],
.mldi-checkout .form-row textarea{width:100%;border:1px solid #ccc;border-radius:3px;padding:10px;font-size:16px;font-family:inherit;background:#FAFAFA;color:#333;box-shadow:none;outline:none}
.mldi-checkout .form-row input:focus-visible,
.mldi-checkout .form-row textarea:focus-visible{border-color:#C2410C;background:#fff}
.mldi-checkout textarea{height:60px;resize:none}
.mldi-checkout .woocommerce-input-wrapper{display:block;width:100%}
.mldi-checkout ::placeholder{color:#999}

/* 落地頁上隱藏 Email（後台欄位保留，選填）與國家別 */
.mldi-checkout .mldi-email-row,
.mldi-checkout .mldi-country-row{display:none!important}
/* 選填後綴（條件必填的星號由 .mldi-required 提供，對齊設計稿） */
.mldi-checkout .form-row label .optional{display:none}

/* 單選選項改成設計稿的藥丸樣式（顏色／取貨方式共用） */
.mldi-checkout .woocommerce-radio-wrapper{display:flex;flex-wrap:wrap;gap:6px}
.mldi-checkout .woocommerce-radio-wrapper input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0}
.mldi-checkout .woocommerce-radio-wrapper input[type=radio]+label{display:inline-block;border:1px solid #ccc;border-radius:3px;padding:7px 12px;font-size:15px;background:#fff;font-weight:400;cursor:pointer;color:#333;margin:0}
.mldi-checkout .woocommerce-radio-wrapper input[type=radio]:checked+label{border-color:#D9381E;color:#D9381E;background:#FFF6F2;font-weight:700}
.mldi-checkout .woocommerce-radio-wrapper input[type=radio]:focus-visible+label{outline:2px solid #06A64B;outline-offset:1px}
.mldi-checkout .woocommerce-radio-wrapper label .required,
.mldi-checkout ul#shipping_method label .required{display:none}
.mldi-checkout ul#shipping_method{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0;padding:0}
.mldi-checkout ul#shipping_method li{margin:0;padding:0;line-height:inherit;text-indent:0}
.mldi-checkout ul#shipping_method input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0}
.mldi-checkout ul#shipping_method input[type=radio]+label{display:inline-block;border:1px solid #ccc;border-radius:3px;padding:7px 12px;font-size:15px;background:#fff;font-weight:400;cursor:pointer;color:#333;margin:0}
.mldi-checkout ul#shipping_method input[type=radio]:checked+label{border-color:#D9381E;color:#D9381E;background:#FFF6F2;font-weight:700}
.mldi-checkout ul#shipping_method input[type=radio]:focus-visible+label{outline:2px solid #06A64B;outline-offset:1px}
/* 取貨方式列（JS 重建的 .f 欄位） */
.mldi-checkout .f label i{font-style:normal;color:#D9381E}

/* 條件欄位：超商→門市、宅配→地址（body class 由 JS 切換） */
body.mldi-ship-pickup .mldi-checkout .mldi-address-row{display:none!important}
body.mldi-ship-home .mldi-checkout .mldi-store-row{display:none!important}
.mldi-checkout .mldi-store-row.mldi-required>label::after,
.mldi-checkout .mldi-address-row.mldi-required>label::after{content:" *";color:#D9381E}

/* ---- 訂單審查表：只留「合計（含運）」---- */
.mldi-checkout #order_review{width:100%}
.mldi-checkout table.shop_table{border:0;border-top:1px solid #eee;margin:4px 0 0;padding:0;background:transparent;border-collapse:collapse;width:100%}
.mldi-checkout table.shop_table thead,
.mldi-checkout table.shop_table tbody,
.mldi-checkout table.shop_table tfoot tr:not(.order-total),
.mldi-checkout table.shop_table tr.woocommerce-shipping-totals{display:none}
.mldi-checkout table.shop_table tfoot,
.mldi-checkout table.shop_table tfoot tr.order-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #eee;padding-top:10px;margin-top:4px;font-size:16px}
.mldi-checkout table.shop_table tfoot th,
.mldi-checkout table.shop_table tfoot td{border:0;padding:0;background:transparent;font-size:16px;font-weight:400;color:#333}
.mldi-checkout table.shop_table tfoot th{font-weight:400}
.mldi-checkout table.shop_table tfoot .order-total td,
.mldi-checkout table.shop_table tfoot .order-total strong{color:#D9381E;font-size:24px;font-weight:900}

/* ---- 付款方式與送出按鈕 ---- */
.mldi-checkout #payment{background:transparent;border-radius:0;border-top:0;padding:0;margin:0}
.mldi-checkout #payment ul.wc_payment_methods{border:1px solid #eee;padding:10px 12px;margin:0;list-style:none;background:#FAFAFA;border-radius:3px}
.mldi-checkout #payment ul.wc_payment_methods li{padding:0;margin:0;background:transparent}
.mldi-checkout #payment label{display:inline-flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:#333;margin:0}
.mldi-checkout #payment .payment_box p{font-size:14px;color:#777;margin:6px 0 0;line-height:1.5}
.mldi-checkout #payment .place-order{padding:10px 0 0}
.mldi-checkout #payment .place-order noscript{display:none}
.mldi-checkout #place_order,
.mldi-checkout .woocommerce-checkout .button{display:block;margin-top:10px;width:100%;min-height:52px;border:0;border-radius:4px;background:#D9381E;color:#fff;font-size:18px;font-weight:700;font-family:inherit;cursor:pointer;box-shadow:none;text-shadow:none;line-height:1.4;padding:12px}
.mldi-checkout #place_order:hover,
.mldi-checkout #place_order:focus{background:#C22F17}
.mldi-checkout .mldi-after-note{font-size:14px;color:#666;margin-top:8px;text-align:center}

/* ---- 驗證錯誤 / 提示 ---- */
.mldi-checkout .woocommerce-privacy-policy-text{margin:0}
.mldi-checkout .woocommerce-privacy-policy-text .privacy-note{font-size:13px;color:#999;margin:8px 0 0;line-height:1.5}
.mldi-checkout .woocommerce-privacy-policy-text a{color:#C2410C;text-decoration:underline}
.mldi-checkout .woocommerce-NoticeGroup,
.mldi-checkout .woocommerce-notices-wrapper{width:100%}
.mldi-checkout .woocommerce-error,
.mldi-checkout .woocommerce-info,
.mldi-checkout .woocommerce-message{list-style:none;margin:0 0 12px;padding:10px 12px;background:#FFF6F2;border:1px solid #F6D3C4;border-left:4px solid #D9381E;color:#7A2A1B;font-size:15px;line-height:1.6;border-radius:3px}
.mldi-checkout .woocommerce-error li{margin:2px 0}
.mldi-checkout .woocommerce-info{border-left-color:#C2410C;background:#FFF9F5;color:#7A5200}
.mldi-checkout .woocommerce-form-row .woocommerce-invalid input{border-color:#D9381E}

/* ---- 感謝頁（頁內結帳送出後落在本頁）---- */
.mldi-checkout .woocommerce-order-received__message,
.mldi-checkout .woocommerce-thankyou-order-received{background:#FFF6F2;border:1px solid #F6D3C4;color:#C2410C;font-size:17px;font-weight:700;padding:14px;margin:0 0 14px;border-radius:4px;text-align:center}
.mldi-checkout ul.woocommerce-thankyou-order-details,
.mldi-checkout .woocommerce-order-details,
.mldi-checkout .woocommerce-customer-details{font-size:15px}
.mldi-checkout .woocommerce-order-details h2,
.mldi-checkout .woocommerce-customer-details h2{font-size:17px;font-weight:700;color:#222;margin:14px 0 8px}
.mldi-checkout .woocommerce-order-details table.shop_table{display:table;border:1px solid #e5e5e5;padding:0;margin:0}
.mldi-checkout .woocommerce-order-details table.shop_table thead,
.mldi-checkout .woocommerce-order-details table.shop_table tbody,
.mldi-checkout .woocommerce-order-details table.shop_table tfoot,
.mldi-checkout .woocommerce-order-details table.shop_table tr{display:table-row}
.mldi-checkout .woocommerce-order-details table.shop_table th,
.mldi-checkout .woocommerce-order-details table.shop_table td{display:table-cell;border-top:1px solid #eee;padding:8px 10px;font-size:15px}
.mldi-checkout .woocommerce-order-overview{list-style:none;border:1px solid #F6D3C4;background:#FFF6F2;margin:0 0 14px;padding:12px;display:flex;flex-wrap:wrap;gap:8px 24px}
.mldi-checkout .woocommerce-order-overview li{font-size:14px;color:#555}

/* 結帳處理中遮罩文字 */
.mldi-checkout .blockOverlay{background:rgba(255,255,255,.6)!important}

/* 減少動態偏好 */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ---- MLDI-87 PDP 詳情長文 ---- */
.prose{max-width:42em;font-size:15px;color:#444;line-height:1.7}
.prose p{margin:0 0 10px}
.prose ul{margin:0 0 8px;padding-left:1.2em}
.prose li{margin:4px 0}
.prose a{color:#C2410C;text-decoration:underline}
.pdp-items{display:grid;gap:10px;margin-top:4px}
.pdp-card{border:1px solid #E7DCC6;background:#fff;padding:12px 14px}
.pdp-card h3{font-size:16px;font-weight:700;color:#222;margin:0 0 4px}
.pdp-card p{font-size:15px;color:#555;line-height:1.6;margin:0}
.qa{border-bottom:1px solid #f0ebe1;padding:10px 0}
.qa:last-child{border-bottom:0}
.qa h3{font-size:15px;font-weight:700;color:#222;margin:0 0 4px}
.qa p{font-size:15px;color:#555;line-height:1.6;margin:0}
/* 慢食首屏：無主圖時用深底＋文案 */
.fh-hero--slow{background:linear-gradient(165deg,#1a1510 0%,#2a2218 45%,#3d3226 100%);min-height:70dvh;height:auto;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:28px}
.fh-hero--slow .fh-shade{background:linear-gradient(180deg,rgba(16,11,8,.35) 0%,rgba(16,11,8,.55) 100%)}
.fh-hero--slow .fh-copy{position:relative;z-index:1}
.fh-hero--slow .fh-note{position:relative;left:auto;bottom:auto;margin:12px 44px 0;z-index:1}
@media (max-width:800px){
  .fh-hero--slow{min-height:auto;padding:8px 0 20px}
  .fh-hero--slow .fh-note{margin:10px 20px 0}
}


/* ---- 2026-10-13 台版產品圖：首屏 contain＋畫廊＋組合卡圖 ---- */
.fh-hero--product{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:24px;background:#1a1510}
.fh-hero--product > img{position:relative;inset:auto;width:100%;height:auto;max-height:min(72vh,720px);object-fit:contain;object-position:center;background:#f6f1ea}
.fh-hero--product .fh-shade{background:linear-gradient(180deg,rgba(16,11,8,.75) 0%,rgba(16,11,8,.35) 40%,rgba(16,11,8,.55) 100%)}
.fh-hero--product .fh-copy{position:relative;z-index:1}
.fh-hero--product .fh-note{position:relative;left:auto;bottom:auto;margin:10px 44px 0;z-index:1}
@media (max-width:800px){
  .fh-hero--product > img{max-height:min(52vh,480px)}
  .fh-hero--product .fh-note{margin:8px 20px 0}
}

.pdp-gallery{margin:0;padding:16px 14px 8px;background:#fff;border-bottom:1px solid #eee}
.pdp-gallery-main{position:relative;background:#f6f1ea;border:1px solid #E7DCC6;overflow:hidden}
.pdp-gallery-slide{display:none}
.pdp-gallery-slide.is-active{display:block}
.pdp-gallery-slide img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;background:#f6f1ea}
.pdp-gallery-cap{position:absolute;right:8px;bottom:8px;margin:0;background:rgba(0,0,0,.5);color:#fff;font-size:11px;padding:2px 7px;border-radius:3px}
.pdp-gallery-thumbs{display:flex;gap:8px;padding:10px 0 4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.pdp-thumb{flex:none;width:64px;height:64px;padding:0;border:2px solid #e5e5e5;border-radius:4px;background:#fff;cursor:pointer;overflow:hidden}
.pdp-thumb img{width:100%;height:100%;object-fit:contain;background:#f6f1ea}
.pdp-thumb[aria-current="true"]{border-color:#C2410C}
.pdp-thumb:focus-visible{outline:2px solid #06A64B;outline-offset:1px}
@media (min-width:960px){
  .pdp-gallery{padding:20px calc((100% - 680px)/2) 10px}
  .pdp-thumb{width:72px;height:72px}
}

.pdp-card-img{margin:0 0 8px;border:1px solid #f0ebe1;background:#f6f1ea;overflow:hidden}
.pdp-card-img img{width:100%;height:auto;aspect-ratio:1/1;object-fit:contain}
.pdp-items{grid-template-columns:1fr}
@media (min-width:700px){
  .pdp-items{grid-template-columns:1fr 1fr}
}