/** Shopify CDN: Minification failed Line 161:2 Unexpected "/" **/ /* Hauptbild schön rund */ .product__media-wrapper .product__media, .product__media-wrapper .product__media .media, .product__media-wrapper .product__modal-opener, .product__media-wrapper .deferred-media, .product__media-wrapper .product__media img, .product__media-wrapper .product__media video, .product__media-wrapper model-viewer { border-radius:16px; overflow:hidden; } /* PDP: grauen Border am Produktbild vollständig entfernen */ .product__media-wrapper{ --media-border: 0; /* falls deine Dawn-Version damit arbeitet */ --media-border-color: transparent; /* safety */ } .product__media-wrapper .product__media, .product__media-wrapper .product__media .media, .product__media-wrapper .product__modal-opener, .product__media-wrapper .product-media-container{ border: 0 !important; outline: 0 !important; box-shadow: none !important; background-color: transparent !important; /* keine leichte Grau-Fläche */ } /* falls der Rand über ein Pseudo-Element erzeugt wird */ .product__media-wrapper .product__media::after, .product__media-wrapper .product__media .media::after{ content: none !important; } /* Thumbnails hübsch + aktiv markiert */ .thumbnail-list__item, .thumbnail-list__item .thumbnail { border-radius:12px; overflow:hidden; } .thumbnail[aria-current="true"], .thumbnail.is-active { outline:2px solid var(--color-foreground,#111); outline-offset:2px; border-radius:12px; } /* Desktop: Thumbs links + Slider rechts – nur für Thumbnail-Layouts */ /* Desktop: Thumbs links, Viewer rechts – exakt für Dawn Struktur */ @media (min-width: 990px){ /* greift für "Vorschaubilder" & "Karussell mit Vorschaubildern" */ .product__media-wrapper media-gallery[data-desktop-layout*="thumbnail"]{ display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: start; } /* Thumbnails (slider-component mit .thumbnail-slider) LINKS */ .product__media-wrapper media-gallery[data-desktop-layout*="thumbnail"] slider-component.thumbnail-slider{ grid-column: 1; order: 1; max-height: calc(100vh - 180px); overflow: auto; margin: 0; } /* Haupt-Viewer (slider-component OHNE .thumbnail-slider) RECHTS */ .product__media-wrapper media-gallery[data-desktop-layout*="thumbnail"] slider-component:not(.thumbnail-slider){ grid-column: 2; order: 2; min-width: 0; /* verhindert Zusammenquetschen im Grid */ width: 100%; display: block; } /* Spaltenlayout beibehalten */ .product__media-wrapper media-gallery[data-desktop-layout*="thumbnail"]{ display:grid; grid-template-columns: 112px 1fr; /* Breite der linken Thumb-Spalte */ gap:1rem; align-items:start; } /* Der Thumbnail-SLIDER soll wie eine vertikale Liste wirken */ .product__media-wrapper media-gallery[data-desktop-layout*="thumbnail"] slider-component.thumbnail-slider{ grid-column:1; order:1; position:sticky; top:1rem; max-height:calc(100vh - 180px); overflow:auto; margin:0; } /* UL im Slider vertikal statt horizontal */ .product__media-wrapper media-gallery[data-desktop-layout*="thumbnail"] slider-component.thumbnail-slider .slider{ display:flex; flex-direction:column; gap:.6rem; overflow:visible; /* kein horizontales Scrollen */ scroll-snap-type:none; min-width:0; } /* einzelne Thumb-Slides neutralisieren (sonst min-width:100%) */ .product__media-wrapper media-gallery[data-desktop-layout*="thumbnail"] slider-component.thumbnail-slider .slider__slide{ width:auto; min-width:0; transform:none !important; /* falls JS etwas gesetzt hat */ } /* Größe der Thumbs */ .product__media-wrapper media-gallery[data-desktop-layout*="thumbnail"] .thumbnail{ width:96px; height:96px; border-radius:12px; overflow:hidden; object-fit:cover; } /* HIGHLIGHT aktives Thumbnail (kann bleiben wie zuvor) */ .thumbnail[aria-current="true"], .thumbnail.is-active{ outline:2px solid var(--color-foreground,#000); outline-offset:2px; border-radius:12px; } } /* =========================== MOBILE: hübsche Overlay-Buttons im Gallery-Viewer =========================== */ @media (max-width: 989.98px){ /* Der Viewer-Slider (NICHT die Thumbnails) soll Anker für absolute Buttons sein */ .product__media-wrapper media-gallery slider-component:not(.thumbnail-slider){ position: relative; } /* Buttons-Container overlay & ohne Counter/Dots */ .product__media-wrapper media-gallery slider-component:not(.thumbnail-slider) .slider-buttons{ position: static; /* Container selbst braucht keine Position */ } .product__media-wrapper media-gallery slider-component:not(.thumbnail-slider) .slider-counter, .product__media-wrapper media-gallery slider-component:not(.thumbnail-slider) .slider-counter--total, .product__media-wrapper media-gallery slider-component:not(.thumbnail-slider) .slider-counter--current{ display: none !important; } /* Grundstil der Buttons (40x40, rund, Border, Shadow) */ .product__media-wrapper media-gallery slider-component:not(.thumbnail-slider) .slider-button{ position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 9999px; background-color: #fff !important; border: 0.5px solid var(--color-border, rgba(0,0,0,.12)); box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.10); display: flex; align-items: center; justify-content: center; z-index: 3; } /* links/rechts positionieren */ .product__media-wrapper media-gallery slider-component:not(.thumbnail-slider) .slider-button--prev{ left: 10px; } .product__media-wrapper media-gallery slider-component:not(.thumbnail-slider) .slider-button--next{ right: 10px; } / /* Icon-Rotation: Standard-Caret von Dawn zeigt bereits nach RECHTS. Also: next = 0°, prev = 180° (links). Alles andere überschreiben. */ .product__media-wrapper media-gallery slider-component:not(.thumbnail-slider) .slider-button .svg-wrapper{ transform: none !important; } .product__media-wrapper media-gallery slider-component:not(.thumbnail-slider) .slider-button--next .svg-wrapper{ transform: none !important; /* → rechts */ } .product__media-wrapper media-gallery slider-component:not(.thumbnail-slider) .slider-button--prev .svg-wrapper{ transform: rotate(0deg) !important; /* ← links */ } /* States */ .product__media-wrapper media-gallery slider-component:not(.thumbnail-slider) .slider-button:hover{ filter: brightness(.97); } .product__media-wrapper media-gallery slider-component:not(.thumbnail-slider) .slider-button:active{ transform: translateY(-50%) translateY(1px); } /* Wenn disabled (am Rand des Sliders): ausblenden */ .product__media-wrapper media-gallery slider-component:not(.thumbnail-slider) .slider-button[disabled]{ opacity: 0; pointer-events: none; } }