/**
 * YS CART Blocksy 整合 — header 元件對齊樣式（v1.1.0）。
 *
 * 顏色／尺寸消費 Customizer 選項輸出的 CSS 變數（dynamic-styles.php 寫在
 * [data-id] 實例層）：--theme-icon-size / --theme-icon-color /
 * --theme-icon-hover-color / --ys-bar-height / --ys-bar-text / --ys-bar-bg /
 * --ys-bar-border；未設定時 fallback 跟隨 Blocksy header 文字色。
 */

/* ─── 共通 ─── */
.ys-cart-blocksy-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.ys-cart-blocksy-icon {
	display: block;
	flex: 0 0 auto;
	width: var(--theme-icon-size, 18px);
	height: var(--theme-icon-size, 18px);
}

.ys-cart-blocksy-label {
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
}

/* ─── 帳號（連結模式） ─── */
a.ys-cart-blocksy-account {
	color: var(--theme-icon-color, inherit);
	text-decoration: none;
	padding: 5px;
	border-radius: 4px;
	transition: color 0.15s ease, opacity 0.15s ease;
}

a.ys-cart-blocksy-account:hover {
	color: var(--theme-icon-hover-color, inherit);
	opacity: 0.85;
}

/* YS cart icon */
a.ys-cart-blocksy-cart {
	position: relative;
	color: var(--theme-icon-color, inherit);
	text-decoration: none;
	padding: 5px;
	border-radius: 4px;
	transition: color 0.15s ease, opacity 0.15s ease;
}

a.ys-cart-blocksy-cart:hover {
	color: var(--theme-icon-hover-color, inherit);
	opacity: 0.85;
}

