/*
Theme Name: mdvt
Author: Mateusz Dynda
Version: 1.2 - Rebranding (Brandbook 2025)
*/

:root {
    /* Brandbook 2025 - Kolory neutralne */
    --singel: #E0C4AF;        /* beżowy/taupe */
    --lora: #F6ECE4;          /* kremowy/jasny beż */
    --poppins-black: #0B0B0B; /* czarny */

    /* Brandbook 2025 - Kolory niebieskie */
    --navy: #002C91;          /* granatowy - główny akcent */
    --baby-blue: #B5D0FF;     /* jasny niebieski - tła/borders */
    --slate: #213B55;         /* ciemny niebieski - teksty */

    /* Legacy colors (zachowane dla kompatybilności) */
    --bright-font: #d1d1d1;
    --dark-font: #222222;
    --main-color: var(--navy); /* changed from #764BA2 to navy */
    --accent-purple: #764BA2;  /* deprecated - do usunięcia */
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: calc(1em * .625);
}

body {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    overflow-x: hidden;
    background-color: var(--lora); /* ciepły kremowy beż zamiast zimnego białego */
}

p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
}

a {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8;
    color: inherit;
    text-decoration: none;
}

button {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
    text-align: center;
}

h1 {
    font-family: 'Playfair Display', 'Didot', 'Bodoni MT', serif;
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: var(--slate);
    letter-spacing: 0.05em;
}

@media screen and (max-width: 1024px) {
    h1 {
        font-size: 6vw;
    }
}

h2 {
    font-family: 'Playfair Display', 'Didot', 'Bodoni MT', serif;
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
    color: var(--slate);
    letter-spacing: 0.05em;
}

@media screen and (max-width: 1024px) {
    h2 {
        font-size: 6vw;
    }
}

h3 {
    font-family: 'Lora', serif;
    font-size: 20px;
    font-weight: 500;
    font-style: italic;
    margin-bottom: 20px;
    text-transform: none;
    color: var(--slate);
}

@media screen and (max-width: 1024px) {
    h3 {
        font-size: 4vw;
    }
}

ul.points li {
    position: relative;
    padding-left: 20px;
}

ul.points li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    height: 8px;
    width: 8px;
    background-color: var(--main-color);

}

.hide {
    display: none !important;
}

.strong {
    font-family: 'Playfair Display', Didot, 'Bodoni MT', serif;
    font-weight: 700;
}

strong {
    font-weight: bold;
}

