/* 
    Had to add custom css file, because noone left package.json on prod
    When i tried to run:
    sass src/scss/app.scss dist/style.css --style=compressed --source-map
    caused many errors
    
 */

/* Blocks the two-finger trackpad swipe (macOS Safari/Chrome) that slides the
   whole page left/right via browser back/forward navigation, plus any
   accidental horizontal scroll from content overflow - desktop and mobile. */
html,
body {
    /* Unlike hidden, clip does not create a scroll container that disables
       position: sticky for descendants such as the blog table of contents. */
    overflow-x: clip;
    overscroll-behavior-x: none;
}

/* Server-rendered blog table of contents. Kept outside the legacy bundle so
   the links are visible immediately and are not duplicated by its JS. */
.blogPost__toc {
    position: sticky;
    display: flex;
    height: auto;
    align-items: flex-start;
    flex-direction: column;
    top: 250px;
    align-self: flex-start;
}

.blogPost__toc p {
    font: 700 1.2rem/1.8rem "DM Sans", sans-serif;
    margin-bottom: 24px;
}

.blogPost__toc a {
    font: 400 1.6rem/2.4rem "DM Sans", sans-serif;
    margin-bottom: 8px;
    padding: 8px 12px;
    border-radius: 8px;
}

.blogPost__toc a:hover,
.blogPost__toc a.active {
    background: var(--gray-100);
    color: var(--gray-900);
}

@media (max-width: 991px) {
    .blogPost__toc {
        display: none;
    }
}

/* Vertical CDN video carousel. The source SCSS is kept alongside the
   block; this compiled fallback is required because the inherited theme has
   no working frontend build configuration. */
.blockVideoShorts {
    padding: 64px 0;
}

