/* Product Slider — 把 WC ul.products 改排為 swiper carousel
 * v2.25.0 新增。
 * Charles 拍板:不靠 Greenshift / Blocksy / WC 原生 slider,自家 CSS+JS 包裝。
 */

.sn-product-slider {
	width: 100%;
	margin: 32px 0;
	position: relative;
}

.sn-product-slider .woocommerce {
	margin: 0;
}

.sn-product-slider .sn-product-slider-swiper {
	overflow: hidden;
	padding: 0 0 44px;
	position: relative;
}

/* 把 WC ul.products 改成 swiper-wrapper flex 排列(JS 端會加 .swiper-wrapper class) */
.sn-product-slider .sn-product-slider-track {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: stretch;
}

/* 取消 WC 預設 grid:第 1/3/4/5/6 個的 clear、margin、width 規則 */
.sn-product-slider .sn-product-slider-track > li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
	flex-shrink: 0;
	box-sizing: border-box;
}

.sn-product-slider .sn-product-slider-track > li.product > a {
	display: block;
	height: 100%;
}

/* 分頁圓點 */
.sn-product-slider .swiper-pagination {
	bottom: 8px !important;
}
.sn-product-slider .swiper-pagination-bullet {
	background: rgba(10, 110, 177, 0.3);
	opacity: 1;
	width: 8px;
	height: 8px;
}
.sn-product-slider .swiper-pagination-bullet-active {
	background: var(--paletteColor1, #0A6EB1);
}

/* 左右切換鈕 */
.sn-product-slider .sn-sps-nav {
	width: 38px;
	height: 38px;
	background: rgba(255, 255, 255, 0.95);
	border: 1px solid #e5e7eb;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	cursor: pointer;
	z-index: 10;
	top: calc(50% - 22px);
	margin-top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.18s, box-shadow 0.18s;
	padding: 0;
}
.sn-product-slider .sn-sps-nav:hover {
	background: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.sn-product-slider .sn-sps-nav::after {
	font-size: 16px !important;
	color: #374151;
	font-weight: 700;
}
.sn-product-slider .sn-sps-nav.swiper-button-disabled {
	opacity: 0;
	pointer-events: none;
}

/* CTA 按鈕 */
.sn-product-slider-cta {
	text-align: center;
	margin-top: 24px;
}
.sn-product-slider-cta-btn {
	display: inline-block;
	padding: 12px 36px;
	background: var(--paletteColor1, #0A6EB1);
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	border-radius: 6px;
	text-decoration: none !important;
	transition: opacity 0.2s, transform 0.2s;
}
.sn-product-slider-cta-btn:hover {
	opacity: 0.88;
	transform: translateY(-1px);
	color: #fff !important;
}
.sn-product-slider-cta-btn:active {
	transform: translateY(0);
}

@media (max-width: 768px) {
	.sn-product-slider {
		margin: 24px 0;
	}
	.sn-product-slider-cta-btn {
		padding: 10px 28px;
		font-size: 14px;
	}
	.sn-product-slider .sn-sps-nav {
		display: none; /* 行動裝置藏左右鈕,改用滑動 */
	}
}

/* =================================================================
 * v2.25.2 — sn_sec_products 獨立 section
 * Layout 參考 dev 站「最新文章」section(sn_home_blog_display):
 *   - 電腦版:title 左 + CTA 右 並行(flex row + justify-between)
 *   - 手機版:title 上、CTA 下(flex column)
 *   - grid:4 欄(電腦)/ 2 欄(手機)
 * 設計值對齊 Blocksy 主題 + 秒站既有風格
 * ================================================================= */

/* v2.25.4:去自家 background 與大 padding,跟 page 內其他 section 連續
 *           只留垂直 margin,與 sn_home_blog 等 Greenshift section 同節奏
 * v2.25.3:用雙重 class 拉高 specificity 對抗 Blocksy entry-content 與 WC 樣式 */
.sn-sec-products,
.entry-content .sn-sec-products {
	width: 100%;
	/* v2.25.38:bottom 由 64 → 120,跟下方區塊(服務項目等)拉開呼吸間距 */
	margin: 64px 0 120px;
	padding: 0;
	background: transparent;
}

/* v2.25.11:拿掉 container 左右 padding(對齊其他 Greenshift section 同寬度,不再多縮 20px) */
.sn-sec-products .sn-sec-products__container,
.entry-content .sn-sec-products .sn-sec-products__container {
	width: 100%;
	max-width: 1290px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

/* v2.25.12:標題 + CTA 改用 Greenshift gsbp-XXX class 結構(直接抄最新文章),
 * 自家 header/title/cta 樣式不再需要 — Greenshift inline CSS 已接管視覺
 * 為避免自家 sn-sec-products__container 內 .gsbp-0b1dbc7 margin 跟下方 grid 距離不夠,給 grid 上方 margin */
.sn-sec-products .sn-sec-products__grid,
.entry-content .sn-sec-products .sn-sec-products__grid {
	margin-top: 36px;
}
@media (max-width: 768px) {
	.sn-sec-products .sn-sec-products__grid,
	.entry-content .sn-sec-products .sn-sec-products__grid {
		margin-top: 24px;
	}
}

/* v2.25.9:商城區塊改純 grid list(廢 slider),
 *           依 data-sn-cols-desktop / data-sn-cols-mobile 決定每排幾個 */

.sn-sec-products .sn-sec-products__grid .woocommerce {
	margin: 0;
}

/* 共同 reset:覆蓋 WC `.products.columns-X` 預設 float/grid */
.sn-sec-products .sn-sec-products__grid ul.products {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: grid !important;
	gap: 24px;
}
.sn-sec-products .sn-sec-products__grid ul.products > li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	clear: none !important;
	padding: 0 !important;
}

/* 電腦版:依 data-sn-cols-desktop 給對應欄數(3/4/5) */
.sn-sec-products[data-sn-cols-desktop="3"] .sn-sec-products__grid ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sn-sec-products[data-sn-cols-desktop="4"] .sn-sec-products__grid ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sn-sec-products[data-sn-cols-desktop="5"] .sn-sec-products__grid ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* 平板:5 欄壓成 4 欄;其他維持 */
@media (max-width: 1024px) {
	.sn-sec-products[data-sn-cols-desktop="5"] .sn-sec-products__grid ul.products {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* 手機:依 data-sn-cols-mobile(1/2)+ header stack */
@media (max-width: 768px) {
	.sn-sec-products,
	.entry-content .sn-sec-products {
		margin: 48px 0;
		/* v2.25.37:手機版左右 16px padding,不貼 viewport 邊
		 * (原本依賴客戶站外層 Greenshift container padding,但對應 gspb-XXX ID 不一定存在) */
		padding: 0 16px;
		box-sizing: border-box;
	}
	/* v2.25.12:header / title / cta 樣式改由 Greenshift gsbp-XXX class 接管,自家 mobile override 拿掉 */
	.sn-sec-products[data-sn-cols-mobile="1"] .sn-sec-products__grid ul.products {
		grid-template-columns: 1fr !important;
		gap: 16px;
	}
	.sn-sec-products[data-sn-cols-mobile="2"] .sn-sec-products__grid ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 16px;
	}
}

/* =================================================================
 * v2.25.35 — 商城區塊雙 CTA 響應式顯示(自家控制,不依賴客戶 Greenshift CSS)
 *
 * 商城區塊抄「服務項目」結構,用兩顆 CTA(class 為 hardcode 的 gsbp ID):
 *   - gspb_container-gsbp-7432c5e = header 內 top CTA   → 電腦版顯示
 *   - gspb_container-gsbp-5888caf = grid 下方 bottom CTA → 手機版顯示
 * 原本靠客戶站「服務項目」Greenshift block 的同名 gsbp class CSS 控制 show/hide,
 * 但各站該 block 的 gsbp ID 不一定一致 → CSS 不存在時 mobile CTA 會漏到電腦版
 * (Charles 回報:逛逛商城手機版按鈕在電腦版跑出來、手機版 CSS 也不對)。
 * 改由本檔自家控制:只下 display:none 藏掉錯 viewport 的 CTA,不強制 display 值
 * (避免覆蓋 Greenshift 對按鈕外觀/置中的 display 設定);雙重 class 拉高 specificity。
 * ================================================================= */
@media (min-width: 769px) {
	/* 電腦版:藏 grid 下方 mobile CTA,只留 header 內 top CTA */
	.sn-sec-products .gspb_container-gsbp-5888caf {
		display: none;
	}
}
@media (max-width: 768px) {
	/* 手機版:藏 header 內 top CTA,只留 grid 下方 bottom CTA */
	.sn-sec-products .gspb_container-gsbp-7432c5e {
		display: none;
	}
	/* v2.25.36:bottom CTA container 在客戶站無對應 layout CSS,而 .gsbp-c2bf33f 自帶
	 * display:flex 在 block container 內會撐滿父寬 → 按鈕變全寬醜版。
	 * Fix:container 強制 flex 置中,按鈕保 inline 尺寸不撐滿。 */
	.sn-sec-products .gspb_container-gsbp-5888caf {
		display: flex !important;
		justify-content: center !important;
		margin-top: 24px;
	}
	.sn-sec-products .gspb_container-gsbp-5888caf > a {
		width: auto !important;
		flex: 0 0 auto !important;
	}
}