/*
 * CoPacific Core — catalog UI (brand + product templates, hub grid, product cards, carousel, contact card).
 * Uses the child theme tokens (--cp-*) with hard fallbacks so the plugin also renders standalone.
 */

:where(.cp-catalog, .cp-hub, .cp-product-grid, .cp-marquee, .cp-contact-card) {
	--_navy: var(--cp-navy, #061a3a);
	--_blue: var(--cp-blue, #123e73);
	--_red: var(--cp-red, #e31b23);
	--_red-dark: var(--cp-red-dark, #bc1118);
	--_white: var(--cp-white, #fff);
	--_off: var(--cp-off-white, #f7f8fa);
	--_light: var(--cp-light, #eef2f7);
	--_gray: var(--cp-gray, #d9dee7);
	--_gray-2: var(--cp-gray-2, #8a94a6);
	--_text: var(--cp-text, #1d2430);
	--_muted: var(--cp-muted, #5f6b7a);
	--_r-sm: var(--cp-radius-sm, 12px);
	--_r-md: var(--cp-radius-md, 20px);
	--_r-lg: var(--cp-radius-lg, 32px);
	--_shadow: var(--cp-shadow, 0 18px 45px rgba(6, 26, 58, .10));
	--_shadow-soft: var(--cp-shadow-soft, 0 10px 28px rgba(6, 26, 58, .08));
	--_container: var(--cp-container, 1240px);
	--_ease: cubic-bezier(.2, .7, .2, 1);
}

/* Dark surfaces: adopt the child theme's context variables so its .cp-btn--ghost, .cp-eyebrow
   and focus styles switch to their light-on-dark variants (same list as the theme's dark surfaces). */
.cp-cat-hero,
.cp-cat-cta {
	--cp-fg: rgba(255, 255, 255, .86);
	--cp-fg-muted: rgba(255, 255, 255, .74);
	--cp-heading: #fff;
	--cp-link: #fff;
	--cp-link-hover: #fff;
	--cp-eyebrow-color: var(--cp-red-light, #ff6b71);
	--cp-contrast: var(--cp-navy, #061a3a);
	--cp-accent-soft: rgba(255, 107, 113, .16);
	--cp-focus: #fff;
	--cp-border: rgba(255, 255, 255, .16);
}

.cp-catalog {
	display: block;
	color: var(--_text);
	background: var(--_white);
	overflow-x: clip;
}
.cp-catalog *,
.cp-hub *,
.cp-product-grid * { box-sizing: border-box; }

.cp-wrap {
	width: 100%;
	/* content box = container width, so template content lines up with the theme header/footer */
	max-width: calc(var(--_container) + 2 * clamp(16px, 4vw, 32px));
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}

/* ---------- Shared typography & utilities ---------- */
:where(.cp-catalog, .cp-hub, .cp-product-grid) :where(h1, h2, h3, h4) {
	color: inherit;
	margin: 0;
	letter-spacing: -.02em;
}
.cp-h2 { font-size: clamp(1.8rem, 1.2rem + 1.9vw, 2.75rem); line-height: 1.12; font-weight: 700; letter-spacing: -.035em; margin: 0 0 .5em; }
.cp-h3 { font-size: clamp(1.2rem, 1rem + .6vw, 1.45rem); line-height: 1.25; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .6em; }
.cp-h4 { font-size: 1rem; line-height: 1.3; font-weight: 800; margin: 0 0 .75em; text-transform: uppercase; letter-spacing: .06em; }
.cp-text-muted { color: var(--_muted); }
.cp-catalog p { margin: 0 0 1em; }

.cp-eyebrow:not(.elementor-element) {
	display: inline-block;
	margin: 0 0 .9rem !important;
	font-size: .78rem;
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--_red);
}
.cp-eyebrow--light { color: var(--cp-eyebrow-color, #ff8a8f); }

.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}

.cp-icon { flex: none; width: 1.15em; height: 1.15em; }

.cp-catalog :focus-visible,
.cp-hub :focus-visible,
.cp-product-grid :focus-visible,
.cp-marquee :focus-visible,
.cp-contact-card :focus-visible {
	outline: 3px solid var(--cp-focus, var(--_red));
	outline-offset: 3px;
	border-radius: 6px;
}

/* Buttons — fallbacks only; the theme's .cp-btn rules win thanks to :where() (zero specificity). */
:where(.cp-btn:not(.elementor-element)) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	min-height: 48px;
	padding: .8em 1.4em;
	border-radius: 999px;
	border: 2px solid transparent;
	font-weight: 800;
	font-size: .98rem;
	line-height: 1.1;
	text-decoration: none;
	cursor: pointer;
	transition: transform .2s var(--_ease, ease), background-color .2s, color .2s, border-color .2s, box-shadow .2s;
}
:where(.cp-btn:not(.elementor-element)):hover { transform: translateY(-2px); }
:where(.cp-btn--primary:not(.elementor-element)) { background: var(--_red, #e31b23); color: #fff; box-shadow: 0 10px 24px rgba(227, 27, 35, .28); }
:where(.cp-btn--primary:not(.elementor-element)):hover, :where(.cp-btn--primary:not(.elementor-element)):focus-visible { background: var(--_red-dark, #bc1118); color: #fff; }
:where(.cp-btn--ghost:not(.elementor-element)) { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
:where(.cp-btn--ghost:not(.elementor-element)):hover { background: #fff; color: var(--_navy, #061a3a); }
:where(.cp-btn--navy:not(.elementor-element)) { background: var(--_navy, #061a3a); color: #fff; }
:where(.cp-btn--navy:not(.elementor-element)):hover { background: var(--_blue, #123e73); color: #fff; }
.cp-btn--outline {
	/* Theme .cp-btn reads these variables; the plain declarations are the standalone fallback. */
	--cp-btn-bg: #fff;
	--cp-btn-fg: var(--_navy);
	--cp-btn-bd: var(--_gray);
	--cp-btn-bg-hover: var(--_navy);
	--cp-btn-fg-hover: #fff;
	--cp-btn-bd-hover: var(--_navy);
	--cp-btn-shadow: none;
	--cp-btn-shadow-hover: var(--_shadow-soft);
}
.cp-btn--outline:not(.elementor-element) {
	background: #fff;
	color: var(--_navy);
	border: 2px solid var(--_gray);
}
.cp-btn--outline:not(.elementor-element):hover { border-color: var(--_navy); background: var(--_navy); color: #fff; }
.cp-actions:not(.elementor-element) { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* Stretched link: the whole card is one click target, one tab stop. */
.cp-stretched { color: inherit; text-decoration: none; }
.cp-stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }

/* ---------- Sections ---------- */
.cp-cat-section { padding-block: var(--cp-section-y, clamp(56px, 7vw, 96px)); }
.cp-cat-section--light { background: var(--_off); }
.cp-section-head:not(.elementor-element) { max-width: 760px; margin-bottom: 1.75rem; }
.cp-section-head--row { max-width: none; display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; }
.cp-section-head--row .cp-h2 { margin: 0; }
.cp-more-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 800; color: var(--_red); text-decoration: none; }
.cp-more-link:hover { color: var(--_red-dark); text-decoration: underline; }

/* ---------- Brand hero ---------- */
.cp-cat-hero {
	position: relative;
	color: #fff;
	background:
		radial-gradient(900px 420px at 85% -10%, rgba(227, 27, 35, .28), transparent 60%),
		radial-gradient(700px 380px at -10% 110%, rgba(18, 62, 115, .9), transparent 60%),
		linear-gradient(135deg, var(--_navy) 0%, #0a2550 55%, var(--_blue) 100%);
	padding-block: clamp(40px, 7vw, 96px) clamp(48px, 7vw, 104px);
	isolation: isolate;
	overflow: hidden;
}
/* Same depth treatment as the Elementor page heroes: fine blueprint grid fading out + red accent line */
.cp-cat-hero::before,
.cp-cat-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.cp-cat-hero::before {
	z-index: -1;
	background:
		linear-gradient(rgb(255 255 255 / 5%) 1px, transparent 1px) 0 0 / 32px 32px,
		linear-gradient(90deg, rgb(255 255 255 / 5%) 1px, transparent 1px) 0 0 / 32px 32px;
	-webkit-mask-image: radial-gradient(ellipse 70% 90% at 78% 30%, #000 0%, transparent 72%);
	mask-image: radial-gradient(ellipse 70% 90% at 78% 30%, #000 0%, transparent 72%);
}
.cp-cat-hero::after { top: auto; height: 4px; background: linear-gradient(90deg, var(--_red) 0 22%, transparent 22%); }
.cp-cat-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: clamp(24px, 4vw, 56px);
	align-items: center;
}
.cp-cat-hero__title {
	/* Same treatment as the Elementor page-hero H1s: sentence case, 700, tight tracking */
	font-size: var(--cp-hero-h1, clamp(2.25rem, 1.5rem + 2.6vw, 3.5rem));
	line-height: 1.06;
	font-weight: 700;
	letter-spacing: -.035em;
	text-transform: none;
	color: #fff !important;
	margin: 0 0 1rem !important;
	text-wrap: balance;
}
.cp-cat-hero__text { font-size: clamp(1.02rem, .95rem + .3vw, 1.18rem); line-height: 1.6; color: rgba(255, 255, 255, .86); max-width: 62ch; }
.cp-cat-hero__card {
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: var(--_r-lg);
	padding: clamp(18px, 3vw, 28px);
	backdrop-filter: blur(6px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.cp-cat-hero__logo {
	display: grid;
	place-items: center;
	background: #fff;
	border-radius: var(--_r-md);
	box-shadow: inset 0 0 0 1px rgb(6 26 58 / 7%), 0 12px 30px rgb(0 0 0 / 18%);
	aspect-ratio: 2 / 1;
	padding: clamp(16px, 3vw, 32px);
	margin-bottom: 1.1rem;
}
.cp-cat-hero__logo img, .cp-cat-hero__logo .cp-brand-logo { max-width: 76%; max-height: 92px; width: auto; height: auto; object-fit: contain; }
.cp-cat-hero__facts { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 0; }
.cp-cat-hero__facts > div { background: rgba(255, 255, 255, .07); border-radius: var(--_r-sm); padding: .75rem 1rem; }
.cp-cat-hero__facts-wide { grid-column: 1 / -1; }
.cp-cat-hero__facts dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255, 255, 255, .7); font-weight: 700; }
.cp-cat-hero__facts dd { margin: .2rem 0 0; font-weight: 800; font-size: 1.05rem; color: #fff; overflow-wrap: anywhere; }

/* ---------- Breadcrumbs ---------- */
.cp-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem .5rem; margin: 0 0 1.4rem; padding: 0; font-size: .88rem; }
.cp-breadcrumbs li { display: inline-flex; align-items: center; gap: .5rem; }
.cp-breadcrumbs li + li::before { content: "/"; opacity: .5; }
.cp-breadcrumbs a { color: inherit; opacity: .85; text-decoration: none; }
.cp-breadcrumbs a:hover { opacity: 1; text-decoration: underline; }
.cp-breadcrumbs [aria-current] { font-weight: 700; }
.cp-cat-hero .cp-breadcrumbs { color: rgba(255, 255, 255, .9); }

/* ---------- Toolbar: search + count + chips ---------- */
.cp-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.cp-search { flex: 1 1 340px; max-width: 640px; display: grid; gap: .45rem; margin: 0; }
.cp-search__label { font-size: .8rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--_muted); }
.cp-search__field { position: relative; display: block; }
.cp-search__field .cp-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); color: var(--_gray-2); pointer-events: none; }
.cp-search input[type="search"] {
	width: 100%;
	min-height: 56px;
	padding: .9rem 1.1rem .9rem 3.1rem;
	border: 2px solid var(--_gray);
	border-radius: 999px;
	background: #fff;
	color: var(--_text);
	font: inherit;
	font-size: 1rem;
	box-shadow: var(--_shadow-soft);
	transition: border-color .2s, box-shadow .2s;
}
.cp-search input[type="search"]::placeholder { color: var(--_gray-2); }
.cp-search input[type="search"]:focus { outline: none; border-color: var(--_blue); box-shadow: 0 0 0 4px rgba(18, 62, 115, .15); }
.cp-count { margin: 0; padding: .6rem 1rem; border-radius: 999px; background: var(--_light); color: var(--_muted); font-size: .92rem; white-space: nowrap; }
.cp-count strong { color: var(--_navy); font-size: 1.05rem; }

.cp-chips { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 1.75rem; }
.cp-chip:not(.elementor-element) {
	appearance: none;
	min-height: 44px;
	padding: .55rem 1.05rem;
	border-radius: 999px;
	border: 1.5px solid var(--_gray);
	background: #fff;
	color: var(--_text);
	font: inherit;
	font-size: .92rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.cp-chip:not(.elementor-element):hover { border-color: var(--_navy); }
.cp-chip[aria-pressed="true"] { background: var(--_navy); border-color: var(--_navy); color: #fff; }

.cp-empty { text-align: center; padding: 2.5rem 1.25rem; border: 2px dashed var(--_gray); border-radius: var(--_r-md); background: var(--_off); color: var(--_muted); }
.cp-empty strong { color: var(--_text); }
.cp-empty[hidden] { display: none; }

/* ---------- Product cards ---------- */
.cp-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: clamp(16px, 2vw, 24px);
}
.cp-product-grid--cols-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.cp-product-grid--cols-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.cp-pcard {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--_light);
	border-radius: var(--_r-md);
	box-shadow: var(--_shadow-soft);
	overflow: hidden;
	transition: transform .25s var(--_ease), box-shadow .25s var(--_ease), border-color .25s;
}
.cp-pcard[hidden] { display: none; }
.cp-pcard:hover, .cp-pcard:has(.cp-stretched:focus-visible) { transform: translateY(-4px); box-shadow: var(--_shadow); border-color: var(--_gray); }
.cp-pcard__media {
	/* --cp-media-bg = the photo's own border colour (sampled server-side), so the box blends with the photo */
	--_pad: 18px;
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--cp-media-bg, #f5f7fa);
	display: grid;
	place-items: center;
	padding: var(--_pad);
}
.cp-pcard__media img, .cp-pcard__media .cp-img {
	/* absolutely placed so every card keeps the same 4:3 media box whatever the image ratio */
	position: absolute;
	inset: var(--_pad);
	width: calc(100% - 2 * var(--_pad));
	height: calc(100% - 2 * var(--_pad));
	object-fit: contain;
	transition: transform .45s var(--_ease);
}
.cp-pcard:hover .cp-pcard__media img { transform: scale(1.035); }
.cp-badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	max-width: calc(100% - 24px);
	padding: .32rem .7rem;
	border-radius: 999px;
	background: var(--_navy);
	color: #fff;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.cp-pcard__body { display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.2rem 1.25rem; flex: 1; }
.cp-pcard__model { display: flex; flex-wrap: wrap; gap: .35rem .6rem; margin: 0 !important; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--_red); }
.cp-pcard__brand { color: var(--_navy); }
.cp-pcard__title { font-size: 1.05rem !important; line-height: 1.3 !important; font-weight: 800 !important; color: var(--_navy) !important; }
.cp-pcard__title a:hover { color: var(--_red); }
.cp-pcard__desc { margin: 0 !important; font-size: .92rem; line-height: 1.55; color: var(--_muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cp-pcard__parts { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: .25rem 0 0; padding: 0; }
.cp-pcard__parts li { padding: .22rem .55rem; border-radius: 6px; background: var(--_off); border: 1px solid var(--_light); font-size: .74rem; color: var(--_muted); }
.cp-pcard__cta { margin-top: auto; padding-top: .6rem; display: inline-flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 800; color: var(--_red); }
.cp-pcard:hover .cp-pcard__cta .cp-icon { transform: translateX(3px); }
.cp-pcard__cta .cp-icon { transition: transform .2s; }

.cp-img--placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: var(--_gray-2); }
.cp-img--placeholder svg { width: 64px; height: 64px; }

/* ---------- Hub: brand cards ---------- */
.cp-hub { color: var(--_text); }
.cp-brand-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
	gap: clamp(14px, 2vw, 22px);
}
.cp-brand-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid var(--_light);
	border-radius: var(--_r-md);
	box-shadow: var(--_shadow-soft);
	transition: transform .25s var(--_ease), box-shadow .25s, border-color .25s;
}
.cp-brand-card[hidden] { display: none; }
/* Red accent that grows along the top edge on hover / keyboard focus */
.cp-brand-card::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 18px;
	right: 18px;
	z-index: 2;
	height: 3px;
	border-radius: 0 0 3px 3px;
	background: var(--_red);
	transform: scaleX(0);
	transition: transform .3s var(--_ease);
}
.cp-brand-card:hover, .cp-brand-card:has(.cp-stretched:focus-visible) { transform: translateY(-4px); box-shadow: var(--_shadow); border-color: rgb(227 27 35 / 30%); }
.cp-brand-card:hover::before, .cp-brand-card:has(.cp-stretched:focus-visible)::before { transform: scaleX(1); }
/* Logos are white-background PNGs: a white plate with a hairline border makes them blend */
.cp-brand-card__logo { display: grid; place-items: center; height: 96px; padding: 14px 16px; border: 1px solid #e6ebf1; border-radius: var(--_r-sm); background: #fff; overflow: hidden; }
.cp-brand-card__logo img { max-width: 76%; max-height: 52px; width: auto; height: auto; object-fit: contain; transition: transform .35s var(--_ease); }
.cp-brand-card:hover .cp-brand-card__logo img { transform: scale(1.04); }
.cp-brand-card__cta .cp-icon { transition: transform .2s var(--_ease); }
.cp-brand-card:hover .cp-brand-card__cta .cp-icon { transform: translateX(3px); }
.cp-brand-logo--text { font-weight: 900; font-size: 1.3rem; color: var(--_navy); }
.cp-brand-card__name { font-size: 1.15rem !important; font-weight: 800 !important; color: var(--_navy) !important; margin: 0 0 .2rem !important; }
.cp-brand-card__line { margin: 0 0 .35rem !important; font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--_red); }
.cp-brand-card__desc { margin: 0 !important; font-size: .92rem; line-height: 1.5; color: var(--_muted); }
.cp-brand-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .8rem; border-top: 1px solid var(--_light); font-size: .85rem; }
.cp-brand-card__count { color: var(--_muted); font-weight: 600; }
.cp-brand-card__cta { display: inline-flex; align-items: center; gap: .3rem; color: var(--_red); font-weight: 800; }

.cp-hub__results { margin: 0 0 1.75rem; padding: 1.1rem; border-radius: var(--_r-md); background: var(--_off); border: 1px solid var(--_light); }
.cp-hub__results[hidden] { display: none; }
.cp-hub__results-title { margin: 0 0 .75rem; font-weight: 800; color: var(--_navy); }
.cp-hub__results-title span { color: var(--_muted); font-weight: 600; }
.cp-hub__results-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: .5rem; }
.cp-hub__results-list a {
	display: flex; flex-direction: column; gap: .1rem;
	padding: .7rem .9rem; border-radius: var(--_r-sm); background: #fff; border: 1px solid var(--_light);
	color: var(--_text); text-decoration: none; transition: border-color .2s, transform .2s;
}
.cp-hub__results-list a:hover { border-color: var(--_navy); transform: translateY(-1px); }
.cp-hub__results-list small { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--_red); }
.cp-hub__results-list strong { font-size: .95rem; color: var(--_navy); }
.cp-hub__results-more { grid-column: 1 / -1; font-size: .88rem; color: var(--_muted); padding: .25rem .25rem 0; }

/* ---------- Empty brand ---------- */
.cp-empty-brand { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.cp-card-surface { background: #fff; border: 1px solid var(--_light); border-radius: var(--_r-lg); box-shadow: var(--_shadow); padding: clamp(18px, 3vw, 36px); }
.cp-empty-brand .cp-contact-card { margin-top: 1.5rem; }

/* ---------- Checklist band ---------- */
.cp-checklist-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.cp-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.cp-steps-list__item { background: #fff; border-radius: var(--_r-md); padding: 1.25rem; box-shadow: var(--_shadow-soft); border: 1px solid var(--_light); }
.cp-steps-list__num { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(227, 27, 35, .1); color: var(--_red); font-weight: 900; margin-bottom: .75rem; }
.cp-steps-list__item h3 { font-size: 1.05rem !important; font-weight: 800 !important; color: var(--_navy) !important; margin: 0 0 .35rem !important; }
.cp-steps-list__item p { margin: 0 !important; color: var(--_muted); font-size: .92rem; line-height: 1.55; }

/* ---------- CTA band ---------- */
.cp-cat-cta { background: linear-gradient(120deg, var(--_navy), var(--_blue)); color: #fff; padding-block: clamp(40px, 6vw, 72px); position: relative; overflow: hidden; }
/* Full-bleed band: clean edge-to-edge (no side accent bar), matching the Elementor page bands */
.cp-cat-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cp-cat-cta__inner > div:first-child { max-width: 680px; }
.cp-cat-cta .cp-h2 { color: #fff; }
.cp-cat-cta p { color: rgba(255, 255, 255, .85); margin: 0; }
.cp-cat-cta .cp-actions { margin-top: 0; }

/* ---------- Product page ---------- */
.cp-prod-top { background: var(--_off); border-bottom: 1px solid var(--_light); padding-top: 1.1rem; color: var(--_muted); }
.cp-prod-top .cp-breadcrumbs ol { margin-bottom: 1rem; }
.cp-prod-top .cp-breadcrumbs [aria-current] { color: var(--_navy); }
.cp-prod-main { padding-top: clamp(28px, 4vw, 56px); }
.cp-prod-main__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: start; }

.cp-gallery { position: sticky; top: calc(var(--cp-header-height, 88px) + 16px); }
.cp-gallery__stage {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--_r-lg);
	background: var(--cp-media-bg, #f8fafc);
	border: 1px solid var(--_light);
	box-shadow: var(--_shadow-soft);
	overflow: hidden;
}
.cp-gallery__slide { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; padding: clamp(20px, 5vw, 48px); background: var(--cp-media-bg, transparent); }
.cp-gallery__slide[hidden] { display: none; }
.cp-gallery__slide img, .cp-gallery__slide .cp-img { width: 100%; height: 100%; object-fit: contain; }
.cp-gallery__stage .cp-badge { top: 18px; left: 18px; }
.cp-gallery__thumbs { display: flex; gap: .6rem; margin-top: .85rem; overflow-x: auto; padding: 4px 2px; scrollbar-width: thin; }
.cp-gallery__thumb {
	flex: none; width: 76px; height: 76px; padding: 6px;
	border-radius: var(--_r-sm); border: 2px solid var(--_light); background: var(--cp-media-bg, #fff); cursor: pointer;
	transition: border-color .2s;
}
.cp-gallery__thumb img { width: 100%; height: 100%; object-fit: contain; }
.cp-gallery__thumb[aria-pressed="true"] { border-color: var(--_red); }
.cp-gallery__thumb:hover { border-color: var(--_navy); }

.cp-prod-summary__brand { display: inline-flex; align-items: center; gap: .75rem; margin-bottom: 1rem; padding: .4rem .9rem .4rem .45rem; border-radius: 999px; border: 1px solid var(--_light); background: var(--_off); color: var(--_muted); font-size: .85rem; font-weight: 700; text-decoration: none; }
.cp-prod-summary__brand:hover { border-color: var(--_navy); color: var(--_navy); }
.cp-prod-summary__brand img, .cp-prod-summary__brand .cp-brand-logo { height: 30px; width: auto; max-width: 96px; object-fit: contain; background: #fff; border-radius: 999px; padding: 3px 8px; }
.cp-prod-summary__brand .cp-brand-logo--text { font-size: .85rem; }
.cp-prod-summary__title { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem) !important; line-height: 1.12 !important; font-weight: 700 !important; color: var(--_navy) !important; margin: 0 0 1.1rem !important; text-wrap: balance; }
.cp-prod-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.25rem; }
.cp-prod-meta > div { padding: .5rem .85rem; border-radius: var(--_r-sm); background: var(--_off); border: 1px solid var(--_light); }
.cp-prod-meta dt { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--_muted); }
.cp-prod-meta dd { margin: .1rem 0 0; font-weight: 800; color: var(--_navy); }
.cp-prod-summary__lead { font-size: 1.1rem; line-height: 1.6; color: var(--_text); }
.cp-prod-summary .cp-actions { margin-top: 1.25rem; }
.cp-prod-summary__call { display: flex; align-items: center; gap: .5rem; margin: 1rem 0 0 !important; color: var(--_muted); font-size: .95rem; }
.cp-prod-summary__call a { color: var(--_navy); font-weight: 800; }
.cp-prod-parts { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--_light); }
.cp-prod-parts .cp-h4 { color: var(--_navy); }
.cp-tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; }
.cp-tag-list li { padding: .45rem .8rem; border-radius: 999px; background: #fff; border: 1.5px solid var(--_gray); font-size: .88rem; font-weight: 600; color: var(--_text); }

.cp-prod-details__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.cp-prod-details__grid > :only-child { grid-column: 1 / -1; max-width: 860px; }
.cp-prose { font-size: 1.02rem; line-height: 1.7; color: var(--_text); }
.cp-prose p { margin: 0 0 1em; }
.cp-check-list { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; }
.cp-check-list li { display: flex; gap: .65rem; align-items: flex-start; line-height: 1.5; }
.cp-check-list .cp-icon { color: #fff; background: var(--_red); border-radius: 50%; padding: 3px; width: 22px; height: 22px; margin-top: 1px; }
.cp-note { margin-top: 1.5rem; padding: 1rem 1.15rem; border-left: 4px solid var(--_red); border-radius: 0 var(--_r-sm) var(--_r-sm) 0; background: #fff; font-size: .92rem; line-height: 1.55; color: var(--_muted); }
.cp-note strong { color: var(--_navy); }
.cp-spec-table { width: 100%; border-collapse: collapse; margin: 0; font-size: .95rem; }
.cp-spec-table th, .cp-spec-table td { text-align: left; vertical-align: top; padding: .7rem .8rem; border: 0; border-bottom: 1px solid var(--_light); }
.cp-spec-table th { width: 42%; font-weight: 700; color: var(--_muted); }
.cp-spec-table td { color: var(--_navy); font-weight: 600; overflow-wrap: anywhere; }
.cp-spec-table tr:nth-child(odd) { background: var(--_off); }
.cp-spec-download { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.1rem; font-weight: 800; color: var(--_red); text-decoration: none; }
.cp-spec-download:hover { text-decoration: underline; color: var(--_red-dark); }

.cp-prod-nav { display: flex; justify-content: space-between; gap: 1rem; padding-block: clamp(24px, 4vw, 40px) 0; }
.cp-prod-nav__link {
	display: flex; align-items: center; gap: .75rem; max-width: 48%;
	padding: .9rem 1.1rem; border-radius: var(--_r-md); border: 1px solid var(--_light); background: #fff; box-shadow: var(--_shadow-soft);
	color: var(--_navy); font-weight: 800; text-decoration: none; transition: transform .2s, border-color .2s;
}
.cp-prod-nav__link:hover { border-color: var(--_navy); transform: translateY(-2px); }
.cp-prod-nav__link small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--_red); }
.cp-prod-nav__link > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cp-prod-nav__link--next { margin-left: auto; text-align: right; }

/* ---------- Brand marquee ---------- */
.cp-marquee {
	--_gap: clamp(16px, 3vw, 32px);
	position: relative;
	overflow: hidden;
	padding-block: 8px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.cp-marquee__inner { display: flex; width: max-content; }
.cp-marquee__track {
	display: flex; align-items: center; gap: var(--_gap); margin: 0; padding: 0 var(--_gap) 0 0; list-style: none;
	animation: cp-marquee var(--cp-marquee-duration, 45s) linear infinite;
}
.cp-marquee:hover .cp-marquee__track, .cp-marquee:focus-within .cp-marquee__track { animation-play-state: paused; }
.cp-marquee__item a {
	display: grid; place-items: center; width: clamp(128px, 16vw, 176px); height: clamp(72px, 9vw, 92px); padding: 12px 18px;
	background: #fff; border: 1px solid var(--_light); border-radius: var(--_r-md); box-shadow: var(--_shadow-soft);
	transition: transform .2s, border-color .2s;
}
.cp-marquee__item a:hover { transform: translateY(-3px); border-color: var(--_gray); }
.cp-marquee__item img { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.cp-marquee__item a:hover img, .cp-marquee__item a:focus-visible img { filter: none; opacity: 1; }
@keyframes cp-marquee { to { transform: translateX(-100%); } }

/* ---------- Stats row ([cp_stats]) ---------- */
.cp-stats { display: flex; flex-wrap: wrap; gap: 14px 0; margin: 0; padding: 0; list-style: none; }
.cp-stats__item { display: grid; align-content: start; gap: 4px; min-width: 0; padding: 2px clamp(16px, 2.4vw, 28px); border-left: 1px solid var(--cp-border, rgba(6, 26, 58, .12)); }
.cp-stats__item:first-child { padding-left: 0; border-left: 0; }
.cp-stats__num { color: var(--cp-heading, var(--_navy)); font-size: clamp(1.45rem, 1.1rem + 1vw, 1.9rem); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.cp-stats__label { color: var(--cp-fg-muted, var(--_muted)); font-size: .74rem; font-weight: 600; line-height: 1.35; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 480px) {
	.cp-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cp-stats__item { padding-inline: 10px; }
	.cp-stats__label { font-size: .64rem; letter-spacing: .04em; }
}

/* ---------- Contact card ---------- */
.cp-contact-card { background: #fff; border: 1px solid var(--_light); border-radius: var(--_r-md); box-shadow: var(--_shadow-soft); padding: clamp(16px, 2.5vw, 26px); color: var(--_text); }
.cp-contact-card__title { margin: 0 0 1rem !important; font-weight: 900; font-size: 1.15rem; color: var(--_navy); }
.cp-contact-card__list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.cp-contact-card__row { display: flex; align-items: flex-start; gap: .8rem; line-height: 1.4; }
.cp-contact-card__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: rgba(227, 27, 35, .1); color: var(--_red); }
.cp-contact-card__label { display: block; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--_muted); }
.cp-contact-card a { color: var(--_navy); font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.cp-contact-card a:hover { color: var(--_red); text-decoration: underline; }
.cp-contact-card .cp-contact-card__map { margin-top: 1.1rem; color: #fff; }
.cp-contact-card .cp-contact-card__map:hover { color: #fff; text-decoration: none; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.cp-cat-hero__grid, .cp-prod-main__grid, .cp-prod-details__grid, .cp-checklist-band, .cp-empty-brand { grid-template-columns: minmax(0, 1fr); }
	.cp-cat-hero__card { max-width: 520px; }
	.cp-gallery { position: static; }
}
@media (max-width: 600px) {
	.cp-steps-list { grid-template-columns: minmax(0, 1fr); }
	.cp-toolbar { align-items: stretch; }
	.cp-count { align-self: flex-start; }
	.cp-chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * clamp(16px, 4vw, 32px)); padding-inline: clamp(16px, 4vw, 32px); padding-bottom: 4px; scrollbar-width: none; }
	.cp-chips::-webkit-scrollbar { display: none; }
	.cp-chip { flex: none; }
	.cp-actions .cp-btn { flex: 1 1 100%; }
	.cp-prod-nav { flex-direction: column; }
	.cp-prod-nav__link { max-width: none; }
	.cp-prod-nav__link--next { margin-left: 0; justify-content: flex-end; }
	.cp-spec-table th { width: 46%; }
}

@media (prefers-reduced-motion: reduce) {
	.cp-pcard, .cp-brand-card, .cp-pcard__media img, :where(.cp-btn:not(.elementor-element)), .cp-prod-nav__link, .cp-marquee__item a { transition: none !important; }
	.cp-pcard:hover, .cp-brand-card:hover, :where(.cp-btn:not(.elementor-element)):hover { transform: none; }
	.cp-pcard:hover .cp-pcard__media img, .cp-brand-card:hover .cp-brand-card__logo img, .cp-brand-card:hover .cp-brand-card__cta .cp-icon { transform: none; }
	.cp-brand-card::before { transition: none; }
	.cp-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.cp-marquee__track { animation: none; }
	.cp-marquee__track[aria-hidden="true"] { display: none; }
}

/* ---------- Guard against global theme button rules (button:hover/focus → navy pill) ---------- */
.cp-chips .cp-chip:is(:hover, :focus):not([aria-pressed="true"]) { background: #fff; color: var(--_text); border-color: var(--_navy); }
.cp-chips .cp-chip[aria-pressed="true"]:is(:hover, :focus) { background: var(--_navy); color: #fff; }
.cp-gallery .cp-gallery__thumb,
.cp-gallery .cp-gallery__thumb:is(:hover, :focus) { border-radius: var(--_r-sm); background: var(--cp-media-bg, #fff); color: inherit; }

/* ---------- Search results & 404 (templates/find.php) ---------- */
.cp-find-hero { padding-block: clamp(3rem, 7vw, 5.5rem); }
.cp-find-form { display: flex; gap: .75rem; max-width: 720px; margin-top: 1.75rem; flex-wrap: wrap; }
.cp-find-form input[type="search"] { flex: 1 1 260px; min-height: 54px; padding: 0 1.1rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: #fff; color: var(--cp-text, #1d2430); font-size: 1rem; }
.cp-find-form input[type="search"]:focus-visible { outline: 3px solid var(--cp-red, #e31b23); outline-offset: 2px; }
.cp-find-form .cp-btn { min-height: 54px; }
.cp-find-body { padding-block: clamp(2.5rem, 5vw, 4rem); }
.cp-find-group + .cp-find-group { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.cp-find-group > .cp-h2 { margin: 0 0 1.25rem; }
.cp-find-note { font-size: 1.05rem; color: var(--cp-muted, #5f6b7a); margin: 0 0 2rem; }
.cp-find-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cp-find-pages a { display: inline-flex; gap: .5rem; font-weight: 700; color: var(--cp-navy, #061a3a); }
.cp-find-pages a:hover { color: var(--cp-red, #e31b23); }
.cp-find-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1rem; }
.cp-find-link { display: flex; flex-direction: column; gap: .3rem; padding: 1.25rem 1.4rem; background: #fff; border: 1px solid var(--cp-gray, #d9dee7); border-radius: var(--cp-radius-md, 20px); box-shadow: var(--cp-shadow-soft); color: var(--cp-text, #1d2430); text-decoration: none; transition: transform .2s ease, border-color .2s ease; }
.cp-find-link strong { color: var(--cp-navy, #061a3a); font-size: 1.05rem; }
.cp-find-link span { color: var(--cp-muted, #5f6b7a); font-size: .95rem; }
.cp-find-link:hover, .cp-find-link:focus-visible { transform: translateY(-3px); border-color: var(--cp-red, #e31b23); }
@media (prefers-reduced-motion: reduce) { .cp-find-link { transition: none; } .cp-find-link:hover { transform: none; } }

/* Related brands: keep card width when only one or two brands share the category. */
.cp-related-brands .cp-find-links { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }