:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-orange: #fd7e14;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-teal: #20c997;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray-dark: #343a40;
    --bs-gray-100: #f8f9fa;
    --bs-gray-200: #e9ecef;
    --bs-gray-300: #dee2e6;
    --bs-gray-700: #495057;
    --bs-gray-800: #343a40;
    --bs-gray-900: #212529;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
    
    --bs-body-bg: #ffffff;
    --bs-gray: #6c757d;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-success: #00c853;
    --bs-success-lighter: #00d057;
    --bs-info: #0076FF;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
}


:root {
    --bs-primary: #0d6efd; 
    --bs-primary-bg: #ffffff; 
    --bs-primary-text: #212529;
    --bs-secondary-bg: #eeeeee; 
    --bs-secondary-text: #212529; 
    --bs-accent: #07c152; 
    --bs-footer-bg: #ffffff; 
    --bs-footer-text: #212529; 
    
    --bs-preloader-second: #f21559; 
    --heading-prices-choose: #d63384;
    --bs-delete-lighter: #ff5e85;
    
    --bs-primary-lighter: #6AA4FF;
    --bs-primary-darker: #004CCB;
    --bs-secondary-lighter: #eeeeee;
    --bs-secondary-darker: #eee;
    --bs-primary-bg-lighter: #ffffff;
    --bs-primary-bg-darker: #f9f8fa;
    --bs-secondary-bg-lighter: #fff;
    --bs-secondary-bg-darker: #15161b;
    --bs-success-lighter: #00d057;
    --bs-accent-lighter: #00d057;
    --bs-gray: #6c757d;
    --bs-gray-400: #ced4da;
    --bs-gray-500: #adb5bd;
    --bs-gray-600: #6c757d;
    --bs-success: #00c853;
    --bs-info: #0076FF;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: #212529;
    
    --bs-body-color: #212529;
    --ip-btn-primary-background: #0d6efd;
    --ip-btn-primary-text: #ffffff;
    --ip-radio-primary-background: #ffffff;
    --ip-radio-primary-text: #212529;
    --ip-radio-primary-border: #0d6efd;
    --ip-radio-checked-background: #0d6efd;
    --ip-radio-checked-text: #ffffff;
    --ip-prices-chosen-background: #f9f8fa;
    --ip-prices-btn-color-text: #ffffff;
    --ip-prices-btn-secondary-background: #00d057;
    --ip-modal-primary-background: #ffffff;
    
    --ip-header-main-bg: #ffffff; 
    --ip-product-icons-text-color: #212529;
    --ip-header-menu-text-color: #6c757d;
    --ip-header-menu-text-color-active: #0d6efd;
    --ip-product-tab-list-nav-link-color: #212529;
    --ip-product-tab-list-nav-link-color-active: #0d6efd;
    --ip-btn-outlined-background: #ffffff;
    --ip-btn-outlined-text: #0d6efd;
    --ip-btn-outlined-secondary-background: #ffffff;
    --ip-btn-outlined-secondary-text: #0d6efd;
    --ip-product-icons-background-color: #ffffff;
    --ip-banner-text: #212529;
    --ip-input-text: #212529; 
    --ip-input-background: #ffffff; 
    --ip-carousel-button-color: #0d6efd;
    --ip-border-radius-boxes: 8px;
    --ip-border-radius-buttons: 50px;
    --ip-border-radius-inputs: 16px;
    --ip-box-shadow-boxes: 0 3px 24px rgba(0, 0, 0, .09);
    --page-max-width: 1200px; 
    --base-font-size: 16px; 
    --base-font-family: 'Arial', sans-serif; 
    --heading-font-family: 'Roboto', sans-serif; 
    --product-box-size: 250px; 


    
    --ip-icon-primary-1: #7f6eff;
    --ip-icon-primary-2: #7e37ff;
    --ip-icon-primary-3: #7c00ff;
    --ip-icon-primary-4: #6120de;
    --ip-icon-primary-5: #4300c4;

    --ip-icon-primary-accent: #f5a8f5;

    --ip-icon-secondary-1: #fff;
    --ip-icon-secondary-2: #f3f3f3;
    --ip-icon-secondary-3: #e9e9e9;
    --ip-icon-secondary-4: #e4e4e4;
    --ip-icon-secondary-5: #ccc;

    --ip-icon-eco-1: #f4e3d3;
    --ip-icon-eco-2: #f4e0ce;
    --ip-icon-eco-3: #dbccbd;

    --ip-icon-darkest: #3a3a3a;
}


