/**
 * Sekcja "Czy wiesz że?" na karcie produktu.
 *
 * Wariant wybiera się w konfiguracji modułu; każdy dokłada do sekcji klasę
 * .pixel-productfunfact--<wariant>. Wartości przepisane z makiety
 * docs/warianty-czy-wiesz.html.
 */
.pixel-productfunfact {
  --fact-ink: #262221;
  --fact-muted: #656069;
  --fact-green: var(--pixel-green, #144b2b);
  --fact-green-soft: rgba(20, 75, 43, 0.08);
  --fact-hair: rgba(20, 75, 43, 0.14);
  --fact-beige: var(--pixel-beige-light, #faf9f4);

  margin: 0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--fact-ink);
}

/* nagłówek renderuje moduł, więc tytuł zakładki z motywu byłby drugi */
#pixel_productfunfact > .product__tab-title,
.pixel_productfunfact > .product__tab-title {
  display: none;
}

.pixel-productfunfact__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
}

.pixel-productfunfact__content,
.pixel-productfunfact__content p {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--fact-muted);
}

.pixel-productfunfact__content p { margin: 0; }
.pixel-productfunfact__content p + p { margin-top: 0.5rem; }
.pixel-productfunfact__content > :last-child { margin-bottom: 0; }

.pixel-productfunfact__icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.pixel-productfunfact__icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

/* ------------------------------------------------------------ karta */
.pixel-productfunfact--card .pixel-productfunfact__box {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border-radius: 14px;
  /* bez ramki, sam cień 1:1 z .pixel-productfunctions__item */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.pixel-productfunfact--card .pixel-productfunfact__icon {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  background: var(--fact-green-soft);
  color: var(--fact-green);
}

.pixel-productfunfact--card .pixel-productfunfact__title { margin-bottom: 0.375rem; }

/* ------------------------------------------------------------ pasek */
.pixel-productfunfact--banner .pixel-productfunfact__box {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.5rem 1.75rem;
  background: var(--fact-green);
  color: #fff;
  border-radius: 14px;
}

.pixel-productfunfact--banner .pixel-productfunfact__icon {
  width: 2.625rem;
  height: 2.625rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.pixel-productfunfact--banner .pixel-productfunfact__title { margin-bottom: 0.375rem; }

.pixel-productfunfact--banner .pixel-productfunfact__content,
.pixel-productfunfact--banner .pixel-productfunfact__content p {
  color: rgba(255, 255, 255, 0.86);
}

/* -------------------------------------------------------- karteczka */
.pixel-productfunfact--note .pixel-productfunfact__box {
  position: relative;
  padding: 1.75rem;
  background: var(--fact-beige);
  border: 1px dashed var(--fact-hair);
  border-radius: var(--pixel-border-radius, 10px);
}

.pixel-productfunfact--note .pixel-productfunfact__icon {
  position: absolute;
  top: -1rem;
  left: 1.5rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--fact-green);
  color: #fff;
}

.pixel-productfunfact--note .pixel-productfunfact__icon svg { width: 1.125rem; height: 1.125rem; }
.pixel-productfunfact--note .pixel-productfunfact__title { margin-bottom: 0.375rem; }

/* ------------------------------------------------------------ panel */
.pixel-productfunfact--panel .pixel-productfunfact__box {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--fact-hair);
  border-radius: 14px;
}

.pixel-productfunfact--panel .pixel-productfunfact__head {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  padding: 0.75rem 1.5rem;
  background: var(--fact-green);
  color: #fff;
}

.pixel-productfunfact--panel .pixel-productfunfact__icon { width: 1.25rem; height: 1.25rem; color: #fff; }
.pixel-productfunfact--panel .pixel-productfunfact__icon svg { width: 1.25rem; height: 1.25rem; }

.pixel-productfunfact--panel .pixel-productfunfact__title {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pixel-productfunfact--panel .pixel-productfunfact__body { padding: 1.25rem 1.5rem; }

/* ------------------------------------------------------------ dymek */
.pixel-productfunfact--bubble .pixel-productfunfact__box {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.pixel-productfunfact--bubble .pixel-productfunfact__icon {
  width: 2.75rem;
  height: 2.75rem;
  margin-top: 0.375rem;
  border-radius: 50%;
  background: var(--fact-green);
  color: #fff;
}

.pixel-productfunfact--bubble .pixel-productfunfact__bubble {
  position: relative;
  flex: 1 1 auto;
  padding: 1.125rem 1.375rem;
  background: var(--fact-beige);
  border: 1px solid var(--fact-hair);
  border-radius: 14px;
}

/* ogonek dymka - dwa trójkąty, żeby obramowanie się nie urwało */
.pixel-productfunfact--bubble .pixel-productfunfact__bubble::before,
.pixel-productfunfact--bubble .pixel-productfunfact__bubble::after {
  content: "";
  position: absolute;
  top: 1.125rem;
  border-style: solid;
  border-width: 0.5rem 0.625rem 0.5rem 0;
}

.pixel-productfunfact--bubble .pixel-productfunfact__bubble::before {
  left: -0.625rem;
  border-color: transparent var(--fact-hair) transparent transparent;
}

.pixel-productfunfact--bubble .pixel-productfunfact__bubble::after {
  left: -0.5rem;
  border-color: transparent var(--fact-beige) transparent transparent;
}

.pixel-productfunfact--bubble .pixel-productfunfact__title {
  margin-bottom: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fact-green);
}

/* -------------------------------------------------------- rozwijane */
.pixel-productfunfact--collapse .pixel-productfunfact__box {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--fact-hair);
  border-radius: 14px;
}

.pixel-productfunfact--collapse summary {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding: 1rem 1.5rem;
  cursor: pointer;
  list-style: none;
}

.pixel-productfunfact--collapse summary::-webkit-details-marker { display: none; }

.pixel-productfunfact--collapse .pixel-productfunfact__icon {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--fact-green-soft);
  color: var(--fact-green);
}

