/*
 * 集光市 Jiguang Market — WooCommerce 商城樣式
 * -------------------------------------------------------------
 * 目標：簡約、直覺、不失設計。沿用全站 Design Token（--jgs-*），
 * 覆蓋 WooCommerce 預設版面，統一商品列表頁、商品分類頁、商品單頁三種版型。
 * 僅在商城相關頁面載入（見 inc/woocommerce.php）。
 *
 * 命名：主題自有包裹用 .jgs-woo；其餘沿用 WooCommerce 既有 class 加以覆蓋。
 */

/* =============================================================
 * 0. 容器與共用
 * ============================================================= */
.jgs-woo {
	padding-block: clamp(32px, 5vw, 64px) clamp(56px, 7vw, 96px);
	background: var(--jgs-background);
}

.woocommerce .jgs-container,
.woocommerce-page .jgs-container {
	max-width: var(--jgs-container-main);
}

/* 讓 WooCommerce 區塊內的連結沿用主題色 */
.jgs-woo a {
	color: var(--jgs-secondary);
	transition: color var(--jgs-duration-fast) var(--jgs-ease);
}

.jgs-woo a:hover {
	color: var(--jgs-secondary-dark);
}

/* =============================================================
 * 1. 麵包屑
 * ============================================================= */
.jgs-woo__breadcrumb,
.woocommerce .woocommerce-breadcrumb {
	font-family: var(--jgs-font-label);
	font-size: var(--jgs-font-body-sm);
	color: var(--jgs-muted);
	margin-bottom: 28px;
}

.jgs-woo__breadcrumb a {
	color: var(--jgs-muted);
}

.jgs-woo__breadcrumb a:hover {
	color: var(--jgs-secondary);
}

.jgs-woo__bc-sep {
	color: var(--jgs-border);
	margin: 0 2px;
}

/* =============================================================
 * 2. 商店頁首（標題 + 說明）
 * ============================================================= */
.woocommerce-products-header {
	margin-bottom: 36px;
}

.woocommerce-products-header__title,
.woocommerce-products-header .page-title {
	font-family: var(--jgs-font-heading);
	font-size: var(--jgs-font-h1);
	line-height: var(--jgs-leading-heading);
	color: var(--jgs-text);
	margin: 0 0 12px;
}

/* 商品分類頁的分類描述 */
.woocommerce .term-description,
.woocommerce-products-header + .term-description {
	color: var(--jgs-muted);
	font-size: var(--jgs-font-body-lg);
	max-width: 62ch;
	margin-bottom: 28px;
}

/* =============================================================
 * 3. 結果數量 + 排序列
 * ============================================================= */
.woocommerce .woocommerce-result-count,
.woocommerce-page .woocommerce-result-count {
	font-family: var(--jgs-font-label);
	font-size: var(--jgs-font-body-sm);
	color: var(--jgs-muted);
	margin: 0 0 24px;
	line-height: 42px;
}

.woocommerce .woocommerce-ordering,
.woocommerce-page .woocommerce-ordering {
	margin-bottom: 24px;
}

.woocommerce .woocommerce-ordering select {
	font-family: var(--jgs-font-label);
	font-size: var(--jgs-font-body-sm);
	color: var(--jgs-text);
	background: var(--jgs-white);
	border: 1px solid var(--jgs-border);
	border-radius: var(--jgs-radius-pill);
	padding: 10px 20px;
	cursor: pointer;
	transition: border-color var(--jgs-duration-fast) var(--jgs-ease);
}

.woocommerce .woocommerce-ordering select:hover {
	border-color: var(--jgs-secondary);
}

/* =============================================================
 * 4. 商品列表 / 分類列表 — 卡片網格
 *    覆蓋 WooCommerce 的 float 版面，改用 CSS Grid。
 * ============================================================= */
.woocommerce ul.products,
.woocommerce-page ul.products {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(20px, 2.5vw, 36px);
	margin: 0;
	padding: 0;
	list-style: none;
	justify-content: start;
}

