.jpp-layout .body-content, .jpp-layout .page-content, .jpp-layout .page-content-inner { box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; }
.jpp-layout .page-content .page-content-inner { max-width: 1212px; padding-inline: 16px; }
.jpp-page, .jpp-page *, .jpp-page *::before, .jpp-page *::after { box-sizing: border-box; }
.jpp-page { width: 100%; max-width: 1180px; margin: 32px auto 64px; color: #332d3d; }
.jpp-page section, .jpp-actions, .jpp-actions > * { min-width: 0; max-width: 100%; }
.jpp-page p { overflow-wrap: anywhere; line-height: 1.5; }
.jpp-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px 12px; list-style: none; padding: 0; margin: 0 0 16px; font-size: 13px; }
.jpp-breadcrumbs li { min-width: 0; overflow-wrap: anywhere; }
.jpp-breadcrumbs li + li::before { content: "›"; margin-right: 12px; }
.jpp-hub-colours { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.jpp-overview { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 1fr); gap: 36px; align-items: start; }
.jpp-side { grid-column: 2; grid-row: 1; position: sticky; top: 24px; min-width: 0; }
.jpp-media { grid-column: 1; grid-row: 1; min-width: 0; }
.jpp-page h1 { font-size: clamp(26px, 3vw, 38px); line-height: 1.2; overflow-wrap: anywhere; margin: 8px 0 16px; }
.jpp-page h2 { font-size: 24px; margin: 0 0 20px; }
.jpp-kind, .jpp-creator, .jpp-media figcaption { color: #665d73; }
.jpp-kind { margin: 0; }
.jpp-tags, .jpp-palette ul, .jpp-similar ul { list-style: none; padding: 0; }
.jpp-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.jpp-tags li { background: #eee9f4; padding: 4px 10px; border-radius: 16px; overflow-wrap: anywhere; }
.jpp-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 24px 0; }
.jpp-facts dt { color: #665d73; font-size: 13px; }
.jpp-facts dd { margin: 4px 0 0; font-size: 20px; font-weight: 700; }
.jpp-actions { display: grid; gap: 12px; }
.jpp-actions > a { display: block; min-height: 44px; padding: 14px 18px; border-radius: 10px; text-align: center; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.jpp-page a.jpp-primary { background: #655182; color: #fff; }
.jpp-page a.jpp-secondary { border: 1px solid #8d7caa; color: #574171; background: #fff; }
.jpp-tutorial-intro { margin: 0; }
.jpp-remix { margin-top: 48px; padding-top: 24px; border-top: 1px solid #e5dfeb; }
.jpp-remix .jpp-actions { max-width: 480px; }
.jpp-activity { margin-top: 48px; padding-top: 24px; border-top: 1px solid #e5dfeb; }
.jpp-activity-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.jpp-activity-tiles > div { padding: 16px; border-radius: 12px; background: #f6f3f9; min-width: 0; }
.jpp-activity-tiles dt, .jpp-activity-note, .jpp-activity figcaption { color: #665d73; font-size: 13px; }
.jpp-activity-tiles dd { margin: 8px 0 0; font-size: clamp(17px, 2vw, 24px); font-weight: 700; overflow-wrap: anywhere; }
.jpp-activity figure { margin: 20px 0 0; }
.jpp-activity svg { display: block; width: 100%; max-height: 180px; }
@media (max-width: 600px) { .jpp-activity-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.jpp-page button { border: 1px solid #d5cddd; border-radius: 8px; background: #fff; color: inherit; min-height: 44px; min-width: 44px; padding: 8px 10px; font: inherit; cursor: pointer; }
.jpp-page button:disabled { opacity: .55; cursor: default; }
.jpp-page a:focus-visible, .jpp-page button:focus-visible { outline: 3px solid #a366c6; outline-offset: 3px; }
.jpp-hero { grid-column: 1; grid-row: 1; min-width: 0; width: 100%; }
.jpp-hero > .jpp-media:first-child figure:last-child { margin-bottom: 12px; }
.jpp-extra-media:not(:empty) { margin-top: 24px; }
.jpp-reactions { position: relative; min-width: 0; color: #332d3d; isolation: isolate; }
.jpp-reaction-actions { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 420px; }
.jpp-reactions button { position: relative; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 44px; height: 44px; padding: 6px; border: 1px solid #e5dfeb; border-radius: 24px; background: #fff; color: inherit; font: inherit; font-size: 13px; line-height: 1; cursor: pointer; touch-action: manipulation; user-select: none; -webkit-touch-callout: none; }
.jpp-reactions button:disabled { opacity: .55; cursor: default; }
.jpp-reactions button:focus-visible { outline: 3px solid #a366c6; outline-offset: 2px; }
.jpp-reactions .jpp-reaction-like { flex: 1; background: #f7edf4; border-color: #ead3e2; color: #803c69; }
.jpp-reactions [data-jpp-count] { display: inline-block; min-width: 1ch; max-width: 5ch; overflow: hidden; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jpp-reactions [data-jpp-totals] { display: flex; flex: 3; gap: 6px; min-width: 0; list-style: none; padding: 0; margin: 0; }
.jpp-reactions [data-jpp-totals] li { flex: 1; min-width: 0; }
.jpp-reactions [data-jpp-totals] button { width: 100%; }
.jpp-reactions [data-jpp-picker-open] { flex: 0 0 44px; font-size: 24px; color: #79608c; background: #f6f3f9; }
.jpp-reactions .jpp-emoji { font-size: 21px; line-height: 1; }
.jpp-reactions .jpp-reaction-social { height: 22px; margin: 7px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 11px; line-height: 22px; color: #796f83; }
.jpp-reaction-compact { max-width: 360px; }
.jpp-reaction-compact .jpp-emoji { font-size: 18px; }
.jpp-reactions [data-jpp-limit-notice], .jpp-reactions [data-jpp-thanks] { position: absolute; z-index: 5; top: 100%; left: 0; right: 0; width: fit-content; max-width: 100%; margin: 6px 0 0; padding: 10px 14px; border: 1px solid #e5dfeb; border-radius: 12px; background: #fff; box-shadow: 0 4px 18px #332d3d1a; font-size: 12px; line-height: 1.4; }
.jpp-reactions [data-jpp-limit-notice]:not([hidden]) ~ [data-jpp-thanks] { display: none; }
.jpp-reaction-flyer { position: absolute; z-index: 4; pointer-events: none; font-size: 24px; line-height: 1; animation: jpp-reaction-fly 700ms ease-out both; }
.jpp-reaction-activity { padding: 4px 6px; border-radius: 12px; background: #f0e8f6; color: #655182; font-size: 12px; font-weight: 600; }
.jpp-reaction-flyer[hidden] { display: none; }
@keyframes jpp-reaction-fly {
    from { transform: translate(-50%, 0) scale(1); opacity: 1; }
    to { transform: translate(calc(-50% + var(--drift)), var(--rise)) scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .jpp-reaction-flyer { display: none; animation: none; } }
@media (max-width: 760px) {
    .jpp-hero > .jpp-media:first-child [data-jpp-still] img { max-height: min(380px, 45svh); }
}
.jpp-page [aria-pressed="true"] { background: #eee9f4; border-color: #8d7caa; }
.jpp-media figure { margin: 0 0 20px; border-radius: 16px; background: #f6f3f9; overflow: hidden; text-align: center; }
.jpp-media img { width: 100%; max-height: 640px; object-fit: contain; display: block; }
.jpp-ai-video { position: relative; }
.jpp-ai-video video { display: block; width: 100%; height: auto; max-height: 640px; object-fit: contain; }
.jpp-ai-video button { position: absolute; right: 10px; bottom: 10px; width: 36px; height: 36px; padding: 0; border: 0;
  border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; font-size: 0; line-height: 0; cursor: pointer;
  display: grid; place-items: center; }
/* icons drawn in CSS, not glyphs: "❚" is missing from some phone fonts and showed as a small square (prod 14.11) */
.jpp-ai-video button::before { content: ""; display: block; width: 0; height: 0; margin-left: 3px;
  border-style: solid; border-width: 7px 0 7px 12px; border-color: transparent transparent transparent #fff; }
.jpp-ai-video button[data-playing="1"]::before { width: 11px; height: 13px; margin-left: 0; border: 0;
  background: linear-gradient(90deg, #fff 0 4px, transparent 4px 7px, #fff 7px 11px); }
.jpp-ai-video button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.jpp-ai-video button[hidden] { display: none; }
.jpp-media .jpp-preview-tap { display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
.jpp-media .jpp-preview-tap[hidden] { display: none; }
.jpp-media .jpp-preview-tap img { height: auto; aspect-ratio: 1; }
.jpp-preview-crop { display: block; position: relative; overflow: hidden; width: 100%; }
.jpp-media .jpp-preview-crop img { position: absolute; }
.jpp-media .jpp-preview-tap:focus-visible { outline-offset: -3px; }
.jpp-media figcaption { padding: 12px; }
.jpp-no-preview { padding: 48px 16px; }
/* Normal flow reserves room above the entire still / 3D canvas, whatever the kind's bounding box. */
.jpp-media figure.jpp-has-source { position: relative; }
.jpp-steps { display: flex; align-items: center; gap: 6px; width: fit-content; max-width: 100%; padding: 12px 10px 8px; text-align: left; }
.jpp-steps .jpp-step { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: #4d4359; flex: 0 1 76px; min-width: 44px; min-height: 44px; }
.jpp-media .jpp-steps .jpp-step img { width: 56px; height: 56px; max-height: none;
  object-fit: cover; border-radius: 8px; border: 1px solid #e3d7f0; background: #fff; }
.jpp-step-label, .jpp-step-final { font-size: 11px; line-height: 1.3; margin-top: 3px; }
.jpp-step-arrow { font-size: 24px; color: #79608c; flex-shrink: 0; }
.jpp-step-final { display: flex; flex-direction: column; max-width: 100px; font-weight: 600; color: #574171; align-self: flex-end; }
.jpp-step-final > span:first-child { border-radius: 6px; padding: 3px 5px; background: #eee9f4; }
.jpp-step-final .jpp-step-arrow { align-self: flex-end; line-height: 1; }
.jpp-palette, .jpp-similar { margin-top: 48px; }
.jpp-visual-story { max-width: 72ch; margin: 32px auto; padding: 20px; border-radius: 16px; background: #f6f3f9; overflow-wrap: anywhere; }
.jpp-visual-story h2 { margin-top: 0; font-size: clamp(1.25rem, 3vw, 1.75rem); line-height: 1.3; }
.jpp-visual-story p { line-height: 1.7; margin: 1em 0 0; }
.jpp-palette ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; }
.jpp-palette li { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid #e5dfeb; border-radius: 10px; min-width: 0; overflow-wrap: anywhere; }
.jpp-palette-more { margin-top: 12px; }
.jpp-palette-more summary { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid #c9b3d6;
    border-radius: 999px; color: #6b4a85; font-weight: 600; cursor: pointer; list-style: none; }
.jpp-palette-more summary::-webkit-details-marker { display: none; }
.jpp-palette-more summary::after { content: "▾"; margin-left: 8px; }
.jpp-palette-more[open] summary { display: none; }
.jpp-palette-more ul { margin-top: 0; }
.jpp-swatch { width: 36px; height: 36px; border: 1px solid #bdb5c5; border-radius: 50%; flex-shrink: 0; }
.jpp-bead-count { margin-left: auto; white-space: nowrap; font-size: 13px; }
.jpp-similar ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jpp-similar a { display: block; min-height: 44px; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.jpp-similar img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; background: #f6f3f9; border-radius: 12px; }
.jpp-similar span { display: block; margin-top: 8px; }
@media (max-width: 760px) {
    .jpp-page { margin: 20px 0 40px; }
    .jpp-overview { display: flex; flex-direction: column; gap: 24px; }
    .jpp-media { order: -1; width: 100%; }
    .jpp-side { position: static; width: 100%; }
    .jpp-palette ul { grid-template-columns: 1fr; }
    .jpp-similar ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Page-scoped header fixes: shared header CSS is loaded later in the body. */
.jpp-layout .header, .jpp-layout .header * { box-sizing: border-box; }
.jpp-layout .header { width: 100%; max-width: 100%; }
.jpp-layout .header-content, .jpp-layout .header .right-menu { min-width: 0; max-width: 100%; }
@media (max-width: 860px) {
    .jpp-layout .header { padding-inline: 8px; }
    .jpp-layout .header .logo { margin-left: 0; }
    .jpp-layout .header .right-menu { margin-inline: 8px 0; }
    .jpp-layout .header .right-menu .button-primary { min-width: 0; min-height: 44px; max-width: 100%; padding: 8px 10px; font-size: 13px; line-height: 1.3; white-space: normal; margin: 0; display: flex; align-items: center; justify-content: center; }
    .jpp-layout .header .dd, .jpp-layout .header .dd-a { min-width: 44px; min-height: 44px; }
    .jpp-layout .header .language-switcher-content a, .jpp-layout .header .currency-switcher-content a { min-height: 44px; }
    /* the header spacer now reserves the language/currency row (HeaderLoggedIn.css): no extra top margin on phones */
    .jpp-page { margin-top: 8px; }
}
.jpp-page .jpp-report-pattern { display: block; margin-top: 16px; min-height: 44px; padding: 8px 0; border: 0; background: transparent; color: #665d73; font: inherit; font-size: 13px; text-decoration: underline; cursor: pointer; }
.jpp-dialog { box-sizing: border-box; width: min(640px,calc(100% - 24px)); max-height: 90vh; max-height: 90dvh; overflow: auto; border: 1px solid #d5cddd; border-radius: 16px; padding: 20px; color: #332d3d; }
.jpp-dialog::backdrop { background: rgb(30 20 40 / .65); }
.jpp-dialog h2 { margin: 12px 0; }
.jpp-dialog > img { display: block; width: 100%; height: auto; max-height: 65vh; object-fit: contain; margin: 12px 0; }
.jpp-dialog [data-jpp-totals] img { width: 24px; height: 24px; }
.jpp-dialog form { display: grid; gap: 16px; }
.jpp-dialog label { display: block; overflow-wrap: anywhere; }
.jpp-dialog textarea, .jpp-dialog input[type=file] { box-sizing: border-box; width: 100%; font: inherit; }
.jpp-dialog textarea { min-height: 96px; padding: 10px; }
.jpp-dialog input[type=checkbox], .jpp-dialog input[type=radio] { width: 20px; height: 20px; margin: 10px 8px 10px 0; vertical-align: middle; }
.jpp-dialog fieldset { border: 0; padding: 0; min-width: 0; }
.jpp-dialog [data-jpp-close] { display: block; margin-left: auto; }
.jpp-dialog .jpp-report-rights { font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }

/* Spacing pass (owner 14.11: "bardzo duże marginesy … większość to jest przerwa po prostu biała"). The SEO text had
   no own styles and inherited the site's big h2/h3 + loose leading; sections were 48 px apart with 24 px rules. */
.jpp-section { margin-top: 32px; }
.jpp-section > section { margin-top: 20px; }
.jpp-section h3 { font-size: 19px; line-height: 1.3; margin: 0 0 8px; }
.jpp-section p, .jpp-section dd { line-height: 1.6; margin: 0; }
.jpp-section dl { margin: 0; }
.jpp-section dt { font-weight: 700; margin-top: 12px; }
.jpp-section dd { margin: 4px 0 0; }
.jpp-palette, .jpp-similar { margin-top: 36px; }
.jpp-remix { margin-top: 36px; padding-top: 20px; }
@media (max-width: 760px) {
    .jpp-page { margin: 12px 0 32px; }
    .jpp-overview { gap: 16px; }
    .jpp-page h1 { margin: 4px 0 10px; }
    .jpp-page h2 { font-size: 21px; line-height: 1.25; margin: 0 0 12px; }
    .jpp-section h3 { font-size: 17px; }
    .jpp-section, .jpp-palette, .jpp-similar, .jpp-remix { margin-top: 28px; }
    .jpp-section > section { margin-top: 16px; }
    .jpp-remix { padding-top: 16px; }
    .jpp-facts { margin: 14px 0; gap: 8px 12px; }
    .jpp-facts dd { font-size: 18px; }
    .jpp-media figure { margin-bottom: 10px; }
    .jpp-extra-media:not(:empty) { margin-top: 12px; }
    .jpp-visual-story { margin: 24px 0; padding: 16px; }
    .jpp-palette ul { gap: 8px; }
    .jpp-palette li { padding: 8px 10px; }
    .jpp-swatch { width: 28px; height: 28px; }
    .jpp-similar ul { gap: 12px; }
    .jpp-similar span { margin-top: 6px; font-size: 14px; line-height: 1.35; }
}