/* ==================================================
   1. ZMIENNE GLOBALNE (KOLORY)
================================================== */
:root {
  --main-green: #2f5d44;        /* tło */
  --button-green: #254a36;     /* przyciski */
  --button-hover: #1f3f2e;     /* hover przycisków */
  --green-hover: #3f7a5c;      /* hover linków / tabów */

  --text-light: #d7ebd1;
  --text-hover: #bfe6b5;
  --text-dark: #232323;
}

/* ==================================================
   2. GLOBALNE LINKI I IKONY
================================================== */
a {
  transition: color .2s ease, opacity .2s ease;
}

a:hover {
  color: var(--text-hover);
  opacity: .85;
  text-decoration: none;
}

.material-icons {
  color: inherit;
  transition: color .2s ease, opacity .2s ease;
}

a:hover .material-icons,
.material-icons:hover {
  color: var(--text-hover) !important;
}

/* ==================================================
   3. HEADER
================================================== */
#header .header-nav {
  background: var(--main-green) !important;
}

#header .header-nav,
#header .header-nav a,
#header .header-nav span,
#header .header-nav i {
  color: var(--text-light) !important;
}

/* koszyk */
#header .blockcart {
  background: var(--button-green) !important;
}

#header .blockcart:hover {
  background: var(--button-hover) !important;
}

/* ==================================================
   4. MENU GŁÓWNE
================================================== */
#header .top-menu a[data-depth="0"] {
  color: var(--text-dark) !important;
  font-weight: 600;
}

#header .top-menu a[data-depth="0"]:hover {
  color: var(--green-hover) !important;
}

/* dropdown */
#header .dropdown-menu {
  background: #fff;
  border: none;
}

#header .dropdown-item {
  color: var(--text-dark) !important;
}

#header .dropdown-item:hover {
  background: rgba(0,0,0,.05);
  color: var(--green-hover) !important;
}

/* ==================================================
   5. BREADCRUMB + SUBCATEGORIES – OFF
================================================== */
.breadcrumb,
#subcategories {
  display: none !important;
}

/* ==================================================
   6. FOOTER – CAŁOŚĆ
================================================== */
#footer,
#footer .footer-container {
  background-color: var(--main-green) !important;
}

#footer * {
  color: var(--text-light) !important;
}

#footer a:hover {
  color: var(--text-hover) !important;
}

/* ==================================================
   FOOTER MOBILE – ROZWIJANE SEKCJE (FIX BIAŁEGO TŁA)
================================================== */
#footer .collapse,
#footer .collapsing,
#footer .footer-block-content {
  background-color: var(--main-green) !important;
}

#footer .collapse *,
#footer .footer-block-content * {
  background-color: transparent !important;
  color: var(--text-light) !important;
}

#footer [style*="background"] {
  background-color: var(--main-green) !important;
}

/* ==================================================
   7. FOOTER – SOCIAL MEDIA (NAPRAWA IKON)
================================================== */
#footer .block-social ul li {
  background-color: transparent !important;
  background-size: 70% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

#footer .block-social ul li:hover {
  background-color: rgba(255,255,255,0.08) !important;
  border-radius: 4px;
}

#footer .block-social ul li a {
  color: transparent !important;
}

/* ==================================================
   8. NEWSLETTER
================================================== */
#footer .block_newsletter .btn-primary {
  background: var(--button-green) !important;
}

#footer .block_newsletter .btn-primary:hover {
  background: var(--button-hover) !important;
}

/* ==================================================
   9. BLOCK CATEGORY
================================================== */
.block-category,
.block-categories {
  background: var(--main-green) !important;
  box-shadow: none !important;
}

.block-category *,
.block-categories * {
  color: var(--text-light) !important;
}

/* ==================================================
   10. SEARCH FILTERS
================================================== */
#search_filters_wrapper,
#search_filters,
#search_filters .facet {
  background: var(--main-green) !important;
}

#search_filters * {
  color: var(--text-light) !important;
}

/* ==================================================
   11. SLIDER – STRZAŁKI
================================================== */
.carousel .carousel-control i {
  color: var(--text-light) !important;
}

.carousel .carousel-control:hover i {
  color: var(--text-hover) !important;
}

/* ==================================================
   12. MODALE – TŁO
================================================== */
.modal-content {
  background: var(--main-green) !important;
  color: var(--text-light) !important;
  border: none;
  box-shadow: none;
}

.modal-title,
.modal-body,
.modal-body p {
  color: var(--text-light) !important;
}

/* ==================================================
   13. PRZYCISKI – CIEMNIEJSZE NIŻ TŁO
================================================== */
.btn,
.btn-primary,
.btn-secondary,
button.add-to-cart,
input[type="submit"] {
  background: var(--button-green) !important;
  border-color: var(--button-green) !important;
  color: var(--text-light) !important;
}

.btn:hover,
button.add-to-cart:hover,
input[type="submit"]:hover {
  background: var(--button-hover) !important;
  border-color: var(--button-hover) !important;
  color: var(--text-hover) !important;
}

/* ==================================================
   14. WISHLIST – BIAŁE TŁO + CZERWONE SERCE
================================================== */
button.wishlist-button-add {
  background-color: #ffffff !important;
  border: none !important;
  padding: 6px 8px;
  border-radius: 4px;
}