.blockVideoShorts__wrapper {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.blockVideoShorts__heading {
    margin-bottom: 32px;
}

.blockVideoShorts__heading h2 {
    margin-bottom: 12px;
    color: var(--gray-900);
    font: 700 3.6rem/4.4rem "DM Sans", sans-serif;
}

.blockVideoShorts__description {
    max-width: 720px;
    color: var(--gray-700);
    font: 400 1.6rem/2.4rem "DM Sans", sans-serif;
}

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

.blockVideoShorts__slider {
    visibility: visible;
}

.blockVideoShorts__slider:not(.is-initialized) .splide__list {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
}

.blockVideoShorts__slider:not(.is-initialized) .splide__slide:nth-child(n + 6) {
    display: none;
}

/* Reusable, non-public display author selected in the post sidebar. */
.blogPost__content--has-author {
    padding-bottom: 0;
    border-bottom: 0;
}

.blogAuthor {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    margin: 48px 0 60px;
    padding: 48px 64px;
    border-radius: 24px;
    background: var(--gray-100, #f6f7f5);
}

.blogAuthor__photo {
    overflow: hidden;
    width: 200px;
    aspect-ratio: 1;
    border-radius: 20px;
}

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

.blogAuthor__eyebrow {
    margin-bottom: 16px;
    color: var(--gray-500);
    font: 400 1.4rem/2rem "DM Sans", sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blogAuthor__name {
    margin-bottom: 16px;
    color: var(--gray-900);
    font: 700 2.8rem/3.6rem "DM Sans", sans-serif;
}

.blogAuthor__description {
    max-width: 900px;
    color: var(--gray-700);
    font: 400 1.6rem/2.6rem "DM Sans", sans-serif;
}

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

@media (max-width: 767px) {
    .blogAuthor {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 32px 0 48px;
        padding: 24px;
        border-radius: 20px;
    }

    .blogAuthor__photo {
        order: 2;
        width: 100%;
        border-radius: 16px;
    }

    .blogAuthor__content {
        display: contents;
    }

    .blogAuthor__eyebrow {
        order: 1;
        margin-bottom: 0;
    }

    .blogAuthor__name {
        order: 3;
        margin-bottom: 0;
        font-size: 2.2rem;
        line-height: 3rem;
    }

    .blogAuthor__description {
        order: 4;
    }
}

.blockVideoShorts__video {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 24px;
    background: var(--gray-100);
}

.blockVideoShorts__video video {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    object-fit: cover;
    cursor: pointer;
}

.blockVideoShorts__title {
    margin: 12px 4px 0;
    color: var(--gray-900);
    font: 600 1.6rem/2.4rem "DM Sans", sans-serif;
}

@media (max-width: 1640px) {
    .blockVideoShorts__wrapper {
        padding-right: 20px;
        padding-left: 20px;
    }
}

@media (max-width: 1399px) {
    .blockVideoShorts__slider:not(.is-initialized) .splide__list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .blockVideoShorts__slider:not(.is-initialized) .splide__slide:nth-child(n + 5) {
        display: none;
    }
}

@media (max-width: 1199px) {
    .blockVideoShorts__slider:not(.is-initialized) .splide__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .blockVideoShorts__slider:not(.is-initialized) .splide__slide:nth-child(n + 4) {
        display: none;
    }
}

@media (max-width: 991px) {
    .blockVideoShorts__slider:not(.is-initialized) .splide__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .blockVideoShorts__slider:not(.is-initialized) .splide__slide:nth-child(n + 3) {
        display: none;
    }
}

@media (max-width: 767px) {
    .blockVideoShorts {
        padding: 48px 0;
    }

    .blockVideoShorts__heading h2 {
        font-size: 2.8rem;
        line-height: 3.6rem;
    }

    .blockVideoShorts__slider {
        max-width: 420px;
        margin: 0 auto;
    }

    .blockVideoShorts__slider:not(.is-initialized) .splide__list {
        grid-template-columns: minmax(0, 1fr);
    }

    .blockVideoShorts__slider:not(.is-initialized) .splide__slide:nth-child(n + 2) {
        display: none;
    }
}

.float-right {
    float: right !important;
}

.yith-wcwl-feedback-messages-container {
    display: none !important;
}

/* 1. Kontener rezerwujący miejsce - on steruje wysokością slidera */
.blockImageHero__wrapper {
    background-color: #f6f7f5;
    overflow: hidden;
    width: 100%;
    display: block;
    position: relative;
    /* Sztywne proporcje 1920 / 500 na PC */
    aspect-ratio: 1920 / 500;
}

/* 2. Obrazek - musi wypełnić 100% wysokości kontenera, żeby nie było przeskoku */
.blockImageHero__slider {
    visibility: visible !important;
}

.blockImageHero__slider:not(.is-initialized) .blockImageHero__slide {
    width: 100%;
}

.blockImageHero__slider:not(.is-initialized) .blockImageHero__slide:not(:first-child) {
    display: none;
}

.blockImageHero__image {
    position: relative;
    z-index: 0;
    width: 100% !important;
    height: 100% !important;
    /* Wymuszamy wysokość rodzica */
    object-fit: cover !important;
    /* To uratuje kadrowanie i "scaled" foty */
    object-position: center;
    display: block !important;
}

/* 3. Mobilka - zmiana proporcji wrappera na 1/1 */
@media (max-width: 991px) {
    .blockImageHero__wrapper {
        aspect-ratio: 1 / 1;
    }

    /* Na mobile obrazek też musi trzymać 100% */
    .blockImageHero__image {
        height: 100% !important;
        aspect-ratio: 1 / 1;
    }
}

/* Klasa ratunkowa, którą dodaliśmy wcześniej */
.force-visible {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Splide musi dziedziczyć wysokość wrappera */
.blockImageHero__wrapper,
.blockImageHero__slider,
.blockImageHero__slider .splide__track,
.blockImageHero__slider .splide__list,
.blockImageHero__slide {
    height: 100%;
}

/* Optional per-slide content for Image Hero. */
.blockImageHero__slide {
    position: relative;
}

.blockImageHero__slide--has-content::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    background: rgba(63, 38, 20, 0.3);
    mix-blend-mode: multiply;
    pointer-events: none;
}

.blockImageHero__videoPoster {
    position: absolute;
    z-index: 4;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.blockImageHero__videoPoster[hidden] {
    display: none;
}

.blockImageHero__videoPoster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blockImageHero__content {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 6;
    width: min(1046px, calc(100% - 80px));
    transform: translate(-50%, -50%);
    color: var(--white);
    text-align: center;
}

.blockImageHero__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-bottom: 28px;
    font: 300 7.4rem/0.95 Georgia, "Times New Roman", serif;
    letter-spacing: -1.1px;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.18);
}

.blockImageHero__titleLine {
    display: block;
}

.blockImageHero__title em {
    font-style: italic;
    font-weight: 400;
}

.blockImageHero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fcf9f6;
    font: 700 1.65rem/1.24 "DM Sans", sans-serif;
    letter-spacing: -0.5px;
}

.blockImageHero__cta:hover {
    color: #fcf9f6;
}

.blockImageHero__ctaIcon {
    position: relative;
    z-index: 1;
    display: grid;
    flex: 0 0 49px;
    width: 49px;
    height: 49px;
    place-items: center;
    border-radius: 50%;
    background: #ff8f87;
}

.blockImageHero__ctaIcon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.blockImageHero__ctaLabel {
    display: flex;
    min-height: 49px;
    align-items: center;
    margin-left: 7px;
    padding: 7px 22px;
    border: 1px solid #fcf9f6;
    border-radius: 100px;
}

@media (max-width: 991px) {
    .blockImageHero__content {
        top: 48%;
        width: calc(100% - 40px);
    }

    .blockImageHero__title {
        gap: 4px;
        margin-bottom: 26px;
        font-size: clamp(3.8rem, 8.8vw, 5.1rem);
        letter-spacing: -0.03em;
    }

    .blockImageHero__ctaIcon {
        flex-basis: 45px;
        width: 45px;
        height: 45px;
    }

    .blockImageHero__ctaIcon svg {
        width: 19px;
        height: 19px;
    }

    .blockImageHero__ctaLabel {
        min-height: 45px;
        margin-left: 6px;
        padding: 6px 16px;
        font-size: 1.3rem;
        line-height: 1.24;
    }
}

.blockReadMore {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 32px auto;
    padding-right: 20px;
    padding-left: 20px;
}

.blockReadMore__content > .wp-block-heading,
.blockReadMore__content > .wp-block-image,
.blockReadMore__content > .wp-block-columns {
    max-width: none;
    padding-right: 0;
    padding-left: 0;
}

.blockReadMore__content {
    position: relative;
    overflow: hidden;
    max-height: var(--read-more-height, 360px);
}

.blockReadMore__content::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%);
    pointer-events: none;
}

.blockReadMore__toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 16px auto 0;
    padding: 10px 24px;
    border: 1px solid var(--gray-900);
    border-radius: 100px;
    color: var(--gray-900);
    font: 700 1.6rem/1.4 "DM Sans", sans-serif;
}

.blockReadMore__toggle svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    transition: transform 0.2s ease;
}

.blockReadMore__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}

.blockReadMore.is-expanded .blockReadMore__content,
.blockReadMore--preview .blockReadMore__content,
.blockReadMore.has-no-overflow .blockReadMore__content {
    overflow: visible;
    max-height: none;
}

.blockReadMore.is-expanded .blockReadMore__content::after,
.blockReadMore--preview .blockReadMore__content::after,
.blockReadMore.has-no-overflow .blockReadMore__content::after {
    display: none;
}

.blockReadMore.has-no-overflow .blockReadMore__toggle {
    display: none;
}

.blockPromoSlider__slider .splide__list {
    gap: 24px !important;
}

.blockPromoSlider__slider .splide__slide {
    margin-right: 0 !important;
}

.customProductPage__flags .yith-add-to-wishlist-button-block {
    margin: 0;
}

.customProductPage__flags .yith-wcwl-add-to-wishlist-button {
    padding: 0;
}

/* Pełnoekranowe menu mobilne. Poprzednie top:112px zakładało stałą wysokość
   sticky headera, przez co po scrollu lub na części urządzeń nad panelem
   zostawała szczelina odsłaniająca treść strony. Menu ma własny przycisk X,
   więc może stabilnie przykrywać cały viewport niezależnie od headera. */
