/* Stable, platform-independent icon layer for the approved homepage reference. */

.kc-ref-tool__icon,
.kc-ref-doodle--paw,
.kc-ref-section-title > span,
.kc-ref-subtitle > span,
.kc-ref-hub-mini > span,
.kc-ref-seasonal__list a > span,
.kc-ref-pet-card__icon {
    color: transparent !important;
    font-size: 0 !important;
    line-height: 1;
}

.kc-ref-tool__icon::before,
.kc-ref-doodle--paw::before,
.kc-ref-section-title > span::before,
.kc-ref-subtitle > span::before,
.kc-ref-hub-mini > span::before,
.kc-ref-seasonal__list a > span::before,
.kc-ref-pet-card__icon::before {
    content: "";
    width: 1em;
    height: 1em;
    display: block;
    margin: auto;
    background: currentColor;
    -webkit-mask: var(--kc-icon) center / contain no-repeat;
    mask: var(--kc-icon) center / contain no-repeat;
}

.kc-ref-tool__icon {
    color: #8a5b4c !important;
}

.kc-ref-tool__icon::before {
    width: 32px;
    height: 32px;
}

.kc-ref-tool:nth-child(1) .kc-ref-tool__icon,
.kc-ref-hub-mini--food > span {
    --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M15.6 2.2c.1 1.4-.4 2.6-1.6 3.5-1 .8-2.1 1.1-3.4.9-.1-1.3.3-2.5 1.3-3.4 1-.9 2.2-1.3 3.7-1ZM18.8 8c-1.5-1.4-3.9-1.5-5.6-.5-.8.5-1.3.5-2.1 0-1.8-1-4.2-.8-5.7.7-2.9 2.8-1.5 8.6.6 11.6 1 1.5 2.1 3 3.7 2.9 1.4 0 2-.9 3.8-.9 1.7 0 2.3.9 3.8.9 1.6 0 2.5-1.4 3.5-2.9.7-1 1.1-2 1.4-3-3-.9-3.6-5.2-.5-6.9-.8-1.2-1.8-1.8-2.9-1.9Z'/%3E%3C/svg%3E");
}

.kc-ref-tool:nth-child(2) .kc-ref-tool__icon,
.kc-ref-hub-mini--plant > span {
    --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M20.7 3.3C14.5 3.5 9.5 5.5 6.6 9c-2.2 2.7-2.8 6.1-1.9 9.5l-2 2 1.4 1.4 2-2c3.4.9 6.8.3 9.5-1.9 3.5-2.9 5.5-7.9 5.7-14.1l-.6-.6ZM8 17.4c1.6-3.2 4.2-5.9 7.8-8.1-2.5 2.8-4.5 5.8-5.8 9-1 .1-1.7-.1-2-.9Z'/%3E%3C/svg%3E");
}

.kc-ref-tool:nth-child(3) .kc-ref-tool__icon {
    --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 2h14a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2Zm1 3v4h12V5H6Zm1 7a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm5 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm5 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3ZM7 17a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm5 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Zm5 0a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z'/%3E%3C/svg%3E");
}

.kc-ref-tool:nth-child(4) .kc-ref-tool__icon {
    --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 1 1 0 14 7 7 0 0 1 0-14Zm0 3a1 1 0 0 0-1 1v5.4l3.8 2.2 1-1.7-2.8-1.6V6a1 1 0 0 0-1-1Zm-8 14h16v3H4v-3Z'/%3E%3C/svg%3E");
}

.kc-ref-tool:nth-child(5) .kc-ref-tool__icon {
    --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 2h2v2h6V2h2v2h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2V2Zm12 7H5v11h14V9Zm-9 2h4v4h-4v-4Z'/%3E%3C/svg%3E");
}

.kc-ref-tool:nth-child(6) .kc-ref-tool__icon {
    --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a7 7 0 0 1 7 7v3.6l2 3.4v1H3v-1l2-3.4V9a7 7 0 0 1 7-7Zm-3 16h6a3 3 0 0 1-6 0Z'/%3E%3C/svg%3E");
}

