/* MOL-GOD unified accordion styling + chevron (v1.8.0-rc.2) */
/* Matches: details.molgod-acc, details[class*="molgod-"][class*="-accordion"], molgod-shortcode details */

.molgod-accordions details,
.molgod-shortcode details,
details.molgod-acc,
details[class*="molgod-"][class*="-accordion"],
details[class*="molgod-"][class*="-widget"],
details[class*="molgod-"][class*="-calculator"] {
  margin: 8px 0 !important;
  border: 1px solid #e6ebf2 !important;
  border-radius: 8px !important;
  background: #fff !important;
  overflow: hidden;
  transition: border-color .15s;
}
.molgod-accordions details:hover,
details.molgod-acc:hover,
details[class*="molgod-"][class*="-accordion"]:hover {
  border-color: #c8d2e0 !important;
}
.molgod-accordions details > summary,
details.molgod-acc > summary,
details[class*="molgod-"][class*="-accordion"] > summary,
details[class*="molgod-"][class*="-widget"] > summary,
details[class*="molgod-"][class*="-calculator"] > summary {
  cursor: pointer !important;
  padding: 14px 18px !important;
  list-style: none !important;
  font-weight: 600 !important;
  color: #e8722e !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  user-select: none !important;
  position: relative;
  padding-right: 36px !important;
}
.molgod-accordions details > summary::-webkit-details-marker,
details.molgod-acc > summary::-webkit-details-marker,
details[class*="molgod-"] > summary::-webkit-details-marker {
  display: none !important;
}
/* Chevron arrow via ::after — ONLY when summary doesn't already have inline SVG */
.molgod-accordions details > summary:not(:has(svg))::after,
details.molgod-acc > summary:not(:has(svg))::after,
details[class*="molgod-"][class*="-accordion"] > summary:not(:has(svg))::after,
details[class*="molgod-"][class*="-widget"] > summary:not(:has(svg))::after,
details[class*="molgod-"][class*="-calculator"] > summary:not(:has(svg))::after {
  content: "";
  width: 10px; height: 10px;
  border-right: 2px solid #8693a5;
  border-bottom: 2px solid #8693a5;
  transform: translateY(-50%) rotate(45deg);
  transition: transform .18s ease;
  position: absolute;
  right: 14px;
  top: 50%;
}
.molgod-accordions details[open] > summary:not(:has(svg))::after,
details.molgod-acc[open] > summary:not(:has(svg))::after,
details[class*="molgod-"][class*="-accordion"][open] > summary:not(:has(svg))::after,
details[class*="molgod-"][class*="-widget"][open] > summary:not(:has(svg))::after,
details[class*="molgod-"][class*="-calculator"][open] > summary:not(:has(svg))::after {
  transform: translateY(-50%) rotate(-135deg);
}
/* Rotate existing inline SVGs too */
details[open] > summary svg {
  transform: rotate(180deg);
}
details > summary svg {
  transition: transform .18s ease;
}

/* Accordion body padding */
.molgod-accordions details > *:not(summary),
details.molgod-acc > *:not(summary),
details[class*="molgod-"][class*="-accordion"] > *:not(summary),
details[class*="molgod-"][class*="-widget"] > *:not(summary),
details[class*="molgod-"][class*="-calculator"] > *:not(summary) {
  padding: 0 18px 14px 18px !important;
}

/* Trust badge — always at very bottom */
.molgod-trust-badge {
  margin-top: 24px !important;
  margin-bottom: 0 !important;
}

/* Hide MS uploader inline-style fallback (must be inside details body) */
.molgod-ms-uploader-standalone {
  display: none !important;
}

/* SSR prose block — hidden from regular users (content shown via lazy accordion instead).
 * Visible to: Common Crawl (no CSS), users with JS disabled (no-js class), print. */
.molgod-ssr-overview {
  display: none;
}
.no-js .molgod-ssr-overview {
  display: block;
  margin: 0 0 1.5rem;
  padding: 1.2rem 1.5rem;
  background: #f9f9f9;
  border-left: 4px solid #0073aa;
  border-radius: 4px;
}
@media print {
  .molgod-ssr-overview {
    display: block !important;
  }
}
.molgod-ssr-content p { margin: 0 0 .85rem; line-height: 1.65; }
.molgod-ssr-content p:last-child { margin-bottom: 0; }

/* 2026-06-21 (UX): Wizualizator molekuly 3D owiniety w <details class="molgod-acc molgod-visualizer-acc"> (commit D2).
   Globalna regula '.molgod-acc > *:not(summary)' wcina kazde dziecko o 18px po bokach -> hero widget przestal
   wypelniac kolumne (operator: ma wypelniac kolumne jak przed owinieciem, akordeon zostaje).
   GENERYCZNE (kazdy produkt, nie per-molekula): zdejmij padding boczny i wymus pelna szerokosc widgetu
   tylko dla tego jednego akordeonu (wyzsza specyficznosc .molgod-acc.molgod-visualizer-acc bije regule bazowa). */
/* Pelna szerokosc: wizualizator owiniety w <details> siedzial w prawej kolumnie (~610px),
   beside floated gallery. clear:both zrzuca go pod galerię i rozciaga na pelna szerokosc
   div.product (1080px) -> render molekuly jak przed owinieciem w akordeon. Headless proof:
   610px@x650 -> 1080px@x180, figure 576 -> 1046. GENERYCZNE (kazdy produkt). */