@media(max-width: 1200px) {
    header .header__category.open {
        top: 0 !important;
        height: 100vh !important;
        height: 100dvh !important;
        padding-top: 56px;
        z-index: 99999 !important;
    }

    body.admin-bar header .header__category.open {
        top: 32px !important;
        height: calc(100vh - 32px) !important;
        height: calc(100dvh - 32px) !important;
    }

    .header.open {
        height: auto !important;
    }
}

@media(max-width: 782px) {
    body.admin-bar header .header__category.open {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
        height: calc(100dvh - 46px) !important;
    }
}

/* Blokada scrollowania tła, gdy menu jest otwarte */
html.overflow-hidden,
body.overflow-hidden {
    overflow: hidden !important;
    width: 100% !important;
    overscroll-behavior: none;
}

/* --- Sekcja Kolumn Obrazków (blockImageColumns) --- */

/* Padding góra/dół był 64px - zauważalnie większy niż w hero (8px) i
   highlight-tiles (40px). Ujednolicone do 40px dla spójnego rytmu sekcji. */
.blockImageColumns {
    padding: 40px 0 !important;
}

/* Boczny padding wrappera był 16px i zawsze aktywny (bo siedział na tym samym
   elemencie co max-width:1600px), więc sekcja była węższa niż hero/promo-
   slider/highlight-tiles (te mają 20px tylko do 1640px, powyżej wrapper i
   tak centruje się na 1600px). Ujednolicone do tej samej zasady. */
.blockImageColumns__wrapper {
    padding: 0;
}

