/**
Theme Name: Astra Child
Author: Brainstorm Force
Author URI: http://wpastra.com/about/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: astra-child
Template: astra
*/

/* ==========================================================================
   Shaka Manta 自訂 CSS
   所有 CSS 修改都放這裡，不要寫進 Customizer 的「額外 CSS」
   ========================================================================== */

/* Fix: show/hide password button（我的帳戶 / 結帳登入表單）
   背景：WooCommerce 新版把顯示密碼鈕從 <span> 改為 <button>，
   會繼承 Astra 全域按鈕樣式（湖水藍膠囊）。這段還原為右側小眼睛 icon。 */
.woocommerce form .password-input,
.woocommerce-page form .password-input {
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}
.woocommerce form .password-input input[type="password"],
.woocommerce-page form .password-input input[type="password"] {
	padding-right: 2.75em;
}
.woocommerce form .password-input input::-ms-reveal,
.woocommerce-page form .password-input input::-ms-reveal {
	display: none;
}
.woocommerce form .show-password-input,
.woocommerce-page form .show-password-input {
	position: absolute;
	right: 0.75em;
	top: 50%;
	transform: translateY(-50%);
	width: 1.5em;
	height: 1.5em;
	min-width: 0;
	min-height: 0;
	padding: 0;
	margin: 0;
	background: transparent none !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	color: inherit;
	cursor: pointer;
	line-height: 1;
	-webkit-appearance: none;
	appearance: none;
}
.woocommerce form .show-password-input::before,
.woocommerce-page form .show-password-input::before {
	content: "";
	display: block;
	width: 1.375em;
	height: 1.375em;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z" fill="%236A5340"/></svg>');
}
.woocommerce form .show-password-input.display-password::before,
.woocommerce-page form .show-password-input.display-password::before {
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M18.3 9.5C15 4.9 8.5 3.8 3.9 7.2C2.7 8.1 1.7 9.3 0.9 10.6C1.1 11 1.4 11.4 1.7 11.8C5 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.8 18.3 9.5ZM10.1 7.2C10.6 6.7 11.4 6.7 11.9 7.2C12.4 7.7 12.4 8.5 11.9 9C11.4 9.5 10.6 9.5 10.1 9C9.6 8.5 9.6 7.7 10.1 7.2ZM10 14.9C6.9 14.9 4 13.3 2.3 10.7C3.5 9 5.1 7.8 7 7.2C6.3 8 6 8.9 6 9.9C6 12.1 7.7 14 10 14C12.2 14 14.1 12.3 14.1 10V9.9C14.1 8.9 13.7 7.9 13 7.2C14.9 7.8 16.5 9 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z" fill="%236A5340"/></svg>');
}

/* ==========================================================================
   商品卡 v12（Loop Item 18377 / 18244）
   
   Blake 需在 Elementor 手動加的 CSS Class（進階 → CSS Classes）：
     - 最外層 container（Loop Item 18377 根）→ 加 sm-card
     - 包住「圖片 + 兩個 badge」的 container → 加 sm-photo-wrap
     - 商品圖 widget → 加 sm-photo
     - 商品標題 heading → 加 sm-card-title
     - 商品價格 heading → 加 sm-card-price
     - 售完 heading（如保留）→ 加 sm-sold（或整個刪掉，CSS 會自動用 .outofstock 產生旗幟）
   
   兩個 HTML widget（貝殼/魟魚 badge）內容已含 class，不用在 Elementor 加。
   ========================================================================== */

/* ----- 卡片根節點（定位錨） ----- */
.e-loop-item.product.sm-card,
.sm-card {
	position: relative;
	isolation: isolate;
}

/* ----- Photo wrap：包住圖片+兩個 badge；上浮動畫的那層 ----- */
.sm-card .sm-photo-wrap {
	position: relative;
	transition: transform 0.4s ease;
}
.sm-card:hover .sm-photo-wrap {
	transform: translateY(-5px) !important;
}

/* ----- 圖片外框：圓角、overflow、aspect-ratio ----- */
.sm-card .sm-photo > .elementor-widget-container,
.sm-card .sm-photo .elementor-widget-container {
	position: relative;
	overflow: hidden;
	border-radius: 28px 14px 28px 14px;
	transition: box-shadow 0.4s ease, border-radius 0.4s ease;
	aspect-ratio: 1 / 1;
}
.sm-card .sm-photo .elementor-widget-container > a,
.sm-card .sm-photo .elementor-widget-container > img,
.sm-card .sm-photo .elementor-widget-container > a > img {
	display: block;
	width: 100%;
	height: 100%;
}
.sm-card .sm-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}
@media (max-width: 767px) {
	.sm-card .sm-photo > .elementor-widget-container,
	.sm-card .sm-photo .elementor-widget-container {
		aspect-ratio: 2 / 3;
	}
}

/* ----- Hover：光暈 + 變形 ----- */
.sm-card:hover .sm-photo > .elementor-widget-container,
.sm-card:hover .sm-photo .elementor-widget-container {
	box-shadow: 0 0 0 2px #ecb950, 0 12px 32px rgba(90, 161, 175, 0.2);
	border-radius: 32px 10px 32px 10px;
}
.sm-card:hover .sm-photo img {
	transform: scale(1.06);
}

/* ----- Wave overlay（底部漸層 + SVG mask 咬進皮革底色） ----- */
.sm-card .sm-photo > .elementor-widget-container::before,
.sm-card .sm-photo .elementor-widget-container::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30%;
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(to bottom, transparent 0%, rgba(90, 161, 175, 0.35) 40%, rgba(43, 56, 93, 0.5) 100%);
	transition: opacity 0.4s ease;
}
.sm-card:hover .sm-photo > .elementor-widget-container::before,
.sm-card:hover .sm-photo .elementor-widget-container::before {
	opacity: 0.4;
}
.sm-card .sm-photo > .elementor-widget-container::after,
.sm-card .sm-photo .elementor-widget-container::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 18%;
	pointer-events: none;
	z-index: 3;
	background: #6A5340;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C80,0 160,100 240,50 C320,0 360,80 400,60 L400,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C80,0 160,100 240,50 C320,0 360,80 400,60 L400,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* ----- Badge：貝殼（特惠）/ 魟魚（新品）共用 ----- */