details.molgod-acc.molgod-visualizer-acc {
  clear: both !important;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
/* Naglowek: summary mial justify-content:space-between -> pomaranczowy tytul wpychany w prawo i
   nachodzil na badge ID (position:absolute mu-plugin). flex-start trzyma emoji+tytul po lewej,
   badge zostaje po prawej (bez kolizji). Headless proof: tytul x 1048 -> 244. */
details.molgod-acc.molgod-visualizer-acc > summary {
  justify-content: flex-start !important;
}
details.molgod-acc.molgod-visualizer-acc > *:not(summary) {
  padding: 0 !important;
}
details.molgod-visualizer-acc .mol-god-woo-wrapper,
details.molgod-visualizer-acc .molgod-widget {
  width: 100% !important;
  max-width: none !important;
}

/* 2026-06-21 (operator): "BADANIA NAUKOWE" (.molgod-research-section) jako KAFELKI (grid) zamiast
   pionowej listy. CSS-only (generator class-research-section-generator.php jest HARD -> nie ruszamy).
   Naglowek pelna szerokosc, karty w responsywnych kolumnach. GENERYCZNE (kazdy produkt). */
.molgod-research-section {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)) !important;
  gap: 12px !important;
  align-items: start !important;
}
.molgod-research-section > .molgod-research-heading {
  grid-column: 1 / -1 !important;
  margin-bottom: 2px !important;
}
.molgod-research-section > .molgod-research-card {
  margin-bottom: 0 !important;
}
@media (max-width: 600px) {
  .molgod-research-section { grid-template-columns: 1fr !important; }
}

/* 2026-06-21 (operator: "chce widziec ID, koniec i kropka"): znies FIX-A z accordion-id-badge.js
   ('.molgod-acc-id{display:none!important}' + '.molgod-id-tag{display:none!important}' wstrzykiwane JS-em,
   audyt 2026-06-15 "hide leaked ID token"). Decyzja operatora NADPISUJE ten audyt. Wyzsza specyficznosc
   (body .klasa = 0,1,1 > .klasa = 0,1,0) bije regule niezaleznie od kolejnosci. Server-side spany ID
   widoczne+kopiowalne (user-select:all juz inline) dla WSZYSTKICH, bez mu-plugina, zero kosztu perf. */
body .molgod-acc-id,
body .molgod-id-tag {
  display: inline-block !important;
}


/* =============================================================================
   OBSZAR DOTYKOWY ODNOSNIKOW PRZYPISOW — 2026-09-08

   Odnosniki `[N]` maja 11,03 x 13 px (osiem sztuk) i 16,5 x 12 px (szesc).
   Zrodlo rozmiaru: `font-size:10px` wstrzykiwany INLINE z emitera
   (class-physchem-properties.php:2134/:2915/:3076) plus `line-height:0`
   dziedziczone ze Storefront style.css:31 — `sup,sub{font-size:75%;height:0;
   line-height:0;position:relative}`. Reguly konkuruja: inline 10px nadpisuje
   te 75 % (9,75 px).

   ROZSZERZAMY WYLACZNIE W PIONIE i to jest decyzja, nie oszczednosc.
   Wariant rozszerzajacy takze w poziomie zostal ODRZUCONY po pomiarze: na
   siarczanie miedzi 7758-98-7 dwa markery stoja 11,03 px od siebie i przy
   poziomym rozszerzeniu 2 z 11 odnosnikow tracily WLASNY srodek — strefa
   sasiada przejmowala klikniecie. Pion takiego ryzyka nie ma, bo markery
   nie stoja jeden nad drugim.

   NIE JEST TO DOMKNIECIE WCAG 2.5.8. Pole rosnie o 85 %, ale nadal nie ma
   24 x 24 px. Zmierzony zysk: sonda pionowa (0, +/-11) trafia 0 -> 14.
   Kontrola: sonda (0, +/-13) nadal 0, bo strefa ma dokladnie 24 px wysokosci —
   przyrzad nie klamie. Sondy poziome (+/-8, 0) i (+/-11, 0) bez zmian.

   UKLAD NIETKNIETY — zmierzone przed i po na dwoch kartach i dwoch
   szerokosciach: zero roznicy w 19 wymiarach (dokument, obie tabele,
   wszystkie komorki TD, wszystkie akordeony). Naiwny wariant
   `inline-block; min-height:24px` dawal +143 px na dokumencie i rozpychal
   tabele z 462,4 na 582,2 px — dlatego go tu nie ma.
   ============================================================================= */
.molgod-accordions a[href^="#ref-"] {
    position: relative;
}

.molgod-accordions a[href^="#ref-"]::after {
    content:        '';
    position:       absolute;
    left:           0;
    width:          100%;
    /* 24 px wysokosci wysrodkowane na odnosniku; poziom NIETKNIETY */
    top:            50%;
    height:         24px;
    transform:      translateY(-50%);
    /* nie zabiera zdarzen samemu odnosnikowi, tylko powieksza jego obszar */
    pointer-events: auto;
}