/* --- HERO --- */
.hero {
    position: relative;
    color: var(--color-white);
    min-height: 72vh;
    display: grid;
    padding: 4.8rem 1.6rem;
    text-align: center;
    background-size: cover;
    background-position: center;
    align-items: end;
    justify-content: center;
    background-position: 0px 80%;
    background-repeat: no-repeat;
}

/* Hero Slider */
.hero-slider {
    position: relative;
    overflow: hidden;
    min-height: 72vh;
}

/* Klikalne obszary po bokach (15% szerokości każdy) */
.hero-slider-click-area {
    position: absolute;
    top: 0;
    height: 100%;
    width: 15%;
    z-index: 10;
    cursor: pointer;
    user-select: none;
}

.hero-slider-click-left {
    left: 0;
}

.hero-slider-click-right {
    right: 0;
}

.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 72vh;
    display: grid;
    padding: 4.8rem 1.6rem;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-position: 0px 80%;
    background-repeat: no-repeat;
    align-items: end;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
    z-index: 1;
    background-position: center;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

.hero-slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(to top, rgba(0,0,0,0.7), rgba(0,0,0,0) 60%);
    z-index: 0;
    pointer-events: none;
}

.hero .inner,
.hero-slide .inner { 
    max-width: 100rem; 
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero h2,
.hero-slide h2 {
    font-size: 5.4rem;
    margin: 0 0 1.6rem;
    font-family: var(--font-family-gracia);
}

.hero .cta, .hero-slide .cta {
    display: inline-block;
    margin-top: 1rem;
    padding: .4rem 1.2rem;
    border-radius: 0;
    background: var(--color-black, #000);
    color: var(--color-white, #fff);
    text-decoration: none;
    font-size: 1.2rem;
    text-transform: uppercase;
    line-height: 1.3;
    border: none;
    cursor: pointer;
    transition: opacity 0.3s ease;
    font-weight: 500;
}

.hero .cta:hover,
.hero-slide .cta:hover {
    opacity: 0.8;
}

/* --- INTRO --- */
.intro {
    max-width: 90rem;
    margin: 2.4rem auto 0;
    color: var(--color-black);
    text-align: center;
    line-height: 1.5;
    font-size: 1.3rem;
    word-spacing: 0.1rem;
    margin-top: 5rem;
}
.ornament {
    display: block;
    margin: 6.4rem auto;
    width: 20rem;
    height: auto;
}

/* --- GENERIC --- */
.section {
    padding: 5.6rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section h2 {
    text-align: center;
    margin: 0 0 1rem;
    font-family: var(--font-family-gracia);
    font-size: 7.2rem;
}
.section p.lead {
    text-align: center;
    margin: 0 0 2.4rem;
    font-size: 1.3rem;
    font-weight: 300;
    margin-bottom: 10rem;
    width: 75%;
}

/* --- KARUZELA PRODUKTÓW --- */
.carousel { 
    position: relative; 
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
    touch-action: pan-x; /* Pozwala na poziome przesuwanie palcem */
}
.carousel-track {
    display: flex;
    gap: 1.6rem;
    transition: transform .4s ease;
    cursor: grab;
    will-change: transform;
    padding-bottom: 7rem;
    box-sizing: border-box;
    touch-action: pan-x; /* Pozwala na poziome przesuwanie palcem */
    /* gdy track jest UL (WooCommerce), wyzeruj domyślne style listy */
    list-style: none;
    margin: 0;
    padding-left: 0;
}

.blog-hero .carousel-track {
    padding-bottom: 2rem;
}

.carousel-track.grabbing { 
    cursor: grabbing; 
    transition: none;
}

/* Na mobile - zablokuj pointer-events na linkach podczas przeciągania */
@media (max-width: 768px) {
    .carousel-track.grabbing .product-card a,
    .carousel-track.grabbing .product-card img {
        pointer-events: none;
        touch-action: none;
    }
    
    .carousel-track .product-card a {
        touch-action: pan-x;
    }
}

.product-card {
    box-sizing: border-box;
    flex: 0 0 calc((100% - 3.2rem) / 3);
    padding: 1.2rem;
    text-align: center;
    color: var(--color-black);
}
.carousel-track .product-card img {
    width: 100%;
    height: 30rem;
    user-select: none;
    object-fit: contain;
    object-position: center;
}
.product-card h3, .woocommerce ul.products li.product .woocommerce-loop-product__title {
    font-size: 1.6rem;
    margin: 1rem 0 0.6rem;
    margin-top: 0rem;
}
.product-card h3 a, .product-card h2.woocommerce-loop-product__title {
    color: var(--color-black);
    text-decoration: none;
}
.product-card .desc {
    font-size: 1.3rem;
    color: var(--color-grey);
    font-weight: 300;
    line-height: 1.3;
}
.product-card .price {
    font-weight: 400;
    margin: 1.6rem 0;
    font-size: 1.6rem;
}
.product-card form .button, .product-card a.button {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    background: var(--color-black);
    color: var(--color-white);
    text-decoration: none;
    font-size: 1.3rem;
    text-transform: uppercase;
    font-weight: 400;
}

.carousel-progress {
    position: absolute;
    bottom: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 0.4rem;
    background: #ddd;
    overflow: hidden;
    z-index: 10;
}
.carousel-progress .progress-bar {
    height:100%;
    width:0%;
    background:#111;
    transition: width .4s ease;
}

/* --- KATEGORIE --- */
.cats-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}
.cat-card {
    position: relative;
    overflow: hidden;
    filter: grayscale(1);
}
.cats-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 10rem;
    align-items: center;
}
.cat-card img {
    width: 100%;
    display: block;
    object-fit: cover;
    object-position: bottom;
}
.cat-card .meta {
    padding: 1.2rem;
    text-align: center;
    font-family: var(--font-family-gracia);
    font-size: 6.4rem;
    margin-top: 1.6rem;
    margin-bottom: 1.6rem;
}
.cat-card a {
    text-decoration: none;
}

.opis-p-kat {
    display: flex;
    justify-content: center;
    font-size: 1.6rem;
    margin-top: 20rem;
    margin-bottom: 20rem;
}

.opis-p-kat p {
    width: 50%;
    text-align: center;
    line-height: 1.3;
}

/* --- REVERIE --- */
.reverie {
    position: relative;
    overflow: hidden;
    color: var(--color-white);
    text-align: center;
    padding: 5.6rem 1.6rem;
    min-height: 80vh;
    display: flex;
    align-items: flex-end;
}

.reverie h2 {
    font-size: 7.2rem;
    font-family: var(--font-family-gracia);
}
.reverie p {
    font-size: 1.3rem;
    line-height: 1.3;
    margin-top: 1rem;
    margin-bottom: 3rem;
}
.reverie .btn {
    background: var(--color-gold);
    font-size: 1.3rem;
    text-transform: uppercase;
    padding: 0.4rem 2.4rem;
    border-radius: 0;
    font-weight: 600;
}

.reverie-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.reverie .inner { position:relative; z-index:2; max-width:90rem; margin:0 auto; }
.reverie::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.35); z-index:1; }

