/*
 * JPMON Quick Add — 商品卡快速加購
 * 製作者：Evan ｜ 版本：1.11.0
 *
 * 1.8.0 新增檔尾的「商品頁置底加購條」樣式。
 * 1.7.0 起外觀改為「tg 晶片」樣式，與分類落地頁（jp-tights / jp-uvcut / somi-*）
 * 的尺寸按鈕一致：同列等寬填滿、圓角 8px、選中實心桃紅、缺貨 40% 透明＋刪除線。
 *
 * 註：主題對 button 的選擇器特異度很高（LESSONS 2026-07-31 / 2026-08-13），
 * 所以規格小按鈕與加購按鈕的顏色一律重複 class 提高特異度並加 !important。
 * 狀態切換（反灰／加入中／已加入）另由 JS 以 inline style important 覆蓋。
 */

/*
 * 1.11.0：顏色不再寫死，改吃佈景主題的 CSS 變數（Blocksy 的 --theme-*）。
 * 同一份外掛裝在不同站（jpmon / moody）會各自跟著該站主題設定的按鈕色走。
 * 主題沒提供那些變數時，退回括號內的原始 jpmon 色，等於維持舊外觀。
 * 圓角 8px 與字重 700 是本外掛刻意的（主題按鈕是 3px / 500），不跟主題。
 */
