/* PINGGO global page canvas — one outer alignment system for public pages. */
:root {
	--pg-content-width: calc(100% - (2 * var(--pg-gutter)));
}

/* Page chrome and full content canvases follow the same line as home/shop. */
.pinggo-breadcrumb__inner,
.pinggo-product__layout,
body.pinggo-storefront .pinggo-contribute__container,
.pinggo-tutorial-hub__hero-inner,
.pinggo-tutorial-hub__products,
.pinggo-tutorial-hub__featured,
#pinggo-tutorial-library .pinggo-article-hero,
#pinggo-tutorial-library .pinggo-article-toolbar,
#pinggo-tutorial-library .pinggo-article-layout,
.pinggo-cart-page {
	box-sizing: border-box;
	width: var(--pg-content-width);
	max-width: none;
	margin-right: auto;
	margin-left: auto;
}

.pinggo-breadcrumb__inner,
.pinggo-product__layout {
	padding-right: 0;
	padding-left: 0;
}

.pinggo-tutorial-hub {
	--pinggo-tutorial-width: var(--pg-content-width);
}

/* Elementor AI advisors: widen only their outer canvas, not every Elementor page. */
body.page-id-1777 .elementor-element-e03c6c1 > .e-con-inner,
body.page-id-1808 .elementor-element-d914089 > .e-con-inner {
	width: var(--pg-content-width);
	max-width: none;
}

body.page-id-1777 .elementor-element-e03c6c1,
body.page-id-1808 .elementor-element-d914089 {
	padding-right: 0;
	padding-left: 0;
}

/* Editorial pages share the canvas while text/sidebar retain readable columns. */
body.single-post .pinggo-breadcrumb__inner,
body.single-post .pinggo-article__header,
body.single-post .pinggo-article__layout {
	width: var(--pg-content-width);
	max-width: none;
}

/* 2.9.194：封面圖／教學影片改跟「正文＋側欄」同一條線——左緣對齊正文、右緣對齊側欄，
   不再撐滿整個畫布（elago 文章頁就是這條線）。1152px ＝ 760（正文）＋32（間距）＋360（側欄）；
   畫布比 1152 窄時自動等於畫布寬，與下面兩個欄位同寬。
   2.9.11 曾把封面圖／影片／正文統一在 980px 內容線，後被本檔（全站佈局對齊）蓋成滿版畫布，
   導致封面圖 1311px、正文 760px 兩條線錯開——用戶 2026-10-03 回報「左右要和下面的文字對齊」。 */
body.single-post .pinggo-article__hero,
body.single-post .pinggo-tutorial-player {
	width: min(calc(760px + 32px + 360px), var(--pg-content-width));
	max-width: none;
	margin-right: auto;
	margin-left: auto;
	/* 2.9.195：封面圖／教學影片改圓角（16px＝站上大型卡片的既有級距），
	   與下方卡片一致；overflow:hidden 由 content-pages.css 提供，圓角會正常裁切圖片。 */
	border-radius: 16px;
}

/* 2.9.195／2.9.197：文章標題區（「最新文章」眉標＋主標＋日期）寬度改跟封面圖／正文同一條線
   （原本滿版畫布 1311px，標題左右都比封面圖凸出）；文字維持原本的**居中**——
   2.9.195 曾改左對齊，用戶 2026-10-03 看過線上後指示「这些都要居中」，2.9.197 改回居中。 */
body.single-post .pinggo-article__header {
	width: min(calc(760px + 32px + 360px), var(--pg-content-width));
}

body.single-post .pinggo-article__header h1 {
	max-width: 1280px;
	margin-right: auto;
	margin-left: auto;
}

/* 2.9.198：文章頁側欄（相關產品／相關文章）的吸頂位置往下挪。
   原本 content-pages.css 是 top:20px——那是「站頭還不是 sticky」年代的數字；
   現在站頭 sticky 72px、吸頂標題條再佔 48px，側欄吸在 20px 等於整塊被壓在固定層後面，
   滾動時連「相關產品」這個標題都看不到（用戶 2026-10-03 回報「標題沒有吸頂」）。
   132px ＝ 站頭 72 ＋ 標題條 48 ＋ 12 間隙；手機 55 ＋ 43 ＋ 8 ＝ 106px。 */