/* --- PASEK INTERAKTYWNY 3x --- */
section.section.pod-reviere {
    padding: 0;
}
.interactive-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.8rem;
    align-items: start;
}
.interactive-3 .cell {
    position: relative;
    background: #f7f7f7;
    overflow: hidden;
}
.interactive-3 .cell img, .interactive-3 .cell video {
    width: 100%;
    display: block;
    height: 75vh;
    object-fit: cover;
}
.interactive-3 .center-overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.interactive-3 .center-overlay .logo {
    width: 40%;
    height: auto;
    position: absolute;
    bottom: 25%;
}
.interactive-3 .center-caption {
    padding: 1rem;
    text-align: center;
    font-size: 1.4rem;
    color: var(--color-white);
    position: absolute;
    bottom: 10%;
    left: 15%;
    right: 15%;
    z-index: 100;
    font-weight: 300;
}
.interactive-3 .center-caption p {
    font-weight: 500;
    font-size: 1.6rem;
}

.pod-kolekcja p {
    font-size: 1.6rem;
    margin-top: 20rem;
    margin-bottom: 20rem;
    width: 50%;
    text-align: center;
    line-height: 1.3;
}

.pod-kolekcja {
    display: flex;
    width: 100%;
    justify-content: center;
}

/* --- HISTORIA --- */
.history {
    position: relative;
    padding: 5.6rem 1.6rem;
    text-align: center;
    background-size: cover;
    background-position: center;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

/* Animacja reveal dla filmu w sekcji history na stronie about - odsłanianie od góry do dołu przez clip-path */
.history-video-wrapper {
    display: inline-block;
    max-width: 100%;
}

.history-video-wrapper video {
    display: block;
    width: 100%;
    height: auto;
    /* Film widoczny domyślnie */
    clip-path: inset(0 0 0 0);
    -webkit-clip-path: inset(0 0 0 0);
}

.history .inner { position:relative; z-index:1; max-width:90rem; margin:0 auto; }
.history .cta { display:inline-block; margin-top:1.2rem; padding:1rem 1.8rem; border-radius:2.4rem; background:#fff; color:#000; text-decoration:none; }
a.cta.historia {
    color: var(--color-black);
    font-size: 2rem;
    text-transform: uppercase;
    text-align: center;
    padding: 5rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* --- INSTAGRAM --- */
.insta h2 {
    text-align: center;
    margin: 0 0 1rem;
    font-family: var(--font-family-gracia);
    font-size: 7.2rem;
}
p.instagram-text {
    font-size: 1.6rem;
    color: var(--color-black);
    line-height: 1.3;
    font-weight: 300;
}
p.instagram-text a {
    color: var(--color-black);
    text-decoration: none;
}
p.instagram-link a {
    color: black;
    font-size: 2rem;
    text-transform: uppercase;
    font-weight: 300;
}
.insta {
    text-align: center;
    padding: 5.6rem 1.6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.insta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 90rem;
    margin: 1.6rem auto;
    margin-bottom: 10rem;
    margin-top: 10rem;
}

.insta-grid img {
    height: 30rem;
    object-fit: cover;
    border-radius: 0;
    width: 100%;
}

/* --- PREFOOTER --- */
.prefooter-3 {
    width: 100%;
    margin-top: 20rem;
    margin-bottom: 10rem;
    overflow: hidden;
}
.prefooter-grid {
    position: relative;
    overflow: hidden;
}

/* Delikatny "fade in" modułów prefooter po wejściu w viewport (IntersectionObserver) */
.prefooter-grid.lemanu-reveal-init {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 900ms ease, transform 900ms ease;
    will-change: opacity, transform;
}
.prefooter-grid.lemanu-reveal-init.lemanu-inview {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .prefooter-grid.lemanu-reveal-init {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}
.prefooter-carousel-track {
    display: flex;
    gap: 1rem;
    transition: transform .4s ease;
    cursor: grab;
    will-change: transform;
}
.prefooter-carousel-track.grabbing {
    cursor: grabbing;
    transition: none;
}
.prefooter-carousel-item {
    flex: 0 0 calc((100% - 2rem) / 3); /* 3 kolumny na desktop z gap 1rem */
    min-width: 0;
}
.prefooter-carousel-item img,
.prefooter-carousel-item video {
    width: 100%;
    height: 80vh;
    object-fit: cover;
    display: block;
    user-select: none;
}

.brand-signet {
    display: block;
    margin: 4.8rem auto;
    width: 6rem;
    height: auto;
}

.kontener-w.best {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Nagłówek strony kontaktowej - desktop */
.section h2.contact-title {
    text-align: center;
    margin: 0 0 1rem;
    font-family: var(--font-family-gracia);
    font-size: 7.2rem;
    margin-bottom: 5rem;
}

/* --- STRONA "O NAS" --- */
/* Brand signet na górze */
.brand-signet.top {
    display: block;
    margin: -32px auto;
    width: 6rem;
    height: auto;
    z-index: 100000;
    position: relative;
}

/* Tekst o szerokości 60% */
.about-text-width-600 {
    max-width: 60%;
    margin: 2.4rem auto;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--color-black);
    text-align: center;
    font-weight: 600;
    margin-top: 10rem;
    margin-bottom: 10rem;
}

/* Tekst ozdobnym fontem */
.about-ornamental-font {
    font-family: var(--font-family-gracia);
    text-align: center;
    margin: 4rem auto;
    line-height: .6;
    color: var(--color-black);
    font-size: 5rem;
    max-width: 60%;
    margin-bottom: 10rem;
}

/* About: ornamental long text reveal (word-by-word) */
.about-ornamental-font .lemanu-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 520ms ease, transform 520ms ease;
    will-change: opacity, transform;
}
.about-ornamental-font.lemanu-words-inview .lemanu-word {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .about-ornamental-font .lemanu-word {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Tekst w dwóch kolumnach z justowaniem */
.about-two-columns {
    column-count: 2;
    column-gap: 4rem;
    text-align: justify;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--color-black);
    margin: 4rem auto;
    max-width: 80%;
}

.about-two-columns p {
    margin-bottom: 1.6rem;
    text-align: justify;
}

/* Tekst o szerokości 80% wyrównany do lewej */
.about-text-width-600-left {
    max-width: 80%;
    margin: 2.4rem auto;
    font-size: 1.2rem;
    line-height: 1.5;
    color: var(--color-black);
    text-align: left;
    font-weight: 600;
    margin-top: 10rem;
    margin-bottom: 10rem;
    text-align: justify;
}

/* --- FADE IN ANIMACJA DLA ZDJĘĆ NA STRONIE ABOUT --- */
.about-fade-item {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.about-fade-item.fade-in {
    opacity: 1;
    transform: translateY(0);
}

/* Opóźnienia dla trzech zdjęć w prefooter-3 - sekwencyjne pojawianie się */
.prefooter-3 .prefooter-grid .about-fade-item.fade-in:nth-child(1) {
    transition-delay: 0s;
}

.prefooter-3 .prefooter-grid .about-fade-item.fade-in:nth-child(2) {
    transition-delay: 0.4s;
}

.prefooter-3 .prefooter-grid .about-fade-item.fade-in:nth-child(3) {
    transition-delay: 0.8s;
}

/* --- STRONA KONTAKT --- */
/* Hero section z filtrem grayscale */
.contact-hero {
    filter: grayscale(1);
}

/* Paragraf pod nagłówkiem - inny styl niż na homepage */
.contact-intro {
    max-width: 90rem;
    margin: 0 auto;
    color: var(--color-black);
    text-align: center;
    line-height: 1.3;
    font-size: 1.2rem;
    font-weight: 400;
}

/* Dwie kolumny: zdjęcie po lewej, formularz po prawej */
.contact-two-columns {
    display: flex;
    flex-direction: row;
    gap: 15rem;
    align-items: flex-start;
    margin-top: 5rem;
    margin-bottom: 5rem;
}

.contact-image-column {
    flex: 1 1 50%;
    width: 50%;
}

.contact-image-column img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.contact-form-column {
    flex: 1 1 50%;
    width: 50%;
    padding-right: 10rem;
    padding-left: 10rem;
}

.contact-form-column h3 {
    font-size: 5rem;
    font-family: var(--font-family-gracia);
    margin-bottom: 3rem;
    color: var(--color-black);
    text-align: center;
}

/* Style dla wszystkich pól formularza Contact Form 7 */
.contact-form-column input[type="text"],
.contact-form-column input[type="email"],
.contact-form-column input[type="tel"],
.contact-form-column input[type="url"],
.contact-form-column input[type="number"],
.contact-form-column textarea,
.contact-form-column select {
    width: 100%;
    border: 0;
    border-bottom: 0.1rem solid var(--color-brown);
    font-size: 1.3rem;
    color: var(--color-black);
    padding: 0.8rem 0;
    background: transparent;
}

.contact-form-column input:focus-visible,
.contact-form-column textarea:focus-visible,
.contact-form-column select:focus-visible {
    outline: none;
    border-bottom-color: var(--color-black);
}

.contact-form-column textarea {
    min-height: 10rem;
    resize: vertical;
}

.contact-form-column input[type="submit"],
.contact-form-column input[type="button"] {
    border: 0;
    background: transparent;
    font-size: 1.3rem;
    text-transform: uppercase;
    color: var(--color-brown);
    padding: 0;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

/* Style dla formularza Contact Form 7 */
.page-template-contact form.wpcf7-form.init p {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    font-size: 1.2rem;
    text-transform: uppercase;
}

.page-template-contact form.wpcf7-form input,
.page-template-contact form.wpcf7-form textarea {
    text-transform: uppercase;
    font-size: 1.2rem;
}

/* Checkbox w formularzu kontaktowym */
span.wpcf7-form-control-wrap:has(.wpcf7-checkbox),
span.wpcf7-form-control-wrap:has(input[type="checkbox"]) {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/* Style dla checkboxów Contact Form 7 */
.wpcf7-checkbox span {
    margin: 0;
    display: flex;
    gap: 1rem;
    accent-color: black;
    flex-wrap: nowrap;
}

form .wpcf7-checkbox span label {
    display: flex;
}

/* Komunikaty błędów formularza */
.wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 1em;
    font-weight: normal;
    display: block;
    margin-top: .5rem;
    font-size: 1rem;
}

.cat-card {
    position: relative;
    overflow: hidden;
  }
  
  .cat-image,
  .cat-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease;
    pointer-events: none;
    height: 70rem;
  }

  .cat-image {
    position: relative;
    }
  
  .cat-video {
    opacity: 0;
  }
  
  /* ZAKOMENTOWANE - wyłączony efekt hover */
  /*
  .cat-card:hover .cat-image {
    opacity: 0;
  }
  
  .cat-card:hover .cat-video {
    opacity: 1;
  }
  */

  section.section.p-rev .ornament {
    margin: 0;
    width: 60rem;
    margin-bottom: -15rem;
}

.interactive-3 .cell:nth-of-type(2) {
    filter: grayscale(1);
}
.interactive-3 .cell:nth-of-type(2) {
    position: relative;
  }
  
  .interactive-3 .cell:nth-of-type(2) img,
  .interactive-3 .cell:nth-of-type(2) video {
    position: relative;
    z-index: 1;
  }

  .interactive-3 .cell:nth-of-type(2) img.logo {
    position: absolute;
    z-index: 100;
}
  
  .interactive-3 .cell:nth-of-type(2)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.6) 20%,
      rgba(0, 0, 0, 0.3) 40%,
      rgba(0, 0, 0, 0) 70%,
      transparent 100%
    );
    pointer-events: none;
  }
  

  
/* Tablet - max-width: 1025px */
@media (max-width: 1025px) {
    .product-card { flex: 0 0 calc((100% - 1.6rem) / 2); }
    .prefooter-carousel-item {
        flex: 0 0 calc((100% - 1rem) / 2); /* 2 kolumny na tablet */
    }
    .interactive-3 {
        grid-template-columns: 1fr 1fr;
    }
    .opis-p-kat p {
        width: 75%;
    }
    .reverie {
        min-height: 60vh;
    }
    .interactive-3 .cell img, .interactive-3 .cell video {
        height: 50vh;
    }
    .interactive-3 :last-child {
        display: none;
    }
    .history {
        min-height: 60vh;
    }
    .insta-grid img {
        height: 29rem;
        max-width: 29rem;
        width: 100%;
    }
    .prefooter-carousel-item img,
    .prefooter-carousel-item video {
        height: 40vh;
    }
    .prefooter-carousel-item {
        flex: 0 0 calc((100% - 1rem) / 2); /* 2 kolumny na tablet */
    }

    /* Strona kontakt - tablet */
    .contact-form-column {
        flex: 1 1 50%;
        width: 50%;
        padding-right: 5rem;
        padding-left: 5rem;
    }

    .contact-two-columns {
        display: flex;
        flex-direction: row;
        gap: 0rem;
        align-items: flex-start;
        margin-top: 5rem;
        margin-bottom: 5rem;
    }

    .blog-hero .carousel-track {
        padding: 2rem;
    }
}

/* Mobile/Tablet - max-width: 768px */
@media (max-width: 768px) {
    /* Hero Slider - obszary klikalne na mobile */
    .hero-slider-click-area {
        width: 20%; /* Zwiększona szerokość na mobile dla łatwiejszego kliknięcia */
    }
    
    /* Padding dla karuzeli produktów na mobile - używamy margin zamiast padding */
    .carousel {
        margin-left: 4%;
        margin-right: 4%;
        width: calc(100% - 8%);
        box-sizing: border-box;
    }
    
    .about-two-columns {
        column-count: 1;
        column-gap: 0;
        max-width: 100%;
        padding: 0 2rem;
    }
    
    .about-text-width-600 {
        max-width: 100%;
        padding: 0 2rem;
    }
    
    .about-text-width-600-left {
        max-width: 100%;
        padding: 0 2rem;
    }
    
    .about-ornamental-font {
        font-size: 3rem;
        padding: 0 2rem;
        max-width: 100%;
    }
    
    /* Globalne zmniejszenie nagłówków z 7.2rem do 5.2rem na mobile/tablet */
    .section h2,
    .reverie h2,
    .insta h2,
    .section h2.contact-title {
        font-size: 5.2rem;
    }

    .contact-two-columns {
        flex-direction: column;
        gap: 3rem;
    }
    
    .contact-image-column,
    .contact-form-column {
        flex: 1 1 100%;
        width: 100%;
    }
}

/* Mobile - max-width: 678px */
@media (max-width: 678px) {
    /* Hero Slider - obszary klikalne na bardzo małych ekranach */
    .hero-slider-click-area {
        width: 25%; /* Jeszcze większa szerokość na bardzo małych ekranach */
    }
    
    /* Padding dla karuzeli produktów na mobile - używamy margin zamiast padding */
    .carousel {
        margin-left: 4%;
        margin-right: 4%;
        width: calc(100% - 8%);
        box-sizing: border-box;
    }
    
    .product-card { flex: 0 0 100%; }
    .insta-grid { grid-template-columns: 1fr; }
    .cats-2 { grid-template-columns: 1fr; }

    .hero .inner,
    .hero-slide .inner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .hero h2,
    .hero-slide h2 {
        width: 80%;
        line-height: .8;
    }
    .intro {
        width: 80%;
    }
    .reverie {
        min-height: 50vh;
    }
    .interactive-3 .cell img, .interactive-3 .cell video {
        height: 35vh;
    }

    .pod-kolekcja p {
        width: 75%;
    }
    .history {
        min-height: 40vh;
    }

    .insta-grid img {
        max-width: 100%;
    }
    .insta {
        padding: 0;
    }
    .prefooter-carousel-item {
        flex: 0 0 calc((100% - 1rem) / 2); /* 2 kolumny na mobile */
    }

    /* Globalne zmniejszenie nagłówków z 7.2rem do 5.2rem na mobile */
    .section h2,
    .reverie h2,
    .insta h2,
    .section h2.contact-title {
        font-size: 5.2rem;
    }

    .cat-video {
        opacity: 0;
    }

}

/* --- ARCHIWUM BLOGOWE --- */
.blog-hero {
    position: relative;
    min-height: 100vh;
    background-image: url('../assets/1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    padding: 0;
    padding-top: 10rem;
    padding-bottom: 10rem;
    overflow: hidden;
}

/* Gradient overlay - nad tłem, pod elementami */
.blog-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(
    to top,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 1) 30%,
    rgba(0, 0, 0, 0) 100%
);
    z-index: 0;
    pointer-events: none;
}

.blog-hero-inner {
    max-width: 1920px;
    margin: 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 2fr 5fr;
    gap: 5rem;
    align-items: start;
    position: relative;
    z-index: 1;
}

.blog-hero-left {
    display: flex;
    flex-direction: column;
    gap: 3rem;
    align-items: center;
    padding-top: 5rem;
}

.blog-hero-title {
    font-family: var(--font-family-gracia);
    font-size: 4rem;
    color: var(--color-white);
    width: 60%;
    text-align: center;
    line-height: .8;
    margin: 0;
    margin-bottom: 2rem;
}

.blog-hero-signet {
    width: 12rem;
    height: auto;
}

.blog-hero-right {
    width: 100%;
    overflow: hidden;
}

/* Pusta karta domyślnie ukryta - tylko na desktop będzie widoczna */
.blog-card-empty {
    display: none;
}

/* Desktop - karuzela blogowa pokazuje 2.5 karty (trzecia częściowo widoczna) */
@media (min-width: 1025px) {
    #blog-carousel {
        width: 83.33%; /* 2.5/3 = 83.33% - pokazuje 2 pełne karty + 50% trzeciej */
        overflow: visible; /* Pozwala na widoczność trzeciej karty poza kontenerem */
    }
    
    /* Pusta karta na końcu karuzeli - pozwala na pełne przesunięcie ostatniej karty - TYLKO NA DESKTOP */
    .blog-card-empty {
        display: block;
        visibility: visible;
    }
}

