.tsdmg-front-app { max-width: 1300px; margin: 0 auto; }
.tsdmg-front-loading { padding: 60px; text-align: center; color: #999; font-size: 14px; }

.tsdmg-front-types {
    display: flex; gap: 4px; margin-bottom: 18px; background: #f0f0f0; border-radius: 24px;
    padding: 4px; width: fit-content;
}
.tsdmg-front-type {
    padding: 9px 20px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer;
    color: #555; transition: all .15s;
}
.tsdmg-front-type:hover { color: #111; }
.tsdmg-front-type.active { background: #111; color: #fff; }

/* v2.7.267 (Micha: Sidebar-Layout wie Shirttuning.de statt Pillen-Leiste) */
.tsdmg-front-body { display: flex; gap: 32px; align-items: flex-start; }

.tsdmg-front-sidebar {
    width: 300px; flex-shrink: 0;
}
.tsdmg-front-sidebar-title {
    display: flex; align-items: center; gap: 9px;
    font-size: 17px; font-weight: 700; color: #111; margin-bottom: 14px; padding-left: 2px;
}
.tsdmg-front-sidebar-title svg { flex-shrink: 0; color: #0b6e6e; }
.tsdmg-front-cats {
    display: flex; flex-direction: column; border-top: 1px solid #eee;
}
.tsdmg-front-cat {
    padding: 14px 6px; font-size: 16px; color: #333; cursor: pointer;
    border-bottom: 1px solid #eee; transition: color .12s;
}
.tsdmg-front-cat:hover { color: #111; }
.tsdmg-front-cat.active { color: #0b6e6e; font-weight: 700; }

.tsdmg-front-main { flex: 1; min-width: 0; }

.tsdmg-front-grid {
    display: grid; gap: 16px; min-width: 0;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.tsdmg-front-card {
    cursor: pointer; border-radius: 12px; overflow: hidden; background: #26282c;
    transition: transform .15s, box-shadow .15s; text-align: center;
}
.tsdmg-front-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.25); }
/* v2.7.265: fester Hintergrund entfernt - wird jetzt dynamisch pro Bild per
   JS gesetzt (tsdmgApplyThumbBg in front.js, Helligkeits-Analyse), exakt wie
   im Shirtdesigner-CM selbst schon geloest. Neutrales Grau nur als kurzer
   Platzhalter, bis das Bild geladen ist. */
.tsdmg-front-card-img {
    aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
    background: #ccc;
}
.tsdmg-front-card-img img { width: 100%; height: 100%; object-fit: contain; padding: 10px; box-sizing: border-box; }
.tsdmg-front-card-title { padding: 8px 6px 12px; font-size: 12.5px; color: #eee; }

.tsdmg-front-empty { padding: 50px; text-align: center; color: #999; }

.tsdmg-front-more-wrap { text-align: center; margin-top: 26px; }
.tsdmg-front-more-btn {
    padding: 11px 28px; border-radius: 24px; border: 1px solid #ddd; background: #fff;
    color: #111; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s;
}
.tsdmg-front-more-btn:hover { border-color: #111; }
.tsdmg-front-more-btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 700px) {
    .tsdmg-front-body { flex-direction: column; }
    .tsdmg-front-sidebar { width: 100%; }
    .tsdmg-front-cats {
        flex-direction: row; flex-wrap: wrap; border-top: none; gap: 8px;
    }
    .tsdmg-front-cat {
        border: 1px solid #ddd; border-radius: 20px; padding: 7px 14px;
    }
    .tsdmg-front-cat.active { background: #111; color: #fff; border-color: #111; }
    .tsdmg-front-grid { grid-template-columns: repeat(3, 1fr) !important; }
}