.sm-card .sm-badge {
	position: absolute;
	z-index: 4;
	display: flex !important;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
	transition: filter 0.3s ease;
	pointer-events: none;
	margin: 0;
	padding: 0;
}
.sm-card:hover .sm-badge {
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}
.sm-card .sm-badge svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.sm-card .sm-badge span {
	position: relative;
	z-index: 1;
	font-size: 0.85rem;
	line-height: 1;
	text-align: center;
	font-family: "Huninn", "Noto Sans TC", sans-serif;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* 貝殼（特惠）：左下 */
.sm-card .sm-badge-shell {
	width: 45px;
	height: 45px;
	bottom: -3px;
	left: -10px;
	opacity: 0.95;
}
.sm-card .sm-badge-shell span {
	color: #3a2510;
	margin-right: 2px;
}

/* 魟魚（新品）：右下 */
.sm-card .sm-badge-manta {
	width: 55px;
	height: 55px;
	bottom: -3px;
	right: -10px;
	opacity: 0.95;
}
.sm-card .sm-badge-manta span {
	color: #ffffff;
	margin-bottom: 2px;
}

/* ----- 售完旗幟：純 CSS 靠 WooCommerce 的 .outofstock class ----- */
.e-loop-item.product.outofstock.sm-card::before,
.sm-card.outofstock::before {
	content: "售完";
	position: absolute;
	top: 8px;
	left: 0;
	z-index: 5;
	font-family: "Huninn", "Noto Sans TC", sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
	background: #2b385d;
	color: #f5dca2;
	padding: 5px 16px 5px 10px;
	clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
	pointer-events: none;
	line-height: 1;
}

/* 如果 Elementor 裡保留「售完 !」heading widget，把它藏起來改用 CSS 旗幟 */
.sm-card .sm-sold {
	display: none !important;
}

/* ----- 卡名 / 卡價 typography ----- */
.sm-card .sm-card-title,
.sm-card .sm-card-title .elementor-heading-title,
.sm-card .sm-card-title a {
	font-size: 0.85rem !important;
	color: #f5dca2 !important;
	line-height: 1.55 !important;
	font-family: "Huninn", "Noto Sans TC", sans-serif !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
}
.sm-card .sm-card-price,
.sm-card .sm-card-price .elementor-heading-title {
	font-size: 0.75rem !important;
	color: #bc916d !important;
	letter-spacing: 0.05em !important;
	font-family: "Huninn", "Noto Sans TC", sans-serif !important;
	font-weight: 400 !important;
}
.sm-card .sm-card-price s,
.sm-card .sm-card-price del {
	color: #684c43 !important;
	margin-right: 4px;
	font-size: 0.68rem;
}

/* ==========================================================================
   商品卡 v12 — 修正版（對應 Elementor v4 實際 DOM）
   取代先前 append 的同功能區塊（同選擇器會被這裡覆蓋；舊的留著也不衝突）
   ========================================================================== */

/* ----- 卡片根節點（定位錨） ----- */
.e-loop-item.product.sm-card,
.sm-card {
	position: relative;
	isolation: isolate;
}

/* ----- Photo wrap：絕對定位錨 + 收回 Container 預設樣式 ----- */
.sm-card .sm-photo-wrap {
	position: relative !important;
	transition: transform 0.4s ease;
	padding: 0 !important;
}
.sm-card .sm-photo-wrap > .e-con-inner {
	padding: 0 !important;
	gap: 0 !important;
	position: static;
}
.sm-card:hover .sm-photo-wrap {
	transform: translateY(-5px) !important;
}

/* ----- 圖片 widget：v4 沒有 .elementor-widget-container，直接套在 widget 上 ----- */
.sm-card .sm-photo {
	position: relative !important;
	overflow: hidden !important;
	border-radius: 28px 14px 28px 14px !important;
	transition: box-shadow 0.4s ease, border-radius 0.4s ease !important;
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	contain: paint !important;
	transform: translateZ(0);
}
.sm-card .sm-photo > a,
.sm-card .sm-photo > .elementor-widget-container,
.sm-card .sm-photo > .elementor-widget-container > a {
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	line-height: 0;
}
.sm-card .sm-photo img {
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.4s ease !important;
	border-radius: 0 !important;
}
@media (max-width: 767px) {
	.sm-card .sm-photo img {
		aspect-ratio: 2 / 3 !important;
	}
}

/* ----- Hover：光暈 + 圖片放大 ----- */
.sm-card:hover .sm-photo {
	box-shadow: 0 0 0 2px #ecb950, 0 0 16px rgba(236, 185, 80, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4) !important;
	border-radius: 32px 10px 32px 10px !important;
}
.sm-card:hover .sm-photo img {
	transform: scale(1.06) !important;
}

/* ----- Wave overlay ----- */
.sm-card .sm-photo::before {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 30%;
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(to bottom, transparent 0%, rgba(90, 161, 175, 0.35) 40%, rgba(43, 56, 93, 0.5) 100%);
	transition: opacity 0.4s ease;
}
.sm-card:hover .sm-photo::before {
	opacity: 0.4;
}
.sm-card .sm-photo::after {
	content: "";
	position: absolute;
	bottom: -1px;
	left: 0;
	width: 100%;
	height: 18%;
	pointer-events: none;
	z-index: 3;
	background: #6A5340;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C80,0 160,100 240,50 C320,0 360,80 400,60 L400,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 120' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C80,0 160,100 240,50 C320,0 360,80 400,60 L400,120 L0,120 Z' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* ----- HTML widget 包裝：脫離 flow，絕對定位撐滿 sm-photo-wrap ----- */
.sm-card .sm-photo-wrap .elementor-widget-html {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	pointer-events: none !important;
	z-index: 4 !important;
}
.sm-card .sm-photo-wrap .elementor-widget-html > .elementor-widget-container {
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
}

/* ----- Badge 本體 ----- */
.sm-card .sm-badge {
	position: absolute;
	z-index: 4;
	display: flex !important;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
	transition: filter 0.3s ease;
	pointer-events: none;
	margin: 0;
	padding: 0;
}
.sm-card:hover .sm-badge {
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
}
.sm-card .sm-badge svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.sm-card .sm-badge span {
	position: relative;
	z-index: 1;
	font-size: 0.85rem;
	line-height: 1;
	text-align: center;
	font-family: "Huninn", "Noto Sans TC", sans-serif;
	font-weight: 700;
	letter-spacing: 0.02em;
}

/* 貝殼（特惠）：左下 */
.sm-card .sm-badge-shell {
	width: 45px;
	height: 45px;
	bottom: -3px;
	left: -10px;
	opacity: 0.95;
}
.sm-card .sm-badge-shell span {
	color: #3a2510;
	margin-right: 2px;
}

/* 魟魚（新品）：右下 */
.sm-card .sm-badge-manta {
	width: 55px;
	height: 55px;
	bottom: -3px;
	right: -10px;
	opacity: 0.95;
}
.sm-card .sm-badge-manta span {
	color: #ffffff;
	margin-bottom: 2px;
}

/* ----- 售完旗幟（靠 loop item 的 .outofstock） ----- */
.e-loop-item.outofstock.product .sm-card::before,
.e-loop-item.outofstock .sm-card::before {
	content: "售完";
	position: absolute;
	top: 8px;
	left: 0;
	z-index: 5;
	font-family: "Huninn", "Noto Sans TC", sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	white-space: nowrap;
	background: #2b385d;
	color: #f5dca2;
	padding: 5px 16px 5px 10px;
	clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
	pointer-events: none;
	line-height: 1;
}

/* 藏掉舊的「售完 !」heading（如果還保留著並加了 sm-sold class） */
.sm-card .sm-sold {
	display: none !important;
}

/* ==========================================================================
   Hotfix 1.0.4：售完旗幟被 Elementor Container ::before 的 inset:0 拉成巨大遮罩
   重置所有 inset / width / height 為 auto
   ========================================================================== */

.e-loop-item.outofstock.product .sm-card::before,
.e-loop-item.outofstock .sm-card::before,
.sm-card.outofstock::before {
	content: "售完" !important;
	position: absolute !important;
	top: 8px !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	width: auto !important;
	height: auto !important;
	inset: auto !important;
	z-index: 5 !important;
	font-family: "Huninn", "Noto Sans TC", sans-serif !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.08em !important;
	white-space: nowrap !important;
	background: #2b385d !important;
	color: #f5dca2 !important;
	padding: 5px 16px 5px 10px !important;
	clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%) !important;
	pointer-events: none !important;
	line-height: 1 !important;
	display: block !important;
	transform: none !important;
}

/* ==========================================================================
   商品卡 badge / 波浪 — 整合後最終狀態（Hotfix 1.0.5–1.0.23 合併）
   ========================================================================== */

/* Badge 文字大小 + 粗體 */
.sm-card .sm-badge span {
	font-size: 0.81rem !important;
	font-weight: 700 !important;
}
@media (max-width: 767px) {
	.sm-card .sm-badge span {
		font-size: 0.68rem !important;
	}
}

/* Badge 透明度 */
.sm-card .sm-badge-shell,
.sm-card .sm-badge-manta {
	opacity: 0.95 !important;
}

/* 手機版 Badge 縮小 */
@media (max-width: 767px) {
	.sm-card .sm-badge-shell {
		width: 37px !important;
		height: 37px !important;
	}
	.sm-card .sm-badge-manta {
		width: 47px !important;
		height: 47px !important;
	}
}

/* 貝殼 badge 尺寸 */
.sm-card .sm-badge-shell {
	width: 50px !important;
	height: 50px !important;
}
@media (max-width: 767px) {
	.sm-card .sm-badge-shell {
		width: 42px !important;
		height: 42px !important;
	}
}

/* 特惠文字 leather 棕 */
.sm-card .sm-badge-shell span {
	color: #6A5340 !important;
}

/* 售完小魚：右上角 / sold-fish-mid.svg / #503D2E / opacity 0.95 */
.e-loop-item.outofstock.product .sm-card::before,
.e-loop-item.outofstock .sm-card::before,
.sm-card.outofstock::before {
	content: "售完" !important;
	position: absolute !important;
	top: 8px !important;
	left: auto !important;
	right: -15px !important;
	bottom: auto !important;
	inset: auto !important;
	width: 80px !important;
	height: 38px !important;
	z-index: 5 !important;
	background: url("./assets/sold-fish-mid.svg") no-repeat left center / auto 38px !important;
	clip-path: none !important;
	font-family: "Huninn", "Noto Sans TC", sans-serif !important;
	font-size: 0.72rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	white-space: nowrap !important;
	color: #503D2E !important;
	opacity: 0.95 !important;
	padding: 0 14px 0 28px !important;
	text-align: center !important;
	pointer-events: none !important;
	line-height: 38px !important;
	display: block !important;
	transform: none !important;
}
@media (max-width: 767px) {
	.e-loop-item.outofstock.product .sm-card::before,
	.e-loop-item.outofstock .sm-card::before,
	.sm-card.outofstock::before {
		right: -12px !important;
		padding: 0 10px 0 22px !important;
	}
}

/* 商品價格：香草奶油 92% */
.sm-card .sm-card-price,
.sm-card .sm-card-price .elementor-heading-title,
.sm-card .sm-card-price a,
.sm-card .sm-card-price .woocommerce-Price-amount,
.sm-card .sm-card-price .woocommerce-Price-currencySymbol {
	color: rgba(245, 220, 162, 0.92) !important;
}
.sm-card .sm-card-price s,
.sm-card .sm-card-price del,
.sm-card .sm-card-price s .woocommerce-Price-amount,
.sm-card .sm-card-price del .woocommerce-Price-amount {
	color: rgba(245, 220, 162, 0.92) !important;
}

/* 波浪 contain + 最終狀態（深藍 #2b385d / opacity 0.90 / no blur / bottom 0） */
.sm-card .sm-photo {
	contain: paint !important;
}
.sm-card .sm-photo::after {
	background: #2b385d !important;
	opacity: 0.90 !important;
	filter: none !important;
	bottom: 0 !important;
}

/* 漸層 ::before：透明 → 湖水藍 0.10 → 深藍 0.28，高 30%，opacity 1 */
.sm-card .sm-photo::before {
	height: 30% !important;
	background: linear-gradient(to bottom, transparent 0%, rgba(90, 161, 175, 0.10) 45%, rgba(43, 56, 93, 0.28) 100%) !important;
	opacity: 1 !important;
	filter: none !important;
	bottom: 0 !important;
}

/* 手機圖片比例 3:4 */
@media (max-width: 767px) {
	.sm-card .sm-photo img,
	.sm-card .sm-photo .elementor-widget-container,
	.sm-card .sm-photo > .elementor-widget-container {
		aspect-ratio: 3 / 4 !important;
	}
}

   商品分類卡片（Loop Item 18244）v1
   Blake 需在 Elementor 加的 CSS Classes（進階 → CSS Classes）：
     - 根 Container → sm-cat-card
     - 圖片 widget   → sm-cat-img
     - 中文標題 heading → sm-cat-label-zh
     - 英文標題 heading → sm-cat-label-en（新增，綁 category slug 或自訂欄位）
   ========================================================================== */

/* 根容器：圓角、overflow、flex column */
.sm-cat-card {
	position: relative !important;
	border-radius: 28px 14px 28px 14px !important;
	overflow: hidden !important;
	display: flex !important;
	flex-direction: column !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
	transition: transform 0.35s ease, box-shadow 0.35s ease, border-radius 0.35s ease !important;
	cursor: pointer !important;
	padding: 0 !important;
	gap: 0 !important;
	background: #2b385d !important;
	contain: paint;
}
.sm-cat-card:hover {
	transform: translateY(-5px) !important;
	box-shadow: 0 0 0 2px #ecb950, 0 0 16px rgba(236, 185, 80, 0.45), 0 12px 32px rgba(0, 0, 0, 0.4) !important;
	border-radius: 32px 10px 32px 10px !important;
}

/* 圖片區：aspect-ratio + 底部漸層 */
.sm-cat-card .sm-cat-img {
	position: relative !important;
	overflow: hidden !important;
	background: #2b385d !important;
	width: 100% !important;
	aspect-ratio: 1 / 1 !important;
	flex-shrink: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}
@media (max-width: 767px) {
	.sm-cat-card .sm-cat-img {
		aspect-ratio: 4 / 5 !important;
	}
}
.sm-cat-card .sm-cat-img,
.sm-cat-card .sm-cat-img .elementor-widget-container,
.sm-cat-card .sm-cat-img a {
	display: block;
	width: 100%;
	height: 100%;
	line-height: 0;
}
.sm-cat-card .sm-cat-img img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	transition: transform 0.4s ease !important;
	border-radius: 0 !important;
}
.sm-cat-card:hover .sm-cat-img img {
	transform: scale(1.06) !important;
}

