/* =========================================================================
   CRUJIENTE - design system + baza + komponenty + header/footer
   Autor: ArCode PRO
   Konwencja klas: .crj-* (BEM-lite). Tokeny w :root.
   ========================================================================= */

/* ---------- 1. Tokeny ---------- */
:root {
  --terakota: #C0574F;
  --terakota-ciemna: #8E3A34;
  --kremowy: #FBE9E7;
  --atrament: #1E2136;
  --biel: #FFFFFF;

  --ink-20: rgba(30, 33, 54, .2);
  --ink-35: rgba(30, 33, 54, .35);
  --ink-45: rgba(30, 33, 54, .45);
  --ink-12: rgba(30, 33, 54, .12);
  --cream-20: rgba(251, 233, 231, .2);
  --cream-25: rgba(251, 233, 231, .25);
  --cream-40: rgba(251, 233, 231, .4);
  --cream-50: rgba(251, 233, 231, .5);

  --c-ziemny: #E8B44A;
  --c-migdal: #C98F5E;
  --c-nerkowiec: #F0DFC4;
  --c-pistacja: #7FA86A;
  --c-czekolada: #6B4230;
  --c-biala-czeko: #EFD9C3;

  --font-display: 'Shantell Sans', 'Comic Sans MS', cursive;
  --font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-text: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --r-card: 28px;
  --r-box: 24px;
  --r-pill: 999px;
  --blob-1: 44% 56% 58% 42% / 46% 42% 58% 54%;
  --blob-2: 56% 44% 42% 58% / 42% 56% 44% 58%;
  --blob-img: 38% 62% 54% 46% / 48% 44% 56% 52%;

  --container: 1240px;
  --gutter: 40px;
  --header-h: 76px;
  --topbar-h: 34px;

  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --t-fast: .2s;
  --t-med: .3s;
}
@media (max-width: 767px) {
  :root { --gutter: 22px; --header-h: 72px; --topbar-h: 30px; }
}

/* ---------- 2. Reset / baza ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html:focus-within { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--kremowy);
  color: var(--atrament);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg { max-width: 100%; height: auto; display: block; }
img { font-style: italic; }
a { color: var(--terakota-ciemna); text-decoration-color: rgba(142, 58, 52, .4); text-underline-offset: 3px; }
a:hover { color: var(--atrament); }
::selection { background: var(--terakota); color: var(--kremowy); }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
:focus-visible { outline: 3px solid var(--terakota); outline-offset: 3px; border-radius: 4px; }
.crj-on-dark :focus-visible, .crj-bg-terra :focus-visible, .crj-bg-terra-dark :focus-visible, .crj-bg-ink :focus-visible { outline-color: var(--kremowy); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.crj-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.crj-nowrap { white-space: nowrap; }
.crj-times { font-family: var(--font-mono); font-weight: 700; font-size: .72em; vertical-align: .1em; margin: 0 .06em; }

/* skip link */
.crj-skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--atrament); color: var(--kremowy); padding: 12px 18px; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 13px; text-decoration: none; }
.crj-skip:focus { top: 12px; color: var(--kremowy); }

/* ---------- 3. Uklad ---------- */
.crj-container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.crj-container--narrow { max-width: calc(1000px + 2 * var(--gutter)); }
.crj-container--text { max-width: calc(760px + 2 * var(--gutter)); }
.crj-section { padding: 80px 0 96px; }
.crj-section--tight { padding: 56px 0 64px; }
@media (max-width: 767px) { .crj-section { padding: 52px 0 60px; } .crj-section--tight { padding: 40px 0 44px; } }

.crj-bg-cream { background: var(--kremowy); color: var(--atrament); }
.crj-bg-white { background: var(--biel); color: var(--atrament); }
.crj-bg-terra { background: var(--terakota); color: var(--kremowy); }
.crj-bg-terra-dark { background: var(--terakota-ciemna); color: var(--kremowy); }
.crj-bg-ink { background: var(--atrament); color: var(--kremowy); }
:where(.crj-bg-terra, .crj-bg-terra-dark, .crj-bg-ink) a:where(:not(.crj-btn)) { color: inherit; }
/* Przyciski zawsze wygrywaja z dziedziczeniem koloru z ciemnych sekcji. */
.crj-bg-terra .crj-btn--cream-solid, .crj-bg-terra-dark .crj-btn--cream-solid, .crj-bg-ink .crj-btn--cream-solid { color: var(--terakota-ciemna); }
.crj-bg-terra .crj-btn--cream-solid:hover, .crj-bg-terra-dark .crj-btn--cream-solid:hover, .crj-bg-ink .crj-btn--cream-solid:hover { color: var(--kremowy); }
.crj-bg-terra .crj-btn--cream, .crj-bg-terra-dark .crj-btn--cream, .crj-bg-ink .crj-btn--cream { color: var(--kremowy); }
.crj-bg-terra .crj-btn--cream:hover, .crj-bg-terra-dark .crj-btn--cream:hover, .crj-bg-ink .crj-btn--cream:hover { color: var(--terakota-ciemna); }