button.wishlist-button-add i.material-icons {
  color: #c0392b !important;
}

button.wishlist-button-add:hover {
  background-color: #f5f5f5 !important;
}

button.wishlist-button-add:hover i.material-icons {
  color: #e74c3c !important;
}

/* ==================================================
   15. QUICK VIEW – CZARNY JAK CENA
================================================== */
a.quick-view,
a.quick-view i.material-icons {
  color: var(--text-dark) !important;
}

a.quick-view:hover,
a.quick-view:hover i.material-icons {
  color: #000 !important;
  opacity: 0.85;
}

/* ==================================================
   16. NAZWY I CENY PRODUKTÓW – BEZ NIEBIESKIEGO
================================================== */
.product-name,
.product-price,
.current-price,
.current-price-value {
  color: var(--text-dark) !important;
}

/* ==================================================
   17. MINIATURY PRODUKTU – OBRAMOWANIE
================================================== */
.thumb,
.js-modal-thumb {
  border: 1px solid var(--main-green) !important;
}

.thumb:hover,
.js-modal-thumb:hover {
  border-color: var(--green-hover) !important;
}

.thumb.active,
.js-modal-thumb.active {
  border-color: var(--green-hover) !important;
  box-shadow: 0 0 0 2px rgba(47,93,68,.3) !important;
}

/* ==================================================
   18. PAGINACJA
================================================== */
.pagination a,
.pagination span {
  color: var(--main-green) !important;
}

.pagination a:hover {
  color: var(--green-hover) !important;
}

/* ==================================================
   19. TABS PRODUKTU – ZIELONE PODKREŚLENIE (STABILNE)
================================================== */
.tabs .nav-tabs .nav-link {
  color: var(--text-dark) !important;
  position: relative;
  border: none !important;
}

.tabs .nav-tabs .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0;
  height: 3px;
  background-color: var(--green-hover);
  transition: width 0.25s ease;
}

.tabs .nav-tabs .nav-link:hover {
  color: var(--green-hover) !important;
}

.tabs .nav-tabs .nav-link:hover::after,
.tabs .nav-tabs .nav-link.active::after {
  width: 100%;
}

.tabs .nav-tabs .nav-link.active {
  color: var(--green-hover) !important;
}

/* ==================================================
   20. FOOTER AFTER
================================================== */
.footer-after {
  background: #fff !important;
  color: #1e1e1e;
  text-align: center;
  padding: 10px 0;
}
/* ==================================================
   FIX: NEWSLETTER – BIAŁE TŁO PO KOMPILACJI
================================================== */

/* kontener newslettera */
#footer .block_newsletter,
.footer-container .block_newsletter {
  background-color: var(--main-green) !important;
}

/* wnętrze (formularz, inputy) */
#footer .block_newsletter *,
.footer-container .block_newsletter * {
  background-color: transparent !important;
  color: var(--text-light) !important;
}

/* input email */
#footer .block_newsletter input[type="email"] {
  background-color: #ffffff !important;
  color: var(--text-dark) !important;
  border: none !important;
}

/* placeholder */
#footer .block_newsletter input::placeholder {
  color: #666 !important;
}

/* przycisk */
#footer .block_newsletter button,
#footer .block_newsletter .btn {
  background-color: var(--button-green) !important;
  color: var(--text-light) !important;
}

#footer .block_newsletter button:hover,
#footer .block_newsletter .btn:hover {
  background-color: var(--button-hover) !important;
}
/* ==================================================
   FIX: MODAL DODANIA DO KOSZYKA – BIAŁE TŁO PO KOMPILACJI
================================================== */

/* header */
#blockcart-modal .modal-header {
  background-color: var(--main-green) !important;
  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
}

/* body */
#blockcart-modal .modal-body, .product-total  {
  background-color: var(--main-green) !important;
  color: var(--text-light) !important;
}


/* ==================================================
   GALERIA – UKŁAD SYMETRYCZNY (WCZORAJSZA WERSJA)
================================================== */

.gallery {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  margin: 30px 0;
}

.gallery img {
  max-width: 80%;
  height: auto;
  object-fit: cover;
  border-radius: 6px;
}

/* środkowe zdjęcie większe */
.gallery img:nth-child(2) {
  max-width: 40%;
}

.gallery img:nth-child(1),
.gallery img:nth-child(3) {
  max-width: 28%;
}

/* mobile */
@media (max-width: 768px) {
  .gallery {
    flex-direction: column;
  }

  .gallery img {
    max-width: 100%;
  }
}
<style>
    .btn-pdf {
        display: inline-block;
        padding: 12px 20px;
        background-color: #8b5a2b; /* miodowy klasyk */
        color: #ffffff;
        text-decoration: none;
        font-weight: bold;
        border-radius: 6px;
    }

    .btn-pdf:hover {
        background-color: #6f4521;
    }
</style>
.matki-box {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.matki-img {
    flex: 0 0 311px;
}

.matki-img img {
    max-width: 100%;
    height: auto;
    display: block;
}

.matki-text {
    flex: 1;
}