/* =========================================================================
   Spare Parts Directory — frontend catalog
   Brand red: #b60e0a · Font: Roboto
   ========================================================================= */

.atf-sp-directory {
	--atf-sp-red: #b60e0a;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	color: #5b5b5b;
	font-size: 0.875rem; /* 14px */
	line-height: 1.5;
}

.atf-sp-directory * {
	box-sizing: border-box;
}

/* ---- Alphabet index --------------------------------------------------- */
.atf-sp-alphabet {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	max-width: 1140px;
	margin: 0 auto;
    padding: 0px 0px 155px;
}

.atf-sp-alphabet__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 37px;
	background: var(--atf-sp-red);
	border-radius: 0;
	color: #fff;
	font-size: 1.135rem !important; /* 18px */
	font-weight: 400;
	line-height: 1;
	text-decoration: none;
	transition: background-color .15s ease;
}

.atf-sp-alphabet__link:hover,
.atf-sp-alphabet__link:focus {
	background: #8d0b08;
	color: #fff;
}

.atf-sp-alphabet__link.is-empty {
	background: #e3a3a1;
	cursor: default;
	pointer-events: none;
}

/* ---- Letter groups / sections ----------------------------------------
   The <section> stays full-width (so the background spans the viewport),
   while its inner content is centered and capped at 1140px. */
.atf-sp-group {
	padding: 72px 0;
	scroll-margin-top: 20px;
}

/* Alternating sections carry the faded warehouse background.
   The actual background-image (with the upload URL) is injected at runtime
   via wp_add_inline_style() in directory.php, so it survives kses filtering. */

.atf-sp-group__heading {
	max-width: 1140px;
	margin: 0 auto 36px;
	padding: 0 clamp(16px, 4vw, 24px);
	text-align: center;
	font-size: 1.875rem !important; /* 30px */
	font-weight: 400;
	color: #4d4d4d;
	letter-spacing: .02em;
}

/* ---- Three-column parts grid ----------------------------------------- */
.atf-sp-group__items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: clamp(24px, 4vw, 56px);
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 clamp(16px, 4vw, 24px);
}

/* Each part = label/value grid with an aligned label column + dashed rule. */
.atf-sp-card {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 12px;
	row-gap: 4px;
	align-content: start;
	min-height: 150px;
	padding: 16px 0;
	border-bottom: 1px dashed #c4c4c4;
}

.atf-sp-card__label {
	color: var(--atf-sp-red);
	font-size: 1rem; /* 16px */
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.atf-sp-card__label--ref {
	color: #666666;
	font-size: 0.875rem; /* 14px */
}

.atf-sp-card__name {
	color: #444444;
	font-size: 1rem; /* 16px */
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .02em;
}

.atf-sp-card__name a {
	color: inherit;
	text-decoration: none;
}

.atf-sp-card__name a:hover {
	color: var(--atf-sp-red);
}

.atf-sp-card__refs {
	color: #666666;
	font-size: 0.875rem; /* 14px */
	font-weight: 400;
	line-height: 1.45;
	word-break: break-word;
}

.atf-sp-card__refs a {
	color: #666666;
	text-decoration: none;
}

.atf-sp-card__refs a:hover {
	color: var(--atf-sp-red);
}

.atf-sp-card__refs--empty {
	color: #b9bdc4;
}

/* ---- Empty state ------------------------------------------------------ */
.atf-sp-empty {
	padding: 40px clamp(16px, 4vw, 48px);
	text-align: center;
	color: #8a9099;
}

/* ---- Responsive ------------------------------------------------------- */
@media ( max-width: 900px ) {
	.atf-sp-group__items {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media ( max-width: 600px ) {
	.atf-sp-group__items {
		grid-template-columns: 1fr;
	}

	.atf-sp-group__heading {
		font-size: 1.375rem; /* 22px */
	}
}