/* Schachbrett-Kachel: freigestellte Motive und Mockups sind transparent —
   weiße Motive blieben auf weißem Grund unsichtbar. object-fit:contain
   verhindert Verzerrung, alle Kacheln erscheinen dadurch gleich groß. */
.smake-preview,
.smake-logo-thumb {
    /* Das Bilder-Reset der Panels (max-width: 100%) staucht die Kachel in einer
       schmalen Zelle bis zur Unkenntlichkeit — die Maße der Vorschau gelten. */
    max-width: none;
    object-fit: contain;
    padding: 0.25rem;
    border-radius: 0.625rem;
    border: 1px solid rgb(0 0 0 / .08);
    background-color: #fff;
    background-image: linear-gradient(45deg, #edeef2ad 25%, transparent 25%), linear-gradient(-45deg, #edeef2ad 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #edeef2ad 75%), linear-gradient(-45deg, transparent 75%, #edeef2ad 75%);
    background-size: 6px 6px;
    background-position: 0 0, 0 3px, 3px -3px, -3px 0;
}

.dark .smake-preview,
.dark .smake-logo-thumb {
    border-color: rgb(255 255 255 / .1);
    background-color: #1f2937;
    background-image:
        linear-gradient(45deg, #1f252e 25%, transparent 25%),
        linear-gradient(-45deg, #1f252e 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #1f252e 75%),
        linear-gradient(-45deg, transparent 75%, #1f252e 75%);
}

/* Kein Bild vorhanden: Rahmen und Bild-Symbol statt Schachbrett — das
   Schachbrett steht für „freigestelltes Bild", nicht für „kein Bild". */
.smake-preview.smake-preview-empty {
    /* Bild-Symbol (Heroicon „photo") statt Schachbrett — als Hintergrund, damit
       es auch für ein <img> greift, dessen Quelle nicht lädt. */
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23d1d5db'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 45%;
}

.dark .smake-preview.smake-preview-empty {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%234b5563'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m2.25 15.75 5.159-5.159a2.25 2.25 0 0 1 3.182 0l5.159 5.159m-1.5-1.5 1.409-1.409a2.25 2.25 0 0 1 3.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 0 0 1.5-1.5V6a1.5 1.5 0 0 0-1.5-1.5H3.75A1.5 1.5 0 0 0 2.25 6v12a1.5 1.5 0 0 0 1.5 1.5Zm10.5-11.25h.008v.008h-.008V8.25Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z'/%3E%3C/svg%3E");
}

/* Vorschau-Kachel: halb so groß wie das gelieferte Bild (Glide-Preset „md",
   260×290) — dadurch doppelte Pixeldichte und scharfe Kanten. Die Maße stehen
   am Bild (PreviewSize::TILE_HEIGHT + PreviewRatio); nur wenn der Platz nicht
   reicht, schrumpft die Kachel mit. */
.smake-preview-tile {
    max-width: 100%;
    height: auto;
}

/* Alte Namen aus dem Merchant-Panel: bleiben als Alias bestehen. */
.smake-preview-square {
    aspect-ratio: 1 / 1;
    max-width: 100%;
    height: auto;
}

.smake-preview-product {
    aspect-ratio: 260 / 290;
    max-width: 100%;
    height: auto;
}

/* Große Einzelvorschau im Dialog: volle Breite, in der Höhe gedeckelt
   (PreviewSize::DETAIL_MAX_HEIGHT). */
.smake-preview-detail {
    width: 100%;
    height: auto;
    max-height: 20rem;
}

/* Raster aus Vorschau-Kacheln (Ansichten eines Produkts, Motiv-Übersichten):
   die Kacheln brechen um, statt sich zu quetschen. Mindestbreite = Kachel
   (130px) plus Abstand; Karten MIT Textspalte daneben brauchen mehr Platz und
   nutzen .smake-preview-card-grid. */
/* Filament hängt die Klasse an einen Wrapper um das eigentliche Raster. */
.smake-preview-grid,
.smake-preview-grid > .fi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
}

/* Karten mit Kachel UND Daten daneben: unter ~300px steht der Text zu schmal. */
.smake-preview-card-grid,
.smake-preview-card-grid > .fi-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 0.75rem;
}

/* Vorschau mit Lightbox (PreviewColumn->lightbox()): als klickbar erkennbar
   machen — in den Panels gibt es keinen Tailwind-Build. */
.smake-preview-lightbox-link {
    display: inline-block;
    cursor: zoom-in;
}

.smake-preview-lightbox-link img {
    transition: opacity 0.15s ease-in-out;
}

.smake-preview-lightbox-link:hover img {
    opacity: 0.8;
}

/* Die weiteren Bilder des Datensatzes hängen nur als Links in der Galerie —
   sichtbar ist die Kachel, geblättert wird in der Lightbox. */
.smake-preview-lightbox-hidden {
    display: none;
}

/* Kompakte Zeile (Schriften, Marken-Logos, Optionsmuster): dünnerer Rahmen und
   weniger Innenabstand — sonst frisst die Kachel das kleine Bild auf. */
.smake-preview-compact {
    padding: 0.125rem;
    border-radius: 0.375rem;
    background-size: 6px 6px;
    background-position: 0 0, 0 3px, 3px -3px, -3px 0;
}