/* Karty wpisów w karuzeli */
.blog-card {
    box-sizing: border-box;
    flex: 0 0 calc((100% - .4rem) / 2);
    padding: .4rem;
    text-align: left;
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.blog-card img {
    width: 100%;
    height: 70vh;
    object-fit: cover;
    object-position: center;
    user-select: none;
    display: block;
}

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

/* Gradient overlay - czarny od dołu do transparent u góry - tylko na desktop hover */
@media (min-width: 769px) {
    .blog-card::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60vh;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
        z-index: 1;
    }
    
    .blog-card:hover::after {
        opacity: 1;
    }
}

/* Desktop - tekst na obrazie, ukryty domyślnie, pokazuje się na hover */
@media (min-width: 769px) {
    .blog-card-category {
        display: none;
    }

    /* Blok z tytułem i excerptem - ukryty domyślnie, pokazuje się na hover */
    .blog-card-content {
        position: absolute;
        bottom: 3rem;
        left: 3rem;
        right: 3rem;
        z-index: 2;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .blog-card:hover .blog-card-content {
        opacity: 1;
    }

    .blog-card-title a {
        color: var(--color-white);
        text-decoration: none;
    }

    .blog-card-title a:hover {
        text-decoration: underline;
    }

    .blog-card-excerpt {
        font-size: 1.2rem;
        color: var(--color-white);
        font-weight: 300;
        line-height: 1.5;
        margin: 0;
    }
}

.blog-hero-right .no-posts {
    text-align: center;
    font-size: 1.6rem;
    color: var(--color-white);
    padding: 5rem 0;
}

.blog-card-title a {
    color: var(--color-white);
    text-decoration: none;
}

.blog-card-title {
    font-size: 1.4rem;
    margin: 0 0 1rem 0;
    line-height: 1.3;
}

/* Responsive - tablet */
@media (max-width: 1025px) {
    .blog-hero-inner {
        grid-template-columns: 1fr;
        gap: 5rem;
    }
    
    .blog-hero-left {
        align-items: center;
        text-align: center;
    }
    
    .blog-hero-title {
        font-size: 5rem;
        margin-bottom: 0rem;
        margin-top: 3rem;
    }
    
    .blog-hero-signet {
        width: 10rem;
        height: auto;
    }
    
    .blog-card {
        flex: 0 0 calc((100% - 1.6rem) / 2);
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    /* Na tablet i mobile tekst zawsze widoczny - pod obrazem */
    .blog-card-content {
        position: relative;
        opacity: 1 !important;
        bottom: auto;
        left: auto;
        right: auto;
        padding: 0;
    }
    
    .blog-card-title {
        margin-bottom: 1rem;
    }
    
    .blog-card-excerpt {
        margin: 0;
    }

    .blog-card img {
        height: 40vh;
    }
    
    /* Wyłącz gradient overlay na tablet */
    .blog-card::after {
        display: none;
    }
}

/* Responsive - mobile */
@media (max-width: 768px) {
    .blog-hero {
        min-height: auto;
        padding: 3rem 1.6rem;
        overflow: hidden;
    }
    
    .blog-hero-inner {
        width: 100%;
        padding: 0;
    }
    
    .blog-hero-right {
        width: 100%;
        overflow: hidden;
        padding: 0;
    }
    
    .blog-hero-title {
        font-size: 5rem;
    }
    
    .blog-card {
        flex: 0 0 100%;
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
    
    .blog-card img {
        height: 25rem;
    }
    
    /* Na mobile tekst zawsze widoczny - pod obrazem */
    .blog-card-content {
        position: relative;
        opacity: 1 !important;
        bottom: auto;
        left: auto;
        right: auto;
        padding: 0;
    }
    
    .blog-card-title {
        margin-bottom: 1rem;
    }
    
    .blog-card-excerpt {
        margin: 0;
        font-size: 1.1rem;
    }
    
    /* Wyłącz gradient overlay na mobile */
    .blog-card::after {
        display: none;
    }
    
    #blog-carousel {
        width: 100%;
        overflow: hidden;
    }
    
    .carousel-track {
        padding-left: 0;
        padding-right: 0;
    }

    .blog-card-content {
        padding: 3rem;
    }
}

@media (max-width: 678px) {
    .blog-hero {
        padding: 2rem 1rem;
    }
    
    .blog-hero-inner {
        gap: 3rem;
    }
    
    .blog-hero-title {
        font-size: 5rem;
        width: 100%;
    }
    
    .blog-card {
        padding: 0.8rem;
    }
    
    .blog-card img {
        height: 25rem;
    }
    
    #blog-carousel {
        width: 100%;
        margin: 0;
    }
}

/* --- POJEDYNCZY WPIS BLOGOWY (SINGLE POST) --- */
.single-post-featured-image {
    width: 100%;
    overflow: hidden;
}

.single-post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.single-post-content {
    background: var(--color-white);
    padding: 5.6rem 0;
}

.single-post-inner {
    max-width: 90rem;
    margin: 0 auto;
}

.single-post-title {
    font-family: var(--font-family-gracia);
    font-size: 7.2rem;
    text-align: center;
    color: var(--color-black);
    margin: 0 0 3rem;
    line-height: .8;
}

.single-post-text {
    max-width: 90rem;
    margin: 0 auto 5rem;
    text-align: center;
    font-size: 1.3rem;
    line-height: 1.5;
    color: var(--color-black);
}

.single-post-text p {
    margin-bottom: 1.6rem;
}

.single-post-text p:last-child {
    margin-bottom: 0;
}

.single-post-divider {
    width: 100%;
    height: 1px;
    background: var(--color-black);
    margin: 5rem 0;
}

.single-post-related-title {
    font-family: var(--font-family-gracia);
    font-size: 7.2rem;
    text-align: center;
    color: var(--color-black);
    margin: 0 0 3rem;
    line-height: 1.2;
}

.single-post-carousel-wrapper {
    background: var(--color-white);
    padding: 2rem 0;
}

/* Karty wpisów w karuzeli na single post - białe tło, czarne teksty */
.single-post-card {
    background: var(--color-white);
    color: var(--color-black);
}

.single-post-card-category {
    color: var(--color-grey);
}

.single-post-card-title a {
    color: var(--color-black);
}

.single-post-card-title a:hover {
    text-decoration: underline;
}

.single-post-card-excerpt {
    color: var(--color-grey);
}

/* Responsive - tablet single post */
@media (max-width: 1025px) {
    .single-post-title,
    .single-post-related-title {
        font-size: 6rem;
    }
}

/* Responsive - mobile single post */
@media (max-width: 768px) {
    .single-post-title,
    .single-post-related-title {
        font-size: 5.2rem;
    }
    
    .single-post-text {
        font-size: 1.2rem;
        padding: 0 2rem;
    }
    
    .single-post-inner {
        padding: 0 2rem;
    }
}

@media (max-width: 678px) {
    .single-post-title,
    .single-post-related-title {
        font-size: 5.2rem;
    }
    
    .single-post-text {
        font-size: 1.2rem;
        padding: 0 1rem;
    }
    
    .single-post-inner {
        padding: 0 1rem;
    }

    .page-template-contact .hero {
        min-height: 50vh;
        background-position: center;
    }

    .cat-image, .cat-video {
        height: 50rem;
    }

    .opis-p-kat {
        margin-top: 10rem;
        margin-bottom: 5rem;
    }

    section.section.p-rev .ornament {
        width: 50rem;
    }

    .interactive-3 {
        gap: 0;
    }

    .interactive-3 .center-overlay .logo {
        width: 50%;
        bottom: 15%;
    }

    .prefooter-grid {
        gap: 0;
    }

    .insta-grid {
        gap: 1rem;
    }

    .tab-o-kolekcji, .woocommerce table.shop_attributes td p {
        text-align: left;
    }

    
}

/* --- STRONA 404 --- */
.error-404 {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10rem 0;
    background: var(--color-white);
}

.error-404-inner {
    max-width: 90rem;
    margin: 0 auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

.error-404-title {
    font-family: var(--font-family-gracia);
    font-size: 12rem;
    color: var(--color-black);
    margin: 0;
    line-height: 1;
    font-weight: 400;
}

.error-404-subtitle {
    font-family: var(--font-family-gracia);
    font-size: 5.4rem;
    color: var(--color-black);
    margin: 0;
    line-height: 1.2;
    font-weight: 400;
}

.error-404-description {
    font-size: 1.6rem;
    color: var(--color-black);
    line-height: 1.5;
    max-width: 60rem;
    margin: 0;
    font-weight: 300;
}

.error-404-links {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 2rem;
}

.error-404-button {
    display: inline-block;
    padding: 1rem 2.4rem;
    background: var(--color-black);
    color: var(--color-white);
    text-decoration: none;
    font-size: 1.3rem;
    text-transform: uppercase;
    transition: opacity 0.2s;
    font-weight: 400;
}

.error-404-button:hover {
    opacity: 0.9;
    text-decoration: none;
    color: var(--color-white);
}

.error-404-button-secondary {
    background: transparent;
    color: var(--color-black);
    border: 0.1rem solid var(--color-black);
}

.error-404-button-secondary:hover {
    background: var(--color-black);
    color: var(--color-white);
}

.error-404 .ornament {
    margin: 4rem auto;
}

/* Responsive - tablet */
@media (max-width: 1025px) {
    .error-404 {
        padding: 8rem 0;
    }
    
    .error-404-title {
        font-size: 10rem;
    }
    
    .error-404-subtitle {
        font-size: 4.4rem;
    }
    
    .error-404-description {
        font-size: 1.5rem;
    }
}

/* Responsive - mobile */
@media (max-width: 768px) {
    .error-404 {
        padding: 6rem 0;
        min-height: 60vh;
    }
    
    .error-404-inner {
        padding: 0 2rem;
        gap: 2rem;
    }
    
    .error-404-title {
        font-size: 8rem;
    }
    
    .error-404-subtitle {
        font-size: 3.6rem;
    }
    
    .error-404-description {
        font-size: 1.4rem;
    }
    
    .error-404-links {
        flex-direction: column;
        width: 100%;
        max-width: 30rem;
    }
    
    .error-404-button {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 678px) {
    .error-404 {
        padding: 4rem 0;
    }
    
    .error-404-title {
        font-size: 6rem;
    }
    
    .error-404-subtitle {
        font-size: 3rem;
    }
    
    .error-404-description {
        font-size: 1.3rem;
    }
}