.jqa,
.jqa-sticky {
	--jqa-accent: var(--theme-button-background-initial-color, #C2456F);
	--jqa-accent-hover: var(--theme-button-background-hover-color, #A83A5F);
	--jqa-accent-text: var(--theme-button-text-initial-color, #fff);
	--jqa-line: var(--theme-border-color, #EEE4DC);
	--jqa-ink: var(--theme-text-color, #26211F);
	/* 不可按的淡化底色：舊瀏覽器吃第一行，支援 color-mix 的吃第二行 */
	--jqa-accent-muted: #C9A3B2;
	--jqa-accent-muted: color-mix(in srgb, var(--jqa-accent) 55%, #fff);
}

/*
 * 商品卡裡的容器。
 * flex + width：Blocksy 的 .ct-woo-card-actions 是 flex row，這塊當 flex item 會縮成內容寬
 * 並靠左貼住卡片邊；撐滿才有辦法置中，也才能靠自己的 padding 跟卡片標題／價格對齊。
 * padding 12px：對齊 Blocksy 卡片標題的左右內距（實測 .woocommerce-loop-product__title = 12px）。
 */

.jqa {
	display: block;
	flex: 1 1 100%;
	width: 100%;
	box-sizing: border-box;
	margin: 8px 0 0;
	padding: 0 12px;
	text-align: center;
}

.jqa-group {
	margin: 0 0 8px;
}

/* 多階段時每個屬性標一個小標題，單一屬性不顯示 */
.jqa-group-label {
	display: block;
	margin: 0 0 4px;
	font-size: 12px;
	line-height: 1.2;
	color: #777;
	letter-spacing: .02em;
}

/*
 * 一排晶片。flex-basis:0 讓同一列平分寬度（= tg 晶片的等寬感），
 * min-width 是換行門檻：選項多到塞不下就自動換到下一列，不會擠成細條。
 */
.jqa-opts {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	justify-content: center;
}

.jqa .jqa-opt.jqa-opt {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex: 1 1 0;
	min-width: 44px;
	min-height: 36px;
	padding: 9px 4px !important;
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	font-weight: 400 !important;
	letter-spacing: 0;
	text-transform: none !important;
	white-space: nowrap;
	border: 1.5px solid var(--jqa-line) !important;
	border-radius: 8px !important;
	background-color: #fff !important;
	background-image: none !important;
	color: var(--jqa-ink) !important;
	box-shadow: none !important;
	cursor: pointer;
	width: auto !important;
	height: auto !important;
	transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.jqa .jqa-opt.jqa-opt:hover {
	border-color: var(--jqa-accent) !important;
	color: var(--jqa-accent) !important;
}

.jqa .jqa-opt.jqa-opt:focus-visible {
	outline: 2px solid var(--jqa-accent);
	outline-offset: 1px;
}

/* 已選中：實心桃紅（邊框寬度不變，避免選取時尺寸跳動） */
.jqa .jqa-opt.jqa-opt.jqa-opt--on,
.jqa .jqa-opt.jqa-opt.jqa-opt--on:hover {
	background-color: var(--jqa-accent) !important;
	border-color: var(--jqa-accent) !important;
	color: var(--jqa-accent-text) !important;
	font-weight: 700 !important;
}

/* 不可選：淡化。狀態由 JS 依即時庫存與目前的其他選擇算出來，不寫死。 */
.jqa .jqa-opt.jqa-opt[disabled] {
	opacity: .4;
	background-color: #fff !important;
	border-color: var(--jqa-line) !important;
	color: var(--jqa-ink) !important;
	cursor: not-allowed !important;
	pointer-events: none;
}

.jqa .jqa-opt.jqa-opt[disabled]:hover {
	border-color: var(--jqa-line) !important;
	color: var(--jqa-ink) !important;
}

/* 缺貨（這個規格存在，但沒貨）：加刪除線 */
.jqa .jqa-opt.jqa-opt.jqa-opt--oos {
	text-decoration: line-through !important;
}

/* 此組合無此選項（例如這個顏色根本沒出這個尺寸）：純淡化，不畫刪除線 */
.jqa .jqa-opt.jqa-opt.jqa-opt--na {
	text-decoration: none !important;
}

/* 加購按鈕：桃紅實心，與落地頁的 tg-cart 同一套 */
.jqa .jqa-btn.jqa-btn,
.jqa .jqa-btn.jqa-btn:hover,
.jqa .jqa-btn.jqa-btn:focus {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 12px 6px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0;
	text-transform: none !important;
	white-space: normal;
	border: 0 !important;
	border-radius: 8px !important;
	background-color: var(--jqa-accent) !important;
	background-image: none !important;
	color: var(--jqa-accent-text) !important;
	box-shadow: none !important;
	cursor: pointer;
}

.jqa .jqa-btn.jqa-btn:hover {
	background-color: var(--jqa-accent-hover) !important;
}

.jqa .jqa-btn.jqa-btn[disabled] {
	pointer-events: none;
}

/* 找不到商品卡原生價格元素時的備援價格顯示 */
.jqa-price {
	display: none;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.3;
}

.jqa-price.jqa-price--on {
	display: block;
}

/*
 * 手刻卡片：整張卡常常就是一個 <a>，塞進去的區塊要蓋在上面才點得到。
 * 這種卡片的內距通常掛在內層文字容器（例：.jsr-cb）上，這塊是它的兄弟節點拿不到，
 * 所以左右內距沿用 .jqa 的 12px，另外補下方留白避免貼住卡片底邊。
 */
.jqa[data-jqa-incard] {
	position: relative;
	z-index: 2;
	display: block;
	margin-top: 8px;
	padding-bottom: 12px;
	text-align: center;
	text-decoration: none !important;
	cursor: default;
}

.jqa[data-jqa-incard] .jqa-group-label,
.jqa[data-jqa-incard] .jqa-btn {
	text-decoration: none !important;
}

/* 從商品迴圈複製過來的活動小標 */
.jqa-promo {
	display: block;
	margin: 2px 0 6px;
	font-size: 13px;
	line-height: 1.4;
}

/*
 * 商品頁：原本的下拉選單被藏起來，這排按鈕取而代之。
 * 商品頁的表單很寬，晶片若比照商品卡平分整列會胖到不像按鈕，
 * 所以這裡改成靠左排、單顆上限 140px，其餘外觀（顏色、圓角、狀態）完全一致。
 */
.jqa-single {
	flex: none;
	width: auto;
	margin: 0 0 6px;
	padding: 0;
	text-align: left;
}

.jqa-single .jqa-opts {
	justify-content: flex-start;
}

.jqa-single .jqa-opt.jqa-opt {
	flex: 1 1 auto;
	min-width: 64px;
	max-width: 140px;
}

.jqa-single .jqa-group {
	margin: 0;
}

.jqa-msg {
	display: none;
	margin-top: 6px;
	font-size: 12px;
	line-height: 1.4;
	color: #c0392b;
}

.jqa-msg.jqa-msg--on {
	display: block;
}

/* 加入購物車成功的浮出提示（與落地頁 tg-toast 同一套） */
.jqa-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translateX(-50%) translateY(20px);
	max-width: 90vw;
	padding: 12px 24px;
	border-radius: 999px;
	background: #252225;
	color: #fff;
	font-size: 14px;
	line-height: 1.4;
	text-align: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
	z-index: 99999;
}

.jqa-toast.jqa-toast--on {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

@media (max-width: 480px) {
	.jqa .jqa-opt.jqa-opt {
		min-height: 34px;
		min-width: 40px;
		font-size: 13px !important;
		padding: 9px 2px !important;
	}

	.jqa .jqa-btn.jqa-btn {
		padding: 11px 6px !important;
	}
}

/*
 * ---------------------------------------------------------------------------
 * 商品頁置底加購條（1.8.0）
 *
 * 預設整條不顯示，JS 判斷「已經捲過原本的加購區」才加上 --on。
 * 寬度計算刻意全部用 flex:1 1 0 + min-width:0，讓晶片數量再多也不可能把條子撐爆
 *（LESSONS 2026-08-19：固定 min-width 的多晶片元件移植到欄數更多的版位會換行）。
 * ---------------------------------------------------------------------------
 */
.jqa-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 99990;
	box-sizing: border-box;
	/* 左右內距 6px（1.8.4 由 12 縮到 8、1.8.5 再到 6）：省下來的都讓給晶片的可點面積 */
	padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
	background: #fff;
	border-top: 1px solid var(--jqa-line);
	box-shadow: 0 -2px 12px rgba(38, 33, 31, .12);
	transform: translateY(110%);
	opacity: 0;
	pointer-events: none;
	transition: transform .22s ease, opacity .22s ease;
}

.jqa-sticky.jqa-sticky--on {
	transform: translateY(0);
	opacity: 1;
	pointer-events: auto;
}

/* 桌機預設不出（設定頁可開） */
@media (min-width: 1025px) {
	.jqa-sticky.jqa-sticky--handheld {
		display: none !important;
	}
}

.jqa-sticky-inner {
	max-width: 720px;
	margin: 0 auto;
}

.jqa-sticky-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
}

.jqa-sticky .jqa-sticky-thumb {
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 6px;
	object-fit: cover;
	margin: 0;
}

.jqa-sticky-meta {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.jqa-sticky-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	color: var(--jqa-ink);
}

.jqa-sticky-price {
	font-size: 13px;
	font-weight: 700;
	color: var(--jqa-accent);
}

.jqa-sticky-price del {
	margin-right: 4px;
	font-weight: 400;
	color: #9A9391;
}

.jqa-sticky-price ins {
	text-decoration: none;
}

.jqa-sticky .jqa-sticky-size {
	flex: 0 0 auto;
	min-height: 36px;
	padding: 8px 12px !important;
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	font-weight: 400 !important;
	letter-spacing: 0;
	text-transform: none !important;
	white-space: nowrap;
	border: 1px solid var(--jqa-line) !important;
	border-radius: 8px !important;
	background-color: #fff !important;
	background-image: none !important;
	color: var(--jqa-ink) !important;
	box-shadow: none !important;
	cursor: pointer;
	width: auto !important;
	height: auto !important;
}

.jqa-sticky .jqa-sticky-size:hover {
	border-color: var(--jqa-accent) !important;
	color: var(--jqa-accent) !important;
}

/* 條子裡的規格區塊：沿用商品卡那一套 .jqa，只調版位 */
.jqa-sticky .jqa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	flex: none;
	width: auto;
	margin: 0;
	padding: 0;
	text-align: left;
}

.jqa-sticky .jqa-group {
	flex: 1 1 0;
	min-width: 0;
	margin: 0;
}

/*
 * 條子裡的晶片一律不換行。
 * 換行會讓條子高度隨選項數量變動（實測：款式 2 顆＋尺寸 3 顆時整條高到 153px），
 * 選項多到塞不下就讓這一排自己橫向捲，高度永遠是一排。
 * （LESSONS 2026-08-19 同族：固定 min-width 的多晶片元件放進更窄的容器就會換行。）
 */
.jqa-sticky .jqa-opts {
	justify-content: flex-start;
	flex-wrap: nowrap;
	gap: 4px;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.jqa-sticky .jqa-opts::-webkit-scrollbar {
	display: none;
}

/*
 * 可點面積（1.8.4）：高度 44px 是拇指點得準的下限（Apple HIG 也是 44）。
 * 原本 32px 太小，手機上常點不到。
 * 高度優先於寬度——高度不受欄寬影響，一定拿得到 44；
 * 寬度在雙屬性商品被欄寬壓縮時最低到 40px，仍比原本的 34px 好按。
 */
.jqa-sticky .jqa .jqa-opt.jqa-opt {
	flex: 1 0 auto;
	min-width: 36px;
	min-height: 44px;
	padding: 10px 6px !important;
	font-size: 15px !important;
}

/*
 * 雙屬性商品（款式＋尺寸並排）在窄機上欄寬只剩一半，晶片會被擠到需要橫向捲。
 * 只有這種情況才把字級與最小寬度再收一點——單屬性商品（站上多數）維持大晶片。
 * 360px 實測：不加這條時款式列溢出 19px、尺寸列 17px；加了之後兩列都是 0。
 * :has() 不支援的舊瀏覽器會忽略這條，退回上面的尺寸（會有小幅橫向捲，不會壞版）。
 */
.jqa-sticky .jqa:has(.jqa-group + .jqa-group) .jqa-opt.jqa-opt {
	min-width: 34px;
	padding: 10px 4px !important;
	font-size: 14px !important;
}

.jqa-sticky .jqa-group-label {
	margin: 0 0 2px;
	font-size: 11px;
}

.jqa-sticky .jqa .jqa-btn.jqa-btn {
	flex: 0 0 auto;
	width: 88px !important;
	padding: 14px 4px !important;
	font-size: 15px !important;
	margin: 0 !important;
}

/* 沒有變化類型的商品：條上只有這顆鈕，讓它整條寬 */
.jqa-sticky .jqa-sticky-simple .jqa-btn.jqa-btn {
	flex: 1 1 100%;
	width: 100% !important;
}

/* 價格已經印在上排，條子裡不再重複一次 */
.jqa-sticky .jqa-price {
	display: none !important;
}

.jqa-sticky .jqa-msg {
	flex: 1 1 100%;
	margin-top: 0;
}

/*
 * 條子出現時把頁尾墊高，最後一段內容才不會被蓋住。
 * 實際數值由 JS 依當下量到的條高寫成 --jqa-sticky-h（條高會隨規格排數變動），
 * 這裡的 96px 只是變數還沒寫進來時的保底值。
 */
body.jqa-has-sticky {
	padding-bottom: var(--jqa-sticky-h, 96px);
}

@media (max-width: 480px) {
	.jqa-sticky .jqa .jqa-btn.jqa-btn {
		width: 88px !important;
	}

	.jqa-sticky-name {
		font-size: 12px;
	}
}