/* 停用 WooCommerce 的 clearfix 虛擬元素：在 grid 容器中它們會變成佔格的
 * grid 項目，導致第一列左上空一格、商品整體往右位移。 */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
.woocommerce-page ul.products::before,
.woocommerce-page ul.products::after {
	content: none;
	display: none;
}

/* 消除 WooCommerce 依 .columns-N 設定的浮動寬度 */
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	width: auto !important;
	float: none !important;
	margin: 0 !important;
	padding: 0;
	display: flex;
	flex-direction: column;
	text-align: left;
}

/* 卡片圖片：統一比例、圓角、細框線（白底商品也有清楚邊界） */
.woocommerce ul.products li.product a img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--jgs-radius-image);
	border: 1px solid var(--jgs-border);
	margin-bottom: 16px;
	background: var(--jgs-white);
	transition: transform var(--jgs-duration) var(--jgs-ease),
		box-shadow var(--jgs-duration) var(--jgs-ease);
}

.woocommerce ul.products li.product:hover a img {
	transform: translateY(-4px);
	box-shadow: var(--jgs-shadow-card);
}

/* 商品分類（loop 內的 category）文字 */
.woocommerce ul.products li.product .woocommerce-loop-category__title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
	font-family: var(--jgs-font-body);
	font-size: var(--jgs-font-h4);
	font-weight: var(--jgs-weight-medium);
	line-height: 1.4;
	color: var(--jgs-text);
	margin: 0 0 6px;
	padding: 0;
}

.woocommerce ul.products li.product a {
	color: inherit;
}

.woocommerce ul.products li.product a:hover .woocommerce-loop-product__title {
	color: var(--jgs-secondary);
}

/* 價格 */
.woocommerce ul.products li.product .price {
	font-family: var(--jgs-font-label);
	font-size: var(--jgs-font-body);
	color: var(--jgs-secondary);
	font-weight: var(--jgs-weight-semibold);
	margin: 2px 0 14px;
}

.woocommerce ul.products li.product .price del {
	color: var(--jgs-muted);
	font-weight: var(--jgs-weight-regular);
	opacity: 0.7;
	margin-right: 6px;
}

.woocommerce ul.products li.product .price ins {
	text-decoration: none;
	color: var(--jgs-accent);
}

/* 星等評分（若啟用）淡化處理 */
.woocommerce ul.products li.product .star-rating {
	font-size: 12px;
	color: var(--jgs-warning);
	margin-bottom: 10px;
}

/* 列表中的加入購物車 / 前往購買按鈕 */
.woocommerce ul.products li.product .button,
.woocommerce ul.products li.product .added_to_cart {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4em;
	margin-top: auto;
	align-self: flex-start;
	font-family: var(--jgs-font-label);
	font-size: var(--jgs-font-body-sm);
	font-weight: var(--jgs-weight-semibold);
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 12px 22px;
	border-radius: var(--jgs-radius-pill);
	border: 1px solid var(--jgs-border);
	background: var(--jgs-white);
	color: var(--jgs-secondary);
	transition: transform var(--jgs-duration-fast) var(--jgs-ease),
		background-color var(--jgs-duration-fast) var(--jgs-ease),
		border-color var(--jgs-duration-fast) var(--jgs-ease),
		color var(--jgs-duration-fast) var(--jgs-ease);
}

.woocommerce ul.products li.product .button:hover,
.woocommerce ul.products li.product .added_to_cart:hover {
	background: var(--jgs-secondary);
	border-color: var(--jgs-secondary);
	color: var(--jgs-white);
	transform: translateY(-1px);
}

/* =============================================================
 * 5. 特價標籤
 * ============================================================= */
