:root {
    --td-material-rose: #bd4a78;
    --td-material-ink: #1f2933;
    --td-material-muted: #5e6b77;
    --td-material-line: #dce3ea;
    --td-material-page: #f4f6f8;
}

body { background: var(--td-material-page); }
.td-material-page { width: min(1180px, calc(100% - 32px)); margin: 0 auto 56px; color: var(--td-material-ink); }
.td-material-page a:link,
.td-material-page a:visited,
.td-material-page a:hover,
.td-material-page a:focus,
.td-material-page a:focus-visible,
.td-material-page a:active { text-decoration: none; }
.td-material-page a:focus { outline: none; }
.td-material-page a:focus-visible { outline: 2px solid var(--td-material-rose); outline-offset: 2px; }
.td-material-header { padding: 42px 0 28px; }
.td-material-eyebrow { color: var(--td-material-rose); font-size: 13px; font-weight: 900; letter-spacing: .06em; }
.td-material-header h1 { margin: 10px 0 0; font-size: clamp(25px, 2.2vw, 32px); font-weight: 900; }
.td-material-header p { color: var(--td-material-muted); font-weight: 700; }

.td-material-controls { display: grid; gap: 16px; margin-bottom: 28px; }
.td-material-search { display: flex; gap: 8px; }
.td-material-search input { flex: 1; min-height: 44px; border: 1px solid var(--td-material-line); border-radius: 8px; padding: 8px 13px; font-size: 15px; }
.td-material-search button { border: 1px solid var(--td-material-rose); border-radius: 8px; background: var(--td-material-rose); color: #fff; padding: 8px 22px; font-weight: 900; }
.td-material-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.td-material-filter a { border: 1px solid var(--td-material-line); border-radius: 999px; background: #fff; color: var(--td-material-ink); padding: 7px 14px; text-decoration: none; font-weight: 800; }
.td-material-filter a.is-active, .td-material-filter a:hover { border-color: var(--td-material-rose); background: #fff5f8; color: #9f315b; }

.td-material-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.td-material-card { display: grid; grid-template-rows: 150px minmax(58px, auto); overflow: hidden; border: 1px solid var(--td-material-line); border-radius: 8px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; }
.td-material-card:hover, .td-material-card:focus-within { border-color: var(--td-material-rose); box-shadow: 0 5px 16px rgba(31,41,51,.10); }
.td-material-card-image { display: grid; position: relative; place-items: center; overflow: hidden; background: linear-gradient(180deg, #f7f9fb, #eef3f7); text-decoration: none; }
.td-material-card-image img { display: block; width: 68%; height: 68%; object-fit: contain; }
.td-material-card-image > span { color: #738393; font-size: 42px; font-weight: 900; }
.td-material-card-content { display: grid; align-content: center; gap: 4px; border-top: 1px solid #e8edf2; padding: 8px 12px; }
.td-material-card-title, .td-material-card-pack { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
.td-material-card-title { color: var(--td-material-ink); font-size: 15px; font-weight: 900; }
.td-material-card-title:hover, .td-material-card-title:focus, .td-material-card-title:focus-visible, .td-material-card-title:active { color: #9f315b; text-decoration: none; }
.td-material-card-image:focus-visible { outline: 2px solid var(--td-material-rose); outline-offset: -2px; }
.td-material-card-pack { display: inline-flex; align-self: start; align-items: center; max-width: 100%; padding: 3px 7px; border: 0; border-radius: 999px; color: var(--td-material-muted); font-size: 12px; font-weight: 700; background: #f4f6f8; text-decoration: none; }
.td-material-card-pack span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.td-material-card-pack:hover, .td-material-card-pack:focus-visible, .td-material-card-pack:visited { color: #9f315b; background: #fff5f8; text-decoration: none; }
.td-material-tag-summary { margin: 32px 0; padding: 24px; border: 1px solid var(--td-material-line); border-radius: 12px; background: #fff; }
.td-material-tag-summary h2 { margin: 0 0 14px; }
.td-material-tag-summary-list, .td-material-tag-directory { display: flex; flex-wrap: wrap; gap: 8px; }
.td-material-tag-summary-list a, .td-material-tag-directory a { border: 1px solid #dce4eb; border-radius: 999px; padding: 6px 10px; color: inherit; text-decoration: none; }
.td-material-tag-summary-all { display: inline-block; margin-top: 12px; }
.td-material-tag-results { margin-top: 24px; }
.td-material-tag-directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.td-material-tag-directory a { min-height: 72px; display: flex; flex-direction: column; justify-content: center; border-radius: 8px; background: #fff; }
.td-material-tag-directory a strong { overflow-wrap: anywhere; }
.td-material-tag-directory a small { color: var(--td-material-muted); margin-top: 6px; }
.td-material-tag-directory a:hover, .td-material-tag-directory a:focus-visible { border-color: var(--td-material-rose); box-shadow: 0 4px 12px rgba(224, 93, 117, .14); }
.td-material-pagination { display: flex; justify-content: center; width: 100%; max-width: 100%; min-width: 0; margin-top: 26px; overflow-x: clip; }
.td-material-pagination .well,
.td-material-pagination .row,
.td-material-pagination [class*="col-"] { width: 100%; max-width: 100%; min-width: 0; margin-left: 0; margin-right: 0; }
.td-material-pagination .well { border: 0; background: transparent; box-shadow: none; }
.td-material-pagination .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; width: 100%; max-width: 100%; margin: 20px 0; list-style: none; padding: 0; }
.td-material-pagination .pagination > li { float: none; display: block; }
.td-material-pagination .pagination > li > a, .td-material-pagination .pagination > li > span, .td-material-directory-pagination > a { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid #dce4eb; background: #fff; color: inherit; }
.td-material-pagination .pagination > .active > a, .td-material-directory-pagination > a.is-active { background: var(--td-material-rose); border-color: var(--td-material-rose); color: #fff; }
.td-material-pagination .pagination > li > a:hover, .td-material-pagination .pagination > li > a:focus-visible, .td-material-directory-pagination > a:hover, .td-material-directory-pagination > a:focus-visible { border-color: var(--td-material-rose); box-shadow: 0 0 0 2px rgba(224,93,117,.18); }
.td-material-cta { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 10px 16px; border-radius: 8px; text-decoration: none; }
.td-material-cta svg { display: block; width: 20px; height: 20px; flex: 0 0 20px; }
.td-material-cta-primary { background: var(--td-material-rose); color: #fff; }
.td-material-cta-secondary { border: 1px solid #dce4eb; color: inherit; }
.td-material-cta:hover, .td-material-cta:focus-visible { text-decoration: none; }
.td-material-cta-primary:hover, .td-material-cta-primary:focus-visible { background: #9f315b; color: #fff; }
.td-material-cta-secondary:hover, .td-material-cta-secondary:focus-visible { border-color: var(--td-material-rose); background: #fff5f8; color: #9f315b; }
.td-material-cta:focus-visible { outline: 2px solid var(--td-material-rose); outline-offset: 2px; }
@media (max-width: 900px) { .td-material-tag-directory { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .td-material-tag-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.td-material-tag-summary-list a:hover, .td-material-tag-summary-list a:focus-visible, .td-material-tag-directory a:hover, .td-material-tag-directory a:focus-visible { border-color: var(--td-material-rose); background: #fff5f7; }
.td-material-tag-summary-list a:focus-visible, .td-material-tag-directory a:focus-visible { outline: 2px solid var(--td-material-rose); outline-offset: 2px; }
.td-material-empty { padding: 44px 0; color: var(--td-material-muted); text-align: center; }
.td-material-back { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; margin-top: 20px; color: #9f315b; font-weight: 900; text-decoration: none; }
.td-material-back svg { width: 20px; height: 20px; flex: 0 0 20px; }
.td-material-back:hover, .td-material-back:focus-visible { color: #9f315b; text-decoration: none; }
.td-material-back:focus-visible { outline: 2px solid var(--td-material-rose); outline-offset: 3px; border-radius: 4px; }
.td-material-detail h1, .td-material-pack h1 { margin: 14px 0 8px; }
.td-material-detail-preview { display: grid; place-items: center; min-height: 360px; margin: 0; border: 1px solid var(--td-material-line); border-radius: 10px; background: #fff; }
.td-material-detail-preview img { max-width: 100%; max-height: 560px; object-fit: contain; }
.td-material-detail-layout { display: grid; gap: 24px; }
.td-material-detail-info { display: grid; min-width: 0; align-content: center; gap: 16px; }
.td-material-detail-info h1 { overflow-wrap: anywhere; }
.td-material-detail-info .td-material-cta { width: 100%; justify-content: center; text-align: center; white-space: normal; }
.td-material-detail-info p { margin: 0; }
.td-material-purchase { margin: 24px 0 38px; border: 1px solid var(--td-material-line); border-radius: 12px; background: #fff; padding: 22px; }
.td-material-price { display: block; margin-bottom: 16px; font-size: 24px; }
.td-material-purchase h2 { margin: 0 0 8px; }
.td-material-purchase li { margin: 6px 0; }
.td-material-purchase .td-button { display: inline-flex; margin: 10px 0; }
.td-material-purchase-plan { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: var(--td-material-muted); font-weight: 800; }
.td-material-purchase-plan .td-material-price { margin: 0; color: var(--td-material-ink); }
.td-purchase-benefits { display: grid; gap: 8px; border: 1px solid #eadde2; border-radius: 8px; background: #fff9fb; padding: 12px 14px; }
.td-purchase-benefits-heading { display: flex; align-items: center; gap: 7px; margin: 0; color: var(--td-material-ink); font-size: 15px; }
.td-purchase-benefits-heading .td-pro-badge { flex: 0 0 20px; }
.td-purchase-benefits-summary { margin: 0; color: var(--td-material-ink); font-size: 14px; font-weight: 700; line-height: 1.6; }
.td-purchase-benefits-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.td-purchase-benefits-list li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 6px; align-items: start; font-size: 14px; font-weight: 700; line-height: 1.6; }
.td-purchase-benefit-icon { width: 14px; height: 14px; margin-top: 3px; color: #28835b; }
.td-material-purchase-actions { display: grid; gap: 8px; margin-top: 14px; }
.td-material-purchase-actions .td-material-cta { width: 100%; justify-content: center; }
.td-material-purchase-note { margin: 0; color: var(--td-material-muted); font-size: 12px; line-height: 1.5; }
.td-material-detail > .td-button { display: inline-flex; margin: 0 0 18px; }
.td-material-related { margin-top: 36px; }
.td-material-related h2 { margin-bottom: 14px; }
.td-material-dialog { position: relative; width: min(940px, calc(100% - 24px)); max-height: min(90vh, 900px); border: 0; border-radius: 14px; padding: 0; overflow: hidden; box-shadow: 0 18px 60px rgba(31,41,51,.28); }
.td-material-dialog::backdrop { background: rgba(15,23,42,.58); }
.td-material-dialog-body { max-height: min(90vh, 900px); overflow-y: auto; padding: 22px 28px 32px; }
.td-material-dialog-body .td-material-page { width: 100%; margin: 0; }
.td-material-dialog-close { display: grid; place-items: center; position: absolute; z-index: 2; top: 14px; right: 14px; width: 44px; height: 44px; padding: 0; border: 1px solid var(--td-material-line); border-radius: 50%; background: #fff; color: var(--td-material-ink); }
.td-material-dialog-close svg { width: 20px; height: 20px; }
.td-material-dialog-close:hover, .td-material-dialog-close:focus-visible { border-color: var(--td-material-rose); color: #9f315b; background: #fff5f8; }

@media (max-width: 800px) { .td-material-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) {
    .td-material-page { width: min(100% - 20px, 480px); }
    .td-material-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .td-material-card { grid-template-rows: 116px minmax(54px, auto); }
    .td-material-search button { padding-inline: 14px; }
    .td-material-dialog-body { padding: 14px 16px 24px; }
}
@media (max-width: 767px) { .td-material-detail-preview { min-height: 240px; } }
@media (min-width: 768px) { .td-material-detail-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); align-items: start; } }