/* ──────────────────────────────────────────────────────────────────────────────
   1) ZMIENNE MOTYWU (Bootstrap)
   — Nadpisujemy zmienne Bootstrapowe, aby primary = Twoja zieleń
───────────────────────────────────────────────────────────────────────────────*/
:root {
  --bs-primary: #95c22b !important;
  --bs-primary-lighter: #7ea523 !important;
  --bs-primary-darker: #7ea523 !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
   2) STYL AKTYWNEJ ZAKŁADKI W KOSZYKU (#buttonBar)
   — Czarne ikony, usuwa Bootstrapowe podkreślenie, zielona linia podkreślenia
───────────────────────────────────────────────────────────────────────────────*/
#buttonBar a.active,
#buttonBar a.active p,
#buttonBar a.active svg path {
  color: #000         !important;
  fill: currentColor  !important;
  box-shadow: none    !important;
}
#buttonBar .active-line {
  background-color: #95c22b !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
   3) PRZYCISKI .btn-primary
   — Zielone tło, biały tekst, bez cienia i obrysu
───────────────────────────────────────────────────────────────────────────────*/
.btn-primary,
button.btn-primary {
  background-color: #95c22b !important;
  border-color:     #95c22b !important;
  color:            #fff     !important;
  box-shadow:       none     !important;
  outline:          none     !important;
}
.btn-primary:hover,
button.btn-primary:hover,
.btn-primary:focus,
button.btn-primary:focus {
  background-color: #7ea523 !important;
  border-color:     #7ea523 !important;
}
.btn-primary:active,
button.btn-primary:active {
  background-color: #6a8e1e !important;
  border-color:     #6a8e1e !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
   4) GÓRNY PASEK (Nawigacja + Header)
   — Zielone tło, ukrycie niechcianych logo FB & SmartPrint, przesunięcie logo
───────────────────────────────────────────────────────────────────────────────*/
.nav.nav-pills.w-100.align-items-center.justify-content-end {
  background-color: #95c22b !important;
}
#headerMain {
  background-color: #95c22b !important;
}
/* ukrycie Facebook i SmartPrint */
img[src*="Facebook_Logo.png"],
a[href*="uruchom_smarta"] {
  display: none !important;
}
.desktopLogo.nav-item {
  margin-left: 0 !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
   5) LINKI I TEKST „INFO”
   — Wszystkie drobne linki, teksty .ip-text-info i svg na czarno
───────────────────────────────────────────────────────────────────────────────*/
.ip-text-info,
.ip-svg-primary-path-fill,
.navbar-nav a,
.btn.ip-btn-outlined-border-secondary,
.btn.ip-btn-outlined-secondary,
.cartPriceSummary span,
span.ng-binding.ng-scope {
  color: black !important;
  fill:  black !important;
}
path[fill="#0076ff"] {
  fill: black !important;
}
.ip-svg-primary-path-stroke path {
  stroke: #95c22b !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
   6) PRZYCISKI SPECYFICZNE IP (.ip-btn-primary)
   — Zielone tło, białe ikony i tekst
───────────────────────────────────────────────────────────────────────────────*/
.btn.ip-btn-primary {
  background-color: #95c22b !important;
  border-color:     #95c22b !important;
  color:            #fff     !important;
}
.btn.ip-btn-primary:hover {
  background-color: #7ea523 !important;
}
.btn.ip-btn-primary svg path,
.btn.ip-btn-primary i {
  fill:  white !important;
  color: white !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
   7) PRZYCISK KOSZYKA (.cart-btn)
   — Okrągły biały przycisk z czarną ikoną i ceną
