/*
 * Plan dev-plan-gallery-shop-mode-toggle-v1.md Phase 4
 * Frame-Effect-CSS fuer den Shop-Mode Produkt-Grid.
 * Klassen werden je nach PrintProduct.category an die Produkt-Karte und
 * Konfigurator-Vorschau gebunden, damit der Endkunde direkt sieht,
 * was er bekommt (Druck, Wandbild, Fotobuch, Geschenk).
 */

.gs-frame {
    display: inline-block;
    position: relative;
    background: #fff;
    transition: transform .2s ease, box-shadow .2s ease;
    max-width: 100%;
}

.gs-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gs-frame.frame-print {
    padding: 10px 10px 18px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
}

.gs-frame.frame-wallart-acryl {
    padding: 0;
    border-radius: 2px;
    box-shadow: 0 12px 28px -8px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.12);
    position: relative;
}
.gs-frame.frame-wallart-acryl::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,0) 35%, rgba(255,255,255,0) 70%, rgba(255,255,255,.15) 100%);
    border-radius: inherit;
}

.gs-frame.frame-wallart-canvas {
    padding: 0;
    box-shadow: 0 6px 14px rgba(0,0,0,.20), inset 0 0 0 1px rgba(0,0,0,.08);
    background:
        repeating-linear-gradient(0deg, rgba(0,0,0,.04) 0 1px, transparent 1px 3px),
        repeating-linear-gradient(90deg, rgba(0,0,0,.04) 0 1px, transparent 1px 3px),
        #fff;
}
.gs-frame.frame-wallart-canvas img { mix-blend-mode: multiply; }

.gs-frame.frame-fotobuch {
    padding: 4px;
    background: linear-gradient(90deg, #f3ece1 0%, #fff 8%, #fff 92%, #d8cdb9 100%);
    box-shadow: 0 6px 16px rgba(0,0,0,.18);
    border-radius: 1px;
    position: relative;
}
.gs-frame.frame-fotobuch::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0; bottom: 0;
    width: 1px;
    background: rgba(0,0,0,.15);
    pointer-events: none;
}

.gs-frame.frame-gift {
    padding: 12px;
    background: #fff;
    border: 1px solid #E8DED2;
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
    position: relative;
}
.gs-frame.frame-gift::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 6px;
    transform: translateY(-50%);
    background: repeating-linear-gradient(45deg, #C17C5A 0 8px, #fff 8px 16px);
    opacity: .35;
    pointer-events: none;
}

/* Card hover lift */
.gs-product-card:hover .gs-frame {
    transform: translateY(-2px);
    box-shadow: 0 18px 30px -10px rgba(0,0,0,.22), 0 4px 10px rgba(0,0,0,.08);
}

/* Wall-Background fuer Konfigurator-Vorschau — das Produkt wirkt
   dadurch aufgehaengt/aufgestellt statt frei schwebend. */
.gs-wall-bg {
    background: linear-gradient(135deg, #ece4d6 0%, #ddd2bf 100%);
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}