.crj-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.crj-grid { display: grid; gap: 24px; }
.crj-grid--3 { grid-template-columns: repeat(3, 1fr); }
.crj-grid--2 { grid-template-columns: repeat(2, 1fr); }
.crj-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .crj-grid--3, .crj-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .crj-grid--3, .crj-grid--2, .crj-grid--4 { grid-template-columns: 1fr; } }

/* ---------- 4. Typografia ---------- */
.crj-t-hero { font-family: var(--font-display); font-weight: 850; font-size: clamp(52px, 8.5vw, 128px); line-height: 1.12; letter-spacing: -.01em; }
.crj-t-h1 { font-family: var(--font-display); font-weight: 850; font-size: clamp(44px, 6vw, 92px); line-height: 1.02; }
.crj-t-h2 { font-family: var(--font-display); font-weight: 850; font-size: clamp(36px, 4.2vw, 60px); line-height: 1.02; }
.crj-t-h2-lg { font-family: var(--font-display); font-weight: 850; font-size: clamp(40px, 4.6vw, 68px); line-height: 1.0; }
.crj-t-h3 { font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; }
.crj-t-h4 { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.15; }
.crj-t-lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.65; }
.crj-t-body { font-size: 17px; line-height: 1.6; }
.crj-t-small { font-size: 15px; line-height: 1.6; }
.crj-t-italic { font-family: var(--font-display); font-style: italic; font-weight: 600; }
.crj-mono { font-family: var(--font-mono); }
.crj-eyebrow { font-family: var(--font-mono); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; line-height: 1.5; }
.crj-eyebrow--sm { font-size: 12.5px; letter-spacing: .18em; }
.crj-label { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; }
.crj-eyebrow-line { display: flex; align-items: baseline; gap: 14px; margin: 0; font-family: var(--font-mono); font-weight: 400; font-size: 13.5px; letter-spacing: .18em; text-transform: uppercase; line-height: 1.5; }
.crj-eyebrow-line__bar { flex: none; display: inline-block; width: 34px; height: 2px; background: currentColor; transform: translateY(-4px); }
.crj-t-center { text-align: center; }
.crj-t-terra { color: var(--terakota); }
.crj-t-terra-dark { color: var(--terakota-ciemna); }

/* ---------- 5. Przyciski ---------- */
.crj-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--font-mono); font-weight: 700; font-size: 15px; letter-spacing: .12em; text-transform: uppercase; line-height: 1.2;
  padding: 18px 34px; border-radius: var(--r-pill); border: 2px solid var(--atrament);
  background: var(--atrament); color: var(--kremowy); text-decoration: none; cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
  text-align: center;
}
.crj-btn:hover { background: var(--terakota-ciemna); border-color: var(--terakota-ciemna); color: var(--kremowy); }
.crj-btn:active { transform: translateY(1px); }
.crj-btn--secondary { background: transparent; color: var(--atrament); }
.crj-btn--secondary:hover { background: var(--atrament); color: var(--kremowy); border-color: var(--atrament); }
.crj-btn--terra { background: var(--terakota-ciemna); border-color: var(--terakota-ciemna); color: var(--kremowy); }
.crj-btn--terra:hover { background: var(--atrament); border-color: var(--atrament); }
.crj-btn--cream { background: transparent; border-color: var(--kremowy); color: var(--kremowy); }
.crj-btn--cream:hover { background: var(--kremowy); color: var(--terakota-ciemna); border-color: var(--kremowy); }
.crj-btn--cream-solid { background: var(--kremowy); border-color: var(--kremowy); color: var(--terakota-ciemna); }
.crj-btn--cream-solid:hover { background: var(--atrament); border-color: var(--atrament); color: var(--kremowy); }
.crj-btn--cream-solid.crj-btn--on-hero { color: var(--atrament); }
.crj-btn--sm { font-size: 13.5px; padding: 14px 26px; }
.crj-btn--xs { font-size: 12.5px; padding: 10px 20px; letter-spacing: .1em; }
.crj-btn--block { width: 100%; }
.crj-btn[disabled], .crj-btn.is-loading { opacity: .6; cursor: progress; }
.crj-btn.is-success { background: var(--c-pistacja); border-color: var(--c-pistacja); color: var(--atrament); }
.crj-btn .crj-icon { flex: none; }
.crj-textlink { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--terakota-ciemna); text-decoration: none; }
.crj-textlink:hover { color: var(--atrament); }
.crj-textlink--cream { color: var(--kremowy); text-decoration: underline; }

