.section-head { padding: 18px 0 10px; border-bottom: 1px solid var(--border); }

.title-wrap { display: flex; flex-direction: column; gap: 6px; }
.title-en { color: var(--primary); font-weight: 900; text-transform: uppercase; letter-spacing: .4px; }
.title-zh { font-size: 28px; font-weight: 900; margin: 0; }
.title-sub { margin: 0; color: var(--muted); }

/* breadcrumb */
.breadcrumb { background: var(--bg-soft); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.breadcrumb nav { font-size: 14px; color: var(--muted); padding: 8px 0; }
.breadcrumb a { color: var(--muted); }

.sep { margin: 0 6px; }

/* layout */
.layout { display: grid; grid-template-columns: 3fr 1fr; gap: 24px; padding:20px 16px; }

.sidebar { position: -webkit-sticky; position: sticky; top: calc(var(--header-height, 80px) + 20px); align-self: start; height: fit-content;; }

/* sidenav */
.sidenav { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px; box-shadow: var(--shadow); }
.sidenav h3 { font-size: 18px; font-weight: 900; }
.sidenav small { display: block; color: var(--muted); margin-bottom: 10px; }
.sidenav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.sidenav li { border-bottom: 1px solid var(--border);; }
.sidenav a { display: block; padding: 10px 12px; color: #111; }
.sidenav a:hover { background: var(--bg-soft); }
.side-banner { margin-top: 14px; overflow: hidden; }

/* news-list */
.news-list { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); }
.news-item { padding: 16px 18px; border-bottom: 1px dashed var(--border); }
.news-item:last-child { border-bottom: 0; }
.news-item h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.5; font-weight: 900; color: #111; }
.meta { display: flex; gap: 12px; align-items: center; font-size: 14px; color: var(--muted); }
.meta .dot { width: 4px; height: 4px; border-radius: 50%; background: #d1d5db; display: inline-block; }
.meta a { font-weight: 700; }
.news-item a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }

/* productslist */
.productslist { background: #fff; border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 16px; }
.productslist ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.productslist li { border: 1px solid var(--border); border-radius: 12px; padding: 12px; background: #fff; transition: box-shadow .2s, transform .12s; }
.productslist li:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.productImg { border-radius: 10px; overflow: hidden; aspect-ratio: 3/4; background: #f3f4f6; display: block; }
.productImg img { width: 100%; height: 100%; object-fit: cover; }
.productslist p { margin: .5rem 0 0; color: var(--muted); font-size: 14px; }
.productslist h3 { margin: .25rem 0 0; font-size: 16px; line-height: 1.5; color: #111; font-weight: 900; }
.productslist h3 a { color: #111; }
.productslist h3 a:hover { color: var(--primary); text-decoration: none; }

/* profile */
.profile { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.profile-head { display: grid; grid-template-columns: 260px 1fr; gap: 18px; align-items: start; }
.profile-head figure.main-photo { margin: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #f3f4f6; }
.profile-head figure.main-photo img { width: 100%; object-fit: cover; }
.profile-title { margin: 0 0 8px; font-size: 24px; line-height: 1.35; font-weight: 900; }
.profile-head .meta-note { margin: 0; color: var(--muted); font-size: 14px; }
.profile-head .facts { margin: 12px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.profile-head .facts >div { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.profile-head .facts dt { font-weight: 800; color: #374151; padding: 8px 10px; }
.profile-head .facts dd { margin: 0; padding: 8px 10px; }

/* CTA */
.profile-head .cta { margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; }
.profile-head .cta a.button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 900; box-shadow: 0 8px 20px rgba(230, 89, 136, .25); }
.profile-head .cta a.button:hover { opacity: .95; text-decoration: none; }

/* 圖庫區塊 */
.gallery { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px; }
.gallery h2 { margin: 0 0 10px; font-size: 20px; font-weight: 900; }
.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.grid li { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: #fff; transition: box-shadow .2s, transform .12s; }
.grid li:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.grid .card_box { display: block; }
.grid .thumb { aspect-ratio: 3/4; background: #f3f4f6; overflow: hidden; }
.grid .thumb img { width: 100%; height: 100%; object-fit: cover; }
.grid .caption { padding: 10px 12px; background: var(--primary); font-size: 14px; font-weight: 700; color: #fff; text-align: center; }

/* community */
#community { overflow: hidden; margin: 20px 0; }
#community ul { display: flex; align-items: center; gap: .5em; list-style: none; }
#community ul li { width: 80px; line-height: 1; }
#community ul li .fb-like , #community ul li .fb-like >* { line-height: 1 !important; }

/* pagination */
.pagination { display: flex; gap: 8px; align-items: center; justify-content: center; margin: 18px 0 6px; }
.pagination a, .pagination span { display: inline-block; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.pagination .current { background: var(--primary); border-color: var(--primary); color: #fff; font-weight: 900; }
.pagination a:hover { background: var(--bg-soft); }

@media (max-width: 992px) {
	.layout { grid-template-columns: 1fr; }
	.productslist ul { grid-template-columns: repeat(2, 1fr); }
	.grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:720px) {
	.profile-head { grid-template-columns: 1fr; }
	.grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.productslist ul { grid-template-columns: 1fr; }
	.profile-head .facts { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
	.grid { grid-template-columns: 1fr; }
}