/* 圖片底部漸層覆蓋 */
.sm-cat-card .sm-cat-img::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 45%;
	background: linear-gradient(to bottom, transparent 0%, rgba(90, 161, 175, 0.15) 50%, rgba(43, 56, 93, 0.5) 100%);
	pointer-events: none;
	z-index: 1;
}

/* 標籤區（深藍底，包含中英文） */
.sm-cat-card .sm-cat-label-zh,
.sm-cat-card .sm-cat-label-en {
	background: #2b385d !important;
	text-align: center !important;
	margin: 0 !important;
	position: relative !important;
	z-index: 2 !important;
}
.sm-cat-card .sm-cat-label-zh {
	padding: 14px 12px 2px !important;
}
.sm-cat-card .sm-cat-label-zh .elementor-heading-title {
	color: #f5dca2 !important;
	font-size: 0.95rem !important;
	line-height: 1.3 !important;
	font-family: "Huninn", "Noto Sans TC", sans-serif !important;
	font-weight: 400 !important;
}
.sm-cat-card .sm-cat-label-en {
	padding: 0 12px 16px !important;
}
.sm-cat-card .sm-cat-label-en .elementor-heading-title {
	color: #5aa1af !important;
	font-size: 0.55rem !important;
	letter-spacing: 0.18em !important;
	opacity: 0.8 !important;
	font-family: "Huninn", "Noto Sans TC", sans-serif !important;
	font-weight: 400 !important;
	text-transform: uppercase;
}

/* 波浪接縫：放在中文標題的上緣，擋住圖片底與深藍標籤交界 */
.sm-cat-card .sm-cat-label-zh::before {
	content: "";
	position: absolute;
	top: -18px;
	left: 0;
	width: 100%;
	height: 22px;
	pointer-events: none;
	z-index: 3;
	background: #2b385d;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 36' preserveAspectRatio='none'%3E%3Cpath d='M0,18 C80,3 160,33 240,17 C320,1 360,27 400,18 L400,36 L0,36 Z' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 36' preserveAspectRatio='none'%3E%3Cpath d='M0,18 C80,3 160,33 240,17 C320,1 360,27 400,18 L400,36 L0,36 Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* 如果只有中文 heading（沒有加英文），仍然正常顯示 */
.sm-cat-card .sm-cat-label-zh:last-child {
	padding-bottom: 16px !important;
}


/* 分類卡英文副標（JS 切分用；原分類名為「中文 English」時下行顯示英文） */
.sm-cat-card .sm-cat-label-zh .elementor-heading-title .sm-cat-en-inline {
	display: inline-block !important;
	margin-top: 4px !important;
	color: #5aa1af !important;
	font-size: 0.55rem !important;
	letter-spacing: 0.18em !important;
	opacity: 0.8 !important;
	font-weight: 400 !important;
	text-transform: uppercase !important;
	font-family: "Huninn", "Noto Sans TC", sans-serif !important;
	line-height: 1.2 !important;
}


/* ==========================================================================
   平板直式（768 ~ 1024px）.ast-container 左右 padding 15%
   覆蓋 Astra 預設 20px / page-builder-template 的 0 padding
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
	body.woocommerce-cart .ast-container,
	body.woocommerce-checkout .ast-container,
	body.woocommerce-account .ast-container {
		padding-left: 15% !important;
		padding-right: 15% !important;
	}
}


/* ==========================================================================
   購物車 / 結帳頁改版 — 整合版 2026-05-01
   來源：原始 R1 ~ R10 + R-mobile-fixes-1 ~ 19 共 20+ 個迭代區塊
   重新分類成 7 個命名區，砍掉所有死碼（被後面 fix 取代的中間態）
   ========================================================================== */


/* ==========================================================================
   §1. 透明 / 移除底色（cart + checkout 共用）
   ========================================================================== */

/* 購物車：商品表頭 + cart_totals 標題 + 折價券/數量 input — 白底改透明 */
.woocommerce-cart table.shop_table thead,
.woocommerce-cart table.shop_table thead th,
.woocommerce-cart .cart_totals h2,
.woocommerce-cart .cart_totals table.shop_table thead,
.woocommerce-cart .cart_totals table.shop_table thead th {
	background: transparent !important;
}
.woocommerce-cart table.shop_table td.actions .coupon input.input-text,
.woocommerce-cart table.shop_table input.qty,
.woocommerce-cart .quantity input.qty {
	background: transparent !important;
	color: #f5dca2 !important;
	border: 1px solid rgba(245, 220, 162, 0.45) !important;
}
.woocommerce-cart table.shop_table td.actions .coupon input.input-text::placeholder {
	color: rgba(245, 220, 162, 0.55) !important;
}

/* 結帳頁：付款區 + 條款區 wrapper + 條款 inner div + woomp #placeOrderWrap
   — 一律拿掉 Astra parent / WC core / woomp 套的灰白底 */
.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout #placeOrderWrap {
	background: transparent !important;
}
.woocommerce-checkout .woocommerce-terms-and-conditions {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}


/* ==========================================================================
   §2. 購物車頁（桌面 + 共用）
   ========================================================================== */

/* 主商品表格：1.5px solid cream 外框 + 16px 圓角 */
body.woocommerce-cart .woocommerce-cart-form table.shop_table {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border: 1.5px solid #f8d9a8 !important;
	border-radius: 16px !important;
	overflow: hidden !important;
}
body.woocommerce-cart .woocommerce-cart-form table.shop_table th,
body.woocommerce-cart .woocommerce-cart-form table.shop_table td {
	border-top: 1.5px dashed #f8d9a8 !important;
}
/* 第一列（thead 或 tbody 開頭）no border-top — 避免疊到圓角外框 */
body.woocommerce-cart .woocommerce-cart-form table.shop_table thead tr:first-child th,
body.woocommerce-cart .woocommerce-cart-form table.shop_table thead tr:first-child td,
body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody:first-child tr:first-child th,
body.woocommerce-cart .woocommerce-cart-form table.shop_table tbody:first-child tr:first-child td {
	border-top: 0 !important;
}
body.woocommerce-cart .woocommerce-cart-form table.shop_table td.actions {
	padding-bottom: 1em !important;
}

/* 購物車總計：外框 1.5px solid + 16px 圓角；內表格 1.5px dashed + 16px 圓角 */
body.woocommerce-cart .cart_totals {
	border: 1.5px solid #f8d9a8 !important;
	border-radius: 16px !important;
}
body.woocommerce-cart .cart_totals table.shop_table {
	border-collapse: separate !important;
	border-spacing: 0 !important;
	border: 1.5px dashed #f8d9a8 !important;
	border-radius: 16px !important;
	overflow: hidden !important;
}
body.woocommerce-cart .cart_totals table.shop_table th,
body.woocommerce-cart .cart_totals table.shop_table td {
	border-top: 1.5px dashed #f8d9a8 !important;
}
body.woocommerce-cart .cart_totals table.shop_table tbody tr:first-child th,
body.woocommerce-cart .cart_totals table.shop_table tbody tr:first-child td {
	border-top: 0 !important;
}

/* 運送方式 ::before label 改 block + 左對齊；運送方式 ul/li 強制左對齊 */
body.woocommerce-cart .cart_totals table.shop_table tr.shipping td:before {
	float: none !important;
	display: block !important;
	margin-bottom: 4px !important;
	text-align: left !important;
}
body.woocommerce-cart .cart_totals table.shop_table tr.shipping td ul#shipping_method,
body.woocommerce-cart .cart_totals table.shop_table tr.shipping td ul#shipping_method li {
	text-align: left !important;
}

/* 運送至 / 變更地址 一律靠左 + 縮短 destination 段落底部 margin */
body.woocommerce-cart .cart_totals table.shop_table tr.shipping td .woocommerce-shipping-destination,
body.woocommerce-cart .cart_totals table.shop_table tr.shipping td .woocommerce-shipping-calculator {
	text-align: left !important;
}
body.woocommerce-cart .cart_totals table.shop_table tr.shipping td .woocommerce-shipping-destination {
	margin-block-end: 5px !important;
	margin-bottom: 5px !important;
}

/* 前往結帳 button 下方 margin */
body.woocommerce-cart .cart_totals .wc-proceed-to-checkout .checkout-button,
body.woocommerce-cart .cart_totals a.checkout-button {
	margin-bottom: 5px !important;
}


/* ==========================================================================
   §3. 購物車頁（手機 ≤768px 卡片 grid 排版）
   詳細坑表見 skill: shaka-manta-plugin-dev §1.12 / §1.13
   ========================================================================== */

