/* /product-review (商品推薦) + /product-category/* archive, 2026-11-04 redesign.
   Same language as the homepage: navy rule + serif section heading, white page, hairline dividers, square edges,
   navy #192f65 / gold #f8c623, no pills, no shadows. Text sizes follow HQ (desktop 17/15px, phones 18px).
   Replaces the blue e-commerce card look (old override was a </body> style in mu-plugin sf-product-ad-toggle.php). */
.pr-archive { --nv: #192f65; --gd: #f8c623; --ink: #1d2230; --mut: #5c6372; --rule: #e6e8ee; --soft: #f6f7f9; }

/* breadcrumb + heading */
.pr-archive .breadcrumb { margin: 0 0 14px !important; font-size: 14px; color: var(--mut); }
.pr-archive .breadcrumb a { color: var(--mut); }
.pr-archive .breadcrumb a:hover { color: var(--nv); text-decoration: underline; text-underline-offset: 3px; }
.pr-archive .cat_titleline {
	margin: 0 0 22px !important; padding: 10px 0 14px !important; height: auto !important;
	border-top: 3px solid var(--nv) !important; border-bottom: 1px solid var(--rule) !important; background: none !important;
}
.pr-archive .cat_titleline .cat_title {
	float: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
	font-family: "Noto Serif TC", "Songti TC", "PMingLiU", serif; font-size: 26px !important; font-weight: 700 !important;
	line-height: 1.3 !important; letter-spacing: .02em; color: var(--nv) !important; height: auto !important;
}
.pr-archive .cat_titleline .pr-dek { margin: 4px 0 0; font-size: 15px; line-height: 1.6; color: var(--mut); }
.pr-archive .cat_titleline .subcat_title { margin: 6px 0 0; font-size: 14px; color: var(--mut); float: none; }

/* grid: two columns, no boxes; rows separated by a hairline */
.pr-archive .pr-card-grid {
	display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px !important;
	margin: 0 !important; padding: 0 !important; list-style: none;
}
.pr-archive .pr-card {
	display: flex !important; flex-direction: column; margin: 0 !important; padding: 0 0 22px !important;
	margin-bottom: 24px !important; border: 0 !important; border-bottom: 1px solid var(--rule) !important;
	border-radius: 0 !important; background: none !important; box-shadow: none !important; overflow: visible !important;
	transform: none !important; float: none !important; width: auto !important; line-height: 1.6;
}
.pr-archive .pr-card:hover { box-shadow: none !important; transform: none !important; border-color: var(--rule) !important; }
.pr-archive .pr-card__img-wrap {
	position: relative; aspect-ratio: 4 / 3; height: auto !important; margin: 0 0 14px; overflow: hidden;
	background: var(--soft) !important; border: 0 !important; border-radius: 0 !important;
}
.pr-archive .pr-card__img-wrap a { display: block; width: 100%; height: 100%; }
.pr-archive .pr-card__img {
	display: block; width: 100% !important; height: 100% !important; object-fit: contain !important;
	mix-blend-mode: multiply; transform: none !important; transition: opacity .2s; border-radius: 0 !important;
}
.pr-archive .pr-card:hover .pr-card__img { transform: none !important; opacity: .92; }
.pr-archive .pr-card__badge { display: none !important; }
.pr-archive .pr-card__body { display: flex; flex-direction: column; flex: 1; padding: 0 !important; }
.pr-archive .pr-card__kicker {
	display: block; margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .08em; line-height: 1.4; color: var(--nv);
}
.pr-archive .pr-card__kicker::before {
	content: ""; display: inline-block; width: 16px; height: 3px; margin-right: 8px; vertical-align: middle; background: var(--gd);
}
.pr-archive .pr-card__title { margin: 0 0 8px !important; padding: 0 !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.5 !important; height: auto !important; }
.pr-archive .pr-card__title a {
	color: var(--ink) !important; text-decoration: none;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.pr-archive .pr-card__title a:hover { color: var(--nv) !important; text-decoration: underline; text-underline-offset: 3px; }
.pr-archive .pr-card__subtitle { margin: 0 0 6px !important; font-size: 15px; color: var(--mut); }
.pr-archive .pr-card__excerpt {
	margin: 0 0 14px !important; padding: 0 !important; font-size: 15px !important; line-height: 1.65 !important; color: var(--mut) !important;
	display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: auto !important;
}
.pr-archive .pr-card__footer {
	display: flex !important; flex-direction: row !important; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	margin: auto 0 0 !important; text-align: left !important; padding: 0 !important; border: 0 !important;
}
.pr-archive .pr-card__meta { font-size: 14px !important; color: #8a909c !important; line-height: 1.4 !important; }
.pr-archive .pr-card__actions { display: flex !important; align-items: center; gap: 18px; margin: 0 !important; width: auto !important; }
.pr-archive .pr-card__btn {
	display: inline-flex !important; align-items: center; justify-content: center; flex: none !important; width: auto !important;
	height: auto !important; min-height: 0 !important; margin: 0 !important; box-shadow: none !important;
	font-size: 15px !important; font-weight: 700 !important; line-height: 1.4 !important; text-decoration: none !important; border-radius: 0 !important;
}
.pr-archive .pr-card__btn--review { padding: 0 !important; background: none !important; border: 0 !important; color: var(--nv) !important; }
.pr-archive .pr-card__btn--review::after { content: "›"; margin-left: 4px; }
.pr-archive .pr-card__btn--review:hover { text-decoration: underline !important; text-underline-offset: 3px; }
.pr-archive .pr-card__btn--buy {
	padding: 8px 16px !important; background: var(--nv) !important; border: 1px solid var(--nv) !important; color: #fff !important; border-radius: 4px !important;
}
.pr-archive .pr-card__btn--buy:hover { background: #10224d !important; border-color: #10224d !important; }
.pr-archive .pr-card__btn:focus-visible, .pr-archive .pr-card__title a:focus-visible { outline: 3px solid var(--gd); outline-offset: 2px; }

/* the old sheet draws a 2px black rule above the list (the heading already has the navy rule) */
.pr-archive .list_wrapper, .pr-archive .pr-list-wrapper { border-top: 0 !important; padding-top: 0 !important; }

/* pagination (square, navy) */
.pr-archive .pagination a, .pr-archive .pagination span {
	display: inline-block; min-width: 36px; margin: 0 4px 6px 0; padding: 6px 10px; font-size: 15px; text-align: center;
	color: var(--nv); border: 1px solid var(--rule); border-radius: 0; background: #fff;
}
.pr-archive .pagination .current, .pr-archive .pagination a:hover { color: #fff; background: var(--nv); border-color: var(--nv); }

/* tablets: keep two columns, tighter gap */
@media (max-width: 900px) { .pr-archive .pr-card-grid { gap: 0 20px !important; } }

/* phones: the site's photo-left list rows instead of tall cards */
@media (max-width: 600px) {
	.pr-archive .cat_titleline .cat_title { font-size: 24px !important; }
	.pr-archive .pr-card-grid { grid-template-columns: 1fr; gap: 0 !important; }
	.pr-archive .pr-card {
		display: grid !important; grid-template-columns: 112px minmax(0, 1fr); column-gap: 14px; align-items: start;
		padding: 0 0 16px !important; margin-bottom: 16px !important;
	}
	.pr-archive .pr-card__img-wrap { margin: 2px 0 0; aspect-ratio: 1 / 1; }
	.pr-archive .pr-card__kicker { font-size: 12px; margin-bottom: 4px; }
	.pr-archive .pr-card__title { font-size: 18px !important; margin-bottom: 6px !important; }
	.pr-archive .pr-card__excerpt { display: none !important; }
	.pr-archive .pr-card__footer { gap: 8px 14px; justify-content: flex-start; }
	.pr-archive .pr-card__meta { width: 100%; font-size: 13px !important; }
	.pr-archive .pr-card__actions { gap: 16px; }
	.pr-archive .pr-card__btn { font-size: 15px !important; }
	.pr-archive .pr-card__btn--buy { padding: 7px 14px !important; }
}