───────────────────────────────────────────────────────────────────────────────*/
.cart-btn {
  background-color: white   !important;
  border:           1px solid #ccc !important;
  color:            black   !important;
  font-size:        16px    !important;
  padding:          10px 15px !important;
  border-radius:    50px    !important;
  height:           46px    !important;
  display:          flex    !important;
  align-items:      center  !important;
  justify-content:  center  !important;
  gap:              10px    !important;
  min-width:        130px   !important;
}
.cart-btn svg {
  width: 22px !important;
  height:22px !important;
}
.cart-btn svg path {
  fill: black !important;
}
.cart-btn:hover {
  background-color: #f8f9fa !important;
  border-color:     #bbb     !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
   8) PASKI PRZED NAGŁÓWKAMI (.before-line)
   — Zielone kreski dekoracyjne
───────────────────────────────────────────────────────────────────────────────*/
.before-line::before {
  background-color: #95c22b !important;
  border-color:     #95c22b !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
   9) AKORDEON „o_nas”
   — Zielona ramka i zaokrąglenia dla elementów accordion
───────────────────────────────────────────────────────────────────────────────*/
#o_nas .accordion-item {
  border:        2px solid #95c22b !important;
  border-radius: 5px           !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  10) PRZYCISK „Dodaj do koszyka” (.addToCart)
  — Zielone tło, białe ikony, ciemniejszy zielony na hover
