/* Keep filtered catalogs in the same three-column card rhythm as the full catalog. */
.ot-catalog-grid {
    --ot-catalog-gap: 24px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Separate products without reintroducing a gray image frame. */
    gap: var(--ot-catalog-gap) !important;
}

/* Use a clean white field so card gaps and image edges do not read as gray frames. */
.ot-shop-page,
.ot-shop-page .ot-shop-catalog,
.ot-shop-page .ot-catalog-grid,
.ot-shop-page .ot-catalog-card {
    background: #fff !important;
    background-image: none !important;
}

.ot-shop-page .ot-shop-catalog {
    border-color: transparent !important;
    box-shadow: none !important;
}

body:not(.wp-admin) .ot-shop-page {
    background: #fff !important;
    background-image: none !important;
}

/* Use one square image frame instead of nested inset borders and padded image cards. */
.ot-catalog-card__image {
    aspect-ratio: 1 / 1;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    min-height: 0 !important;
    margin: -1px -1px 0 !important;
    overflow: hidden;
    padding: 0 !important;
    position: relative;
    width: calc(100% + 2px) !important;
}

.ot-catalog-card__image::after {
    display: none !important;
}

.ot-catalog-card__image img {
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    padding: 0 !important;
    width: 100% !important;
}

/* Do not interpolate a scaled raster image while a card is highlighted. */
.ot-catalog-card__image img {
    transition: none !important;
}

/* Make the active product unmistakable while keeping its image inside the card. */
@media (hover: hover) and (pointer: fine) {
    .ot-catalog-card:hover .ot-catalog-card__image img {
        filter: none !important;
        transform: none !important;
    }

    /* Highlight the whole product, without changing its image crop or layout. */
    .ot-catalog-card {
        transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 90ms ease-out, outline-color 90ms ease-out;
    }

    /* Override the slower page-entry animation only after this card is visible. */
    body.ot-motion-ready .ot-catalog-grid .ot-catalog-card.is-visible {
        transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 90ms ease-out, outline-color 90ms ease-out !important;
        transition-delay: 0s !important;
    }

    .ot-catalog-card:hover,
    .ot-catalog-card:focus-within {
        background: #fff7e7 !important;
        box-shadow: 0 26px 46px rgba(71, 49, 11, 0.27) !important;
        outline: 3px solid #b67a0b;
        outline-offset: -3px;
        transform: translateY(-8px) !important;
        z-index: 2;
    }

    .ot-catalog-card:hover .ot-catalog-card__body,
    .ot-catalog-card:focus-within .ot-catalog-card__body {
        background: #fff7e7 !important;
    }

    .ot-catalog-card:hover h2 a,
    .ot-catalog-card:focus-within h2 a {
        color: #9a6100 !important;
    }
}

.ot-catalog-card {
    border: 0 !important;
    box-shadow: none !important;
    position: relative;
}

@media (max-width: 1100px) {
    .ot-catalog-grid {
        --ot-catalog-gap: 20px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ot-catalog-card:not(:nth-child(odd)) {
        box-shadow: -10px 0 0 -9px #c18920 !important;
    }
}

@media (max-width: 760px) {
    .ot-catalog-grid {
        --ot-catalog-gap: 18px;
        grid-template-columns: 1fr;
    }

}