@media (max-width: 1640px) {
    .blockImageColumns__wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* 1. Dziedziczenie wysokości i wymuszenie układu flex z gapem przed startem JS */
.blockImageColumns__wrapper,
.blockImageColumns__slider,
.blockImageColumns__slider .splide__track,
.blockImageColumns__slider .splide__list {
    height: 100%;
}

/* Usunięty CSS gap:20px na .splide__list - Splide sam wstawia ten odstęp
   przez własną opcję JS (gap:20 w konfiguracji), a mieć go jednocześnie
   w CSS i JS kolidowało z matematyką transformu w trybie loop, dając
   dodatkowy, nieprawidłowy odstęp przed pierwszym elementem. */

/* 2. Reguły dla pojedynczego slajdu */
.blockImageColumns__slide {
    height: 100%;
    /* margin-right NIE jest już blokowane - Splide sam je ustawia (inline,
       z opcji JS gap:20), skoro CSS gap powyżej został usunięty */
    flex-shrink: 0 !important;
    /* Zapobiega spłaszczaniu slajdów przed inicjacją */
    width: calc(33.33% - 14px);
    /* Przybliżona szerokość dla 3 kolumn na PC, aby uniknąć skoku */
}

/* Zaokrąglenia na zdjęciach zgodnie z projektem (Figma) — zmiana tymczasowa, wg agencji SEO klienta ta sekcja i tak ma zostać docelowo przebudowana */
.blockImageColumns__image {
    border-radius: 20px !important;
}

/* 3. Zmiana gapa dla mobile */
@media (max-width: 768px) {
    .blockImageColumns__slider .splide__list {
        gap: 16px !important;
    }

    .blockImageColumns__slide {
        width: calc(50% - 8px);
        /* Przybliżona szerokość dla 2 kolumn na tablecie */
    }
}

@media (max-width: 578px) {
    .blockImageColumns__slide {
        width: 100%;
        /* Pełna szerokość na telefonie */
    }
}

/* --- Pozostałe style (zostawiasz bez zmian) --- */

.blockPromoSlider__slider .splide__list {
    gap: 24px !important;
}
/* =========================
   KLAVIYO FORM – FINAL CLEAN
   ========================= */

.klaviyo-form-SjbChb {
    max-width: 600px;
    margin: 0 auto;
    font-family: inherit !important;
}

/* wszystko dziedziczy font */
.klaviyo-form-SjbChb * {
    font-family: inherit !important;
}

/* FORM */
.klaviyo-form-SjbChb form {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}

/* =========================
   🔝 TEKST NAD FORMEM
   ========================= */
.klaviyo-form-SjbChb p {
    font-size: 22px !important;
    font-weight: 600 !important;
    text-align: center !important;
    max-width: 520px;
    margin: 0 auto 24px auto !important;
    line-height: 1.5;
}

/* =========================
   INPUTY
   ========================= */
.klaviyo-form-SjbChb input[type="text"],
.klaviyo-form-SjbChb input[type="email"] {
    height: 52px !important;
    border-radius: 30px !important;
    border: 1px solid #000 !important;
    background: #fff !important;
    font-size: 16px !important;
    padding: 0 18px !important;
    font-weight: 500 !important;
}

/* spacing */
.klaviyo-form-SjbChb [data-testid="form-row"] {
    margin-bottom: 10px !important;
}

/* =========================
   📉 ZGODA – MNIEJSZA
   ========================= */
.klaviyo-form-SjbChb fieldset {
    margin-top: 10px;
}

.klaviyo-form-SjbChb fieldset label {
    align-items: flex-start !important;
}

.klaviyo-form-SjbChb fieldset label div {
    font-size: 13px !important;
    line-height: 1.5 !important;
    max-width: 500px;
    font-weight: 400 !important;
}

/* checkbox */
.klaviyo-form-SjbChb svg rect {
    stroke: #000 !important;
}

/* =========================
   🎯 BUTTON CENTER FIX
   ========================= */

/* wrapper */
.klaviyo-form-SjbChb [data-testid="form-row"]:last-child {
    display: flex !important;
    justify-content: center !important;
}

/* inner wrapper */
.klaviyo-form-SjbChb [data-testid="form-row"]:last-child [data-testid="form-component"] {
    display: flex !important;
    justify-content: center !important;
    width: 100% !important;
}

/* button */
.klaviyo-form-SjbChb button {
    display: block !important;
    margin: 20px auto 0 auto !important;
    height: 52px !important;
    padding: 0 30px !important;
    border-radius: 30px !important;
    background: #0054C8 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer;
    transition: 0.2s ease;
}

/* hover */
.klaviyo-form-SjbChb button:hover {
    background: #003D91 !important;
}

/* hover */
.klaviyo-form-SjbChb button:hover {
    background: #003D91 !important;
}

/* 🔥 KILL KLAVIYO FLOAT + PRZYWRÓĆ FLOW */
.klaviyo-form-SjbChb form {
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* każdy row pionowo */
.klaviyo-form-SjbChb [data-testid="form-row"] {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

/* sekcja newsletter ma być normalnym blokiem */
.newsletter {
    display: block !important;
    clear: both !important;
    background: #fff !important;
    padding: 80px 20px !important;
}

/* clearfix (gdyby coś jeszcze pływało) */
.newsletter::after {
    content: "";
    display: block;
    clear: both;
}
/* każdy row jako kolumna + blok */
.klaviyo-form-SjbChb [data-testid="form-row"] {
    display: block !important;
    width: 100% !important;
}

/* Product names use H3 to preserve the page heading hierarchy. */
.productCard__title h3 {
    color: var(--gray-900);
    font: 500 1.4rem/2rem "DM Sans", sans-serif;
}

/* Preserve typography after replacing presentational headings with neutral elements. */
.sideMiniCart__title,
.yith-wcan-filters .filters-title {
    color: var(--gray-900);
    font: 700 3.6rem/4.4rem "DM Sans", sans-serif;
}

.sideMiniCart__emptyText {
    color: var(--gray-900);
    font: 700 2.4rem/3.2rem "DM Sans", sans-serif;
    margin-bottom: 30px;
}

.yith-wcan-filters .filters-title.mobile-only {
    display: none;
}

.yith-wcan-filters.filters-modal .filters-title.mobile-only {
    display: block;
}

/* Product-card cart action. Kept here because production loads this file directly. */
.productCard__imageLink {
    display: block;
}

.productCard__actions {
    height: 60px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 3;
    padding: 0 16px;
}

.productCard__top {
    z-index: 3;
}

.productCard__topLeft {
    display: flex;
    align-items: center;
    gap: 16px;
}

.productCard__favourite {
    height: 100%;
}

.productCard__colors {
    display: flex;
    align-items: center;
    gap: 8px;
}

.productCard__colors--mobile {
    display: none;
}

.productCard__colorSwatch {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--gray-200);
    display: inline-block;
    flex-shrink: 0;
    /* Kolory swatchy pochodzą wprost z rzeczywistych kolorów tkanin (inline
       background-color z ACF/term meta) - nie zmieniamy tych wartości, bo to
       dane produktowe. Zamiast tego łagodzimy WYŚWIETLANY odcień filtrem,
       żeby był bardziej pastelowy, zgodnie z uwagą agencji SEO. */
    filter: saturate(50%) brightness(1.12);
}

.productCard__colorSwatch.is-current {
    outline: 2px solid var(--gray-900);
    outline-offset: 1px;
}

.productCard__colorsMore {
    text-decoration: underline;
    font: 500 1.2rem/1.8rem "DM Sans", sans-serif;
    color: var(--gray-900);
    white-space: nowrap;
}

.productCard__cart {
    width: 40px;
    height: 40px;
    padding: 11px;
    border: 0;
    border-radius: 50%;
    background: var(--gray-900);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    flex-shrink: 0;
    margin-left: auto;
    transition: background-color 0.2s ease;
}

.productCard__cart svg {
    width: 18px;
    height: 18px;
    transform: none;
}

.productCard__cart:hover,
.productCard__cart:focus-visible {
    background: var(--gray-700);
    color: #fff;
}

.productCard__cart:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -4px;
}

.productCard__cart.loading {
    cursor: wait;
}

.productCard__cart.loading svg {
    opacity: 0;
}

.productCard__cart.loading::after {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: product-card-cart-spin 0.7s linear infinite;
    position: absolute;
}

.productCard__cart.is-added {
    width: auto;
    gap: 5px;
    padding-right: 12px;
    padding-left: 12px;
    color: #16833b;
    cursor: default;
    font: 700 1.2rem/2rem "DM Sans", sans-serif;
}

.productCard__cart.is-added svg {
    width: 18px;
    height: 18px;
    transform: none;
}

.productCard__cart.is-added span {
    transform: none;
}

.productCard__top .yith-wcwl-add-to-wishlist {
    position: static;
}

.productCard__actions > .added_to_cart {
    display: none !important;
}

.productCard__colorsMoreWrap {
    display: inline-flex;
}

.productCard__colorsPopup {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 16px;
    right: 16px;
    z-index: 10;
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(6, 24, 46, 0.12);
    padding: 8px;
}

.productCard__colorsMoreWrap.is-open .productCard__colorsPopup {
    display: block;
}

.productCard__colorsPopupList {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 220px;
    overflow-y: auto;
}

.productCard__colorsPopupItem {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border-radius: 4px;
    font: 500 1.2rem/1.6rem "DM Sans", sans-serif;
    color: var(--gray-900);
}

.productCard__colorsPopupItem:hover {
    background: var(--gray-100, #f6f7f5);
}

.productCard__colorsPopupItem.is-current {
    font-weight: 700;
}

.productCard__colorsPopupItem .productCard__colorSwatch {
    width: 18px;
    height: 18px;
}

@media (max-width: 620px) {
    .productCard__actions {
        height: 40px;
    }

    .productCard__cart {
        width: 32px;
        height: 32px;
        padding: 9px;
    }

    .productCard__cart svg {
        width: 14px;
        height: 14px;
    }

    .productCard__colorSwatch {
        width: 22px;
        height: 22px;
    }

    .productCard__colors {
        gap: 6px;
    }

    .productCard__colors--desktop {
        display: none;
    }

    .productCard__colors--mobile {
        display: flex;
    }
}

@keyframes product-card-cart-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Temporary: hide product color swatches until all colors are configured. */
.productCard__colors {
    display: none !important;
}

.blockPromoSlider {
    padding: 20px 0 !important;
}

/* Powyższy skrót padding:20px 0 wyzerował też padding lewo/prawo (nie tylko
   góra/dół, co było zamiarem) - wrapper ma max-width:1600px, ale to nie
   pomaga poniżej 1600px szerokości, więc sekcja szła na całą szerokość
   ekranu. Przywracamy odstęp 20px z boków do 1640px (tak jak w hero i
   .header__wrapper), żeby było zgodne z resztą strony na PC i mobile. */
@media (max-width: 1640px) {
    .blockPromoSlider {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

#h-moderno-meble-sklep-z-meblami-polskiego-producenta {
    padding-top: 10px;
    font-size: 3rem !important;
    line-height: 3.8rem !important;
    font-weight: 700 !important;
}

@media (max-width: 768px) {
    #h-moderno-meble-sklep-z-meblami-polskiego-producenta {
        font-size: 2.4rem !important;
        line-height: 3.2rem !important;
    }
}

/* Section titles like "Kategorie" / "Promocje" (.block-title h2), homepage only */
body.home .block-title h2,
body.home h2.wp-block-heading {
    font-size: 3rem !important;
    line-height: 3.8rem !important;
}

body.home h3.wp-block-heading {
    font-size: 2.4rem !important;
    line-height: 3.2rem !important;
}

/* Indent "z wniesieniem" / "z wniesieniem i montażem" under the standard shipping option in checkout */
#shipping_method li.shipping_method--addon {
    margin-left: 20px !important;
}

/* Block: Highlight Tiles */
.blockHighlightTiles__wrapper {
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px 0;
}

/* Boczny padding tylko do 1640px (jak w hero i promo-sliderze) - powyżej
   wrapper i tak centruje się na 1600px, więc dodatkowy padding tylko by
   niepotrzebnie zwężał treść względem innych sekcji. */
@media (max-width: 1640px) {
    .blockHighlightTiles__wrapper {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Mobile: 3 stałe wiersze (bez slidera - prościej i bez dziwnych zachowań
   na dotyku). Desktop (>=992px): 3 kolumny, tak jak było. */
.blockHighlightTiles__grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blockHighlightTiles__block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 380px;
}

.blockHighlightTiles__tile {
    position: relative;
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 32px;
    background-color: var(--gray-100, #f6f7f5);
}

.blockHighlightTiles__tile--color {
    align-items: center;
}

.blockHighlightTiles__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.blockHighlightTiles__tile--image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(63, 38, 20, 0.35), rgba(165, 101, 52, 0.42));
    mix-blend-mode: multiply;
    z-index: 1;
}

.blockHighlightTiles__text {
    position: relative;
    z-index: 2;
    color: #fff;
    font: 600 4.6rem/1.05 "DM Sans", sans-serif;
    letter-spacing: -0.69px;
}

.blockHighlightTiles__text .highlight {
    color: #D0EAFF;
}

.blockHighlightTiles__link {
    position: absolute;
    inset: 0;
    z-index: 3;
}

@media (max-width: 620px) {
    .blockHighlightTiles__text {
        font-size: 3rem;
    }
}

@media (min-width: 992px) {
    .blockHighlightTiles__grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        height: 520px;
    }

    .blockHighlightTiles__block {
        height: 100%;
    }
}

