/*
Theme Name: Astra Child
Description: Child theme for the Guanqu Shoes B2B site. Presentation only.
Template: astra
Version: 1.4.0
Requires at least: 6.0
Requires PHP: 7.4
*/

/*
 * Base brand palette (Round 3). Presentation only: product data, contact
 * data and inquiry logic live in the WordPress / WooCommerce data layer.
 * Astra global colours cover links, buttons, headings and dividers; the
 * rules below cover the two surfaces Astra's palette does not map.
 */
:root {
	--guanqu-navy: #17324d;
	--guanqu-warm: #f7f6f2;
	--guanqu-teal: #006d77;
	--guanqu-graphite: #273444;
}

body {
	background-color: var(--guanqu-warm);
	color: var(--guanqu-graphite);
}

/* Header: navy band with light navigation text. */
.ast-primary-header-bar {
	background-color: var(--guanqu-navy) !important;
	border-bottom-color: var(--guanqu-navy);
}

.site-header .site-title a,
.site-header .site-title a:visited,
.site-header .main-header-menu .menu-link,
.site-header .main-header-menu .menu-link:visited {
	color: #ffffff;
}

.site-header .site-title a:hover,
.site-header .site-title a:focus,
.site-header .main-header-menu .menu-link:hover,
.site-header .main-header-menu .menu-link:focus,
.site-header .main-header-menu .current-menu-item > .menu-link {
	color: #8fd6db;
}

/* Footer: navy band with light text. */
.site-above-footer-wrap,
.site-primary-footer-wrap,
.site-below-footer-wrap {
	background-color: var(--guanqu-navy) !important;
	color: var(--guanqu-warm);
}

.site-footer,
.site-footer .ast-footer-copyright,
.site-footer .ast-footer-copyright p {
	color: var(--guanqu-warm);
}

.site-footer a,
.site-footer a:visited {
	color: #ffffff;
}

.site-footer a:hover,
.site-footer a:focus {
	color: #8fd6db;
}

/* Visible keyboard focus on interactive elements. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
.menu-link:focus-visible {
	outline: 2px solid var(--guanqu-teal);
	outline-offset: 2px;
}

/*
 * Astra ships `.button:focus { outline: 0 }` (0,2,0), which out-specifies the
 * global a:focus-visible ring (0,1,1): the catalog CTAs — the primary inquiry
 * button and the card "View Details" — had no keyboard focus indicator at all
 * (measured outline-width 0px / a faint UA dotted). Restore the ring at higher
 * specificity for those buttons. offset 2 keeps the teal ring on the white
 * surface beside the button, so it stays visible even on the teal fill.
 */
.woocommerce ul.products li.product:not(.product-category) a.button:focus-visible,
.single-product div.product .summary .button:focus-visible {
	outline: 2px solid var(--guanqu-teal);
	outline-offset: 2px;
}

/*
 * Round 5-6 UI: product list, category bar + unified product detail
 * (AGENTS §6, §7, §9, §20).
 * Scoped to the WooCommerce catalog surfaces so Home, About and Request Quote
 * keep their existing layout. Presentation only; no product data lives here.
 * Column counts come from the native Astra "shop-grids" setting, not from CSS.
 */
:root {
	--guanqu-line: #dee3e7;
	--guanqu-card: #ffffff;
	--guanqu-mist: #edf2f4;
	--guanqu-radius-card: 18px;
	--guanqu-radius-control: 11px;
}

/*
 * Content column ≈1200px on the catalog (Astra ships a 1240px shop rule with
 * higher specificity than a plain container selector, hence the scoping).
 */
body.woocommerce .site-content > .ast-container {
	max-width: 1200px;
}

/* ---- Product list ----------------------------------------------------- */
/*
 * Card rules exclude the category tile on purpose: Astra gives a tile the
 * classes "product-category product", so a bare li.product would also box it
 * as a product card. Keeping the two selectors disjoint means neither can
 * mis-hit the other (the UI-2.1 tile fixes stay, but no longer carry the load).
 */
.woocommerce ul.products li.product:not(.product-category) {
	background-color: var(--guanqu-card);
	border: 1px solid var(--guanqu-line);
	border-radius: var(--guanqu-radius-card);
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(23, 50, 77, 0.04);
}

/*
 * Square image slot. The source files are already square with their own white
 * margin, so this only contain-fits them; no extra padding is added, which
 * would shrink the shoe inside the frame.
 */
.woocommerce ul.products li.product .astra-shop-thumbnail-wrap {
	position: relative;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--guanqu-card);
	border-bottom: 1px solid var(--guanqu-line);
}

.woocommerce ul.products li.product .astra-shop-thumbnail-wrap img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: contain;
}

/*
 * The bag-icon card action reads as a cart entry; the catalog uses the
 * "View Details" button in the summary instead (AGENTS §17, §18).
 */
.woocommerce ul.products li.product .ast-on-card-button {
	display: none;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 16px 18px 18px;
}

.woocommerce ul.products li.product .ast-woo-product-category {
	color: var(--guanqu-navy);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	color: var(--guanqu-navy);
	font-size: 18px;
	line-height: 1.3;
}

.woocommerce ul.products li.product .guanqu-card-sku {
	font-size: 13px;
}

.woocommerce ul.products li.product a.button {
	width: 100%;
	min-height: 44px;
	margin-top: 8px;
	padding: 0 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--guanqu-teal);
	border-radius: var(--guanqu-radius-control);
	background-color: var(--guanqu-teal);
	color: #ffffff;
	font-weight: 600;
}

.woocommerce ul.products li.product a.button:hover,
.woocommerce ul.products li.product a.button:focus {
	background-color: #00565e;
	border-color: #00565e;
	color: #ffffff;
}

/* Phones stay two-up; only very narrow screens collapse to one column. */
@media (max-width: 359.98px) {
	body.woocommerce.mobile-columns-2 ul.products:not(.elementor-grid) {
		grid-template-columns: 1fr;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 15px;
	}
}

/* ---- Product detail --------------------------------------------------- */
.single-product .woocommerce-product-gallery {
	padding: 12px;
	background-color: var(--guanqu-card);
	border: 1px solid var(--guanqu-line);
	border-radius: var(--guanqu-radius-card);
}

.single-product .product_title {
	color: var(--guanqu-navy);
	font-size: 32px;
	line-height: 1.25;
}

.single-product div.product .summary .product_meta {
	font-size: 14px;
}

/* Inquiry actions: Request Quote primary, WhatsApp secondary. Both carry the
 * .button class. Quote and sample share one RFQ form, so there is no separate
 * sample button; its entry lives in the RFQ Message help text. */
.single-product div.product .summary .button {
	min-height: 46px;
	padding: 0 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	border-radius: var(--guanqu-radius-control);
	font-weight: 600;
}

.single-product div.product .summary .guanqu-rfq-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 20px 0 12px;
}

.single-product div.product .summary .guanqu-rfq-quote {
	background-color: var(--guanqu-teal);
	border: 1px solid var(--guanqu-teal);
	color: #ffffff;
}

/* WhatsApp brand green, kept as the secondary entry. The icon is inlined, so
 * the button makes no external request and the text alone carries the label. */
.single-product div.product .summary .guanqu-whatsapp {
	background-color: var(--guanqu-card);
	border: 1px solid #075e54;
	color: #075e54;
}

.single-product div.product .summary .guanqu-whatsapp-icon {
	width: 20px;
	height: 20px;
	flex: none;
}

.single-product div.product .summary .guanqu-rfq-quote:hover,
.single-product div.product .summary .guanqu-rfq-quote:focus {
	background-color: #00565e;
	border-color: #00565e;
	color: #ffffff;
}

.single-product div.product .summary .guanqu-whatsapp:hover,
.single-product div.product .summary .guanqu-whatsapp:focus {
	background-color: #075e54;
	border-color: #075e54;
	color: #ffffff;
}

/*
 * Confirmed specifications in the buy box. On desktop this fills the summary
 * column beside the gallery, so the key parameters sit above the fold instead
 * of below the full-width image. Rows wrap, so long values (e.g. a tiered
 * reference price) break instead of overflowing.
 */
.single-product div.product .summary .guanqu-specs {
	margin: 22px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--guanqu-line);
}

.single-product div.product .summary .guanqu-specs-title {
	margin: 0 0 6px;
	color: var(--guanqu-navy);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.single-product div.product .summary .guanqu-specs-list {
	margin: 0;
}

.single-product div.product .summary .guanqu-spec {
	display: grid;
	grid-template-columns: minmax(112px, 38%) 1fr;
	gap: 4px 18px;
	padding: 9px 0;
	border-bottom: 1px solid var(--guanqu-line);
}

.single-product div.product .summary .guanqu-spec:last-child {
	border-bottom: 0;
}

.single-product div.product .summary .guanqu-spec dt {
	color: var(--guanqu-graphite);
	font-size: 14px;
	font-weight: 600;
}

.single-product div.product .summary .guanqu-spec dd {
	margin: 0;
	color: var(--guanqu-graphite);
	font-size: 14px;
	overflow-wrap: anywhere;
}

/* Narrow screens stack the entries; each one takes the full available width. */
@media (max-width: 359.98px) {
	.single-product div.product .summary .guanqu-rfq-actions {
		flex-direction: column;
	}

	.single-product div.product .summary .guanqu-rfq-actions .button {
		width: 100%;
	}
}

@media (max-width: 921px) {
	.single-product .product_title {
		font-size: 26px;
	}
}

/* Short, subtle transitions only; motion-sensitive users get none. */
@media (prefers-reduced-motion: no-preference) {
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product a.button,
	.single-product div.product .summary .button {
		transition: box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
	}

	.woocommerce ul.products li.product:hover {
		box-shadow: 0 6px 18px rgba(23, 50, 77, 0.08);
	}
}

/* Reference price disclaimer under the Additional information table. */
.guanqu-price-note {
	margin: 0.75em 0 0;
	font-size: 0.9em;
	color: var(--guanqu-graphite);
}

/*
 * Round 8: Home page + global public UI (AGENTS §6, §17, §20).
 * Reuses the approved navy / teal / white-card / rounded system above and the
 * Astra global palette. Presentation only; every value shown is read from the
 * data layer, and an empty module is hidden in PHP, not here.
 */

/* One content width for the non-catalog pages, matching the catalog column.
 * Astra ships 1240px for plain pages and 1240px for the shop; the catalog is
 * already pinned to 1200px above, so non-catalog pages are pinned here too. */
body:not(.woocommerce) .site-content > .ast-container {
	max-width: 1200px;
}

/* ---- Hero (UI-2, Direction B: controlled factory narrative) ------------ */
/*
 * UI-2: the hero keeps the factory / capability story, but no longer stretches
 * the low-resolution factory photo across the first screen. One navy band holds
 * the message, one deliberately sized, framed factory photo (capped near its
 * native width so it is never upscaled) and the four approved factory figures.
 * Presentation only; the figures live in the Home page content, not here.
 */
.guanqu-hero {
	isolation: isolate;
	margin: 0 0 8px;
	padding: 48px;
	background-color: var(--guanqu-navy);
	border-radius: var(--guanqu-radius-card);
}

.guanqu-hero .wp-block-column {
	margin-bottom: 0;
}

.guanqu-hero .guanqu-hero-brand {
	max-width: none;
	margin: 0 0 14px;
	color: #8fd6db;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.guanqu-hero h1 {
	margin: 0 0 16px;
	color: #ffffff;
	font-size: 48px;
	line-height: 1.06;
	letter-spacing: -0.01em;
}

.guanqu-hero p {
	max-width: 46ch;
	margin: 0 0 24px;
	color: rgba(247, 246, 242, 0.86);
	font-size: 17px;
	line-height: 1.6;
}

/*
 * Outline CTA on navy. Astra's outline style sets colour/border from
 * --ast-global-color-0 through selectors that include :not(.has-text-color)
 * and .wp-element-button (specificity up to 0,5,x), so a plain
 * .guanqu-hero rule is out-specified and the button renders teal-on-navy
 * (measured 2.16:1). These rules mirror Astra's own :not() conditions and add
 * .wp-element-button, so the white text/border actually win, and every state
 * is defined.
 */
.guanqu-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:not(.has-text-color) {
	color: #ffffff;
}

.guanqu-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:not(.has-background) {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.8);
}

