/* =====================================================================
   karta8.css — aleMotocykl.pl · CSS karty produktu (jeden plik, podpięty przez <link> w <head>)
   Wpis GoShop: Bezpośrednio · Karta produktu · Sekcja <head> · priorytet -100:
   <link rel="stylesheet" href="/custom3/karta8.css">
   v8 vs v7: na desktopie (>=1280 px) kolumna z boxem AI i kontaktem spadała pod galerię — elastyczny rząd liczył się
   „na pełną szerokość” (E-mail + WhatsApp + oba przyciski w jednej linii). contain:inline-size na rzędzie przycisków.
   v7 vs v6: poprawka 3b — na żywo siatka 2×2 z innego skryptu nadpisywała układ (linia rozjeżdżała się na pół),
   a jego maska ucinała ikonę koperty. Wyższa waga selektorów + mask:none.
   v6 vs v5: (3b) „Zapytaj o produkt” + WhatsApp jako jedna linia „Wolisz napisać? ✉ E-mail · WhatsApp”
   (koperta zamiast dymka), „Dodaj do ulubionych” + „Bezpieczne zakupy” zawsze w jednym rzędzie (mobile i desktop);
   Same style — przyciski i ich działanie bez zmian. (Poprawka rozjeżdżania boxu AI na iOS jest w osobnym wpisie.)
   Cofnięcie: podmień href z powrotem na karta5.css.
   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 <b>) */
#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 <del> (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;
}

/* ---------- 3b. (v6) Kontakt do człowieka jako jedna linia + Ulubione / Bezpieczne zakupy w jednym rzędzie ----------
   Układ: „Wolisz napisać?  ✉ E-mail · WhatsApp”  /  [☆ Dodaj do ulubionych] [🛡 Bezpieczne zakupy]
   Same style — przyciski zostają te same (formularz GoShop, WhatsApp z wha14_u.js), zmienia się tylko wygląd.
   Łamanie wierszy: flex-wrap + ::after z flex-basis 100% i order 3 = „twardy enter” między linią a rzędem. 
   v7: selektory z „body” — skrypt wstrzykujący <style id="btn-emoji-grid-styles"> (siatka 2×2, display:grid !important)
   ładuje się PO tym pliku i przy tej samej wadze wygrywał; „body …” ma większą wagę, więc kolejność nie ma znaczenia. */
body .detail-buttons-wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 10px 10px !important;
  contain: inline-size;                 /* v8: szerokość boxu nie wpływa na kolumnę — bez tego na desktopie (>=1280)
                                           kolumna z boxem AI spadała pod galerię */
}
body .detail-buttons-wrapper::before {
  content: "Wolisz napisać?";
  order: 0;
  font-size: 13.5px;
  font-weight: 400;
  color: #6b7280;
  line-height: 1.2;
}
body .detail-buttons-wrapper::after {
  content: "";
  order: 3;
  flex: 0 0 100%;
  height: 0;
}
/* E-mail i WhatsApp: linki tekstowe, nie kafelki */
body .detail-buttons-wrapper button.detail-ask-button,
body .detail-buttons-wrapper button.whatsapp-button {
  width: auto !important;
  min-height: 0 !important;
  padding: 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  gap: 5px !important;
  font-size: 0 !important;              /* chowa oryginalny napis, nowy w ::after */
}
body .detail-buttons-wrapper button.detail-ask-button { order: 1; color: #1f2937 !important; }
body .detail-buttons-wrapper button.whatsapp-button { order: 2; color: #0f7a3d !important; }
body .detail-buttons-wrapper button.detail-ask-button:hover,
body .detail-buttons-wrapper button.whatsapp-button:hover { background: none !important; text-decoration: underline !important; }
body .detail-buttons-wrapper button.whatsapp-button > span { display: none !important; }
body .detail-buttons-wrapper button.detail-ask-button::after { content: "E-mail" !important; display: inline !important; font-size: 13.5px !important; }
body .detail-buttons-wrapper button.whatsapp-button::after { content: "WhatsApp" !important; display: inline !important; font-size: 13.5px !important; }
/* koperta zamiast dymka (ikona motywu w ::before) */
body .detail-buttons-wrapper button.detail-ask-button::before {
  content: "" !important;
  font-family: inherit !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  position: static !important;          /* motyw ustawia ikonę absolutnie */
  -webkit-mask: none !important;        /* skrypt btn-emoji-grid nakłada maskę dymka → koperta była ucięta */
  mask: none !important;
  background: no-repeat center / 16px 16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") !important;
}
/* kropka między E-mail i WhatsApp */
body .detail-buttons-wrapper button.whatsapp-button::before {
  content: "·" !important;
  font-size: 16px !important;
  color: #9ca3af !important;
  margin-right: 5px !important;
  display: inline !important;
}
body .detail-buttons-wrapper button.whatsapp-button > svg { width: 15px !important; height: 15px !important; }
/* Ulubione + Bezpieczne zakupy: zawsze dwa obok siebie */
body .detail-buttons-wrapper button.detail-wishlist { order: 4; }
body .detail-buttons-wrapper a#ts-safety-btn { order: 5; }
body .detail-buttons-wrapper button.detail-wishlist,
body .detail-buttons-wrapper a#ts-safety-btn {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  width: auto !important;
  border: 1px solid #e5e7eb !important;   /* równa ramka obu przycisków (inny skrypt dawał grubszą szarą) */
}
@media (max-width: 400px) {
  body .detail-buttons-wrapper button.detail-wishlist,
  body .detail-buttons-wrapper a#ts-safety-btn {
    font-size: 12.5px !important;
    padding: 8px 6px !important;
    gap: 5px !important;
    white-space: normal !important;     /* na bardzo wąskich ekranach napis może zejść do 2 linii */
    text-align: center !important;
  }
}

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