.kc-ref-doodle--paw,
.kc-ref-section-title > span,
.kc-ref-subtitle > span,
.kc-ref-pet-card__icon {
    --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M8.3 10.3c-1.3.3-2.7-.9-3.1-2.6-.4-1.7.4-3.3 1.7-3.6 1.3-.3 2.7.9 3.1 2.6.4 1.7-.4 3.3-1.7 3.6Zm7.4 0c-1.3-.3-2.1-1.9-1.7-3.6.4-1.7 1.8-2.9 3.1-2.6 1.3.3 2.1 1.9 1.7 3.6-.4 1.7-1.8 2.9-3.1 2.6ZM5.9 15.1c-1 .6-2.5-.1-3.3-1.5-.8-1.4-.6-3 .4-3.6 1-.6 2.5.1 3.3 1.5.8 1.4.6 3-.4 3.6Zm12.2 0c-1-.6-1.2-2.2-.4-3.6.8-1.4 2.3-2.1 3.3-1.5 1 .6 1.2 2.2.4 3.6-.8 1.4-2.3 2.1-3.3 1.5ZM12 10.5c3.2 0 6.2 3.2 6.2 6.1 0 2.2-1.8 3.4-3.6 3.4-1 0-1.8-.4-2.6-.4s-1.6.4-2.6.4c-1.8 0-3.6-1.2-3.6-3.4 0-2.9 3-6.1 6.2-6.1Z'/%3E%3C/svg%3E");
    color: #e8755f !important;
}

.kc-ref-section-title > span::before,
.kc-ref-subtitle > span::before {
    width: 24px;
    height: 24px;
}

.kc-ref-pet-card__icon::before {
    width: 22px;
    height: 22px;
}

.kc-ref-hub-mini > span,
.kc-ref-seasonal__list a > span {
    color: #7b5a4e !important;
}

.kc-ref-hub-mini > span::before {
    width: 31px;
    height: 31px;
}

.kc-ref-seasonal__list a:nth-child(1) > span {
    --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 4a1 1 0 0 1-1-1V1h2v2a1 1 0 0 1-1 1Zm0 16a1 1 0 0 1 1 1v2h-2v-2a1 1 0 0 1 1-1ZM4 12a1 1 0 0 1-1 1H1v-2h2a1 1 0 0 1 1 1Zm16 0a1 1 0 0 1 1-1h2v2h-2a1 1 0 0 1-1-1ZM5.6 5.6 4.2 4.2 2.8 5.6 4.2 7l1.4-1.4Zm14.2 12.8-1.4 1.4-1.4-1.4 1.4-1.4 1.4 1.4ZM18.4 5.6 19.8 4.2l1.4 1.4L19.8 7l-1.4-1.4ZM4.2 17l1.4 1.4-1.4 1.4-1.4-1.4L4.2 17ZM12 6a6 6 0 1 1 0 12 6 6 0 0 1 0-12Z'/%3E%3C/svg%3E");
}

.kc-ref-seasonal__list a:nth-child(2) > span {
    --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M5 4h14l2 7v8a2 2 0 0 1-2 2h-1a2 2 0 0 1-2-2H8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-8l2-7Zm1.5 2L5 11h14l-1.5-5h-11ZM6 14a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm12 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z'/%3E%3C/svg%3E");
}

.kc-ref-seasonal__list a:nth-child(3) > span {
    --kc-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2 4 5v6c0 5.2 3.4 9.9 8 11 4.6-1.1 8-5.8 8-11V5l-8-3Zm-1 14-3-3 1.4-1.4 1.6 1.6 3.6-3.6L16 11l-5 5Z'/%3E%3C/svg%3E");
}

.kc-ref-seasonal__list a > span::before {
    width: 24px;
    height: 24px;
}

/* Keep the highlighted hub title and its trailing paw on one line. */
.kc-ref-subtitle--icon-end {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.kc-ref-subtitle--icon-end > span {
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .kc-ref-tool,
    .kc-ref-pet-card,
    .kc-ref-hub-mini,
    .kc-ref-seasonal__list a {
        transition: none !important;
    }
}