/*
Theme Name: mrówka
Theme URI: https://mrowkaapp.netlify.app
Author: Zespół Mrówki
Author URI: https://mrowkaapp.netlify.app
Description: Motyw blokowy strony aplikacji mrówka — papierowy dziennik podróży. Kremowe tło z ziarnem papieru, polaroidy z pinezkami, pieczątki i przerywana linia trasy. Realne trasy od prawdziwych ludzi i prywatny dziennik podróży.
Version: 1.6.5
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mrowka
*/

/* =========================================================
   Baza
========================================================= */

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--mrowka-header-h, 74px) + 16px);
}

body {
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-x: clip;
}

/* Papierowe ziarno + delikatna winieta (tylko front) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(rgba(41, 35, 30, 0.028) 1px, transparent 1px),
    radial-gradient(rgba(41, 35, 30, 0.02) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 30%, transparent 55%, rgba(150, 62, 32, 0.05) 100%);
}

.wp-site-blocks {
  position: relative;
  z-index: 1;
}

.wp-site-blocks > footer {
  margin-block-start: 0;
}

.wp-site-blocks > main {
  margin-block-start: 0;
}

.wp-site-blocks > header {
  margin-block-start: 0;
}

/* =========================================================
   Przyciski (globalnie)
========================================================= */

.wp-block-button:not(.play-badge) .wp-block-button__link {
  box-shadow: 0 2px 0 rgba(150, 62, 32, 0.45);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.4s ease-out;
}

.wp-block-button:not(.play-badge) .wp-block-button__link:hover,
.wp-block-button:not(.play-badge) .wp-block-button__link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 5px 14px rgba(150, 62, 32, 0.35);
}

.btn-small .wp-block-button__link {
  font-size: 0.9rem;
  padding: 0.55rem 1.25rem;
}

/* ---- Badge Google Play (czysty CSS) ---- */
.play-badge .wp-block-button__link {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  row-gap: 0;
  align-items: center;
  justify-items: start;
  text-align: left;
  background: var(--wp--preset--color--ink);
  color: #ffffff;
  border-radius: 12px;
  padding: 0.8rem 1.6rem 0.8rem 1.3rem;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  box-shadow: 0 3px 0 rgba(20, 16, 12, 0.5), 0 10px 24px rgba(41, 35, 30, 0.18);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.4s ease-out;
}

.play-badge .wp-block-button__link::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 26px;
  height: 30px;
  background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--terra) 100%);
  clip-path: polygon(4% 0%, 100% 50%, 4% 100%, 0% 94%, 0% 6%);
}

.play-badge .wp-block-button__link::after {
  content: "Pobierz z";
  grid-column: 2;
  grid-row: 1;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}

.play-badge .wp-block-button__link:hover,
.play-badge .wp-block-button__link:focus-visible {
  background: #17120e;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 0 rgba(20, 16, 12, 0.45), 0 18px 34px rgba(41, 35, 30, 0.28);
}

/* App Store — szara zapowiedz (Q4 2026), nieklikalna */
.wp-block-button.appstore-badge .wp-block-button__link {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  row-gap: 0;
  align-items: center;
  justify-items: start;
  text-align: left;
  background: #a49c93;
  color: rgba(255, 255, 255, 0.92);
  border-radius: 12px;
  padding: 0.8rem 1.6rem 0.8rem 1.3rem;
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  box-shadow: 0 3px 0 rgba(20, 16, 12, 0.18), 0 8px 18px rgba(41, 35, 30, 0.1);
  cursor: default;
  pointer-events: none;
}

.wp-block-button.appstore-badge .wp-block-button__link::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 26px;
  height: 30px;
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30'%3E%3Cpath d='M17.5 8.6c1.9 0 3.6.9 4.7 2.3-2 1.2-3.1 3.2-3.1 5.5 0 2.5 1.4 4.7 3.6 5.8-.6 1.6-1.4 3-2.4 4.3-1 1.4-2.1 2.8-3.7 2.8-1.5 0-2-.9-3.8-.9s-2.4.9-3.8.9c-1.6.1-2.8-1.5-3.9-2.9C3.1 24 1.5 19.6 2.6 15.9c.8-2.6 3-4.4 5.5-4.4 1.5 0 2.8 1 3.8 1s2.5-1.2 4.3-1.1c.4 0 .9 0 1.3.2zM16.9 3.1c.9-1.1 1.5-2.6 1.3-4.1-1.3.1-2.9.9-3.8 2-.8.9-1.6 2.5-1.4 4 1.5.1 3-.8 3.9-1.9z' transform='translate(1 3)'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 30'%3E%3Cpath d='M17.5 8.6c1.9 0 3.6.9 4.7 2.3-2 1.2-3.1 3.2-3.1 5.5 0 2.5 1.4 4.7 3.6 5.8-.6 1.6-1.4 3-2.4 4.3-1 1.4-2.1 2.8-3.7 2.8-1.5 0-2-.9-3.8-.9s-2.4.9-3.8.9c-1.6.1-2.8-1.5-3.9-2.9C3.1 24 1.5 19.6 2.6 15.9c.8-2.6 3-4.4 5.5-4.4 1.5 0 2.8 1 3.8 1s2.5-1.2 4.3-1.1c.4 0 .9 0 1.3.2zM16.9 3.1c.9-1.1 1.5-2.6 1.3-4.1-1.3.1-2.9.9-3.8 2-.8.9-1.6 2.5-1.4 4 1.5.1 3-.8 3.9-1.9z' transform='translate(1 3)'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-button.appstore-badge .wp-block-button__link::after {
  content: "Wkrótce — Q4 2026";
  grid-column: 2;
  grid-row: 1;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
}

/* =========================================================
   Naglowek
========================================================= */

header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 5000;
}

body.admin-bar header.wp-block-template-part {
  top: var(--wp-admin--admin-bar--height, 32px);
}

.mrowka-header-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 40px;
  pointer-events: none;
  visibility: hidden;
}

.site-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px dashed rgba(111, 100, 91, 0.35);
  background: linear-gradient(to bottom, var(--wp--preset--color--paper), var(--wp--preset--color--cream));
  transition: background-color 0.25s ease-out,
              box-shadow 0.25s ease-out,
              padding 0.25s ease-out;
}

/* Warstwa rozmycia w ::before — backdrop-filter na samym .site-header
   zamienialby go w containing block dla fixed (mobilne menu). */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
}

header.wp-block-template-part.is-scrolled .site-header {
  background-image: none;
  background-color: rgba(250, 247, 241, 0.97);
  border-bottom-color: rgba(41, 35, 30, 0.15);
  box-shadow: 0 6px 18px rgba(41, 35, 30, 0.08);
  padding-top: 0.65rem !important;
  padding-bottom: 0.65rem !important;
}

@supports ((-webkit-backdrop-filter: blur(8px)) or (backdrop-filter: blur(8px))) {
  header.wp-block-template-part.is-scrolled .site-header {
    background-color: rgba(250, 247, 241, 0.92);
  }

  header.wp-block-template-part.is-scrolled .site-header::before {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 1;
  }
}

/* Cele kotwic — naglowki laduja pod przyklejonym naglowkiem */
#zapis,
#funkcje,
#jak-dziala,
#faq,
#main {
  scroll-margin-top: calc(var(--mrowka-header-h, 74px) + 16px);
}

/* =========================================================
   Dostepnosc: skip-link + focus-visible
========================================================= */

/* Rdzeniowy skip-link WordPressa („Przejdź do treści") w barwach motywu */
.skip-link.screen-reader-text:focus {
  background-color: var(--wp--preset--color--ink);
  color: #ffffff;
  font-weight: 700;
  border-radius: 0 0 8px 0;
  outline: 2px solid var(--wp--preset--color--logo-orange);
  outline-offset: 2px;
  z-index: 2147483001;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--wp--preset--color--logo-orange);
  outline-offset: 2px;
}

.brand-logo {
  margin: 0;
}

.brand-logo img {
  display: block;
  width: 44px;
  height: 44px;
}

.brand-name {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.01em;
  line-height: 1;
  margin: 0;
}

.brand-name a {
  text-decoration: none;
  color: var(--wp--preset--color--ink);
}

.brand-name em {
  font-style: normal;
  color: var(--wp--preset--color--terra-dark);
}

.main-nav .wp-block-navigation-item__content {
  position: relative;
  color: var(--wp--preset--color--ink);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  padding: 0.25rem 0.1rem;
}

.main-nav .wp-block-navigation-item__content::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 2px;
  background: var(--wp--preset--color--terra);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.main-nav .wp-block-navigation-item__content:hover::after,
.main-nav .wp-block-navigation-item__content:focus-visible::after {
  transform: scaleX(1);
}

/* =========================================================
   Hero
========================================================= */

.hero-section {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Przerywana linia trasy w tle */
.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 640' fill='none' preserveAspectRatio='xMidYMid slice'%3E%3Cpath d='M -30 600 C 140 560, 180 470, 300 462 C 430 454, 470 540, 600 520 C 740 498, 700 380, 810 330 C 910 285, 1010 300, 1060 220 C 1098 160, 1075 92, 1108 40' stroke='%23b9542f' stroke-width='3' stroke-linecap='round' stroke-dasharray='3 13' opacity='0.42'/%3E%3Ccircle cx='300' cy='462' r='6' fill='%23b9542f' opacity='0.4'/%3E%3Ccircle cx='810' cy='330' r='6' fill='%23b9542f' opacity='0.4'/%3E%3Ccircle cx='1108' cy='40' r='9' fill='none' stroke='%23b9542f' stroke-width='3' opacity='0.45'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  animation: route-reveal 2.4s cubic-bezier(0.33, 1, 0.68, 1) 0.5s both;
}

