/* --------------------------------------------------------------------------
   Home Products
   -------------------------------------------------------------------------- */

.home-products__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(var(--home-products-cols, 3), minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .home-products__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .home-products__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home-products__item {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Home Cards
   -------------------------------------------------------------------------- */

.home-cards__grid {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(var(--home-cards-cols, 3), minmax(0, 1fr));
}

@media (max-width: 991.98px) {
    .home-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .home-cards__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.home-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: var(--border-radius);
    overflow: hidden;
    background: var(--card-bg, #fff);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.home-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.home-card__media {
    position: relative;
    overflow: hidden;
}

.home-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.home-card--overlay .home-card__media {
    min-height: 220px;
}

.home-card--overlay .home-card__image {
    min-height: 220px;
    aspect-ratio: auto;
}

.home-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0) 20%, rgba(15, 23, 42, 0.72) 100%);
}

.home-card__content {
    width: 100%;
    padding: 1.25rem;
    color: #fff;
}

.home-card__body {
    padding: 1.125rem 1.25rem 1.375rem;
}

.home-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.0625rem;
    line-height: 1.4;
    font-weight: 600;
}

.home-card--overlay .home-card__title {
    color: #fff;
}

.home-card--below .home-card__title {
    color: var(--text-color, #1f2937);
}

.home-card__desc {
    margin: 0 0 0.875rem;
    font-size: 0.875rem;
    line-height: 1.6;
}

.home-card--overlay .home-card__desc {
    color: rgba(255, 255, 255, 0.92);
}

.home-card--below .home-card__desc {
    color: var(--gray-500, #6b7280);
}

.home-card__btn {
    display: inline-block;
    margin-top: auto;
    padding: 0.4375rem 1rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.home-card__btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.home-card__btn--primary {
    background-color: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: #fff;
}

.home-card__btn--primary:hover {
    background-color: var(--primary-hover-color, var(--primary-color));
    border-color: var(--primary-hover-color, var(--primary-color));
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

@supports (background: color-mix(in srgb, #000 10%, #fff 90%)) {
    .home-card__btn--primary:hover {
        box-shadow: 0 4px 12px color-mix(in srgb, var(--primary-color) 35%, transparent);
    }
}

.home-card__btn--secondary {
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.95);
    color: #1f2937;
}

.home-card__btn--secondary:hover {
    background-color: var(--surface-color, #fff);
    border-color: var(--surface-color, #fff);
    color: #111827;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
}

.home-card__btn--outline {
    background-color: transparent;
    border: 1px solid currentColor;
    color: inherit;
}

.home-card--overlay .home-card__btn--outline {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.92);
}

.home-card--overlay .home-card__btn--outline:hover {
    background-color: var(--surface-color, #fff);
    border-color: var(--surface-color, #fff);
    color: #1f2937;
}

.home-card--below .home-card__btn--secondary {
    background-color: var(--surface-color, #fff);
    border-color: var(--gray-300, #d1d5db);
    color: var(--text-color, #1f2937);
}

.home-card--below .home-card__btn--secondary:hover {
    background-color: var(--gray-50, #f9fafb);
    border-color: var(--gray-400, #9ca3af);
    color: var(--text-color, #1f2937);
}

.home-card--below .home-card__btn--outline {
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.home-card--below .home-card__btn--outline:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

/* ============================================================
   宠物知识主题 (pet-knowledge) 定制样式
   ============================================================ */

.pet-theme-body {
    font-family: var(--font-family-base);
}

.site-header--pet {
    border-bottom: 3px solid var(--primary-color);
}

.pet-logo-icons {
    display: inline-flex;
    gap: 0.15rem;
    font-size: 1.35rem;
    line-height: 1;
}

.pet-logo-icon {
    display: inline-block;
    transition: transform 0.3s ease;
}

.site-header__brand:hover .pet-logo-icon:nth-child(1) { transform: rotate(-8deg) scale(1.1); }
.site-header__brand:hover .pet-logo-icon:nth-child(2) { transform: scale(1.15); }
.site-header__brand:hover .pet-logo-icon:nth-child(3) { transform: rotate(8deg) scale(1.1); }

.pet-header-decoration {
    background: linear-gradient(90deg, var(--primary-color) 0%, var(--secondary-color) 50%, var(--accent-color) 100%);
    padding: 0.2rem 0;
}

.pet-paw-prints {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    font-size: 0.75rem;
    opacity: 0.85;
}

.pet-paw-prints span {
    animation: petPawFloat 3s ease-in-out infinite;
}

.pet-paw-prints span:nth-child(2) { animation-delay: 0.4s; }
.pet-paw-prints span:nth-child(3) { animation-delay: 0.8s; }
.pet-paw-prints span:nth-child(4) { animation-delay: 1.2s; }
.pet-paw-prints span:nth-child(5) { animation-delay: 1.6s; }

@keyframes petPawFloat {
    0%, 100% { transform: translateY(0); opacity: 0.7; }
    50% { transform: translateY(-3px); opacity: 1; }
}

/* 首页欢迎横幅 */
.pet-hero {
    position: relative;
    background: linear-gradient(135deg, var(--gray-50, #f9fafb) 0%, var(--gray-100, #f3f4f6) 100%);
    padding: 3rem 0 4rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
}

@supports (background: color-mix(in srgb, #000 10%, #fff 90%)) {
    .pet-hero {
        background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 12%, transparent) 0%, color-mix(in srgb, var(--secondary-color) 12%, transparent) 50%, color-mix(in srgb, var(--accent-color) 15%, transparent) 100%);
    }
}

.pet-hero__inner {
    position: relative;
    z-index: 1;
}

.pet-hero__icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
}

.pet-hero__title {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--text-color, #2d3436);
    margin-bottom: 0.75rem;
}

.pet-hero__slogan {
    font-size: clamp(0.875rem, 2vw, 1.125rem);
    color: var(--gray-600, #6b7280);
    margin-bottom: 1.25rem;
}

.pet-hero__search,.pet-hero__hot-search {
    max-width: 640px;
    margin-bottom: 1rem;
}

.pet-hero__hot-search {
    margin-top: 0.75rem;
}

.home-search-hero__header {
    margin-bottom: 1.25rem;
}

.home-search-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.home-search-hero__bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.home-search-hero__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-search-hero__bg-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 249, 240, 0.82);
}

.home-search-hero--bg-image .home-search-hero__bg-overlay,
.home-search-hero--bg-video .home-search-hero__bg-overlay {
    background: rgba(15, 23, 42, 0.48);
}

.home-search-hero--bg-image .pet-hero__title,
.home-search-hero--bg-video .pet-hero__title,
.home-search-hero--bg-image .pet-hot-search__label,
.home-search-hero--bg-video .pet-hot-search__label,.home-search-hero--bg-image .pet-search-history__label,.home-search-hero--bg-video .pet-search-history__label{
    color: #fff;
}

.home-search-hero--bg-image .pet-hero__slogan,
.home-search-hero--bg-video .pet-hero__slogan {
    color: rgba(255, 255, 255, 0.88) !important;
}

.home-search-hero--bg-image .pet-hero__wave,
.home-search-hero--bg-video .pet-hero__wave {
    background: var(--background-color, #fff9f0);
}

.pet-hot-search--sidebar,
.pet-hot-search--page {
    justify-content: flex-start;
}

.pet-hot-search--sidebar .pet-hot-search__tags,
.pet-hot-search--page .pet-hot-search__tags {
    justify-content: flex-start;
}
.home-carousel--split {
    margin-top: 1.5rem !important;
}
.home-carousel{
    margin-bottom: 1.5rem !important;
}
/* 图标快速导航 */
.home-cards--icon-nav .home-cards__grid {
    gap: 1rem;
}

.home-cards--icon-nav .home-card {
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: var(--card-border-radius);
    background: var(--surface-color, #fff);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.home-cards--icon-nav .home-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
    border-color: var(--primary-color);
}

@supports (background: color-mix(in srgb, #000 10%, #fff 90%)) {
    .home-cards--icon-nav .home-card {
        border-color: color-mix(in srgb, var(--primary-color) 12%, transparent);
    }

    .home-cards--icon-nav .home-card:hover {
        box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-color) 12%, transparent);
        border-color: color-mix(in srgb, var(--primary-color) 28%, transparent);
    }
}

.home-cards--icon-nav .home-card__media {
    border-radius: var(--card-border-radius) var(--card-border-radius) 0 0;
}

.home-cards--icon-nav .home-card__placeholder {
    aspect-ratio: 1;
    min-height: 0;
}

.home-cards--icon-nav .home-card__emoji {
    font-size: clamp(2rem, 4vw, 3rem);
}

.home-cards--icon-nav .home-card__body {
    padding: 1rem;
    text-align: center;
}

.home-cards--icon-nav .home-card__title {
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.home-cards--icon-nav .home-card__desc {
    font-size: 0.8125rem;
    color: var(--gray-600, #6b7280);
    margin-bottom: 0.75rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-cards--icon-nav .home-card__btn {
    font-size: 0.8125rem;
    padding: 0.35rem 1rem;
    border-radius: 2rem;
}

.home-card--link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.home-card--link:hover {
    color: inherit;
}

.home-card--link .home-card__btn-hint {
    pointer-events: none;
}

/* 搜索分类筛选 */
.search-category-filter {
    margin-top: 1rem;
    text-align: left;
}

.search-category-filter__label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
}

.page-hero--search .search-category-filter__label {
    color: var(--text-color, #2d3436);
}

.search-category-filter__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.search-category-filter__tag {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    font-size: 0.8125rem;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.page-hero--search .search-category-filter__tag {
    background: var(--gray-50, #f9fafb);
    color: var(--text-color, #2d3436);
}

@supports (background: color-mix(in srgb, #000 10%, #fff 90%)) {
    .page-hero--search .search-category-filter__tag {
        background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    }
}

.search-category-filter__tag:hover,
.search-category-filter__tag.is-active {
    background: var(--primary-color);
    color: #fff;
}

/* 页脚工具链接 */
.footer-tools-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-tools-strip__label {
    font-size: 0.8125rem;
    font-weight: 600;
    opacity: 0.85;
}

.footer-tools-strip__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.footer-tools-strip__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
    color: inherit;
    text-decoration: none;
    opacity: 0.9;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.footer-tools-strip__link:hover {
    opacity: 1;
    color: var(--primary-color);
}

/* 侧栏热门文章 */
.hot-post-item__link {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: 0.35rem 0.5rem;
    align-items: start;
}

.hot-post-item__icon {
    font-size: 1.1rem;
    line-height: 1.4;
}

/* 首页移动端布局微调 */
@media (max-width: 991.98px) {
    .pet-hero {
        padding: 2rem 0 3rem;
    }

    .pet-hero__icons {
        font-size: 2rem;
    }

    .home-cards--icon-nav .home-cards__grid {
        --home-cards-cols: 2 !important;
    }

    .pet-paw-prints {
        gap: 0.75rem;
    }
}

.pet-hero__wave {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 24px;
    background: var(--background-color, #fff9f0);
    clip-path: ellipse(55% 100% at 50% 100%);
}

.pet-bounce {
    display: inline-block;
    animation: petBounce 2s ease-in-out infinite;
}

.pet-bounce--delay { animation-delay: 0.3s; }
.pet-bounce--delay-2 { animation-delay: 0.6s; }

@keyframes petBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.home-card--placeholder .home-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 16 / 10;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
}

.home-card__emoji {
    font-size: clamp(2.5rem, 6vw, 4rem);
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15));
}

.pet-post-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pet-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

@supports (background: color-mix(in srgb, #000 10%, #fff 90%)) {
    .pet-post-card:hover {
        box-shadow: 0 8px 24px color-mix(in srgb, var(--primary-color) 15%, transparent);
    }
}

.post-card__cover--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--gray-100, #f3f4f6) 0%, var(--gray-200, #e5e7eb) 100%);
    min-height: 180px;
}

@supports (background: color-mix(in srgb, #000 10%, #fff 90%)) {
    .post-card__cover--placeholder {
        background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color) 15%, transparent) 0%, color-mix(in srgb, var(--secondary-color) 15%, transparent) 100%);
    }
}

.post-card__cover-emoji {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
}

.pet-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.65rem;
    background: var(--gray-50, #f9fafb);
    border-radius: 2rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--primary-color) !important;
    text-decoration: none;
    transition: background 0.2s;
}

.pet-badge:hover {
    background: var(--gray-100, #f3f4f6);
    color: var(--primary-color) !important;
}

@supports (background: color-mix(in srgb, #000 10%, #fff 90%)) {
    .pet-badge {
        background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    }

    .pet-badge:hover {
        background: color-mix(in srgb, var(--primary-color) 20%, transparent);
    }
}

.pet-type-cat .post-card__cover--placeholder { background: linear-gradient(135deg, #ffeaa7 0%, #fab1a0 100%); }
.pet-type-dog .post-card__cover--placeholder { background: linear-gradient(135deg, #81ecec 0%, #74b9ff 100%); }
.pet-type-bird .post-card__cover--placeholder { background: linear-gradient(135deg, #a29bfe 0%, #fd79a8 100%); }
.pet-type-fish .post-card__cover--placeholder { background: linear-gradient(135deg, #55efc4 0%, #0984e3 100%); }
.pet-type-rabbit .post-card__cover--placeholder { background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%); }
.pet-type-hamster .post-card__cover--placeholder { background: linear-gradient(135deg, #fab1a0 0%, #e17055 100%); }
.pet-type-turtle .post-card__cover--placeholder { background: linear-gradient(135deg, #55efc4 0%, #00b894 100%); }

.pet-tip-card {
    background: linear-gradient(135deg, rgba(255, 230, 109, 0.3) 0%, var(--gray-50, #f9fafb) 100%);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: var(--card-border-radius);
    padding: 1.25rem;
}

@supports (background: color-mix(in srgb, #000 10%, #fff 90%)) {
    .pet-tip-card {
        background: linear-gradient(135deg, rgba(255, 230, 109, 0.3) 0%, color-mix(in srgb, var(--secondary-color) 15%, transparent) 100%);
        border-color: color-mix(in srgb, var(--primary-color) 15%, transparent);
    }
}

.pet-tip-card__icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.pet-tip-card__title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--text-color, #2d3436);
}

.pet-tip-card__text {
    font-size: 0.875rem;
    color: var(--gray-600, #6b7280);
    line-height: 1.6;
}

.recent-post-item__link {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.5rem;
    align-items: start;
}

.recent-post-item__icon {
    grid-row: span 2;
    font-size: 1.25rem;
    line-height: 1.4;
}

.category-item__icon {
    margin-right: 0.35rem;
}

.pet-tag {
    border-radius: 2rem !important;
}

.tag-cloud__item.pet-tag:hover {
    background: var(--primary-color);
    color: #fff;
}

.error-page--pet .error-page__pet-icon {
    font-size: clamp(2rem, 5vw, 3rem);
    margin-bottom: 0.5rem;
}

.error-page--pet .error-page__code {
    color: var(--primary-color);
}


.home-cards .section-header__title::before {
    content: '';
}

/* 精选品种横向滚动 — 已迁移至 scroll-cards 小部件（07-components.css） */

.section-header--inline {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

/* 健康工具 */
.pet-seasonal-tip {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.15rem;
    border-radius: var(--card-border-radius);
    background: var(--surface-color, var(--card-bg, #fff));
    border: 1px solid var(--gray-200, #e5e7eb);
}

@supports (background: color-mix(in srgb, #000 10%, #fff 90%)) {
    .pet-seasonal-tip {
        background: color-mix(in srgb, var(--accent-color) 18%, var(--surface-color, var(--card-bg, #fff)) 82%);
        border-color: color-mix(in srgb, var(--primary-color) 14%, transparent);
    }
}

.pet-seasonal-tip__icon {
    font-size: 1.5rem;
    line-height: 1;
}

.pet-seasonal-tip__label {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-color, #2d3436);
}

.pet-seasonal-tip__text {
    font-size: 0.875rem;
    color: var(--text-muted, var(--gray-600, #6b7280));
}

.pet-health-tools {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 0.75rem;
}

.pet-health-tool,
a.pet-health-tool {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.85rem 0.5rem;
    border-radius: var(--card-border-radius);
    background-color: #ffffff;
    background-color: var(--card-bg, #ffffff);
    border: 1px solid rgba(15, 23, 42, 0.08);
    text-decoration: none;
    color: var(--text-color);
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

@supports (background: color-mix(in srgb, #000 10%, #fff 90%)) {
    .pet-health-tool,
    a.pet-health-tool {
        background: color-mix(in srgb, var(--primary-color) 10%, var(--card-bg, #fff) 90%);
        border-color: color-mix(in srgb, var(--primary-color) 14%, transparent);
    }
}

.pet-health-tool:hover,
a.pet-health-tool:hover {
    transform: translateY(-2px);
    background-color: #ffffff;
    background-color: var(--card-bg, #ffffff);
    border-color: rgba(15, 23, 42, 0.14);
    color: var(--text-color);
}

@supports (background: color-mix(in srgb, #000 10%, #fff 90%)) {
    .pet-health-tool:hover,
    a.pet-health-tool:hover {
        border-color: color-mix(in srgb, var(--primary-color) 30%, transparent);
        background: color-mix(in srgb, var(--primary-color) 16%, var(--card-bg, #fff) 84%);
    }
}

.pet-health-tool__icon {
    font-size: 1.5rem;
    line-height: 1;
}

.pet-health-tool__title {
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    color: var(--text-color);
}

.pet-health-tool--hub,
a.pet-health-tool--hub {
    border-style: dashed;
    background-color: #ffffff;
    background-color: var(--card-bg, #ffffff);
}

.pet-health-tool--compare,
a.pet-health-tool--compare {
    background-color: #ffffff;
    background-color: var(--card-bg, #ffffff);
}

@supports (background: color-mix(in srgb, #000 10%, #fff 90%)) {
    .pet-health-tool--hub,
    a.pet-health-tool--hub {
        background: color-mix(in srgb, var(--primary-color) 14%, var(--card-bg, #fff) 86%);
    }

    .pet-health-tool--compare,
    a.pet-health-tool--compare {
        background: color-mix(in srgb, var(--secondary-color) 12%, var(--card-bg, #fff) 88%);
        border-color: color-mix(in srgb, var(--secondary-color) 22%, transparent);
    }

    .pet-health-tool--hub:hover,
    .pet-health-tool--compare:hover,
    a.pet-health-tool--hub:hover,
    a.pet-health-tool--compare:hover {
        border-color: color-mix(in srgb, var(--primary-color) 35%, transparent);
    }
}

.home-card__count {
    font-size: 0.8125rem;
}


@media (max-width: 767.98px) {
    .pet-health-tools {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0.5rem;
    }

    .pet-health-tool,
    a.pet-health-tool {
        padding: 0.7rem 0.25rem;
    }

    .pet-health-tool__title {
        font-size: 0.75rem;
    }
}

/* 晒宠专区 */

/* --------------------------------------------------------------------------
   Home Carousel
   -------------------------------------------------------------------------- */

.home-carousel--split,
.home-carousel--split .carousel-split,
.home-carousel--split .carousel-split__container {
    width: 100%;
}

/* Home widget areas */
.home-page__layout{
    margin-top: 0rem;
}
.home-widget-area {
    padding-top: 0rem;
    padding-bottom: 1.5rem;
}

.home-widget-area--home-top-fullwidth,
.home-widget-area--home-bottom-fullwidth {
    padding-top: 0;
    padding-bottom: 0;
}
.home-widget-area--home-top-fullwidth .widget-home-section{
    margin-bottom: 2.5rem;
}
.widget-home-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

.widget-home-section__inner > .widget,
.home-widget-area--home-top-fullwidth .home-widget-area__item--plain > .widget,
.home-widget-area--home-bottom-fullwidth .home-widget-area__item--plain > .widget {
    margin-bottom: 0 !important;
}

.home-widget-area__item {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.home-widget-area__item--plain {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

.home-widget-area__item > .widget {
    margin-bottom: 0 !important;
}

.home-widget-area--home-top-fullwidth .widget-home-section:first-child,
.home-widget-area--home-bottom-fullwidth .widget-home-section:first-child {
    padding-top: 2.5rem;
}

.home-widget-area--home-bottom-fullwidth .widget-home-section:last-child,
.home-widget-area--home-top-fullwidth .widget-home-section:last-child {
    padding-bottom: 2.5rem;
}

.home-widget-area--home-top-fullwidth .widget:last-child,
.home-widget-area--home-bottom-fullwidth .widget:last-child {
    margin-bottom: 0 !important;
}
.home-page__container {
    /* padding-top: 0.5rem; */
    /* padding-bottom: 2rem; */
}

.home-page__sidebar .widget,
.home-page__sidebar .sidebar-widget {
    margin-bottom: 1rem;
}

@media (max-width: 991.98px) {
    .home-page__sidebar {
        margin-top: 0.5rem;
    }
   .carousel-slider{
    margin-bottom: 1rem;
   }
    .home-carousel {
        margin-bottom: .5rem !important;
    }
    .sidebar, .widget-area.sidebar-widgets{
        gap: 0rem;
    }


    .home-page__sidebar .widget,
    .home-page__sidebar .sidebar-widget {
        margin-bottom: 0rem;
    }
    
}

/* Ultra-narrow screens (<380px): force single-column for home grids */
@media (max-width: 379.98px) {
    .home-products__grid,
    .home-cards__grid {
        grid-template-columns: 1fr !important;
    }

    .pet-health-tools {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .home-carousel {
        margin-bottom: 1.25rem !important;
    }

    .pet-hero__title {
        font-size: 1.25rem;
    }

    .pet-hero__desc {
        font-size: 0.8125rem;
    }
}