/* ---------- 6. Chipsy, pigulki, odznaki, kropki ---------- */
.crj-chip { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; border: 1.5px solid var(--atrament); border-radius: var(--r-pill); padding: 4px 11px; line-height: 1.4; white-space: nowrap; }
.crj-chip--filled { background: var(--atrament); color: var(--kremowy); }
.crj-chip--muted { color: var(--ink-45); border: 1.5px dashed var(--ink-35); }
.crj-pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; border: 2px solid currentColor; border-radius: var(--r-pill); padding: 10px 20px; line-height: 1.3; }
.crj-pill--sm { font-size: 11px; padding: 8px 16px; }
.crj-badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; padding: 6px 13px; border-radius: var(--r-pill); background: var(--atrament); color: var(--kremowy); line-height: 1.3; white-space: nowrap; }
.crj-badge--rot { transform: rotate(-2deg); }
.crj-badge--rot-r { transform: rotate(2deg); }
.crj-badge--terra { background: var(--terakota-ciemna); }
.crj-badge--cream { background: var(--kremowy); color: var(--terakota-ciemna); }
.crj-dot { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--atrament); }
.crj-stars { letter-spacing: .02em; }

/* ---------- 7. Karty ---------- */
.crj-card { background: var(--biel); border: 2px solid var(--atrament); border-radius: var(--r-card); padding: 30px 26px; }
.crj-card--dashed { background: var(--kremowy); border-style: dashed; }
.crj-card--hover { transition: transform var(--t-med) ease; }
.crj-card--hover:hover { transform: translateY(-4px); }

/* Blob */
.crj-blob { position: absolute; inset: 6px; border-radius: var(--blob-1); }
.crj-blob--anim { animation: crj-blob 7s ease-in-out infinite; }
@keyframes crj-blob { 0%, 100% { border-radius: 44% 56% 58% 42% / 46% 42% 58% 54%; } 50% { border-radius: 56% 44% 42% 58% / 42% 56% 44% 58%; } }

/* Karta pasty */
.crj-pcard { position: relative; text-decoration: none; color: var(--atrament); display: flex; flex-direction: column; gap: 14px; background: var(--biel); border: 2px solid var(--atrament); border-radius: var(--r-card); padding: 20px; transition: transform var(--t-med) ease; }
.crj-pcard:hover { transform: translateY(-4px); color: var(--atrament); }
.crj-pcard:hover .crj-blob { animation-duration: 2.4s; }
.crj-pcard:hover .crj-pcard__media img { transform: rotate(4deg); }
.crj-pcard:nth-child(even):hover .crj-pcard__media img { transform: rotate(-4deg); }
.crj-pcard__badge { position: absolute; top: -13px; right: 22px; z-index: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em; padding: 6px 13px; border-radius: var(--r-pill); background: var(--atrament); color: var(--kremowy); transform: rotate(2deg); white-space: nowrap; }
.crj-pcard__media { position: relative; display: block; height: 216px; }
.crj-pcard--shop .crj-pcard__media { height: 210px; }
.crj-pcard__media img { position: relative; width: 100%; height: 100%; object-fit: cover; border-radius: var(--blob-img); transition: transform var(--t-med) ease; }
.crj-pcard__oos { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); z-index: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; background: var(--kremowy); color: var(--terakota-ciemna); border-radius: var(--r-pill); padding: 5px 12px; white-space: nowrap; }
.crj-pcard.is-oos .crj-pcard__media img { filter: saturate(.35); }
.crj-pcard.is-oos .crj-blob { opacity: .4; }
.crj-pcard__title-row { display: flex; align-items: flex-start; gap: 10px; }
.crj-pcard__title-row .crj-dot { margin-top: 9px; }
.crj-pcard__title { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.15; }
.crj-pcard__ingredients { font-family: var(--font-mono); font-size: 12.5px; opacity: .85; line-height: 1.5; }
.crj-pcard__rating { font-family: var(--font-mono); font-size: 12px; color: var(--terakota-ciemna); }
.crj-pcard__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.crj-pcard__foot { display: flex; justify-content: space-between; align-items: center; border-top: 1.5px dashed var(--ink-35); padding-top: 12px; margin-top: auto; }
.crj-pcard__price { font-family: var(--font-mono); font-size: 15px; font-weight: 700; }
.crj-pcard__link { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.crj-pcard__prices { display: flex; flex-direction: column; gap: 7px; border-top: 1.5px dashed var(--ink-35); padding-top: 12px; margin-top: auto; font-family: var(--font-mono); font-size: 13.5px; }
.crj-pcard__price-row { display: flex; justify-content: space-between; }
.crj-pcard__price-row .crj-pcard__price { font-size: 13.5px; }
.crj-pcard__cta { display: flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; background: var(--terakota-ciemna); color: var(--kremowy); border-radius: var(--r-pill); padding: 14px 20px; transition: background var(--t-fast); }
.crj-pcard:hover .crj-pcard__cta { background: var(--atrament); }
@media (max-width: 767px) {
  .crj-pcard { padding: 16px; border-radius: 24px; gap: 12px; }
  .crj-pcard__media { height: 190px; }
  .crj-pcard__title { font-size: 20px; }
}

/* Karta zestawu */
.crj-scard { text-decoration: none; color: var(--atrament); background: var(--biel); border: 2px solid var(--atrament); border-radius: var(--r-card); padding: 20px; display: flex; gap: 16px; align-items: stretch; transition: transform var(--t-med) ease, background var(--t-fast); }
.crj-scard:hover { transform: translateY(-4px); color: var(--atrament); }
.crj-scard__media { flex: none; width: 126px; }
.crj-scard__media img { width: 126px; height: 100%; min-height: 210px; object-fit: cover; border-radius: 20px; }
.crj-scard__body { display: flex; flex-direction: column; gap: 12px; flex: 1; min-width: 0; padding: 6px 0; overflow-wrap: break-word; }
.crj-scard__badge { align-self: flex-start; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; border: 1.5px solid var(--atrament); border-radius: var(--r-pill); padding: 5px 12px; line-height: 1.3; }
.crj-scard__title { font-family: var(--font-display); font-weight: 800; font-size: 20px; line-height: 1.15; hyphens: auto; }
.crj-scard__desc { font-size: 15px; line-height: 1.5; opacity: .85; }
.crj-scard__rating { font-family: var(--font-mono); font-size: 12.5px; color: var(--terakota-ciemna); }
.crj-scard__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 14px; border-top: 1.5px dashed var(--ink-35); padding-top: 14px; margin-top: auto; }
.crj-scard__price { font-family: var(--font-mono); font-weight: 700; font-size: 17px; white-space: nowrap; }
.crj-scard__cta { font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.crj-scard--oos { background: var(--terakota-ciemna); color: var(--kremowy); }
.crj-scard--oos:hover { background: var(--atrament); transform: none; color: var(--kremowy); }
.crj-scard--oos .crj-scard__media img { filter: saturate(.4); }
.crj-scard--oos .crj-scard__badge { background: var(--kremowy); color: var(--terakota-ciemna); border-color: var(--kremowy); }
.crj-scard--oos .crj-scard__desc { opacity: .95; }
.crj-scard--oos .crj-scard__rating { color: inherit; }
.crj-scard--oos .crj-scard__foot { border-top-color: var(--cream-40); }
.crj-scard__cta--notify { text-decoration: underline; }
@media (max-width: 639px) {
  .crj-scard { padding: 16px; border-radius: 20px; gap: 14px; align-items: center; }
  .crj-scard__media { width: 84px; }
  .crj-scard__media img { width: 84px; height: 84px; min-height: 0; border-radius: 14px; }
  .crj-scard__body { gap: 6px; padding: 0; }
  .crj-scard__title { font-size: 17px; }
  .crj-scard__desc { display: none; }
  .crj-scard__foot { border: 0; padding-top: 0; }
  .crj-scard__price { font-size: 14px; }
  .crj-scard__badge { font-size: 10px; padding: 4px 10px; }
}

/* Karta przepisu */
.crj-recipe-card { text-decoration: none; color: var(--atrament); background: var(--biel); border: 2px solid var(--atrament); border-radius: var(--r-card); overflow: hidden; display: flex; flex-direction: column; transition: transform var(--t-med) ease; }
.crj-recipe-card:hover { transform: translateY(-4px); color: var(--atrament); }
.crj-recipe-card__media { position: relative; display: block; height: 200px; overflow: hidden; background: var(--c-nerkowiec); }
.crj-recipe-card__media img { width: 100%; height: 100%; object-fit: cover; }
.crj-recipe-card__body { display: flex; flex-direction: column; gap: 10px; padding: 22px; }
.crj-recipe-card__meta { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--terakota-ciemna); }
.crj-recipe-card__title { font-family: var(--font-display); font-weight: 800; font-size: 24px; line-height: 1.15; }
.crj-recipe-card__foot { font-family: var(--font-mono); font-size: 12.5px; opacity: .8; }
@media (max-width: 767px) { .crj-recipe-card__title { font-size: 20px; } .crj-recipe-card__media { height: 180px; } }