@keyframes route-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

.hero-inner {
  position: relative;
  z-index: 2;
}

.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--terra-dark);
  margin: 0 0 1.4rem;
}

.kicker::before {
  content: "";
  width: 34px;
  height: 0;
  border-top: 2px dashed var(--wp--preset--color--terra);
  opacity: 0.7;
}

.kicker-center {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
}

.hero-title {
  letter-spacing: -0.01em;
  line-height: 1.12;
  margin-bottom: 1.4rem;
}

.hero-title em {
  font-style: italic;
  font-weight: 600;
  color: var(--wp--preset--color--terra-dark);
}

.hero-lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--wp--preset--color--muted);
  max-width: 30em;
  margin-bottom: 2.2rem;
}

.hero-note {
  font-size: 0.88rem;
  color: var(--wp--preset--color--green);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 1.1rem;
}

/* ---- Polaroidy ---- */
.hero-visual {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 1.5rem 0.5rem 3rem;
}

.wp-block-image.polaroid {
  margin: 0;
  background: var(--wp--preset--color--paper);
  padding: 14px 14px 30px;
  box-shadow: 0 1px 2px rgba(41, 35, 30, 0.12),
              0 14px 34px rgba(41, 35, 30, 0.2);
  border: 1px solid rgba(111, 100, 91, 0.14);
}

.wp-block-image.polaroid img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.96) sepia(0.05);
}

.wp-block-image.polaroid figcaption {
  font-family: var(--wp--preset--font-family--display);
  font-style: italic;
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--wp--preset--color--muted);
  text-align: center;
  margin: 15px 0 0;
  letter-spacing: 0.01em;
}

.polaroid-main {
  position: relative;
  width: min(400px, 88%);
  transform: rotate(3deg);
  transform-origin: 50% 8%;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  animation:
    polaroid-in 0.9s cubic-bezier(0.33, 1, 0.68, 1) 0.5s backwards,
    polaroid-sway 8s ease-in-out 2.2s infinite;
}

.polaroid-main:hover {
  animation: none;
  transform: rotate(0.4deg) scale(1.015);
}

@keyframes polaroid-sway {
  0%, 100% { transform: rotate(3deg); }
  50%      { transform: rotate(2.2deg); }
}

@keyframes polaroid-in {
  from { opacity: 0; transform: translateY(30px) rotate(7deg); }
  to   { opacity: 1; transform: translateY(0) rotate(3deg); }
}

/* pinezka */
.polaroid-main::before,
.polaroid-accent::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  margin-left: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #e08a63, var(--wp--preset--color--terra) 55%, var(--wp--preset--color--terra-dark) 100%);
  box-shadow: inset -2px -3px 4px rgba(90, 35, 15, 0.5),
              0 4px 6px rgba(41, 35, 30, 0.35);
  z-index: 3;
}

.polaroid-main::after,
.polaroid-accent::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  margin-left: -3px;
  width: 7px;
  height: 12px;
  background: rgba(41, 35, 30, 0.18);
  filter: blur(2px);
  z-index: 2;
}

.polaroid-back {
  position: absolute;
  width: min(240px, 52%);
  right: 2%;
  bottom: -2%;
  padding: 10px 10px 18px;
  transform: rotate(-7deg);
  z-index: -1;
  opacity: 0.96;
}

.polaroid-back figcaption {
  font-size: 0.85rem;
  margin-top: 9px;
}

/* pieczatka */
.stamp {
  position: absolute;
  top: 5%;
  left: 4%;
  z-index: 4;
  padding: 0.5rem 1rem;
  border: 2px solid var(--wp--preset--color--terra-dark);
  border-radius: 6px;
  box-shadow: inset 0 0 0 2px rgba(150, 62, 32, 0.25);
  color: var(--wp--preset--color--terra-dark);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  transform: rotate(-9deg);
  opacity: 0.62;
  margin: 0;
  background:
    radial-gradient(circle at 30% 60%, rgba(250, 247, 241, 0.35) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 30%, rgba(250, 247, 241, 0.3) 0 2px, transparent 3px);
}

