@charset "utf-8";
/*
 * RWD 響應式版面（搭配 default.css 使用）
 *   桌機  ≥ 1000px：維持原本 1000px 置中版面
 *   平板  768～999px：寬度隨螢幕縮放
 *   手機  < 768px：☰ 選單、分類移到上方、表格與表單改為直式
 */

/* ---------- 共用 ---------- */
html { -webkit-text-size-adjust: 100%; }
body { background-color: #F3E9A4; }
.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; }
.site-header *, .site-footer *, .layout-side, .side-menu, .side-content { box-sizing: border-box; }

/* 注意：top.php 沿用原本的 XHTML 1.0 Transitional 宣告，讓桌機版行高、表格圖片間距與原網站完全相同 */

/* ---------- 頁首 ---------- */
.site-header { height: 180px; }
.site-header__inner {
	position: relative;
	max-width: 1000px; height: 180px; margin: 0 auto;
	overflow: hidden;
}
.site-logo { position: absolute; left: 0; top: 0; width: 220px; height: 180px; }
.mainnav { position: absolute; top: 110px; right: 105px; display: flex; }
.mainnav a { display: block; line-height: 0; }
.nav-toggle { display: none; }

/* ---------- 主內容：沿用原本 <td align="center"> 的置中行為 ---------- */
.site-main__inner {
	max-width: 1000px; margin: 0 auto;
	text-align: center; text-align: -moz-center; text-align: -webkit-center;
}

/* 左側選單 + 內容（產品、配方介紹） */
.layout-side { display: flex; align-items: flex-start; width: 100%; max-width: 1000px; }
.side-menu {
	flex: 0 0 220px; width: 220px;
	background: url(images/bg_leftMenu.png) repeat-y left top;
	padding: 30px 0;
}
.side-menu--text { padding-left: 60px; }
.side-toggle { display: none; }
.side-content { flex: 1 1 auto; min-width: 0; padding: 10px 30px 0 30px; }

