/* ===================================================================== karta5.css — aleMotocykl.pl · CSS karty produktu (jeden plik, podpięty przez w ) Wpis GoShop: Bezpośrednio · Karta produktu · Sekcja · priorytet -100: v5 vs v3 (v4 pominięta): „Gwarancja niskiej ceny” zostaje w 2 rzędach obok ceny — odzyskane px: tekst 11,5 px (było 12), odstęp od ceny 6 px (było 10), cena bez łamania „zł” do nowej linii; wiersz nie zawija gwarancji pod cenę, a gdyby na jakimś foncie zabrakło miejsca, blok łamie się na wyrównane 3 linie (text-wrap: balance). v3 vs v2: cena >= 6 cyfr (klasa .am-price-long z buybox2.js) → 32 px, żeby „Gwarancja niskiej ceny” została obok; gdy mimo to zawinie się pod cenę, wyrównuje się do prawej. v2 vs v1: kolumna 350 px (nie 390) i bez zwężania galerii — patrz sekcja 1; poprawka trybu <=1279 px. Scala dotychczasowe wpisy: Pasek boczny patch1, Zmienia ramke boczną, Usuwa czerwoną ramkę, Powiększenie ceny, omnibus cena, Opinie o sklepie margin top, Zmiana koloru kod EAN, Zmiana frazy EAN na KOD Produktu, Ukrycie SKU, SKU CSS, producent w jednej lini, Zmiana wyglądu tytułu h1, Zmniejszenie przerwy tytuł–zdjęcia, zmniejsza przerw na okruszkach, zmniejszenie danych GPRS i gwarancji, Baner zaplac pozniej, Mniejsze odstepy na dane producenta, Tabela hepco + CSS z przyciski3.js. POMINIĘTE (martwe): kropki/kolory dostępności i marginesy wierszy .detail-more-info-row (patch1/patch2/żółta kropka/tomek — wiersze ukrywa buybox1.js), CSS TrustMate, ZEGAR css (jest w buybox1.js). ===================================================================== */ /* ---------- 1. Układ kolumn ---------- */ /* v2: bez zmiany szerokości galerii. GoShop ustawia galerię (#detail-images i .product-images) wg szerokości okna: 630 px (>=1681), 440 px (1280-1680), 300 px + układ kolumnowy (<=1279). Zwężenie samego #detail-images (v1) zostawiało slider na 630/440 px, który wychodził poza sekcję i nachodził na kolumnę z kodem produktu. */ .detail-column-wrapper { display: flex; gap: 10px; } .detail-column-left { flex: 1; min-width: 0; } /* Szerokość buy boxa — JEDNA liczba do strojenia (jak dotąd 350 px; kompaktowy układ mieści się w 350). */ .detail-column-right { flex: 0 0 350px; } /* <=1279 px GoShop sam układa kolumny jedna pod drugą (flex-direction: column). W tym trybie flex-basis działa na WYSOKOŚĆ — dawne "flex: 0 0 300px" dla tabletu ustawiało buy boxowi 300 px wysokości. */ @media (max-width: 1279px) { .detail-column-wrapper { flex-direction: column !important; gap: 20px !important; } .detail-column-right { flex: none !important; width: 100% !important; } } /* ---------- 2. Buy box (#detail-info) ---------- */ #detail-info { border: 2px solid #ddd !important; border-top: 0 !important; border-radius: 12px !important; box-shadow: -3px -3px 8px rgba(0, 0, 0, .08), 2px 6px 12px rgba(0, 0, 0, .12) !important; padding: 0 20px 20px !important; } #detail-info .detail-badges { display: none !important; } /* gwiazdki + licznik opinii (onceny_produktowe + opinie_o_sklepie17) */ #product-star-above-price { padding-top: 12px !important; margin-bottom: 0 !important; } /* cena */ #detail-info .detail-pricing { margin-top: 10px !important; margin-bottom: 4px !important; padding-top: 8px; border-top: 1px solid #e5e7eb; } span[data-role="product-price"] { font-size: 38px !important; font-weight: bold !important; } /* cena z >= 6 cyfr („1078,99”) — mniejsza, żeby zmieścić się obok gwarancji (klasę nadaje buybox2.js) */ #detail-info.am-price-long span[data-role="product-price"] { font-size: 32px !important; } /* cena i „Gwarancja niskiej ceny" w jednym wierszu (cena72_u.js wstawia .price-guarantee-wrapper tuż za ceną, wewnątrz ) */ #detail-info .detail-pricing > b { display: flex; align-items: flex-end; justify-content: space-between; gap: 6px; flex-wrap: nowrap; /* gwarancja nie spada pod cenę — w razie braku miejsca łamie się w 3 linie (niżej) */ } #detail-info span[data-role="product-price"] { white-space: nowrap; } /* „zł” zawsze przy kwocie */ #detail-info .price-guarantee-wrapper { margin: 0 0 6px !important; flex: 0 1 auto; } #detail-info .price-guarantee { flex-direction: column; align-items: flex-end; gap: 0; margin-left: 0; font-size: 11.5px; line-height: 1.25; text-align: right; } #detail-info .price-guarantee-text { margin-right: 0; white-space: normal; text-wrap: balance; } #detail-info .check-link { font-size: 11.5px; } #detail-info .check-link svg { width: 14px; height: 14px; } /* omnibus — stara cena; pusty (brak obniżki) nie zajmuje linii */ .detail-pricing del span[data-role=product-oldprice] { position: relative; top: -15px; margin-left: 5px; } #detail-info .detail-pricing del:has(> span:empty) { display: none; } /* komunikat rabatu bez czerwonej ramki */ .discount-message { border: none !important; box-shadow: none !important; background: none !important; } /* ---------- 3. Przyciski akcji (Zapytaj / WhatsApp / Ulubione / Bezpieczne zakupy) — z przyciski3.js ---------- */ button.detail-ask-button, button.whatsapp-button, button.detail-wishlist, a#ts-safety-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; min-height: 44px !important; padding: 8px 8px !important; border: 1px solid #e5e7eb !important; border-radius: 10px !important; background: #fff !important; color: #1f2937 !important; font-size: 13.5px !important; font-weight: 600 !important; line-height: 1.1 !important; box-shadow: none !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important; transition: background-color .15s ease, border-color .15s ease !important; } button.detail-ask-button:hover, button.whatsapp-button:hover, button.detail-wishlist:hover, a#ts-safety-btn:hover { background: #f9fafb !important; border-color: #d1d5db !important; color: #1f2937 !important; } /* WhatsApp — zielony akcent, bez animacji pulsowania */ button.whatsapp-button { border-color: #25D366 !important; color: #0f7a3d !important; } button.whatsapp-button:hover { background: #f0fdf4 !important; border-color: #25D366 !important; color: #0f7a3d !important; } button.whatsapp-button.wa-appear { animation: none !important; } button.whatsapp-button > svg { fill: #25D366 !important; } button.whatsapp-button:hover > svg { fill: #0f7a3d !important; } /* ikony równej wielkości */ button.detail-ask-button svg, button.detail-ask-button img, button.whatsapp-button > svg, button.detail-wishlist svg, button.detail-wishlist img, a#ts-safety-btn svg, a#ts-safety-btn img { width: 16px !important; height: 16px !important; margin: 0 !important; flex-shrink: 0; } /* ---------- 4. Kody produktu ---------- */ [data-role="ean"] { color: black !important; } span[data-role="ean"]::before { content: "KOD PRODUKTU:"; } span[data-role="sku"] { display: none; } /* skrypty nadal czytają jego tekst */ .am-sku-link { border-bottom: 1px dotted currentColor; text-decoration: none; } /* ---------- 5. Nagłówki, producent, odstępy ---------- */ h1.headline.detail-headline, h2.headline.detail-accordion-trigger { text-transform: none; letter-spacing: normal; } h2.headline.detail-accordion-trigger { font-size: 14px !important; } .detail-producer-text { display: inline-block; vertical-align: middle; } .detail-producer-text a { display: inline; vertical-align: baseline; text-decoration: none; font-size: inherit; line-height: normal; } .detail-main-wrapper { row-gap: 18px !important; } @media (max-width: 768px) { .detail-main-wrapper { row-gap: 5px !important; } } #breadcrumb { padding-bottom: 5px !important; } /* ---------- 6. Opis produktu ---------- */ #detail-description .detail-accordion.desc-accordion { margin-top: 10px !important; margin-bottom: 0 !important; } #detail-description .detail-accordion.desc-accordion:first-of-type { margin-top: 20px !important; } #detail-description .detail-accordion.desc-accordion .detail-accordion-row { margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } #detail-description .detail-accordion.desc-accordion .detail-accordion-trigger { margin-bottom: 0 !important; padding-top: 12px !important; padding-bottom: 12px !important; } #detail-description #product-reviews-above-desc { margin-top: 0 !important; margin-bottom: 0 !important; } #detail-description .detail-accordion.desc-accordion .detail-accordion-content { padding-top: 4px !important; padding-bottom: 12px !important; } /* tabela specyfikacji (Hepco) */ section table { width: 100%; border-collapse: collapse; margin: 1em 0; font-size: .95em; } section table thead tr { background-color: #f5f5f5; border-bottom: 2px solid #ddd; } section table th { text-align: left; padding: 10px 14px; font-weight: 600; color: #333; } section table tbody tr { border-bottom: 1px solid #eee; } section table tbody tr:nth-child(even) { background-color: #fafafa; } section table td { padding: 9px 14px; color: #444; vertical-align: top; } section table td:first-child { font-weight: 500; color: #555; width: 45%; } /* baner „Kup teraz, zapłać później" */ .payment-banner img { display: block !important; margin: 10px 0 !important; max-width: 70% !important; height: auto !important; width: auto !important; } @media screen and (max-width: 768px) { .payment-banner img { max-width: 50% !important; margin: 10px auto !important; } }