/* Akcentowe polaroidy w sekcjach */
.polaroid-accent {
  position: relative;
  width: min(380px, 92%);
  margin-left: auto;
  margin-right: auto;
  transform: rotate(-3deg);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.polaroid-accent.rotate-right {
  transform: rotate(2.5deg);
}

.polaroid-accent:hover {
  transform: rotate(0deg) scale(1.01);
}

/* =========================================================
   Sekcje
========================================================= */

.section-title {
  font-size: clamp(1.9rem, 3.2vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.section-intro {
  color: var(--wp--preset--color--muted);
  font-size: 1.08rem;
  max-width: 42em;
  margin-left: auto;
  margin-right: auto;
}

.band-paper {
  border-top: 1px dashed rgba(111, 100, 91, 0.35);
  border-bottom: 1px dashed rgba(111, 100, 91, 0.35);
}

/* ---- Karty papierowe ---- */
.paper-card {
  border: 1px solid rgba(111, 100, 91, 0.14);
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(41, 35, 30, 0.08),
              0 10px 24px rgba(41, 35, 30, 0.08);
}

.paper-card::before {
  content: "";
  display: block;
  width: 36px;
  border-top: 2px dashed var(--wp--preset--color--terra);
  opacity: 0.7;
  margin-bottom: 1.1rem;
}

.card-title {
  font-size: 1.35rem;
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.card-text {
  color: var(--wp--preset--color--muted);
  font-size: 0.98rem;
  line-height: 1.65;
  margin: 0;
}

/* ---- Uklad rownych kart ---- */
.equal-cards > .wp-block-column {
  display: flex;
  flex-direction: column;
  flex-grow: 0;
}

.equal-cards > .wp-block-column > .wp-block-group {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.equal-cards .cta-bottom {
  margin-top: auto;
  justify-content: center;
}

/* ---- Newsletter (#zapis) ---- */
.newsletter-box {
  position: relative;
  border: 2px dashed var(--wp--preset--color--terra);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(41, 35, 30, 0.1),
              0 14px 34px rgba(41, 35, 30, 0.12);
}

.newsletter-box::after {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(185, 84, 47, 0.35);
  border-radius: 6px;
  pointer-events: none;
}

.newsletter-mark {
  margin: 0 auto 1.2rem;
}

.newsletter-mark img {
  transform: rotate(-6deg);
}

.newsletter-note {
  font-size: 0.88rem;
  color: var(--wp--preset--color--muted);
  margin-top: 1rem;
}

/* ---- Pas CTA ---- */
.cta-band .section-title {
  color: var(--wp--preset--color--cream);
}

.cta-note {
  font-size: 0.88rem;
  opacity: 0.85;
}

/* =========================================================
   Stopka
========================================================= */

.site-footer {
  border-top: 1px dashed rgba(111, 100, 91, 0.35);
}

.footer-desc {
  color: var(--wp--preset--color--muted);
  font-size: 0.95rem;
  max-width: 30em;
}

.footer-heading {
  font-family: var(--wp--preset--font-family--body);
  font-size: 0.82rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--wp--preset--color--terra-dark);
  margin-bottom: 1rem;
}

.footer-links p {
  margin: 0 0 0.55rem;
}

.footer-links a {
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  font-weight: 700;
  font-size: 0.95rem;
  transition: color 0.3s ease-out;
}

.footer-links a:hover,
.footer-links a:focus-visible {
  color: var(--wp--preset--color--terra);
}

.social-icon {
  margin: 0;
}

.social-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 1px dashed rgba(185, 84, 47, 0.5);
  border-radius: 8px;
  background: var(--wp--preset--color--paper);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.social-icon a:hover,
.social-icon a:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(41, 35, 30, 0.15);
}

.social-icon img {
  display: block;
}

.header-social-icon {
  margin: 0;
}

.header-social-icon a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.72;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.header-social-icon a:hover,
.header-social-icon a:focus-visible {
  opacity: 1;
  transform: translateY(-1px);
}

.header-social-icon img {
  display: block;
}

.footer-bottom {
  border-top: 1px dashed rgba(111, 100, 91, 0.3);
}

.footer-bottom p {
  font-size: 0.85rem;
  color: var(--wp--preset--color--muted);
  margin: 0;
}

.footer-bottom a {
  color: var(--wp--preset--color--muted);
  font-weight: 700;
}

.footer-bottom a:hover,
.footer-bottom a:focus-visible {
  color: var(--wp--preset--color--terra);
}

/* =========================================================
   Tytul strony (page.html)
========================================================= */

.page-title-band {
  background: linear-gradient(to bottom, var(--wp--preset--color--paper), var(--wp--preset--color--cream));
  border-bottom: 1px dashed rgba(111, 100, 91, 0.35);
}

.page-title {
  letter-spacing: -0.01em;
  line-height: 1.12;
}

/* =========================================================
   Blog — listing
========================================================= */

.blog-title-band {
  background: linear-gradient(to bottom, var(--wp--preset--color--paper), var(--wp--preset--color--cream));
  border-bottom: 1px dashed rgba(111, 100, 91, 0.35);
}

.blog-lead {
  color: var(--wp--preset--color--muted);
  font-size: 1.08rem;
  max-width: 38em;
  margin-left: auto;
  margin-right: auto;
}

.blog-card {
  height: 100%;
}

.blog-card::before {
  display: none;
}

.blog-card .wp-block-post-featured-image {
  background: var(--wp--preset--color--paper);
  padding: 10px;
  border: 1px solid rgba(111, 100, 91, 0.18);
  box-shadow: 0 1px 2px rgba(41, 35, 30, 0.1),
              0 8px 20px rgba(41, 35, 30, 0.12);
  transform: rotate(-1.2deg);
  margin: 0 0 1.4rem;
}

.blog-card .wp-block-post-featured-image img {
  display: block;
  filter: saturate(0.96) sepia(0.05);
}

.blog-meta {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--terra-dark);
  margin-bottom: 0.4rem;
}

.blog-card-title {
  font-size: 1.4rem;
  line-height: 1.22;
  margin-top: 0;
  margin-bottom: 0.6rem;
}

.blog-card-title a {
  text-decoration: none;
  color: var(--wp--preset--color--ink);
  transition: color 0.3s ease-out;
}

.blog-card-title a:hover,
.blog-card-title a:focus-visible {
  color: var(--wp--preset--color--terra-dark);
}

.blog-excerpt {
  color: var(--wp--preset--color--muted);
  font-size: 0.97rem;
}

.blog-excerpt .wp-block-post-excerpt__more-link {
  display: inline-block;
  margin-top: 0.6rem;
  color: var(--wp--preset--color--terra-dark);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px dashed rgba(185, 84, 47, 0.5);
}

.wp-block-query-pagination {
  margin-top: 2.5rem;
  font-weight: 700;
}

.wp-block-query-pagination a {
  color: var(--wp--preset--color--terra-dark);
  text-decoration: none;
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination a:focus-visible {
  text-decoration: underline;
}

/* =========================================================
   Blog — pojedynczy wpis
========================================================= */

.post-meta {
  color: var(--wp--preset--color--muted);
  font-size: 0.9rem;
}

.post-hero-polaroid {
  position: relative;
  background: var(--wp--preset--color--paper);
  padding: 14px 14px 18px;
  border: 1px solid rgba(111, 100, 91, 0.14);
  box-shadow: 0 1px 2px rgba(41, 35, 30, 0.12),
              0 14px 34px rgba(41, 35, 30, 0.2);
  width: min(720px, 100%);
  margin: 2.2rem auto 0;
  transform: rotate(-1.5deg);
}

.post-hero-polaroid img {
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(0.96) sepia(0.05);
}

.post-hero-polaroid::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  margin-left: -11px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #e08a63, var(--wp--preset--color--terra) 55%, var(--wp--preset--color--terra-dark) 100%);
  box-shadow: inset -2px -3px 4px rgba(90, 35, 15, 0.5),
              0 4px 6px rgba(41, 35, 30, 0.35);
  z-index: 3;
}

.single-content {
  font-size: 1.05rem;
}

.single-content h2 {
  font-size: 1.7rem;
  margin-top: 2.4rem;
}

.single-content h3 {
  font-size: 1.25rem;
  margin-top: 1.8rem;
}

.single-content ul,
.single-content ol {
  padding-left: 1.4rem;
}

.single-content li {
  margin-bottom: 0.5rem;
}

.callout {
  background: #fff6e9;
  border: 1px dashed rgba(201, 154, 74, 0.9);
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
  margin-top: 2rem;
}

.callout h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.15rem;
  color: var(--wp--preset--color--terra-dark);
}

.callout p {
  margin: 0;
  color: var(--wp--preset--color--muted);
}

.cta-box {
  background: var(--wp--preset--color--paper);
  border: 2px dashed var(--wp--preset--color--terra);
  border-radius: 10px;
  padding: 2.2rem 1.8rem;
  margin-top: 2.6rem;
  text-align: center;
}

.cta-box h3 {
  margin-top: 0;
  margin-bottom: 0.7rem;
  font-size: 1.45rem;
}

.cta-box p {
  color: var(--wp--preset--color--muted);
}

.back-link a {
  font-weight: 700;
  color: var(--wp--preset--color--terra-dark);
  text-decoration: none;
}

.back-link a:hover,
.back-link a:focus-visible {
  text-decoration: underline;
}

/* =========================================================
   Strony (polityka prywatnosci itp.)
========================================================= */

.note {
  background: #fff6e9;
  border: 1px solid #f0deb6;
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  font-size: 0.95rem;
}

.meta-line {
  color: var(--wp--preset--color--muted);
  font-size: 0.92rem;
}

.cookie-settings-link a {
  cursor: pointer;
}

/* =========================================================
   Warstwa dopaminowa i rzemieslnicza (v1.2)
========================================================= */

::selection { background: #fc6e20; color: #29231e; }
::-moz-selection { background: #fc6e20; color: #29231e; }

html { scrollbar-width: thin; scrollbar-color: #b9542f #faf7f1; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--wp--preset--color--cream); }
::-webkit-scrollbar-thumb { background: var(--wp--preset--color--terra); border-radius: 8px; border: 2px solid var(--wp--preset--color--cream); }
::-webkit-scrollbar-thumb:hover { background: var(--wp--preset--color--logo-orange); }

body::before {
  background-image:
    radial-gradient(rgba(41, 35, 30, 0.034) 1px, transparent 1px),
    radial-gradient(rgba(41, 35, 30, 0.024) 1px, transparent 1px),
    radial-gradient(rgba(150, 62, 32, 0.016) 1.5px, transparent 2px);
  background-size: 3px 3px, 5px 5px, 11px 11px;
  background-position: 0 0, 1px 2px, 4px 6px;
}

.wp-block-button:not(.play-badge) .wp-block-button__link {
  box-shadow: 0 2px 0 rgba(180, 70, 10, 0.4);
}

.wp-block-button:not(.play-badge) .wp-block-button__link:hover,
.wp-block-button:not(.play-badge) .wp-block-button__link:focus-visible {
  box-shadow: 0 6px 16px rgba(41, 35, 30, 0.26);
}

.wp-block-button .wp-block-button__link:active {
  transform: translateY(1px) !important;
  box-shadow: 0 1px 0 rgba(41, 35, 30, 0.3) !important;
  transition-duration: 0.08s !important;
}

.play-badge .wp-block-button__link::before {
  background: linear-gradient(135deg, var(--wp--preset--color--gold) 0%, var(--wp--preset--color--logo-orange) 100%);
}

.main-nav .wp-block-navigation-item__content::after {
  height: 6px;
  bottom: -5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 6' fill='none'%3E%3Cpath d='M1 4.2 Q 4.5 1.2, 8 3.4 T 15 3 T 22 3.6 T 27 2.6' stroke='%23fc6e20' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center;
  background-size: 28px 6px;
}

.kicker {
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  color: var(--wp--preset--color--terra);
}

/* ---- Hero: typografia, gryzmol, strzalka ---- */

.hero-title {
  font-size: clamp(2.7rem, 5.4vw, 5.2rem);
  line-height: 1.05;
}

.hero-title em {
  position: relative;
  white-space: nowrap;
}

.hero-title em::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -4%;
  bottom: -0.13em;
  height: 0.3em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' fill='none'%3E%3Cpath d='M3 9 C 25 3.5, 48 4, 70 7 S 108 11.5, 117 6' stroke='%23fc6e20' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M6 11.5 C 30 7, 60 6, 90 9.5 S 112 9.5, 116 8' stroke='%23fc6e20' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E") no-repeat center;
  background-size: 100% 100%;
  clip-path: inset(0 100% 0 0);
  animation: scribble-in 0.7s ease-out 1.15s forwards;
  pointer-events: none;
}

@keyframes scribble-in {
  to { clip-path: inset(0 0 0 0); }
}

.hero-cta { position: relative; }

.hero-cta::before {
  content: "";
  position: absolute;
  left: 252px;
  top: -52px;
  width: 82px;
  height: 66px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 70' fill='none'%3E%3Cpath d='M80 6 C 66 30, 48 44, 22 52' stroke='%23fc6e20' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M22 52 L 35 51' stroke='%23fc6e20' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M22 52 L 30 42' stroke='%23fc6e20' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  transform: rotate(6deg);
  opacity: 0;
  animation: arrow-in 0.5s ease-out 1.55s forwards;
  pointer-events: none;
}

@keyframes arrow-in {
  to { opacity: 0.9; }
}

/* ---- Pieczatki: przybicie ---- */

.stamp { transform: rotate(var(--srot, -9deg)); }

@keyframes stamp-slam {
  0%   { opacity: 0; transform: scale(1.7) rotate(calc(var(--srot, -9deg) - 9deg)); }
  55%  { opacity: 0.85; }
  70%  { transform: scale(0.96) rotate(calc(var(--srot, -9deg) + 1.5deg)); }
  100% { opacity: 0.62; transform: scale(1) rotate(var(--srot, -9deg)); }
}

.pin-scene .stamp {
  animation: stamp-slam 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.55s both;
}

.stamp-zapis {
  --srot: 6deg;
  position: absolute;
  top: -18px;
  right: 20px;
  left: auto;
  margin: 0;
  background-color: var(--wp--preset--color--paper);
  z-index: 6;
  opacity: 0;
}

.newsletter-section.is-visible .stamp-zapis {
  animation: stamp-slam 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}

/* ---- Tasma klejaca (zamiast pinezki) ---- */

.tape-corners::before,
.tape-corners::after {
  content: "";
  position: absolute;
  width: 72px;
  height: 21px;
  border-radius: 2px;
  background: linear-gradient(100deg, rgba(252, 247, 235, 0.5), rgba(252, 247, 235, 0.72));
  border: 1px solid rgba(111, 100, 91, 0.16);
  box-shadow: 0 1px 3px rgba(41, 35, 30, 0.14);
  filter: none;
  margin-left: 0;
  z-index: 3;
}

.tape-corners::before {
  top: -9px;
  left: -20px;
  right: auto;
  transform: rotate(-40deg);
}

.tape-corners::after {
  top: auto;
  bottom: -9px;
  right: -20px;
  left: auto;
  transform: rotate(-38deg);
}

/* ---- Polaroidy: sprezyste uniesienie ---- */

.wp-block-image.polaroid {
  transition: transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.polaroid-accent { --rot: -3deg; transform: rotate(var(--rot)); }
.polaroid-accent.rotate-right { --rot: 2.5deg; transform: rotate(var(--rot)); }

.polaroid-main:hover,
.polaroid-accent:hover {
  transform: rotate(0deg) translateY(-6px) scale(1.012);
  box-shadow: 0 3px 5px rgba(41, 35, 30, 0.12),
              0 26px 48px rgba(41, 35, 30, 0.26);
}

/* ---- Rozbity grid: karty z charakterem ---- */

.paper-card { --tilt: 0deg; --shift: 0px; transform: translateY(var(--shift)) rotate(var(--tilt)); }

.card-tilt-a { --tilt: -1deg; border-radius: 2px; }
.card-tilt-b { border-radius: 12px; }
.card-tilt-c { --tilt: 1.2deg; border-radius: 7px; }
.card-offset { --shift: 24px; }

.f-card-a { --tilt: -0.8deg; border-radius: 2px; }
.f-card-b { border-radius: 12px; }
.f-card-c { --tilt: 0.8deg; border-radius: 9px; }
.f-card-d { border-radius: 3px; }

.hover-lift {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.paper-card.hover-lift:hover {
  transform: translateY(calc(var(--shift, 0px) - 6px)) rotate(var(--tilt));
  box-shadow: 0 2px 4px rgba(41, 35, 30, 0.1),
              0 18px 36px rgba(41, 35, 30, 0.16);
}

.wp-block-image.breakout-left {
  margin-left: clamp(-4.5rem, -5vw, -1rem);
  margin-right: 0;
  width: min(430px, calc(100% + 3.5rem));
  max-width: none;
}

.section-intro-left {
  margin-left: 0;
  margin-right: auto;
}

/* ---- Wejscia sekcji: zroznicowane kierunki ---- */

@keyframes card-in {
  from { opacity: 0; transform: translateY(calc(var(--shift, 0px) + 26px)) rotate(var(--tilt, 0deg)); }
  to   { opacity: 1; transform: translateY(var(--shift, 0px)) rotate(var(--tilt, 0deg)); }
}

@keyframes phone-in {
  from { opacity: 0; transform: translateY(26px) rotate(var(--ph, 0deg)); }
  to   { opacity: 1; transform: translateY(0) rotate(var(--ph, 0deg)); }
}

@keyframes pol-in-right {
  from { opacity: 0; transform: translateX(46px) rotate(calc(var(--rot, -3deg) + 5deg)); }
  to   { opacity: 1; transform: translateX(0) rotate(var(--rot, -3deg)); }
}

@keyframes pol-in-left {
  from { opacity: 0; transform: translateX(-46px) rotate(calc(var(--rot, -3deg) - 5deg)); }
  to   { opacity: 1; transform: translateX(0) rotate(var(--rot, -3deg)); }
}

@keyframes box-in {
  from { opacity: 0; transform: translateY(20px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.animate-on-scroll:not(.is-visible) .paper-card,
.animate-on-scroll:not(.is-visible) .polaroid-accent,
.animate-on-scroll:not(.is-visible) .phone,
.animate-on-scroll:not(.is-visible) .newsletter-box { opacity: 0; }

.animate-on-scroll.is-visible .paper-card { animation: card-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.animate-on-scroll.is-visible .equal-cards > .wp-block-column:nth-child(2) .paper-card { animation-delay: 0.12s; }
.animate-on-scroll.is-visible .equal-cards > .wp-block-column:nth-child(3) .paper-card { animation-delay: 0.26s; }

.animate-on-scroll.is-visible .phone { animation: phone-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.animate-on-scroll.is-visible .phone-2 { animation-delay: 0.15s; }
.animate-on-scroll.is-visible .phone-3 { animation-delay: 0.3s; }

.animate-on-scroll.is-visible .polaroid-accent { animation: pol-in-right 0.75s cubic-bezier(0.33, 1, 0.68, 1) 0.2s both; }
.animate-on-scroll.is-visible .polaroid-accent.breakout-left { animation-name: pol-in-left; }
.animate-on-scroll.is-visible .newsletter-box { animation: box-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

/* ---- Uczciwe liczby ---- */

.stat-line {
  margin-top: 2rem;
  font-weight: 900;
  font-size: 0.88rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--wp--preset--color--green);
}

/* ---- Naklejka ---- */

.band-paper { position: relative; }

.sticker-tag {
  position: absolute;
  top: -15px;
  right: max(4%, 1rem);
  z-index: 7;
  margin: 0;
  background: var(--wp--preset--color--gold);
  color: var(--wp--preset--color--ink);
  font-weight: 900;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  border-radius: 3px;
  transform: rotate(3.5deg);
  box-shadow: 0 4px 10px rgba(41, 35, 30, 0.18);
}

/* ---- Newsletter: dopiski ---- */

.pill-note {
  width: fit-content;
  margin: 0 auto 0.4rem;
  padding: 0.35rem 0.85rem;
  border: 1.5px dashed rgba(63, 91, 70, 0.55);
  border-radius: 999px;
  background: rgba(63, 91, 70, 0.07);
  color: var(--wp--preset--color--green);
  font-weight: 900;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-1.2deg);
}

.cta-sub {
  font-family: var(--wp--preset--font-family--display);
  font-style: italic;
  font-size: 1.05rem;
  opacity: 0.82;
  margin-top: 0.4rem;
}

/* ---- Plywajaca pigulka pobierania ---- */

.sticky-pill {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 99990;
  margin: 0;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              bottom 0.3s ease;
}

.sticky-pill.is-shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sticky-pill .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 1.1rem 0.45rem 0.5rem;
  font-size: 0.88rem;
  box-shadow: 0 6px 20px rgba(41, 35, 30, 0.3), 0 2px 0 rgba(180, 70, 10, 0.4);
}

.sticky-pill .wp-block-button__link::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--wp--preset--color--paper) url('/wp-content/themes/mrowka/assets/images/logo-mruwka.svg') no-repeat center;
  background-size: 20px 20px;
  box-shadow: inset 0 0 0 1px rgba(41, 35, 30, 0.12);
}

@media (max-width: 1080px) {
  body.consent-open .sticky-pill { bottom: 210px; }
}

/* ---- Stopka: dopisek ---- */

.footer-egg {
  font-family: var(--wp--preset--font-family--display);
  font-style: italic;
}

/* ---- Blog: karty z charakterem ---- */

.wp-block-post-template > li:nth-child(4n+1) .blog-card { --tilt: -0.6deg; border-radius: 2px; }
.wp-block-post-template > li:nth-child(4n+2) .blog-card { --tilt: 0.5deg; border-radius: 12px; --shift: 18px; }
.wp-block-post-template > li:nth-child(4n+3) .blog-card { --tilt: 0.7deg; border-radius: 8px; }
.wp-block-post-template > li:nth-child(4n+4) .blog-card { --tilt: -0.5deg; border-radius: 4px; --shift: 14px; }

/* ---- Pojedynczy wpis: inicjal i grzymol pod tytulem ---- */

.single-content > p:first-of-type::first-letter {
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 3.3em;
  line-height: 0.8;
  float: left;
  margin: 0.05em 0.14em 0 0;
  color: var(--wp--preset--color--terra);
}

.post-title-fancy::after {
  content: "";
  display: block;
  width: min(220px, 42%);
  height: 12px;
  margin: 14px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14' fill='none'%3E%3Cpath d='M3 9 C 25 3.5, 48 4, 70 7 S 108 11.5, 117 6' stroke='%23fc6e20' stroke-width='3.2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M6 11.5 C 30 7, 60 6, 90 9.5 S 112 9.5, 116 8' stroke='%23fc6e20' stroke-width='2' fill='none' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E") no-repeat center;
  background-size: 100% 100%;
}

/* ---- Mobile: stonowanie ---- */

@media (max-width: 781px) {
  .card-offset { --shift: 0px; }
  .paper-card { --tilt: 0deg; }
  .wp-block-image.breakout-left { margin-left: auto; margin-right: auto; width: min(380px, 92%); }
  .hero-cta::before { display: none; }
  .sticker-tag { right: 0.8rem; top: -12px; }
  .pin-scene { height: 320px; }
  .pin-scene::before { display: none; }
  .pin-a { width: 118px; }
  .pin-b { width: 96px; }
  .pin-c, .pin-d { display: none; }
  .phone { --ph: 0deg; }
  .stamp-zapis { right: 8px; top: -14px; }
  .sticky-pill .wp-block-button__link { font-size: 0.8rem; padding: 0.4rem 0.9rem 0.4rem 0.45rem; }
  .wp-block-post-template > li .blog-card { --shift: 0px; --tilt: 0deg; }
}

/* =========================================================
   Pin-zdjecia w hero (znaczniki trasy jak w aplikacji)
========================================================= */

.pin-scene {
  position: relative;
  z-index: 1;
  height: 520px;
}

.pin-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 500' fill='none'%3E%3Cpath d='M92 150 C 190 108, 310 140, 332 220 C 350 296, 320 380, 270 420 C 220 460, 150 448, 118 420' stroke='%23b9542f' stroke-width='3' stroke-linecap='round' stroke-dasharray='3 12' opacity='0.5'/%3E%3C/svg%3E") no-repeat center;
  background-size: 100% 100%;
  clip-path: inset(0 100% 0 0);
  animation: scribble-in 1.6s ease-out 1.75s forwards;
}

.pin-photo {
  --pr: 0deg;
  position: absolute;
  margin: 0;
  z-index: 2;
  transform: rotate(var(--pr));
  transform-origin: 50% calc(100% + 26px);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pin-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 3px solid var(--wp--preset--color--paper);
  border-radius: 14px;
  box-shadow: 0 2px 4px rgba(41, 35, 30, 0.12), 0 12px 26px rgba(41, 35, 30, 0.22);
}

.pin-photo::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -13px;
  transform: translateX(-50%);
  width: 22px;
  height: 16px;
  background: var(--wp--preset--color--terra);
  clip-path: polygon(50% 100%, 6% 0, 94% 0);
  z-index: -1;
}

.pin-photo::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  width: 36px;
  height: 11px;
  background:
    radial-gradient(circle at 50% 42%, rgba(185, 84, 47, 0.95) 0 2.5px, transparent 3.5px),
    radial-gradient(ellipse at 50% 55%, rgba(41, 35, 30, 0.24), transparent 68%);
}

.pin-b::before { background: var(--wp--preset--color--logo-orange); }

.pin-b::after {
  background:
    radial-gradient(circle at 50% 42%, rgba(252, 110, 32, 0.95) 0 2.5px, transparent 3.5px),
    radial-gradient(ellipse at 50% 55%, rgba(41, 35, 30, 0.24), transparent 68%);
}

.pin-d::before { background: var(--wp--preset--color--logo-orange); }

.pin-a { width: 150px; left: 4%; top: 4%; --pr: -3deg; }
.pin-b { width: 120px; right: 6%; top: 24%; --pr: 2deg; }
.pin-c { width: 100px; left: 16%; bottom: 10%; --pr: -2deg; }
.pin-d { width: 85px; right: 20%; bottom: 5%; --pr: 3deg; }

@keyframes pin-pop {
  0%   { opacity: 0; transform: scale(0) rotate(var(--pr, 0deg)); }
  70%  { opacity: 1; transform: scale(1.12) rotate(var(--pr, 0deg)); }
  100% { opacity: 1; transform: scale(1) rotate(var(--pr, 0deg)); }
}

.pin-a { animation: pin-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.05s backwards; }
.pin-b { animation: pin-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s backwards; }
.pin-c { animation: pin-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.35s backwards; }
.pin-d { animation: pin-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 1.5s backwards; }

.pin-photo:hover {
  transform: scale(1.06) translateY(-4px) rotate(var(--pr));
  z-index: 4;
}

@keyframes dot-pulse {
  0%   { transform: translateX(-50%) scale(1); }
  45%  { transform: translateX(-50%) scale(1.55); }
  100% { transform: translateX(-50%) scale(1); }
}

.pin-photo:hover::after {
  animation: dot-pulse 0.5s ease-out 1;
}

.stamp-hero {
  top: 27%;
  left: -2%;
}

/* =========================================================
   Trzy kroki: mini makiety aplikacji
========================================================= */

.phones-stage {
  position: relative;
}

.phones-stage::before {
  content: "";
  position: absolute;
  left: 9%;
  right: 9%;
  top: 34%;
  border-top: 2px dashed rgba(185, 84, 47, 0.45);
  clip-path: inset(-4px 100% -4px 0);
  transition: clip-path 1.3s ease 0.7s;
}

.band-paper.is-visible .phones-stage::before {
  clip-path: inset(-4px 0 -4px 0);
}

.phone {
  --ph: 0deg;
  position: relative;
  z-index: 1;
  width: min(225px, 100%);
  margin: 0 auto;
  height: 440px;
  border: 3px solid var(--wp--preset--color--ink);
  border-radius: 28px;
  background: linear-gradient(to bottom, var(--wp--preset--color--paper), var(--wp--preset--color--cream));
  box-shadow: 0 2px 4px rgba(41, 35, 30, 0.12), 0 18px 36px rgba(41, 35, 30, 0.18);
  padding: 10px;
  transform: rotate(var(--ph));
}

.phone-1 { --ph: -2deg; }
.phone-3 { --ph: 2deg; }

.phone-screen {
  position: relative;
  height: 100%;
  border-radius: 18px;
  background: var(--wp--preset--color--paper);
  border: 1px solid rgba(111, 100, 91, 0.16);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.phone-screen::before {
  content: "9:41";
  flex: none;
  display: block;
  padding: 6px 12px 4px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--wp--preset--color--muted);
  background-image:
    radial-gradient(circle at calc(100% - 14px) 60%, var(--wp--preset--color--muted) 1.4px, transparent 2px),
    radial-gradient(circle at calc(100% - 24px) 60%, var(--wp--preset--color--muted) 1.4px, transparent 2px),
    radial-gradient(circle at calc(100% - 34px) 60%, rgba(111, 100, 91, 0.5) 1.4px, transparent 2px);
}

.app-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 8px 8px;
}

.band-paper.is-visible .phone-1 .app-list {
  animation: list-cycle 7s ease-in-out 0.9s infinite;
}

@keyframes list-cycle {
  0%, 20%   { transform: translateY(0); }
  32%, 52%  { transform: translateY(-76px); }
  64%, 82%  { transform: translateY(-152px); }
  94%, 100% { transform: translateY(0); }
}

.app-card {
  position: relative;
  flex: none;
  min-height: 68px;
  background: #ffffff;
  border: 1px solid rgba(111, 100, 91, 0.2);
  border-radius: 12px;
  padding: 10px 10px 10px 58px;
}

.app-card::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 42px;
  height: 52px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
}

.app-card-1::before { background-image: url('/wp-content/themes/mrowka/assets/images/trasa-wybrzeze.webp'); }
.app-card-2::before { background-image: url('/wp-content/themes/mrowka/assets/images/widok-dolina.webp'); }
.app-card-3::before { background-image: url('/wp-content/themes/mrowka/assets/images/para-zachod.webp'); }
.app-card-4::before { background-image: url('/wp-content/themes/mrowka/assets/images/detal-mapa.webp'); }

.app-card-title {
  margin: 0;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--wp--preset--color--ink);
}