.woocommerce span.onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	min-height: auto;
	min-width: auto;
	margin: 0;
	padding: 6px 14px;
	font-family: var(--jgs-font-label);
	font-size: 12px;
	font-weight: var(--jgs-weight-semibold);
	letter-spacing: 0.04em;
	line-height: 1;
	border-radius: var(--jgs-radius-pill);
	background: var(--jgs-accent);
	color: var(--jgs-white);
}

.woocommerce ul.products li.product,
.woocommerce div.product {
	position: relative;
}

/* =============================================================
 * 6. 商品單頁
 * ============================================================= */
.woocommerce div.product {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(32px, 4vw, 64px);
	align-items: start;
}

/* 同樣停用 clearfix 虛擬元素，避免佔用 grid 格、位移圖庫與摘要欄 */
.woocommerce div.product::before,
.woocommerce div.product::after {
	content: none;
	display: none;
}

/* 跨欄的元素（tabs、相關商品）回到整列 */
.woocommerce div.product .woocommerce-tabs,
.woocommerce div.product .related,
.woocommerce div.product .upsells,
.woocommerce div.product .woocommerce-product-rating {
	grid-column: 1 / -1;
}

/* 圖庫 */
.woocommerce div.product div.images {
	margin: 0;
	float: none;
	width: auto;
}

.woocommerce div.product div.images img {
	border-radius: var(--jgs-radius-lg);
}

.woocommerce div.product div.images .flex-control-thumbs {
	margin-top: 14px;
}

.woocommerce div.product div.images .flex-control-thumbs li {
	width: 20%;
}

.woocommerce div.product div.images .flex-control-thumbs img {
	border-radius: var(--jgs-radius-sm);
}

/* 摘要 */
.woocommerce div.product div.summary {
	margin: 0;
	float: none;
	width: auto;
}

.woocommerce div.product .product_title {
	font-family: var(--jgs-font-heading);
	font-size: var(--jgs-font-h2);
	line-height: var(--jgs-leading-heading);
	color: var(--jgs-text);
	margin: 0 0 16px;
}

.woocommerce div.product p.price,
.woocommerce div.product span.price {
	font-family: var(--jgs-font-label);
	font-size: var(--jgs-font-h4);
	font-weight: var(--jgs-weight-semibold);
	color: var(--jgs-secondary);
	margin: 0 0 20px;
}

.woocommerce div.product p.price del,
.woocommerce div.product span.price del {
	color: var(--jgs-muted);
	font-weight: var(--jgs-weight-regular);
	opacity: 0.7;
	margin-right: 8px;
}

.woocommerce div.product p.price ins,
.woocommerce div.product span.price ins {
	text-decoration: none;
	color: var(--jgs-accent);
}

/* 短描述 */
.woocommerce div.product .woocommerce-product-details__short-description {
	color: var(--jgs-text);
	font-size: var(--jgs-font-body);
	line-height: var(--jgs-leading-body);
	margin-bottom: 28px;
}

.woocommerce div.product .woocommerce-product-details__short-description p {
	margin: 0 0 12px;
}

/* 主要購買按鈕（外部商品「前往購買」＝全站主要 CTA 風格：陽光黃） */
.woocommerce div.product form.cart {
	margin-bottom: 28px;
}

.woocommerce div.product .single_add_to_cart_button,
.woocommerce div.product .jgs-woo__buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--jgs-font-label);
	font-size: var(--jgs-font-body);
	font-weight: var(--jgs-weight-semibold);
	letter-spacing: 0.02em;
	line-height: 1;
	padding: 16px 34px;
	border: 1px solid transparent;
	border-radius: var(--jgs-radius-pill);
	background: var(--jgs-primary);
	color: var(--jgs-primary-ink);
	cursor: pointer;
	transition: transform var(--jgs-duration-fast) var(--jgs-ease),
		background-color var(--jgs-duration-fast) var(--jgs-ease);
}

.woocommerce div.product .single_add_to_cart_button:hover,
.woocommerce div.product .jgs-woo__buy:hover {
	background: #EFC92F;
	color: var(--jgs-primary-ink);
	transform: translateY(-1px);
}