.navbar {
    width: 100%;
    height: 100px;
    background-color: #ffffff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    display: flex;
    padding: 0 5vw;
    transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.navbar.navbarScroll {
    height: 70px;
}

.navbar .logo {
    flex: 1;
}

.navbar .logo a {
    height: 100%;
    display: flex;
    align-items: center;
}

.navbar .logo a img {
    height: 100%;
    max-height: 50px;
    display: block;
}

.navbar .list {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    column-gap: 1vw;
    list-style: none;
    flex: 4;
    width: 100%;
}

.navbar .listActive {
    transform: translateX(-100%);

}

.navbar .list li a {
    color: var(--dark-font);
    text-transform: uppercase;
    font-weight: 400;
    white-space: nowrap;
}

.navbar .list .menu-item a {
    transition: all .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.navbar .list .menu-item a:hover {
    color: var(--main-color);
}

.navbar .list .cta a {
    padding: 8px 20px;
    outline: 0;
    border: 2px solid #000000;
    cursor: pointer;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
    text-align: center;
    background-color: var(--main-color);
}

.navbar .list .cta.menu-item a:hover {
    filter: brightness(.8);
    color: var(--bright-font);
}

.navbar .cta a:hover:after {
    top: 0px;
    left: 0px;
}

.navbar .active:not(.cta) a {
    color: var(--main-color) !important;
}

.navbar .social {
    display: flex;
    list-style: none;
    align-items: center;
    column-gap: 5px;
    margin-left: 10px;
}

.navbar .social li {
    line-height: 0;
}

.navbar .social svg {
    height: 14px;
    fill: var(--dark-font);
    display: block;
    transition: all .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.navbar .social svg:hover {
    fill: var(--main-color);
}

.navbar .social li:first-child {
    display: none;
}

.navbar .burger {
    display: none;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    border: none;
    background: none;
    cursor: pointer;
}

.navbar .burger div {
    width: 35px;
    height: 3px;
    background-color: rgb(0, 0, 0);
    margin: 4px 0;
    transition: all 0.1s ease-in-out;
}

.navbar .burgerActive div {
    background-color: rgb(0, 0, 0);
}

.navbar .burgerActive div:nth-child(1) {
    margin-bottom: -7px;
}

.navbar .burgerActive div:nth-child(3) {
    margin-top: -7px;
}

.navPadding {
    height: 100px;
    background: none;
}

.navPaddingScroll {
    height: 70px;
}

@media screen and (max-width: 1024px) {

    .navbar {
        height: 60px;
        border-bottom: 1px solid rgb(174, 174, 174);
    }

    .navbar.navbarScroll {
        height: 60px;
    }

    .navbar .burger {
        display: flex;
    }

    .navbar .logo {
        flex: 1;
    }

    .navbar .logo a img {
        max-height: 30px;
        width: auto;
        display: block;
    }

    .navbar .social {
        flex: 1;
        justify-content: center;
    }

    .navbar .cta a {
        padding: 2px 20px;
        outline: 0;
        border: 2px solid #000000;
        background-color: var(--main-color);
        cursor: pointer;
        position: relative;
        user-select: none;
        -webkit-user-select: none;
        touch-action: manipulation;
        color: #fff;
    }

    .navbar .cta a::after {
        content: none;
    }

    .navbar .social li:first-child {
        display: flex;
    }

    .navbar .social li:not(:first-child) {
        display: none;
    }

    .navbar .list {
        flex-direction: column;
        justify-content: center;
        row-gap: 25px;
        background-color: #ffffff;
        top: 60px;
        left: 100%;
        position: absolute;
        height: 100vh;
        transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
    }

    .navbar .list .cta {
        display: none;
    }

    .navPadding {
        height: 60px;
        background: none;
    }

    .navPaddingScroll {
        height: 60px;
    }

}

/* HERO */

.hero__container {
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background-color: #222;
    user-select: none;
  }

  .hero__container .outer {
    height: calc(100% - 60px);
    width: 100%;
  }

  .hero__container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .hero__container .content {
    position: absolute;
    left: 25px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
  }

  .hero__container .wysiwyg {
    color: #fff;
    text-shadow: 1px 1px 2px #000;
  }

  .hero__container .swiper-hero {
    width: 100%;
    height: 100%;
  }

  .hero__container .swiper-hero .swiper-slide img {
    width: 100%;
    height: 100%;
  }

  .hero__container .dim {
    background: linear-gradient(to right, #171b1f, transparent);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 50%;
    z-index: 2;
  }

  @media screen and (min-width: 1023px) {
    .hero__container .outer {
        height: calc(100% - 100px);
    }

    .hero__container .content {
      left: 15vw;
    }

    .hero__container .wysiwyg h1 {
      font-size: 5vw;
    }
  }

  /* HERO CALENDAR */

  .calendar {
    position: absolute;
    bottom: calc(5vw - 30px);
    left: 0;
    height: 0;
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 99 !important;
  }

  .calendar__container {
    display: flex;
    align-items: center;
    background-color: #fff;
    height: 60px;
    width: min-content;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;
  }

  .calendar__container svg {
    height: 20px;
    fill: var(--dark-font);
    position: absolute;
    right: 20px;
    z-index: 1;
  }

  .calendar__container .inputsDate .placeholder {
    position: absolute;
    cursor: pointer;
    width: 100%;
    height: 100%;
    z-index: 2;
    color: var(--dark-font);
    display: flex;
    align-items: center;
    background: transparent;
    padding: 0 0 0 20px;
    font-size: 12px;
  }

  .calendar__container .inputsNumber input {
    position: absolute;
    right: 50px;
  }

  .calendar__container .inputsNumber .placeholder {
    position: absolute;
    cursor: pointer;
    height: 100%;
    color: var(--dark-font);
    display: flex;
    align-items: center;
    background: transparent;
    padding: 0 0 0 20px;
    font-size: 12px;
  }

  .calendar__container .send {
    width: 210px;
    height: 100%;
    display: flex;
  }

  .calendar__container .send button {
    width: 100%;
    border: none;
    background-color: var(--main-color);
    color: var(--bright-font);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease-in-out;
    text-transform: uppercase;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  }

  .calendar__container .send button:hover {
    background-color: var(--dark-font);
  }

  .calendar__container input::placeholder {
    color: var(--dark-font);
  }

  .calendar__container .quantity {
    position: relative;
  }

  .calendar__container .quantity input[type=number]::-webkit-inner-spin-button,
  .calendar__container .quantity input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  .calendar__container .quantity input[type=number] {
    -moz-appearance: textfield;
  }

  .calendar__container .quantity input {
    text-align: center;
    padding: 0;
    margin: 0;
    border: none;
    font-size: 15px;
  }

  .calendar__container .quantity input:focus {
    outline: 0;
  }

  .calendar__container .quantity .quantity-nav {
    position: absolute;
    right: 0;
    display: flex;
    flex-direction: column;
  }

  .calendar__container .quantity .quantity-button {
    position: relative;
    cursor: pointer;
    border-left: 1px solid #e6e6e6;
    width: 40px;
    height: 30px;
    color: var(--dark-font);
    font-size: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .calendar__container .quantity .quantity-button.quantity-down {
    border-top: 1px solid #e6e6e6;
  }

  .swiper-button-next, .swiper-button-prev {
    color: var(--bright-font);
  }

  /* Mobile calendar styles */
  @media screen and (max-width: 1022px) {
    .hero__container .content {
      top: calc(50% - 50px);
    }

    .calendar {
      bottom: 130px;
      padding: 0 20px;
      z-index: 2;
    }

    .calendar__container {
      flex-direction: column;
      width: 100%;
      height: auto;
      max-width: 240px;
    }

    .calendar__container .inputsDate {
      display: flex;
      align-items: center;
      width: 100%;
      height: 50px;
      position: relative;
      border-bottom: 1px solid #e6e6e6;
    }

    .calendar__container .inputsNumber {
      display: flex;
      align-items: center;
      width: 100%;
      height: 50px;
      position: relative;
      border-bottom: 1px solid #e6e6e6;
    }

    .calendar__container .divider {
      display: none;
    }

    .calendar__container .send {
      width: 100%;
      height: 50px;
    }

    .calendar__container .send button {
      font-size: 14px;
      font-weight: 600;
    }

    .calendar__container .inputsNumber input {
      right: 90px;
      left: auto;
    }

    .calendar__container .quantity .quantity-nav {
      flex-direction: row;
    }

    .calendar__container .quantity .quantity-button {
      width: 40px;
      height: 50px;
      border-left: 1px solid #e6e6e6;
    }

    .calendar__container .quantity .quantity-button.quantity-down {
      border-top: none;
      border-left: none;
      border-right: 1px solid #e6e6e6;
    }
  }

  @media screen and (min-width: 1023px) {

    .calendar__container .send button {
      box-shadow: none;
    }

    .calendar__container .inputsDate {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 210px;
      height: 100%;
      position: relative;
      -webkit-user-select: none;
      /* Safari */
      -moz-user-select: none;
      /* Firefox */
      -ms-user-select: none;
      /* Internet Explorer/Edge */
      user-select: none;
      /* Standard */
    }

    .calendar__container .inputsNumber {
      display: flex;
      align-items: center;
      width: 210px;
      height: 100%;
      position: relative;
      -webkit-user-select: none;
      /* Safari */
      -moz-user-select: none;
      /* Firefox */
      -ms-user-select: none;
      /* Internet Explorer/Edge */
      user-select: none;
      /* Standard */
    }

    .calendar__container .divider {
      display: block;
      width: 1px;
      height: 100%;
      background-color: #e6e6e6;
    }

    .navbar__container .bar {
      padding: 0 5vw;
    }
  }

  /* BANNER */

.banner {
    width: 100%;
    height: 50vh;
    max-height: 700px;
}

.banner .outer {
    width: 100%;
    height: 100%;
}

.banner .background {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media screen and (max-width: 1024px) {
    .banner {
        height: 40vh;
    }
}

.textLeft {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.textLeft .outer {
    max-width: 1400px;
    width: 100%;
    margin: 0 5vw;
    padding: 50px 80px;
    z-index: 1;
    column-gap: 50px;
}

@media screen and (max-width: 1024px) {
    .textLeft .outer {
        max-width: 100%;
        padding: 25px;
    }

    .textLeft .btn {
        display: flex;
        justify-content: flex-end;
    }
}

.textImgCenter {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.textImgCenter .background {
    width: 100%;
    height: 80vh;
    object-fit: cover;
    object-position: center;
}

.textImgCenter .outer {
    max-width: 1400px;
    width: 100%;
    margin: -50px 5vw 0 5vw;
    padding: 50px 80px;
    background-color: #ffffff;
    z-index: 1;
    column-gap: 50px;
    display: flex;
}

.textImgCenter .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}

.textImgCenter .btn {
    display: flex;
    justify-content: flex-end;
}

.textImgCenter .image {
    display: flex;
    align-items: flex-end;
    flex: 1;
}

.textImgCenter .image a {
    height: 80%;
    width: 100%;
}

.textImgCenter .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    aspect-ratio: 4 / 3;
}

@media screen and (max-width: 1024px) {
    .textImgCenter {
        margin: 0;
    }

    .textImgCenter .background {
        height: 100%;
    }

    .textImgCenter .outer {
        flex-direction: column;
        margin: 0;
        padding: 0;
    }

    .textImgCenter .content {
        padding: 25px;
    }

    .textImgCenter .image a {
        height: 100%;
    }
}

.textRight {
    width: 100%;
    height: 80vh;
    min-height: 700px;
    margin-bottom: 5vw;
    position: relative;
}

.textRight .outer {
    width: 100%;
    height: 100%;
}

.textRight .image {
    height: 100%;
}

.textRight .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.textRight .content {
    background-color: #ffffff;
    width: 100%;
    max-width: 800px;
    height: 100%;
    position: absolute;
    bottom: -5vw;
    right: 5vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 50px 80px;
    z-index: 0;
}

.textRight .btn {
    display: flex;
    justify-content: flex-end;
}

@media screen and (max-width: 1024px) {

    .textRight {
        height: 100%;
        margin-bottom: 0;
    }

    .textRight .outer {
        display: flex;
        flex-direction: column;
    }

    .textRight .image {
        order: 2;
    }

    .textRight .content {
        order: 1;
        bottom: auto;
        right: auto;
        width: 100%;
        max-width: 100%;
        padding: 25px;
        position: relative;
    }
}

.snippetRight {
    width: 100%;
    height: 80vh;
}

.snippetRight .outer {
    display: flex;
    align-items: center;
    height: 100%;
}

.snippetRight .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80%;
    margin-left: -5vw;
    margin-right: 5vw;
    background-color: rgb(255, 255, 255);
    padding: 50px 80px;
}

.snippetRight .icons {
    display: flex;
    column-gap: 20px;
}

.snippetRight .icons .icon {
    display: flex;
    align-items: center;
}

.snippetRight .icons .icon svg {
    fill: var(--main-color);
    height: 15px;
    margin-right: 10px;
}

.snippetRight .image {
    flex: 2;
    height: 100%;
}

.snippetRight .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.snippetRight .btn {
    z-index: 1;
    display: flex;
    justify-content: flex-end;
}

@media screen and (max-width: 1024px) {
    .snippetRight {
        height: auto;
    }

    .snippetRight .outer {
        flex-direction: column;
    }

    .snippetRight .image {
        order: 2;
    }

    .snippetRight .content {
        margin: 0;
        order: 1;
        padding: 25px;
    }
}

.snippetLeft {
    width: 100%;
    height: 80vh;
}

.snippetLeft .outer {
    display: flex;
    align-items: center;
    height: 100%;
}

.snippetLeft .content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80%;
    margin-left: 5vw;
    margin-right: -5vw;
    background-color: rgb(255, 255, 255);
    padding: 50px 80px;
    z-index: 1;
}

.snippetLeft .icons {
    display: flex;
    column-gap: 20px;
}

.snippetLeft .icons .icon {
    display: flex;
    align-items: center;
}

.snippetLeft .icons .icon svg {
    fill: var(--main-color);
    height: 15px;
    margin-right: 10px;
}

.snippetLeft .image {
    flex: 2;
    height: 100%;
}

.snippetLeft .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.snippetLeft .btn {
    z-index: 1;
    display: flex;
    justify-content: flex-end;
}

@media screen and (max-width: 1024px) {
    .snippetLeft {
        height: auto;
    }

    .snippetLeft .outer {
        flex-direction: column;
    }

    .snippetLeft .image {
        order: 2;
    }

    .snippetLeft .content {
        margin: 0;
        order: 1;
        padding: 25px;
    }
}

.textCenter {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.textCenter .background {
    width: 100%;
    height: 80vh;
    object-fit: cover;
    object-position: center;
}

.textCenter .outer {
    max-width: 1400px;
    width: 100%;
    margin: -50px 5vw 0 5vw;
    padding: 50px 80px;
    background-color: #ffffff;
}

.textCenter .outer .columns {
    display: flex;
    column-gap: 50px;
    row-gap: 25px;
}

.textCenter .outer .columns ul {
    list-style: none;
}

.textCenter .outer .columns ul:not(:first-child) {
    margin-bottom: 10px;
}

.textCenter .strong {
    margin-bottom: 10px;
}

.textCenter .icons {
    display: flex;
    column-gap: 20px;
}

.textCenter .icons .icon {
    display: flex;
    align-items: center;
}

.textCenter .icons .icon svg {
    fill: var(--main-color);
    height: 15px;
    margin-right: 10px;
}

.textCenter form {
    z-index: 1;
}

.textCenter .col {
    display: flex;
    flex-wrap: wrap;
}

.textCenter .col:nth-child(1) {
    flex: 2;
    flex-direction: column;
}

.textCenter .col:nth-child(2) {
    flex: 3;
    column-gap: 25px;
    row-gap: 25px;
    justify-content: flex-start;
}

.textCenter .btn {
    display: flex;
    justify-content: flex-end;
    z-index: 1;
}

@media screen and (max-width: 1024px) {
    .textCenter .background {
        height: 40vh;
        order: 1;
    }

    .textCenter .outer {
        margin: 0;
        padding: 25px;
        order: 2;
    }

    .textCenter .columns {
        flex-direction: column;
    }

    .textCenter .col:nth-child(2) {
        flex-direction: column;
    }
}


.additionalText {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.additionalText .outer {
    max-width: 1400px;
    width: 100%;
    margin: 50px 5vw 0 5vw;
    padding: 50px 80px;
    background-color: #ffffff;
}

@media screen and (max-width: 1024px) {

    .additionalText .outer {
        margin: 0;
        padding: 0 25px;
    }
}

.gallery {
    width: 100%;
}

.gallery .tabContent {
    display: grid;
    padding: 25px;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 15px;
    row-gap: 15px;
}

.gallery .image {
    position: relative;
    width: 100%;
    display: flex;
    animation: fadeEffect 1s;
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.gallery .image::after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.gallery .image img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.gallery .tabs {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 50px 25px;
}

.gallery .tabs ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    column-gap: 20px;
}

@media screen and (max-width: 960px) {
    .gallery .tabContent {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery .tabs .btn {
        width: 100% !important;
        display: flex;
        justify-content: center;
    }
}

@media screen and (max-width: 500px) {
    .gallery .tabContent {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* SNIPPET BOX */

.snippetBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-bottom: 60px; /* dodano przerwe pod snippet boxami */
}

.snippetBox .outer {
    max-width: 1400px;
    width: 100%;
    margin: 0 5vw 0 5vw;
    padding: 50px 80px;
    display: grid;
    justify-items: center;
    column-gap: 15px;
    row-gap: 15px;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.snippetBox .box {
    width: 350px;
    display: flex;
    flex-direction: column;
}

/* Na szerszych ekranach - wyrównaj wysokość boxów w grid */
@media screen and (min-width: 768px) {
    .snippetBox .outer {
        align-items: stretch; /* wyrównaj wysokość wszystkich boxów w rzędzie */
    }

    .snippetBox .box {
        height: 100%; /* box zajmuje pełną wysokość grid cell */
        display: flex;
        flex-direction: column;
    }

    .snippetBox.equal .content {
        display: flex;
        flex-direction: column;
        flex-grow: 1; /* content rozciąga się na całą dostępną wysokość */
        justify-content: flex-start; /* tekst od góry */
    }

    .snippetBox.equal .content .btn,
    .snippetBox.equal .content > a {
        margin-top: auto; /* przycisk zawsze na dole */
    }
}

@media screen and (max-width: 520px) {
    .snippetBox {
        margin-bottom: 40px; /* mniejsza przerwa na mobile */
    }

    .snippetBox .outer {
        padding: 25px;
    }

    .snippetBox .box {
        width: 100%;
    }

    .snippetBox .content {
        padding: 20px; /* mniejszy padding na mobile */
        min-height: 150px; /* mniejsza minimalna wysokość na mobile */
    }

    .snippetBox.equal .content {
        padding: 20px;
        min-height: 150px;
    }

}

.snippetBox img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: all 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.snippetBox .box:hover img {
    filter: brightness(0.8);
}

.snippetBox.snippetBox.equal .box:hover img {
    filter: none;
}

.snippetBox .content {
    border: 1px solid #d1d1d1;
    border-top: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 25px; /* zwiększone z 20px dla większego oddechu */
    background-color: #ffffff; /* białe tło dla kontrastu z beżowym body */
    min-height: 180px; /* minimalna wysokość dla spójności */
}

.snippetBox.equal .content {
    border: none;
    padding: 25px; /* zwiększone z 20px - równy padding ze wszystkich stron */
    background-color: #ffffff; /* białe tło również dla boxów .equal */
    min-height: 180px; /* minimalna wysokość również dla equal */
}

.snippetBox .content a {
    margin-top: 15px;
    display: flex;
    justify-content: flex-end;
}

/* Nagłówki w kartach snippetBox - Playfair Display */
.snippetBox .content p:first-child b,
.snippetBox .content p:first-of-type b {
    font-family: 'Playfair Display', 'Didot', 'Bodoni MT', serif;
    font-weight: 600;
    font-size: 1.15em;
    color: var(--slate);
    letter-spacing: 0.02em;
    display: block;
    margin-bottom: 8px;
}

.snippetBox .icons {
    display: flex;
    column-gap: 20px;
}

.snippetBox .icons .icon {
    display: flex;
    align-items: center;
}

.snippetBox .icons .icon svg {
    fill: var(--main-color);
    height: 15px;
    margin-right: 10px;
}

/* PRICE LIST */

.priceList__container {
    display: flex;
    justify-content: center;
}

.priceList__container ul {
    padding-left: 20px;
}

.priceList__container .outer {
    max-width: 1400px;
    width: 100%;
    margin: 0 5vw;
    padding: 50px 80px;
    background-color: #f7f7f7;
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.priceList__container .table {
    display: flex;
    justify-content: space-between;
}

.priceList__container .table .col {
    display: flex;
    padding: 10px;
}

.priceList__container .table:nth-child(2n) {
    background-color: #f0f0f0;
}

.priceList__container .table .col:nth-child(1) {
    flex: 8;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}


.priceList__container .table .info {
    display: flex;
    flex: 2;
}

.priceList__container .table .info .col:nth-child(1) {
    flex: 1;
    justify-content: center;
    align-items: center;
}

.priceList__container .table .info .col:nth-child(2) {
    flex: 1;
    justify-content: center;
    align-items: center;
}



@media screen and (max-width: 1024px) {

    .priceList__container .outer {
        margin: 0;
        padding: 0 15px;
    }

    .priceList__container .title h3 {
        margin: 15px 0;
    }

    .priceList__container .table {
        flex-direction: column;
        border-bottom: 1px solid #f0f0f0;
    }

    .priceList__container .table .info {
        flex-direction: column;
    }

    .priceList__container .table:nth-child(2n) {
        background-color: #dfdfdf;
    }
}

.footer {
    width: 100%;
    background-color: #0e0e0e;
    color: var(--bright-font);
    padding: 5vw;
}

.footer .outer {
    display: flex;
    column-gap: 50px;
    row-gap: 25px;
}

.footer .col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer .logo img {
    height: 50px;
    display: block;
    margin-bottom: 25px;
}

.footer .social {
    display: flex;
    list-style: none;
    align-items: center;
    column-gap: 10px;
}

.footer .social svg {
    height: 25px;
    fill: var(--bright-font);
    transition: all .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.footer .social svg:hover {
    fill: var(--main-color);
}

.footer ul {
    list-style: none;
}

/* Footer headings - białe na ciemnym tle */
.footer h3 {
    color: #ffffff;
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 18px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.footer p {
    color: var(--bright-font);
}

.footer a {
    color: var(--bright-font);
    transition: all .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.footer a:hover {
    color: var(--main-color);
}

.footer .logoJs {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.footer .logoJs img {
    height: 40px;
    width: auto;
    display: block;
}

@media screen and (max-width: 1024px) {
    .footer .outer {
        flex-direction: column;
    }

    .footer .col {
        text-align: center;
    }

    .footer .logoJs {
        justify-content: center;
    }
}

.defaultPage {
    width: 100%;
    display: flex;
    justify-content: center;
    min-height: 70vh;
}

.defaultPage ol,
.defaultPage ul {
    padding-left: 20px;
}

.defaultPage .outer {
    max-width: 1400px;
    width: 100%;
    margin: 0 5vw;
    padding: 50px 80px;
    z-index: 1;
    column-gap: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.defaultPage a {
    text-decoration: none;
    color: var(--dark-font);
    text-transform: uppercase;
    transition: all .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.defaultPage a:hover {
    color: var(--main-color);
}

.defaultPage h2 {
    margin: 40px 0;
}

.defaultPage h3 {
    margin: 30px 0;
}

@media screen and (max-width: 1024px) {
    .defaultPage .outer {
        margin: 0;
        padding: 25px;
    }
}

.errorPage {
    width: 100%;
}

.errorPage .outer {
    width: 100%;
    height: 70vh;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* COOKIE */
.cookieInfo {
    position: fixed;
    bottom: 0;
    background-color: var(--main-color);
    opacity: 0.9;
    z-index: 99999;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    align-items: center;
    padding-left: 120px;
    padding-right: 120px;
    padding-top: 10px;
    padding-bottom: 10px;
}

@media (max-width: 1366px) {
    .cookieInfo {
        padding-left: 50px;
        padding-right: 50px;
    }
}

@media (max-width: 1024px) {
    .cookieInfo {
        grid-template-columns: repeat(1, 1fr);
        padding-left: 15px;
        padding-right: 15px;
    }
}

.cookieInfo p {
    color: #ffffff;
    margin: 0;
    justify-self: left;
}

@media (max-width: 1024px) {
    .cookieInfo p {
        justify-self: center;
    }
}

.cookieInfo a {
    color: #ffffff;
    text-decoration: none;
    justify-self: right;
}

@media (max-width: 1024px) {
    .cookieInfo a {
        justify-self: center;
    }
}

.btn {
    margin-top: 20px;
}

.btn button {
    text-align: center;
    display: inline-block;
    padding: 10px 40px;
    cursor: pointer;
    letter-spacing: 2px;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    margin: 20px;
    background: var(--main-color);
    color: #ffffff;
    border: none;
}

.btn button:before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    border: 2px solid rgb(0, 0, 0);
    left: -8px;
    top: -8px;
    transition: all .3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.btn button:hover:before {
    left: -2px;
    top: -2px;
}

/* HEADER */

.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.header .outer {
    max-width: 1400px;
    width: 100%;
    padding: 50px 80px;
}

@media (max-width: 1024px) {
    .header .outer {
        padding: 0 15px;
    }
}

/* WYSIWYG */

.wysiwyg a {
    color: var(--main-color);
}

.wysiwyg a:hover {
    text-decoration: underline;
}

.wysiwyg ul {
    padding-left: 25px;
}

.wysiwyg ul li {
    margin-bottom: 10px;
}

/* POPUP */

.popup__container {
    background-color: #000000cb;
    position: fixed;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    padding: 0 15px;
  }

  .popup-content {
    background-color: #F8F8F8;
    width: 100%;
    max-width: 600px;
    padding: 25px 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .popup-content img {
    width: 100%;
  }

  .popup-discount {
    margin: 25px 0 0 0;
    display: flex;
    flex-direction: column;
   align-items: center;
  }

  .popup-close {
    margin: 25px 0 0 0;
    display: flex;
    justify-content: center;
  }

  /* opinion */

  .swiperOpinion {
    width: 90vw;
    height: 100%;
    margin: 5vh auto;
  }

  .swiperOpinion .swiper-slide {
    background: #fff;
    display: flex;
    flex-direction: column;
    padding: 25px 25px;
    margin: 0 0 5px 0;
  }

  .swiperOpinion .logo {
    display: none;
    justify-content: flex-end;
  }

  .swiperOpinion .logo img {
    width: 25px;
    height: 25px;
  }

  .swiperOpinion .avatar {
    display: flex;
    align-items: center;
    gap: 15px;
  }

  .swiperOpinion .avatar p {
    font-weight: bold;
  }

  .swiperOpinion .avatar img {
    width: 40px;
    height: 40px;
    object-position: center;
    object-fit: cover;
    border-radius: 50%;
  }

  .swiperOpinion .stars {
    margin: 15px 0 5px 0;
  }

  .swiperOpinion .stars svg {
    width: 15px;
    height: 15px;
    fill: #ffee00f1;
  }

  .swiperOpinion .swiper-scrollbar-drag {
    background: var(--main-color);
  }

  @media screen and (min-width: 1024px) {

  .swiperOpinion .logo {
    display: flex;
  }
}

  /* swiperSlider */

    .swiperSlider {
        width: 100%;
       height: 40vh;
       z-index: 0;
      }

      .swiperSlider .swiper-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
      }

      .swiperSlider .swiper-scrollbar {
        background: #0e0e0e98;
        border-radius: 0;
      }

      .swiperSlider .swiper-scrollbar-horizontal {
        height: 10px;
        bottom: 0;
        left: 0;
        width: 100%;
      }

      .swiperSlider .swiper-scrollbar-drag {
        background: var(--main-color);
        border-radius: 0;
      }

      @media screen and (min-width: 1024px) {
        .swiperSlider {
           height: 80vh;
          }
      }

/* ========================================
   Price List Dropdown Styles
   ======================================== */

.pricelist-item {
    position: relative;
    flex-wrap: wrap;
    align-items: center;
}

/* Przycisk Rozwiń/Zwiń */
.pricelist-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 10px;
    padding: 4px 12px;
    background: transparent;
    border: 1px solid rgba(118, 75, 162, 0.3);
    color: var(--main-color);
    border-radius: 20px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 400;
    transition: all 0.3s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.pricelist-toggle:hover {
    background: rgba(118, 75, 162, 0.1);
    border-color: var(--main-color);
}

.pricelist-toggle:focus {
    outline: 2px solid rgba(118, 75, 162, 0.3);
    outline-offset: 2px;
}

/* Ikona strzałki */
.toggle-icon {
    transition: transform 0.3s ease;
}

.pricelist-toggle.active .toggle-icon {
    transform: rotate(180deg);
}

/* Rozwinięty opis */
.pricelist-extended {
    flex-basis: 100%;
    width: 100%;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
}

.pricelist-extended.active {
    max-height: 1000px;
    opacity: 1;
    margin-top: 15px;
}

.extended-content {
    padding: 20px 25px;
    background: linear-gradient(135deg, rgba(118, 75, 162, 0.05) 0%, rgba(118, 75, 162, 0.02) 100%);
    border-left: 3px solid var(--main-color);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.extended-content p {
    margin: 0 0 10px 0;
}

.extended-content p:last-child {
    margin-bottom: 0;
}

/* Responsywność */
@media screen and (max-width: 768px) {
    .pricelist-toggle {
        font-size: 11px;
        padding: 3px 10px;
        gap: 4px;
    }

    .extended-content {
        padding: 15px 18px;
    }
}

/* Booksy Widget Wrapper */
.booksy-widget-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 20px;
    width: 100%;
}

/* ============================================
   BRANDBOOK 2025 - NOWE STYLE
   ============================================ */

/* Snell Roundhand / Dancing Script - elegant handwritten */
.special-text,
.handwritten,
.price-highlight {
    font-family: 'Dancing Script', 'Brush Script MT', cursive;
    font-size: 1.3em;
    color: var(--navy);
    font-weight: 500;
    line-height: 1.4;
}

/* Lora italic - lead paragraphs */
.lead,
.intro-text,
.subtitle {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1.1em;
    color: var(--slate);
    margin-bottom: 20px;
    line-height: 1.6;
}

/* Elegant quotes */
blockquote.elegant {
    font-family: 'Lora', serif;
    font-style: italic;
    font-size: 1.2em;
    color: var(--slate);
    border-left: 4px solid var(--baby-blue);
    padding-left: 20px;
    margin: 30px 0;
}

/* Primary buttons - navy zamiast purple */
button.primary,
a.button-primary,
.btn-primary,
.button.primary {
    background: var(--navy) !important;
    border-color: var(--navy) !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}

button.primary:hover,
a.button-primary:hover,
.btn-primary:hover,
.button.primary:hover {
    background: var(--slate) !important;
    border-color: var(--slate) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 43, 127, 0.3);
}

/* Secondary buttons - baby blue */
button.secondary,
a.button-secondary,
.btn-secondary {
    background: var(--baby-blue);
    border-color: var(--baby-blue);
    color: var(--navy);
}

button.secondary:hover,
a.button-secondary:hover,
.btn-secondary:hover {
    background: var(--navy);
    border-color: var(--navy);
    color: #ffffff;
}

/* Accent borders i dekoracje */
.section-divider,
.card-border,
hr.styled {
    border-color: var(--baby-blue);
    border-width: 2px;
}

/* Card backgrounds */
.card,
.box,
.panel {
    background-color: var(--lora);
    border: 1px solid var(--baby-blue);
}

.card:hover,
.box:hover {
    border-color: var(--navy);
    box-shadow: 0 4px 16px rgba(0, 43, 127, 0.1);
}

/* Links - navy color */
a.text-link {
    color: var(--navy);
    text-decoration: underline;
    text-decoration-color: var(--baby-blue);
}

a.text-link:hover {
    color: var(--slate);
    text-decoration-color: var(--slate);
}

/* Alternating section backgrounds */
section.bg-alternate:nth-of-type(even) {
    background-color: var(--singel);
}

section.bg-alternate:nth-of-type(odd) {
    background-color: var(--lora);
}

/* Badges / Tags */
.badge,
.tag {
    background-color: var(--navy);
    color: #ffffff;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.85em;
    font-weight: 500;
}

.badge.light,
.tag.light {
    background-color: var(--baby-blue);
    color: var(--navy);
}

/* Icons tint */
.icon-navy {
    color: var(--navy);
}

.icon-slate {
    color: var(--slate);
}

.icon-blue {
    color: var(--baby-blue);
}

/* Hero section overrides - białe teksty na ciemnym tle */
.hero__container h1,
.hero__container h2,
.hero__container h3 {
    color: #ffffff !important; /* białe zamiast slate dla hero z ciemnym tłem */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* lepszy cień dla czytelności */
}

.hero__container .wysiwyg h1,
.hero__container .wysiwyg h2,
.hero__container .wysiwyg h3 {
    color: #ffffff !important;
}

/* Offers page - białe teksty na ciemnym tle (hero + karty ofert) */
.offers-hero-content h1,
.offers-hero-content h2,
.offers-hero-content p {
    color: #ffffff !important;
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
}

.snippetBox .offer-title-overlay h3 {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Exception: H3 in pickers (białe tło dropdown) - czarny tekst bez cienia */
.hero__container .persons-picker h3,
.hero__container .meals-picker h3,
.hero__container .picker-header h3 {
    color: #333 !important;
    text-shadow: none !important;
}

/* ========================================
   OFFERS PAGE - Hero Section & Offer Boxes
   ======================================== */

/* Hero Section with Overlapping Boxes */
.offers-hero {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    margin-bottom: 0;
}

.offers-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.offers-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.4) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.offers-hero-content {
    text-align: center;
    color: white;
    padding: 20px;
    max-width: 900px;
    z-index: 1;
}

.offers-hero-content h1 {
    font-size: 52px;
    font-weight: bold;
    margin: 0 0 20px 0;
    line-height: 1.2;
}

.offers-hero-content p {
    font-size: 22px;
    margin: 0;
    line-height: 1.6;
    font-weight: 300;
}

/* Override snippetBox margin on offers page ONLY (after .offers-hero) */
.offers-hero + .snippetBox {
    position: relative;
    z-index: 1;
    margin-top: 50px !important;
    padding-top: 0 !important;
}

.offers-hero + .snippetBox .outer {
    padding-top: 0;
}

/* Offer Box Styles - Title Overlay on Image */
.snippetBox .offer-box .image-wrapper {
    position: relative;
    width: 100%;
}

.snippetBox .offer-title-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 70%, transparent 100%);
    padding: 20px 20px 30px;
    z-index: 2;
}

.snippetBox .offer-title-overlay h3 {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    text-align: center;
    line-height: 1.3;
}

/* Offer Info Badges on Image */
.snippetBox .offer-info-badges {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    z-index: 2;
}

.snippetBox .offer-badge {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    padding: 10px 15px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    flex: 1;
    min-width: 0;
}

.snippetBox .offer-badge svg {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}

.snippetBox .offer-badge .badge-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.snippetBox .offer-badge .price-text {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
    white-space: nowrap;
}

.snippetBox .offer-badge .unit-text {
    font-size: 11px;
    font-weight: 500;
    color: #666;
    line-height: 1.2;
    white-space: nowrap;
}

/* Offer Box Content - Fixed Height */
.snippetBox .offer-box .content {
    min-height: 80px;
    display: flex;
    align-items: center;
}

.snippetBox .offer-box .content > div {
    width: 100%;
}

.snippetBox .offer-box .content p {
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

/* Offers Page - Responsive Styles */
@media screen and (max-width: 768px) {
    .offers-hero {
        height: 380px;
        margin-bottom: 0;
    }

    .offers-hero-content h1 {
        font-size: 36px;
        margin-bottom: 15px;
    }

    .offers-hero-content p {
        font-size: 18px;
    }

    body .snippetBox {
        margin-top: 40px !important;
    }
}

@media screen and (max-width: 520px) {
    .offers-hero {
        height: 300px;
        margin-bottom: 0;
    }

    .offers-hero-content h1 {
        font-size: 28px;
        margin-bottom: 10px;
    }

    .offers-hero-content p {
        font-size: 16px;
    }

    body .snippetBox {
        margin-top: 30px !important;
    }

    .snippetBox .offer-title-overlay h3 {
        font-size: 20px;
    }

    .snippetBox .offer-title-overlay {
        padding: 20px 15px 15px;
    }

    .snippetBox .offer-info-badges {
        flex-direction: column;
        gap: 8px;
    }

    .snippetBox .offer-badge {
        padding: 8px 12px;
    }

    .snippetBox .offer-badge svg {
        width: 24px;
        height: 24px;
    }

    .snippetBox .offer-badge .price-text {
        font-size: 16px;
    }

    .snippetBox .offer-badge .unit-text {
        font-size: 10px;
    }

    .snippetBox .offer-box .content {
        min-height: 70px;
    }
}

/* ========================================
   OFFER REDESIGN TEMPLATE - Single Offer Pages
   ======================================== */

.offer-redesign {
    font-family: 'Poppins', sans-serif;
}

.offer-redesign h1,
.offer-redesign h2 {
    font-family: 'Playfair Display', 'Didot', 'Bodoni MT', serif; /* zaktualizowane z Archivo Black */
    font-size: 40px;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--slate); /* dodano spójność z rebrandingiem */
}

.offer-redesign h3 {
    font-family: 'Lora', serif; /* zaktualizowane z Poppins */
    font-weight: 500;
    font-style: italic; /* dodano dla Lora */
    font-size: 24px;
}

/* Highlights Cards */
.highlights {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin: 40px 0;
}

.highlight-card {
    text-align: center;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.highlight-card:hover {
    transform: translateY(-5px);
}

.highlight-card svg {
    width: 60px;
    height: 60px;
    fill: var(--navy); /* zaktualizowane z --main-color */
    margin: 0 auto 15px;
    display: block;
}

.highlight-card h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 10px;
    color: var(--slate); /* zaktualizowane z --dark-font */
}

.highlight-card p {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
}

/* Package Section */
.package-section {
    margin: 60px 0;
    padding: 40px;
    background: #fff;
    border-radius: 12px;
}

.package-section > h2 {
    text-align: center;
    margin-bottom: 40px;
    font-size: 36px;
}

/* Auto-responsive grid dla detail-blocks */
.package-section .detail-blocks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 40px;
}

.detail-block {
    margin-bottom: 0;
}

.detail-block .strong {
    font-family: 'Playfair Display', Didot, 'Bodoni MT', serif;
    font-weight: 700;
    font-size: 20px;
    margin-bottom: 15px;
    color: var(--navy); /* zaktualizowane z --main-color */
}

.detail-block ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-block ul li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    line-height: 1.6;
}

.detail-block ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    height: 8px;
    width: 8px;
    background-color: var(--navy); /* zaktualizowane z --main-color */
    border-radius: 50%;
}

/* Info Box */
.info-box {
    background: var(--lora); /* zaktualizowane z #f7f7f7 */
    padding: 40px;
    margin: 40px 0;
    border-radius: 12px;
    text-align: center;
}

.info-box h3 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--slate); /* zaktualizowane z --dark-font */
}

.info-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 20px;
}

.info-item {
    text-align: left;
}

.info-item .strong {
    font-family: 'Playfair Display', Didot, 'Bodoni MT', serif;
    font-weight: 700;
    font-size: 18px;
    color: var(--navy); /* zaktualizowane z --main-color */
    margin-bottom: 10px;
    display: block;
}

.info-item p:last-child {
    font-size: 15px;
    line-height: 1.6;
    color: #666;
}

/* Responsive - Offer Redesign */
@media screen and (max-width: 1024px) {
    .highlights {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .info-items {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .package-section {
        padding: 20px;
    }

    .package-section .detail-blocks-grid {
        grid-template-columns: 1fr;
    }

    .info-box {
        padding: 20px;
    }

    .offer-redesign h1,
    .offer-redesign h2 {
        font-size: 28px;
    }

    .package-section > h2 {
        font-size: 24px;
    }
}

/* ========================================
   GUEST LANDING PAGE
   Dynamiczne strony dla gości (rezerwacje)
   ======================================== */

.guest-landing-wrapper {
    min-height: calc(100vh - 200px);
    padding: 40px 5vw;
    background-color: var(--lora);
}

.guest-landing-page {
    max-width: 1200px;
    margin: 0 auto;
}

.guest-landing-error {
    text-align: center;
    padding: 80px 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.guest-landing-error h1 {
    font-family: 'Playfair Display', Didot, 'Bodoni MT', serif;
    font-size: 28px;
    color: var(--slate);
    margin-bottom: 16px;
}

.guest-landing-error p {
    color: #666;
    margin-bottom: 32px;
}

.guest-landing-btn {
    display: inline-block;
    padding: 14px 32px;
    background: var(--navy);
    color: #fff !important;
    border-radius: 8px;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.guest-landing-btn:hover {
    background: var(--slate);
    transform: translateY(-2px);
}

.guest-landing-content {
    background: #fff;
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

@media (max-width: 768px) {
    .guest-landing-wrapper {
        padding: 20px 4vw;
    }

    .guest-landing-content {
        padding: 24px 20px;
    }

    .guest-landing-error {
        padding: 40px 16px;
    }

    .guest-landing-error h1 {
        font-size: 22px;
    }
}

/* ============================================
   Atrakcje hub — money CTAs inline w bloglist +
   bottom CTA na dole. Aktywne tylko na page 1613
   przez klase .atrakcje-bloglist (wstawiana w PHP).
   Money CTAs wstrzykiwane co 12 blog kart,
   korzystaja z istniejacego grid bloglist (.snippetBox.equal).
============================================ */

/* Full-width wrapper — rozciaga shortcode (booking/newsletter) na cala szerokosc grid */
.atrakcje-bloglist .atrakcje-fullwidth-row {
    grid-column: 1 / -1;
    width: 100%;
    margin: 20px 0;
}

.atrakcje-bloglist .atrakcje-booking-row {
    background: linear-gradient(135deg, #f8f5ef 0%, #efe8d7 100%);
    border-left: 4px solid #b89968;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(61, 53, 40, 0.08);
}

.atrakcje-bloglist .atrakcje-newsletter-row {
    background: linear-gradient(135deg, #2a241a 0%, #3d3528 60%, #5a4a33 100%);
    border-left: 4px solid #b89968;
    border-radius: 6px;
    overflow: hidden;
}

.atrakcje-bloglist .atrakcje-newsletter-row .newsletter-section {
    background: transparent;
}

.atrakcje-bloglist .atrakcje-newsletter-row .newsletter-title {
    color: #fff;
    font-style: normal;
}

.atrakcje-bloglist .atrakcje-newsletter-row .newsletter-subtitle {
    color: #d8ccb3;
}

.atrakcje-bloglist .atrakcje-newsletter-row .newsletter-btn {
    background: #b89968;
}

.atrakcje-bloglist .atrakcje-newsletter-row .newsletter-btn:hover {
    background: #9d7f4f;
}

.atrakcje-bloglist .atrakcje-newsletter-row .newsletter-disclaimer {
    color: #d4b88a;
}

/* ============================================
   Shortcode [newsletter_signup] — global styling
   (wczesniej tylko inline w page-be-big.php).
   Uzywa sie wszedzie gdzie wstawisz shortcode.
============================================ */
.newsletter-shortcode.newsletter-section {
    background: #f5f7fa;
    padding: 50px 20px;
    text-align: center;
}
.newsletter-shortcode .newsletter-container {
    max-width: 600px;
    margin: 0 auto;
}
.newsletter-shortcode .newsletter-title {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 700;
    color: #002C91;
    margin: 0 0 8px 0;
    font-style: italic;
}
.newsletter-shortcode .newsletter-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    color: #333;
    margin: 0 0 25px 0;
}
.newsletter-shortcode .newsletter-form {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}
.newsletter-shortcode .newsletter-input-group {
    display: flex;
    background: #fff;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    border: 2px solid #e0e0e0;
}
.newsletter-shortcode .newsletter-input-group input {
    flex: 1;
    border: none;
    padding: 15px 25px;
    font-size: 14px;
    font-family: 'Poppins', sans-serif;
    outline: none;
    min-width: 0;
}
.newsletter-shortcode .newsletter-input-group input::placeholder {
    color: #999;
}
.newsletter-shortcode .newsletter-btn {
    background: #002C91;
    color: #fff;
    border: none;
    padding: 15px 30px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
    transition: background 0.3s;
    white-space: nowrap;
}
.newsletter-shortcode .newsletter-btn:hover {
    background: #213B55;
}
.newsletter-shortcode .newsletter-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}
.newsletter-shortcode .newsletter-disclaimer {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: #888;
    margin-top: 15px;
}
.newsletter-shortcode .newsletter-message {
    margin-top: 15px;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
}
.newsletter-shortcode .newsletter-message.success {
    background: #d4edda;
    color: #155724;
}
.newsletter-shortcode .newsletter-message.error {
    background: #f8d7da;
    color: #721c24;
}
@media (max-width: 500px) {
    .newsletter-shortcode .newsletter-title {
        font-size: 22px;
    }
    .newsletter-shortcode .newsletter-input-group {
        flex-direction: column;
        border-radius: 12px;
    }
    .newsletter-shortcode .newsletter-input-group input {
        border-bottom: 1px solid #e0e0e0;
    }
    .newsletter-shortcode .newsletter-btn {
        border-radius: 0 0 10px 10px;
    }
}

/* Money card — wpasowuje sie w grid bloglist, wyrozniony stylem */
.atrakcje-bloglist .atrakcje-money-card {
    display: block;
    text-decoration: none !important;
}

.atrakcje-bloglist .atrakcje-money-card .box {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f8f5ef 0%, #efe8d7 100%);
    border: 1px solid rgba(184, 153, 104, 0.3);
    border-left: 4px solid #b89968;
    box-shadow: 0 4px 20px rgba(61, 53, 40, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.atrakcje-bloglist .atrakcje-money-card:hover .box {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(184, 153, 104, 0.28);
}

.atrakcje-bloglist .atrakcje-money-card .box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.atrakcje-bloglist .atrakcje-money-card .box .content {
    padding: 22px 24px 26px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.atrakcje-bloglist .atrakcje-money-card .money-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #b89968;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin: 0 0 10px;
}

.atrakcje-bloglist .atrakcje-money-card .money-title {
    font-family: 'Playfair Display', 'Didot', 'Bodoni MT', serif !important;
    font-size: 22px !important;
    line-height: 1.18 !important;
    font-weight: 700 !important;
    color: #2a241a !important;
    letter-spacing: -0.3px !important;
    margin: 0 0 12px !important;
    text-transform: none !important;
}

.atrakcje-bloglist .atrakcje-money-card p {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: #5c5142 !important;
    margin: 0 0 18px !important;
    flex: 1 1 auto;
}

.atrakcje-bloglist .atrakcje-money-card .money-btn {
    display: inline-block;
    padding: 12px 22px;
    background: #b89968;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px;
    align-self: flex-start;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(184, 153, 104, 0.25);
}

.atrakcje-bloglist .atrakcje-money-card:hover .money-btn {
    background: #9d7f4f;
    box-shadow: 0 6px 16px rgba(184, 153, 104, 0.4);
}

/* Bottom CTA — hero treatment pod bloglist, centered */
.atrakcje-bottom-cta {
    margin: 56px auto 48px;
    max-width: 1100px;
    padding: 0 20px;
}

.atrakcje-bottom-inner {
    position: relative;
    padding: 56px 48px 60px;
    background: linear-gradient(135deg, #2a241a 0%, #3d3528 60%, #5a4a33 100%);
    border-left: 4px solid #b89968;
    border-radius: 6px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(42, 36, 26, 0.25);
}

.atrakcje-bottom-inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #b89968, transparent);
}

.atrakcje-bottom-inner::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(184, 153, 104, 0.18) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.atrakcje-bottom-inner .bottom-subtitle {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #d4b88a;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
    margin: 0 0 18px;
}

.atrakcje-bottom-inner h2 {
    font-family: 'Playfair Display', 'Didot', 'Bodoni MT', serif !important;
    font-size: 36px !important;
    line-height: 1.15 !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 auto 16px !important;
    max-width: 680px;
    text-transform: none !important;
}

.atrakcje-bottom-inner p {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.65 !important;
    color: #d8ccb3 !important;
    margin: 0 auto 32px !important;
    max-width: 600px;
}

.atrakcje-bottom-inner .bottom-btn {
    display: inline-block;
    padding: 16px 44px;
    background: #b89968;
    color: #fff !important;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-radius: 4px;
    text-decoration: none !important;
    box-shadow: 0 4px 16px rgba(184, 153, 104, 0.45);
    transition: all 0.25s ease;
}

.atrakcje-bottom-inner .bottom-btn:hover {
    background: #c9a876;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(184, 153, 104, 0.6);
}

@media (max-width: 640px) {
    .atrakcje-bloglist .atrakcje-money-card .box img {
        height: 170px;
    }
    .atrakcje-bloglist .atrakcje-money-card .money-title {
        font-size: 20px !important;
    }
    .atrakcje-bottom-cta {
        margin: 36px auto 32px;
        padding: 0 12px;
    }
    .atrakcje-bottom-inner {
        padding: 40px 24px 44px;
    }
    .atrakcje-bottom-inner h2 {
        font-size: 26px !important;
    }
    .atrakcje-bottom-inner p {
        font-size: 14px !important;
    }
    .atrakcje-bottom-inner .bottom-btn {
        padding: 14px 32px;
    }
}

/* ============================================
   DEAD CSS BELOW — stary design (page-id-1613 .textCenter)
   zastapiony przez .atrakcje-bloglist .atrakcje-money-card.
   Zostaje jako bezpiecznik w razie problemów z sync ACF —
   money CTAs przez ACF flexible content pokazuja sie via
   tego starego stylu.
============================================ */

body.page-id-1613 .textCenter {
    display: inline-block;
    vertical-align: top;
    position: relative;
    margin: 0 10px 20px 10px;
    padding: 0;
    overflow: hidden;
    width: calc(33.333% - 24px);
    box-sizing: border-box;
}

/* Bottom CTA (po bloglist) — full width */
body.page-id-1613 .textCenter:last-of-type {
    display: block;
    width: calc(100% - 40px);
    max-width: 1100px;
    margin: 64px auto 48px;
}

/* Wrapper dla 3 kart — wyrowanie przez white-space trick */
body.page-id-1613 .textCenter:nth-of-type(-n+3) {
    margin-top: 0;
}

body.page-id-1613 .textCenter .background {
    display: none;
}

body.page-id-1613 .textCenter .outer {
    max-width: none;
    margin: 0;
    padding: 0;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(61, 53, 40, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    border: 1px solid rgba(184, 153, 104, 0.15);
    height: 100%;
    display: flex;
    flex-direction: column;
}

body.page-id-1613 .textCenter:hover .outer {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(184, 153, 104, 0.22);
}

/* Hero image per-card via background-image (pseudo ::before) */
body.page-id-1613 .textCenter .outer::before {
    content: "";
    display: block;
    width: 100%;
    height: 200px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
    position: relative;
    opacity: 1;
}

body.page-id-1613 .textCenter:nth-of-type(3) .outer::before {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.15)),
        url(https://wczasowa8.pl/wp-content/uploads/2023/06/sarbinowo-pokoje-z-aneksem.jpg);
}

body.page-id-1613 .textCenter:nth-of-type(4) .outer::before {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.15)),
        url(https://wczasowa8.pl/wp-content/uploads/2023/05/20240609-DSC00020-HDR-scaled.jpg);
}

body.page-id-1613 .textCenter:nth-of-type(5) .outer::before {
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.05), rgba(0,0,0,0.15)),
        url(https://wczasowa8.pl/wp-content/uploads/2023/05/Sarbinowo-dron-5-2.jpg);
}

/* Content area */
body.page-id-1613 .textCenter .outer > *:not(.columns) {
    padding: 0 28px;
}

body.page-id-1613 .textCenter .outer .columns {
    padding: 28px 28px 30px;
    display: block;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

body.page-id-1613 .textCenter .outer .columns .col:nth-child(2) {
    display: none;
}

body.page-id-1613 .textCenter .outer .columns .col:first-child {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

body.page-id-1613 .textCenter .outer h1,
body.page-id-1613 .textCenter .outer h2 {
    font-family: 'Playfair Display', 'Didot', 'Bodoni MT', serif;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 700;
    color: #2a241a;
    letter-spacing: -0.3px;
    margin: 22px 28px 6px;
    text-transform: none;
    padding: 0;
}

body.page-id-1613 .textCenter .outer h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    color: #b89968;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 14px;
    padding: 0;
}

body.page-id-1613 .textCenter .outer p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #5c5142;
    margin: 0 0 24px;
    padding: 0;
    flex: 1 1 auto;
}

body.page-id-1613 .textCenter .btn {
    margin: 0;
    padding: 0;
}

body.page-id-1613 .textCenter .btn a {
    text-decoration: none;
    display: block;
}

/* Fix: usun Divi `:before` slide effect ktory generuje niebieska ramke */
body.page-id-1613 .textCenter .btn button::before,
body.page-id-1613 .textCenter .btn button::after {
    display: none !important;
    content: none !important;
}

body.page-id-1613 .textCenter .btn button {
    padding: 13px 28px;
    background: #b89968;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 8px rgba(184, 153, 104, 0.25);
    width: 100%;
    position: relative;
}

body.page-id-1613 .textCenter .btn button:hover {
    background: #9d7f4f;
    box-shadow: 0 6px 16px rgba(184, 153, 104, 0.4);
}

/* ============ BOTTOM CTA (last-of-type, po bloglist) ============ */
body.page-id-1613 .textCenter:last-of-type .outer {
    background: linear-gradient(135deg, #2a241a 0%, #3d3528 60%, #5a4a33 100%);
    border: none;
    border-left: 4px solid #b89968;
    border-radius: 6px;
    padding: 0;
    text-align: center;
    position: relative;
    overflow: hidden;
    display: block;
}

body.page-id-1613 .textCenter:last-of-type .outer::before {
    content: "";
    display: block;
    width: 100%;
    height: 220px;
    background: linear-gradient(to bottom, rgba(42,36,26,0.35), rgba(42,36,26,0.85)),
        url(https://wczasowa8.pl/wp-content/uploads/2023/11/basen-154.jpg) center/cover;
    position: relative;
}

body.page-id-1613 .textCenter:last-of-type .outer > *:not(.columns) {
    padding: 0;
}

body.page-id-1613 .textCenter:last-of-type .outer .columns {
    padding: 44px 48px 52px;
    display: block;
}

body.page-id-1613 .textCenter:last-of-type .outer .columns .col:first-child {
    display: block;
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
}

body.page-id-1613 .textCenter:last-of-type .outer h2 {
    color: #fff;
    font-size: 34px;
    margin: 0 0 10px;
    line-height: 1.15;
}

body.page-id-1613 .textCenter:last-of-type .outer h3 {
    color: #d4b88a;
    font-size: 11px;
    margin: 0 0 24px;
}

body.page-id-1613 .textCenter:last-of-type .outer p {
    color: #d8ccb3;
    font-size: 15px;
    line-height: 1.65;
    margin: 0 auto 32px;
    max-width: 600px;
}

body.page-id-1613 .textCenter:last-of-type .btn {
    text-align: center;
}

body.page-id-1613 .textCenter:last-of-type .btn a {
    display: inline-block;
}

body.page-id-1613 .textCenter:last-of-type .btn button {
    padding: 16px 40px;
    font-size: 13px;
    background: #b89968;
    box-shadow: 0 4px 16px rgba(184, 153, 104, 0.45);
    width: auto;
    min-width: 280px;
}

body.page-id-1613 .textCenter:last-of-type .btn button:hover {
    background: #c9a876;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(184, 153, 104, 0.6);
}

/* Tablet */
@media (max-width: 1024px) {
    body.page-id-1613 .textCenter {
        width: calc(50% - 24px);
    }
}

/* Mobile */
@media (max-width: 640px) {
    body.page-id-1613 .textCenter {
        width: calc(100% - 24px);
        margin: 0 12px 16px;
    }
    body.page-id-1613 .textCenter .outer::before {
        height: 170px;
    }
    body.page-id-1613 .textCenter .outer h2 {
        font-size: 20px;
    }
    body.page-id-1613 .textCenter:last-of-type {
        margin: 40px 12px;
        width: calc(100% - 24px);
    }
    body.page-id-1613 .textCenter:last-of-type .outer::before {
        height: 160px;
    }
    body.page-id-1613 .textCenter:last-of-type .outer .columns {
        padding: 32px 24px 36px;
    }
    body.page-id-1613 .textCenter:last-of-type .outer h2 {
        font-size: 26px;
    }
}

/* ----------------------------------------
   Blog trust bar (page-blog.php, pod hero)
   Social proof + USP + CTA button — horizontalne,
   nie box. Łapie high-intent przed scrollem.
---------------------------------------- */
.blog-hero-trust {
    max-width: 1100px;
    margin: 24px auto 0;
    background: #fff;
    border: 1px solid #e8dfc8;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    overflow: hidden;
    display: flex;
    align-items: stretch;
    color: #3d3528;
}

.blog-hero-trust .trust-img {
    flex: 0 0 320px;
    position: relative;
    background: #f5f0e6;
}

.blog-hero-trust .trust-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    min-height: 180px;
}

.blog-hero-trust .trust-content {
    flex: 1;
    padding: 20px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}

.blog-hero-trust .trust-brand {
    font-size: 20px;
    font-weight: 700;
    color: #3d3528;
    line-height: 1.2;
    letter-spacing: 0.3px;
}

.blog-hero-trust .trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    font-size: 14px;
    line-height: 1.4;
}

.blog-hero-trust .trust-badges span {
    white-space: nowrap;
}

.blog-hero-trust .trust-rating {
    color: #b89968;
    font-weight: 700;
    font-size: 15px;
}

.blog-hero-trust .trust-rating small {
    color: #7a7467;
    font-weight: 400;
    font-size: 13px;
}

.blog-hero-trust .trust-sep {
    color: #c4b89b;
}

.blog-hero-trust .trust-cta {
    align-self: flex-start;
    margin-top: 4px;
    padding: 10px 22px;
    background: #b89968;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.blog-hero-trust .trust-cta:hover {
    background: #9d7f4f;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
}

@media (max-width: 720px) {
    .blog-hero-trust {
        flex-direction: column;
    }
    .blog-hero-trust .trust-img {
        flex: 0 0 auto;
        aspect-ratio: 16 / 9;
    }
    .blog-hero-trust .trust-img img {
        min-height: 0;
    }
    .blog-hero-trust .trust-content {
        padding: 18px 20px;
        text-align: center;
        align-items: center;
    }
    .blog-hero-trust .trust-badges {
        justify-content: center;
        gap: 6px 10px;
    }
    .blog-hero-trust .trust-sep {
        display: none;
    }
    .blog-hero-trust .trust-cta {
        align-self: stretch;
        text-align: center;
    }
}

/* ----------------------------------------
   Blog inline CTA (wstrzykiwany co 4 paragrafy)
   Subtelny pasek w treści — NIE box, żeby nie
   kolidować wizualnie z trust barem i bottom box.
---------------------------------------- */
.blog-cta-inline {
    display: block;
    margin: 32px 0;
    padding: 14px 22px;
    background: #f5f0e6;
    border-left: 3px solid #b89968;
    color: #3d3528;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-cta-inline:hover {
    background: #efe8d7;
    padding-left: 26px;
    text-decoration: none;
    color: #3d3528;
}


.blog-cta-box {
    margin: 48px auto 24px;
    padding: 32px 28px;
    max-width: 720px;
    background: linear-gradient(135deg, #f8f5ef 0%, #efe8d7 100%);
    border-left: 4px solid #b89968;
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.blog-cta-intro {
    margin: 0 0 20px;
    font-size: 18px;
    line-height: 1.5;
    color: #3d3528;
    font-weight: 400;
}

.blog-cta-btn {
    display: inline-block;
    padding: 14px 36px;
    background: #b89968;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
    transition: all 0.25s ease;
}

.blog-cta-btn:hover {
    background: #9d7f4f;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(184, 153, 104, 0.35);
    color: #fff;
}

@media (max-width: 720px) {
    .blog-cta-box {
        margin: 32px 16px 16px;
        padding: 24px 20px;
    }

    .blog-cta-intro {
        font-size: 16px;
    }

    .blog-cta-btn {
        padding: 12px 28px;
        font-size: 15px;
    }
}

/* ============================================
   [booking_search] shortcode — scoped fix popupu Lightpick
   (NIE ruszamy booking-engine.css zeby nie zepsuc /rezerwacja/).

   Root cause: shortcode ladowany przez wp_enqueue_style trafia do <head>
   PRZED CDN lightpick.css (loaded dynamicznie przez booking-engine.js).
   Wiec nasz `.lightpick--inlined { display: none }` przegrywa z CDN.
   Na /rezerwacja/ booking-engine.css loaduje sie POZNIEJ (<link> w hero_header
   PHP) i wygrywa.

   Fix: wyzsza specyficznosc (2 klasy) + !important — wygrywa zawsze.
============================================ */

.booking-search-shortcode .lightpick--inlined:not(.active) {
    display: none !important;
}

/* Popup otwiera sie W DOL pod inputami — w shortcode nie ma hero_header banera,
   wiec oryginalne top: calc(100% - 350px) rozlewalo sie na karty wyzej. */
.booking-search-shortcode .lightpick.lightpick--inlined {
    top: 100% !important;
    transform: translateX(-50%) scale(1) !important;
    margin-top: 8px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 44, 145, 0.18);
    padding: 16px;
}

/* KRYTYCZNE: reset globalnej reguly .calendar { position: absolute; bottom: ... }
   ze style.css:459 — byla zaprojektowana dla hero banera (pozycjonuje widget na
   dolu banera). W shortcode na /atrakcje-sarbinowo/ wyrzucala kalendarz na samą
   gore strony (y=458) zamiast zostawic w kontekscie grid po 3. karcie.

   Zachowujemy display: flex + justify-content: center z booking-engine.css —
   wewnetrzny .be-search-wrapper (max-width: 800px) jest centrowany w wierszu. */
.booking-search-shortcode .calendar {
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.booking-search-shortcode .be-search-container {
    min-height: 0 !important;
    padding: 24px 20px !important;
    background: transparent !important;
}

.booking-search-shortcode .be-search-wrapper {
    margin: 0 auto !important;
}

/* CLS fix /rezerwacja/ booking widget — reserve container space (BDOS-599) */
/* GuestSage iframe loaduje się asynchronicznie + form inputs grow during render */
/* → container shifts od ~270px na 526px mobile / 328px desktop = CLS 0.285 */
/* booking-engine.css ma min-height: 40vh (= 266.8px mobile, za małe) i ładuje */
/* się PO style.css w cascade → !important żeby nadpisać. Shortcode kontekst */
/* (.booking-search-shortcode .be-search-container — specificity 0,0,2,0 + */
/* !important) wygrywa nad naszą 0,0,1,0 + !important → atrakcje hub OK. */
.be-search-container {
    min-height: 540px !important;
}

@media (min-width: 768px) {
    .be-search-container {
        min-height: 360px !important;
    }
}

/* Reserve Elfsight Instagram widget space on /rezerwacja/ — BDOS-599 */
/* Klient CHCE widget visible (social proof na booking page), tylko trzeba */
/* zarezerwować mu stałe miejsce żeby nie powodował CLS shift. */
/* Diagnoza: Elfsight initial render = 32px (loader), final = 446px mobile / */
/* ~360px desktop = 414px shift = CLS 0.41 avg. */
/* Elfsight platform.js wstrzykuje inline min-height: 100px → !important */
/* żeby nasz reservation zadziałał. */
.elfsight-app-a51e913c-e750-4272-8489-6a1b1ab99c78 {
    min-height: 500px !important;
    display: block;
}

@media (min-width: 768px) {
    .elfsight-app-a51e913c-e750-4272-8489-6a1b1ab99c78 {
        min-height: 400px !important;
    }
}

/* BDOS-708 — Elfsight Instagram popup overlay fix. */
/* Tap zdjęcia → popup open powodował CrUX field CLS 1.000 (popup-item Y shift 426→0). */
/* Tylko popup PARENT dostaje fixed positioning — wrapper/inner zachowują Elfsight */
/* defaults (absolute children w fixed parent), inaczej scroll i layout się psują. */
.eapps-instagram-feed-popup {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 99999 !important;
}
.eapps-instagram-feed-popup-item {
    contain: layout style paint;
}

/* Extended Content HTML — sekcja rozbudowanego SEO contentu (BDOS-9) */
.apt-extended {
    display: flex;
    align-items: center;
    flex-direction: column;
    background: #fff;
    padding: 40px 0;
}

.apt-extended .outer {
    max-width: 1100px;
    width: 100%;
    margin: 0 5vw;
    padding: 20px 40px;
    color: #1a1a1a;
    line-height: 1.7;
}

.apt-extended h2 {
    font-size: 32px;
    margin-top: 50px;
    margin-bottom: 20px;
    color: #1a1a1a;
    line-height: 1.3;
}

.apt-extended h2:first-child {
    margin-top: 0;
}

.apt-extended h3 {
    font-size: 22px;
    margin-top: 30px;
    margin-bottom: 12px;
    color: #2a2a2a;
}

.apt-extended h3 a {
    color: #2a2a2a;
    text-decoration: none;
}

.apt-extended h3 a:hover {
    text-decoration: underline;
}

.apt-extended p {
    margin: 12px 0;
}

.apt-extended a {
    color: #0066cc;
    text-decoration: underline;
}

.apt-extended a:hover {
    color: #003d7a;
}

.apt-extended table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 16px;
}

.apt-extended thead {
    background: #f5f5f5;
}

.apt-extended th,
.apt-extended td {
    padding: 12px 16px;
    border: 1px solid #e5e5e5;
    text-align: left;
    vertical-align: top;
}

.apt-extended th {
    font-weight: 600;
    color: #1a1a1a;
}

.apt-extended ul,
.apt-extended ol {
    margin: 12px 0 12px 24px;
    padding-left: 16px;
}

.apt-extended li {
    margin: 6px 0;
}

.apt-extended .btn {
    margin: 30px 0;
    display: flex;
    justify-content: center;
}

@media (max-width: 768px) {
    .apt-extended .outer {
        padding: 15px 20px;
        margin: 0 15px;
    }

    .apt-extended h2 {
        font-size: 24px;
        margin-top: 30px;
    }

    .apt-extended h3 {
        font-size: 18px;
    }

    .apt-extended table {
        font-size: 14px;
    }

    .apt-extended th,
    .apt-extended td {
        padding: 8px 10px;
    }
}


/* ============================================================
   OFERTY — redesign sezonowy (BDOS-869, 14.06.2026)
   Design system: Seaside Editorial (cream / navy / Playfair / Lora / Poppins)
   ============================================================ */
/* override starego layoutu .snippetBox (flex) / .outer (grid 3-col) — sekcje maja isc pionowo */
.snippetBox.offers-redesign { display: block; }
.snippetBox.offers-redesign .outer { display: block; max-width: 1400px; margin: 0 auto; padding: 0 5vw; }
.offers-section-title {
    font-family: 'Playfair Display', Didot, 'Bodoni MT', serif;
    text-transform: uppercase; letter-spacing: 0.05em; color: #213B55;
    font-size: 40px; font-weight: 600; margin: 0 0 32px;
}
.offers-featured { margin-top: 24px; }
.offers-season { margin-top: 64px; }

.offers-featured-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.feat-card {
    display: flex; flex-direction: column; text-decoration: none; background: #ffffff;
    border: 1px solid #D1D1D1; border-radius: 12px; overflow: hidden;
    box-shadow: 0 14px 34px -22px rgba(61,53,40,0.35); transition: transform .2s ease;
}
.feat-card:hover { transform: translateY(-4px); }
.feat-image { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #e2d8d1; }
.feat-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat-price {
    position: absolute; left: 0; bottom: 0; background: #002c91; color: #fff;
    font-family: 'Poppins', sans-serif; font-size: 13px; letter-spacing: 0.04em;
    padding: 7px 14px; text-transform: uppercase;
}
.feat-body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.feat-body h3 {
    font-family: 'Lora', Georgia, serif; font-style: italic; font-weight: 600; color: #213B55;
    font-size: 23px; line-height: 1.3; margin: 0 0 10px;
}
.feat-body p { font-family: 'Poppins', sans-serif; color: #444652; font-size: 14px; line-height: 1.7; margin: 0 0 20px; }
.feat-cta {
    margin-top: auto; align-self: flex-start; background: #002c91; color: #fff;
    font-family: 'Poppins', sans-serif; font-size: 13px; letter-spacing: 2px; text-transform: uppercase;
    padding: 12px 24px;
}
.feat-card:hover .feat-cta { background: #001a60; }

.offers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

@media (max-width: 1024px) {
    .offers-section-title { font-size: 7vw; }
    .offers-featured-grid, .offers-grid { grid-template-columns: 1fr; }
    .offers-season { margin-top: 48px; }
}
/* === koniec OFERTY redesign === */