/* Explore category page — v2 overrides (layout in explore_page.css) */

.explore-page-v2 .prod-card__img .lazy-img,
.explore-page-v2 .prod-card__img img.prod-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.explore-page-v2 .prod-card__img .product-image-placeholder {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 2.5rem;
    background: var(--hzl-cream-warm);
    filter: none;
}

.explore-page-v2 .no-products-message {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
/* Category filter empty state */
#catNoMatches[hidden] {
    display: none !important;
}

/* KAN-251: gift-ideas copy under the grid. Same cream band as .cat-content, set small and in lighter ink than the
   product names above it so the grid stays the loudest thing on the page. The lead sentence always shows; the rest
   opens from a native <details>. Do not add display:none or visibility rules to the lead or body. */
.explore-page-v2 .cat-seo-note {
    background: var(--hzl-cream);
    padding: 8px 48px 40px;
}

.explore-page-v2 .cat-seo-note__heading {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.3;
    color: var(--hzl-maroon);
    margin: 0 0 6px;
}

.explore-page-v2 .cat-seo-note__lead,
.explore-page-v2 .cat-seo-note__body {
    font-family: var(--font-body);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgba(86, 16, 35, 0.72);
    max-width: 72ch;
    margin: 0;
}

.explore-page-v2 .cat-seo-note__more {
    max-width: 72ch;
}

.explore-page-v2 .cat-seo-note__toggle {
    display: inline-block;
    padding: 6px 0;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    color: var(--hzl-maroon);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
    list-style: none;
}

.explore-page-v2 .cat-seo-note__toggle::-webkit-details-marker {
    display: none;
}

.explore-page-v2 .cat-seo-note__toggle:focus-visible {
    outline: 2px solid var(--hzl-maroon);
    outline-offset: 2px;
}

/* The toggle label swaps with the open state; these two spans are the only parts of the block that are ever hidden. */
.explore-page-v2 .cat-seo-note__toggle-close,
.explore-page-v2 .cat-seo-note__more[open] .cat-seo-note__toggle-open {
    display: none;
}

.explore-page-v2 .cat-seo-note__more[open] .cat-seo-note__toggle-close {
    display: inline;
}

@media (max-width: 1080px) {
    .explore-page-v2 .cat-seo-note {
        padding: 4px 16px 28px;
    }

    .explore-page-v2 .cat-seo-note__heading {
        font-size: 0.8125rem;
    }

    .explore-page-v2 .cat-seo-note__lead,
    .explore-page-v2 .cat-seo-note__body,
    .explore-page-v2 .cat-seo-note__toggle {
        font-size: 0.75rem;
    }
}