.app-card-meta {
  margin: 3px 0 0;
  font-size: 9.5px;
  color: var(--wp--preset--color--muted);
}

.app-card-2::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--wp--preset--color--logo-orange);
  border-radius: 13px;
  opacity: 0;
  pointer-events: none;
}

.band-paper.is-visible .phone-1 .app-card-2::after {
  animation: ring-glow 7s ease-in-out 0.9s infinite;
}

@keyframes ring-glow {
  0%, 30%   { opacity: 0; }
  36%, 50%  { opacity: 1; }
  58%, 100% { opacity: 0; }
}

.app-hero-card {
  margin: 8px;
  background: #ffffff;
  border: 1px solid rgba(111, 100, 91, 0.2);
  border-radius: 14px;
  overflow: hidden;
  padding-bottom: 12px;
}

.app-hero-card::before {
  content: "";
  display: block;
  height: 108px;
  background: url('/wp-content/themes/mrowka/assets/images/trasa-wybrzeze.webp') center/cover;
  margin-bottom: 10px;
}

.app-hero-card .app-card-title { padding: 0 12px; font-size: 12.5px; }
.app-hero-card .app-card-meta { padding: 0 12px; }

.app-save {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin: 12px 12px 0;
  padding: 6px 14px;
  border: 1.5px solid var(--wp--preset--color--logo-orange);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.04em;
  color: var(--wp--preset--color--ink);
}

