/* norwitcatbanner — styl banerka spójny z blokiem "showcase" strony głównej
   (norwithomepage .nhp-sb-block). Zmienne --nhp-* żyją tylko na home, więc
   wartości wpisane wprost. Norwit, PS 8.2. */

.product_list .ncb-item {
    list-style: none;
    min-width: 0;
    display: flex;
    float: none;
    clear: both;
    box-sizing: border-box;
    /* Kafelki produktów mają .product-miniature{padding:10px} — box banera
       wsunięty o tyle samo, żeby krawędzie zgrały się z zawartością kafelków. */
    padding: 10px;
}

.product_list.grid .ncb-full {
    grid-column: 1 / -1;
}

.ncb-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 12px;
    width: 100%;
    min-height: 210px;
    padding: 44px 48px;
    background: #16150f;
    border-radius: 20px;
    overflow: hidden;
    /* Pierwsza warstwa = pierścień obrysu (na starcie przezroczysty). Ta sama liczba
       warstw co w stanie hover, żeby box-shadow animował się płynnie. */
    box-shadow:
        0 0 0 2px rgba(255, 192, 9, 0),
        0 24px 60px rgba(22, 21, 15, .3),
        0 8px 20px rgba(22, 21, 15, .18),
        inset 0 1px 0 rgba(255, 255, 255, .08);
    transition: box-shadow .25s ease;
}

/* Żółty obrys na hover — jak na kafelkach produktów na stronie głównej. */
.ncb-item:hover .ncb-card {
    box-shadow:
        0 0 0 2px rgba(255, 192, 9, 1),
        0 24px 60px rgba(22, 21, 15, .3),
        0 8px 20px rgba(22, 21, 15, .18),
        inset 0 1px 0 rgba(255, 255, 255, .08);
}

.ncb-bgimg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.85);
    z-index: 0;
    pointer-events: none;
}

/* Równomierna ciemna nakładka na całą grafikę + mocny cień pod napisami. */
.ncb-has-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(22, 21, 15, .72);
    pointer-events: none;
}

.ncb-has-bg .ncb-title {
    text-shadow: 0 1px 2px rgba(0, 0, 0, .95), 0 3px 10px rgba(0, 0, 0, .9), 0 6px 30px rgba(0, 0, 0, .75);
}

.ncb-has-bg .ncb-text {
    text-shadow: 0 1px 3px rgba(0, 0, 0, .95), 0 2px 14px rgba(0, 0, 0, .85);
}

.ncb-card > .ncb-title,
.ncb-card > .ncb-text,
.ncb-card > .ncb-btn {
    position: relative;
    z-index: 2;
}

/* Znak wodny "N" jak w bloku doradcy na stronie głównej (.nhp-adv-mark). */
.ncb-mark {
    position: absolute;
    right: -60px;
    bottom: -70px;
    width: 340px;
    height: auto;
    opacity: .22;
    filter: invert(1);
    pointer-events: none;
    z-index: 1;
}

@media (max-width: 575px) {
    .ncb-mark {
        display: none;
    }
}

.ncb-title {
    margin: 0;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: #fafaf7;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

.ncb-title::after {
    content: "";
    display: block;
    width: 48px;
    height: 4px;
    margin: 16px auto 0;
    background: linear-gradient(90deg, #ffd75e 0%, #ffc009 100%);
    border-radius: 2px;
}

.ncb-hl {
    color: #ffc009;
    background: linear-gradient(180deg, #ffe486 0%, #ffcb33 50%, #ffc009 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Bez cienia: dziedziczony text-shadow tytułu zamienia gradientowe litery na czarne. */
    text-shadow: none;
}

/* Cień żółtego słowa robiony na owijce (nie na tekście z gradientem) — jak biel. */
.ncb-has-bg .ncb-hl-wrap {
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .95)) drop-shadow(0 3px 10px rgba(0, 0, 0, .55));
}

.ncb-text {
    margin: 0;
    max-width: 620px;
    font-size: 15px;
    line-height: 1.55;
    color: #cfcdc2;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.ncb-btn {
    display: inline-block;
    margin-top: 6px;
    padding: 12px 28px;
    border-radius: 999px;
    background: linear-gradient(180deg, #ffd84d 0%, #ffc009 50%, #e5a900 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        inset 0 -2px 4px rgba(140, 90, 0, .25),
        0 2px 6px rgba(22, 21, 15, .25);
    color: #16150f;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: filter .2s ease;
}

.ncb-btn:hover,
.ncb-btn:focus {
    filter: brightness(1.04);
    color: #16150f;
    text-decoration: none;
}

/* Tryb kafelka (wąski slot): mniejsze odstępy i tytuł, żeby się zmieścił. */
.ncb-item:not(.ncb-full) .ncb-card {
    padding: 28px 22px;
}

.ncb-item:not(.ncb-full) .ncb-title {
    font-size: 21px;
}

@media (max-width: 575px) {
    /* Kafelki produktów na mobile nie mają wcięcia bocznego — banerek też nie;
       większy odstęp od dołu. */
    .product_list .ncb-item {
        padding: 8px 0 0;
        margin-bottom: 26px;
    }

    .ncb-card {
        min-height: 160px;
        padding: 32px 24px;
    }

    .ncb-title {
        font-size: 23px;
    }
}