───────────────────────────────────────────────────────────────────────────────*/
.addToCart {
  background-color: #95c22b !important;
  border-color:     #95c22b !important;
  color:            #fff     !important;
}
.addToCart svg path {
  fill: #fff !important;
}
.addToCart:hover {
  background-color: #7fa823 !important;
  border-color:     #7fa823 !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  11) PRZYCISK OTWIERANIA UPLOADERA (.openUploaderButton)
  — Biała ramka, zielony tekst i tło na hover
───────────────────────────────────────────────────────────────────────────────*/
.openUploaderButton {
  border: 2px solid #95c22b !important;
  color:  #95c22b !important;
  background: #fff !important;
  transition: all 0.3s ease-in-out;
}
.openUploaderButton:hover {
  background-color: #95c22b !important;
  color:            #fff     !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  12) <strong> i ikony .bi-caret
  — Ważne wyróżnienia na zielono
───────────────────────────────────────────────────────────────────────────────*/
strong,
i.bi.bi-caret-right-fill {
  color: #95c22b !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  13) SEKCJA KONTAKTOWA (.contact-wrap)
  — Centrowanie ikon i tekstu, max-width, styl ikon
───────────────────────────────────────────────────────────────────────────────*/
.contact-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  max-width:      600px;
  margin:         auto;
}
.contact-wrap svg {
  fill:         #95c22b;
  width:        18px;
  height:       18px;
  margin-right: 6px;
}
.email-icon a {
  color:      #333 !important;
  font-weight: 500;
}
.tel-icon {
  font-size:   24px;
  font-weight: 700;
  color:       #000;
}

/* ──────────────────────────────────────────────────────────────────────────────
  14) STANDARDOWE PRZYCISKI IP (.ip-btn-standard)
  — Zielone tło, biały tekst, zaokrąglenia
───────────────────────────────────────────────────────────────────────────────*/
.btn.ip-btn-standard {
  background-color: #95c22b !important;
  color:            white   !important;
  font-weight:      600     !important;
  padding:          12px 20px;
  border-radius:    30px;
  text-align:       center;
}

/* ──────────────────────────────────────────────────────────────────────────────
  15) RADIO BUTTONS (.radio-wrap-label)
  — Zielone obramowania, zaznaczenie zielone tło/biały tekst
───────────────────────────────────────────────────────────────────────────────*/
.radio-wrap-label {
  border: 2px solid #95c22b !important;
}
.radio-wrap-label.radio-checked {
  background-color: #95c22b !important;
  color:            white   !important;
}
.radio-wrap-label:not(.radio-checked):hover {
  background-color: #d4e8a6 !important;
  color:            #333     !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  16) UKRYWANIE „DARMOWE PRÓBKI”
  — Cały blok niewidoczny i nie zajmuje miejsca
───────────────────────────────────────────────────────────────────────────────*/
a[href*="samples"],
.form-check-label.radio-wrap-label:nth-child(2),
.form-check-label.radio-wrap-label:nth-child(2) a {
  display:    none     !important;
  visibility: hidden   !important;
  width:      0        !important;
  height:     0        !important;
  padding:    0        !important;
  margin:     0        !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  17) DWA RADIO W KOSZYKU (50/50)
  — Każda opcja 50%, wyśrodkowanie tekstu
───────────────────────────────────────────────────────────────────────────────*/
.form-check-label.radio-wrap-label {
  width:         50%    !important;
  flex:          1      !important;
  text-align:    center !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  18) LINK „WYCENA DRUKU”
  — Zielony, pogrubiony, ciemniejszy odcień na hover
───────────────────────────────────────────────────────────────────────────────*/
a[href*="pricing"] {
  color:       #95c22b !important;
  font-weight: bold   !important;
}
label[for="wycena"]:hover {
  color: #7ea523 !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  19) LINK „SKLEP” W MENU
  — Czarny, pogrubiony, podkreślenie i zieleń na hover
───────────────────────────────────────────────────────────────────────────────*/
.nav a[href="https://flow.drukexpress.pl/"] {
  font-weight: bold       !important;
  font-size:   14px       !important;
  padding:     5px 10px   !important;
  color:       black      !important;
}
.nav a[href="https://flow.drukexpress.pl/"]:hover {
  text-decoration: underline !important;
  color:           #7ea523   !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  20) SIATKA PRODUKTÓW (.productBoxesInner)
  — Responsywny grid 4→3→2→1 kolumna, centruje zawartość
───────────────────────────────────────────────────────────────────────────────*/
.productBoxesInner {
  display:               grid;
  grid-template-columns: repeat(4,1fr);
  gap:                   20px;
  justify-content:       center;
  max-width:             1600px;
  margin:                auto;
}
@media(max-width:1200px){ .productBoxesInner{grid-template-columns:repeat(3,1fr);} }
@media(max-width:900px){  .productBoxesInner{grid-template-columns:repeat(2,1fr);} }
@media(max-width:600px){  .productBoxesInner{grid-template-columns:repeat(1,1fr);} }

/* ──────────────────────────────────────────────────────────────────────────────
  21) KAFELKI PRODUKTÓW (.productBoxesInner .box)
  — Białe karty, zaokrąglenie, cień + skala na hover
───────────────────────────────────────────────────────────────────────────────*/
.productBoxesInner .box {
  background:    white;
  border-radius: 10px;
  padding:       15px !important;
  text-align:    center !important;
  transition:    transform 0.3s, box-shadow 0.3s !important;
  box-shadow:    0 2px 8px rgba(0,0,0,0.08) !important;
}
.productBoxesInner .box:hover {
  transform:   scale(1.03) !important;
  box-shadow:  0 4px 12px rgba(0,0,0,0.12) !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  22) PRZYCISK „PRODUKTY” (.produkty-button)
  — Biały / zielony, zaokrąglenia, ikona + tekst
───────────────────────────────────────────────────────────────────────────────*/
.produkty-button {
  background-color: white   !important;
  color:            #95c22b !important;
  border:           2px solid #95c22b !important;
  border-radius:    50px    !important;
  padding:          12px 24px !important;
  font-weight:      600     !important;
  font-size:        16px    !important;
  display:          flex    !important;
  align-items:      center  !important;
  justify-content:  center  !important;
  gap:              8px     !important;
  transition:       all 0.3s ease-in-out !important;
}
.produkty-button:hover {
  background-color: #95c22b !important;
  color:            white   !important;
}
.produkty-button:hover span {
  color: white !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  23) WYRÓŻNIENIE WYBRANEJ OPCJI W KOSZYKU
  — Jasnozielone tło + ramka, pogrubione ikony i tekst
───────────────────────────────────────────────────────────────────────────────*/
.third-column-chosen .variantsColBox {
  background-color: rgba(149,194,43,0.1) !important;
  border:           2px solid #95c22b   !important;
  border-radius:    8px                 !important;
}
.third-column-chosen .variantsColBox svg path,
.third-column-chosen .variantsColBox p {
  fill:         #95c22b !important;
  color:        #95c22b !important;
  font-weight:  600     !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  24) STAN ETYKIETY RADIO
  — Biała vs zielona tło, biały checkbox
───────────────────────────────────────────────────────────────────────────────*/
.radio-wrap-label {
  border: 2px solid #95c22b !important;
}
.radio-wrap-label:not(.btn-primary) {
  background-color: white   !important;
  color:            #95c22b !important;
}
.radio-wrap-label.btn-primary {
  background-color: #95c22b !important;
  border-color:    #95c22b !important;
  color:           white    !important;
}
.radio-wrap-label.btn-primary .fa-check {
  color: white !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  25) STOPKA – MENU (6 kolumn)
  — Flex, responsywne kolumny 6→3→2→1
───────────────────────────────────────────────────────────────────────────────*/
#footer-menu {
  display:         flex    !important;
  flex-wrap:       wrap    !important;
  justify-content: space-between !important;
  padding:         0 !important;
  margin:          0 auto 40px !important;
  list-style:      none !important;
}
#footer-menu > li {
  flex:       1 1 16.6667% !important;
  max-width: 16.6667%  !important;
  box-sizing: border-box !important;
  padding: 0 8px         !important;
}
@media(max-width:1200px){
  #footer-menu > li {
    flex:      1 1 33.3333% !important;
    max-width:33.3333%     !important;
  }
}
@media(max-width:768px){
  #footer-menu > li {
    flex:      1 1 50% !important;
    max-width:50%     !important;
  }
}
@media(max-width:480px){
  #footer-menu > li {
    flex:      1 1 100% !important;
    max-width:100%     !important;
  }
}