.jgs-woo__buy-arrow {
	font-size: 1.1em;
	line-height: 1;
}

/* 數量選擇器（一般商品） */
.woocommerce div.product form.cart .quantity {
	margin-right: 12px;
}

.woocommerce .quantity input.qty {
	width: 72px;
	padding: 14px 10px;
	text-align: center;
	border: 1px solid var(--jgs-border);
	border-radius: var(--jgs-radius-pill);
	background: var(--jgs-white);
	font-family: var(--jgs-font-label);
}

/* 商品 meta（分類 / 標籤 / SKU） */
.woocommerce div.product .product_meta {
	font-family: var(--jgs-font-label);
	font-size: var(--jgs-font-body-sm);
	color: var(--jgs-muted);
	border-top: 1px solid var(--jgs-border);
	padding-top: 20px;
	margin-top: 4px;
}

.woocommerce div.product .product_meta > span {
	display: block;
	margin-bottom: 6px;
}

.woocommerce div.product .product_meta a {
	color: var(--jgs-secondary);
}

/* 單頁星等 */
.woocommerce div.product .woocommerce-product-rating {
	margin-bottom: 16px;
}

/* =============================================================
 * 7. 商品分頁（描述 / 其他資訊 / 評論）
 * ============================================================= */
.woocommerce div.product .woocommerce-tabs {
	margin-top: clamp(40px, 5vw, 72px);
}

.woocommerce div.product .woocommerce-tabs ul.tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 28px;
	padding: 0 0 2px;
	margin: 0 0 28px;
	border-bottom: 1px solid var(--jgs-border);
}

.woocommerce div.product .woocommerce-tabs ul.tabs::before {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0 0 14px;
	margin: 0;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
	display: none;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: var(--jgs-font-label);
	font-size: var(--jgs-font-body);
	font-weight: var(--jgs-weight-medium);
	color: var(--jgs-muted);
	padding: 0;
	position: relative;
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a,
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover {
	color: var(--jgs-text);
}

.woocommerce div.product .woocommerce-tabs ul.tabs li.active a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -15px;
	height: 2px;
	background: var(--jgs-secondary);
}

.woocommerce div.product .woocommerce-tabs .panel {
	color: var(--jgs-text);
	font-size: var(--jgs-font-body);
	line-height: var(--jgs-leading-body);
	max-width: var(--jgs-container-reading);
}

.woocommerce div.product .woocommerce-tabs .panel h2 {
	font-family: var(--jgs-font-heading);
	font-size: var(--jgs-font-h3);
	margin-bottom: 16px;
}

/* 其他資訊表格 */
.woocommerce table.shop_attributes {
	border: 0;
}

.woocommerce table.shop_attributes th,
.woocommerce table.shop_attributes td {
	border: 0;
	border-bottom: 1px solid var(--jgs-border);
	padding: 12px 8px;
	font-size: var(--jgs-font-body-sm);
}

.woocommerce table.shop_attributes th {
	color: var(--jgs-muted);
	font-weight: var(--jgs-weight-medium);
}

/* =============================================================
 * 8. 相關商品 / 加購
 * ============================================================= */
.woocommerce .related,
.woocommerce .upsells {
	margin-top: clamp(48px, 6vw, 88px);
}

.woocommerce .related > h2,
.woocommerce .upsells > h2 {
	font-family: var(--jgs-font-heading);
	font-size: var(--jgs-font-h3);
	color: var(--jgs-text);
	margin-bottom: 28px;
}

/* =============================================================
 * 9. 分頁導航
 * ============================================================= */
.woocommerce nav.woocommerce-pagination {
	margin-top: 56px;
	text-align: center;
}

.woocommerce nav.woocommerce-pagination ul {
	border: 0;
	display: inline-flex;
	gap: 8px;
}

