/* Shared catalogue and related-product cards: image proportions never set row height. */
.pro-box > .pro-box-ul {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: 1fr;
    gap: 32px 24px;
    margin-bottom: 40px;
}

.pro-related > .pro-box-ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.pro-box > .pro-box-ul > li {
    width: auto;
    min-width: 0;
    margin: 0;
}

.pro-box > .pro-box-ul > li > a {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    background: #fff;
}

.pro-box > .pro-box-ul > li .pic {
    position: relative;
    flex: none;
    width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0;
    overflow: hidden;
    background: #fff;
}

.pro-box > .pro-box-ul > li .pic img {
    position: absolute;
    inset: 12%;
    width: 76%;
    height: 76%;
    object-fit: contain;
    object-position: center;
}

/* These tightly cropped faucets need extra space to match the 120101/120102
   images, whose source files already include white margins. */
.pro-box > .pro-box-ul > li .pic img[src*="/120201"],
.pro-box > .pro-box-ul > li .pic img[src*="/120202"] {
    inset: 21.5%;
    width: 57%;
    height: 57%;
}

.pro-box > .pro-box-ul > li:hover .pic img {
    transform: scale(1.03);
}

.pro-box > .pro-box-ul > li .txt {
    flex: 1;
    min-height: 116px;
    padding: 8px 24px 24px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.pro-box > .pro-box-ul > li .txt span {
    margin-top: 8px;
    line-height: 1.4;
}

.pro-box > .pro-box-ul > .product-catalog__empty {
    grid-column: 1 / -1;
}

/* Keep stone samples cropped consistently inside the same padded square frame. */
.pro-box > .pro-box-ul > li[data-product-category="24"] .pic img {
    top: 18.333333%;
    height: 63.333333%;
    object-fit: cover;
}

.product-back {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 10px;
    min-height: 44px;
    margin-bottom: 24px;
    padding: 10px 18px;
    border: 1px solid #c9c9c5;
    background: #fff;
    color: #333;
    font-size: 16px;
    line-height: 1.4;
    transition: background-color 180ms ease, border-color 180ms ease;
}

.product-back:hover {
    border-color: #333;
    background: #eeefeb;
}

.product-back:focus-visible {
    outline: 2px solid #333;
    outline-offset: 4px;
}

.product-back svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

@media (max-width: 1024px) {
    .pro-box > .pro-box-ul {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px 14px;
        padding: 0 5%;
    }

    .pro-box > .pro-box-ul > li .txt {
        min-height: 126px;
        padding: 8px 16px 20px;
        font-size: 16px;
    }
}

/* Phone rows size to their copy; desktop card geometry remains unchanged. */
@media (max-width: 767px) {
    .pro-box > .pro-box-ul {
        grid-auto-rows: auto;
    }

    .pro-box > .pro-box-ul > li .txt {
        min-height: 0;
        padding: 8px 16px 16px;
    }
}