@media (max-width: 1024px) { /* 1024 含括 iPad Mini / Air / Pro portrait — 平板都吃 mobile card layout */

	/* §3.1 主商品表格 — table → block；thead 隱藏 */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table > tbody,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table > tbody > tr,
	body.woocommerce-cart .woocommerce-cart-form table.shop_table > tbody > tr > td {
		display: block !important;
		width: auto !important;
	}
	body.woocommerce-cart .woocommerce-cart-form table.shop_table thead {
		display: none !important;
	}

	/* §3.2 tr.cart_item = 3 欄 grid（圖片 100px | 內容 1fr | × auto），2 列 */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item {
		display: grid !important;
		grid-template-columns: 100px 1fr auto !important;
		grid-template-rows: auto auto !important;
		grid-template-areas: none !important;
		column-gap: 14px !important;
		row-gap: 4px !important;
		padding: 16px !important;
		border-top: 1.5px dashed #f8d9a8 !important;
		align-items: center;
	}
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item:first-of-type {
		border-top: 0 !important;
	}

	/* td 通用：清掉 WC core smallscreen 的 text-align: right + ::before label */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item > td {
		border: 0 !important;
		padding: 0 !important;
		text-align: left !important;
	}
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item > td::before {
		content: none !important;
		display: none !important;
	}

	/* §3.3 各 td 顯式 grid 位置（不依賴 grid-template-areas，避免 parser 陷阱）*/
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item td.product-thumbnail {
		grid-column: 1 !important;
		grid-row: 1 / span 2 !important;
	}
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item td.product-name {
		grid-column: 2 !important;
		grid-row: 1 !important;
		align-self: end !important;
	}
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item td.product-quantity {
		grid-column: 2 !important;
		grid-row: 2 !important;
		align-self: start !important;
	}
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item td.product-remove {
		grid-column: 3 !important;
		grid-row: 1 !important;
		align-self: start !important;
		text-align: right !important;
	}
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item td.product-subtotal {
		grid-column: 3 !important;
		grid-row: 2 !important;
		align-self: start !important;
		text-align: right !important;
	}
	/* 單價 td 隱藏（小計已包含總額）*/
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item td.product-price {
		display: none !important;
	}

	/* §3.4 圖片 100% 填 thumb 欄 + 8px 圓角 */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item td.product-thumbnail img {
		display: block !important;
		width: 100% !important;
		max-width: 100px !important;
		height: auto !important;
		margin: 0 !important;
		border-radius: 8px !important;
	}

	/* §3.5 數量 input 緊湊 */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr.cart_item td.product-quantity input.qty {
		width: 60px !important;
		padding: 6px !important;
		text-align: center !important;
	}

	/* §3.6 tr.actions（折價券+更新購物車）block 排版 + dashed top 接續 */
	body.woocommerce-cart .woocommerce-cart-form table.shop_table tr td.actions {
		padding: 16px !important;
		border-top: 1.5px dashed #f8d9a8 !important;
	}
	/* 更新購物車 button：水平置中 + 下方 5px margin（蓋掉 WC core float / 48% width）*/
	body.woocommerce-cart .woocommerce-cart-form table.shop_table td.actions button[name="update_cart"] {
		display: block !important;
		float: none !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-bottom: 5px !important;
	}

	/* §3.7 cart_totals tr.shipping td 改 2-column grid
	   col 1 (1fr) = 左空白；col 2 (max-content) = ul#shipping_method + 運送至（左切齊）
	   .woocommerce-shipping-calculator 跨兩欄 → 展開時拿全寬，不撐回 col 2
	   ::before「運送方式：」label 抽 absolute，避免變成 grid item */
	body.woocommerce-cart .cart_totals table.shop_table tr.shipping td {
		position: relative !important;
		padding-top: 36px !important;
		display: grid !important;
		grid-template-columns: 1fr max-content !important;
		justify-content: stretch !important;
	}
	body.woocommerce-cart .cart_totals table.shop_table tr.shipping td:before {
		position: absolute !important;
		top: 12px !important;
		left: 16px !important;
		margin: 0 !important;
	}
	body.woocommerce-cart .cart_totals table.shop_table tr.shipping td ul#shipping_method,
	body.woocommerce-cart .cart_totals table.shop_table tr.shipping td .woocommerce-shipping-destination {
		grid-column: 2 !important;
		width: auto !important;
		max-width: none !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		justify-self: stretch !important;
		text-align: left !important;
	}
	body.woocommerce-cart .cart_totals table.shop_table tr.shipping td .woocommerce-shipping-calculator {
		grid-column: 1 / -1 !important;
		width: 100% !important;
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		justify-self: stretch !important;
		text-align: right !important;
	}
	body.woocommerce-cart .cart_totals table.shop_table tr.shipping td .shipping-calculator-form {
		text-align: left !important;
	}
	body.woocommerce-cart .cart_totals table.shop_table tr.shipping td .shipping-calculator-button {
		font-weight: 700 !important;
	}

}


/* ==========================================================================
   §4. 結帳頁 — review-order-table（運送方式 / 總計 2-column grid）
   ========================================================================== */

body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table {
	border: 1.5px solid #f8d9a8 !important;
	border-radius: 16px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden !important;
}
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table th,
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table td {
	border-top: 1.5px dashed #f8d9a8 !important;
	padding: 12px 16px !important;
}
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table thead tr:first-child th,
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table thead tr:first-child td {
	border-top: 0 !important;
}

/* tfoot 改 grid 7fr 3fr（70/30），中間 dashed 直線用 background-image 畫
   — 不用 td border-left（grid + display:contents 下會 flicker）*/
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot {
	display: grid !important;
	grid-template-columns: 7fr 3fr !important;
	border-top: 0 !important;
	background-image: repeating-linear-gradient(
		to bottom,
		#f8d9a8 0,
		#f8d9a8 5px,
		transparent 5px,
		transparent 10px
	) !important;
	background-position: calc(70% - 1px) 0 !important;
	background-size: 1.5px 100% !important;
	background-repeat: no-repeat !important;
}

/* tr.cart-subtotal（重複的小計）隱藏 */
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.cart-subtotal {
	display: none !important;
}

/* tr.shipping → display: contents，th col1 row1、td col1 row2 */
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.shipping {
	display: contents !important;
}
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.shipping th {
	grid-column: 1; grid-row: 1;
}
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.shipping td {
	grid-column: 1; grid-row: 2;
}

/* tr.choose_cvs → th 隱藏（"Convenience store" label），td col1 row3 */
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.choose_cvs {
	display: contents !important;
}
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.choose_cvs th {
	display: none !important;
}
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.choose_cvs td {
	grid-column: 1 !important;
	grid-row: 3 !important;
	padding: 8px 12px 16px 24px !important;
	border-top: 0 !important;
	text-align: left !important;
}

/* tr.order-total → th col2 row1、td col2 row2/span 99（吃滿右欄）*/
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total {
	display: contents !important;
}
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total th {
	grid-column: 2; grid-row: 1;
}
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	grid-column: 2 !important;
	grid-row: 2 / span 99 !important;
	display: flex !important;
	align-items: flex-start !important;
	justify-content: center !important;
	padding-top: 14px !important;
	border-top: 0 !important;
	text-align: center !important;
}

/* tfoot 三個欄位標題（運送方式 / 總計）統一規格 */
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot th {
	text-align: center !important;
	padding: 14px 12px !important;
	color: #f5dca2 !important;
	font-weight: 700 !important;
	font-size: 1.2em !important;
	border-bottom: 1.5px dashed #f8d9a8 !important;
	border-top: 0 !important;
	width: auto !important;
}
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot td {
	padding: 14px 12px !important;
	border-top: 0 !important;
	text-align: left !important;
	vertical-align: top !important;
}

/* 運送方式 radio + 總計金額 + choose_cvs td：1em / 4 分糖（font-weight 400）/ cream */
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.shipping td,
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.shipping td label,
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.shipping td ul#shipping_method li,
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td,
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.order-total td span,
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tfoot tr.choose_cvs td {
	font-size: 1em !important;
	font-weight: 400 !important;
	color: #f5dca2 !important;
}

/* 運送方式 ::before 標籤改 block + 左對齊 ul/li */
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tr.shipping td:before {
	float: none !important;
	display: block !important;
	margin-bottom: 4px !important;
}
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tr.shipping td ul#shipping_method,
body.woocommerce-checkout #order_review table.shop_table.woocommerce-checkout-review-order-table tr.shipping td ul#shipping_method li {
	text-align: left !important;
}


/* ==========================================================================
   §5. 結帳頁 — twopage-subtotal 表格（woomp 從 review-order 搬出來的商品列表）
   ========================================================================== */

body.woocommerce-checkout table.twopage-subtotal {
	border: 1.5px solid #f8d9a8 !important;
	border-radius: 16px !important;
	border-collapse: separate !important;
	border-spacing: 0 !important;
	overflow: hidden !important;
	margin-bottom: 16px !important;
	width: 100% !important;
}
/* thead 全清零 — 第一列不要邊；tbody 只留 border-top dashed */
body.woocommerce-checkout table.twopage-subtotal thead tr th,
body.woocommerce-checkout table.twopage-subtotal thead tr td {
	border: 0 !important;
	padding: 12px 16px !important;
}
body.woocommerce-checkout table.twopage-subtotal tbody tr th,
body.woocommerce-checkout table.twopage-subtotal tbody tr td {
	border-bottom: 0 !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-top: 1.5px dashed #f8d9a8 !important;
	padding: 12px 16px !important;
}
/* thead 商品 / 小計 標題：cream / 1.2em / 700 / center */
body.woocommerce-checkout table.twopage-subtotal thead th {
	color: #f5dca2 !important;
	font-size: 1.2em !important;
	font-weight: 700 !important;
	text-align: center !important;
}
/* 中間直 dashed：thead + tbody 第一欄 td/th border-right */
body.woocommerce-checkout table.twopage-subtotal thead tr th:first-child,
body.woocommerce-checkout table.twopage-subtotal tbody tr td:first-child,
body.woocommerce-checkout table.twopage-subtotal tbody tr th:first-child {
	border-right: 1.5px dashed #f8d9a8 !important;
}


/* ==========================================================================
   §6. 結帳頁 — #paymentWrap 付款方式區（woomp JS 注入的 wrapper）
   ========================================================================== */

#paymentWrap {
	display: block !important;
	width: 100% !important;
	margin: 16px 0 !important;
	border: 1.5px solid #f8d9a8 !important;
	border-radius: 16px !important;
	padding: 16px !important;
}
#paymentWrap tbody,
#paymentWrap tr {
	display: block !important;
	width: 100% !important;
}
#paymentWrap th,
#paymentWrap td {
	display: block !important;
	border: 0 !important;
	padding: 0 !important;
}

/* 「付款方式」標題 — 跟運送方式 / 總計同規格（cream / 1.2em / 700 / center / dashed bottom）
   width: calc(100% + 32px) + margin-left -16 + padding 0 16 → 分隔線畫到外框邊 */