.app-save::before {
  content: "";
  flex: none;
  width: 9px;
  height: 12px;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 72%, 0 100%);
  background: rgba(252, 110, 32, 0.3);
}

.band-paper.is-visible .phone-2 .app-save::before {
  animation: bm-fill 8s ease-in-out 2.1s infinite;
}

@keyframes bm-fill {
  0%, 26%   { background: rgba(252, 110, 32, 0.3); }
  30%, 84%  { background: var(--wp--preset--color--logo-orange); }
  90%, 100% { background: rgba(252, 110, 32, 0.3); }
}

.app-save::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 28px;
  height: 28px;
  margin-top: -14px;
  border: 2.5px solid rgba(252, 110, 32, 0.85);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.3);
}

.band-paper.is-visible .phone-2 .app-save::after {
  animation: tap-ring 8s ease-out 2.1s infinite;
}

@keyframes tap-ring {
  0%, 16% { opacity: 0; transform: scale(0.3); }
  21%     { opacity: 0.9; transform: scale(0.5); }
  30%     { opacity: 0; transform: scale(1.25); }
  100%    { opacity: 0; transform: scale(1.25); }
}

.app-toast {
  position: absolute;
  left: 50%;
  bottom: 12px;
  margin: 0;
  transform: translate(-50%, 18px);
  background: var(--wp--preset--color--ink);
  color: var(--wp--preset--color--cream);
  font-size: 10px;
  font-weight: 700;
  padding: 5px 13px;
  border-radius: 999px;
  opacity: 0;
  white-space: nowrap;
}