/* --- Header etap 2: logo, search, konto, koszyk --- */

/* Logo: pozioma wersja, więcej luzu (nie ściskaj go w flexie) */
.header__logo {
    flex-shrink: 0;
}

.header__logo a {
    display: flex !important;
    align-items: center;
    line-height: 0;
}

.header__logo a img {
    width: auto !important;
    height: 28px !important;
    display: block;
}

/* Search: sam obrys/tekst/ikona w kolorze marki, bez wypełnienia tła */
.productSearchBar__field {
    border-color: #06182E !important;
    color: #06182E !important;
    background: transparent !important;
}

.productSearchBar__button svg path {
    fill: #06182E !important;
}

/* Konto: kolor marki, rozjaśnienie na hover */
.header__account-link {
    color: #06182E;
}

.header__account-link svg path {
    fill: #06182E;
}

.header__account-link:hover {
    color: rgba(6, 24, 46, 0.6);
}

.header__account-link:hover svg path {
    fill: rgba(6, 24, 46, 0.6);
}

/* Koszyk: usunięcie kolorowego kółka wokół licznika, sam numerek w kolorze marki */
.header__cart-count {
    background: none !important;
    width: auto !important;
    height: auto !important;
    color: rgba(6, 24, 46, 0.8) !important;
    margin-left: 10px !important;
    margin-right: 70px !important;
}

/* Główny rząd navbara - wysokość 92px na desktopie. Breakpoint 1200px, bo to realny
   próg "mobile" w tym motywie (patrz .header__main / .header__logo / .header__search
   poniżej 1200px w skompilowanym style.css) - nie 991/992px, żeby nie było martwej
   strefy między dwoma niezgodnymi breakpointami. */
@media (min-width: 1201px) {
    .header__main {
        height: 92px;
    }
}

@media (max-width: 1200px) {
    .header__cart-count {
        margin-left: 2px !important;
        margin-right: 8px !important;
    }

    /* Logo mniejsze na mobile, z limitem szerokości - nie zależymy od proporcji pliku */
    .header__logo a img {
        height: 21px !important;
        max-width: 105px !important;
    }

    /* Search nie mieścił się w jednym rzędzie z logo/kontem/hamburgerem (fixed
       position + sztywny top:90px, który nie odpowiadał realnej wysokości nagłówka).
       Zamiast łatać kolejną magiczną liczbę - search dostaje własny, drugi wiersz
       w tym samym flexie, więc nagłówek sam się dopasowuje do zawartości. */
    .header {
        height: auto !important;
    }

    .header__main {
        height: auto !important;
        padding: 12px 0;
    }

    .header__main .header__wrapper {
        flex-wrap: wrap;
        row-gap: 12px;
    }

    .header__search {
        position: static !important;
        top: auto !important;
        order: 3;
        flex-basis: 100%;
        max-width: 100%;
        padding: 0;
    }

    /* Ikonki konta/serca/koszyka nie były w jednej linii z hamburgerem */
    .header__account,
    .header__hamburger {
        align-items: center;
    }

    .header__account-link,
    .header__account-link svg,
    .cartBtnOpen,
    .header__cart {
        display: flex;
        align-items: center;
    }

    .header__account-link--dashboard.logged:after {
        top: 50% !important;
        transform: translateY(-50%);
    }
}