/* ---------- 產品列表：品名可點選進入明細頁 ---------- */
.pName__link { color: inherit; }
.pName__link:hover, .pName__link:focus { color: #F60; text-decoration: underline; }

/* ---------- 產品明細「我要訂購」按鈕 ---------- */
.btn-order {
	display: inline-block; padding: 8px 20px;
	background: #D7000F; color: #fff !important; border-radius: 4px;
	font-size: 15px; line-height: 1.4; font-weight: bold; white-space: nowrap;
	text-decoration: none;
}
.btn-order:hover, .btn-order:focus { background: #A8000B; color: #fff !important; }

/* ---------- 最新消息列表：日期附在主題後方（只在手機顯示） ---------- */
.news-list__inline-date { display: none; }

/* ---------- 產品列表：子類別標籤 ---------- */
.kind-tags { padding: 6px 4px; line-height: 1.6; }
.kind-tag {
	display: inline-block; margin: 3px 2px; padding: 3px 12px;
	border: 1px solid #8FC31F; border-radius: 999px;
	background: #fff; color: #360 !important;
	font-size: 14px; line-height: 1.6; white-space: nowrap; text-decoration: none;
}
.kind-tag:hover, .kind-tag:focus { background: #8FC31F; color: #fff !important; }
.kind-tag.is-active { background: #8FC31F; color: #fff !important; font-weight: bold; }

/* ---------- 彈跳視窗（付款登錄明細） ---------- */
.modal {
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center;
	padding: 16px; box-sizing: border-box;
	background: rgba(0, 0, 0, .45);
	text-align: left;
}
.modal[hidden] { display: none; }
.modal__dialog {
	width: 100%; max-width: 560px; max-height: calc(100vh - 32px);
	display: flex; flex-direction: column;
	background: #fff; border-radius: 8px; box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
	overflow: hidden;
}
.modal__header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 10px 12px 10px 16px; background: #8FC31F; color: #fff;
}
.modal__title { margin: 0; font-size: 17px; font-weight: bold; }
.modal__close {
	width: 36px; height: 36px; border: 0; border-radius: 50%;
	background: transparent; color: #fff; font-size: 28px; line-height: 36px; cursor: pointer;
}
.modal__close:hover, .modal__close:focus { background: rgba(255, 255, 255, .25); }
.modal__body { padding: 12px 16px 16px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
body.modal-open { overflow: hidden; }
.pay-detail { width: 100%; border-collapse: collapse; font-size: 15px; }
.pay-detail th, .pay-detail td { padding: 7px 8px; border-bottom: 1px solid #eee; vertical-align: top; line-height: 1.6; }
.pay-detail th { width: 1%; white-space: nowrap; text-align: right; font-weight: normal; color: #333; background: #F9F1BE; }
.pay-detail td { word-break: break-word; }

/* 商品資料標題（成份、說明、規格、售價、優惠價）不換行 */
.pcard .pTitle, .pdesc .pTitle { white-space: nowrap; }

/* ---------- 頁尾 ---------- */
.site-footer { background: #8FC31F; min-height: 30px; }
.site-footer__inner { max-width: 1000px; margin: 0 auto; text-align: left; }
.site-footer__notice { text-align: center; }   /* 頁尾歡迎詞與電話置中 */
.site-footer__row { display: flex; justify-content: space-between; flex-wrap: wrap; column-gap: 16px; }
.site-footer__links { text-align: right; }
.site-footer__links span { margin: 0 .6em; color: #fff; }

/* ---------- 平板 ---------- */
@media (max-width: 999px) {
	.mainnav { right: 0; }
	.site-main__inner, .site-footer__inner { padding-left: 12px; padding-right: 12px; }
	.side-content { padding: 10px 0 0 20px; }
	.site-main__inner table[width="940"], .site-main__inner table[width="1000"] { width: 100%; }
	.site-main__inner img { max-width: 100%; height: auto; }
}

/* 窄平板：6 個選單按鈕會碰到左側 logo，按鈕等比例縮小 */
@media (min-width: 768px) and (max-width: 879px) {
	.mainnav img { width: 88px; height: auto; }
}

/* ---------- 手機 ---------- */
@media (max-width: 767px) {
	/* 頁首：只顯示左側的品牌圖章，選單收進 ☰ */
	.site-header, .bg_head, .bg_menuTop { height: auto; }
	.site-header__inner {
		height: auto; min-height: 120px; padding-top: 120px;
		background-size: auto 120px; background-position: left top;
		overflow: visible;
	}
	.site-logo { width: 147px; height: 120px; }
	.nav-toggle {
		display: flex; align-items: center; gap: 8px;
		position: absolute; right: 12px; top: 66px;
		height: 38px; padding: 0 12px;
		border: 2px solid #fff; border-radius: 6px;
		background: #E95412; color: #fff;
		font-size: 16px; font-weight: bold; cursor: pointer;
	}
	.nav-toggle__icon { display: inline-flex; flex-direction: column; justify-content: space-between; width: 20px; height: 14px; }
	.nav-toggle__icon span { display: block; height: 2px; background: #fff; border-radius: 1px; }
	.mainnav {
		display: none; position: static;
		flex-direction: column; background: #E95412;
	}
	.mainnav.is-open { display: flex; }
	.mainnav a { padding: 6px 16px; border-top: 1px dashed rgba(255, 255, 255, .6); }

	/* 主內容 */
	/* 底部草地背景可見高度約 146px，內容留在草地上方並多留一點空白 */
	.bg_bottom { padding-top: 16px; padding-bottom: 170px; }
	.bg_bottomLeft { padding-bottom: 170px; }
	.site-main__inner { padding-left: 12px; padding-right: 12px; }

	/* 舊版固定寬度（表格、儲存格、圖片、後台編輯器內容）全部改為隨螢幕縮放 */
	.site-main__inner table[width]:not([width$="%"]) { width: 100% !important; }
	.site-main__inner table[style*="width"] { width: 100% !important; }
	.site-main__inner td[width]:not([width$="%"]) { width: auto; }
	.site-main__inner img { max-width: 100% !important; height: auto !important; }
	.site-main__inner iframe, .site-main__inner video { max-width: 100%; }
	.site-main__inner nobr { white-space: normal; }
	.site-main__inner td { word-break: break-word; }

	/* 表單欄位：撐滿寬度、字級 16px（避免 iPhone 輸入時自動放大畫面） */
	.site-main__inner input[type=text], .site-main__inner input[type=email], .site-main__inner input[type=tel],
	.site-main__inner textarea, .site-main__inner select { font-size: 16px; max-width: 100%; }
	.site-main__inner input[type=button], .site-main__inner input[type=submit], .site-main__inner input[type=reset] {
		font-size: 16px; padding: 6px 12px; margin: 4px 2px;
	}

	/* 左側分類改為內容上方的可展開區塊 */
	.layout-side { flex-direction: column; align-items: stretch; }
	.side-menu, .side-menu--text { flex: none; width: 100%; padding: 0; background: none; }
	.side-toggle {
		display: block; width: 100%; padding: 10px 12px;
		border: 0; border-radius: 6px;
		background: #8FC31F; color: #fff; font-size: 16px; font-weight: bold; text-align: left;
		cursor: pointer;
	}
	.side-toggle::after { content: "▼"; float: right; font-size: 12px; line-height: 22px; }
	.side-toggle[aria-expanded="true"]::after { content: "▲"; }
	.side-menu__list { display: none; margin-top: 6px; padding: 12px 0; background: #FBE574; border-radius: 6px; }
	.side-menu__list.is-open { display: block; }
	.side-menu__table { width: 100% !important; }
	.side-menu--text .side-menu__table td { text-align: center; }
	.side-content { padding: 12px 0 0 0; }

	/* 產品列表：縮小圖片欄 */
	.pcard__pic { width: 110px !important; padding-right: 10px; }
	.pcard .pTitle, .pdesc .pTitle { width: 1% !important; white-space: nowrap; }
	.pcard__more { display: none; }   /* 手機版列表只顯示品名、規格、售價 */
	.pcard .pPrice { white-space: nowrap; }

	/* 產品明細：圖片與說明上下排列 */
	.pdesc > tbody > tr > td { display: block; width: 100% !important; text-align: center; }
	.pdesc__info { text-align: left !important; padding-top: 12px; }

	/* 購物車明細：撐滿寬度，品名可換行，金額不換行 */
	.cart-table td:not(:first-child) { white-space: nowrap; }
	.cart-table { width: 100% !important; font-size: 14px; }

	/* 訂購人資料、聯絡表單：標題在上、欄位在下 */
	.form-grid, .form-grid > tbody, .form-grid > tbody > tr, .form-grid > tbody > tr > td,
	.form-stack, .form-stack > tbody, .form-stack > tbody > tr, .form-stack > tbody > tr > td {
		display: block; width: 100% !important; box-sizing: border-box;
	}
	.form-grid > tbody > tr > td.td1 { text-align: left; }
	.form-stack > tbody > tr > td { text-align: left !important; padding: 4px 0; height: auto !important; }
	.form-stack > tbody > tr > td[colspan] { text-align: center !important; }
	.form-grid input[type=text], .form-grid input[type=email], .form-grid input[type=tel], .form-grid textarea,
	.form-stack input[type=text], .form-stack textarea { width: 100%; box-sizing: border-box; }
	.form-stack input[name=Genpd] { width: 7em; }
	.form-grid > tbody > tr { margin-bottom: 2px; }

	/* 付款登錄查詢列表：撐滿寬度、字小一點，最窄的手機也放得下 */
	.pay-list { width: 100% !important; font-size: 13px; }
	.pay-list td { padding: 4px 2px !important; }

	/* 最新消息列表：移除標題列與日期欄，日期改放在主題後方 */
	.news-list__head, .news-list__date { display: none; }
	.news-list__inline-date { display: inline; color: #888; font-size: 13px; white-space: nowrap; }

	/* 最新消息內頁：「主題」「發佈日期」標題一行、內容下一行 */
	.news-meta, .news-meta > tbody, .news-meta > tbody > tr, .news-meta > tbody > tr > td { display: block; width: 100% !important; text-align: left; }
	.news-meta nobr { white-space: nowrap; }
	.news_style { width: 100% !important; }
	.news-meta > tbody > tr > td + td { padding-bottom: 8px; }

	/* 頁尾 */
	.site-footer__inner { padding: 8px 12px; }
	.site-footer__row { flex-direction: column-reverse; align-items: center; text-align: center; row-gap: 4px; }   /* 版權宣告放最下方 */
	.site-footer__links { text-align: center; line-height: 2; }
	.site-footer__links span { margin: 0 .3em; }
	.site-footer__links a { white-space: nowrap; }
}