.pixel-productfunfact--collapse .pixel-productfunfact__icon svg { width: 1.125rem; height: 1.125rem; }

.pixel-productfunfact--collapse .pixel-productfunfact__chevron {
  width: 0.5rem;
  height: 0.5rem;
  margin-left: auto;
  border-right: 2px solid var(--fact-muted);
  border-bottom: 2px solid var(--fact-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.pixel-productfunfact--collapse details[open] .pixel-productfunfact__chevron { transform: rotate(225deg); }

.pixel-productfunfact--collapse .pixel-productfunfact__body { padding: 0 1.5rem 1.25rem 4.25rem; }

/* ---------------------------------------------------------- zielnik */
.pixel-productfunfact--herbarium .pixel-productfunfact__box {
  position: relative;
  padding: 1.75rem 2rem;
  background: var(--fact-beige);
  border: 1px solid var(--fact-green);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px var(--fact-beige), inset 0 0 0 2px rgba(20, 75, 43, 0.35);
}

.pixel-productfunfact--herbarium .pixel-productfunfact__no {
  position: absolute;
  top: 0.875rem;
  right: 1.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(20, 75, 43, 0.55);
}

.pixel-productfunfact--herbarium .pixel-productfunfact__title {
  margin-bottom: 0.75rem;
  padding-bottom: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fact-green);
  border-bottom: 1px solid rgba(20, 75, 43, 0.25);
}

.pixel-productfunfact--herbarium .pixel-productfunfact__content,
.pixel-productfunfact--herbarium .pixel-productfunfact__content p { color: var(--fact-ink); }

/* ---------------------------------------------------------- znaczek */
.pixel-productfunfact--stamp .pixel-productfunfact__box {
  position: relative;
  padding: 1.75rem 2.25rem 1.75rem 2rem;
  background: #fff;
  border: 1px solid var(--fact-hair);
  /* perforacja: maska wycina półkola wzdłuż krawędzi */
  -webkit-mask:
    radial-gradient(circle 5px at 0 50%, transparent 98%, #000) left / 100% 1.25rem repeat-y,
    radial-gradient(circle 5px at 100% 50%, transparent 98%, #000) right / 100% 1.25rem repeat-y;
  mask:
    radial-gradient(circle 5px at 0 50%, transparent 98%, #000) left / 100% 1.25rem repeat-y,
    radial-gradient(circle 5px at 100% 50%, transparent 98%, #000) right / 100% 1.25rem repeat-y;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.pixel-productfunfact--stamp .pixel-productfunfact__seal {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  padding: 0.25rem 0.625rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(20, 75, 43, 0.7);
  border: 2px solid rgba(20, 75, 43, 0.45);
  border-radius: 3px;
  transform: rotate(-8deg);
}

.pixel-productfunfact--stamp .pixel-productfunfact__title {
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
}

/* ----------------------------------------------------- listek w tle */
.pixel-productfunfact--watermark .pixel-productfunfact__box {
  position: relative;
  overflow: hidden;
  padding: 1.75rem 2rem;
  background: #fff;
  border: 1px solid var(--fact-hair);
  border-radius: 14px;
}

.pixel-productfunfact--watermark .pixel-productfunfact__mark {
  position: absolute;
  top: -2.5rem;
  right: -2rem;
  width: 12rem;
  height: 12rem;
  color: var(--fact-green);
  opacity: 0.07;
  transform: rotate(12deg);
  pointer-events: none;
}

.pixel-productfunfact--watermark .pixel-productfunfact__mark svg { width: 100%; height: 100%; }

.pixel-productfunfact--watermark .pixel-productfunfact__title {
  position: relative;
  margin-bottom: 0.5rem;
  padding-left: 0.75rem;
  border-left: 3px solid var(--fact-green);
}

.pixel-productfunfact--watermark .pixel-productfunfact__content { position: relative; }

@media (max-width: 600px) {
  .pixel-productfunfact--banner .pixel-productfunfact__box,
  .pixel-productfunfact--note .pixel-productfunfact__box,
  .pixel-productfunfact--herbarium .pixel-productfunfact__box,
  .pixel-productfunfact--stamp .pixel-productfunfact__box,
  .pixel-productfunfact--watermark .pixel-productfunfact__box { padding: 1.25rem; }

  .pixel-productfunfact--collapse .pixel-productfunfact__body { padding: 0 1.25rem 1.125rem; }
}