/* Dropdown konta: na mobile otwiera/zamyka się kliknięciem (JS dodaje/zdejmuje .open),
   nie hoverem - hover nie istnieje na dotyku. Patrz assets/js/header-account-dropdown.js */
.header__dropdown-close {
    display: none;
}

@media (max-width: 1200px) {
    .header__account-wrap.open .header__dropdown {
        display: flex !important;
        flex-direction: column;
        position: absolute;
        left: auto;
        right: 0;
        top: 40px;
        width: 260px;
    }

    .header__dropdown-close {
        display: flex;
        align-self: flex-end;
        margin-bottom: 12px;
        cursor: pointer;
    }
}

/* X zamknięcia wewnątrz otwartego mobilnego menu, w stylu istniejących ikon
   zamknięcia w projekcie (np. .header_all-close: goła ikonka SVG, bez tła/obrysu).
   Niezależny od nagłówka, bo hamburger/X w nagłówku nie jest wiarygodnie widoczny
   po otwarciu menu (sticky header + zablokowany scroll). Position:fixed, żeby
   zostawał widoczny przy przewijaniu listy kategorii (.header__category ma overflow:auto). */
.header__category-close {
    display: none;
}

.header__category.open .header__category-close {
    display: block;
    position: fixed;
    top: 16px;
    right: 20px;
    z-index: 100000;
    cursor: pointer;
}

body.admin-bar .header__category.open .header__category-close {
    top: 48px;
}

@media (max-width: 782px) {
    body.admin-bar .header__category.open .header__category-close {
        top: 62px;
    }
}

/* Odstęp sticky headera pod paskiem admina WP (tylko dla zalogowanych z uprawnieniami — body.admin-bar) */
body.admin-bar .header {
    top: 32px;
}

@media (max-width: 782px) {
    body.admin-bar .header {
        top: 46px;
    }
}

/* WP domyślnie przełącza #wpadminbar na position:absolute poniżej 782px
   (przez co scrolluje się razem ze stroną) - wymuszamy fixed na wszystkich
   szerokościach, żeby był sticky tak jak nasz .header. */
#wpadminbar {
    position: fixed !important;
    top: 0 !important;
}

/* --- Navbar dół: etap 3 ---
   "Header Menu" (Pomoc/Kontakt) na razie odpięte w PHP. Header Kategorie
   ma wyglądać jak jedno menu z "Wszystkie produkty": bez odstępu
   space-between, Blog (klasa "push-right") wypychany na sam prawy kraniec,
   "Promocje" (klasa "accent") w kolorze akcentu. Dwie ścieżki renderowania
   (zwykłe header__cat-menu i wariant z customowym mega menu / site-nav)
   wymagają analogicznych reguł. */
@media (min-width: 1201px) {
    .header__category {
        height: 56px;
    }

    .header__wrapper-category {
        justify-content: flex-start;
        gap: 40px;
    }

    .header__cat-menu,
    .site-nav {
        flex: 1 1 auto;
        margin-right: 0;
    }

    .site-nav__list {
        flex: 1 1 auto;
    }

    .header__cat-menu > li.push-right,
    .site-nav__item.push-right {
        margin-left: auto;
    }

    .header__cat-menu > li.accent > a,
    .site-nav__item.accent > .site-nav__link {
        color: var(--primary);
    }
}

/* --- Hero: etap 4 ---
   Zawężenie do szerokości strony, zaokrąglone rogi (na wrapperze, tak jak
   w image-columns - wrapper ma już overflow:hidden z fixu pod placeholder
   CLS/PSI, więc zaokrąglenie tam realnie obcina obrazek i sam placeholder).
   Stała wysokość na desktopie - placeholder (aspect-ratio z fixu CLS) musi
   dostać tę samą wysokość, inaczej się rozjeżdża z obrazkiem. */
.blockImageHero {
    padding: 8px 0;
}

.blockImageHero__wrapper {
    max-width: 1600px;
    padding: 0;
    border-radius: 16px;
}

@media (min-width: 992px) {
    .blockImageHero__wrapper {
        aspect-ratio: unset;
        height: 650px;
    }
}

/* Odstęp od lewej/prawej na mobile (jak w blockHighlightTiles__wrapper).
   Padding dajemy na sekcji .blockImageHero, NIE na .blockImageHero__wrapper -
   ten wrapper ma placeholder pod CLS/PSI (background-color + aspect-ratio),
   więc jego wysokość musi być liczona z tej samej szerokości, jaką realnie
   dostaje (czyli już po zmniejszeniu przez rodzica), inaczej placeholder
   znów się rozjedzie z obrazkiem tak jak wcześniej. */