body.woocommerce-checkout #paymentWrap th {
	font-size: 1.2em !important;
	font-weight: 700 !important;
	color: #f5dca2 !important;
	text-align: center !important;
	width: calc(100% + 32px) !important;
	margin: 0 -16px 14px -16px !important;
	padding: 0 16px 14px 16px !important;
	border: 0 !important;
	border-bottom: 1.5px dashed #f8d9a8 !important;
	box-sizing: border-box !important;
}

/* 付款 radio 選項：1em / 4 分糖 / cream */
body.woocommerce-checkout #payment ul.payment_methods li,
body.woocommerce-checkout #payment ul.payment_methods li label {
	font-size: 1em !important;
	font-weight: 400 !important;
	color: #f5dca2 !important;
}

/* #payment 內層去框（外框由 #paymentWrap 提供）*/
.woocommerce-checkout #payment.woocommerce-checkout-payment {
	border: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
}

/* 「什麼是 PayPal?」連結貼著 PayPal label inline */
.woocommerce-checkout li.payment_method_paypal a.about_paypal,
.woocommerce-checkout li.wc_payment_method a.about_paypal {
	display: inline !important;
	float: none !important;
	position: static !important;
	margin-left: 0 !important;
	line-height: 2 !important;
	font-weight: 700 !important;
}
.woocommerce-checkout li.payment_method_paypal label {
	display: inline !important;
}


/* ==========================================================================
   §7. 結帳頁 — 雜項 polish（h1 / heading / 國家欄位 / 條款 / 7-ELEVEN / 廢殼）
   ========================================================================== */

/* h1 對齊：抄 woomp form-checkout.php 內嵌 style 的 div.woocommerce 設定
   （max-width 800 / margin 0 auto / display block / padding 0），確保跟下方 form 切齊 */
body.woocommerce-checkout .entry-header {
	display: block !important;
	max-width: 800px !important;
	margin: 0 auto !important;
	padding: 0 !important;
}
body.woocommerce-checkout h1.entry-title {
	max-width: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 40px 0 0 0 !important;
	font-size: 2.47rem !important;
}

/* 帳單資訊 / 配送資訊 / 訂單備註 h3：padding 40 0 0 + margin 0 0 10 0 */
body.woocommerce-checkout .woocommerce-billing-fields > h3,
body.woocommerce-checkout .woocommerce-shipping-fields > h3,
body.woocommerce-checkout .woocommerce-additional-fields > h3,
body.woocommerce-checkout #customer_details h3 {
	padding: 40px 0 0 !important;
	margin: 0 0 10px 0 !important;
}

/* 國家欄位（billing/shipping）：上 40 padding + 下 10 margin
   離島 checkbox 緊跟其後 + checkbox 旁邊 margin 收緊 */
body.woocommerce-checkout #shipping_country_field,
body.woocommerce-checkout #billing_country_field {
	padding-top: 40px !important;
	margin-bottom: 10px !important;
}
body.woocommerce-checkout #billing_island_field {
	margin-bottom: 20px !important;
}
body.woocommerce-checkout #billing_island {
	margin-right: 0 !important;
}

/* 條款 wrapper 內 line-height 全部 1.5rem */
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper p,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper span,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper label,
.woocommerce-checkout .woocommerce-terms-and-conditions-wrapper div {
	line-height: 1.5rem !important;
}

/* 7-ELEVEN 門市那行（show_choose_cvs_name）：cream + 6 分糖；空名稱時整段隱藏 */
.choose_cvs .show_choose_cvs_name {
	color: #f5dca2 !important;
	font-weight: 600 !important;
}
.choose_cvs .show_choose_cvs_name:has(.choose_cvs_name:empty) {
	display: none !important;
}

/* div.form-row.place-order：被 woomp 拆光剩空殼 + 兩個 hidden input
   （nonce / referer），display: none wrapper，hidden input 仍照常 submit */
.woocommerce-checkout div.form-row.place-order {
	display: none !important;
}



/* ===== v1.0.36：單品頁 badge — 注入主圖 div，永遠跟著圖片 ===== */
/* 讓 Flexslider 的 overflow:hidden 不裁切 badge（badge 往外突出） */
.woocommerce-product-gallery .flex-viewport,
.woocommerce-product-gallery__wrapper {
	overflow: visible !important;
}
.woocommerce-product-gallery__image {
	position: relative;
}
.woocommerce-product-gallery__image .sm-badge {
	position: absolute;
	z-index: 4;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
	pointer-events: none;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	min-height: unset;
	min-width: unset;
	line-height: unset;
}
.woocommerce-product-gallery__image .sm-badge svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.woocommerce-product-gallery__image .sm-badge span {
	position: relative;
	z-index: 1;
	font-size: 1rem;
	line-height: 1;
	text-align: center;
	font-family: "Huninn", "Noto Sans TC", sans-serif;
	font-weight: 700;
	letter-spacing: 0.02em;
}
/* 貝殼（特惠）：左上，往外突出 */
.woocommerce-product-gallery__image .sm-badge-shell {
	width: 72px;
	height: 72px;
	top: -10px;
	left: -12px;
	opacity: 0.95;
}
.woocommerce-product-gallery__image .sm-badge-shell span {
	color: #3a2510;
	margin-right: 2px;
}
/* 魟魚（新品）：右下，往外突出 */
.woocommerce-product-gallery__image .sm-badge-manta {
	width: 82px;
	height: 82px;
	bottom: -10px;
	right: -12px;
	opacity: 0.80;
}
.woocommerce-product-gallery__image .sm-badge-manta span {
	color: #ffffff;
	margin-bottom: 2px;
}
@media (max-width: 768px) {
	.woocommerce-product-gallery__image .sm-badge-shell {
		width: 55px;
		height: 55px;
	}
	.woocommerce-product-gallery__image .sm-badge-manta {
		width: 64px;
		height: 64px;
	}
	.woocommerce-product-gallery__image .sm-badge span {
		font-size: 0.8rem;
	}
}

/* ===== v1.0.38：單品頁 badge — 修正 flex-viewport overflow 破壞 gallery ===== */
/* 移除 flex-viewport 的 overflow:visible（會讓所有幻燈片同時顯示） */
/* badge 改為 正值 offset，完全在圖片內 */
.woocommerce-product-gallery .flex-viewport {
	overflow: hidden !important;
}
/* 還是讓 __image 可 overflow，badge 若有空間可稍微超出 */
.woocommerce-product-gallery__image {
	overflow: visible;
}
/* 覆寫前版負 offset 為正值 */
.woocommerce-product-gallery__image .sm-badge-shell {
	top: 6px;
	left: 6px;
}
.woocommerce-product-gallery__image .sm-badge-manta {
	bottom: 6px;
	right: 6px;
}

/* ===== v1.0.39：單品頁 badge — 改在 __wrapper 之前輸出（同 .onsale 位置），flex-viewport 無關 ===== */
/* 移除前版 overflow overrides（已不需要） */
.woocommerce-product-gallery .flex-viewport {
	overflow: hidden !important;
}
.woocommerce-product-gallery__image {
	overflow: visible;
}
/* badge 定位：相對於 .woocommerce-product-gallery（有 position:relative），不在 flex-viewport 內 */
.woocommerce-product-gallery {
	position: relative;
}
.woocommerce-product-gallery > .sm-badge.sp-badge {
	position: absolute;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
	pointer-events: none;
	margin: 0; padding: 0;
	background: none; border-radius: 0;
	min-height: unset; min-width: unset; line-height: unset;
}
.woocommerce-product-gallery > .sm-badge.sp-badge svg {
	position: absolute; inset: 0; width: 100%; height: 100%;
}
.woocommerce-product-gallery > .sm-badge.sp-badge span {
	position: relative; z-index: 1; font-size: 1rem; line-height: 1;
	text-align: center; font-family: "Huninn", "Noto Sans TC", sans-serif;
	font-weight: 700; letter-spacing: 0.02em;
}
/* 貝殼（特惠）：左上，往圖片外突出 */
.woocommerce-product-gallery > .sm-badge-shell.sp-badge {
	width: 72px; height: 72px;
	top: -10px; left: -12px; opacity: 0.95;
}
.woocommerce-product-gallery > .sm-badge-shell.sp-badge span {
	color: #3a2510; margin-right: 2px;
}
/* 魟魚（新品）：右下，往圖片外突出 */
.woocommerce-product-gallery > .sm-badge-manta.sp-badge {
	width: 82px; height: 82px;
	bottom: -10px; right: -12px; opacity: 0.80;
}
.woocommerce-product-gallery > .sm-badge-manta.sp-badge span {
	color: #ffffff; margin-bottom: 2px;
}
@media (max-width: 768px) {
	.woocommerce-product-gallery > .sm-badge-shell.sp-badge { width: 55px; height: 55px; }
	.woocommerce-product-gallery > .sm-badge-manta.sp-badge { width: 64px; height: 64px; }
	.woocommerce-product-gallery > .sm-badge.sp-badge span { font-size: 0.8rem; }
}

/* ===== v1.0.42：修正 sticky header 被 badge 的 stacking context 蓋住 ===== */
/* Elementor Pro sticky 預設 z-index:99；若產品頁 stacking context > 99，badge 會蓋住 sticky nav */
/* 只加在 sticky-active 狀態，不影響一般 layout */
.elementor-sticky--active {
	z-index: 1000 !important;
}

/* ===== v1.0.43：gallery isolation — badge z-index 徹底隔離，不與 sticky nav 競爭 ===== */
/* isolation:isolate 讓 badge 的 z-index:10 只在 gallery 的 stacking context 內算 */
/* 對外等同 z-index:auto，GPU threaded scroll 下不再干擾 sticky nav 合成順序 */
.woocommerce-product-gallery {
	isolation: isolate;
}

