/* ==========================================================================
   喵羽森林 – 站台修正包 / 前台樣式
   由 wp-content/mu-plugins/meowingforest-fixes.php 載入
   ========================================================================== */

:root {
	--mf-brand: #445f5e;
	--mf-brand-dark: #2f4443;
	--mf-brand-soft: rgba(68, 95, 94, 0.08);
	--mf-line: rgba(68, 95, 94, 0.18);
}

/* --------------------------------------------------------------------------
   1. 產品詳細頁 – 移除規格區的灰底區塊
   -------------------------------------------------------------------------- */

.woocommerce div.product form.cart table.variations,
.woocommerce div.product form.cart table.variations tbody,
.woocommerce div.product form.cart table.variations tr,
.woocommerce div.product form.cart table.variations th,
.woocommerce div.product form.cart table.variations td,
.elementor-widget-woocommerce-product-add-to-cart table.variations th,
.elementor-widget-woocommerce-product-add-to-cart table.variations td,
.elementor-widget-woocommerce-product-add-to-cart table.variations th.label,
.elementor-widget-woocommerce-product-add-to-cart table.variations td.value {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

.woocommerce div.product form.cart table.variations th.label,
.elementor-widget-woocommerce-product-add-to-cart table.variations th.label {
	padding-left: 0 !important;
}

/* 變化商品的價格 / 庫存區塊也常帶灰底 */
.woocommerce div.product .woocommerce-variation,
.woocommerce div.product .single_variation_wrap,
.woocommerce div.product .woocommerce-variation-price {
	background: transparent !important;
}

/* --------------------------------------------------------------------------
   2. 產品詳細頁 – 頁籤（Elementor Nested Tabs）
      目前是灰底 + Elementor 預設綠，且選中的字會看不出來。
      改成品牌色的底線式頁籤，選中狀態一目了然。
   -------------------------------------------------------------------------- */

.single-product .elementor-widget-n-tabs .e-n-tabs {
	--n-tabs-title-color: var(--mf-brand);
	--n-tabs-title-color-hover: var(--mf-brand-dark);
	--n-tabs-title-color-active: var(--mf-brand-dark);
	--n-tabs-title-background-color: transparent;
	--n-tabs-title-background-color-hover: var(--mf-brand-soft);
	--n-tabs-title-background-color-active: transparent;
}

.single-product .elementor-widget-n-tabs .e-n-tabs-heading {
	justify-content: center;
	gap: 0 !important;
	border-bottom: 1px solid var(--mf-line);
	margin-bottom: 28px;
}

.single-product .elementor-widget-n-tabs .e-n-tab-title {
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	border-bottom: 3px solid transparent !important;
	padding: 12px 28px !important;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--mf-brand) !important;
	transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.single-product .elementor-widget-n-tabs .e-n-tab-title .e-n-tab-title-text {
	color: inherit !important;
	opacity: 1 !important;
}

.single-product .elementor-widget-n-tabs .e-n-tab-title:hover {
	background: var(--mf-brand-soft) !important;
	color: var(--mf-brand-dark) !important;
}

.single-product .elementor-widget-n-tabs .e-n-tab-title[aria-selected='true'],
.single-product .elementor-widget-n-tabs .e-n-tab-title.e-active {
	background: transparent !important;
	color: var(--mf-brand-dark) !important;
	border-bottom-color: var(--mf-brand) !important;
}

.single-product .elementor-widget-n-tabs .e-n-tab-title[aria-selected='true'] .e-n-tab-title-text,
.single-product .elementor-widget-n-tabs .e-n-tab-title.e-active .e-n-tab-title-text {
	color: var(--mf-brand-dark) !important;
}

/* --------------------------------------------------------------------------
   3. 產品詳細頁 – 產品規格（貨號 / 商品分類 / 品牌）置中
   -------------------------------------------------------------------------- */

.single-product .elementor-widget-woocommerce-product-meta .product_meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 10px;
	border: 0;
}

.single-product .elementor-widget-woocommerce-product-meta .product_meta > span {
	display: flex !important;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: center;
	gap: 4px 10px;
	width: 100%;
	max-width: 720px;
	margin: 0 auto;
	padding: 0;
	border: 0 !important;
	background: transparent !important;
	text-align: center;
}