.guanqu-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover,
.guanqu-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:focus {
	background-color: #ffffff;
	border-color: #ffffff;
	color: var(--guanqu-navy);
}

.guanqu-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:active {
	background-color: #e9eef2;
	border-color: #e9eef2;
	color: var(--guanqu-navy);
}

.guanqu-hero .guanqu-hero-grid {
	align-items: center;
	row-gap: 22px;
	column-gap: 40px;
}

/* Gutenberg keeps a 100%-width column plus a stacked margin under 781px; reset
 * that margin (higher specificity than the core rule) so the copy and the
 * framed photo sit closer, without hiding anything or shrinking text. */
body .guanqu-hero .guanqu-hero-grid > .wp-block-column {
	margin-bottom: 0;
}

/* One framed photo, contained in a panel, never full-bleed. */
.guanqu-hero .guanqu-hero-media {
	box-sizing: border-box;
	max-width: 400px;
	margin: 0 0 0 auto;
	padding: 14px;
	background-color: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(143, 214, 219, 0.25);
	border-radius: 16px;
}

.guanqu-hero .guanqu-hero-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.guanqu-hero .guanqu-hero-cap {
	max-width: none;
	margin: 12px 0 0;
	color: rgba(247, 246, 242, 0.7);
	font-size: 12.5px;
	letter-spacing: 0.03em;
	text-align: center;
}

/* ---- Approved factory figures (Home) ---------------------------------- */
/*
 * Four confirmed figures, one compact strip. Values are stored in the Home page
 * content so they are edited where the content is; nothing is hard-coded here.
 *
 * Root cause of the old single-column stack: the strip carries .wp-block-columns,
 * which Gutenberg also gives .is-layout-flex. `body .is-layout-flex
 * { display:flex }` (0,1,1) out-specified a plain `.guanqu-stats { display:grid }`
 * (0,1,0), so display:grid never applied and the core
 * `.wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column
 * { flex-basis:100%!important }` stacked every figure. `body
 * .wp-block-columns.guanqu-stats` (0,2,1) wins, so the 4-up / 2x2 grid applies.
 */
body .wp-block-columns.guanqu-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 26px 0 0;
	padding: 0;
	border-top: 1px solid rgba(143, 214, 219, 0.22);
}

body .wp-block-columns.guanqu-stats > .wp-block-column {
	margin: 0;
	min-width: 0;
	padding: 20px 22px 4px 0;
	border-right: 1px solid rgba(143, 214, 219, 0.16);
}

body .wp-block-columns.guanqu-stats > .wp-block-column:last-child {
	border-right: 0;
}

.guanqu-stats .guanqu-stat-num {
	margin: 0;
	color: #ffffff;
	font-size: 28px;
	font-weight: 800;
	line-height: 1.1;
}

.guanqu-stats .guanqu-stat-lbl {
	margin: 2px 0 0;
	color: rgba(247, 246, 242, 0.68);
	font-size: 13px;
	line-height: 1.4;
}

/* ---- Unified buttons -------------------------------------------------- */
.entry-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 24px;
	border-radius: var(--guanqu-radius-control);
	font-weight: 600;
	text-decoration: none;
}

.entry-content .wp-block-buttons {
	gap: 12px;
}