/* ===== v1.0.44：variable product 選項按鈕 — 品牌化 ===== */
/* inline style 注入用 !important 覆蓋；選中=深藍；未選=透明奶油邊框 */
.tag-list label {
	display: inline-block !important;
	background: rgba(255, 255, 255, 0.06) !important;
	border: 1.5px solid rgba(245, 220, 162, 0.3) !important;
	color: rgba(245, 220, 162, 0.68) !important;
	border-radius: 10px !important;
	padding: 0.45rem 1.1rem !important;
	margin: 0 10px 10px 0 !important;
	font-family: Huninn, Noto Sans TC, sans-serif !important;
	font-size: 0.9rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.03em !important;
	line-height: 1.4 !important;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
	cursor: pointer !important;
}
.tag-list label:hover {
	background: rgba(43, 56, 93, 0.38) !important;
	border-color: rgba(245, 220, 162, 0.55) !important;
	color: rgba(245, 220, 162, 0.92) !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 5px 16px rgba(0, 0, 0, 0.30) !important;
}
.tag-list input:checked + label {
	background: #2b385d !important;
	border-color: rgba(245, 220, 162, 0.65) !important;
	color: #f5dca2 !important;
	font-weight: 500 !important;
	box-shadow: 0 3px 14px rgba(43, 56, 93, 0.55) !important;
}
.tag-list input:checked + label:hover {
	background: #354878 !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 6px 20px rgba(43, 56, 93, 0.65) !important;
}
.tag-list input:disabled + label {
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: none !important;
	text-decoration: line-through !important;
	text-decoration-thickness: 2px !important;
}

/* ===== v1.0.45：variation 按鈕未選中態提亮 ===== */
.tag-list label {
	background: rgba(255, 255, 255, 0.10) !important;
	border-color: rgba(245, 220, 162, 0.48) !important;
	color: #d0b983 !important;
}


/* ===== v1.0.46：variation 按鈕未選中 — 改用 btn-outline 規格（亮奶油字 + 清楚框） ===== */
.tag-list label {
	background: transparent !important;
	border: 1.5px solid rgba(245, 220, 162, 0.55) !important;
	color: #f5dca2 !important;
}


/* ===== v1.0.47：variation 按鈕 — capsule pill，對齊品牌設計語言 ===== */
/* pill 形、dashed 邊框未選、honey solid 邊框已選、深棕底（比頁面底色深） */
.tag-list label {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(35, 22, 12, 0.45) !important;
	border: 1.5px dashed rgba(245, 220, 162, 0.42) !important;
	color: #f5dca2 !important;
	border-radius: 50px !important;
	padding: 0.5rem 1.4rem !important;
	margin: 0 10px 10px 0 !important;
	font-family: Huninn, Noto Sans TC, sans-serif !important;
	font-size: 0.9rem !important;
	font-weight: 400 !important;
	letter-spacing: 0.03em !important;
	line-height: 1.4 !important;
	transition: background .25s ease, border .25s ease, transform .25s ease, box-shadow .25s ease !important;
	cursor: pointer !important;
}
.tag-list label:hover {
	background: rgba(43, 56, 93, 0.32) !important;
	border: 1.5px dashed rgba(245, 220, 162, 0.62) !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30) !important;
}
.tag-list input:checked + label {
	background: #2b385d !important;
	border: 1.5px solid rgba(236, 185, 80, 0.82) !important;
	color: #f5dca2 !important;
	font-weight: 500 !important;
	transform: none !important;
	box-shadow: 0 0 18px rgba(236, 185, 80, 0.25), 0 3px 14px rgba(43, 56, 93, 0.50) !important;
}
.tag-list input:checked + label:hover {
	background: #354878 !important;
	border: 1.5px solid rgba(236, 185, 80, 0.95) !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 0 24px rgba(236, 185, 80, 0.38), 0 6px 20px rgba(43, 56, 93, 0.58) !important;
}
.tag-list input:disabled + label {
	opacity: 0.35 !important;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: none !important;
	text-decoration: line-through !important;
	text-decoration-thickness: 2px !important;
}



/* ===== v1.0.48：variation label + add-to-cart 按鈕更新 ===== */
/* 字型改金萱那提，未選 w300，hover 棕色系，selected navy 5%透，w600 */
.tag-list label {
	font-family: jf-jinxuanlatte, Huninn, Noto Sans TC, sans-serif !important;
	font-weight: 300 !important;
}
.tag-list label:hover {
	background: rgba(35, 22, 12, 0.68) !important;
	border: 1.5px dashed rgba(245, 220, 162, 0.68) !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30) !important;
}
.tag-list input:checked + label {
	background: rgba(43, 56, 93, 0.95) !important;
	font-weight: 600 !important;
}
.tag-list input:checked + label:hover {
	background: rgba(53, 72, 120, 0.95) !important;
}

/* 加入購物車 — 湖水藍膠囊 */
.single-product .cart button.single_add_to_cart_button {
	background: #5aa1af !important;
	color: #2b385d !important;
	border: none !important;
	border-radius: 50px !important;
	padding: 0.75rem 2.5rem !important;
	font-family: jf-jinxuanlatte, Huninn, Noto Sans TC, sans-serif !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.04em !important;
	transition: background .25s ease, transform .25s ease, box-shadow .25s ease !important;
	box-shadow: 0 4px 16px rgba(90, 161, 175, 0.35) !important;
	cursor: pointer !important;
}
.single-product .cart button.single_add_to_cart_button:hover {
	background: #4a8d9a !important;
	transform: translateY(-3px) !important;
	box-shadow: 0 8px 24px rgba(90, 161, 175, 0.50) !important;
	color: #2b385d !important;
}



/* ===== v1.0.49：加入購物車加深藍框 ===== */
.single-product .cart button.single_add_to_cart_button {
	border: 1.5px solid #2b385d !important;
}


/* ===== v1.0.50：加入購物車改蜂蜜黃主 CTA ===== */
.single-product .cart button.single_add_to_cart_button {
	background: #ecb950 !important;
	color: #3a2510 !important;
	border: 1.5px solid rgba(58, 37, 16, 0.35) !important;
	box-shadow: 0 4px 16px rgba(236, 185, 80, 0.40) !important;
}
.single-product .cart button.single_add_to_cart_button:hover {
	background: #d9a63e !important;
	color: #3a2510 !important;
	box-shadow: 0 8px 24px rgba(236, 185, 80, 0.55) !important;
}


/* ===== v1.0.51：加入購物車外框稍微加深 ===== */
.single-product .cart button.single_add_to_cart_button {
	border: 1.5px solid rgba(58, 37, 16, 0.58) !important;
}


/* ===== v1.0.52：加入購物車外框提高不透明度 ===== */
.single-product .cart button.single_add_to_cart_button {
	border: 1.5px solid rgba(58, 37, 16, 0.82) !important;
}


/* ===== v1.0.53：加入購物車外框加粗 2px ===== */
.single-product .cart button.single_add_to_cart_button {
	border: 2px solid rgba(58, 37, 16, 0.82) !important;
}


/* ===== v1.0.54：加入購物車區域微調 — 價格 margin、qty 配色與高度 ===== */
/* 價格底下加大 margin */
.single-product .price,
.single-product p.price,
.single-product span.price {
	margin-bottom: 1.5rem !important;
}
/* 數量區跟購物車按鈕間距縮小 */
.single-product form.cart .quantity {
	margin-right: 0.5rem !important;
}
/* 數量 input：圓角 + 與購物車同高 + 暖色系 */
.single-product form.cart .quantity input.qty {
	border-radius: 12px !important;
	height: auto !important;
	padding: 0.75rem 0.5rem !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	font-family: jf-jinxuanlatte, Huninn, Noto Sans TC, sans-serif !important;
	background: rgba(245, 220, 162, 0.10) !important;
	color: #f5dca2 !important;
	border: 2px solid rgba(236, 185, 80, 0.55) !important;
	width: 64px !important;
	text-align: center !important;
	box-shadow: none !important;
}
.single-product form.cart .quantity input.qty:focus {
	border-color: rgba(236, 185, 80, 0.85) !important;
	outline: none !important;
}


/* ===== v1.0.55：qty 高度精準對齊購物車 + 真正縮小間距 ===== */
/* qty 高度鎖定 53.43px（跟購物車 button 量到的尺寸一致） */
.single-product form.cart .quantity input.qty {
	height: 53.43px !important;
	box-sizing: border-box !important;
	padding: 0 0.5rem !important;
	line-height: normal !important;
}
/* form.cart 直接用 gap 控制間距，覆寫所有 margin 來源 */
.single-product form.cart {
	gap: 0.5rem !important;
}
.single-product form.cart .quantity {
	margin-right: 0 !important;
}
.single-product form.cart button.single_add_to_cart_button {
	margin-left: 0 !important;
}


/* ===== v1.0.56：兩個元件統一 50px + 間距加大 + 加強 input 配色 ===== */
.single-product form.cart {
	gap: 0.75rem !important;
}
/* qty input：50px、加強深棕底跟蜂蜜框 */
.single-product form.cart .quantity input.qty {
	height: 50px !important;
	box-sizing: border-box !important;
	line-height: 1 !important;
	padding: 0 0.5rem !important;
	background: rgba(35, 22, 12, 0.45) !important;
	color: #f5dca2 !important;
	border: 2px solid rgba(236, 185, 80, 0.65) !important;
	border-radius: 12px !important;
	font-family: jf-jinxuanlatte, Huninn, Noto Sans TC, sans-serif !important;
	font-size: 1.05rem !important;
	font-weight: 600 !important;
	text-align: center !important;
	width: 64px !important;
}
/* cart button：50px */
.single-product .cart button.single_add_to_cart_button {
	height: 50px !important;
	box-sizing: border-box !important;
	padding: 0 2.5rem !important;
	line-height: 1 !important;
}


/* ===== v1.0.57：強制 form 為 flex 讓 gap 生效 + input bg 0.6 + margin-left 雙保險 ===== */
.single-product form.cart {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 0.75rem !important;
}
/* 即使非 flex 也保證有間距：button 直接給 margin-left */
.single-product form.cart button.single_add_to_cart_button {
	margin-left: 0.75rem !important;
}
/* qty input 背景加深到 0.6 */
.single-product form.cart .quantity input.qty {
	background: rgba(35, 22, 12, 0.6) !important;
}


/* ===== v1.0.58：清掉 form.cart 的左側 padding ===== */
.single-product form.cart {
	padding: 0 !important;
}
.single-product form.cart .quantity {
	margin-left: 0 !important;
	padding-left: 0 !important;
}


/* ===== v1.0.59：強制 form.cart flex 內容靠左對齊 ===== */
.single-product form.cart {
	justify-content: flex-start !important;
	padding-inline: 0 !important;
}
.single-product form.cart > * {
	margin-inline-start: 0 !important;
}