.band-paper.is-visible .phone-2 .app-toast {
  animation: toast-pop 8s ease-in-out 2.1s infinite;
}

@keyframes toast-pop {
  0%, 30%   { opacity: 0; transform: translate(-50%, 18px); }
  36%, 72%  { opacity: 1; transform: translate(-50%, 0); }
  80%, 100% { opacity: 0; transform: translate(-50%, 18px); }
}

.app-map {
  position: relative;
  flex: 1;
  margin: 8px;
  border-radius: 14px;
  border: 1px solid rgba(111, 100, 91, 0.18);
  background:
    radial-gradient(circle at 20% 25%, rgba(63, 91, 70, 0.08) 0 26px, transparent 27px),
    radial-gradient(circle at 78% 70%, rgba(201, 154, 74, 0.1) 0 32px, transparent 33px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 240' fill='none'%3E%3Cpath d='M30 40 C 90 60, 140 80, 138 118 C 136 156, 70 160, 62 196' stroke='%23b9542f' stroke-width='2.5' stroke-linecap='round' stroke-dasharray='2 9' opacity='0.55'/%3E%3C/svg%3E") no-repeat center / 100% 100%,
    #f6f1e6;
  overflow: hidden;
}

.wp-block-spacer.map-pin {
  position: absolute;
  width: 34px;
  height: 34px !important;
  border-radius: 9px;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 9px rgba(41, 35, 30, 0.28);
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform-origin: 50% 135%;
}

.map-pin::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 12px;
  height: 9px;
  background: var(--wp--preset--color--terra);
  clip-path: polygon(50% 100%, 8% 0, 92% 0);
  z-index: -1;
}

.map-pin-1 { left: 12%; top: 12%; background-image: url('/wp-content/themes/mrowka/assets/images/trasa-wybrzeze.webp'); }
.map-pin-2 { right: 14%; top: 40%; left: auto; background-image: url('/wp-content/themes/mrowka/assets/images/widok-dolina.webp'); }
.map-pin-3 { left: 24%; top: auto; bottom: 26%; background-image: url('/wp-content/themes/mrowka/assets/images/para-zachod.webp'); }

.band-paper.is-visible .phone-3 .map-pin-1 { animation: mini-pop 9s cubic-bezier(0.34, 1.56, 0.64, 1) 3.3s infinite; }
.band-paper.is-visible .phone-3 .map-pin-2 { animation: mini-pop 9s cubic-bezier(0.34, 1.56, 0.64, 1) 3.8s infinite; }
.band-paper.is-visible .phone-3 .map-pin-3 { animation: mini-pop 9s cubic-bezier(0.34, 1.56, 0.64, 1) 4.3s infinite; }

@keyframes mini-pop {
  0%        { opacity: 0; transform: scale(0); }
  4%        { opacity: 1; transform: scale(1.18); }
  7%        { transform: scale(1); }
  76%       { opacity: 1; transform: scale(1); }
  84%, 100% { opacity: 0; transform: scale(0.5); }
}

.wp-block-spacer.app-strip {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  width: auto;
  height: 44px !important;
  border-radius: 10px;
  background-image: url('/wp-content/themes/mrowka/assets/images/trasa-wybrzeze.webp'), url('/wp-content/themes/mrowka/assets/images/widok-dolina.webp'), url('/wp-content/themes/mrowka/assets/images/para-zachod.webp');
  background-size: 34% 100%, 34% 100%, 34% 100%;
  background-position: 0 0, 50% 0, 100% 0;
  background-repeat: no-repeat;
  box-shadow: 0 4px 10px rgba(41, 35, 30, 0.18);
}

.band-paper.is-visible .phone-3 .app-strip {
  animation: strip-slide 9s ease-in-out 4.6s infinite alternate;
}

@keyframes strip-slide {
  0%, 35%   { transform: translateX(4px); }
  65%, 100% { transform: translateX(-4px); }
}

.step-caption-title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.25rem;
  margin: 1.5rem 0 0.5rem;
}

.step-caption-title::before {
  content: "1";
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  border: 2px dashed var(--wp--preset--color--terra);
  background: var(--wp--preset--color--paper);
  color: var(--wp--preset--color--terra-dark);
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.step-wrap-2 .step-caption-title::before { content: "2"; }
.step-wrap-3 .step-caption-title::before { content: "3"; }

.step-caption-text {
  color: var(--wp--preset--color--muted);
  font-size: 0.95rem;
  margin: 0;
}

.stat-line-center {
  margin-top: 2.6rem;
}

/* =========================================================
   Mrowka-towarzyszka (scroll companion)
========================================================= */

.mrowka-ant {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 800;
  pointer-events: none;
  will-change: transform;
}

/* mrówka schodzi ze sceny, gdy otwarte jest menu mobilne */
body:has(.wp-block-navigation__responsive-container.is-menu-open) .mrowka-ant,
body:has(.wp-block-navigation__responsive-container.is-menu-open) .mrowka-ant-dot,
.mrowka-ant.is-suspended {
  visibility: hidden;
}

.mrowka-ant svg {
  display: block;
  overflow: visible;
}

.mrowka-ant .ant-leg {
  transform-origin: 16px 17px;
}

.mrowka-ant.is-walking .ant-legs-a { animation: ant-step-a 0.26s linear infinite; }
.mrowka-ant.is-walking .ant-legs-b { animation: ant-step-b 0.26s linear infinite; }

.mrowka-ant.is-hurrying .ant-legs-a { animation-duration: 0.12s; }
.mrowka-ant.is-hurrying .ant-legs-b { animation-duration: 0.12s; }

.ant-antennae {
  transform-origin: 25px 12px;
}

.mrowka-ant.is-sniffing .ant-antennae {
  animation: ant-sniff 0.45s ease-in-out 3;
}

@keyframes ant-sniff {
  0%, 100% { transform: rotate(0deg); }
  35%      { transform: rotate(9deg); }
  70%      { transform: rotate(-7deg); }
}

.ant-legs-a,
.ant-legs-b {
  transform-origin: 16px 17px;
}

@keyframes ant-step-a {
  0%, 100% { transform: rotate(6deg); }
  50%      { transform: rotate(-6deg); }
}

@keyframes ant-step-b {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg); }
}

.mrowka-ant-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wp--preset--color--terra);
  opacity: 0;
  pointer-events: none;
  z-index: 799;
  transition: opacity 0.7s ease;
}

.mrowka-ant-parked {
  display: inline-block;
  margin-left: 8px;
  vertical-align: middle;
}

/* =========================================================
   FAQ — pytania w stylu papierowego dziennika
========================================================= */

.faq-list {
  border-top: 1px dashed rgba(41, 35, 30, 0.18);
}

.faq-item {
  margin: 0;
  padding: 0;
  border-bottom: 1px dashed rgba(41, 35, 30, 0.18);
  background: transparent;
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 1.15rem 2.4rem 1.15rem 0;
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 1.18rem;
  color: var(--wp--preset--color--ink);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--wp--preset--font-family--display);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--wp--preset--color--terra);
  transition: transform 0.3s ease, color 0.2s ease;
}

.faq-item[open] summary::after {
  content: "+";
  transform: translateY(-50%) rotate(45deg);
  color: var(--wp--preset--color--logo-orange);
}

.faq-item[open] summary {
  color: var(--wp--preset--color--terra-dark);
}

