/* MTF Shop Design 0.1.3 - product-world preview and optimized illustrative photos. */
.mtf-design-categories {
    margin: 44px 0 28px;
    color: #2b3136;
    font-family: inherit;
    width: 100%;
    min-width: 0;
    text-align: left;
    overflow-wrap: anywhere;
}
.mtf-design-categories,
.mtf-design-categories * { box-sizing: border-box; }
.mtf-design-categories .mtf-design-categories__header { margin-bottom: 24px; }
.mtf-design-categories .mtf-design-categories__eyebrow {
    display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
    color: #013564; font-size: 12px; font-weight: 750; letter-spacing: .09em;
    text-transform: uppercase; line-height: 1.5;
}
.mtf-design-categories .mtf-design-categories__eyebrow::before {
    content: ''; display: block; flex: 0 0 24px; height: 3px;
    background: #2abd38; border-radius: 2px;
}
.mtf-design-categories .mtf-design-categories__title {
    margin: 0 0 12px; color: #013564; font-size: clamp(26px, 2.8vw, 38px);
    font-family: inherit; font-weight: 750; line-height: 1.2;
    letter-spacing: -.025em; text-wrap: balance;
}
.mtf-design-categories .mtf-design-categories__intro {
    margin: 0; color: #566676; line-height: 1.65; font-size: 16px; max-width: 70ch;
}
.mtf-design-categories .mtf-design-categories__grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px; list-style: none; margin: 0; padding: 0;
}
.mtf-design-categories .mtf-design-categories__card {
    min-width: 0; margin: 0; padding: 0; display: flex; flex-direction: column;
    background: #fff; border: 1px solid #dce5ed; border-radius: 16px; overflow: hidden;
}
.mtf-design-categories .mtf-design-categories__visual {
    display: flex; align-items: center; justify-content: center;
    position: relative; width: 100%; height: 126px; background: #f0f5fa; color: #013564;
}
.mtf-design-categories .mtf-design-categories__visual--dairy,
.mtf-design-categories .mtf-design-categories__visual--pantry,
.mtf-design-categories .mtf-design-categories__visual--drinks { background: #eff7f0; }
.mtf-design-categories .mtf-design-categories__icon { display: block; width: 96px; height: 80px; }
.mtf-design-categories .mtf-design-categories__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
.mtf-design-categories .mtf-design-categories__body { padding: 22px 24px 24px; }
.mtf-design-categories .mtf-design-categories__name {
    margin: 0 0 8px; color: #013564; font-family: inherit;
    font-size: 19px; line-height: 1.35; font-weight: 700;
}
.mtf-design-categories .mtf-design-categories__description {
    margin: 0; color: #566676; font-size: 14px; line-height: 1.6;
}
.mtf-design-categories .mtf-design-categories__notice {
    margin: 18px 0 0; color: #566676; font-size: 12px; line-height: 1.6;
}
@media (max-width: 991.98px) {
    .mtf-design-categories .mtf-design-categories__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 575.98px) {
    .mtf-design-categories { margin-top: 30px; }
    .mtf-design-categories .mtf-design-categories__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .mtf-design-categories .mtf-design-categories__card { flex-direction: row; align-items: stretch; border-radius: 12px; }
    .mtf-design-categories .mtf-design-categories__visual { flex: 0 0 92px; width: 92px; height: auto; min-height: 116px; }
    .mtf-design-categories .mtf-design-categories__icon { width: 66px; height: 58px; }
    .mtf-design-categories .mtf-design-categories__photo { position: absolute; inset: 0; }
    .mtf-design-categories .mtf-design-categories__body { flex: 1 1 0; min-width: 0; padding: 17px 16px; }
    .mtf-design-categories .mtf-design-categories__name { font-size: 17px; }
    .mtf-design-categories .mtf-design-categories__description { font-size: 13px; }
}
@media (forced-colors: active) {
    .mtf-design-categories .mtf-design-categories__card { border-color: CanvasText; }
    .mtf-design-categories .mtf-design-categories__icon { color: CanvasText; }
}

/* Photo cards use a 4:3 image area; icon-only cards keep their previous compact size. */
.mtf-design-categories .mtf-design-categories__visual--photo {
    height: auto;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}
.mtf-design-categories .mtf-design-categories__visual--photo .mtf-design-categories__photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
}
.mtf-design-categories .mtf-design-categories__photo-note {
    display: block;
    margin-top: 4px;
}
@media (max-width: 575.98px) {
    .mtf-design-categories .mtf-design-categories__visual--photo {
        flex: 0 0 108px;
        width: 108px;
        height: auto;
        min-height: 132px;
        aspect-ratio: auto;
    }
}