.woocommerce nav.woocommerce-pagination ul li {
	border: 0;
	margin: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--jgs-border);
	border-radius: var(--jgs-radius-pill);
	color: var(--jgs-secondary);
	font-family: var(--jgs-font-label);
	background: var(--jgs-white);
}

.woocommerce nav.woocommerce-pagination ul li span.current {
	background: var(--jgs-secondary);
	color: var(--jgs-white);
	border-color: transparent;
}

.woocommerce nav.woocommerce-pagination ul li a:hover {
	border-color: var(--jgs-secondary);
	background: var(--jgs-white);
}

/* =============================================================
 * 10. 通知訊息（加入購物車 / 錯誤 / 提示）
 * ============================================================= */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
	border-top: 0;
	border-left: 3px solid var(--jgs-secondary);
	border-radius: var(--jgs-radius-sm);
	background: var(--jgs-white);
	box-shadow: var(--jgs-shadow-card);
	font-size: var(--jgs-font-body-sm);
	color: var(--jgs-text);
	padding: 16px 20px;
}

.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before {
	color: var(--jgs-secondary);
}

.woocommerce .woocommerce-error {
	border-left-color: var(--jgs-danger);
}

.woocommerce .woocommerce-error::before {
	color: var(--jgs-danger);
}

.woocommerce .woocommerce-message .button,
.woocommerce .woocommerce-info .button {
	background: var(--jgs-secondary);
	color: var(--jgs-white);
	border-radius: var(--jgs-radius-pill);
	padding: 8px 18px;
	font-size: var(--jgs-font-body-sm);
}

/* =============================================================
 * 11. 購物車 / 結帳（輕量美化：外部商品流程通常用不到，保底不破版）
 * ============================================================= */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce #order_review input,
.woocommerce .select2-container .select2-selection {
	border: 1px solid var(--jgs-border);
	border-radius: var(--jgs-radius-sm);
	background: var(--jgs-white);
	padding: 12px 14px;
	font-family: var(--jgs-font-body);
}

.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
	background: var(--jgs-secondary);
	color: var(--jgs-white);
	border-radius: var(--jgs-radius-pill);
	font-family: var(--jgs-font-label);
	font-weight: var(--jgs-weight-semibold);
	padding: 12px 24px;
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background: var(--jgs-secondary-dark);
	color: var(--jgs-white);
}

.woocommerce #respond input#submit.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--jgs-primary);
	color: var(--jgs-primary-ink);
}

.woocommerce #respond input#submit.alt:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background: #EFC92F;
	color: var(--jgs-primary-ink);
}

/* =============================================================
 * 12. 響應式
 * ============================================================= */

/* 平板：列表 2 欄、單頁維持雙欄但縮小間距 */
@media (max-width: 1024px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* 單頁在平板以下改為單欄（圖上、資訊下） */
@media (max-width: 860px) {
	.woocommerce div.product {
		grid-template-columns: 1fr;
		gap: 28px;
	}
}

/* 手機：列表 2 欄（維持逛街感，不擠），字級與間距收斂 */
@media (max-width: 767px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.woocommerce ul.products li.product a img {
		margin-bottom: 12px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title,
	.woocommerce ul.products li.product .woocommerce-loop-category__title {
		font-size: var(--jgs-font-body);
	}

	.woocommerce ul.products li.product .button,
	.woocommerce ul.products li.product .added_to_cart {
		width: 100%;
		align-self: stretch;
		padding: 10px 16px;
	}

	.woocommerce .woocommerce-result-count,
	.woocommerce .woocommerce-ordering {
		float: none;
		width: 100%;
	}

	.woocommerce div.product .single_add_to_cart_button,
	.woocommerce div.product .jgs-woo__buy {
		width: 100%;
	}
}

/* 極窄手機：列表回到單欄，避免卡片過小 */
@media (max-width: 400px) {
	.woocommerce ul.products,
	.woocommerce-page ul.products {
		grid-template-columns: 1fr;
	}
}