.faq-item > :not(summary) {
  margin: 0 0 1.2rem;
  max-width: 62ch;
  color: var(--wp--preset--color--muted, #6f645b);
  line-height: 1.65;
}

.faq-item summary:hover::after {
  color: var(--wp--preset--color--logo-orange);
}

/* =========================================================
   404 — zgubiony slad
========================================================= */

.error-section {
  text-align: center;
}

.error-title {
  font-size: clamp(2rem, 5vw, 3.2rem);
}

.error-intro {
  margin-left: auto;
  margin-right: auto;
}

.error-ant {
  min-height: 52px;
  margin: 1.4rem 0 1.8rem;
}

.error-ant::after {
  content: "";
  display: inline-block;
  width: 60px;
  height: 46px;
  transform: rotate(-12deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='46' viewBox='0 0 34 26'%3E%3Cg fill='none' stroke='%2329231e' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M14 17 L 9 23'/%3E%3Cpath d='M17 17 L 17.5 24'/%3E%3Cpath d='M20 17 L 25 22'/%3E%3C/g%3E%3Cellipse cx='9' cy='15' rx='6' ry='4.4' fill='%2329231e'/%3E%3Cellipse cx='17' cy='15' rx='4' ry='3.4' fill='%2329231e'/%3E%3Ccircle cx='24.5' cy='13.5' r='4' fill='%2329231e'/%3E%3Cpath d='M22 10.5 A 5.2 5.2 0 0 1 28.6 11.6 L 27.6 13 A 3.6 3.6 0 0 0 23 12 Z' fill='%23fc6e20'/%3E%3Cg fill='none' stroke='%2329231e' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M27 10 Q 29.5 6.5 32 6'/%3E%3Cpath d='M25.5 9.5 Q 26.5 5.5 29 4'/%3E%3C/g%3E%3C/svg%3E") no-repeat center / contain;
}

/* =========================================================
   Animacje
========================================================= */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-fade-up {
  animation: fade-up 0.8s cubic-bezier(0.33, 1, 0.68, 1) both;
}

.delay-1 { animation-delay: 0.1s; }
.delay-2 { animation-delay: 0.24s; }
.delay-3 { animation-delay: 0.38s; }
.delay-4 { animation-delay: 0.52s; }
.delay-5 { animation-delay: 0.66s; }

.hero-visual-anim {
  animation: fade-up 0.9s cubic-bezier(0.33, 1, 0.68, 1) 0.45s both;
}

.animate-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.stagger-children > .wp-block-column {
  transition-delay: 0s;
}

.hover-lift {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 4px rgba(41, 35, 30, 0.1),
              0 16px 32px rgba(41, 35, 30, 0.14);
}

/* =========================================================
   Reduced motion
========================================================= */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .hero-section::before {
    clip-path: none;
  }

  .polaroid-main {
    transform: rotate(3deg);
  }

  .animate-on-scroll,
  .anim-fade-up,
  .hero-visual-anim {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero-cta::before { opacity: 0.9 !important; animation: none !important; }

  .hero-title em::after { clip-path: none !important; animation: none !important; }

  .hero-visual .stamp,
  .stamp-zapis { opacity: 0.62 !important; animation: none !important; }

  .animate-on-scroll .paper-card,
  .animate-on-scroll .polaroid-accent,
  .animate-on-scroll .phone,
  .animate-on-scroll .newsletter-box { opacity: 1 !important; animation: none !important; }

  .pin-photo { opacity: 1 !important; animation: none !important; }

  .pin-scene::before { clip-path: none !important; animation: none !important; }

  .phone * { animation: none !important; }

  .map-pin { opacity: 1 !important; animation: none !important; transform: scale(1) !important; }

  .mrowka-ant,
  .mrowka-ant-dot { display: none !important; }

  .sticky-pill { transition: none !important; }

  .site-header { transition: none !important; }

  .faq-item summary::after { transition: none !important; }
}

/* =========================================================
   Edytor: tresci animowane zawsze widoczne
========================================================= */

.editor-styles-wrapper .anim-fade-up,
.editor-styles-wrapper .animate-on-scroll,
.editor-styles-wrapper .hero-visual-anim,
.editor-styles-wrapper .polaroid-main,
.editor-styles-wrapper .hero-section::before {
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
}

.editor-styles-wrapper .animate-on-scroll {
  transform: none !important;
}

.editor-styles-wrapper .animate-on-scroll .paper-card,
.editor-styles-wrapper .animate-on-scroll .polaroid-accent,
.editor-styles-wrapper .animate-on-scroll .phone,
.editor-styles-wrapper .animate-on-scroll .newsletter-box,
.editor-styles-wrapper .pin-photo {
  opacity: 1 !important;
  animation: none !important;
}

.editor-styles-wrapper .pin-scene::before {
  clip-path: none !important;
  animation: none !important;
}

.editor-styles-wrapper .phone * {
  animation: none !important;
}

.editor-styles-wrapper .map-pin {
  opacity: 1 !important;
  animation: none !important;
}

.editor-styles-wrapper .stamp {
  opacity: 0.62 !important;
  animation: none !important;
}

.editor-styles-wrapper .hero-title em::after {
  clip-path: none !important;
  animation: none !important;
}

.editor-styles-wrapper .sticky-pill {
  position: static;
  opacity: 1 !important;
  transform: none !important;
  pointer-events: auto;
}

/* =========================================================
   Responsywnosc
========================================================= */

@media (max-width: 900px) {
  .hero-visual {
    padding-bottom: 2rem;
  }

  .polaroid-main {
    width: min(360px, 82%);
  }
}

@media (max-width: 600px) {
  .brand-name {
    font-size: 1.3rem;
  }

  .brand-logo img {
    width: 38px;
    height: 38px;
  }

  .polaroid-back {
    display: none;
  }

  .stamp {
    left: 0;
  }

  .phones-stage::before { display: none; }
}

/* =========================================================
   Mobile & tablet — gutter i rytm (desktop >=1025px bez zmian)
========================================================= */

@media (max-width: 1024px) {
  .wp-site-blocks main > .wp-block-group.alignfull,
  .site-header,
  .site-footer {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 768px) {
  /* --- rytm pionowy sekcji ---
     Odstep miedzy sekcjami = padding-bottom + padding-top sasiadow.
     64+64 = 128px robilo na telefonie duze puste dziury, stad 40+40 = 80px. */
  .wp-site-blocks main > .wp-block-group.alignfull {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .hero-section {
    padding-top: 32px !important;
    padding-bottom: 36px !important;
  }

  .newsletter-section {
    padding-top: 40px !important;
    padding-bottom: 44px !important;
  }

  .section-title {
    line-height: 1.2;
    margin-bottom: 0.9rem;
  }

  .kicker {
    margin-bottom: 0.9rem;
  }

  .section-intro {
    margin-bottom: 0;
  }

  .wp-site-blocks main > .wp-block-group.alignfull > .wp-block-spacer {
    height: 28px !important;
  }

  /* --- typografia hero --- */
  .hero-title {
    font-size: clamp(2.05rem, 8.6vw, 2.7rem);
    line-height: 1.15;
    overflow-wrap: normal;
    margin-bottom: 1.1rem;
  }

  .hero-lead {
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.6rem;
  }

  .hero-note {
    margin-top: 0.9rem;
  }

  /* --- pin-zdjecia hero --- */
  .pin-scene {
    height: 300px;
    margin-top: 12px;
  }

  .pin-a { width: 116px; left: 6%; top: 6%; }
  .pin-b { width: 94px; right: 8%; top: 30%; }

  .stamp-hero {
    top: 56%;
    left: 4%;
  }

  /* --- karty problemu --- */
  .equal-cards > .wp-block-column {
    margin-bottom: 16px;
  }

  .equal-cards > .wp-block-column:last-child {
    margin-bottom: 0;
  }

  /* --- telefony (kroki) --- */
  .phones-stage::before {
    display: none;
  }

  .phones-row > .wp-block-column {
    margin-bottom: 20px;
  }

  .phones-row > .wp-block-column:last-child {
    margin-bottom: 0;
  }

  .phone {
    height: 420px;
  }

  .step-caption-title {
    margin-top: 1.1rem;
  }

  /* --- newsletter --- */
  .newsletter-box {
    padding: 2.2rem 1.1rem 2.4rem !important;
  }

  .newsletter-box::after {
    inset: 6px;
  }

  .mailerlite-form {
    margin-top: 10px;
  }

  /* --- naklejka i breakout --- */
  .sticker-tag {
    font-size: 0.64rem;
    padding: 0.4rem 0.7rem;
  }

  .wp-block-image.breakout-left {
    margin-left: auto;
    margin-right: auto;
    width: min(340px, 88%);
  }

  /* --- plywajaca pigulka: safe area + stopka --- */
  .sticky-pill {
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  }

  /* --- stopka --- */
  .site-footer .wp-block-columns .wp-block-column {
    margin-bottom: 28px;
  }

  .site-footer .wp-block-columns .wp-block-column:last-child {
    margin-bottom: 0;
  }

  .footer-bottom {
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  }

  /* --- blog / wpis --- */
  .blog-lead {
    font-size: 1rem;
  }

  .single-content {
    font-size: 1rem;
  }

  .post-hero-polaroid {
    width: min(420px, 100%);
  }

  /* --- mrowka lite --- */
  .mrowka-ant.is-mobile-lite svg {
    width: 40px;
    height: 31px;
  }

  /* --- „Jak działa": wyrownany rytm pionowy (mobile) --- */
  #jak-dziala > .wp-block-spacer {
    display: none;
  }

  #jak-dziala .phones-stage {
    margin-top: 36px;
  }

  /* Reset obrotow telefonow na mobile (regula z 781px przegrywala z .phone-1/.phone-3) */
  .phone-1,
  .phone-3 {
    --ph: 0deg;
  }

  /* telefon -> podpis: stale 16px (silniejszy selektor niz styl blockGap rdzenia) */
  .step-phone-wrap h3.step-caption-title {
    margin-top: 16px;
  }

  /* --- „Funkcje": dziennikowa lista zamiast stosu kafelkow (mobile) --- */
  #funkcje > .wp-block-spacer {
    display: none;
  }

  #funkcje .wp-block-columns.are-vertically-aligned-center.alignwide {
    display: flex;
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    gap: 1.8rem;
    margin-top: 1.4rem;
  }

  #funkcje .wp-block-columns.are-vertically-aligned-center.alignwide > .wp-block-column {
    flex: none !important;
    width: 100%;
    /* border-box: bez tego padding kolumny-karty (nizej) doliczal sie do 100%
       i cala sekcja byla przesunieta w prawo oraz wystawala poza ekran */
    box-sizing: border-box;
    margin: 0;
  }

  /* Kolumna kart = jeden papierowy kontener */
  #funkcje .wp-block-columns.are-vertically-aligned-center.alignwide > .wp-block-column:last-child {
    background: var(--wp--preset--color--paper);
    border: 1px solid rgba(111, 100, 91, 0.16);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(41, 35, 30, 0.08), 0 10px 24px rgba(41, 35, 30, 0.08);
    padding: 0.35rem 1.1rem;
  }

  #funkcje .wp-block-column > .wp-block-spacer {
    display: none;
  }

  #funkcje .equal-cards > .wp-block-column {
    margin-bottom: 0;
  }

  /* Karta -> wiersz listy z przerywana linia */
  #funkcje .paper-card.hover-lift {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px dashed rgba(41, 35, 30, 0.18) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
    padding: 0.95rem 0 1.05rem !important;
  }

  #funkcje .equal-cards:last-of-type > .wp-block-column:last-child .paper-card.hover-lift {
    border-bottom: 0 !important;
  }

  #funkcje .paper-card::before {
    display: none;
  }

  #funkcje .card-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.07rem;
    width: 100%;
    margin: 0 0 0.3rem !important;
  }

  #funkcje .card-title::before {
    content: "";
    flex: none;
    width: 20px;
    height: 20px;
    background: no-repeat center / contain;
  }

  #funkcje .f-card-a .card-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b9542f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 18c4-4.2 6-7.2 6-9.8A6 6 0 0 0 4 8.2C4 10.8 6 13.8 10 18Z'/%3E%3Ccircle cx='10' cy='8.2' r='2' fill='%23fc6e20' stroke='none'/%3E%3C/svg%3E");
  }

  #funkcje .f-card-b .card-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b9542f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.4' y='6' width='15.2' height='10.8' rx='2'/%3E%3Cpath d='M7 6l1.2-2.2h3.6L13 6'/%3E%3Ccircle cx='10' cy='11.2' r='2.6' stroke='%23fc6e20'/%3E%3C/svg%3E");
  }

  #funkcje .f-card-c .card-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b9542f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='12' height='8.4' rx='2'/%3E%3Cpath d='M7 9V6.6a3 3 0 0 1 6 0V9'/%3E%3Ccircle cx='10' cy='13.1' r='1.4' fill='%23fc6e20' stroke='none'/%3E%3C/svg%3E");
  }

  #funkcje .f-card-d .card-title::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23b9542f' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.4' y='2.8' width='9' height='14.4' rx='2'/%3E%3Cpath d='M1.6 10h4.6' stroke='%23fc6e20'/%3E%3Cpath d='M4.2 7.8 6.4 10l-2.2 2.2' stroke='%23fc6e20'/%3E%3C/svg%3E");
  }

  #funkcje .card-text {
    font-size: 0.9rem;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Polaroid: mniejszy, schowany pod lista */
  #funkcje .wp-block-image.breakout-left {
    width: min(220px, 64%);
    margin: 0 auto;
  }
}

