/* Spare Parts / Machine Maintenance widget (⑨). Grid + cards reuse .esp-cprod styles;
   this only styles the hero, quick-nav chips and section headings. */
.esp-spare { max-width: 1280px; margin: 0 auto; padding: 0 20px 56px; }

.esp-spare__hero {
    border-radius: 20px;
    background-color: var(--esp-cream, #fff9f2);
    color: #3a2015;
    padding: 48px 32px;
    text-align: center;
    margin: 24px 0 32px;
}
.esp-spare__hero[style*="background-image"] { color: #fff; }
.esp-spare__title { font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; margin: 0 0 12px; color: #fff; }
.esp-spare__sub   { font-size: clamp(15px, 1.3vw, 18px); line-height: 1.6; max-width: 720px; margin: 0 auto; color: #fff; opacity: .95; }

.esp-spare__nav {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px; margin: 0 0 36px;
}
.esp-spare__chip {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    background: #fff; border: 1px solid #e6dad4; border-radius: 999px;
    padding: 8px 16px; font-size: 14px; font-weight: 600;
    color: #522c25; text-decoration: none; transition: all .15s ease;
}
@media (max-width: 768px) { .esp-spare__nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.esp-spare__chip:hover { border-color: #8B3A00; color: #8B3A00; }
.esp-spare__chip span {
    background: #f2e9e3; color: #8B3A00; border-radius: 999px;
    padding: 1px 8px; font-size: 12px;
}

.esp-spare__section { margin: 0 0 44px; scroll-margin-top: 90px; }
.esp-spare__sec-title {
    position: relative;
    font-size: clamp(20px, 2vw, 26px); font-weight: 700; color: #3a2015;
    margin: 0 0 20px; padding-right: 16px;
}
.esp-spare__sec-title:before {
    content: ""; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
    width: 5px; height: 1.1em; border-radius: 3px; background-color: #8B3A00;
}

.esp-spare__empty {
    text-align: center; color: #8a6f63; padding: 48px 16px;
    background: var(--esp-cream, #fff9f2); border-radius: 16px;
}

@media (max-width: 600px) {
    .esp-spare__hero { padding: 36px 20px; }
    .esp-spare { padding: 0 14px 40px; }
}