/* ---- Home featured products ------------------------------------------- */
.guanqu-featured ul.products {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.guanqu-featured ul.products li.product {
	float: none;
	clear: none;
	width: auto;
	margin: 0;
}
/* ---- "Work with us" path cards ---------------------------------------- */
.guanqu-paths {
	gap: 22px;
	margin-bottom: 8px;
}

.guanqu-paths .wp-block-column {
	padding: 24px 26px;
	background-color: var(--guanqu-card);
	border: 1px solid var(--guanqu-line);
	border-radius: var(--guanqu-radius-card);
}

.guanqu-paths .wp-block-column h3 {
	margin-top: 0;
	color: var(--guanqu-navy);
}

.guanqu-paths .wp-block-column p {
	margin-bottom: 18px;
}

/* ---- Contact strip ---------------------------------------------------- */
.guanqu-contact {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0;
}

.guanqu-contact a {
	font-weight: 600;
	color: var(--guanqu-teal);
}

.guanqu-contact a:hover,
.guanqu-contact a:focus {
	color: #00565e;
}

/* ---- Footer band ------------------------------------------------------ */
.guanqu-footer {
	padding: 36px 0 6px;
	background-color: var(--guanqu-navy);
	color: var(--guanqu-warm);
}

.guanqu-footer .ast-container {
	display: flex;
	flex-wrap: wrap;
	gap: 28px 40px;
	justify-content: space-between;
}

.guanqu-footer-col {
	flex: 1 1 220px;
	min-width: 200px;
}

.guanqu-footer-name {
	margin: 0 0 8px;
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.guanqu-footer-tag {
	margin: 0;
	color: rgba(247, 246, 242, 0.85);
}

.guanqu-footer-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.guanqu-footer a {
	color: #ffffff;
	text-decoration: none;
}

.guanqu-footer a:hover,
.guanqu-footer a:focus {
	color: #8fd6db;
	text-decoration: underline;
}

.guanqu-footer-contact .guanqu-contact {
	flex-direction: column;
	gap: 8px;
}

.guanqu-footer-contact .guanqu-contact a {
	color: #ffffff;
}

.guanqu-footer-contact .guanqu-contact a:hover,
.guanqu-footer-contact .guanqu-contact a:focus {
	color: #8fd6db;
}

.guanqu-footer-privacy {
	margin: 12px 0 0;
}

/* ---- Round 8 + UI-2 responsive ---------------------------------------- */
@media (max-width: 921px) {
	.guanqu-hero {
		padding: 32px 24px;
	}

	.guanqu-hero h1 {
		font-size: 34px;
	}

	/* The framed photo centres under the copy instead of being pinned right. */
	.guanqu-hero .guanqu-hero-media {
		max-width: 420px;
		margin: 18px auto 0;
	}

	body .wp-block-columns.guanqu-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 20px;
	}

	body .wp-block-columns.guanqu-stats > .wp-block-column {
		padding: 16px 18px 4px 0;
	}

	body .wp-block-columns.guanqu-stats > .wp-block-column:nth-child(2n) {
		border-right: 0;
	}

	body .wp-block-columns.guanqu-stats > .wp-block-column:nth-child(-n + 2) {
		border-bottom: 1px solid rgba(143, 214, 219, 0.16);
	}

	.guanqu-categories ul.products,
	.guanqu-featured ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.guanqu-categories ul.products li.product-category .woocommerce-loop-category__title {
		font-size: 15px;
	}
}

@media (max-width: 359.98px) {
	.guanqu-categories ul.products,
	.guanqu-featured ul.products {
		grid-template-columns: 1fr;
	}

	.guanqu-categories ul.products li.product-category .woocommerce-loop-category__title {
		font-size: 14px;
	}

	.guanqu-hero h1 {
		font-size: 28px;
	}

	.guanqu-stats .guanqu-stat-num {
		font-size: 22px;
	}
}

/* Short, subtle transitions only; motion-sensitive users get none. */
@media (prefers-reduced-motion: no-preference) {
	.guanqu-categories ul.products li.product-category,
	.entry-content .wp-block-button__link {
		transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
	}

	/* Flat tinted tile: a shadow would read as a floating card, so the hover
	 * state darkens the tint slightly instead. */
	.guanqu-categories ul.products li.product-category:hover {
		background-color: #e3ebee;
	}
}

/*
 * Round 9.1: existing-page visual polish (AGENTS §6.3, §17, §20).
 * Typography rhythm, the Custom/OEM reading layout and the Request Quote form
 * width / FAQ. Presentation only; no product data, no business claim and no
 * new module is introduced here.
 */

/* ---- Section rhythm on content pages ---------------------------------- */
/*
 * One rule set for every content page: the gap above a section heading is
 * clearly larger than the gap between that heading and its own text, so the
 * sections read as groups instead of one long stack.
 */
body.page .entry-content > h2 {
	margin-top: 60px;
	margin-bottom: 10px;
}

body.page .entry-content > h2:first-child {
	margin-top: 0;
}

body.page .entry-content > h2 + p {
	max-width: 68ch;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 30px;
	margin-left: 0;
}

/* ---- Home: closing contact band --------------------------------------- */
/*
 * A single restrained navy band ends the page; the rest of the site keeps its
 * light surfaces. Contact details still come from the data layer.
 */
.guanqu-contact-band {
	margin-top: 60px;
	padding: 36px 40px;
	background-color: var(--guanqu-navy);
	border-radius: var(--guanqu-radius-card);
	color: var(--guanqu-warm);
}

.guanqu-contact-band h2 {
	margin: 0 0 10px;
	color: #ffffff;
}

.guanqu-contact-band p {
	max-width: 60ch;
	margin: 0 0 18px;
	color: rgba(247, 246, 242, 0.85);
}

.guanqu-contact-band .guanqu-contact {
	margin: 0;
}

.guanqu-contact-band .guanqu-contact a {
	color: #8fd6db;
}

.guanqu-contact-band .guanqu-contact a:hover,
.guanqu-contact-band .guanqu-contact a:focus {
	color: #ffffff;
}

/* ---- Custom / OEM: page header + reading layout ----------------------- */
.page-id-23 .entry-header {
	margin-bottom: 30px;
	padding: 30px 34px;
	background-color: var(--guanqu-mist);
	border-radius: var(--guanqu-radius-card);
}

.page-id-23 .entry-header .entry-title {
	margin: 0;
}

/* Keep prose and lists to a readable measure instead of full page width.
 * Astra auto-centres a constrained block; the left margin is pinned back so
 * the text stays on the same left edge as the headings. */
.page-id-23 .entry-content > p,
.page-id-23 .entry-content > ul.wp-block-list {
	max-width: 68ch;
	margin-right: 0;
	margin-left: 0;
}

.page-id-23 .entry-content > ul.wp-block-list {
	padding-left: 1.25em;
}

.page-id-23 .entry-content > ul.wp-block-list li {
	margin-bottom: 7px;
}

/*
 * The two buyer paths are numbered 01 / 02 with a CSS counter, so the layout
 * gains the marker without a second copy of the text in the page content.
 */
.page-id-23 .guanqu-paths {
	counter-reset: guanqu-path;
}

.page-id-23 .guanqu-paths .wp-block-column {
	counter-increment: guanqu-path;
}

.page-id-23 .guanqu-paths .wp-block-column::before {
	content: "0" counter(guanqu-path);
	display: block;
	margin-bottom: 12px;
	color: var(--guanqu-teal);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

/* The reply policy + contact form one clear closing area. */
.page-id-23 .entry-content > .guanqu-contact {
	max-width: 68ch;
	margin-top: 28px;
	margin-right: 0;
	margin-left: 0;
	padding-top: 22px;
	border-top: 1px solid var(--guanqu-line);
}

/* ---- Request Quote: form width + FAQ ---------------------------------- */
.page-id-18 .entry-content > p {
	max-width: 68ch;
	margin-right: 0;
	margin-left: 0;
}

/* One readable column: short fields stay in natural order, Message full width
 * and the phone layout unchanged. No field, rule or handler is touched. */
.page-id-18 .fluentform {
	max-width: 700px;
	margin-right: 0;
	margin-left: 0;
}

.page-id-18 .fluentform .ff-el-form-control {
	border-radius: var(--guanqu-radius-control);
}

/* FAQ: native <details> with a divider, a larger hit area and room to read. */
.page-id-18 .entry-content > .wp-block-details {
	max-width: 760px;
	margin-right: 0;
	margin-left: 0;
	border-bottom: 1px solid var(--guanqu-line);
}

.page-id-18 .entry-content > h2 + .wp-block-details {
	border-top: 1px solid var(--guanqu-line);
}

.page-id-18 .wp-block-details > summary {
	padding: 16px 4px;
	color: var(--guanqu-navy);
	font-weight: 600;
	cursor: pointer;
}

.page-id-18 .wp-block-details[open] > summary {
	color: var(--guanqu-teal);
}

.page-id-18 .wp-block-details > p {
	max-width: 64ch;
	margin: 0 0 18px;
	padding: 0 4px;
}

/* ---- Phones: tighter product card, no wrapped button text ------------- */
@media (max-width: 921px) {
	.woocommerce ul.products li.product .astra-shop-summary-wrap {
		gap: 4px;
		padding: 12px 12px 14px;
	}

	.woocommerce ul.products li.product .woocommerce-loop-product__title {
		font-size: 16px;
	}

	.woocommerce ul.products li.product a.button {
		padding: 0 10px;
		font-size: 14px;
	}
}

@media (max-width: 359.98px) {
	.guanqu-contact-band {
		padding: 28px 24px;
	}

	.page-id-23 .entry-header {
		padding: 24px 22px;
	}
}

/*
 * UI-2: shared catalog and chrome polish (AGENTS §6.3, §17, §20).
 * Fixes the product-card CTA alignment, the category tile rhythm, the shared
 * navigation and the footer band in one place. Presentation only.
 */

/* Product card: pin the action to the card bottom so a two-line title no
 * longer pushes one card's button below its neighbour in the same row. Excludes
 * the category tile, which Astra also tags as li.product. */
.woocommerce ul.products li.product:not(.product-category) {
	display: flex;
	flex-direction: column;
}

.woocommerce ul.products li.product .astra-shop-summary-wrap {
	flex: 1 1 auto;
}

.woocommerce ul.products li.product a.button {
	margin-top: auto;
}

/* Category tiles: a uniform inset and an equal two-line label box, so rows
 * read level instead of uneven. The tile image itself is untouched. */
.guanqu-categories ul.products li.product-category img {
	box-sizing: border-box;
	padding: 12px;
}

.guanqu-categories ul.products li.product-category .woocommerce-loop-category__title {
	min-height: 2.6em;
}

/* Header + footer chrome polish. */
.site-header .site-title a {
	letter-spacing: 0.08em;
}

.site-header .main-header-menu .menu-link {
	letter-spacing: 0.02em;
}

/*
 * Mobile menu icon. Astra sets the minimal trigger to --ast-global-color-0
 * (teal) through [data-section="section-header-mobile-trigger"]
 * .ast-button-wrap .ast-mobile-menu-trigger-minimal (0,3,0), which measured
 * 2.16:1 on the navy header. Match that selector with a body element for a
 * higher specificity so the white icon wins; give a light-teal open/active state.
 */
body .site-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal {
	color: #ffffff;
}

body .site-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:hover,
body .site-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal:focus,
body .site-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .ast-mobile-menu-trigger-minimal.toggled {
	color: #8fd6db;
}

/*
 * The icon itself is an inline SVG whose fill Astra pins to --ast-global-color-0
 * via [data-section=...] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg
 * (0,4,0), so it stayed teal even after the button colour changed. Match that
 * selector (higher specificity) and use currentColor, which follows the button
 * colour rules above.
 */
body .site-header [data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
	fill: currentColor;
}

.guanqu-footer-h {
	margin: 0 0 12px;
	color: #ffffff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.guanqu-footer .guanqu-footer-links a {
	display: inline-block;
	padding: 2px 0;
}

.guanqu-footer-contact .guanqu-footer-h {
	margin-top: 2px;
}

/*
 * Focus ring on the navy surfaces (header, hero, footer, contact band) uses the
 * light teal, because the default teal ring is too close to the navy to read.
 */
.site-header a:focus-visible,
.site-header .menu-link:focus-visible,
.guanqu-hero a:focus-visible,
.guanqu-footer a:focus-visible,
.guanqu-contact-band a:focus-visible {
	outline-color: #8fd6db;
}

/*
 * Batch A - STAGING Child Theme CSS alignment (candidate, NOT deployed).
 *
 * Presentation only. Home + its featured cards + the catalog pagination.
 * Derived from the approved local preview (refinement.css / polish.css) mapped
 * onto the real Astra / WooCommerce DOM measured on STAGING. No product data,
 * no contact data, no new dependency, no !important. Every rule is scoped so
 * the other pages keep their current layout.
 */

/* A1. Home: content top / bottom boundary (desktop 32/64px, <=921px 24/40px).
 * The header is not sticky and does not overlap (top:0, height 81px), so a
 * plain content padding opens the gap; no negative margin, no overlay. */
body.home .site-content > .ast-container {
	padding-top: 32px;
	padding-bottom: 64px;
}

@media (max-width: 921px) {
	body.home .site-content > .ast-container {
		padding-top: 24px;
		padding-bottom: 40px;
	}
}

/* A2. Home approved-factory figures: centre each figure in its column and drop
 * the strip rule and the cell dividers. Values, units and labels are untouched. */
body .wp-block-columns.guanqu-stats {
	border-top: 0;
}

body .wp-block-columns.guanqu-stats > .wp-block-column {
	text-align: center;
	border-right: 0;
	border-bottom: 0;
	padding: 12px;
}

@media (max-width: 921px) {
	body .wp-block-columns.guanqu-stats > .wp-block-column:nth-child(-n + 2) {
		border-bottom: 0;
	}
}

/* A3. Home "Featured styles" cards: lighter surface and a text-link CTA, while
 * the primary Request Quote button keeps its solid weight. Scoped to
 * .guanqu-featured, so the catalog list keeps its current solid View Details. */
.guanqu-featured ul.products li.product:not(.product-category) {
	border-color: #e6eaee;
	box-shadow: none;
}

.guanqu-featured ul.products li.product .astra-shop-summary-wrap {
	gap: 4px;
}

.guanqu-featured ul.products li.product .ast-woo-product-category,
.guanqu-featured ul.products li.product .guanqu-card-sku {
	color: #5f6b77;
}

.guanqu-featured ul.products li.product .guanqu-card-sku {
	margin-bottom: 12px;
}

.guanqu-featured ul.products li.product a.button {
	width: auto;
	min-height: 0;
	margin-top: auto;
	padding: 8px 0 0;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 6px;
	background-color: transparent;
	border: 0;
	border-radius: 0;
	color: var(--guanqu-teal);
	font-size: 14px;
	font-weight: 600;
}

/* Decorative affordance only; the button text stays the real label. */
.guanqu-featured ul.products li.product a.button::after {
	content: "\2192";
}

.guanqu-featured ul.products li.product a.button:hover,
.guanqu-featured ul.products li.product a.button:focus {
	background-color: transparent;
	border-color: transparent;
	color: #00565e;
	text-decoration: underline;
}

/* :not(.product-category) matches the theme's existing focus-ring selector so it
 * is not out-specified by Astra's inline `.button:focus { outline: 0 }`. */
.guanqu-featured ul.products li.product:not(.product-category) a.button:focus-visible {
	outline: 2px solid var(--guanqu-teal);
	outline-offset: 3px;
}

/* A4. Pagination: the current number gets a solid navy chip. Astra already
 * renders it as <span class="page-numbers current" aria-current="page">, so
 * this is presentation only; aria-current is native and not touched here. */
.woocommerce .woocommerce-pagination ul.page-numbers li .page-numbers.current {
	background-color: var(--guanqu-navy);
	border-color: var(--guanqu-navy);
	color: #ffffff;
}

.woocommerce .woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.woocommerce .woocommerce-pagination ul.page-numbers li a.page-numbers:focus {
	background-color: var(--guanqu-mist);
	border-color: var(--guanqu-teal);
	color: var(--guanqu-navy);
}

.woocommerce .woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible {
	outline: 2px solid var(--guanqu-teal);
	outline-offset: 3px;
}

/*
 * Batch B - About (page 25) / Privacy (page 3) real-structure alignment
 * (local candidate, NOT deployed).
 *
 * Appended verbatim after the existing Batch A block by byte-copy, so the A
 * bytes above are unchanged (AB = A + this block). Presentation only: the page
 * text lives in the Gutenberg content, the contact entries in the data layer.
 * Every selector carries body.page-id-75 or body.page-id-3, so no rule can
 * reach the Home, Shop, product, OEM or RFQ surfaces. Reuses the Batch A
 * variables; no !important, no new dependency, no preview mechanism.
 */

/* ---- About: page 25 ---------------------------------------------------- */

/* Content top / bottom boundary (desktop 48/64px, <=921px 32/40px). */
body.page-id-75 .entry-content {
	padding-top: 48px;
	padding-bottom: 64px;
}

/* Opening: a constrained intro under the Astra page title. The primary
 * heading is Astra's own H1, so the intro is only kicker + paragraph. */
body.page-id-75 .about-intro {
	max-width: 850px;
	padding: 12px 0 44px;
}

body.page-id-75 .about-intro > p:last-child {
	max-width: 72ch;
	margin: 0;
	font-size: 18px;
	line-height: 1.75;
}

body.page-id-75 .section-kicker {
	margin: 0 0 14px;
	color: var(--guanqu-teal);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Factory figures: one white card holding the four confirmed values. */
body.page-id-75 .factory-overview {
	padding: 32px 36px;
	background-color: var(--guanqu-card);
	border-radius: 14px;
}

body.page-id-75 .section-heading {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}

body.page-id-75 .section-heading h2 {
	margin: 0;
	font-size: 26px;
}

body.page-id-75 .section-heading .section-kicker {
	margin: 0;
}

/* Four figures. display:grid beats Gutenberg's flex column stack, so the
 * values sit on one row on desktop and 2x2 on phones. */
body.page-id-75 .wp-block-columns.factory-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
}

body.page-id-75 .factory-stat {
	padding: 12px;
	text-align: center;
}

body.page-id-75 .factory-stat-num {
	margin: 0;
	color: var(--guanqu-navy);
	font-size: 36px;
	font-weight: 700;
	line-height: 1.15;
	font-variant-numeric: tabular-nums;
}

body.page-id-75 .factory-stat-lbl {
	max-width: 23ch;
	min-height: 3em;
	margin: 12px auto 0;
	color: #4f5a66;
	font-size: 14px;
	line-height: 1.5;
}

body.page-id-75 .capacity-note {
	margin: 24px 0 0;
	color: #4f5a66;
	font-size: 13px;
	text-align: center;
}

/* Story rows: image beside copy; photo sits right and is contained, never
 * upscaled. Production flips the order via DOM order, not CSS reordering. */
body.page-id-75 .wp-block-columns.factory-story {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: 64px;
	align-items: center;
	padding: 64px 0;
}

body.page-id-75 .wp-block-columns.factory-story.production {
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	padding-top: 24px;
}

body.page-id-75 .factory-photo {
	display: flex;
	align-items: center;
	justify-content: center;
}

body.page-id-75 .factory-photo figure {
	margin: 0;
}

body.page-id-75 .factory-photo img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

body.page-id-75 .factory-photo figcaption {
	margin-top: 12px;
	color: #4f5a66;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

body.page-id-75 .story-copy h2 {
	margin: 0 0 22px;
	font-size: 34px;
	letter-spacing: -0.02em;
}

body.page-id-75 .story-copy p {
	max-width: 62ch;
}

body.page-id-75 .story-copy > p:last-child {
	margin-bottom: 0;
}

/* Process steps: numbered from the real sequence, marker drawn by CSS so the
 * content keeps only the words. */
body.page-id-75 .process-steps {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	margin: 28px 0 0;
	padding: 0;
	background-color: var(--guanqu-card);
	border-radius: 12px;
	overflow: hidden;
	list-style: none;
	counter-reset: stage;
}

body.page-id-75 .process-steps li {
	display: block;
	padding: 22px 20px 24px;
	border-top: 2px solid #cfdde1;
	color: var(--guanqu-navy);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	counter-increment: stage;
}

body.page-id-75 .process-steps li::before {
	display: block;
	margin-bottom: 10px;
	color: var(--guanqu-teal);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	content: "0" counter(stage);
}

/* Quality: a navy panel over the three stages. */
body.page-id-75 .quality-panel {
	padding: 40px;
	background-color: var(--guanqu-navy);
	border-radius: 14px;
	color: var(--guanqu-warm);
}

body.page-id-75 .quality-panel h2 {
	margin: 0 0 20px;
	color: #ffffff;
	font-size: 34px;
}

body.page-id-75 .quality-panel > .section-kicker {
	color: #8fd6db;
}

body.page-id-75 .quality-panel > p:not(.section-kicker) {
	max-width: 76ch;
	margin-bottom: 30px;
	color: #e4ecee;
}

body.page-id-75 .wp-block-columns.quality-stages {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

body.page-id-75 .quality-stages .wp-block-group {
	padding: 20px;
	background-color: #203e57;
	border-radius: 8px;
}

body.page-id-75 .quality-stages .wp-block-group > p {
	display: block;
	margin: 0 0 16px;
	color: #8fd6db;
	font-size: 12px;
	letter-spacing: 0.1em;
}

body.page-id-75 .quality-stages h3 {
	margin: 0;
	color: #ffffff;
	font-size: 19px;
	font-weight: 600;
}

/* Closing band: light surface per decision D-A2, reusing the .guanqu-contact-band
 * base for the shared box, overridden here to the light palette. */
body.page-id-75 .about-contact {
	margin-top: 48px;
	padding: 36px 40px;
	background-color: #e9eeed;
	color: var(--guanqu-navy);
}

body.page-id-75 .about-contact h2 {
	color: var(--guanqu-navy);
}

body.page-id-75 .about-contact p {
	color: var(--guanqu-graphite);
}

body.page-id-75 .about-contact .guanqu-contact a {
	color: var(--guanqu-teal);
}

/* ---- Privacy: page 3 --------------------------------------------------- */

body.page-id-3 .entry-content {
	padding-top: 32px;
	padding-bottom: 64px;
}

body.page-id-3 .privacy-intro {
	margin-bottom: 40px;
	padding: 36px 40px;
	background-color: #edf1f3;
	border-radius: 12px;
}

body.page-id-3 .privacy-intro p {
	max-width: 72ch;
	margin: 0;
	font-size: 16px;
	line-height: 1.7;
}

/* Two columns on desktop (contents / prose); stacks at <=921px. */
body.page-id-3 .wp-block-columns.privacy-layout {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 56px;
	align-items: start;
}

body.page-id-3 .privacy-toc {
	padding-top: 4px;
}

body.page-id-3 .privacy-toc h2 {
	margin: 0 0 16px;
	color: #4f5a66;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

body.page-id-3 .privacy-toc ul {
	display: grid;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.page-id-3 .privacy-toc a {
	display: block;
	padding: 8px 0;
	color: var(--guanqu-teal);
	font-size: 14px;
	line-height: 1.55;
	text-decoration: none;
}

body.page-id-3 .privacy-toc a:hover {
	text-decoration: underline;
}

body.page-id-3 .privacy-toc a:focus-visible {
	outline: 2px solid var(--guanqu-teal);
	outline-offset: 3px;
}

body.page-id-3 .privacy-prose {
	max-width: 72ch;
	font-size: 16px;
	line-height: 1.7;
}

body.page-id-3 .privacy-section {
	margin: 0 0 40px;
	scroll-margin-top: 24px;
}

body.page-id-3 .privacy-section h2 {
	margin: 0 0 14px;
	font-size: 26px;
	line-height: 1.25;
}

body.page-id-3 .privacy-section p {
	margin: 0;
}

body.page-id-3 .privacy-section a {
	overflow-wrap: anywhere;
}

/* ---- Batch B responsive ------------------------------------------------ */

/* The four-up figure row runs from 922px up. Around 1000-1280px the 4 columns
 * are narrow, and the longest value "83,000 pairs/month" overflowed its cell
 * (scrollWidth 210 > clientWidth 184 at 1025px). Shrink ONLY the figure across
 * that band; the card padding, gaps and the other pages keep their 1024px rules. */
@media (max-width: 1279px) {
	body.page-id-75 .factory-stat-num {
		font-size: 25px;
	}
}

/* Original 1024px band, unchanged: story gap, card padding, figure gap,
 * privacy column gap. These are NOT figure rules and stay at 1024px. */
@media (max-width: 1024px) {
	body.page-id-75 .wp-block-columns.factory-story {
		gap: 36px;
	}

	body.page-id-75 .factory-overview {
		padding: 28px 24px;
	}

	body.page-id-75 .wp-block-columns.factory-stats {
		gap: 12px;
	}

	body.page-id-3 .wp-block-columns.privacy-layout {
		gap: 32px;
	}
}

@media (max-width: 921px) {
	body.page-id-75 .entry-content {
		padding-top: 32px;
		padding-bottom: 40px;
	}

	body.page-id-75 .wp-block-columns.factory-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px 12px;
	}

	/* 2-up rows are wide again, so the figure returns to its tablet size. */
	body.page-id-75 .factory-stat-num {
		font-size: 30px;
	}

	body.page-id-75 .wp-block-columns.factory-story,
	body.page-id-75 .wp-block-columns.factory-story.production {
		grid-template-columns: 1fr;
		gap: 28px;
		padding: 40px 0;
	}

	body.page-id-75 .factory-photo {
		justify-content: flex-start;
	}

	body.page-id-3 .entry-content {
		padding-top: 24px;
		padding-bottom: 40px;
	}

	body.page-id-3 .wp-block-columns.privacy-layout {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	body.page-id-3 .privacy-toc {
		padding: 22px 24px;
		background-color: var(--guanqu-card);
		border-radius: 10px;
	}

	body.page-id-3 .privacy-toc ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 4px 24px;
	}
}

@media (max-width: 600px) {
	body.page-id-75 .about-intro {
		padding: 4px 0 32px;
	}

	body.page-id-75 .about-intro > p:last-child {
		font-size: 16px;
	}

	body.page-id-75 .section-heading {
		display: block;
		margin-bottom: 20px;
	}

	body.page-id-75 .section-heading .section-kicker {
		margin-bottom: 12px;
	}

	body.page-id-75 .section-heading h2 {
		font-size: 24px;
	}

	body.page-id-75 .factory-overview {
		padding: 26px 16px;
	}

	body.page-id-75 .factory-stat {
		min-width: 0;
		padding: 8px 2px;
	}

	/* "83,000 pairs/month" is the longest value; on a 2-up phone row it used to
	 * overflow its cell (scrollWidth 164 > clientWidth 127 at 360px). Scale the
	 * figure with the viewport and allow a last-resort break so the value and its
	 * label stay inside the white card. Text, units and layout are unchanged. */
	body.page-id-75 .factory-stat-num {
		font-size: clamp(20px, 5.6vw, 28px);
		line-height: 1.2;
		overflow-wrap: anywhere;
	}

	body.page-id-75 .factory-stat-lbl {
		font-size: 13px;
		overflow-wrap: anywhere;
	}

	body.page-id-75 .story-copy h2,
	body.page-id-75 .quality-panel h2 {
		font-size: 28px;
	}

	body.page-id-75 .quality-panel {
		padding: 28px 24px;
	}

	body.page-id-75 .wp-block-columns.quality-stages {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	body.page-id-75 .quality-stages .wp-block-group {
		display: flex;
		align-items: baseline;
		gap: 16px;
		padding: 18px;
	}

	body.page-id-75 .quality-stages .wp-block-group > p {
		margin: 0;
	}

	body.page-id-75 .quality-stages h3 {
		font-size: 18px;
	}

	body.page-id-75 .about-contact {
		margin-top: 32px;
		padding: 28px 24px;
	}

	body.page-id-3 .privacy-intro {
		margin-bottom: 28px;
		padding: 28px 24px;
	}

	body.page-id-3 .privacy-toc ul {
		grid-template-columns: 1fr;
	}

	body.page-id-3 .privacy-section {
		margin-bottom: 32px;
	}

	body.page-id-3 .privacy-section h2 {
		font-size: 24px;
	}
}
/*
 * Batch C - Custom / OEM (page 23) display layer.
 * Presentation only. Every rule is scoped to body.page-id-23. Reuses the
 * Batch A variables and the already-deployed .guanqu-paths / .guanqu-contact-band
 * bases. Only the OEM rules are translated from the approved preview (oem-rfq.css
 * OEM half); the RFQ rules, foundation.css and the preview JS are deliberately
 * not copied. No !important, no new dependency, no preview mechanism.
 */

/* Content top / bottom boundary (design reference: desktop 32/64, <=921 24/40). */
body.page-id-23 .entry-content {
	padding-top: 32px;
	padding-bottom: 64px;
}

/* Small uppercase label below the Astra page title. */
body.page-id-23 .oem-kicker {
	margin: 0 0 14px;
	color: var(--guanqu-teal);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Auxiliary note about starting without a design: a short tinted aside, not a
 * third path card. */
body.page-id-23 .oem-aside-note {
	max-width: 68ch;
	margin: 20px 0 0;
	padding: 16px 20px;
	background-color: var(--guanqu-mist);
	border-radius: var(--guanqu-radius-card);
	color: var(--guanqu-graphite);
}

/* The five sampling steps become a numbered card grid. */
body.page-id-23 .oem-steps {
	counter-reset: oem-step;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px 20px;
}

body.page-id-23 .oem-steps li {
	counter-increment: oem-step;
	padding: 18px 20px;
	background-color: var(--guanqu-card);
	border: 1px solid var(--guanqu-line);
	border-radius: var(--guanqu-radius-card);
	color: var(--guanqu-graphite);
	font-size: 15px;
	line-height: 1.55;
}

body.page-id-23 .oem-steps li::before {
	content: "0" counter(oem-step);
	display: block;
	margin-bottom: 8px;
	color: var(--guanqu-teal);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

body.page-id-23 .oem-steps strong {
	display: block;
	margin-bottom: 4px;
	color: var(--guanqu-navy);
}

/* Two approved factory photographs, natural size, never upscaled or stretched. */
body.page-id-23 .oem-photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin: 34px 0 0;
}

body.page-id-23 .oem-photos figure {
	margin: 0;
}

body.page-id-23 .oem-photos img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: var(--guanqu-radius-card);
}

body.page-id-23 .oem-photos figcaption {
	margin-top: 10px;
	color: var(--guanqu-graphite);
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

/* Closing navy band: the deployed .guanqu-contact-band base supplies the
 * surface; only the extra gap above is added here. */
body.page-id-23 .oem-cta {
	margin-top: 48px;
}

@media (max-width: 1024px) {
	body.page-id-23 .oem-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 921px) {
	body.page-id-23 .entry-content {
		padding-top: 24px;
		padding-bottom: 40px;
	}

	body.page-id-23 .oem-steps {
		grid-template-columns: 1fr;
	}

	body.page-id-23 .oem-photos {
		grid-template-columns: 1fr;
	}
}
/*
 * Batch D - Request Quote (page 18) display layer.
 * Presentation only. Every rule is scoped to body.page-id-18. Reuses the
 * Batch A variables and the already-deployed .guanqu-* bases. Only the
 * Request Quote rules are translated from the approved preview (oem-rfq.css
 * RFQ half); the OEM rules, foundation.css and the preview JS are deliberately
 * not copied. No !important, no new dependency, no preview mechanism, no
 * fabricated submit/success state.
 */

/* Content top / bottom boundary (design reference: desktop 32/64, <=921 24/40). */
body.page-id-18 .entry-content {
	padding-top: 32px;
	padding-bottom: 64px;
}

/* Small uppercase label below the Astra page title. */
body.page-id-18 .rfq-kicker {
	max-width: 68ch;
	margin: 0 0 14px;
	color: var(--guanqu-teal);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Desktop two columns: the form and the help/FAQ side panel. The core Columns
 * block wraps on phones, so the reading order stays intro -> form -> help/FAQ. */
body.page-id-18 .rfq-layout {
	align-items: start;
	gap: 44px;
}

body.page-id-18 .rfq-aside {
	max-width: 420px;
}

/* The "What happens next" help panel. */
body.page-id-18 .rfq-next {
	padding: 22px 24px;
	background-color: var(--guanqu-card);
	border: 1px solid var(--guanqu-line);
	border-radius: var(--guanqu-radius-card);
}

body.page-id-18 .rfq-next h2 {
	margin: 0 0 10px;
	color: var(--guanqu-navy);
	font-size: 18px;
}

body.page-id-18 .rfq-next p {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.7;
}

/* Common questions heading + the native <details> FAQ in the side panel. */
body.page-id-18 .rfq-aside > .wp-block-heading {
	margin: 34px 0 6px;
	color: var(--guanqu-navy);
	font-size: 18px;
}

body.page-id-18 .rfq-aside .wp-block-details {
	border-bottom: 1px solid var(--guanqu-line);
}

body.page-id-18 .rfq-aside .wp-block-details:first-of-type {
	border-top: 1px solid var(--guanqu-line);
}

body.page-id-18 .rfq-aside .wp-block-details > summary {
	padding: 14px 2px;
	color: var(--guanqu-navy);
	font-weight: 600;
	cursor: pointer;
}

body.page-id-18 .rfq-aside .wp-block-details[open] > summary {
	color: var(--guanqu-teal);
}

body.page-id-18 .rfq-aside .wp-block-details > p {
	margin: 0 0 16px;
	font-size: 14.5px;
	line-height: 1.7;
}

/* Form controls: native Fluent Forms markup (verified class .ff-el-form-control,
 * verified aria-invalid attribute). The control surface + the keyboard focus ring
 * already come from the Batch A global rules and the existing page-id-18 control
 * radius, so only the error state (which nothing else provides) is added here.
 * Fluent Forms owns validation and the success state. */
body.page-id-18 .fluentform .ff-el-form-control:focus-visible {
	outline: 2px solid var(--guanqu-teal);
	outline-offset: 2px;
}

body.page-id-18 .fluentform .ff-el-form-control[aria-invalid="true"] {
	border-color: #b3261e;
}

@media (max-width: 1024px) {
	body.page-id-18 .rfq-layout {
		gap: 32px;
	}
}

@media (max-width: 921px) {
	body.page-id-18 .entry-content {
		padding-top: 24px;
		padding-bottom: 40px;
	}

	body.page-id-18 .rfq-aside {
		max-width: none;
	}
}

@media (max-width: 600px) {
	body.page-id-18 .rfq-layout {
		gap: 34px;
	}
}
/*
 * ============================================================================
 * UI-4 VISUAL ALIGNMENT CORRECTION  (LOCAL CANDIDATE -- NOT DEPLOYED)
 * ============================================================================
 * Appended AFTER the deployed cumulative ABCD block. Presentation only.
 * Goal: bring the three content pages (About p25, Custom/OEM p23, Request
 * Quote p18) closer to the user-approved visual direction board:
 *   - warm page surface + white content cards + navy / light panels,
 *   - a tighter vertical rhythm so the pages do not read as one white slab,
 *   - stacked, left-aligned numbered section headings,
 *   - a scannable numbered brief list on the OEM page,
 *   - a denser RFQ form column anchored to a clear help/FAQ panel.
 *
 * Every selector is scoped to body.page-id-75 / -23 / -18, so the Home, Shop,
 * product-detail, Privacy pages, the shared header/footer and the catalog are
 * untouched. Reuses the existing --guanqu-* variables and already-deployed
 * base classes; no new palette, no !important, no new dependency, no preview
 * mechanism, no fabricated state. The three page CONTENTS are the already
 * approved Batch B / C / D candidates and are NOT re-authored here.
 */

/* ---- Shared: warm page surface + tighter section rhythm ----------------- */
/*
 * The deployed body is already --guanqu-warm; the boards show that warm
 * surface clearly behind the white cards. Re-assert it on the content wrapper
 * (some Astra / plugin surfaces paint white over the body) and trim the large
 * top/bottom emptiness so the first and last sections sit closer to the chrome.
 */
body.page-id-75 .site-content,
body.page-id-23 .site-content,
body.page-id-18 .site-content {
	background-color: var(--guanqu-warm);
}

body.page-id-75 .entry-content,
body.page-id-23 .entry-content,
body.page-id-18 .entry-content {
	padding-top: 28px;
	padding-bottom: 56px;
}

/* Section headings share one rhythm across the three pages. */
body.page-id-75 .entry-content > h2.wp-block-heading,
body.page-id-23 .entry-content > h2.wp-block-heading,
body.page-id-18 .entry-content > h2.wp-block-heading {
	margin-top: 8px;
	letter-spacing: -0.01em;
}

/* ---- About (page 25) ---------------------------------------------------- */
/*
 * The board shows the numbered kicker stacked above the heading, left aligned
 * ("01 / Factory" over "Factory at a Glance"). The earlier rule laid them out
 * as a flex row with space-between, which pushed the heading to the far right
 * at desktop widths and read differently from the board. Stack them at every
 * width (the <=600px block already did this; this makes it consistent).
 */
body.page-id-75 .section-heading {
	display: block;
	margin-bottom: 22px;
}

body.page-id-75 .section-heading .section-kicker {
	margin-bottom: 10px;
}

/* Tighten the opening and the interleaved image / copy rows. */
body.page-id-75 .about-intro {
	padding: 8px 0 32px;
}

body.page-id-75 .wp-block-columns.factory-story {
	padding: 44px 0;
}

body.page-id-75 .wp-block-columns.factory-story.production {
	padding-top: 8px;
}

/* Keep the four figures on one row of a slightly tighter white card. */
body.page-id-75 .factory-overview {
	padding: 28px 32px;
}

/* Slightly reduce the gap between the navy quality panel and the light
 * "Work with us" band so the closing group reads as one unit. */
body.page-id-75 .about-contact {
	margin-top: 40px;
}

/* ---- Custom / OEM (page 23) -------------------------------------------- */
/*
 * Number the "What to include in your brief" list (the board shows 01-05).
 * Numbers are drawn with CSS counters, so the words in `post_content` stay
 * exactly as approved. The selector targets only the heading followed by a
 * plain list; the ordered sampling steps keep their own .oem-steps styling.
 */
body.page-id-23 .entry-content > h2.wp-block-heading + ul {
	counter-reset: brief;
	padding-left: 0;
	list-style: none;
	margin-top: 6px;
}

body.page-id-23 .entry-content > h2.wp-block-heading + ul > li {
	position: relative;
	padding-left: 34px;
	margin-bottom: 10px;
}

body.page-id-23 .entry-content > h2.wp-block-heading + ul > li::before {
	content: "0" counter(brief);
	position: absolute;
	left: 0;
	top: 0.15em;
	color: var(--guanqu-teal);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	counter-increment: brief;
}

/* Use the approved light tint for the "Start with an idea" aside. */
body.page-id-23 .oem-aside-note {
	background-color: var(--guanqu-mist);
}

/* Bring the two path cards and the brief closer together. */
body.page-id-23 .entry-content > h2.wp-block-heading {
	margin-top: 40px;
}

body.page-id-23 .entry-content > h2.wp-block-heading:first-of-type {
	margin-top: 0;
}

/* The two factory photographs sit tighter under the sampling steps. */
body.page-id-23 .oem-photos {
	margin-top: 28px;
}

/* ---- Request Quote (page 18) ------------------------------------------- */
/*
 * The board tightens the form column and anchors the help/FAQ panel. Keep the
 * real single-column Fluent Forms field order (the board's paired short fields
 * are a display target only; safely pairing them would need to re-order or
 * re-grid the live form markup, which this round does not verify, so the real
 * single-column order is kept and the difference is recorded). Shorten the
 * column gap and lift the help card so the two columns share a baseline.
 */
body.page-id-18 .wp-block-columns.rfq-layout {
	gap: 40px;
}

body.page-id-18 .rfq-aside {
	align-self: start;
}

body.page-id-18 .rfq-next {
	margin-top: 0;
}

body.page-id-18 .rfq-kicker {
	margin-bottom: 12px;
}

/* The intro sits on the warm surface; keep it close to the layout above. */
body.page-id-18 .entry-content > p:not(.rfq-kicker):not(.sim-note) {
	margin-bottom: 24px;
}

/* ---- Responsive -------- */
@media (max-width: 921px) {
	body.page-id-75 .entry-content,
	body.page-id-23 .entry-content,
	body.page-id-18 .entry-content {
		padding-top: 22px;
		padding-bottom: 40px;
	}

	body.page-id-75 .wp-block-columns.factory-story,
	body.page-id-75 .wp-block-columns.factory-story.production {
		padding: 32px 0;
	}

	body.page-id-18 .wp-block-columns.rfq-layout {
		gap: 28px;
	}
}
/*
 * ============================================================================
 * UI-4 SITE-CONSISTENCY BACKGROUND  (LOCAL CANDIDATE -- NOT DEPLOYED)
 * ============================================================================
 * Appended AFTER the deployed cumulative CSS (bc65b22f = ABCD + visual
 * correction). Presentation only.
 *
 * Why the page reads pure white on Home / Products archive / category &
 * pagination / product detail / Privacy: Astra's dynamic rule
 *   .ast-plain-container, .ast-page-builder-template { background-color:
 *       var(--ast-global-color-4); }      ( --ast-global-color-4 is #FFFFFF )
 * matches the BODY element (Astra puts those classes on <body>), and its
 * specificity (0,1,0) out-ranks the child theme body rule (0,0,1). The
 * .woocommerce class is also on that same <body>. The content wrappers
 * (.site-content, .ast-container, .entry-content, #content) are transparent.
 *
 * One clearly-scoped shared rule re-asserts the warm surface at body+container
 * specificity, so every plain / page-builder page shows the same warm
 * background as the approved About / OEM / RFQ pages, WITHOUT a per-page patch
 * and WITHOUT a universal selector or a blanket "make everything transparent".
 *
 * White product cards, product image/gallery areas, form inputs, the navy
 * header/footer and the navy panels keep their own backgrounds (unchanged).
 */
body.ast-plain-container,
body.ast-page-builder-template,
body.ast-separate-container {
	background-color: var(--guanqu-warm);
}

/* ==== UI-5 (2026-10-10) WooCommerce breadcrumb link contrast =================
 * The breadcrumb/link default (#767676) measures ~4.14:1 on the warm page
 * background (--guanqu-warm #f7f6f2), below the 4.5:1 body-text target; on the
 * previous white background it was already ~4.48:1. Scoped to the WooCommerce
 * breadcrumb only, reusing the brand navy / teal. Presentation only.
 */
.woocommerce .woocommerce-breadcrumb,
.woocommerce .woocommerce-breadcrumb a {
	color: var(--guanqu-navy);
}

.woocommerce .woocommerce-breadcrumb a:hover,
.woocommerce .woocommerce-breadcrumb a:focus-visible {
	color: var(--guanqu-teal);
	text-decoration: underline;
}

/* ==== UI-5 (2026-10-10) mobile menu trigger: 44x44 touch target =============
 * Only the click area of the actual mobile dropdown trigger is enlarged; the
 * icon and the satisfied header design are unchanged, and the desktop header is
 * untouched (the trigger only renders inside #ast-mobile-header). 360/390 checked
 * with no logo overlap and no page overflow.
 */
#ast-mobile-header .menu-toggle.main-header-menu-toggle {
	min-width: 44px;
	min-height: 44px;
}

/* ==== UI-5 (2026-10-10) prefers-reduced-motion: scoped transition override ===
 * Normal mode keeps the existing feedback (child 150ms / Astra defaults). Under
 * reduce, only the interactive components below drop their transitions; this is a
 * scoped list, not a universal * disable, and adds no new motion.
 */
@media (prefers-reduced-motion: reduce) {
	.menu-toggle,
	.main-header-menu a.menu-link,
	.guanqu-hero .wp-block-button__link,
	.woocommerce ul.products li.product,
	.woocommerce ul.products li.product a.button,
	.single-product div.product .summary .button,
	.site-footer a,
	.guanqu-footer a {
		transition: none;
	}
}


/*
 * Layout A: grouped product specification panel (opt-in products only).
 * visual-fix-1: the panel is printed full content width below the gallery + summary (NOT in the
 * right-hand .summary column), so these selectors do not depend on a .summary ancestor. Scoped to
 * the product so the 20 existing products keep the flat panel and no global style changes. The
 * last card (Sourcing Details, long region list) spans both columns. Placeholder #5b6b78 = 5.5:1.
 */
.single-product div.product .guanqu-specs--grouped {
	margin: 30px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--guanqu-line, #e2e6ea);
}

.single-product div.product .guanqu-specs--grouped .guanqu-specs-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 12px 0 0;
	align-items: start;
}

.single-product div.product .guanqu-specs--grouped .guanqu-spec-card {
	border: 1px solid var(--guanqu-line, #e2e6ea);
	border-radius: 6px;
	padding: 16px 18px;
	background: #fff;
}

.single-product div.product .guanqu-specs--grouped .guanqu-spec-card:last-child {
	grid-column: 1 / -1;
}

.single-product div.product .guanqu-specs--grouped .guanqu-spec-card > h3 {
	margin: 0 0 10px;
	color: #006d77;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.single-product div.product .guanqu-specs--grouped .guanqu-spec-card dl {
	margin: 0;
}

/*
 * The base .guanqu-spec grid rule is scoped under .summary; the grouped panel is no longer in
 * .summary, so the label/value grid is re-declared here for the grouped scope only.
 */
.single-product div.product .guanqu-specs--grouped .guanqu-spec-card .guanqu-spec {
	display: grid;
	grid-template-columns: minmax(120px, 42%) 1fr;
	gap: 4px 18px;
	padding: 8px 0;
	border-bottom: 1px solid var(--guanqu-line, #e2e6ea);
}

.single-product div.product .guanqu-specs--grouped .guanqu-spec-card .guanqu-spec dt {
	color: var(--guanqu-graphite, #647483);
	font-size: 14px;
	font-weight: 600;
}

.single-product div.product .guanqu-specs--grouped .guanqu-spec-card .guanqu-spec dd {
	margin: 0;
	font-size: 14px;
	overflow-wrap: anywhere;
}

.single-product div.product .guanqu-specs--grouped .guanqu-spec-card .guanqu-spec:last-child {
	border-bottom: 0;
}

.single-product div.product .guanqu-specs--grouped .guanqu-spec-card .guanqu-spec-ph {
	color: #5b6b78;
	font-style: italic;
}

@media (max-width: 921px) {
	.single-product div.product .guanqu-specs--grouped .guanqu-specs-cards {
		grid-template-columns: 1fr;
	}

	.single-product div.product .guanqu-specs--grouped .guanqu-spec-card:last-child {
		grid-column: auto;
	}
}

/* ---- Six-category Home grid ------------------------------------------ */
.entry-content .guanqu-category-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.guanqu-category-card {
	overflow: hidden;
	background: var(--guanqu-mist);
	border-radius: var(--guanqu-radius-card);
}

.guanqu-category-card > a,
.guanqu-category-card > .guanqu-category-media:first-child {
	display: block;
}

.guanqu-category-card > a {
	height: 100%;
	color: var(--guanqu-navy);
	text-decoration: none;
}

.guanqu-category-media {
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 4 / 3;
}

.guanqu-category-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
}

.guanqu-category-name {
	display: block;
	min-height: 3.6em;
	padding: 14px 18px 18px;
	color: var(--guanqu-navy);
	font-weight: 700;
	line-height: 1.3;
}

.guanqu-category-card > a:hover .guanqu-category-name,
.guanqu-category-card > a:focus-visible .guanqu-category-name {
	text-decoration: underline;
}

/* ---- Products vertical category navigation -------------------------- */
.guanqu-catalog-layout {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

.guanqu-catalog-sidebar {
	padding: 0;
	background: transparent;
	border: 0;
}

.guanqu-catalog-sidebar ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.guanqu-catalog-sidebar li + li {
	margin-top: 4px;
}

.guanqu-catalog-sidebar a,
.guanqu-catalog-sidebar summary,
.guanqu-catalog-sidebar .is-disabled {
	display: block;
	min-height: 44px;
	padding: 11px 12px;
	border-radius: var(--guanqu-radius-control);
	color: var(--guanqu-navy);
	font-weight: 600;
	line-height: 22px;
	text-decoration: none;
}

.guanqu-catalog-sidebar summary {
	cursor: pointer;
}

.guanqu-catalog-sidebar a:hover,
.guanqu-catalog-sidebar a:focus-visible,
.guanqu-catalog-sidebar summary:hover,
.guanqu-catalog-sidebar summary:focus-visible {
	background: var(--guanqu-mist);
}

.guanqu-catalog-sidebar a[aria-current="page"] {
	background: var(--guanqu-navy);
	color: #fff;
}

.guanqu-catalog-sidebar .is-disabled {
	color: var(--guanqu-graphite);
	opacity: 0.7;
}

.guanqu-catalog-sidebar details ul {
	padding: 2px 0 6px 14px;
}

.guanqu-catalog-sidebar details ul a {
	font-weight: 500;
}

.guanqu-catalog-results {
	min-width: 0;
}

@media (max-width: 921px) {
	.entry-content .guanqu-category-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.guanqu-catalog-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 544px) {
	.entry-content .guanqu-category-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.guanqu-category-card a,
	.guanqu-catalog-sidebar a,
	.guanqu-catalog-sidebar summary {
		transition: none;
	}
}

/* Refined native category navigation; no additional script or taxonomy. */
.guanqu-category-name { text-align: center; }
.entry-content .guanqu-category-card > a { text-decoration: none; }
.guanqu-category-media { position: relative; aspect-ratio: 1 / 1; }
.guanqu-category-media img { position: absolute; inset: 0; padding: 20px; box-sizing: border-box; }

.guanqu-catalog-sidebar nav > ul > li { margin: 0; padding: 6px 0; border-bottom: 1px solid var(--guanqu-line); list-style: none; }
.guanqu-catalog-sidebar li { list-style: none; }
.guanqu-catalog-sidebar summary { display: flex; align-items: center; justify-content: space-between; list-style: none; }
.guanqu-catalog-sidebar summary::-webkit-details-marker { display: none; }
.guanqu-catalog-sidebar summary::after { content: '+'; font-size: 20px; font-weight: 400; }
.guanqu-catalog-sidebar details[open] > summary::after { content: '\2212'; }
.guanqu-catalog-sidebar details ul { margin: 4px 0 10px 12px; padding: 0 0 0 12px; border-left: 1px solid var(--guanqu-line); }
.guanqu-catalog-sidebar a:focus-visible,
.guanqu-catalog-sidebar summary:focus-visible,
.guanqu-category-card a:focus-visible { outline: 2px solid var(--guanqu-navy); outline-offset: 3px; }

/* Confirmed availability shares the existing product metadata row. */
.single-product .product_meta .guanqu-in-stock { display: inline-block; margin-inline-start: 1em; }
.single-product .related.products ul.products { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
.single-product .related.products ul.products::before,
.single-product .related.products ul.products::after { display: none; }
.single-product .related.products ul.products li.product { width: auto; margin: 0; float: none; }
@media (max-width: 767px) {
 .single-product .related.products ul.products { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
}

body.guanqu-articles .site-content {
	background-color: var(--guanqu-warm);
}

body.guanqu-articles .site-content > .ast-container {
	max-width: 1200px;
	padding-top: 40px;
	padding-bottom: 64px;
}

body.guanqu-articles #primary {
	float: none;
	width: 100%;
	margin: 0;
}

.guanqu-articles-header {
	max-width: 760px;
	margin: 0 auto 32px;
}

body.guanqu-articles .guanqu-articles-header .entry-title {
	margin: 0 0 12px;
	color: var(--guanqu-navy);
	font-size: clamp(32px, 4vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.guanqu-articles-intro {
	color: var(--guanqu-graphite);
	font-size: 17px;
	line-height: 1.7;
}

.guanqu-articles-intro p:last-child {
	margin-bottom: 0;
}

.guanqu-articles-draft,
.guanqu-article-draft,
.guanqu-article-card-draft {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid #b9d9d9;
	border-radius: 999px;
	background-color: #eaf4f4;
	color: var(--guanqu-teal);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.5;
}

.guanqu-articles-draft {
	margin: 0 0 14px;
}

.guanqu-article-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: stretch;
}

.guanqu-article-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background-color: var(--guanqu-card);
	border: 1px solid var(--guanqu-line);
	border-radius: var(--guanqu-radius-card);
	box-shadow: 0 1px 2px rgba(23, 50, 77, 0.04);
}

.guanqu-article-card-media {
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background-color: var(--guanqu-mist);
}

.guanqu-article-card-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.guanqu-article-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 20px 22px 22px;
}

.guanqu-article-card-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-height: 24px;
}

.guanqu-article-card-cat {
	color: var(--guanqu-teal);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-transform: uppercase;
}

.guanqu-article-card-title {
	margin: 0;
	color: var(--guanqu-navy);
	font-size: 21px;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.guanqu-article-card-title a {
	color: inherit;
	text-decoration: none;
}

.guanqu-article-card-title a:hover,
.guanqu-article-card-title a:focus-visible {
	color: var(--guanqu-teal);
	text-decoration: underline;
}

.guanqu-article-card-excerpt {
	margin: 0;
	color: #4a5a68;
	font-size: 15px;
	line-height: 1.6;
}

.guanqu-article-card-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	margin-top: auto;
	padding-top: 8px;
	color: var(--guanqu-teal);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.guanqu-article-card-link:hover,
.guanqu-article-card-link:focus-visible {
	color: #00565e;
	text-decoration: underline;
}

.guanqu-article-card a:focus-visible {
	outline: 2px solid var(--guanqu-teal);
	outline-offset: 3px;
}

.guanqu-articles-pagination {
	margin-top: 40px;
}

.guanqu-articles-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.guanqu-articles-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var(--guanqu-line);
	border-radius: 999px;
	background-color: var(--guanqu-card);
	color: var(--guanqu-navy);
	text-decoration: none;
}

.guanqu-articles-pagination .page-numbers.current {
	border-color: var(--guanqu-navy);
	background-color: var(--guanqu-navy);
	color: #ffffff;
}

.guanqu-articles-pagination a.page-numbers:hover,
.guanqu-articles-pagination a.page-numbers:focus-visible {
	border-color: var(--guanqu-teal);
	background-color: var(--guanqu-mist);
}

.guanqu-articles-pagination a.page-numbers:focus-visible {
	outline: 2px solid var(--guanqu-teal);
	outline-offset: 3px;
}

.guanqu-articles-empty {
	margin: 0;
	padding: 24px;
	background-color: var(--guanqu-card);
	border: 1px solid var(--guanqu-line);
	border-radius: var(--guanqu-radius-card);
	color: var(--guanqu-graphite);
}

.guanqu-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	max-width: 980px;
	margin: 0 auto 28px;
	color: #5f6b77;
	font-size: 14px;
	line-height: 1.5;
}

.guanqu-breadcrumb a {
	color: var(--guanqu-navy);
	text-decoration: none;
}

.guanqu-breadcrumb a:hover,
.guanqu-breadcrumb a:focus-visible {
	color: var(--guanqu-teal);
	text-decoration: underline;
}

.guanqu-breadcrumb [aria-current="page"] {
	min-width: 0;
	overflow-wrap: anywhere;
}

.guanqu-article-header {
	max-width: 980px;
	margin: 0 auto 32px;
}

.guanqu-article-kicker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.guanqu-article-kicker a {
	color: var(--guanqu-teal);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.5;
	text-decoration: none;
	text-transform: uppercase;
}

.guanqu-article-kicker a:hover,
.guanqu-article-kicker a:focus-visible {
	color: #00565e;
	text-decoration: underline;
}

body.single-post.guanqu-articles .guanqu-article-header .entry-title {
	margin: 0 0 12px;
	color: var(--guanqu-navy);
	font-size: clamp(32px, 4.2vw, 52px);
	line-height: 1.12;
	letter-spacing: -0.01em;
	overflow-wrap: anywhere;
}

.guanqu-article-date {
	margin: 0;
	color: #5f6b77;
	font-size: 14px;
}

.guanqu-article-cover {
	margin: 28px 0 0;
	text-align: center;
}

.guanqu-article-cover img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 640px;
	height: auto;
	margin: 0 auto;
	border-radius: var(--guanqu-radius-card);
}

.guanqu-article-body {
	max-width: 760px;
	margin: 0 auto;
	color: var(--guanqu-graphite);
	font-size: 17px;
	line-height: 1.75;
}

.guanqu-article-body > * {
	max-width: 100%;
}

.guanqu-article-body h2 {
	margin: 1.8em 0 0.6em;
	color: var(--guanqu-navy);
	font-size: clamp(24px, 3vw, 32px);
	line-height: 1.25;
}

.guanqu-article-body h3 {
	margin: 1.5em 0 0.5em;
	color: var(--guanqu-navy);
	font-size: 22px;
	line-height: 1.3;
}

.guanqu-article-body p,
.guanqu-article-body ul,
.guanqu-article-body ol {
	margin: 0 0 1.1em;
}

.guanqu-article-body ul,
.guanqu-article-body ol {
	padding-left: 1.4em;
}

.guanqu-article-body li {
	margin: 0.4em 0;
}

.guanqu-article-body a {
	color: var(--guanqu-teal);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.guanqu-article-body img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.guanqu-article-body figure {
	margin: 1.6em 0;
}

.guanqu-article-body figcaption {
	margin-top: 8px;
	color: #5f6b77;
	font-size: 14px;
	text-align: center;
}

.guanqu-article-body blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--guanqu-teal);
	color: #40505e;
	font-style: italic;
}

.guanqu-article-body code {
	padding: 2px 5px;
	border-radius: 4px;
	background-color: var(--guanqu-mist);
	font-size: 0.9em;
}

.guanqu-article-cta {
	max-width: 760px;
	margin: 48px auto 0;
	padding: 32px;
	background-color: var(--guanqu-navy);
	border-radius: var(--guanqu-radius-card);
	color: var(--guanqu-warm);
}

.guanqu-article-cta h2 {
	margin: 0 0 8px;
	color: #ffffff;
	font-size: 28px;
	line-height: 1.2;
}

.guanqu-article-cta p {
	margin: 0 0 20px;
	color: rgba(247, 246, 242, 0.86);
}

body.single-post.guanqu-articles .guanqu-article-cta .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 20px;
	border: 1px solid var(--guanqu-teal);
	border-radius: var(--guanqu-radius-control);
	background-color: var(--guanqu-teal);
	color: #ffffff;
	font-weight: 700;
	text-decoration: none;
}

body.single-post.guanqu-articles .guanqu-article-cta .button:hover,
body.single-post.guanqu-articles .guanqu-article-cta .button:focus {
	border-color: #00565e;
	background-color: #00565e;
	color: #ffffff;
}

body.single-post.guanqu-articles .guanqu-article-cta .button:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

@media (max-width: 922px) {
	.guanqu-article-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
}

@media (max-width: 600px) {
	body.guanqu-articles .site-content > .ast-container {
		padding-top: 24px;
		padding-bottom: 40px;
	}

	.guanqu-article-grid {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	body.guanqu-articles .guanqu-articles-header .entry-title,
	body.single-post.guanqu-articles .guanqu-article-header .entry-title {
		font-size: 32px;
	}

	.guanqu-article-cta {
		padding: 24px;
	}

	.guanqu-article-cta h2 {
		font-size: 24px;
	}
}

/*
 * ============================================================================
 * POST-LAUNCH UI ROUND 1  (CANDIDATE -- NOT DEPLOYED)
 * ============================================================================
 * Appended after the deployed cumulative CSS. Three fixes:
 *   1. Product-card image container: already uniform (square 1:1, contain,
 *      white, centred). Remaining size variance is source-image whitespace /
 *      shoe silhouette, not CSS; see the round-1 report for the derivative
 *      image list. No card rule is changed here.
 *   2. Product-detail section rhythm: the grouped Specifications panel has no
 *      bottom margin, so it butts directly against "Other Styles" (measured
 *      0px gap). Add a clear gap on desktop and a smaller one on phones.
 *   3. Mobile RFQ: the RFQ page is page id 72 on Production (the older child
 *      rules were scoped to the staging id 18 and never matched). Touch targets
 *      and error readability are tightened here, scoped to body.page-id-72.
 * Presentation only: no field, rule, validation, product, contact or media
 * change. No !important, no new dependency.
 */

/* --- 2. Product detail: Specifications -> Other Styles gap -------------- */
.single-product div.product .guanqu-specs--grouped {
	margin-bottom: 48px;
}

@media (max-width: 921px) {
	.single-product div.product .guanqu-specs--grouped {
		margin-bottom: 32px;
	}
}

/* --- 3. Mobile RFQ (Production RFQ page id 72) -------------------------- */
/* Touch targets to ~44px; labels stay on top; input size stays >=16px. */
body.page-id-72 .fluentform .ff-el-form-control {
	width: 100%;
	max-width: 100%;
	min-height: 44px;
	border-radius: var(--guanqu-radius-control);
}

body.page-id-72 .fluentform .ff-btn-submit {
	min-height: 44px;
}

/* Radio options: full-width, roomier tap area. */
body.page-id-72 .fluentform .ff-el-form-check {
	display: flex;
	align-items: center;
	min-height: 44px;
}

/* Error state is explicit and readable (border + message). */
body.page-id-72 .fluentform .ff-el-form-control[aria-invalid="true"] {
	border-color: #b3261e;
}

body.page-id-72 .fluentform .ff-el-is-error .text-danger,
body.page-id-72 .fluentform .ff-el-is-error .error,
body.page-id-72 .fluentform .error.text-danger {
	display: block;
	margin-top: 4px;
	color: #b3261e;
	font-size: 13px;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

/*
 * POST-LAUNCH UI ROUND 1 - boot list card: full boot visible (candidate).
 *
 * The companion functions.php filter serves the uncropped "medium" size for
 * boots (the 300x300 thumbnail crop otherwise cuts the toe/shaft). This rule
 * scales that full-ratio image down inside the existing square slot so the
 * whole boot shows with breathing room, without changing the card frame, the
 * image area height, the title or the button, and without touching any other
 * category. Scoped to WooCommerce's real product_cat-boots class (not id/title).
 * No crop, no stretch, no redraw.
 */
.woocommerce ul.products li.product.product_cat-boots .astra-shop-thumbnail-wrap img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 9%;
	box-sizing: border-box;
}



/* Visible keyboard focus for Production RFQ; no layout or submission change. */
body.page-id-72 .fluentform .ff-el-form-control:focus-visible,
body.page-id-72 .fluentform .ff-btn-submit:focus-visible,
body.page-id-72 .fluentform input[type="radio"]:focus-visible {
 outline: 3px solid #007d87;
 outline-offset: 2px;
}

/*
 * ============================================================================
 * IMAGE REDISTRIBUTION 2026-10-24 (About 75 / Posts 166-168)
 * ============================================================================
 * About rules are scoped to body.page-id-75 (the Production About page).
 * Article photo groups are scoped to .guanqu-article-body and the new
 * .article-photo-pair class only. No global figure, product-gallery or
 * template rule is changed.
 */

/* About: three-photo factory overview; natural size, centred, captions follow. */
body.page-id-75 .wp-block-columns.about-photo-group {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 24px;
	margin: 0;
	padding: 44px 0 0;
}

body.page-id-75 .about-photo-group > .wp-block-column {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
}

body.page-id-75 .about-photo-group figure {
	margin: 0;
}

body.page-id-75 .about-photo-group img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: 10px;
}

body.page-id-75 .about-photo-group figcaption {
	margin-top: 10px;
	color: #4f5a66;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

/* About: the approved development / production copy stays side by side,
 * without a second photo row or a duplicated process section. */
body.page-id-75 .wp-block-columns.about-story-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 48px;
	margin: 0;
	padding: 44px 0 0;
}

body.page-id-75 .about-story-row > .wp-block-column {
	min-width: 0;
}

body.page-id-75 .about-story-row h2 {
	margin: 0 0 18px;
	font-size: 30px;
	letter-spacing: -0.02em;
}

body.page-id-75 .about-story-row p {
	max-width: 66ch;
}

body.page-id-75 .about-story-row > .wp-block-column > p:last-child {
	margin-bottom: 0;
}

/* Article body: two-image groups at their native size, centred. Captions sit
 * under each image; no fixed-width figure box and no upscaling. */
.guanqu-article-body .wp-block-columns.article-photo-pair {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
	gap: 24px;
	margin: 1.7em 0;
}

.guanqu-article-body .article-photo-pair > .wp-block-column {
	flex: 0 1 auto;
	min-width: 0;
}

.guanqu-article-body .article-photo-pair figure {
	margin: 0;
}

.guanqu-article-body .article-photo-pair img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.guanqu-article-body .article-photo-pair figcaption {
	margin-top: 8px;
	color: #5f6b77;
	font-size: 14px;
	line-height: 1.5;
	text-align: left;
}

@media (max-width: 921px) {
	body.page-id-75 .wp-block-columns.about-story-row {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}

@media (max-width: 781px) {
	.guanqu-article-body .article-photo-pair > .wp-block-column {
		flex-basis: auto !important;
	}

	/* Keep the photo groups centred and aligned once the columns stack. */
	.guanqu-article-body .article-photo-pair img {
		margin-inline: auto;
	}

	.guanqu-article-body .article-photo-pair figcaption {
		text-align: center;
	}

	body.page-id-75 .wp-block-columns.about-photo-group {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 20px 16px;
	}

	body.page-id-75 .wp-block-columns.about-photo-group > .wp-block-column {
		flex: none;
	}

	body.page-id-75 .wp-block-columns.about-photo-group > .wp-block-column:first-child {
		grid-column: 1 / -1;
	}

	body.page-id-75 .about-photo-group figure {
		width: fit-content;
		max-width: 100%;
		margin-inline: auto;
	}

	body.page-id-75 .about-photo-group img {
		width: auto;
		max-width: 100%;
		margin-inline: auto;
	}
}

@media (max-width: 600px) {
	body.page-id-75 .wp-block-columns.about-photo-group {
		gap: 18px 12px;
		padding-top: 32px;
	}

	body.page-id-75 .process-steps {
		grid-template-columns: 1fr;
	}

	body.page-id-75 .process-steps li {
		display: flex;
		align-items: baseline;
		gap: 14px;
		padding: 14px 18px;
		border-top: 1px solid #e3eaec;
	}

	body.page-id-75 .process-steps li:first-child {
		border-top: 0;
	}

	body.page-id-75 .process-steps li::before {
		margin: 0;
	}

	.guanqu-article-body .wp-block-columns.article-photo-pair {
		gap: 16px;
	}
}