.ys-cart-blocksy-cart-icon-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.ys-cart-blocksy-cart-badge {
	position: absolute;
	top: -7px;
	right: -9px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--theme-palette-color-1, #930a13);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

/* ─── 帳號（核心模式：包核心 [ys_ec_user_icon] 輸出） ─── */
.ys-cart-blocksy-account--core {
	position: relative;
	color: var(--theme-icon-color, inherit);
}

.ys-cart-blocksy-account--core:hover {
	color: var(--theme-icon-hover-color, inherit);
}

.ys-cart-blocksy-account--core .ys-ec-user-icon {
	color: inherit;
}

.ys-cart-blocksy-account--core .ys-ec-user-icon svg,
.ys-cart-blocksy-account--core .ys-ec-user-icon-svg {
	width: var(--theme-icon-size, 18px);
	height: var(--theme-icon-size, 18px);
	display: block;
}

/* 下拉選單文字不吃 header icon 色（維持核心配色可讀性） */
.ys-cart-blocksy-account--core .ys-ec-user-dropdown {
	color: initial;
}

/* ─── 搜尋 icon（核心 overlay 觸發鈕） ─── */
.ys-cart-blocksy-search .ys-ec-search-icon-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 5px;
	margin: 0;
	color: var(--theme-icon-color, inherit);
	cursor: pointer;
	border-radius: 4px;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.ys-cart-blocksy-search .ys-ec-search-icon-trigger:hover {
	color: var(--theme-icon-hover-color, inherit);
	opacity: 0.85;
}

.ys-cart-blocksy-search .ys-ec-search-icon-trigger svg {
	display: block;
	width: var(--theme-icon-size, 18px);
	height: var(--theme-icon-size, 18px);
}

/* ─── 進階搜尋 icon（智慧彈窗觸發鈕） ─── */
.ys-cart-blocksy-smart-search .ys-ss-icon-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 5px;
	margin: 0;
	color: var(--theme-icon-color, inherit);
	cursor: pointer;
	border-radius: 4px;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.ys-cart-blocksy-smart-search .ys-ss-icon-trigger:hover {
	color: var(--theme-icon-hover-color, inherit);
	opacity: 0.85;
}

.ys-cart-blocksy-smart-search .ys-ss-icon-trigger svg {
	display: block;
	width: var(--theme-icon-size, 20px);
	height: var(--theme-icon-size, 20px);
}

/* ─── 搜尋框（核心版與智慧版共用寬度檔位與配色變數） ─── */
.ys-cart-blocksy-search-bar {
	min-width: 0;
}

.ys-cart-blocksy-search-bar--sm  { width: 200px; }
.ys-cart-blocksy-search-bar--md  { width: 280px; }
.ys-cart-blocksy-search-bar--lg  { width: 360px; }
.ys-cart-blocksy-search-bar--full { flex: 1 1 auto; width: auto; min-width: 160px; }

.ys-cart-blocksy-search-bar .ys-ec-search-form,
.ys-cart-blocksy-search-bar .ys-ss-form {
	margin: 0;
	width: 100%;
}

/* 高度／配色（變數由各實例 dynamic CSS 設定） */
.ys-cart-blocksy-search-bar .ys-ec-search-input,
.ys-cart-blocksy-search-bar .ys-ss-input {
	height: var(--ys-bar-height, auto);
	color: var(--ys-bar-text, inherit);
	background: var(--ys-bar-bg, #fff);
	border-color: var(--ys-bar-border, var(--ys-ec-border, #d8dee5));
}

/* 進階搜尋 bar 的送出鈕：對齊核心乾淨樣式。Blocksy 頁首會對 button[type="submit"]
   套主題 palette 底色（→ 圖1 那個米色方塊）。核心 .ys-ec-search-submit 早有
   inputwrap > submit[type=submit] 高權重防護，智慧版 .ys-ss-submit 原本沒有 →
   這裡補上同級防護（不用 !important），把它變回內嵌透明的放大鏡。 */
.ys-cart-blocksy-search-bar .ys-ss-input {
	padding-right: 44px;
}

.ys-cart-blocksy-search-bar .ys-ss-inputwrap > .ys-ss-submit[type="submit"] {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 32px;
	min-width: 0;
	height: 32px;
	min-height: 0;
	padding: 4px;
	margin: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	box-shadow: none;
	color: var(--ys-bar-text, var(--ys-ec-primary, #6b8a9a));
}

.ys-cart-blocksy-search-bar .ys-ss-inputwrap > .ys-ss-submit[type="submit"]:hover {
	background: rgba(107, 138, 154, 0.1);
	color: var(--ys-bar-text, var(--ys-ec-primary, #6b8a9a));
}

/* header bar 高度有限：熱門關鍵字列在行內框收起（overlay／彈窗仍會顯示） */
.ys-cart-blocksy-search-bar .ys-ec-search-keywords,
.ys-cart-blocksy-search-bar .ys-ss-suggest .ys-ss-suggest__title {
	display: none;
}

/* 行內即時結果視窗：只提升 z-index 蓋過頁首 —— 定位交給核心 v2.52.30 的
   結果視窗機制（v1.0.1 修正，勿再錨定 left/right）。 */
.ys-cart-blocksy-search-bar .ys-ec-search-results {
	z-index: 999999;
}

/* 進階搜尋框的 dropdown（.ys-ss-panel）：頁首裡比照核心 v2.52.30 放大寬度，
   避免商品結果擠成一條；改 right 錨定向左延伸（頁首搜尋多靠右，防止向右溢出
   視窗）。寬度取「容器寬」與「420／92vw」較大者 → full 寬框維持貼齊，sm/md
   窄框放大到 420。 */
.ys-cart-blocksy-search-bar .ys-ss-panel {
	z-index: 999999;
	left: auto;
	right: 0;
	width: max(100%, min(420px, 92vw));
}

/* Customizer 預覽：功能未啟用的提示 */
.ys-cart-blocksy-disabled {
	font-size: 12px;
	opacity: 0.6;
	white-space: nowrap;
}

/* 窄螢幕：固定寬度的搜尋框允許縮小 */
@media (max-width: 689.98px) {
	.ys-cart-blocksy-search-bar--sm,
	.ys-cart-blocksy-search-bar--md,
	.ys-cart-blocksy-search-bar--lg {
		width: min(280px, 60vw);
	}
}

/* ─── 購物車：迷你購物車 drawer（v1.2.0） ───
   核心右下角浮動購物車關閉時，本外掛在頁尾以核心同一份樣板輸出 #ys-ec-mini-cart；
   這裡只把它從「右下角浮動按鈕＋小面板」改成「右側抽屜」：隱藏浮動按鈕、面板貼右滿高、
   加背景遮罩。開關仍是核心的 .ys-ec-mini-cart-open。 */
.ys-cart-blocksy-drawer-host .ys-ec-mini-cart {
	position: fixed;
	inset: 0 0 0 auto;
	bottom: auto;
	right: 0;
	top: 0;
	height: 100dvh;
	width: 0;
	z-index: 100000;
	pointer-events: none;
}

.ys-cart-blocksy-drawer-host .ys-ec-mini-cart-toggle {
	display: none !important;
}

.ys-cart-blocksy-drawer-host .ys-ec-mini-cart-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(380px, 100vw);
	max-height: none;
	height: 100dvh;
	border-radius: 0;
	border-width: 0 0 0 1px;
	transform: translateX(100%);
	opacity: 1;
	visibility: hidden;
	transition: transform 0.25s ease, visibility 0s linear 0.25s;
	pointer-events: auto;
}

.ys-cart-blocksy-drawer-host .ys-ec-mini-cart-panel.ys-ec-mini-cart-open {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.25s ease, visibility 0s;
}

.ys-cart-blocksy-drawer-host .ys-ec-mini-cart-body {
	flex: 1 1 auto;
	overflow-y: auto;
}

.ys-cart-blocksy-drawer-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0s linear 0.25s;
	z-index: 99999;
}

.ys-cart-blocksy-drawer-host--open .ys-cart-blocksy-drawer-backdrop {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.25s ease, visibility 0s;
}

/* v1.2.1：頁上有 drawer trigger 時，核心浮動面板開啟瞬間 visibility 立即可見。核心是 transition: all .25s，
   開啟瞬間 visibility 仍 hidden、焦點進不了面板（瀏覽器拒絕聚焦 visibility:hidden 的元素）。視覺不變：
   visibility 往 visible 的內插本來就是整段可見；關閉仍走核心的淡出（目標狀態是核心的 base rule）。 */
body:has(a.ys-cart-blocksy-cart[data-ys-cart-blocksy-action="drawer"]) .ys-ec-mini-cart-panel.ys-ec-mini-cart-open {
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}

/* v1.2.1：面板本身可被程式聚焦（tabindex=-1；面板內沒有可聚焦元素時的退路），不要畫外框 */
.ys-cart-blocksy-drawer-host .ys-ec-mini-cart-panel:focus {
	outline: none;
}

/* 頁首 icon 本身：drawer 模式時滑鼠樣式維持可點 */
a.ys-cart-blocksy-cart[data-ys-cart-blocksy-action="drawer"] {
	cursor: pointer;
}