/* 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(135px, 1fr));
    gap: 0.75rem;
}
    /* Die Spalten (1fr) werden breiter als die Kachel, sobald wenige Kacheln
       die Zeile teilen — ohne das säßen sie linksbündig am Spaltenrand. */
.smake-preview-grid > .fi-grid {
    justify-items: center;
}

/* 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;
}

.smake-preview-overlay-stack--detail {
    background-color: #fff;
    border: 1px solid rgb(0 0 0 / .08);
    border-radius: 0.625rem;
    overflow: hidden;
}

.dark .smake-preview-overlay-stack--detail {
    background-color: #1f2937;
    border-color: rgb(255 255 255 / .1);
}

.smake-preview-overlay-stack-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background-color: color-mix(in srgb, var(--primary-500) 6%, #fff);
    border-bottom: 1px solid rgb(0 0 0 / .08);
}

.dark .smake-preview-overlay-stack-bar {
    background-color: rgb(255 255 255 / .04);
    border-bottom-color: rgb(255 255 255 / .1);
}

.smake-preview-overlay-stack--detail .smake-preview {
    padding: 0;
    border: 0;
    border-radius: 0;
}

.smake-preview-overlay-stack-images {
    position: relative;
    width: max-content;
}

.smake-preview-overlay-stack-images .smake-preview-tile {
    width: 12rem !important;
    height: auto !important;
    aspect-ratio: 1;
}

.smake-preview-overlay-stack--detail .smake-preview-overlay-stack-images {
    width: 100%;
    aspect-ratio: 1;
}

.smake-preview-overlay-stack-image--dimmed img {
    filter: saturate(0);
}

.smake-preview-overlay-stack-overlay {
    position: absolute;
    inset: 0;
}

.smake-preview-overlay-stack-overlay .smake-preview {
    background: none;
    border-color: transparent;
}

.smake-preview-overlay-stack-toggle {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    line-height: 1rem;
    color: var(--primary-600);
    text-decoration: underline;
    cursor: pointer;
}

.smake-preview-overlay-stack-toggle [x-cloak] {
    display: none;
}

.smake-preview-overlay-stack-bar .smake-preview-overlay-stack-toggle {
    margin: 0;
    text-decoration: none;
}

.smake-preview-overlay-stack-images--opens-lightbox {
    cursor: zoom-in;
}

.smake-preview-overlay-stack-images--lightbox {
    width: min(90vw, 90vh);
    aspect-ratio: 1;
}

.smake-preview-overlay-stack--detail .smake-preview-overlay-stack-images img,
.smake-preview-overlay-stack-images.smake-preview-overlay-stack-images--lightbox img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-height: none;
    object-fit: contain;
}

.smake-preview-zoom {
    display: flex;
    flex-direction: column;
    width: 90vw;
    height: calc(100vh - 8rem);
    background-color: #fff;
    border-radius: 0.625rem;
    overflow: hidden;
}

.dark .smake-preview-zoom {
    background-color: #1f2937;
}

.smake-preview-zoom-controls {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
}

.smake-preview-zoom-button {
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.625rem;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--gray-700, #374151);
    background-color: #fff;
    border: 1px solid rgb(0 0 0 / .1);
    border-radius: 0.5rem;
    cursor: pointer;
}

.smake-preview-zoom-button:disabled {
    opacity: 0.5;
    cursor: default;
}

.dark .smake-preview-zoom-button {
    color: var(--gray-200, #e5e7eb);
    background-color: rgb(255 255 255 / .05);
    border-color: rgb(255 255 255 / .1);
}

.smake-preview-zoom-scale {
    min-width: 3.5rem;
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.smake-preview-zoom-viewport {
    position: relative;
    flex: 1;
    overflow: hidden;
    touch-action: none;
    user-select: none;
    cursor: zoom-in;
}

.smake-preview-zoom-viewport--zoomed {
    cursor: grab;
}

.smake-preview-zoom-viewport--dragging {
    cursor: grabbing;
}

.smake-preview-overlay-stack-images.smake-preview-zoom-frame {
    position: absolute;
    inset: 0;
    width: auto;
    transform-origin: 0 0;
}

.smake-preview-zoom-frame--animated {
    transition: transform 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .smake-preview-zoom-frame--animated {
        transition: none;
    }
}

.smake-preview-zoom-frame img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-height: none;
    object-fit: contain;
}

.smake-preview-zoom-frame img.smake-preview-zoom-pixelated {
    image-rendering: pixelated;
}

.smake-preview-zoom-loader {
    display: none;
}