/* ==========================================================================
   特拉拉市集 — 首頁商品展示 grid（shortcode：[tshp_market_grid]）
   ==========================================================================
   用途：嵌進首頁（或任何頁面）展示「市集販售中」的配件,讓使用者第一眼就看到
   市集有貨。卡片完全沿用 archive 的 .tshp-card（tshp-archive.css 一併載入）,
   這支只負責 section 容器、欄數控制、以及純前端 client-side 翻頁器。

   注意：本元件嵌在首頁,不在 .tshp-page 之下,所以:
   - 不能依賴 .tshp-page 祖先選擇器(自帶 box-sizing / 字型重置)。
   - 要主動抵禦父層主題(WoodMart .wd-grid-g 等)對 grid / button 的汙染。
   ========================================================================== */

.tshp-showcase {
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0;
	font-family: var(--tshp-font-cjk);
	color: var(--tshp-text);
}
.tshp-showcase,
.tshp-showcase * { box-sizing: border-box; }

/* --- Grid --------------------------------------------------------------- */
/* 用自有 class（非 .tshp-grid）控制欄數,避免 archive 的 .tshp-grid media query
   來搶版面;卡片本體仍沿用 .tshp-card 的樣式。!important 用來壓過 WoodMart
   .wd-grid-g 可能加在子元素上的 display/flex 規則。 */
.tshp-showcase__grid {
	display: grid !important;
	grid-template-columns: repeat(var(--tshp-sc-cols, 4), minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (max-width: 1024px) {
	.tshp-showcase__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 768px) {
	/* minmax(0,1fr) 讓窄欄能縮到內容以下,避免長標題/大價格撐爆版面溢出。
	   欄數由 shortcode 的 mobile_columns 透過 --tshp-sc-cols-m 控制(預設 2)。 */
	.tshp-showcase__grid { grid-template-columns: repeat(var(--tshp-sc-cols-m, 2), minmax(0, 1fr)); gap: 14px; }

	/* 手機:不要翻頁器(小螢幕會被父主題的 button 樣式擠壓變形),改為單純往下
	   捲、顯示全部已載入的卡片。這兩條覆蓋 JS 的分頁狀態(.is-paged-out)與
	   pager 揭示,純 CSS 驅動 → 旋轉/縮放會自動重新判斷,不需動 JS。 */
	.tshp-showcase__pager { display: none !important; }
	/* .tshp-showcase 前綴 → specificity(0,4,0)高過下方基準的隱藏規則(0,3,0),
	   不受 CSS 來源順序影響,手機一定顯示全部卡片。 */
	.tshp-showcase .tshp-showcase__grid > .tshp-card.is-paged-out { display: flex !important; }
}

/* JS 翻頁:不在目前頁的卡片。!important 確保壓過卡片本身的 display:flex。 */
.tshp-showcase__grid > .tshp-card.is-paged-out { display: none !important; }

/* 換頁時的淡入(由 JS toggling .is-flip 重新觸發)。 */
.tshp-showcase.is-ready .tshp-showcase__grid.is-flip > .tshp-card:not(.is-paged-out) {
	animation: tshp-sc-fade 280ms cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes tshp-sc-fade {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Pager（箭頭 + 圓點）------------------------------------------------- */
.tshp-showcase__pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 28px;
}
.tshp-showcase__pager[hidden] { display: none; }

/* all:unset 把主題對 <button> 的 border/background/box-shadow 全部歸零,再重建。 */
.tshp-showcase__arrow {
	all: unset;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	/* !important 盒模型:WoodMart 等主題會對 <button> 加 min-width/padding/height,
	   把箭頭撐成圓角矩形 —— 鎖死成 40px 正圓。 */
	width: 40px !important;
	height: 40px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border-radius: 50%;
	border: 1px solid var(--tshp-border);
	background: var(--tshp-surface);
	color: var(--tshp-text-soft);
	cursor: pointer;
	transition: border-color var(--tshp-trans), color var(--tshp-trans),
	            background var(--tshp-trans), transform var(--tshp-trans), opacity var(--tshp-trans);
}
.tshp-showcase__arrow:hover { border-color: var(--tshp-text); color: var(--tshp-text); }
.tshp-showcase__arrow:active { transform: scale(0.94); }
.tshp-showcase__arrow:focus-visible { outline: 2px solid var(--tshp-primary); outline-offset: 2px; }
.tshp-showcase__arrow[disabled] { opacity: 0.32; cursor: default; pointer-events: none; }
.tshp-showcase__arrow svg { width: 20px; height: 20px; display: block; }

.tshp-showcase__dots {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.tshp-showcase__dot {
	all: unset;
	box-sizing: border-box;
	flex: 0 0 auto;
	/* 同上:鎖死盒模型,主題不得把圓點撐成矩形。 */
	width: 8px !important;
	height: 8px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border-radius: 999px;
	background: var(--tshp-border);
	cursor: pointer;
	transition: width var(--tshp-trans), background var(--tshp-trans);
}
.tshp-showcase__dot:hover { background: var(--tshp-text-dim); }
/* active 圓點用 --tshp-text:與篩選 active pill / 色票圈 / 滑桿同色,設計語言一致。
   width !important 蓋過上面的 8px !important(本選擇器更高 specificity)。 */
.tshp-showcase__dot.is-active {
	width: 22px !important;
	background: var(--tshp-text);
}
.tshp-showcase__dot:focus-visible { outline: 2px solid var(--tshp-primary); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.tshp-showcase.is-ready .tshp-showcase__grid.is-flip > .tshp-card { animation: none; }
	.tshp-showcase__arrow,
	.tshp-showcase__dot { transition: none; }
}