.cat-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    @media (max-width: 991px) { .cat-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; } }
    @media (max-width: 575px) { .cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

    .ccat-card {
        background: #fff;
        border: 1px solid var(--c-outline-var);
        transition: border-color 0.2s, box-shadow 0.2s;
        display: flex; flex-direction: column; overflow: hidden;
    }
    .ccat-card:hover { border-color: var(--c-primary-light); box-shadow: 0 4px 24px rgba(127,86,33,0.1); }
    .ccat-img-wrap {
        display: block; position: relative; overflow: hidden;
        aspect-ratio: 1 / 1; background: var(--c-container-low);
    }
    .ccat-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
    .ccat-card:hover .ccat-img-wrap img { transform: scale(1.04); }
    .ccat-overlay {
        position: absolute; inset: 0;
        background: rgba(28,27,27,0.45);
        display: flex; align-items: center; justify-content: center;
        opacity: 0; transition: opacity 0.25s;
    }
    .ccat-overlay span {
        font-size: 11px; font-weight: 800; text-transform: uppercase;
        letter-spacing: 0.15em; color: #fff;
        border: 1px solid rgba(255,255,255,0.6); padding: 8px 18px;
    }
    .ccat-card:hover .ccat-overlay { opacity: 1; }
    .ccat-info { padding: 12px 14px 14px; flex: 1; display: flex; flex-direction: column; gap: 6px; }
    .ccat-name { font-size: 13px; font-weight: 600; margin: 0; line-height: 1.4; }
    .ccat-name a { color: var(--c-on-surface); text-decoration: none; }
    .ccat-name a:hover { color: var(--c-primary); }
    .ccat-meta { font-size: 11px; color: var(--c-on-var); line-height: 1.6; }
    .ccat-price {
        font-size: 15px; font-weight: 800; color: var(--c-on-surface);
        font-family: var(--font-serif); margin-top: auto;
    }
    .ccat-price-usd { font-size: 10px; font-weight: 400; color: var(--c-on-var); margin-left: 2px; }