body.single-post .pinggo-article__sidebar {
	top: 132px;
}

@media (max-width: 767px) {
	body.single-post .pinggo-article__sidebar {
		top: 106px;
	}
}

/* 2.9.195：文章頁「吸頂標題條」。捲過標題區後由 storefront.js 加上 .is-visible，
   在站頭（桌機 72px／手機 55px）下方滑出；文字左緣與封面圖／正文同一條內容線。 */
body.single-post .pinggo-article__bar {
	position: fixed;
	z-index: 40;
	top: 72px;
	right: 0;
	left: 0;
	border-bottom: 1px solid #ececec;
	background: rgba(255, 255, 255, .94);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	visibility: hidden;
	transform: translateY(-105%);
	transition: transform .18s ease, visibility .18s ease;
}

body.single-post .pinggo-article__bar.is-visible {
	visibility: visible;
	transform: none;
}

body.single-post .pinggo-article__bar-inner {
	display: flex;
	width: min(calc(760px + 32px + 360px), var(--pg-content-width));
	margin-right: auto;
	margin-left: auto;
	padding: 13px 0;
	align-items: baseline;
	gap: 12px;
}

body.single-post .pinggo-article__bar-eyebrow {
	flex: 0 0 auto;
	color: #777;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: .08em;
}

body.single-post .pinggo-article__bar-title {
	min-width: 0;
	overflow: hidden;
	color: #111;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 767px) {
	body.single-post .pinggo-article__bar {
		top: 55px;
	}

	body.single-post .pinggo-article__bar-inner {
		padding: 11px 0;
	}

	body.single-post .pinggo-article__bar-title {
		font-size: 14px;
	}
}

body.single-post .pinggo-article__layout {
	grid-template-columns: minmax(0, 760px) minmax(300px, 360px);
	justify-content: center;
}

/* Generic content pages use the common outer line; prose keeps its own cap.
 * 2.9.88：這條原本只有 width／max-width，漏了水平居中——同檔上面那批容器
 * （.pinggo-breadcrumb__inner、.pinggo-product__layout、.pinggo-cart-page…）都有
 * margin-left/right:auto，只有它沒有。於是 2.9.26「統一全站頁寬」之後，凡是
 * 自己寫 margin:0 的頁面（.woocommerce-account／.woocommerce-checkout，
 * 出自 checkout-account.css）就被頂到左邊：1920 視窗實測 left=0／右空 740px。
 * 站長 2026-09-17 回報登入卡片沒居中，2.9.87 先在帳號／結帳頁補回 auto，
 * 本版把 auto 補進基礎規則，日後新增頁面不必再各自記得寫一次。 */
.pinggo-page__content {
	width: var(--pg-content-width);
	max-width: 1180px;
	margin-right: auto;
	margin-left: auto;
}

@media (max-width: 767px) {
	/* Mobile already resolves --pg-gutter to 16px; remove legacy 18/20px drifts. */
	.pinggo-breadcrumb__inner,
	.pinggo-product__layout,
	body.pinggo-storefront .pinggo-contribute__container,
	.pinggo-tutorial-hub__hero-inner,
	.pinggo-tutorial-hub__products,
	#pinggo-tutorial-library .pinggo-article-hero,
	#pinggo-tutorial-library .pinggo-article-toolbar,
	#pinggo-tutorial-library .pinggo-article-layout,
	.pinggo-cart-page,
	body.single-post .pinggo-article__header,
	body.single-post .pinggo-article__hero,
	body.single-post .pinggo-tutorial-player,
	body.single-post .pinggo-article__layout {
		width: var(--pg-content-width);
	}

	body.single-post .pinggo-article__layout {
		display: block;
		padding-right: 0;
		padding-left: 0;
	}
}