/* ──────────────────────────────────────────────────────────────────────────────
  26) UKRYCIE KOLUMNY “Produkty” W STOPCE
───────────────────────────────────────────────────────────────────────────────*/
#accordion-tab_produkty {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  27) UKRYCIE SEKCJI „DARMOWE PRÓBKI” NA KONTAKCIE
───────────────────────────────────────────────────────────────────────────────*/
#samples-info-section {
  display: none !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  28) UKRYCIE H1 (#article-heading)
  — Jeśli nie można usunąć w HTML, minimalizuje widoczność
───────────────────────────────────────────────────────────────────────────────*/
#article-heading {
  font-size:   0.1px    !important;
  color:       transparent !important;
  height:      0        !important;
  margin:      0        !important;
  padding:     0        !important;
  overflow:    hidden   !important;
  line-height: 0        !important;
}

/* ──────────────────────────────────────────────────────────────────────────────
  29) ZMIANA COPYRIGHT NA STOPCE
  — Wyświetla: © 2025. All rights reserved by FLOW drukarnia
───────────────────────────────────────────────────────────────────────────────*/
#copyrights-in a[href*="uruchom_smarta"] {
  display: none !important;
}
#copyrights-in::after {
  content: "© 2025. All rights reserved by FLOW drukarnia";
  display: block;
  color:       #95c22b;
  font-size:   0.88rem;
  font-weight: 500;
  text-align:  center;
  padding:     8px 0 0 0;
  letter-spacing: 0.2px;
}

/* ──────────────────────────────────────────────────────────────────────────────
  30) LISTA BENEFITÓW (.benefits)
  — Usuwa punkty domyślne, dodaje zielone „✔” przed każdym elementem
───────────────────────────────────────────────────────────────────────────────*/
.benefits {
  list-style: none;
  margin:     0;
  padding:    0;
}
.benefits li {
  margin: 0 0 .6em 1.4em;
}
.benefits li::before {
  content: "\2714";          /* ✔  */
  color:   #00a651;          /* alternatywny odcień zieleni */
  font-weight: 700;
  margin-left: -1.4em;
}