/**
 * catalog.css — Monument Catalog Structural Styles
 *
 * Pixel-accurate recreation of "EVA Granite Catalog" design.
 * Uses CSS custom properties from tokens.css with literal fallbacks.
 *
 * Design tokens:
 *   text #2c2c2c · accent #8B7355 (hover #7a6347) · bg #fafafa
 *   surface #fff · border #e0e0e0 · muted #6b6b6b
 *   max-width 1280px · card radius 8px · button radius 6px
 *
 * @package eva-granit
 */

/* ================================================================
   Layout: two-column catalog page
   ================================================================ */

.catalog-page {
    width: 100%;
    background: var(--color-bg, #fafafa);
}

.catalog-page__inner {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 32px;
    max-width: var(--max-width, 1280px);
    margin: 0 auto;
    padding: 24px var(--spacing-md, 1rem) 80px;
    align-items: start;
}

@media (max-width: 900px) {
    .catalog-page__inner {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   Catalog page header
   ================================================================ */

.catalog-page__header {
    grid-column: 1 / -1;
    padding: 12px 0 24px;
    margin-bottom: 8px;
}

.catalog-page__heading {
    font-family: var(--font-heading, 'PT Serif', serif);
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 8px;
    color: var(--color-text, #2c2c2c);
}

.catalog-page__count {
    font-size: 1rem;
    color: var(--color-text-muted, #6b6b6b);
    margin: 0;
}

.catalog-page__seo {
    margin: 4px 0 0;
    max-width: 760px;
    color: var(--color-text-muted, #6b6b6b);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* When the header is part of the grid, the sidebar + content sit below it.
   archive/taxonomy templates render header inside .catalog-page__content,
   so scope it there too. */
.catalog-page__content .catalog-page__header {
    grid-column: auto;
}

/* ================================================================
   Pagination
   ================================================================ */

.catalog-page__pagination {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.catalog-pagination {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.catalog-pagination__btn {
    min-width: 40px;
    height: 40px;
    padding: 0 10px;
    background: var(--color-surface, #fff);
    color: var(--color-text, #2c2c2c);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-md, 6px);
    font-family: var(--font-body, 'PT Sans', sans-serif);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-base, 0.2s ease), color .2s, border-color .2s;
}

.catalog-pagination__btn:hover:not(:disabled) {
    border-color: var(--color-accent, #8B7355);
    color: var(--color-accent, #8B7355);
}

.catalog-pagination__btn.is-active {
    background-color: var(--color-accent, #8B7355);
    border-color: var(--color-accent, #8B7355);
    color: #fff;
    cursor: default;
}

.catalog-pagination__btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.catalog-pagination__btn:focus-visible {
    outline: 2px solid var(--color-accent, #8B7355);
    outline-offset: 2px;
}

.catalog-pagination__btn--arrow {
    font-size: 1.1rem;
}

.catalog-pagination__ellipsis {
    padding: 0 4px;
    color: var(--color-text-muted, #999);
}

/* ================================================================
   Monument Grid — 4 columns desktop, 3 tablet, 2 mobile
   ================================================================ */

.monument-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    min-height: 200px;
    transition: opacity var(--transition-base, 0.2s ease);
}

.monument-grid.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

.monument-grid__empty {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--color-text-muted, #6b6b6b);
    padding: var(--spacing-xl, 3rem) 0;
    font-family: var(--font-body, 'PT Sans', sans-serif);
}

@media (max-width: 1024px) {
    .monument-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .monument-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================================================
   Monument Card
   ================================================================ */

.monument-card {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-card, 8px);
    overflow: hidden;
    transition: box-shadow var(--transition-base, 0.2s ease),
                transform var(--transition-base, 0.2s ease),
                border-color var(--transition-base, 0.2s ease);
}

.monument-card:hover {
    border-color: var(--color-accent, #8B7355);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

.monument-card__link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.monument-card__photo {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}

.monument-card__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: transform var(--transition-base, 0.3s ease);
}

.monument-card:hover .monument-card__img {
    transform: scale(1.04);
}

.monument-card__no-photo {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.8rem;
    font-family: var(--font-body, 'PT Sans', sans-serif);
}

/* Code badge — top-left, overlaid on the photo */
.monument-card__code {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 600;
    font-family: var(--font-body, 'PT Sans', sans-serif);
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 0.03em;
    z-index: 1;
}

.monument-card__body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.monument-card__title {
    font-family: var(--font-heading, 'PT Serif', serif);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-text, #2c2c2c);
    margin: 0 0 6px;
    line-height: 1.3;
}

.monument-card__size {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #6b6b6b);
    margin: 0 0 8px;
}

.monument-card__material {
    display: inline-block;
    align-self: flex-start;
    font-size: 0.6875rem;
    color: var(--color-text-muted, #6b6b6b);
    background: #f5f5f5;
    padding: 3px 8px;
    border-radius: 12px;
    margin-bottom: 10px;
}

.monument-card__price {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-accent, #8B7355);
    margin: auto 0 0;
}

/* ================================================================
   Filter Sidebar
   ================================================================ */

.filter-sidebar {
    background: var(--color-surface, #fff);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-card, 8px);
    padding: 28px 24px;
    position: sticky;
    top: var(--spacing-md, 24px);
}

.filter-sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: var(--spacing-sm, 0.5rem);
}

.filter-sidebar__title {
    font-family: var(--font-heading, 'PT Serif', serif);
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-text, #2c2c2c);
}

.filter-sidebar__clear {
    background: none;
    border: none;
    color: var(--color-text-muted, #6b6b6b);
    font-size: 0.8125rem;
    cursor: pointer;
    padding: 0;
    font-family: var(--font-body, 'PT Sans', sans-serif);
    transition: color var(--transition-base, 0.15s ease);
}

.filter-sidebar__clear:hover {
    color: var(--color-accent, #8B7355);
}

/* Filter groups */

.filter-group {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--color-border, #e0e0e0);
}

.filter-group:last-of-type,
.filter-group--search {
    /* search group keeps a divider; only visually-last facet drops it */
}

.filter-group__label {
    display: block;
    font-family: var(--font-body, 'PT Sans', sans-serif);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-text, #2c2c2c);
    margin: 0 0 16px;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: default;
}

.filter-group__label--icon {
    display:     flex;
    align-items: center;
    gap:         8px;
    flex-wrap:   wrap;
}
.filter-group__label-svg {
    width:    36px;
    height:   24px;
    flex-shrink: 0;
    opacity:  0.85;
}
.filter-group__label-sub {
    display:     block;
    width:       100%;
    font-size:   0.7rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color:       var(--color-muted, #6b6b6b);
    margin-top:  1px;
}

.filter-group--search .filter-group__label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 600;
    margin-bottom: 8px;
}

.filter-group__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-group__list--scroll {
    max-height: calc(5 * 38px);
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-border, #ddd) transparent;
}

.filter-group__swatch-dot {
    display:       inline-block;
    width:         12px;
    height:        12px;
    border-radius: 50%;
    margin-right:  6px;
    vertical-align: middle;
    flex-shrink:   0;
    border:        1px solid rgba(0,0,0,.15);
}

/* Custom checkbox — accent box with checkmark (design spec) */
.filter-group__checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-family: var(--font-body, 'PT Sans', sans-serif);
    font-size: 0.875rem;
    color: var(--color-text, #2c2c2c);
    user-select: none;
}

/* Visually hide the native checkbox but keep it accessible + JS-targetable */
.filter-group__checkbox {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.filter-group__checkbox-box {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border: 1.5px solid #d0d0d0;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: transparent;
    transition: background-color var(--transition-base, 0.15s ease),
                border-color var(--transition-base, 0.15s ease);
}

.filter-group__checkbox-box svg {
    opacity: 0;
    transition: opacity var(--transition-base, 0.15s ease);
}

.filter-group__checkbox:checked + .filter-group__checkbox-box {
    background: var(--color-accent, #8B7355);
    border-color: var(--color-accent, #8B7355);
}

.filter-group__checkbox:checked + .filter-group__checkbox-box svg {
    opacity: 1;
}

.filter-group__checkbox:focus-visible + .filter-group__checkbox-box {
    outline: 2px solid var(--color-accent, #8B7355);
    outline-offset: 2px;
}

.filter-group__checkbox-label:hover .filter-group__checkbox-box {
    border-color: var(--color-accent, #8B7355);
}

.filter-group__checkbox-text {
    flex: 1;
    transition: color var(--transition-base, 0.15s ease);
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.filter-group__hint {
    font-size: 0.72rem;
    color: var(--color-text-muted, #aaa);
    font-weight: 400;
    line-height: 1.3;
}

.filter-group__count {
    color: var(--color-text-muted, #aaa);
    font-size: 0.78rem;
}

/* ----------------------------------------------------------------
   Color swatches (granite_color) — pill with coloured dot
   ---------------------------------------------------------------- */

.filter-group__swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.filter-swatch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1.5px solid var(--color-border, #e0e0e0);
    cursor: pointer;
    user-select: none;
    transition: border-color var(--transition-base, 0.15s ease),
                background-color var(--transition-base, 0.15s ease);
}

.filter-swatch:hover {
    border-color: var(--color-accent, #8B7355);
}

.filter-swatch__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
}

.filter-swatch__dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.filter-swatch__label {
    font-size: 0.8125rem;
    color: var(--color-text-muted, #6b6b6b);
    transition: color var(--transition-base, 0.15s ease);
}

.filter-swatch:has(.filter-swatch__input:checked) {
    border-color: var(--color-accent, #8B7355);
    background: rgba(139, 115, 85, 0.06);
}

.filter-swatch:has(.filter-swatch__input:checked) .filter-swatch__label {
    color: var(--color-text, #2c2c2c);
}

.filter-swatch:has(.filter-swatch__input:focus-visible) {
    outline: 2px solid var(--color-accent, #8B7355);
    outline-offset: 2px;
}

/* Search field in sidebar */

.filter-group__search {
    width: 100%;
    box-sizing: border-box;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-md, 6px);
    font-family: var(--font-body, 'PT Sans', sans-serif);
    font-size: 0.9rem;
    color: var(--color-text, #2c2c2c);
    background: var(--color-surface, #fff);
    transition: border-color var(--transition-base, 0.15s ease),
                box-shadow var(--transition-base, 0.15s ease);
    appearance: none;
    -webkit-appearance: none;
}

.filter-group__search:focus {
    outline: none;
    border-color: var(--color-accent, #8B7355);
    box-shadow: 0 0 0 3px rgba(139, 115, 85, 0.15);
}

/* ================================================================
   Global Header Search Bar
   ================================================================ */

.site-search {
    display: flex;
    align-items: center;
    gap: 0;
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: var(--radius-md, 6px);
    overflow: hidden;
    background: var(--color-surface, #fff);
    transition: border-color var(--transition-base, 0.15s ease);
}

.site-search:focus-within {
    border-color: var(--color-accent, #8B7355);
}

.site-search__input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 0.4rem 0.75rem;
    font-family: var(--font-body, 'PT Sans', sans-serif);
    font-size: 0.9rem;
    color: var(--color-text, #2c2c2c);
    outline: none;
    min-width: 0;
    appearance: none;
    -webkit-appearance: none;
}

.site-search__input::placeholder {
    color: var(--color-text-muted, #aaa);
}

.site-search__submit {
    flex-shrink: 0;
    background: none;
    border: none;
    border-left: 1px solid var(--color-border, #e0e0e0);
    padding: 0.4rem 0.6rem;
    cursor: pointer;
    color: var(--color-text-muted, #6b6b6b);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition-base, 0.15s ease),
                background-color var(--transition-base, 0.15s ease);
}

.site-search__submit:hover {
    color: var(--color-accent, #8B7355);
    background-color: var(--color-bg, #f5f5f5);
}

/* Screen reader only utility (for label) */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ================================================================
   Sidebar CTA widget (Применить-style accent button)
   ================================================================ */

.filter-sidebar__cta {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border, #e0e0e0);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-xs, 0.4rem);
}

.filter-sidebar__cta-text {
    font-size: 0.85rem;
    color: var(--color-text, #2c2c2c);
    margin: 0;
    line-height: 1.4;
}

.filter-sidebar__cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 28px;
    background: var(--color-accent, #8B7355);
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-md, 6px);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-body, 'PT Sans', sans-serif);
    transition: background-color var(--transition-base, 0.2s ease);
}

.filter-sidebar__cta-btn:hover {
    background: var(--color-accent-dark, #7a6347);
}

.filter-sidebar__cta-note {
    font-size: 0.72rem;
    color: var(--color-text-muted, #999);
}

/* ================================================================
   Sidebar quick shape links
   ================================================================ */

.filter-sidebar__quick-links {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border, #e0e0e0);
}

.filter-sidebar__quick-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text, #2c2c2c);
    margin: 0 0 var(--spacing-xs, 0.5rem);
    font-family: var(--font-body, 'PT Sans', sans-serif);
}

.filter-sidebar__quick-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-sidebar__quick-link {
    display: block;
    padding: 4px 0;
    font-size: 0.875rem;
    color: var(--color-accent, #8B7355);
    text-decoration: none;
    font-family: var(--font-body, 'PT Sans', sans-serif);
    transition: color var(--transition-base, 0.15s ease);
}

.filter-sidebar__quick-link:hover {
    color: var(--color-accent-dark, #7a6347);
    text-decoration: underline;
}

/* ================================================================
   Filter header actions (reset + mobile close)
   ================================================================ */

.filter-sidebar__header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs, 0.5rem);
}

.filter-sidebar__mob-close {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-muted, #6b6b6b);
    padding: 4px;
    line-height: 1;
}

.filter-sidebar__mob-apply {
    display: none;
}

/* ================================================================
   Mobile filter bottom bar + overlay (hidden on desktop)
   ================================================================ */

.filter-mob-bar,
.filter-mob-overlay {
    display: none;
}

/* ================================================================
   Responsive adjustments
   ================================================================ */

@media (max-width: 900px) {
    /* Sidebar becomes off-canvas bottom drawer */
    .filter-sidebar {
        position:   fixed;
        bottom:     0;
        left:       0;
        right:      0;
        top:        auto;
        max-height: 88vh;
        overflow-y: auto;
        z-index:    1100;
        border-radius: 16px 16px 0 0;
        border-bottom: none;
        box-shadow: 0 -4px 32px rgba(0,0,0,.18);
        transform:  translateY(100%);
        transition: transform .32s cubic-bezier(.4,0,.2,1);
        padding:    24px;
        padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    }

    .filter-sidebar.is-open {
        transform: translateY(0);
    }

    /* Show close button and apply button on mobile */
    .filter-sidebar__mob-close { display: block; }
    .filter-sidebar__mob-apply {
        display:     block;
        margin-top:  16px;
        padding-top: 0;
    }

    .filter-sidebar__mob-apply-btn {
        display:         block;
        width:           100%;
        padding:         0.9rem;
        background:      var(--color-accent, #8B7355);
        color:           #fff;
        font-size:       1.05rem;
        font-weight:     700;
        border:          none;
        border-radius:   var(--radius-md, 6px);
        cursor:          pointer;
        font-family:     var(--font-body, 'PT Sans', sans-serif);
        text-align:      center;
        text-decoration: none;
        letter-spacing:  .02em;
        transition:      background .2s;
    }
    .filter-sidebar__mob-apply-btn:hover {
        background:      var(--color-accent-dark, #7a6347);
        color:           #fff;
    }

    .filter-sidebar__mob-apply-secondary {
        display:     block;
        width:       100%;
        padding:     0.65rem;
        margin-top:  8px;
        background:  transparent;
        color:       var(--color-text-muted, #6b6b6b);
        font-size:   0.875rem;
        border:      1px solid var(--color-border, #e0e0e0);
        border-radius: var(--radius-md, 6px);
        cursor:      pointer;
        font-family: var(--font-body, 'PT Sans', sans-serif);
        text-align:  center;
        transition:  border-color .2s, color .2s;
    }
    .filter-sidebar__mob-apply-secondary:hover {
        border-color: var(--color-text, #2c2c2c);
        color:        var(--color-text, #2c2c2c);
    }

    /* Hide quick links on mobile (save space) */
    .filter-sidebar__quick-links { display: none; }

    /* Backdrop overlay */
    .filter-mob-overlay {
        display:    none;
        position:   fixed;
        inset:      0;
        background: rgba(0,0,0,.45);
        z-index:    1050;
        opacity:    0;
        transition: opacity .28s;
    }
    .filter-mob-overlay.is-open {
        display: block;
        opacity: 1;
    }

    /* Mobile sticky bottom bar — full-width "Фильтры (N)" trigger */
    .filter-mob-bar {
        display:         flex;
        align-items:     center;
        justify-content: space-between;
        gap:             12px;
        position:        fixed;
        bottom:          0;
        left:            0;
        right:           0;
        z-index:         800;
        background:      var(--color-surface, #fff);
        border-top:      1px solid var(--color-border, #e0e0e0);
        box-shadow:      0 -2px 12px rgba(0,0,0,.1);
        padding:         12px 20px;
        padding-bottom:  calc(12px + env(safe-area-inset-bottom, 0px));
    }

    .filter-mob-bar__btn {
        display:       inline-flex;
        align-items:   center;
        justify-content: center;
        gap:           8px;
        flex:          1;
        padding:       12px 28px;
        background:    var(--color-text, #2c2c2c);
        color:         #fff;
        border:        none;
        border-radius: var(--radius-md, 6px);
        font-size:     0.875rem;
        font-weight:   600;
        font-family:   var(--font-body, 'PT Sans', sans-serif);
        cursor:        pointer;
        position:      relative;
        transition:    background .2s;
    }
    .filter-mob-bar__btn:hover { background: #1a1a1a; }

    .filter-mob-bar__badge {
        display:         inline-flex;
        align-items:     center;
        justify-content: center;
        background:      var(--color-accent, #8B7355);
        color:           #fff;
        font-size:       0.7rem;
        font-weight:     700;
        border-radius:   50%;
        min-width:       18px;
        height:          18px;
        padding:         0 4px;
        line-height:     1;
    }

    .filter-mob-bar__badge--hidden { display: none; }

    .filter-mob-bar__count {
        font-size:  0.85rem;
        color:      var(--color-text-muted, #6b6b6b);
        font-family: var(--font-body, 'PT Sans', sans-serif);
        white-space: nowrap;
    }

    /* Remove sidebar from grid flow (it's now off-canvas) and pad for bar */
    .catalog-page__inner {
        grid-template-columns: 1fr;
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }

    .catalog-page__heading {
        font-size: 1.6rem;
    }

    .monument-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .monument-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .monument-card__body { padding: 10px; }
    .monument-card__title { font-size: 0.8125rem; }
    .monument-card__size { font-size: 0.6875rem; }

    .catalog-page__heading {
        font-size: 1.5rem;
    }
}

/* ── Kromka (figured-edge) icon filter ─────────────────────────────── */
.filter-kromka__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.filter-kromka {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border: 1.5px solid var(--color-border, #e0e0e0);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color .2s, background .2s;
    text-align: center;
}
.filter-kromka:hover { border-color: var(--color-accent, #8B7355); }
.filter-kromka__input { position: absolute; opacity: 0; pointer-events: none; }
.filter-kromka__icon {
    width: 56px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
}
.filter-kromka__icon img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    mix-blend-mode: multiply;
}
.filter-kromka__label { font-size: 12px; font-weight: 600; color: var(--color-primary, #2c2c2c); line-height: 1.2; }
.filter-kromka:has(.filter-kromka__input:checked) {
    border-color: var(--color-accent, #8B7355);
    background: rgba(139,115,85,.08);
    box-shadow: inset 0 0 0 1px var(--color-accent, #8B7355);
}