/* Ramka ATENCION */
.crj-attention { position: relative; border: 2.5px dashed var(--atrament); border-radius: var(--r-box); background: var(--biel); padding: 38px 30px 26px; margin-top: 14px; }
.crj-attention__label { position: absolute; top: -16px; left: 26px; background: var(--atrament); color: var(--kremowy); font-family: var(--font-mono); font-weight: 700; font-size: 13px; letter-spacing: .16em; padding: 7px 16px; border-radius: var(--r-pill); transform: rotate(-2deg); white-space: nowrap; }
.crj-attention p { font-size: 16px; line-height: 1.65; }
.crj-attention--terra { border-color: var(--terakota-ciemna); background: var(--kremowy); }
.crj-attention--terra .crj-attention__label { background: var(--terakota-ciemna); transform: rotate(1.5deg); }
.crj-attention--terra p { font-style: italic; }
@media (max-width: 480px) { .crj-attention { padding: 34px 20px 22px; } .crj-attention__label { font-size: 11px; left: 16px; max-width: calc(100% - 32px); white-space: normal; text-align: center; } }

/* ---------- 8. Pieczecie ---------- */
.crj-stamp { display: block; flex-shrink: 0; }
.crj-stamp--spin { animation: crj-spin 40s linear infinite; }
.crj-stamp-wrap { position: relative; display: block; flex-shrink: 0; }
.crj-stamp__spoon { position: absolute; inset: 0; }
@keyframes crj-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ---------- 9. Granice sekcji ---------- */
.crj-divider { display: block; width: 100%; height: 76px; margin-top: -1px; margin-bottom: -1px; position: relative; z-index: 1; }
.crj-divider--bottom { position: absolute; bottom: -1px; left: 0; width: 100%; height: 76px; margin: 0; }
@media (max-width: 767px) { .crj-divider, .crj-divider--bottom { height: 38px; } }
.crj-peanut-sep { height: 44px; background-color: var(--kremowy); background-image: url('../img/pasek-arachidow.png'); background-repeat: repeat-x; background-size: auto 44px; background-position: center; }

