:root {
    --cj-page-background-color: #faf9f4;
}

wa-page {
	background-color: var(--cj-page-background-color);
}

.cj-industrial-surface {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 12% 10%, color-mix(in oklab, var(--wa-color-brand-80) 28%, transparent) 0%, transparent 34%),
        radial-gradient(circle at 86% 82%, color-mix(in oklab, var(--wa-color-brand-70) 26%, transparent) 0%, transparent 32%),
        radial-gradient(circle at 78% 16%, color-mix(in oklab, var(--wa-color-brand-60) 22%, transparent) 0%, transparent 24%),
        radial-gradient(circle at 18% 84%, color-mix(in oklab, var(--wa-color-warning-50) 6%, transparent) 0%, transparent 20%),
        linear-gradient(
            145deg,
            color-mix(in oklab, var(--wa-color-brand-20) 56%, var(--wa-color-neutral-20)),
            color-mix(in oklab, var(--wa-color-brand-10) 62%, var(--wa-color-neutral-10))
        );
}

.cj-industrial-surface::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            color-mix(in oklab, black 12%, transparent),
            color-mix(in oklab, var(--wa-color-neutral-05) 58%, transparent)
        ),
        radial-gradient(circle at 20% 22%, color-mix(in oklab, var(--wa-color-brand-70) 16%, transparent) 0%, transparent 32%),
        radial-gradient(circle at 80% 72%, color-mix(in oklab, var(--wa-color-brand-80) 10%, transparent) 0%, transparent 28%);
    z-index: 0;
}

.cj-industrial-surface::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(color-mix(in oklab, var(--wa-color-brand-80) 14%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklab, var(--wa-color-brand-80) 14%, transparent) 1px, transparent 1px),
        linear-gradient(color-mix(in oklab, var(--wa-color-brand-60) 12%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in oklab, var(--wa-color-brand-60) 12%, transparent) 1px, transparent 1px);
    background-size:
        120px 120px,
        120px 120px,
        240px 240px,
        240px 240px;
    background-position:
        0 0,
        0 0,
        32px 32px,
        32px 32px;
    opacity: 0.2;
    z-index: 0;
}

.cj-industrial-surface > * {
    position: relative;
    z-index: 1;
}

.cj-catalog-card {
	height: 100%;
	width: 100%;
	transition: 150ms all;
}

.cj-catalog-card wa-card {
	height: 100%;
}

.cj-catalog-card:hover, .cj-catalog-card:focus {
	transform: scale(1.02);
}

.cj-catalog-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 768px) {
	.cj-catalog-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 992px) {
	.cj-catalog-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1200px) {
	.cj-catalog-grid {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.cj-bleed-section {
	margin-left: calc(var(--cj-main-inline-padding, var(--wa-space-3xl)) * -1);
	margin-right: calc(var(--cj-main-inline-padding, var(--wa-space-3xl)) * -1);
	padding-left: var(--cj-main-inline-padding, var(--wa-space-3xl));
	padding-right: var(--cj-main-inline-padding, var(--wa-space-3xl));
	padding-top: var(--wa-space-xl);
	padding-bottom: var(--wa-space-xl);
}

.cj-catalog-card-skeleton
{
	height: 300px;
}

@media (min-width: 992px)
{
	.cj-catalog-card-skeleton
	{
		height: 400px;
	}
}

wa-skeleton::part(indicator) {
	border-radius: var(--wa-border-radius-m);
	border: 1px solid var(--wa-color-neutral-border-normal);
}

wa-card::part(body) { 
	flex: 1; 
}

wa-details [slot='summary'].wa-flank {
	--flank-size: 12ch;
	inline-size: 100%;
	min-inline-size: 0;
}