/* ===== v1.0.60：input 底色 0.35 + 邊框跟購物車同色 ===== */
.single-product form.cart .quantity input.qty {
	background: rgba(35, 22, 12, 0.35) !important;
	border: 2px solid rgba(58, 37, 16, 0.82) !important;
}


/* ===== v1.0.61：實際 flex 容器是 Elementor 的 e-atc-qty-button-holder，把規則套到這裡 ===== */
.single-product .e-atc-qty-button-holder {
	display: flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0.75rem !important;
	padding: 0 !important;
	margin: 0 !important;
	flex-wrap: wrap !important;
}
.single-product .e-atc-qty-button-holder > .quantity {
	margin: 0 !important;
	padding: 0 !important;
}
.single-product .e-atc-qty-button-holder > button.single_add_to_cart_button {
	margin: 0 !important;
}


/* ===== v1.0.62：提高 specificity 對齊 Elementor 的 holder + 縮小 gap ===== */
.elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder,
.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder {
	display: flex !important;
	flex-wrap: nowrap !important;
	justify-content: flex-start !important;
	align-items: center !important;
	text-align: left !important;
	gap: 0.5rem !important;
	padding: 0 !important;
	margin: 0 !important;
}
.elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder > .quantity,
.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder > .quantity {
	margin: 0 !important;
	padding: 0 !important;
}
.elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder > button.single_add_to_cart_button,
.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder > button.single_add_to_cart_button {
	margin: 0 !important;
}



/* ===== v1.0.63：form.cart 縮到只包內容寬度（不再吃滿欄寬留右側空白）===== */
/* 簡單商品：form.cart 本身是 flex 容器 */
.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart form.cart:not(.grouped_form):not(.variations_form),
.elementor-widget-woocommerce-product-add-to-cart form.cart:not(.grouped_form):not(.variations_form) {
	display: inline-flex !important;
	width: auto !important;
	max-width: 100% !important;
}
/* 變體商品：實際 flex 容器是 .e-atc-qty-button-holder */
.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder,
.elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder {
	display: inline-flex !important;
	width: auto !important;
	max-width: 100% !important;
}


/* ===== v1.0.64：v1.0.63 漏抓變體商品（form.variations_form.cart 也要 inline-flex）===== */
.single-product form.cart,
.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart form.cart,
.elementor-widget-woocommerce-product-add-to-cart form.cart {
	display: inline-flex !important;
	width: auto !important;
	max-width: 100% !important;
}


/* ===== v1.0.65：分流 form.cart 變體 vs 簡單，避免變體 form 被當 flex 切多 row ===== */
/* 變體 form.cart：強制回 block，讓 table / variation 說明 / 加入購物車區自然垂直堆疊 */
.single-product form.cart.variations_form,
.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart form.cart.variations_form,
.elementor-widget-woocommerce-product-add-to-cart form.cart.variations_form {
	display: block !important;
	flex-wrap: initial !important;
	align-items: initial !important;
	justify-content: initial !important;
	gap: 0 !important;
	width: auto !important;
	max-width: 100% !important;
	padding: 0 !important;
}
/* 簡單 form.cart：保留 inline-flex，shrink 到 qty+button 寬度 */
.single-product form.cart:not(.variations_form):not(.grouped_form),
.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart form.cart:not(.variations_form):not(.grouped_form),
.elementor-widget-woocommerce-product-add-to-cart form.cart:not(.variations_form):not(.grouped_form) {
	display: inline-flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0.5rem !important;
	width: auto !important;
	max-width: 100% !important;
	padding: 0 !important;
}
/* 變體 form 內部 qty+button 容器已由 v1.0.62/64 處理，這裡重申 inline-flex shrink + 左靠 */
.elementor-widget-woocommerce-product-add-to-cart form.cart.variations_form .e-atc-qty-button-holder,
.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart form.cart.variations_form .e-atc-qty-button-holder {
	display: inline-flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0.5rem !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}


/* ===== v1.0.66：form.cart 簡單商品也回 block，跟變體一致；shrink 由 .e-atc-qty-button-holder 處理 ===== */
.single-product form.cart,
.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart form.cart,
.elementor-widget-woocommerce-product-add-to-cart form.cart {
	display: block !important;
	flex-wrap: initial !important;
	align-items: initial !important;
	justify-content: initial !important;
	gap: 0 !important;
	width: auto !important;
	max-width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
/* 全類型 .e-atc-qty-button-holder 統一：inline-flex shrink 到內容寬，左靠 */
.elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder,
.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart .e-atc-qty-button-holder {
	display: inline-flex !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 0.5rem !important;
	width: auto !important;
	max-width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}


/* ===== v1.0.67：簡單商品 form.cart 用 fit-content 縮到 holder 寬度，視覺上不再有右側未填區 ===== */
.single-product form.cart:not(.variations_form):not(.grouped_form),
.woocommerce div.product .elementor-widget-woocommerce-product-add-to-cart form.cart:not(.variations_form):not(.grouped_form),
.elementor-widget-woocommerce-product-add-to-cart form.cart:not(.variations_form):not(.grouped_form) {
	display: block !important;
	width: -webkit-fit-content !important;
	width: -moz-fit-content !important;
	width: fit-content !important;
	max-width: 100% !important;
}


/* ===== v1.0.68：badge 動畫 — 貝殼搖擺反光 4s + 魟魚玩耍彈跳 6s =====
   安全保證：只動 transform / filter，完全不碰 top/left/right/bottom/width/height/position
   v1.0.39 / v1.0.38 / v1.0.33 等之前辛苦調過的位置都不會被影響
   prefers-reduced-motion 包起來，使用者系統設「減少動態」會自動停 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes sm-shell-sway {
		0%, 100% {
			transform: rotate(-5deg) scale(1);
			filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4)) brightness(1.02);
		}
		50% {
			transform: rotate(5deg) scale(1.04);
			filter: drop-shadow(0 2px 9px rgba(236, 185, 80, 0.4)) brightness(1.06);
		}
	}
	@keyframes sm-manta-play {
		0%, 100% { transform: translateY(0) rotate(-3deg); }
		20%      { transform: translateY(-1px) rotate(3deg); }
		40%      { transform: translateY(0) rotate(-2deg); }
		55%      { transform: translateY(-6px) rotate(6deg); }
		70%      { transform: translateY(0) rotate(-3deg); }
		85%      { transform: translateY(0) rotate(2deg); }
	}
	.sm-badge-shell {
		animation: sm-shell-sway 4s ease-in-out infinite;
		transform-origin: 50% 50%;
	}
	.sm-badge-manta {
		animation: sm-manta-play 6s ease-in-out infinite;
		transform-origin: 50% 60%;
	}
	/* hover 商品卡時直接移除動畫，恢復原本 hover filter（深陰影 + translateY） */
	.sm-card:hover .sm-badge-shell,
	.sm-card:hover .sm-badge-manta {
		animation: none;
	}
}


/* ===== v1.0.69：魟魚 badge 視覺比例放大 5%（不動 offset，bottom/right 錨點保持）===== */
/* 55 → 58（商品卡）／82 → 86（單品頁桌機）／64 → 67（單品頁手機）
   bottom 與 right 值完全不變，badge 從右下角錨點往左上長，視覺上單純變大 */
.sm-card .sm-badge-manta {
	width: 58px;
	height: 58px;
}
.woocommerce-product-gallery__image .sm-badge-manta {
	width: 86px;
	height: 86px;
}
.woocommerce-product-gallery > .sm-badge-manta.sp-badge {
	width: 86px;
	height: 86px;
}
@media (max-width: 768px) {
	.woocommerce-product-gallery__image .sm-badge-manta,
	.woocommerce-product-gallery > .sm-badge-manta.sp-badge {
		width: 67px;
		height: 67px;
	}
}


/* ===== v1.0.70：修單品頁貝殼閃爍跳變 + 魟魚再放大 5% ===== */

/* 修復：貝殼動畫 keyframe 改成只用 drop-shadow（不再混 brightness），
   與單品頁靜態 filter（line 1654 / 1756）的 function chain 長度一致，
   插值時瀏覽器才能平滑漸變不會跳。
   shimmer 改由 drop-shadow 顏色 + 散射半徑變化實現（金色高光更明顯）。*/
@media (prefers-reduced-motion: no-preference) {
	@keyframes sm-shell-sway {
		0%, 100% {
			transform: rotate(-5deg) scale(1);
			filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
		}
		50% {
			transform: rotate(5deg) scale(1.04);
			filter: drop-shadow(0 3px 10px rgba(236, 185, 80, 0.55));
		}
	}
}

/* 魟魚再 +5%：61 / 90 / 70（前一輪 v1.0.69 是 58 / 86 / 67）*/
.sm-card .sm-badge-manta {
	width: 61px;
	height: 61px;
}
.woocommerce-product-gallery__image .sm-badge-manta {
	width: 90px;
	height: 90px;
}
.woocommerce-product-gallery > .sm-badge-manta.sp-badge {
	width: 90px;
	height: 90px;
}
@media (max-width: 768px) {
	.woocommerce-product-gallery__image .sm-badge-manta,
	.woocommerce-product-gallery > .sm-badge-manta.sp-badge {
		width: 70px;
		height: 70px;
	}
}