@media (max-width: 1640px) {
    .blockImageHero {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (max-width: 991px) {
    .blockImageHero {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Sekcja "Kategorie" (block-category-slider): kolor tła kafelka #D0EAFF,
   zaokrąglenie 48px i tymczasowo multiply dla białych teł miniaturek. */
.categorySliderItem__icon {
    background: #D0EAFF;
    border-radius: 48px;
    aspect-ratio: 1 / 1;
    height: auto;
}

.categorySliderItem__icon img {
    mix-blend-mode: multiply;
}

/* Wariant --small (używany w block-fabric) ma własną regułę
   (.categorySliderItem--small .categorySliderItem__icon{height:155px;
   width:100%}) o wyższej specyficzności (2 klasy), która przebijała fix
   aspect-ratio powyżej mimo że jest wcześniej w pliku. Dopasowana tu z tą
   samą specyficznością, więc wygrywa przez kolejność w pliku. */
.categorySliderItem--small .categorySliderItem__icon {
    height: auto;
    aspect-ratio: 1 / 1;
}

/* blockRecommended: promo-karta jako kremowy "tile" pływający NA zdjęciu
   (zamiast koloru pod zdjęciem). Pierwsza karta (card_link, w
   .blockRecommended__content-wrap) - tile przy górze; druga
   (card_link_two, w --content-wrap--second) - tile przy dole, zgodnie
   z Figmą (node 63:540 vs 97:172). Dane ACF bez zmian, tylko styl. */
.blockRecommended .card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 20px;
}

.blockRecommended .card__img {
    position: absolute;
    inset: 0;
}

.blockRecommended .card__tile {
    position: absolute;
    top: 32px;
    left: 32px;
    right: 32px;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 48px;
    /* !important: card_color z ACF wychodzi w PHP jako inline style na tym
       elemencie, więc zewnętrzny CSS inaczej nie ma szans go nadpisać bez
       zmiany szablonu - a design ma teraz jeden stały kolor niezależnie od
       tej wartości. */
    background-color: #FCF9F6 !important;
    border-radius: 20px;
}

.blockRecommended__content-wrap--second .card__tile {
    top: auto;
    bottom: 32px;
}

.blockRecommended .card__tile h4,
.blockRecommended .card__tile p,
.blockRecommended .card:hover .card__tile h4,
.blockRecommended .card:hover .card__tile p {
    color: var(--bg-dark);
}

.blockRecommended .card__tile .btn {
    margin-top: 0;
}

/* Opis pod tytułem "Polecane produkty" miał zbędny padding-left:64px na
   desktopie, przez co wyglądał wcięty względem tytułu. */
.blockRecommended__wysiwyg {
    padding-left: 0 !important;
}

.blockRecommended .card__tile .btn--outline {
    background-color: transparent;
    border: 2px solid var(--bg-dark);
    color: var(--bg-dark);
    border-radius: 68px;
    padding: 14px 34px;
}

/* Block: Banner Card - samodzielny baner ze zdjęciem i kartą, ten sam
   wzór co promo-karta w blockRecommended (node Figma 63:836). */
.blockBannerCard {
    padding: 16px 20px;
}

.blockBannerCard__wrapper {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

.blockBannerCard .card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 20px;
    height: 568px;
}

.blockBannerCard .card__img {
    position: absolute;
    inset: 0;
}

.blockBannerCard .card__img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.blockBannerCard .card__tile {
    position: absolute;
    top: 32px;
    left: 32px;
    right: 32px;
    max-width: 560px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 48px;
    background-color: #FCF9F6;
    border-radius: 20px;
}

.blockBannerCard .card__tile h4,
.blockBannerCard .card__tile p {
    color: var(--bg-dark);
}

.blockBannerCard .card__tile .btn--outline {
    background-color: transparent;
    border: 2px solid var(--bg-dark);
    color: var(--bg-dark);
    border-radius: 68px;
    padding: 14px 34px;
}

/* Mobile: card is no longer position:absolute over the image (desktop
   layout) - image and card become two separate boxes in normal flow, card
   below the image but pulled up slightly (negative margin) so it overlaps
   the bottom edge of the photo. */
@media (max-width: 991px) {
    .blockBannerCard .card {
        height: auto;
        display: block;
        overflow: visible;
        border-radius: 0;
    }

    .blockBannerCard .card__img {
        position: relative;
        aspect-ratio: 3 / 2;
        border-radius: 20px;
        overflow: hidden;
    }

    .blockBannerCard .card__tile {
        position: relative;
        top: auto;
        left: 0;
        right: 0;
        z-index: 1;
        margin-top: -48px;
        max-width: none;
        padding: 32px 24px;
    }
}

/* Topbar: "Napisz do nas" - był niebieski hiperlink, przyciągał zbyt dużo
   uwagi jak na drugoplanową akcję w top barze - kolor biały jak reszta tekstu */
.header__write-us {
    color: var(--white);
}

/* --- Block: FAQ ---
   Click-to-expand on both desktop and mobile, via the .open class toggled
   by faq-accordion.js on tap/click - no hover expansion.
   Smooth expand/collapse via grid-template-rows (0fr -> 1fr) instead of
   max-height, so it animates correctly regardless of answer length. */
.blockFaq {
    padding: 40px 0;
}

@media (max-width: 1640px) {
    .blockFaq {
        padding-left: 20px;
        padding-right: 20px;
    }
}

.blockFaq__wrapper {
    max-width: 1600px;
    margin: 0 auto;
}

.blockFaq__heading {
    font: 700 3rem/3.8rem "DM Sans", sans-serif;
    color: var(--bg-dark);
    margin: 0 0 8px;
}

.blockFaq__description {
    font: 400 1.6rem/2.4rem "DM Sans", sans-serif;
    color: var(--gray-700);
    margin: 0 0 32px;
}

.blockFaq__description p {
    margin: 0;
}

.blockFaq__list {
    display: flex;
    flex-direction: column;
}

.faqItem {
    border-bottom: 1px solid var(--gray-200);
}

.faqItem__question {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: 700 1.8rem/2.6rem "DM Sans", sans-serif;
    color: var(--bg-dark);
}

.faqItem__chevron {
    flex-shrink: 0;
    color: var(--bg-dark);
    transition: transform 250ms ease;
}

.faqItem__answer {
    display: grid;
    grid-template-rows: 0fr;
    overflow: hidden;
    transition: grid-template-rows 250ms ease;
}

.faqItem__answerInner {
    overflow: hidden;
    min-height: 0;
}

.faqItem__answerInner p {
    padding-bottom: 24px;
    margin: 0;
    font: 400 1.6rem/2.4rem "DM Sans", sans-serif;
    color: var(--gray-700);
}

.faqItem.open .faqItem__answer {
    grid-template-rows: 1fr;
}

.faqItem.open .faqItem__chevron {
    transform: rotate(180deg);
}
/* Keep top-level Gutenberg paragraphs aligned with the page content grid. */
.page .pageWrapper > p,
.page .pageWrapper > ul,
.page .pageWrapper > ol {
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 1640px) {
    .page .pageWrapper > p,
    .page .pageWrapper > ul,
    .page .pageWrapper > ol {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Block: Opinie (TrustMate) - hand-compiled here too, source lives at
   includes/blocks/block-trustmate-reviews/_style.scss (see note above
   about the SCSS build not working on this checkout). */
:root {
    --cream: #fcf9f6;
}

.blockTrustmateReviews {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 64px auto;
    padding: 0 20px;
}

.blockTrustmateReviews--preview {
    margin: 24px auto;
}

.blockTrustmateReviews__wrapper {
    position: relative;
}

.blockTrustmateReviews__heading {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-bottom: 42px;
}

.blockTrustmateReviews__heading h2 {
    margin: 0;
    font: 700 4.8rem/1.2 "DM Sans", sans-serif;
    color: var(--gray-900);
    letter-spacing: -0.02em;
}

@media (max-width: 991px) {
    .blockTrustmateReviews__heading h2 {
        font-size: 3.2rem;
    }
}

.blockTrustmateReviews__rating {
    display: flex;
    align-items: center;
    gap: 12px;
}

.blockTrustmateReviews__stars {
    position: relative;
    display: inline-block;
    font-size: 2.4rem;
    line-height: 1;
    letter-spacing: 2px;
}

.blockTrustmateReviews__stars-bg,
.blockTrustmateReviews__stars-fg {
    display: block;
    white-space: nowrap;
}

.blockTrustmateReviews__stars-bg {
    color: var(--gray-200);
}

.blockTrustmateReviews__stars-fg {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    color: var(--gray-900);
}

.blockTrustmateReviews__ratingText {
    font: 400 1.6rem/1.35 "Outfit", sans-serif;
    color: var(--gray-900);
    letter-spacing: -0.02em;
}

/* True Pinterest-style masonry (independent column heights, tight
   packing, no gaps) needs JS: CSS multi-column packs whole columns
   top-to-bottom first (breaks 1 2 3 4 / 5 6 7 8 reading order), and CSS
   Grid syncs row height to the tallest cell in that row (loses the
   uneven-height packed look). trustmate-reviews.js absolutely positions
   each card, assigning card index i to column (i % columns) - keeps
   cards in date order left-to-right while columns still stack tightly.
   --columns is read from computed style by the JS; this stays the only
   place the breakpoint -> column count mapping is defined. */
.blockTrustmateReviews__grid {
    position: relative;
    --columns: 4;
}

@media (max-width: 1200px) {
    .blockTrustmateReviews__grid {
        --columns: 3;
    }
}

@media (max-width: 991px) {
    .blockTrustmateReviews__grid {
        --columns: 2;
    }
}

@media (max-width: 767px) {
    .blockTrustmateReviews__grid {
        --columns: 1;
        display: flex;
        gap: 16px;
        margin: 0 -20px;
        padding: 0 20px 12px;
        overflow-x: auto;
        scroll-padding-left: 20px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .blockTrustmateReviews__grid::-webkit-scrollbar {
        display: none;
    }
}

.blockTrustmateReviews__card {
    box-sizing: border-box;
    width: 100%;
    background: var(--cream);
    border-radius: 12px;
    overflow: hidden;
    /* Fallback before JS positions cards (or if JS is disabled): plain
       stacked column, not masonry-packed, but not broken either. */
    margin-bottom: 20px;
}

.blockTrustmateReviews__card.is-hidden {
    display: none;
}

@media (max-width: 767px) {
    .blockTrustmateReviews__card {
        flex: 0 0 min(84vw, 360px);
        margin-bottom: 0;
        scroll-snap-align: start;
    }
}

/* Once trustmate-reviews.js has measured and positioned the cards, it
   adds .is-masonry and switches them to absolute (top/left/width set
   inline per card). */
.blockTrustmateReviews__grid.is-masonry .blockTrustmateReviews__card {
    position: absolute;
    top: 0;
    left: 0;
    margin-bottom: 0;
}

.blockTrustmateReviews__media {
    width: 100%;
    height: 320px;
}

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

.blockTrustmateReviews__video {
    background: var(--gray-200);
}

.blockTrustmateReviews__cardBody {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px;
}

.blockTrustmateReviews__badge {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font: 400 1.4rem/1.25 "DM Sans", sans-serif;
    letter-spacing: -0.02em;
}

.blockTrustmateReviews__badge svg {
    flex-shrink: 0;
}

.blockTrustmateReviews__text {
    margin: 0;
    color: #360f14;
    font: 400 1.4rem/1.25 "DM Sans", sans-serif;
    letter-spacing: -0.02em;
}

.blockTrustmateReviews__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: #af9fa1;
    font: 400 1.4rem/1.25 "DM Sans", sans-serif;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

/* Globalny komunikat osadzony w istniejącym pasku nagłówka. */
.header__top--has-notice {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header__top--has-notice .header__wrapper {
    gap: 24px;
}

.siteTopbar {
    min-width: 0;
    flex: 1;
    color: var(--white);
}

.siteTopbar__inner {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.siteTopbar__content {
    min-width: 0;
    overflow: hidden;
    text-align: center;
    font-size: 14px;
    line-height: 20px;
}

.siteTopbar__content > * {
    overflow: hidden;
    margin: 0;
    color: inherit;
    font: inherit;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.siteTopbar__content a {
    color: inherit;
    text-decoration: underline;
}

.header-login {
    height: auto;
    min-height: 112px;
}

.header-login__wrapper {
    height: 112px;
}

.header {
    top: var(--site-topbar-height, 0px);
}

body.admin-bar .header__top--has-notice {
    top: 32px;
}

body.admin-bar .header {
    top: calc(32px + var(--site-topbar-height, 0px));
}

/* Enlarged fabric preview for the fabric swatches product configurator. */
.fabricSwatchTooltip {
    position: fixed;
    z-index: 10002;
    width: min(300px, calc(100vw - 24px));
    aspect-ratio: 1;
    visibility: hidden;
    opacity: 0;
    border: 8px solid var(--white);
    border-radius: 4px;
    background-color: var(--gray-100);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 0 12px 36px rgba(16, 24, 40, 0.24);
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

.fabricSwatchTooltip.is-visible {
    visibility: visible;
    opacity: 1;
}

@media (max-width: 782px) {
    body.admin-bar .header {
        top: calc(46px + var(--site-topbar-height, 0px));
    }
}