/* ---------- 10. Marquee ---------- */
.crj-marquee { overflow: hidden; }
.crj-marquee__track { display: flex; width: max-content; animation: crj-marquee 40s linear infinite; }
.crj-marquee__track--rev { animation-name: crj-marquee-rev; }
.crj-marquee:hover .crj-marquee__track { animation-play-state: paused; }
.crj-marquee__item { white-space: nowrap; padding-right: 32px; }
.crj-marquee--slogans .crj-marquee__item { font-family: var(--font-display); font-weight: 800; font-size: 32px; padding-right: 30px; }
.crj-marquee__sep { color: var(--terakota); padding: 0 16px; }
.crj-marquee--reviews .crj-marquee__item { font-family: var(--font-mono); font-size: 15.5px; }
.crj-marquee-reviews { display: flex; flex-direction: column; gap: 16px; }
.crj-marquee__row--ink { color: var(--atrament); }
@keyframes crj-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes crj-marquee-rev { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (max-width: 767px) {
  .crj-marquee--slogans .crj-marquee__item { font-size: 24px; }
  .crj-marquee--reviews .crj-marquee__item { font-size: 13.5px; }
  .crj-marquee-reviews { gap: 12px; }
}

/* ---------- 11. Formularze ---------- */
.crj-field { display: flex; flex-direction: column; gap: 8px; }
.crj-field label, .crj-field__label { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.crj-input, .crj-field input:not([type=checkbox]):not([type=radio]), .crj-field select, .crj-field textarea {
  width: 100%; font-family: var(--font-text); font-size: 16px; padding: 15px 20px; border-radius: 18px; border: 2px solid var(--atrament); background: var(--biel); color: var(--atrament); outline: none; transition: box-shadow var(--t-fast);
}
.crj-input:focus, .crj-field input:focus, .crj-field select:focus, .crj-field textarea:focus { box-shadow: 0 0 0 3px rgba(192, 87, 79, .35); outline: none; }
.crj-field textarea { min-height: 150px; resize: vertical; }
.crj-field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E2136' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 18px; padding-right: 48px; }
.crj-input--pill { border-radius: var(--r-pill); font-family: var(--font-mono); font-size: 15px; padding: 16px 22px; }
.crj-check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; cursor: pointer; }
.crj-check input { flex: none; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--atrament); }
.crj-consent { width: 100%; font-size: 13.5px; line-height: 1.5; opacity: .9; }
.crj-consent input { width: 20px; height: 20px; }
.crj-consent a { color: inherit; text-decoration: underline; }
.crj-consent--cream { color: var(--kremowy); }
.crj-consent--cream input { accent-color: var(--kremowy); }
.crj-form-msg:empty { display: none; }
.crj-form-msg { min-height: 1.4em; font-family: var(--font-mono); font-size: 14px; margin-top: 8px; width: 100%; }
.crj-form-msg.is-error { color: #ffd6d2; }
.crj-bg-cream .crj-form-msg.is-error, .crj-bg-white .crj-form-msg.is-error { color: var(--terakota-ciemna); }
.crj-form-msg.is-success { font-weight: 700; }
.crj-field.has-error input, .crj-field.has-error textarea, .crj-field.has-error select { border-color: var(--terakota); }
.crj-field__hint { font-size: 13.5px; opacity: .75; }

/* ---------- 12. Ruch / reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .55s ease-out, transform .55s ease-out; }
[data-reveal="left"] { transform: translateX(-24px); }
[data-reveal].is-in, .crj-no-anim [data-reveal], .no-js [data-reveal] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* =========================================================================
   HEADER
   ========================================================================= */
.crj-header-wrap { position: sticky; top: 0; z-index: 50; }
.admin-bar .crj-header-wrap { top: 32px; }
@media (max-width: 782px) { .admin-bar .crj-header-wrap { top: 46px; } }
.crj-topbar { background: var(--atrament); color: var(--kremowy); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; text-align: center; padding: 9px 16px; line-height: 1.3; }
.crj-header { background: var(--kremowy); border-bottom: 2px solid var(--atrament); }
.crj-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 16px var(--gutter); }
.crj-header__logo { display: flex; align-items: center; flex: none; }
.crj-header__logo img { width: 176px; height: auto; }
.crj-nav { display: flex; gap: 34px; margin: 0; padding: 0; list-style: none; }
.crj-nav li { margin: 0; }
.crj-nav a { font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--atrament); text-decoration: none; padding: 6px 2px; border-bottom: 2px solid transparent; transition: color var(--t-fast), border-color var(--t-fast); display: inline-block; white-space: nowrap; }
.crj-nav a:hover, .crj-nav .current-menu-item > a, .crj-nav .current_page_item > a, .crj-nav .current-menu-ancestor > a, .crj-nav .current_page_parent > a { border-bottom-color: var(--terakota); color: var(--terakota-ciemna); }
.crj-header__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.crj-cart-btn { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-weight: 700; font-size: 13.5px; letter-spacing: .12em; color: var(--atrament); text-decoration: none; border: 2px solid var(--atrament); border-radius: var(--r-pill); padding: 10px 20px; transition: background var(--t-fast), color var(--t-fast); white-space: nowrap; }
.crj-cart-btn:hover { background: var(--atrament); color: var(--kremowy); }
.crj-cart-btn__count { }
.crj-icon-btn { display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 2px solid var(--atrament); border-radius: var(--r-pill); color: var(--atrament); text-decoration: none; background: transparent; position: relative; transition: background var(--t-fast), color var(--t-fast); }
.crj-icon-btn:hover { background: var(--atrament); color: var(--kremowy); }
.crj-icon-btn__bubble { position: absolute; top: -6px; right: -6px; background: var(--terakota); color: var(--kremowy); font-family: var(--font-mono); font-size: 10px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.crj-account-btn { display: flex; }
.crj-menu-toggle { display: none; }
.crj-menu-toggle .crj-icon--close { display: none; }
.crj-menu-toggle[aria-expanded="true"] .crj-icon--menu { display: none; }
.crj-menu-toggle[aria-expanded="true"] .crj-icon--close { display: block; }
.crj-mobile-nav { display: none; }

@media (max-width: 1099px) {
  .crj-nav { gap: 22px; }
  .crj-nav a { font-size: 12.5px; letter-spacing: .1em; }
  .crj-header__inner { gap: 20px; }
}
@media (max-width: 899px) {
  .crj-topbar { font-size: 10.5px; letter-spacing: .08em; padding: 8px 12px; }
  .crj-header__inner { padding: 12px 16px; gap: 12px; }
  .crj-header__logo img { width: 140px; }
  .crj-header__nav-desktop { display: none; }
  .crj-menu-toggle { display: flex; }
  .crj-cart-btn { display: none; }
  .crj-cart-btn--mobile { display: flex; }
  .crj-account-btn { display: none; }
  .crj-mobile-nav { display: none; background: var(--kremowy); border-bottom: 2px solid var(--atrament); flex-direction: column; padding: 8px 0; max-height: calc(100vh - var(--header-h) - var(--topbar-h)); overflow: auto; }
  .crj-mobile-nav.is-open { display: flex; }
  .crj-mobile-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .crj-mobile-nav li { margin: 0; }
  .crj-mobile-nav a { display: block; text-align: center; font-family: var(--font-mono); font-weight: 700; font-size: 16px; letter-spacing: .14em; text-transform: uppercase; color: var(--atrament); text-decoration: none; padding: 16px 24px; border-bottom: 1px dashed var(--ink-20); }
  .crj-mobile-nav li:last-child a { border-bottom: 0; }
  .crj-mobile-nav .crj-mobile-nav__extra a { font-weight: 400; font-size: 13px; letter-spacing: .1em; padding: 12px 24px; }
}
@media (min-width: 900px) { .crj-cart-btn--mobile { display: none; } }

/* Mini-powiadomienie o dodaniu do koszyka */
.crj-toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); z-index: 90; background: var(--atrament); color: var(--kremowy); font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .06em; padding: 14px 22px; border-radius: var(--r-pill); opacity: 0; pointer-events: none; transition: opacity var(--t-med), transform var(--t-med); max-width: calc(100vw - 32px); text-align: center; }
.crj-toast.is-visible { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.crj-toast a { color: var(--kremowy); text-decoration: underline; margin-left: 10px; }

/* =========================================================================
   NAGLOWEK PODSTRONY
   ========================================================================= */
.crj-page-header { position: relative; padding: 72px 0 0; }
.crj-page-header__inner { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: end; padding-bottom: 56px; }
.crj-page-header__inner.has-aside { grid-template-columns: 1fr auto; }
.crj-page-header__inner.is-narrow { max-width: calc(860px + 2 * var(--gutter)); }
.crj-page-header__content { display: flex; flex-direction: column; gap: 18px; }
.crj-page-header__title { font-family: var(--font-display); font-weight: 850; font-size: clamp(44px, 6vw, 92px); line-height: 1.02; letter-spacing: -.01em; }
.crj-page-header__text { font-size: 19px; line-height: 1.6; max-width: 52ch; }
.crj-page-header__aside { align-self: end; padding-bottom: 8px; }
.crj-page-header .crj-divider--bottom { position: relative; bottom: auto; margin-bottom: -1px; }
@media (max-width: 767px) {
  .crj-page-header { padding-top: 40px; }
  .crj-page-header__inner, .crj-page-header__inner.has-aside { grid-template-columns: 1fr; gap: 24px; padding-bottom: 36px; }
  .crj-page-header__aside { display: none; }
  .crj-page-header__text { font-size: 17px; }
}

/* Okruszki / krokowy wskaznik zamowienia */
.crj-steps { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
.crj-steps__item { display: flex; align-items: center; gap: 10px; opacity: .55; }
.crj-steps__item.is-current, .crj-steps__item.is-done { opacity: 1; }
.crj-steps__num { width: 30px; height: 30px; border-radius: 50%; border: 2px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; }
.crj-steps__item.is-current .crj-steps__num, .crj-steps__item.is-done .crj-steps__num { background: currentColor; }
.crj-steps__item.is-current .crj-steps__num span, .crj-steps__item.is-done .crj-steps__num span { color: var(--kremowy); }
.crj-steps__sep { width: 28px; height: 2px; background: currentColor; opacity: .35; }
@media (max-width: 639px) { .crj-steps { gap: 8px; font-size: 11px; } .crj-steps__sep { width: 14px; } .crj-steps__label { display: none; } .crj-steps__item.is-current .crj-steps__label { display: inline; } }

/* =========================================================================
   NEWSLETTER
   ========================================================================= */
.crj-newsletter { background: var(--kremowy); padding: 40px var(--gutter) 110px; }
.crj-newsletter__box { max-width: 1000px; margin: 0 auto; background: var(--terakota-ciemna); border-radius: 36px; padding: 64px 72px; color: var(--kremowy); display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.crj-newsletter__content { display: flex; flex-direction: column; gap: 16px; }
.crj-newsletter__eyebrow { font-size: 12.5px; letter-spacing: .18em; opacity: .9; }
.crj-newsletter__title { font-family: var(--font-display); font-weight: 850; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.05; }
.crj-newsletter__text { font-size: 17.5px; line-height: 1.6; max-width: 52ch; }
.crj-newsletter__form { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.crj-newsletter__input { flex: 1; min-width: 240px; font-family: var(--font-mono); font-size: 15px; padding: 16px 22px; border-radius: var(--r-pill); border: 2px solid var(--kremowy); background: transparent; color: var(--kremowy); outline: none; }
.crj-newsletter__input::placeholder { color: var(--cream-50); }
.crj-newsletter__input:focus { outline: 3px solid var(--kremowy); outline-offset: 3px; }
.crj-newsletter__form .crj-btn { font-size: 14px; padding: 16px 30px; }
@media (max-width: 899px) {
  .crj-newsletter { padding: 24px var(--gutter) 72px; }
  .crj-newsletter__box { grid-template-columns: 1fr; padding: 40px 32px; gap: 8px; border-radius: 28px; }
  .crj-newsletter__stamp { margin: 8px auto 0; width: 130px !important; height: 130px !important; }
  .crj-newsletter__stamp svg { width: 130px; height: 130px; }
  .crj-newsletter__stamp svg { width: 140px; height: 140px; }
}
@media (max-width: 480px) {
  .crj-newsletter__box { padding: 32px 22px; }
  .crj-newsletter__form { flex-direction: column; align-items: stretch; }
  .crj-newsletter__input { min-width: 0; }
}

/* =========================================================================
   STOPKA
   ========================================================================= */
.crj-footer { background: var(--atrament); color: var(--kremowy); }
.crj-footer__marquee { border-bottom: 1px solid var(--cream-20); padding: 26px 0; }
.crj-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding: 64px var(--gutter) 40px; max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; }
.crj-footer__brand { display: flex; flex-direction: column; gap: 18px; }
.crj-footer__brand img { width: 200px; height: auto; }
.crj-footer__about { font-size: 15.5px; line-height: 1.6; opacity: .85; max-width: 34ch; }
.crj-footer__col { display: flex; flex-direction: column; gap: 12px; }
.crj-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.crj-footer__heading { font-family: var(--font-mono); font-weight: 700; font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase; opacity: .7; }
.crj-footer__col a { color: var(--kremowy); text-decoration: none; font-size: 15.5px; transition: color var(--t-fast); }
.crj-footer__col a:hover { color: var(--terakota); }
.crj-footer__text { font-size: 15.5px; opacity: .85; line-height: 1.7; }
.crj-footer__social { display: flex; gap: 14px; margin-top: 4px; flex-wrap: wrap; }
.crj-footer__social a { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; border: 1.5px solid var(--cream-50); border-radius: var(--r-pill); padding: 7px 14px; transition: border-color var(--t-fast), color var(--t-fast); }
.crj-footer__social a:hover { border-color: var(--terakota); color: var(--terakota); }
.crj-footer__bottom { max-width: calc(var(--container) + 2 * var(--gutter)); margin: 0 auto; padding: 24px var(--gutter) 44px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--cream-20); }
.crj-footer__legal { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; opacity: .7; display: flex; flex-wrap: wrap; gap: 6px 0; align-items: center; }
.crj-footer__legal a { color: inherit; text-decoration: none; }
.crj-footer__legal a:hover { color: var(--terakota); }
.crj-footer__legal .crj-sep::before { content: '·'; padding: 0 8px; }
.crj-footer__signoff { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: 20px; }
.crj-footer__credit { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; opacity: .5; }
.crj-footer__credit a { color: inherit; text-decoration: none; }
.crj-footer__credit a:hover { color: var(--terakota); }
@media (max-width: 1023px) { .crj-footer__grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; padding-top: 48px; } }
@media (max-width: 599px) { .crj-footer__grid { grid-template-columns: 1fr; gap: 32px; padding: 40px var(--gutter) 24px; } .crj-footer__marquee { padding: 18px 0; } .crj-footer__bottom { padding-bottom: 32px; } }

/* =========================================================================
   Tresc z edytora (wpisy, strony bez szablonu)
   ========================================================================= */
.crj-prose { font-size: 18px; line-height: 1.7; }
.crj-prose > * + * { margin-top: 1.1em; }
.crj-prose h2 { font-size: clamp(30px, 3.4vw, 42px); margin-top: 1.6em; }
.crj-prose h3 { font-size: clamp(24px, 2.4vw, 30px); margin-top: 1.4em; }
.crj-prose h4 { font-family: var(--font-mono); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; margin-top: 1.6em; }
.crj-prose ul, .crj-prose ol { padding-left: 1.4em; }
.crj-prose li + li { margin-top: .4em; }
.crj-prose ul li::marker { color: var(--terakota); }
.crj-prose blockquote { border-left: 3px solid var(--terakota); padding-left: 24px; font-family: var(--font-display); font-style: italic; font-weight: 600; font-size: 1.25em; line-height: 1.4; margin-left: 0; }
.crj-prose img { border-radius: var(--r-box); border: 2px solid var(--atrament); }
.crj-prose figure { margin: 2em 0; }
.crj-prose figcaption { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; opacity: .75; margin-top: 10px; }
.crj-prose a { font-weight: 500; }
.crj-prose table { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.crj-prose th, .crj-prose td { padding: 10px 12px; border-bottom: 1.5px dashed var(--ink-35); text-align: left; }
.crj-prose th { font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.crj-prose hr { border: 0; border-top: 2px dashed var(--ink-35); margin: 2.5em 0; }
.crj-prose code { font-family: var(--font-mono); font-size: .9em; background: var(--biel); padding: 2px 6px; border-radius: 6px; }
.crj-prose .wp-block-button__link { display: inline-flex; font-family: var(--font-mono); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; background: var(--atrament); color: var(--kremowy); border-radius: var(--r-pill); padding: 16px 30px; text-decoration: none; }
.crj-prose .has-terakota-color { color: var(--terakota); }
.crj-prose .has-terakota-ciemna-color { color: var(--terakota-ciemna); }

/* ---------- Popup / komunikat czasowy ---------- */
.crj-popup { position: fixed; inset: 0; z-index: 80; display: flex; align-items: center; justify-content: center; padding: 20px; }
.crj-popup[hidden] { display: none; }
.crj-popup:not(.is-open) { pointer-events: none; }
.crj-popup__overlay { position: absolute; inset: 0; background: rgba(30, 33, 54, .55); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; transition: opacity var(--t-med); }
.crj-popup__dialog {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  width: min(860px, 100%); max-height: min(88vh, 88dvh); overflow: auto;
  background: var(--kremowy); color: var(--atrament);
  border: 2px solid var(--atrament); border-radius: var(--r-card);
  box-shadow: 0 24px 70px rgba(30, 33, 54, .35);
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
}
.crj-popup.is-open .crj-popup__overlay { opacity: 1; }
.crj-popup.is-open .crj-popup__dialog { opacity: 1; transform: none; }
.crj-popup__dialog--no-media { grid-template-columns: 1fr; width: min(600px, 100%); }
.crj-popup__media { min-height: 100%; }
.crj-popup__media img { width: 100%; height: 100%; object-fit: cover; }
.crj-popup__body { display: flex; flex-direction: column; justify-content: center; gap: 18px; padding: clamp(28px, 4vw, 48px); }
.crj-popup__title { font-size: clamp(26px, 3vw, 38px); line-height: 1.08; }
.crj-popup__text { font-size: 16.5px; line-height: 1.65; }
.crj-popup__cta { margin-top: 4px; }
.crj-popup__cta .crj-btn { width: 100%; }
.crj-popup__close {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--kremowy); color: var(--atrament); border: 2px solid var(--atrament);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.crj-popup__close:hover { background: var(--atrament); color: var(--kremowy); transform: rotate(90deg); }
body.crj-popup-open { overflow: hidden; }
@media (max-width: 719px) {
  .crj-popup { padding: 14px; align-items: flex-end; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .crj-popup__dialog { grid-template-columns: 1fr; max-height: min(86vh, 86dvh); }
  .crj-popup__media { aspect-ratio: 16 / 9; min-height: 0; }
  .crj-popup__body { padding: 22px 20px 26px; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .crj-popup__overlay, .crj-popup__dialog, .crj-popup__close { transition: none; }
  .crj-popup__dialog { transform: none; }
}