/* ==========================================================================
   Product page — Spur Gears (page 2598, /products/spur-gears/).
   Hero uses the shared resource-hero.css + hero-photo.css. Loaded by
   cg_product_page_assets() in functions.php (CG_PRODUCT_PAGE_IDS).

   Elementor hooks: .cgpd-sec (+ --white / --mist / --navy), .cgpd-eyebrow,
   .cgpd-title, .cgpd-text, .cgpd-chips, .cgpd-btn(--solid/--ghost),
   .cgpd-link, .cgpd-panel, .cgpd-checks(--2col/--dark), .cgpd-spec (table
   in a Text widget), .cgpd-cards/.cgpd-card, .cgpd-industries, .cgpd-photo,
   .cgpd-proofs/.cgpd-proof, .cgpd-cta, .cgpd-faq (Toggle, FAQ schema on).
   Class-based, so the page can be duplicated for other products.
   ========================================================================== */

body.cg-product-page {
	--pd-navy: #07111F;
	--pd-accent: #1B3FA0;
	--pd-accent-2: #3563E0;
	--pd-ice: #9DB8FF;
	--pd-ink: #0C1825;
	--pd-body: #5A6678;
	--pd-line: #E1E5EB;
	--pd-mist: #F4F6F9;
	--pd-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
	--pd-head: "Space Grotesk", Inter, sans-serif;
	--pd-ease: cubic-bezier(.2, .7, .2, 1);
	--pd-grid: linear-gradient(rgba(157, 184, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(157, 184, 255, .05) 1px, transparent 1px);
}
body.cg-product-page [id] { scroll-margin-top: 120px; }
/* Same content edge as the hero text (1200px box, 20px inset). */
body.cg-product-page .elementor .elementor-element.cgpd-in.e-con { max-width: 100%; gap: 0 !important; --padding-left: 20px; --padding-right: 20px; }
body.cg-product-page .cgpd-panel { align-self: flex-start; }
body.cg-product-page .cgpd-link .elementor-button { white-space: nowrap; }
body.cg-product-page .cgpd-spec tr, body.cg-product-page .cgpd-spec td { background: transparent; }

/* Section backgrounds */
body.cg-product-page .elementor-element.cgpd-sec--white { background: #fff !important; }
body.cg-product-page .elementor-element.cgpd-sec--mist {
	background: linear-gradient(rgba(27, 63, 160, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(27, 63, 160, .03) 1px, transparent 1px), var(--pd-mist) !important;
	background-size: 56px 56px, 56px 56px, auto !important;
}
body.cg-product-page .elementor-element.cgpd-sec--navy {
	background: radial-gradient(700px 420px at 90% 10%, rgba(53, 99, 224, .22), transparent 70%), var(--pd-grid), var(--pd-navy) !important;
	background-size: auto, 56px 56px, 56px 56px, auto !important;
}

/* Type */
.cgpd-eyebrow .elementor-heading-title {
	display: inline-flex !important;
	align-items: center;
	gap: 12px;
	font: 500 11.5px/1.3 var(--pd-mono) !important;
	letter-spacing: .2em !important;
	text-transform: uppercase !important;
	color: var(--pd-accent) !important;
}
.cgpd-eyebrow .elementor-heading-title::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.cgpd-title { margin-top: 14px !important; }
.cgpd-title .elementor-heading-title {
	font: 600 clamp(28px, 3vw, 40px)/1.2 var(--pd-head) !important;
	letter-spacing: -.02em !important;
	color: var(--pd-ink) !important;
	text-wrap: balance;
}
.cgpd-text { margin-top: 16px !important; }
.cgpd-text p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.7; color: var(--pd-body); }
.cgpd-text p:last-child { margin-bottom: 0; }
.cgpd-text a { color: var(--pd-accent); font-weight: 600; }
.cgpd-sec--navy .cgpd-eyebrow .elementor-heading-title { color: var(--pd-ice) !important; }
.cgpd-sec--navy .cgpd-title .elementor-heading-title { color: #fff !important; }
.cgpd-sec--navy .cgpd-text p { color: #B4C1D4; }

/* Buttons + text links */
.cgpd-btn .elementor-button {
	display: inline-flex;
	align-items: center;
	padding: 16px 24px !important;
	border-radius: 8px !important;
	font: 600 13px/1 Inter, sans-serif !important;
	letter-spacing: .08em !important;
	text-transform: uppercase;
	transition: background-color .3s ease, border-color .3s ease, transform .3s var(--pd-ease) !important;
}
.cgpd-btn--solid .elementor-button { background: var(--pd-accent) !important; color: #fff !important; box-shadow: 0 14px 28px -14px rgba(53, 99, 224, .9); }
.cgpd-btn--solid .elementor-button:hover { background: var(--pd-accent-2) !important; transform: translateY(-2px); }
.cgpd-btn--ghost .elementor-button { background: transparent !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .35) !important; }
.cgpd-btn--ghost .elementor-button:hover { border-color: #fff !important; background: rgba(255, 255, 255, .06) !important; }
.cgpd-btn .elementor-button-icon svg, .cgpd-link .elementor-button-icon svg { width: 12px; fill: currentColor; transition: transform .3s var(--pd-ease); }
.cgpd-btn .elementor-button:hover .elementor-button-icon svg, .cgpd-link .elementor-button:hover .elementor-button-icon svg { transform: translateX(4px); }
.cgpd-link { margin-top: 24px !important; }
.cgpd-link .elementor-button {
	padding: 0 0 4px !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: inset 0 -1px 0 rgba(27, 63, 160, .35) !important;
	font: 600 13px/1.3 Inter, sans-serif !important;
	letter-spacing: .1em !important;
	text-transform: uppercase;
	color: var(--pd-accent) !important;
}
.cgpd-link .elementor-button:hover { box-shadow: inset 0 -2px 0 var(--pd-accent) !important; }
.cgpd-sec--navy .cgpd-link .elementor-button { color: var(--pd-ice) !important; box-shadow: inset 0 -1px 0 rgba(157, 184, 255, .4) !important; }

/* ── Hero extras ──────────────────────────────────────────────────────── */
.cgpd-chips { margin-top: 26px !important; }
.cgpd-chips .elementor-icon-list-items { display: flex !important; flex-wrap: wrap; gap: 10px; }
.cgpd-chips .elementor-icon-list-item {
	margin: 0 !important;
	padding: 9px 14px !important;
	border: 1px solid rgba(157, 184, 255, .3);
	border-radius: 999px;
	background: rgba(12, 26, 46, .7);
}
.cgpd-chips .elementor-icon-list-item::after { display: none !important; }
.cgpd-chips .elementor-icon-list-icon svg { width: 13px !important; fill: var(--pd-ice) !important; }
.cgpd-chips .elementor-icon-list-text { padding-left: 8px !important; font: 500 12.5px/1 var(--pd-mono) !important; letter-spacing: .06em; color: #DCE7FF !important; }
.cgpd-actions { margin-top: 30px !important; }

/* ── Panels + check lists ─────────────────────────────────────────────── */
.cgpd-panel {
	--padding-top: 32px !important; --padding-right: 32px !important; --padding-bottom: 28px !important; --padding-left: 32px !important;
	border: 1px solid var(--pd-line);
	border-radius: 20px;
	background: linear-gradient(180deg, #F8FAFE, #fff) !important;
	gap: 0 !important;
}
.cgpd-panel__title .elementor-heading-title {
	font: 500 11.5px/1.4 var(--pd-mono) !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--pd-body) !important;
}
.cgpd-checks { margin-top: 16px !important; }
.cgpd-checks--2col .elementor-icon-list-items { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
.cgpd-checks .elementor-icon-list-item {
	align-items: flex-start !important;
	margin: 0 !important;
	padding: 11px 0 !important;
	border-bottom: 1px solid var(--pd-line);
}
.cgpd-checks .elementor-icon-list-item::after { display: none !important; }
.cgpd-checks .elementor-icon-list-icon {
	flex: none;
	display: grid !important;
	place-items: center;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	border-radius: 6px;
	background: #EAF0FD;
}
.cgpd-checks .elementor-icon-list-icon svg { width: 9px !important; height: 9px !important; fill: var(--pd-accent) !important; }
.cgpd-checks .elementor-icon-list-text { align-self: flex-start !important; padding-left: 12px !important; font-size: 15px !important; line-height: 1.45 !important; color: var(--pd-ink) !important; }
.cgpd-checks--dark .elementor-icon-list-item { border-bottom-color: rgba(157, 184, 255, .16); }
.cgpd-checks--dark .elementor-icon-list-icon { background: rgba(157, 184, 255, .14); }
.cgpd-checks--dark .elementor-icon-list-icon svg { fill: var(--pd-ice) !important; }
.cgpd-checks--dark .elementor-icon-list-text { color: #DCE7FF !important; }

/* ── Specification table (drawing title block) ───────────────────────── */
.cgpd-spec-wrap { position: relative; }
.cgpd-spec {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	margin: 0 !important;
	border: 1px solid #C9D3E3;
	border-radius: 16px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 40px 70px -48px rgba(12, 24, 37, .45);
	font-size: 15.5px;
}
.cgpd-spec th {
	padding: 14px 22px;
	background: var(--pd-navy);
	font: 500 11px/1.3 var(--pd-mono);
	letter-spacing: .18em;
	text-transform: uppercase;
	text-align: left;
	color: var(--pd-ice);
	border: 0;
}
.cgpd-spec td { padding: 18px 22px; border: 0; border-top: 1px solid var(--pd-line); color: var(--pd-ink); vertical-align: middle; }
.cgpd-spec td:first-child { width: 42%; color: var(--pd-body); font-weight: 500; border-right: 1px solid var(--pd-line); }
.cgpd-spec td:last-child { font-family: var(--pd-head); font-weight: 600; font-size: 17px; }
.cgpd-spec tbody tr { transition: background-color .25s ease; }
.cgpd-spec tbody tr:hover { background: #F5F8FE; }

/* ── Capability cards ─────────────────────────────────────────────────── */
.cgpd-cards { margin-top: 40px !important; counter-reset: pd-card; }
.cgpd-card {
	position: relative;
	counter-increment: pd-card;
	gap: 0 !important;
	--padding-top: 30px !important; --padding-right: 26px !important; --padding-bottom: 28px !important; --padding-left: 26px !important;
	border: 1px solid var(--pd-line);
	border-radius: 18px;
	background: #fff !important;
	overflow: hidden;
	transition: transform .45s var(--pd-ease), box-shadow .45s ease, border-color .35s ease !important;
}
.cgpd-card::after {
	content: counter(pd-card, decimal-leading-zero);
	position: absolute;
	top: 26px;
	right: 24px;
	font: 500 12px/1 var(--pd-mono);
	letter-spacing: .16em;
	color: #9AA6B8;
}
.cgpd-card:hover { transform: translateY(-5px); border-color: rgba(27, 63, 160, .3); box-shadow: 0 30px 50px -34px rgba(12, 24, 37, .45), inset 0 -3px 0 var(--pd-accent); }
.cgpd-card__icon { margin: 0 !important; }
.cgpd-card__icon .elementor-icon {
	display: grid !important;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0 !important;
	border-radius: 12px;
	font-size: 19px !important;
	background: #EAF0FD !important;
	color: var(--pd-accent) !important;
	transition: background-color .35s ease, color .35s ease, transform .45s var(--pd-ease);
}
.cgpd-card__icon svg { width: 19px; height: 19px; fill: currentColor !important; }
.cgpd-card:hover .cgpd-card__icon .elementor-icon { background: var(--pd-accent) !important; color: #fff !important; transform: rotate(-8deg); }
.cgpd-card__title { margin-top: 24px !important; }
.cgpd-card__title .elementor-heading-title { font: 600 18px/1.3 var(--pd-head) !important; color: var(--pd-ink) !important; }
.cgpd-card__text { margin-top: 10px !important; }
.cgpd-card__text p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--pd-body); }

/* Wide capability cards: header row (icon + range badge), paragraphs, lists */
.cgpd-card--wide { --padding-top: 32px !important; --padding-right: 32px !important; --padding-bottom: 30px !important; --padding-left: 32px !important; }
.cgpd-card--wide::after { content: none; }
/* Rows size to content (no stretched 1fr rows = no big gap); cards in a row match heights. */
body.cg-product-page .elementor-element.cgpd-cards:has(.cgpd-card--wide) {
	grid-template-rows: none !important;
	grid-auto-rows: auto !important;
	align-items: stretch !important;
	align-content: start !important;
	row-gap: 20px !important;
	height: auto !important;
	min-height: 0 !important;
}
body.cg-product-page .cgpd-cards > .cgpd-card--wide { height: 100% !important; }
body.cg-product-page .cgpd-caps-head { flex: 1 1 0 !important; min-width: 0; max-width: 820px; }
body.cg-product-page .cgpd-caps-link { flex: none !important; }
.cgpd-card__top { gap: 12px !important; }
.cgpd-card__badge .elementor-heading-title {
	display: inline-block;
	padding: 7px 12px;
	border-radius: 999px;
	border: 1px solid rgba(27, 63, 160, .2);
	background: #F3F6FD;
	font: 500 12px/1 var(--pd-mono) !important;
	letter-spacing: .06em !important;
	color: var(--pd-accent) !important;
}
.cgpd-card--wide .cgpd-card__text p { margin: 0 0 10px; }
.cgpd-card--wide .cgpd-card__text p:last-child { margin-bottom: 0; }
.cgpd-card__list { margin-top: 10px !important; }
.cgpd-card__list .elementor-icon-list-item { padding: 8px 0 !important; }
.cgpd-card__list .elementor-icon-list-text { font-size: 14.5px !important; }
.cgpd-card__after { margin-top: 14px !important; }
.cgpd-card__after p { font-style: italic; }

/* Manufacturing flexibility band */
.cgpd-flex {
	margin-top: 24px !important;
	--padding-top: 36px !important; --padding-right: 40px !important; --padding-bottom: 36px !important; --padding-left: 40px !important;
	border-radius: 20px;
	background: linear-gradient(110deg, #EEF3FD, #F8FAFE 60%, #fff) !important;
	border: 1px solid #D9E2F5;
}
.cgpd-flex__title { margin-top: 12px !important; }
.cgpd-flex__title .elementor-heading-title { font: 600 24px/1.25 var(--pd-head) !important; color: var(--pd-ink) !important; }
.cgpd-flex .cgpd-text { margin-top: 10px !important; }
.cgpd-flex .cgpd-text p { font-size: 15px; }
.cgpd-flex .cgpd-panel__title .elementor-heading-title { text-transform: none !important; letter-spacing: 0 !important; font: 500 14.5px/1.5 Inter, sans-serif !important; color: var(--pd-ink) !important; }
.cgpd-tags { margin-top: 14px !important; }
.cgpd-tags .elementor-icon-list-items { display: flex !important; flex-wrap: wrap; gap: 8px; }
.cgpd-tags .elementor-icon-list-item {
	margin: 0 !important;
	padding: 9px 14px !important;
	border: 1px solid rgba(27, 63, 160, .2);
	border-radius: 999px;
	background: #fff;
	transition: border-color .25s ease, background-color .25s ease;
}
.cgpd-tags .elementor-icon-list-item:hover { border-color: var(--pd-accent); background: #F3F6FD; }
.cgpd-tags .elementor-icon-list-item::after { display: none !important; }
.cgpd-tags .elementor-icon-list-icon svg { width: 10px !important; fill: var(--pd-accent) !important; }
.cgpd-tags .elementor-icon-list-text { padding-left: 8px !important; font-size: 14px !important; font-weight: 500; color: var(--pd-ink) !important; }
@media (max-width: 767px) {
	.cgpd-card--wide { --padding-right: 22px !important; --padding-left: 22px !important; }
	.cgpd-flex { --padding-right: 20px !important; --padding-left: 20px !important; --padding-top: 28px !important; --padding-bottom: 28px !important; }
	.cgpd-card__list.cgpd-checks--2col .elementor-icon-list-items { grid-template-columns: 1fr; }
}

/* ── Industries list (links) ──────────────────────────────────────────── */
.cgpd-industries .elementor-icon-list-items { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cgpd-industries .elementor-icon-list-item { margin: 0 !important; padding: 0 !important; }
.cgpd-industries .elementor-icon-list-item::after { display: none !important; }
.cgpd-industries .elementor-icon-list-item a {
	display: flex !important;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 16px 18px;
	border: 1px solid rgba(157, 184, 255, .16);
	border-radius: 12px;
	background: rgba(12, 26, 46, .6);
	transition: background-color .3s ease, border-color .3s ease;
}
.cgpd-industries .elementor-icon-list-item a:hover { background: rgba(27, 63, 160, .45); border-color: rgba(157, 184, 255, .45); }
.cgpd-industries .elementor-icon-list-text { padding: 0 !important; font: 600 15px/1.35 var(--pd-head) !important; color: #fff !important; }
.cgpd-industries .elementor-icon-list-icon svg { width: 12px !important; fill: var(--pd-ice) !important; transition: transform .3s var(--pd-ease); }
.cgpd-industries a:hover .elementor-icon-list-icon svg { transform: translateX(4px); }

/* ── Quality photo ────────────────────────────────────────────────────── */
.cgpd-photo { position: relative; padding: 0 0 24px 24px !important; }
.cgpd-photo::before {
	content: "" !important;
	position: absolute !important;
	inset: 40px 40px 0 0 !important;
	width: auto !important;
	height: auto !important;
	border-radius: 20px;
	background: var(--pd-grid), var(--pd-navy) !important;
	background-size: 28px 28px, 28px 28px, auto !important;
	opacity: 1 !important;
}
.cgpd-photo__img { position: relative; z-index: 1; margin: 0 !important; }
.cgpd-photo__img img { display: block; width: 100% !important; height: 440px !important; object-fit: cover; border-radius: 18px !important; box-shadow: 0 40px 70px -40px rgba(7, 17, 31, .6); }
.cgpd-note { margin-top: 18px !important; }
.cgpd-note p { margin: 0; padding: 14px 18px; border-left: 2px solid var(--pd-accent); border-radius: 0 10px 10px 0; background: #F3F6FC; font-size: 14.5px; line-height: 1.6; color: var(--pd-body); }

/* ── Proof points ─────────────────────────────────────────────────────── */
.cgpd-proofs {
	margin-top: 36px !important;
	border: 1px solid var(--pd-line);
	border-radius: 20px;
	overflow: hidden;
	background: #fff !important;
}
.cgpd-proof {
	gap: 6px !important;
	--padding-top: 26px !important; --padding-right: 24px !important; --padding-bottom: 24px !important; --padding-left: 24px !important;
	border-right: 1px solid var(--pd-line);
	border-bottom: 1px solid var(--pd-line);
	transition: background-color .3s ease;
}
.cgpd-proof:hover { background: #F8FAFE !important; }
.cgpd-proof__v .elementor-heading-title { font: 600 34px/1 var(--pd-head) !important; letter-spacing: -.03em !important; color: var(--pd-accent) !important; }
.cgpd-proof__l .elementor-heading-title { font-size: 14px !important; line-height: 1.5 !important; color: var(--pd-body) !important; }
@media (min-width: 1025px) {
	.cgpd-proof:nth-child(4n) { border-right: 0; }
	.cgpd-proof:nth-last-child(-n+4) { border-bottom: 0; }
}

/* ── Why choose — reason cards (icon · title · text, no numbers) ──────── */
.cgpd-reasons { margin-top: 36px !important; }
.cgpd-reason {
	position: relative;
	gap: 0 !important;
	--padding-top: 30px !important; --padding-right: 28px !important; --padding-bottom: 28px !important; --padding-left: 28px !important;
	border: 1px solid var(--pd-line);
	border-radius: 18px;
	background: #fff !important;
	overflow: hidden;
	transition: transform .45s var(--pd-ease), box-shadow .45s ease, border-color .35s ease !important;
}
.cgpd-reason::before {
	content: "" !important;
	position: absolute !important;
	inset: 0 auto 0 0 !important;
	width: 3px !important;
	height: auto !important;
	opacity: 1 !important;
	border: 0 !important;
	background: linear-gradient(180deg, var(--pd-accent), var(--pd-ice)) !important;
	transform: scaleY(0);
	transform-origin: 50% 0;
	transition: transform .5s var(--pd-ease);
}
.cgpd-reason:hover { transform: translateY(-5px); border-color: rgba(27, 63, 160, .28); box-shadow: 0 30px 50px -34px rgba(12, 24, 37, .45); }
.cgpd-reason:hover::before { transform: scaleY(1); }
.cgpd-reason__icon { margin: 0 !important; }
.cgpd-reason__icon .elementor-icon {
	display: grid !important;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0 !important;
	border-radius: 12px;
	font-size: 19px !important;
	background: #EAF0FD !important;
	color: var(--pd-accent) !important;
	transition: background-color .35s ease, color .35s ease, transform .45s var(--pd-ease);
}
.cgpd-reason__icon svg { width: 19px; height: 19px; fill: currentColor !important; }
.cgpd-reason:hover .cgpd-reason__icon .elementor-icon { background: var(--pd-accent) !important; color: #fff !important; transform: rotate(-8deg); }
.cgpd-reason__title { margin-top: 22px !important; }
.cgpd-reason__title .elementor-heading-title { font: 600 18px/1.3 var(--pd-head) !important; color: var(--pd-ink) !important; text-wrap: balance; }
.cgpd-reason__text { margin-top: 10px !important; }
.cgpd-reason__text p { margin: 0; font-size: 15px; line-height: 1.65; color: var(--pd-body); }
/* 3 + 2 layout on desktop: the last two cards share the second row evenly. */
@media (min-width: 1025px) {
	.cgpd-reasons { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; }
	.cgpd-reasons > .cgpd-reason { grid-column: span 2; }
	.cgpd-reasons > .cgpd-reason:nth-last-child(2):nth-child(3n+1),
	.cgpd-reasons > .cgpd-reason:nth-last-child(1):nth-child(3n+2) { grid-column: span 3; }
}

/* ── Quote CTA card ───────────────────────────────────────────────────── */
body.cg-product-page .elementor-element.cgpd-cta {
	--padding-top: 52px !important; --padding-right: 52px !important; --padding-bottom: 52px !important; --padding-left: 52px !important;
	border-radius: 24px;
	background: radial-gradient(520px 360px at 0% 0%, rgba(53, 99, 224, .3), transparent 70%), var(--pd-grid), var(--pd-navy) !important;
	background-size: auto, 28px 28px, 28px 28px, auto !important;
	box-shadow: 0 50px 90px -50px rgba(7, 17, 31, .7);
}
.cgpd-cta .cgpd-eyebrow .elementor-heading-title { color: var(--pd-ice) !important; }
.cgpd-cta .cgpd-title .elementor-heading-title { color: #fff !important; }
.cgpd-cta .cgpd-text p { color: #B4C1D4; }
.cgpd-cta .cgpd-panel__title .elementor-heading-title { color: var(--pd-ice) !important; }
.cgpd-cta .cgpd-cta-actions { margin-top: 28px !important; }

/* -- FAQ: Elementor Accordion widget (colours, icons, padding set in Elementor) -- */
.cgpd-faq .elementor-accordion-item { margin: 0 0 10px; border-radius: 14px; overflow: hidden; }
.cgpd-faq .elementor-tab-title { font-family: var(--pd-head) !important; font-size: 16.5px !important; font-weight: 600 !important; line-height: 1.4 !important; }
/* The title link must use the widget's own title typography: Elementor's kit
   CSS in the editor sizes .elementor-accordion-title with the global primary
   size (76px) otherwise. */
.cgpd-faq .elementor-tab-title a,
.cgpd-faq .elementor-accordion-title { color: inherit !important; font: inherit !important; letter-spacing: inherit !important; }
.cgpd-faq .elementor-tab-content p { margin: 0; font-size: 15.5px; line-height: 1.7; }
@media (min-width: 1025px) { .cgpd-faq-head { position: sticky !important; top: 130px; align-self: flex-start; } }

/* ══════════════════════════════════════════════════════════════════════
   Variations (used by Bevel & Mitre Gears) — opt-in classes
   ══════════════════════════════════════════════════════════════════════ */

/* Hero: photo in a framed "drawing sheet" window on the right, full colour,
   instead of the blended background photo. */
@media (min-width: 1025px) {
	body.cg-product-page .cgpd-hero--framed .elementor-widget.cg-hero-photo {
		top: 72px;
		bottom: 72px;
		right: max(40px, calc((100% - 1200px) / 2 + 20px));
		width: min(40%, 520px) !important;
		-webkit-mask-image: none;
		        mask-image: none;
		border-radius: 20px;
		overflow: hidden;
		box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .8), 0 0 0 1px rgba(157, 184, 255, .25);
	}
	body.cg-product-page .cgpd-hero--framed .cg-hero-photo img { opacity: 1; filter: none; mix-blend-mode: normal; object-position: 60% 50%; }
	body.cg-product-page .cgpd-hero--framed .elementor-widget.cg-hero-photo::after {
		background: linear-gradient(0deg, rgba(7, 17, 31, .55), transparent 45%);
	}
	/* Corner registration marks outside the frame */
	body.cg-product-page .cgpd-hero--framed .elementor-widget.cg-hero-photo::before {
		content: "";
		position: absolute;
		inset: 14px;
		z-index: 2;
		--c: rgba(255, 255, 255, .75);
		background:
			linear-gradient(var(--c), var(--c)) 0 0 / 18px 1.5px, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px 18px,
			linear-gradient(var(--c), var(--c)) 100% 100% / 18px 1.5px, linear-gradient(var(--c), var(--c)) 100% 100% / 1.5px 18px;
		background-repeat: no-repeat;
	}
	body.cg-product-page .cgpd-hero--framed .cgh-hero__box > .elementor-widget:not(.cg-hero-photo) { max-width: 600px; }
}

/* Hero: 4-photo collage on the right (Bevel & Mitre). Container .cgpd-collage holds
   four Image widgets (.cgpd-collage__tile) with custom captions — swap in Elementor. */
body.cg-product-page .cgpd-hero--collage { position: relative; }
body.cg-product-page .cgpd-hero--collage .cgh-hero__box.e-con { position: static !important; }
body.cg-product-page .cgpd-hero--collage .elementor-element.cgpd-collage {
	display: grid !important;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	grid-template-rows: 1fr 1fr .78fr;
	gap: 14px !important;
	--padding-top: 0px !important; --padding-right: 0px !important; --padding-bottom: 0px !important; --padding-left: 0px !important;
}
.cgpd-collage__tile { position: relative; margin: 0 !important; min-height: 0; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .85), 0 0 0 1px rgba(157, 184, 255, .2); animation: cgpdTile .9s var(--pd-ease) both; }
.cgpd-collage__tile:nth-child(1) { grid-column: 1; grid-row: 1 / 3; animation-delay: .15s; }
.cgpd-collage__tile:nth-child(2) { grid-column: 2; grid-row: 1; animation-delay: .3s; }
.cgpd-collage__tile:nth-child(3) { grid-column: 2; grid-row: 2 / 4; animation-delay: .45s; }
.cgpd-collage__tile:nth-child(4) { grid-column: 1; grid-row: 3; animation-delay: .6s; }
@keyframes cgpdTile { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
.cgpd-collage__tile :is(.elementor-widget-container, figure, a) { position: relative; display: block; height: 100%; margin: 0; }
.cgpd-collage__tile img { display: block; width: 100% !important; height: 100% !important; max-width: none; object-fit: cover; border-radius: 0 !important; transition: transform 1.2s var(--pd-ease), filter .6s ease; filter: saturate(.92); }
.cgpd-collage__tile:hover img { transform: scale(1.06); filter: saturate(1.05); }
.cgpd-collage__tile:nth-child(1) img { object-position: 70% 50%; }
.cgpd-collage__tile:nth-child(3) img { object-position: 35% 60%; }
.cgpd-collage__tile :is(.elementor-widget-container, figure)::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 17, 31, .72), transparent 45%); pointer-events: none; }
.cgpd-collage__tile figcaption, .cgpd-collage__tile .widget-image-caption {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 2;
	margin: 0 !important;
	padding: 6px 10px;
	border: 1px solid rgba(157, 184, 255, .35);
	border-radius: 8px;
	background: rgba(7, 17, 31, .72);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	font: 600 10px/1.2 var(--pd-mono) !important;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #DCE7FF !important;
	text-align: left;
}
/* corner registration marks on the large tile */
.cgpd-collage__tile:nth-child(1) :is(.elementor-widget-container, figure)::before {
	content: ""; position: absolute; inset: 12px; z-index: 2; --c: rgba(255, 255, 255, .75);
	background: linear-gradient(var(--c), var(--c)) 0 0 / 16px 1.5px, linear-gradient(var(--c), var(--c)) 0 0 / 1.5px 16px,
		linear-gradient(var(--c), var(--c)) 100% 0 / 16px 1.5px, linear-gradient(var(--c), var(--c)) 100% 0 / 1.5px 16px;
	background-repeat: no-repeat; pointer-events: none;
}
@media (min-width: 1025px) {
	body.cg-product-page .cgpd-hero--collage .elementor-element.cgpd-collage {
		position: absolute !important;
		top: 64px;
		bottom: 64px;
		right: max(40px, calc((100% - 1200px) / 2 + 20px));
		width: min(44%, 560px) !important;
		z-index: 1;
	}
	body.cg-product-page .cgpd-hero--collage .cgh-hero__box > .elementor-widget { max-width: min(560px, calc(100% - min(44%, 560px) - 64px)); }
	body.cg-product-page .cgpd-hero--collage .cgh-hero__box > .elementor-element.cgpd-actions { max-width: 560px; }
}
@media (max-width: 1024px) {
	body.cg-product-page .cgpd-hero--collage .elementor-element.cgpd-collage { order: 20; width: 100% !important; height: 520px; margin-top: 36px; }
}
@media (max-width: 767px) {
	body.cg-product-page .cgpd-hero--collage .elementor-element.cgpd-collage { height: 400px; gap: 10px !important; grid-template-rows: 1fr 1fr .8fr; }
	.cgpd-collage__tile figcaption, .cgpd-collage__tile .widget-image-caption { left: 8px; bottom: 8px; font-size: 9px !important; padding: 5px 7px; }
}
@media (prefers-reduced-motion: reduce) { .cgpd-collage__tile { animation: none; } }

/* Hero spec chips as a joined stat strip */
body.cg-product-page .cgh-hero__text p + p { margin-top: 12px !important; }
.cgpd-stats .elementor-icon-list-items { gap: 0 !important; display: inline-grid !important; grid-template-columns: repeat(2, auto); border: 1px solid rgba(157, 184, 255, .3); border-radius: 12px; overflow: hidden; background: rgba(12, 26, 46, .75); }
.cgpd-stats .elementor-icon-list-item { border: 0 !important; border-radius: 0 !important; background: none !important; padding: 12px 16px !important; }
.cgpd-stats .elementor-icon-list-item:nth-child(even) { border-left: 1px solid rgba(157, 184, 255, .2) !important; }
.cgpd-stats .elementor-icon-list-item:nth-child(n+3) { border-top: 1px solid rgba(157, 184, 255, .2) !important; }

/* Gleason machine tags inside the Bevel Gear Generation card */
.cgpd-machines { margin-top: 12px !important; }
.cgpd-machines .elementor-icon-list-items { display: grid !important; gap: 8px; }
.cgpd-machines .elementor-icon-list-item {
	margin: 0 !important;
	padding: 10px 14px !important;
	border-radius: 10px;
	background: var(--pd-navy);
}
.cgpd-machines .elementor-icon-list-item::after { display: none !important; }
.cgpd-machines .elementor-icon-list-icon svg { width: 13px !important; fill: var(--pd-ice) !important; }
.cgpd-machines .elementor-icon-list-text { padding-left: 10px !important; font: 500 13.5px/1.35 var(--pd-mono) !important; letter-spacing: .02em; color: #fff !important; }

/* Industries: labels + "also serve" chips on navy */
.cgpd-panel__title--dark .elementor-heading-title { color: var(--pd-ice) !important; }
.cgpd-panel__title--dark { margin-bottom: 14px !important; }
.cgpd-also-title { margin-top: 26px !important; }
.cgpd-tags--dark .elementor-icon-list-item { background: rgba(12, 26, 46, .6) !important; border-color: rgba(157, 184, 255, .22) !important; }
.cgpd-tags--dark .elementor-icon-list-item:hover { background: rgba(27, 63, 160, .45) !important; border-color: rgba(157, 184, 255, .5) !important; }
.cgpd-tags--dark .elementor-icon-list-item a { display: inline-flex; align-items: center; }
.cgpd-tags--dark .elementor-icon-list-icon svg { fill: var(--pd-ice) !important; }
.cgpd-tags--dark .elementor-icon-list-text { color: #DCE7FF !important; }

/* Troubleshooting case card */
.cgpd-case {
	margin-top: 24px !important;
	--padding-top: 26px !important; --padding-right: 28px !important; --padding-bottom: 26px !important; --padding-left: 28px !important;
	border-radius: 16px;
	background: radial-gradient(360px 220px at 100% 0%, rgba(53, 99, 224, .3), transparent 70%), var(--pd-navy) !important;
	gap: 0 !important;
}
.cgpd-case .cgpd-eyebrow .elementor-heading-title { color: var(--pd-ice) !important; }
.cgpd-case__title { margin-top: 10px !important; }
.cgpd-case__title .elementor-heading-title { font: 600 20px/1.3 var(--pd-head) !important; color: #fff !important; }
.cgpd-case .cgpd-text { margin-top: 10px !important; }
.cgpd-case .cgpd-text p { font-size: 15px; color: #B4C1D4; }

/* Two spec tables in one Text widget (Worm Gears) */
.cgpd-spec-widget--dual .cgpd-spec + .cgpd-spec { margin-top: 20px !important; }
.cgpd-spec caption {
	caption-side: top;
	padding: 16px 22px;
	background: var(--pd-accent);
	font: 600 16px/1.2 var(--pd-head);
	text-align: left;
	color: #fff;
}
/* Sub-headings between lists */
.cgpd-subhead { margin-top: 22px !important; }
.cgpd-subhead .elementor-heading-title { font: 600 17px/1.3 var(--pd-head) !important; color: var(--pd-ink) !important; }
.cgpd-subhead + .cgpd-checks { margin-top: 6px !important; }
/* Case card placed on a navy section */
.cgpd-case--light {
	margin-top: 28px !important;
	background: rgba(12, 26, 46, .7) !important;
	border: 1px solid rgba(157, 184, 255, .22);
	border-left: 3px solid var(--pd-ice);
}

/* ══════════════════════════════════════════════════════════════════════
   Interactive layer (product.js) — all product pages
   ══════════════════════════════════════════════════════════════════════ */

/* Hero with an animated technical drawing instead of a blended photo */
body.cg-product-page .cgpd-hero--art .elementor-widget.cg-hero-photo.cgpd-hero-art {
	top: 50%;
	bottom: auto;
	right: max(20px, calc((100% - 1200px) / 2));
	width: min(46%, 600px) !important;
	aspect-ratio: 540 / 420;
	transform: translateY(-50%);
	-webkit-mask-image: none;
	        mask-image: none;
}
body.cg-product-page .cgpd-hero--art .cgpd-hero-art img { opacity: 1; filter: drop-shadow(0 0 18px rgba(53, 99, 224, .35)); mix-blend-mode: normal; object-fit: contain; }
body.cg-product-page .cgpd-hero--art .elementor-widget.cgpd-hero-art::after { content: none; }
body.cg-product-page .cgpd-hero--art .cgh-hero__box > .elementor-widget:not(.cg-hero-photo) { max-width: 580px; }
@media (max-width: 1024px) {
	body.cg-product-page .cgpd-hero--art .elementor-widget.cg-hero-photo.cgpd-hero-art {
		position: relative !important; top: auto; right: auto; transform: none; width: 100% !important; max-width: 520px; margin: 28px auto 0 !important; order: 9;
	}
	body.cg-product-page .cgpd-hero--art .cgpd-hero-art :is(.elementor-widget-container, figure),
	body.cg-product-page .cgpd-hero--art .cgpd-hero-art img { position: relative !important; }
}

/* Animated technical drawing card (Image widget, class cgpd-drawing) */
.cgpd-drawing { margin-top: 28px !important; }
.cgpd-drawing img {
	display: block;
	width: 100% !important;
	height: auto !important;
	padding: 18px;
	border-radius: 18px !important;
	background:
		radial-gradient(360px 240px at 50% 40%, rgba(53, 99, 224, .25), transparent 70%),
		var(--pd-navy);
	box-shadow: 0 30px 60px -36px rgba(7, 17, 31, .7), 0 0 0 1px rgba(157, 184, 255, .18);
}

/* Tab switcher (spec tables, inspection lists) */
.cgpd-tabs {
	display: inline-flex;
	gap: 4px;
	padding: 5px;
	margin: 0 0 18px;
	border-radius: 12px;
	background: #E9EEF7;
	border: 1px solid var(--pd-line);
}
.cgpd-tabs__btn {
	padding: 11px 18px;
	border: 0;
	border-radius: 9px;
	background: transparent;
	font: 600 14px/1 var(--pd-head);
	color: var(--pd-body);
	cursor: pointer;
	transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.cgpd-tabs__btn:hover { color: var(--pd-ink); }
.cgpd-tabs__btn.is-active { background: #fff; color: var(--pd-accent); box-shadow: 0 6px 16px -10px rgba(12, 24, 37, .5); }
.cgpd-tabs__btn:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 2px; }
.cgpd-spec.is-tabbed caption { display: none; }
.cgpd-spec-widget--dual .cgpd-spec.is-tabbed + .cgpd-spec.is-tabbed { margin-top: 0 !important; }
.cgpd-tab-in { animation: cgpdTabIn .35s var(--pd-ease) both; }
@keyframes cgpdTabIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
[hidden].elementor-element, table[hidden] { display: none !important; }

/* Scroll reveal */
.cgpd-rv { opacity: 0; transform: translate3d(0, 26px, 0); transition: opacity .8s ease var(--rv, 0ms), transform .9s var(--pd-ease) var(--rv, 0ms); }
.cgpd-rv.is-in { opacity: 1; transform: none; }
.cgpd-card.cgpd-rv.is-in, .cgpd-reason.cgpd-rv.is-in { transition: transform .45s var(--pd-ease), box-shadow .45s ease, border-color .35s ease, opacity .8s ease !important; }
@media (prefers-reduced-motion: reduce) { .cgpd-rv { opacity: 1; transform: none; transition: none; } }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.cgpd-photo__img img { height: 360px !important; }
	body.cg-product-page .elementor-element.cgpd-cta { --padding-top: 40px !important; --padding-right: 32px !important; --padding-bottom: 40px !important; --padding-left: 32px !important; }
	.cgpd-proof:nth-child(2n) { border-right: 0; }
}
@media (max-width: 767px) {
	.cgpd-checks--2col .elementor-icon-list-items,
	.cgpd-industries .elementor-icon-list-items { grid-template-columns: 1fr; }
	.cgpd-panel { --padding-top: 24px !important; --padding-right: 20px !important; --padding-left: 20px !important; }
	.cgpd-spec th, .cgpd-spec td { padding: 14px 16px; }
	.cgpd-spec td:last-child { font-size: 15.5px; }
	.cgpd-photo { padding: 0 0 16px 16px !important; }
	.cgpd-photo__img img { height: 260px !important; }
	body.cg-product-page .elementor-element.cgpd-cta { --padding-top: 32px !important; --padding-right: 20px !important; --padding-bottom: 32px !important; --padding-left: 20px !important; border-radius: 18px; }
	.cgpd-btn { flex: 1 1 100%; }
	.cgpd-btn .elementor-button { width: 100%; justify-content: center; }
	.cgpd-proof__v .elementor-heading-title { font-size: 28px !important; }
	body.cg-product-page .cgpd-link .elementor-button { white-space: normal; text-align: left; }
	.cgpd-proof { --padding-left: 18px !important; --padding-right: 14px !important; }
}
@media (prefers-reduced-motion: reduce) {
	.cgpd-card, .cgpd-btn .elementor-button, .cgpd-card__icon .elementor-icon { transition: none !important; }
}