.single-product .elementor-widget-woocommerce-product-meta .product_meta .detail-label {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: 0 !important;
	font-weight: 700;
	color: var(--mf-brand);
}

.single-product .elementor-widget-woocommerce-product-meta .product_meta .detail-content,
.single-product .elementor-widget-woocommerce-product-meta .product_meta .sku {
	flex: 0 1 auto !important;
	width: auto !important;
	text-align: center;
}

/* --------------------------------------------------------------------------
   4. 產品詳細頁 – 展示照片左右箭頭
   -------------------------------------------------------------------------- */

.woocommerce div.product .woocommerce-product-gallery,
.woocommerce div.product .woocommerce-product-gallery .flex-viewport {
	position: relative;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 9;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
	font-size: 0;
	line-height: 0;
	text-indent: 0;
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.woocommerce div.product .woocommerce-product-gallery:hover .flex-direction-nav a,
.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a:focus-visible {
	opacity: 1;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a::before,
.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a::after {
	content: '';
	display: block;
	width: 11px;
	height: 11px;
	border-left: 2px solid var(--mf-brand);
	border-bottom: 2px solid var(--mf-brand);
	font-size: 0;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a::after {
	display: none;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav .flex-prev {
	left: 14px;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav .flex-prev::before {
	transform: rotate(45deg);
	margin-left: 4px;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav .flex-next {
	right: 14px;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav .flex-next::before {
	transform: rotate(-135deg);
	margin-right: 4px;
}

.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav .flex-disabled {
	opacity: 0 !important;
	pointer-events: none;
}

/* 放大鏡按鈕做得明顯一點 */
.woocommerce div.product .woocommerce-product-gallery__trigger {
	z-index: 10;
	background: rgba(255, 255, 255, 0.92);
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.14);
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* --------------------------------------------------------------------------
   5. 站內搜尋浮層
   -------------------------------------------------------------------------- */

.mf-search-trigger {
	cursor: pointer;
}

.mf-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: flex-start;
	justify-content: center;
	padding: 14vh 20px 20px;
	background: rgba(28, 38, 37, 0.72);
	backdrop-filter: blur(3px);
}

.mf-search-overlay.is-open {
	display: flex;
	animation: mf-search-fade 0.18s ease-out;
}

@keyframes mf-search-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.mf-search-overlay__box {
	width: min(720px, 100%);
	background: #fff;
	border-radius: 10px;
	padding: 28px 24px 24px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
}

.mf-search-overlay__title {
	margin: 0 0 14px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--mf-brand);
}

.mf-search-overlay__form {
	display: flex;
	gap: 10px;
}

.mf-search-overlay__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--mf-line);
	border-radius: 6px;
	font-size: 16px;
	color: #222;
	background: #fff;
}

.mf-search-overlay__input:focus {
	outline: 2px solid var(--mf-brand);
	outline-offset: 1px;
}

.mf-search-overlay__submit {
	flex: 0 0 auto;
	height: 48px;
	padding: 0 26px;
	border: 0;
	border-radius: 6px;
	background: var(--mf-brand);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
}

.mf-search-overlay__submit:hover {
	background: var(--mf-brand-dark);
}

.mf-search-overlay__close {
	position: absolute;
	top: 22px;
	right: 24px;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.mf-search-overlay__close:hover {
	background: rgba(255, 255, 255, 0.26);
}

/* --------------------------------------------------------------------------
   5-2. Header 的「使用 Line 登入」按鈕
        （未登入才會出現；已登入時外掛不輸出內容，這裡再把空殼收掉）
   -------------------------------------------------------------------------- */

.mf-line-login .elementor-widget-container,
.mf-line-login .elementor-shortcode {
	line-height: 0;
}

.mf-line-login .linelogin-container {
	margin: 0 !important;
	display: inline-block;
}

.mf-line-login .linelogin-container-buttons {
	margin: 0 !important;
}

.mf-line-login .linelogin-button {
	height: 44px !important;
	border-radius: 999px !important;
	padding: 0 20px 0 8px !important;
	box-shadow: 0 2px 8px rgba(6, 199, 85, 0.28);
	transition: filter 0.2s ease;
}

.mf-line-login .linelogin-button:hover {
	filter: brightness(0.94);
}

.mf-line-login .linelogin-button-label-container {
	font-weight: 700;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

/* 已登入就不需要登入按鈕 */
body.logged-in .mf-line-login {
	display: none !important;
}

/* 登入／註冊表單裡的 Line 按鈕 */
.mf-line-login-form {
	margin-top: 18px;
	text-align: center;
}

.mf-line-login-form__sep {
	display: block;
	position: relative;
	margin-bottom: 14px;
	font-size: 13px;
	color: #8a8a8a;
}

.mf-line-login-form__sep::before,
.mf-line-login-form__sep::after {
	content: '';
	position: absolute;
	top: 50%;
	width: calc(50% - 22px);
	height: 1px;
	background: var(--mf-line);
}

.mf-line-login-form__sep::before {
	left: 0;
}

.mf-line-login-form__sep::after {
	right: 0;
}

.mf-line-login-form .linelogin-button {
	border-radius: 6px !important;
	height: 46px !important;
}

/* --------------------------------------------------------------------------
   6. 手機版
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* 6-1 header 三個 icon（搜尋 / 會員 / 購物車）置中 */
	header.elementor-location-header .elementor-element-36875f4 {
		justify-content: center !important;
		align-items: center !important;
		--justify-content: center;
		--align-items: center;
	}

	/* 6-2 漢堡選單展開後，選單項目置中 */
	.elementor-nav-menu--dropdown .elementor-item,
	.elementor-nav-menu--dropdown .elementor-sub-item {
		justify-content: center !important;
		text-align: center !important;
	}

	.elementor-nav-menu--dropdown .elementor-nav-menu--dropdown,
	.elementor-nav-menu__container.elementor-nav-menu--dropdown {
		text-align: center;
	}
}

@media (max-width: 767px) {
	/* 6-3 首頁三個服務項目（商品種類 / 線上商店 / 現金轉帳）置中 */
	.elementor-element-2ddb71b .e-con,
	.elementor-element-2ddb71b .e-con-inner {
		align-items: center !important;
		justify-content: center !important;
		text-align: center !important;
		--align-items: center;
		--justify-content: center;
	}

	.elementor-element-2ddb71b .elementor-widget-text-editor,
	.elementor-element-2ddb71b .elementor-widget-text-editor p {
		text-align: center !important;
	}

	.elementor-element-2ddb71b .elementor-widget-image,
	.elementor-element-2ddb71b .elementor-widget-image .elementor-widget-container {
		text-align: center !important;
	}

	/* 6-4 產品詳細頁：數量 + 加入購物車 置中 */
	.single-product .elementor-widget-woocommerce-product-add-to-cart form.cart,
	.single-product .elementor-widget-woocommerce-product-add-to-cart .woocommerce-variation-add-to-cart,
	.single-product div.product form.cart,
	.single-product div.product form.cart .woocommerce-variation-add-to-cart {
		display: flex !important;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center !important;
		gap: 12px;
	}

	.single-product .elementor-widget-woocommerce-product-add-to-cart form.cart .quantity,
	.single-product div.product form.cart .quantity {
		margin: 0 !important;
		float: none !important;
	}

	.single-product .elementor-widget-woocommerce-product-add-to-cart form.cart table.variations th.label,
	.single-product div.product form.cart table.variations th.label {
		text-align: left;
	}

	/* 6-5 兩個頁籤固定在最上方，不要變成上下堆疊的手風琴 */
	.single-product .elementor-widget-n-tabs .e-n-tabs {
		display: flex !important;
		flex-direction: column !important;
	}

	.single-product .elementor-widget-n-tabs .e-n-tabs-heading {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: center !important;
		order: -1 !important;
		width: 100%;
	}

	.single-product .elementor-widget-n-tabs .e-n-tabs-content {
		order: 1 !important;
		width: 100%;
	}

	.single-product .elementor-widget-n-tabs .e-n-tab-title {
		order: 0 !important;
		padding: 10px 18px !important;
		font-size: 15px;
	}

	.single-product .elementor-widget-n-tabs .e-n-tabs-content > .e-con {
		order: 1 !important;
	}

	/* 手機版箭頭直接顯示（沒有 hover） */
	.woocommerce div.product .woocommerce-product-gallery .flex-direction-nav a {
		opacity: 1;
		width: 38px;
		height: 38px;
	}
}