/* ===== v1.0.71：修單品頁貝殼跳變 — 動畫移除 filter，只留純 transform ===== */
/* 根因：單品頁貝殼 72×72（列表只有 45×45），drop-shadow 在更大像素面積上每幀重算成本爆增，
   瀏覽器跳幀 → 視覺上看起來「突然亮突然暗」。
   解法：把 filter 從 keyframe 拿掉，只動 transform（純 GPU compositor，0 paint）。
   靜態 drop-shadow（line 1654 / 1756 / .sm-card .sm-badge）保留 → 陰影固定不變、不會閃。
   trade-off：失去金色高光 shimmer，列表頁一併變成「只搖擺不發光」。 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes sm-shell-sway {
		0%, 100% { transform: rotate(-5deg) scale(1); }
		50%      { transform: rotate(5deg) scale(1.04); }
	}
}


/* ===== v1.0.72：救回貝殼金色 shimmer — 加 will-change GPU hint 強制硬體加速 =====
   v1.0.71 把 filter 從動畫拿掉是「保守起見」。
   實際根因更可能是缺 will-change 提示讓瀏覽器把 filter 降級成 CPU rasterize。
   加上 will-change 後瀏覽器知道要把這個 layer 推到 GPU，drop-shadow 就會平滑。
   contain: paint 進一步告訴瀏覽器這個元素的繪製不會影響父層，可以獨立 layer。 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes sm-shell-sway {
		0%, 100% {
			transform: rotate(-5deg) scale(1);
			filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
		}
		50% {
			transform: rotate(5deg) scale(1.04);
			filter: drop-shadow(0 3px 10px rgba(236, 185, 80, 0.55));
		}
	}
	.sm-badge-shell {
		will-change: transform, filter;
		contain: paint;
	}
	.sm-badge-manta {
		will-change: transform;
	}
}


/* ===== v1.0.73：貝殼動畫分流 — 單品頁 transform-only，列表頁帶金色 shimmer ===== */
/* 為什麼分流：will-change/contain 都救不回單品頁的 drop-shadow 平滑度（v1.0.72 確認失敗）。
   原因不明（可能是 Flexslider 父層或 Cloudflare 對單品頁 CSS 處理差異）。
   策略：列表頁保留完整 shimmer 效果；單品頁退化為單純搖擺，至少穩定不跳。 */
@media (prefers-reduced-motion: no-preference) {
	/* 預設 keyframe：只搖擺、無 filter（單品頁用）*/
	@keyframes sm-shell-sway {
		0%, 100% { transform: rotate(-5deg) scale(1); }
		50%      { transform: rotate(5deg) scale(1.04); }
	}
	/* 列表頁專用 keyframe：搖擺 + 金色 shimmer */
	@keyframes sm-shell-sway-glow {
		0%, 100% {
			transform: rotate(-5deg) scale(1);
			filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
		}
		50% {
			transform: rotate(5deg) scale(1.04);
			filter: drop-shadow(0 3px 10px rgba(236, 185, 80, 0.55));
		}
	}
	/* 列表頁覆寫（specificity 0,2,0 > 0,1,0 的預設）*/
	.sm-card .sm-badge-shell {
		animation: sm-shell-sway-glow 4s ease-in-out infinite;
	}
	/* 移除 v1.0.72 的 contain: paint（可能裁切陰影） */
	.sm-badge-shell {
		will-change: transform;
		contain: none;
	}
}


/* ===== v1.0.74：列表頁 shimmer 改套到 svg 子層，文字不再被金色 halo 霧化 ===== */
/* 問題：filter 在 .sm-badge 容器上會對所有子元素的不透明像素都加 halo，
   包含 .sm-badge span（特惠／新品），文字邊緣產生金色光暈看起來霧霧的。
   修法：容器改回純 transform 動畫（與單品頁一致），filter shimmer 動畫改套 svg 子層 only。
   文字 span 是獨立兄弟元素，不會被 svg 的 filter 影響。 */
@media (prefers-reduced-motion: no-preference) {
	/* 列表頁容器 — 改用無 filter 的預設搖擺（覆寫 v1.0.73 的 sway-glow）*/
	.sm-card .sm-badge-shell {
		animation: sm-shell-sway 4s ease-in-out infinite;
	}
	/* 新 keyframe：只動 filter，純 glow 效果（沒 transform） */
	@keyframes sm-shell-glow-only {
		0%, 100% {
			filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
		}
		50% {
			filter: drop-shadow(0 2px 10px rgba(236, 185, 80, 0.65));
		}
	}
	/* 套到 svg 子層 — 文字不會被 halo 化 */
	.sm-card .sm-badge-shell svg {
		animation: sm-shell-glow-only 4s ease-in-out infinite;
	}
}


/* ===== v1.0.75：救回貝殼發光感 — 用更亮的奶油色 + 疊三層 drop-shadow ===== */
/* v1.0.74 把 filter 移到 svg 後，因為 svg 本身是金色（#ecb950）、shimmer 也是金色，
   gold-on-gold 看不出來。修法：用比貝殼更亮的奶油黃 + 多層 shadow 疊出真實光暈。
   仍只在 svg 子層動畫，文字保持乾淨。 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes sm-shell-glow-only {
		0%, 100% {
			filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
		}
		50% {
			filter:
				drop-shadow(0 0 8px rgba(255, 245, 200, 0.95))
				drop-shadow(0 0 14px rgba(255, 220, 110, 0.6))
				drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
		}
	}
}


/* ===== v1.0.76：貝殼發光亮度減半（v1.0.75 太亮）===== */
/* alpha 砍半：0.95 → 0.48、0.6 → 0.3，黑色陰影維持 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes sm-shell-glow-only {
		0%, 100% {
			filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
		}
		50% {
			filter:
				drop-shadow(0 0 8px rgba(255, 245, 200, 0.48))
				drop-shadow(0 0 14px rgba(255, 220, 110, 0.3))
				drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
		}
	}
}


/* ===== v1.0.77：還原 v1.0.68 原版金色 shimmer 感 — 分流到容器(brightness) + svg(drop-shadow) ===== */
/* 拆解 v1.0.68 的視覺效果：
   - 金色 halo 來自 drop-shadow(gold) → 套到 svg only（避免文字被 halo 化）
   - 「閃」感來自 brightness pulse → 套到容器（brightness 不產生 halo，文字頂多微亮，不會霧）
   兩個合起來才是原版「金色閃閃」的感覺，缺一不可。 */
@media (prefers-reduced-motion: no-preference) {
	/* 容器：搖擺 + brightness 脈動（覆寫 v1.0.74 的純 transform 版本）*/
	@keyframes sm-shell-sway-bright {
		0%, 100% {
			transform: rotate(-5deg) scale(1);
			filter: brightness(1.02);
		}
		50% {
			transform: rotate(5deg) scale(1.04);
			filter: brightness(1.06);
		}
	}
	.sm-card .sm-badge-shell {
		animation: sm-shell-sway-bright 4s ease-in-out infinite;
	}
	/* SVG：金色 drop-shadow（同 v1.0.68 原始設定，不再用奶油白）*/
	@keyframes sm-shell-glow-only {
		0%, 100% {
			filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
		}
		50% {
			filter: drop-shadow(0 2px 9px rgba(236, 185, 80, 0.4));
		}
	}
}


/* ===== v1.0.78：列表頁貝殼也拿掉 shimmer — 兩邊統一只搖擺、跟魟魚一致 ===== */
/* shimmer 在貝殼上的效果一直難調（gold-on-gold、文字 halo、單品頁跳變等），
   暫時拿掉統一視覺。shimmer keyframe 與相關 CSS 保留在前面區段做為未來其他元件參考。
   v1.0.74-v1.0.77 的 sm-shell-glow-only / sm-shell-sway-bright / sm-shell-sway-glow 都還在檔案裡，
   現在只是不再被任何元件使用。要刪可以日後手動清。 */
@media (prefers-reduced-motion: no-preference) {
	.sm-card .sm-badge-shell {
		animation: sm-shell-sway 4s ease-in-out infinite;
	}
	.sm-card .sm-badge-shell svg {
		animation: none;
	}
}


/* ===== v1.0.79：購物車 icon 金色 shimmer — 只在有商品時觸發 ===== */
/* 觸發機制：Elementor menu cart widget 在 .elementor-button-icon-qty 上有 data-counter 屬性。
   data-counter="0" → 空車（不動）；data-counter="1+" → 有東西（shimmer）。
   WooCommerce cart fragments 會在加/減商品時即時更新 data-counter，CSS 自動 re-evaluate。
   不用 JS、不用 hook。 */
/* 為什麼可以發光（不像貝殼 badge 失敗）：
   1. cart icon 顏色深（不是金色），gold-on-dark 對比明顯
   2. icon 周圍沒文字（沒有 halo 化問題）
   3. 小尺寸（~24-32px）+ 簡單父層，無跳變風險 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes sm-cart-shimmer {
		0%, 100% {
			filter: drop-shadow(0 0 0 rgba(236, 185, 80, 0));
		}
		50% {
			filter: drop-shadow(0 0 6px rgba(236, 185, 80, 0.8))
			        drop-shadow(0 0 12px rgba(255, 220, 110, 0.4));
		}
	}
	/* 兄弟選擇器：qty 不為 0 時，動畫旁邊的 svg icon */
	.elementor-button-icon-qty:not([data-counter="0"]) ~ .e-eicon-cart-light {
		animation: sm-cart-shimmer 3s ease-in-out infinite;
		transform-origin: 50% 50%;
		will-change: filter;
	}
}


/* ===== v1.0.80：修首頁載入時上方白色 flash（FOUC）===== */
/* 診斷：body bg 是 #6a5340 brown，但 Astra 預設 .ast-mobile-header-content / .ast-desktop-header-content
   的 bg 是 #ffffff（在 inline critical CSS）。加上手機首頁 hero cover 是 800×1113 webp，瀏覽器依
   width/height 屬性預留 ~500px 高度，圖片下載期間若父容器/某 wrapper 是白色，那塊就是白的。

   修法策略：多層防禦
   1. html canvas 也設 brown，當最底層保底
   2. Astra 白色 wrapper 規則覆蓋為 transparent，透過去看 body brown
   3. Elementor image widget / cover container 強制 transparent
   4. 主要 wrappers（#page / #content / .ast-container）保險也設 transparent

   全程不動 layout / 不動既有 bg-image / 不動位置。 */

html {
	background-color: var(--ast-global-color-8, #6a5340);
}

/* Astra 預設白色的 header content wrappers — 透明化 */
.ast-mobile-header-wrap .ast-mobile-header-content,
.ast-desktop-header-content {
	background-color: transparent !important;
}

/* 主要 layout wrappers — 透明（讓 body brown 透過）*/
#page.site,
#content.site-content,
.ast-container {
	background-color: transparent;
}

/* Elementor image widget container — 預防 image 載入期間白底 */
.elementor-widget-image,
.elementor-widget-image > a,
.elementor-widget-image > a > img,
.elementor-widget-image > img {
	background-color: transparent;
}