/* =========================================================
   OPLEX GOLD – OEM PREMIUM KAFELKI (CSS OD ZERA)
   Styl: jasny katalog + złoty akcent premium
   ========================================================= */

/* --- Layout --- */
.tmcms1block {
    display: flex;
    gap: 28px;
}

@media (max-width: 991px) {
    .tmcms1block {
        flex-direction: column;
    }
}

/* --- KAFEL --- */
.tmcms1block .cms_content {
    background: #ffffff;
    border-radius: 20px;
    padding: 18px;

    border: 2px solid #ededed;

    box-shadow:
        0 10px 24px rgba(0,0,0,0.08);

    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease,
        transform 0.35s ease;
}

/* Hover – złota ramka premium */
.tmcms1block .cms_content:hover {
    border-color: #ffb81c;
    box-shadow:
        0 18px 45px rgba(0,0,0,0.20);
    transform: translateY(-3px);
}

/* --- STREFA OBRAZU --- */
.tmcms1block .cms_img {
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Obraz – czysto, bez kadrowania */
.tmcms1block .cms_img img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* --- TEKST POD OBRAZEM --- */
.tmcms1block .cms-block {
    position: static;
    margin-top: 16px;
    text-align: center;
}

/* Nazwa kategorii – GOLD OPLEX */
.tmcms1block .cms_offer a {
    display: inline-block;

    font-family: "Poppins", "Montserrat", Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;

    color: #1a1a1a;
    text-decoration: none;

    padding-bottom: 6px;
    position: relative;

    transition: color 0.3s ease;
}

/* Złota linia pod tekstem */
.tmcms1block .cms_offer a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0;
    height: 2px;

    background: linear-gradient(
        90deg,
        #ffb81c,
        #f5c46b
    );

    transform: translateX(-50%);
    transition: width 0.35s ease;
}

/* Hover tekstu */
.tmcms1block .cms_content:hover .cms_offer a {
    color: #ffb81c;
}

/* Animacja złotej linii */
.tmcms1block .cms_content:hover .cms_offer a::after {
    width: 70%;
}