@media (max-width: 400px) {
  .hero-title {
    font-size: clamp(1.9rem, 9.2vw, 2.2rem);
  }

  .pin-b { display: none; }

  .pin-a { width: 128px; left: 10%; top: 10%; }

  .stamp-hero { top: 62%; left: 8%; }

  .pin-scene { height: 260px; }
}

/* Ciasny naglowek na waskich ekranach (320-360px) */
@media (max-width: 360px) {
  .site-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .site-header .header-nav {
    gap: 0.9rem;
  }

  .site-header .brand {
    gap: 0.5rem;
  }

  .brand-name {
    font-size: 1.18rem;
  }

  .brand-logo img {
    width: 34px;
    height: 34px;
  }

  .btn-small .wp-block-button__link {
    font-size: 0.82rem;
    padding: 0.45rem 0.9rem;
  }
}

/* =========================================================
   Mobilne menu — plywajaca karta zamiast bialej plachty
========================================================= */

@keyframes menu-pop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* Baner zgody: zawsze w pelni kryjacy (niezaleznie od animacji) */
.mrowka-consent,
.mrowka-consent.is-visible {
  background: #ffffff !important;
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

.main-nav .wp-block-navigation-item.menu-cta {
  display: none;
}

/* Mobile: hamburger w samym rogu, ikonki + Pobierz przed nim */
@media (max-width: 768px) {
  .header-social {
    order: 1;
  }

  .header-cta {
    order: 2;
  }

  .main-nav {
    order: 3;
  }
}

/* Naglowek na mobile/tablecie: WSZYSTKO w jednym rzedzie.
   Bez tego .header-inner zawijal sie (brand w 1. wierszu, ikonki+Pobierz+hamburger
   w 2.), przez co hamburger wisial w polowie szerokosci zamiast w rogu.
   Zwezamy odstepy i logo tak, zeby rzad miescil sie juz od ~320px. */
@media (max-width: 768px) {
  .site-header {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .site-header .header-inner {
    flex-wrap: nowrap !important;
    gap: 0.6rem;
  }

  .site-header .brand {
    flex: 0 1 auto;
    min-width: 0;
    gap: 0.45rem;
  }

  .site-header .brand-name {
    font-size: 1.18rem;
  }

  /* !important — szerokosc 44px siedzi w atrybucie style obrazka w parts/header.html */
  .site-header .brand-logo img {
    width: 36px !important;
    height: auto !important;
  }

  /* margin-left: auto dosuwa caly blok (ikonki + Pobierz + hamburger) do prawej krawedzi */
  .site-header .header-nav {
    flex: 0 0 auto;
    margin-left: auto;
    gap: 0.65rem;
  }

  .site-header .header-social {
    gap: 0.5rem;
  }

  .site-header .btn-small .wp-block-button__link {
    font-size: 0.84rem;
    padding: 0.45rem 0.9rem;
  }
}

@media (max-width: 360px) {
  .site-header {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .site-header .brand-name {
    font-size: 1.05rem;
  }

  .site-header .brand-logo img {
    width: 32px !important;
  }

  .site-header .header-nav {
    gap: 0.5rem;
  }

  .site-header .btn-small .wp-block-button__link {
    font-size: 0.78rem;
    padding: 0.42rem 0.75rem;
  }
}

@media (max-width: 1024px) {
  .wp-block-navigation__responsive-container.is-menu-open {
    display: block !important;
    position: fixed !important;
    /* dlugie wlasciwosci przed inset — stare WebView (Messenger/Instagram) nie znaja inset */
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    /* kryjace przyciemnienie bez blur — fallback dla WebView */
    background: rgba(41, 35, 30, 0.4) !important;
    padding: 0;
    z-index: 100000;
  }

  @supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
    .wp-block-navigation__responsive-container.is-menu-open {
      background: rgba(41, 35, 30, 0.25) !important;
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
    }
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
    position: absolute;
    /* max() chroni przed --mrowka-header-h równym 0 zanim WebView sie ustabilizuje */
    top: max(74px, calc(var(--mrowka-header-h, 74px) + 8px));
    right: 16px;
    left: auto;
    /* 100% kontenera (inset 0), nie 100vw — WebView rozn. licza pasek przewijania */
    width: min(320px, calc(100% - 32px));
    max-width: none;
    background: var(--wp--preset--color--paper);
    background-image:
      radial-gradient(rgba(41, 35, 30, 0.025) 1px, transparent 1px),
      radial-gradient(rgba(41, 35, 30, 0.018) 1px, transparent 1px);
    background-size: 3px 3px, 5px 5px;
    border: 1px solid rgba(41, 35, 30, 0.12);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(41, 35, 30, 0.18), 0 2px 6px rgba(41, 35, 30, 0.1);
    transform-origin: top right;
    opacity: 1;
    animation: menu-pop 0.18s ease-out backwards;
    overflow: hidden;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close::after {
    content: "";
    position: absolute;
    inset: 7px;
    border: 1px dashed rgba(185, 84, 47, 0.28);
    border-radius: 9px;
    pointer-events: none;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    position: relative;
    padding: 0;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 46px;
    height: 46px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wp--preset--color--muted);
    z-index: 2;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding: 56px 18px 18px;
    display: block;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    text-align: left;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100%;
    box-sizing: border-box;
    border-top: 1px dashed rgba(111, 100, 91, 0.28);
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:first-child {
    border-top: 0;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 14px 20px;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--wp--preset--color--ink);
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after {
    display: none;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active {
    color: var(--wp--preset--color--logo-orange);
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.menu-cta {
    display: block;
    border-top: 0;
    margin-top: 14px;
  }

  .wp-block-navigation__responsive-container.is-menu-open .menu-cta .wp-block-navigation-item__content {
    background: var(--wp--preset--color--logo-orange);
    color: var(--wp--preset--color--ink);
    border-radius: 999px;
    text-align: center;
    padding: 13px 20px;
    box-shadow: 0 2px 0 rgba(180, 70, 10, 0.4);
  }

  .wp-block-navigation__responsive-container.is-menu-open .menu-cta .wp-block-navigation-item__content:hover,
  .wp-block-navigation__responsive-container.is-menu-open .menu-cta .wp-block-navigation-item__content:active {
    background: var(--wp--preset--color--ink);
    color: var(--wp--preset--color--cream);
  }
}