.dmm-catalog { --dmm-accent: #145a6a; width: 100%; max-width: 1160px; margin-inline: auto; color: #222; font-size: 14px; line-height: 1.6; }
.dmm-catalog *, .dmm-catalog *::before, .dmm-catalog *::after { box-sizing: border-box; }
.dmm-catalog .dmm-catalog__heading { margin: 0 0 12px; font-size: 22px; line-height: 1.4; }
.dmm-catalog__sort { display: flex; gap: 8px; align-items: center; margin-bottom: 20px; }
.dmm-catalog .dmm-catalog__sort-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 6px 16px; border: 1px solid #d9dfe1; border-radius: 5px; background: #fff; color: var(--dmm-accent); text-decoration: none; font-size: 14px; line-height: 1.4; }
.dmm-catalog .dmm-catalog__sort-link.is-active { border-color: var(--dmm-accent); background: var(--dmm-accent); color: #fff; }
.dmm-catalog__sort-link:focus-visible { outline: 3px solid #e39f00; outline-offset: 3px; }
.dmm-catalog__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
.dmm-catalog__card { display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 6px; border: 1px solid #d9dfe1; border-radius: 8px; background: #fff; }
.dmm-catalog__cover { display: flex; align-items: center; justify-content: center; overflow: hidden; background: #f1f3f4; color: #586269; }
.dmm-catalog__cover img { display: block; width: 100%; height: auto; }
.dmm-catalog__cover span { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; }
.dmm-catalog .dmm-catalog__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; min-height: 3em; max-height: 4.5em; margin: 10px 0 6px; overflow: hidden; font-size: 14px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.dmm-catalog__people { margin: 0 0 6px; font-size: 12px; color: #505b62; overflow-wrap: anywhere; }
.dmm-catalog__price { margin: auto 0 10px; padding-top: 6px; font-weight: 700; }
.dmm-catalog__actions { display: flex; flex-direction: column; gap: 8px; }
.dmm-catalog .dmm-catalog__button { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; border: 1px solid var(--dmm-accent); border-radius: 5px; background: var(--dmm-accent); color: #fff; text-align: center; text-decoration: none; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.dmm-catalog .dmm-catalog__button--preview { background: #fff; color: var(--dmm-accent); }
.dmm-catalog__button:focus-visible, .dmm-catalog__close:focus-visible { outline: 3px solid #e39f00; outline-offset: 3px; }
.dmm-catalog__unavailable { text-align: center; color: #626262; }
.dmm-catalog__notice { padding: 12px; background: #fff8de; }
.dmm-catalog__modal:not([open]) { display: none; }
.dmm-catalog__modal { width: 95vw; max-width: 1100px; height: 88vh; height: 88dvh; max-height: 90vh; max-height: 90dvh; margin: auto; padding: 0; border: 0; border-radius: 8px; background: #fff; color: #222; overflow: hidden; }
.dmm-catalog__modal::backdrop { background: rgb(0 0 0 / 65%); }
.dmm-catalog__modal-body { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.dmm-catalog__modal-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #ddd; }
.dmm-catalog .dmm-catalog__modal-header h2 { margin: 0; font-size: 16px; }
.dmm-catalog__close { min-height: 44px; padding: 8px 12px; border: 1px solid #bbb; border-radius: 4px; background: #fff; color: #222; font-size: 14px; cursor: pointer; }
.dmm-catalog__fallback { flex: 0 0 auto; padding: 8px 14px 12px; }
.dmm-catalog__fallback p { margin: 0 0 6px; font-size: 12px; }
.dmm-catalog__frame-slot { flex: 1 1 auto; min-height: 0; }
.dmm-catalog__frame-slot iframe { display: block; width: 100%; height: 100%; border: 0; }
.dmm-catalog__debug { margin-top: 24px; padding: 12px; border: 1px dashed #999; }
.dmm-catalog__debug pre { max-height: 600px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; }
@media (min-width: 768px) { .dmm-catalog__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; } }
@media (min-width: 1025px) { .dmm-catalog__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }