/* Native lazy loading handles images; their visibility never depends on JS. */
img {
  opacity: 1 !important;
  transition: none;
}

a.site-logo {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  gap: 0;
  width: auto;
  max-width: none;
  color: #fff !important;
  font-size: 30px;
  font-weight: 800 !important;
  line-height: 1.2;
  letter-spacing: -1.5px;
  white-space: nowrap;
}

a.site-logo .site-logo-accent {
  display: inline;
  color: #24c642;
}

a.site-logo::after {
  content: none;
}

header > .wrapper {
  min-height: 57px;
}

footer .footer_left > a.site-logo {
  max-width: none;
  margin-bottom: 20px;
  font-size: 36px;
}

svg[data-icon] {
  flex-shrink: 0;
  vertical-align: middle;
}

.image-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80px;
  padding: 20px;
  border-radius: 8px;
  background: #101711;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
}

.icon_list > li::before {
  --check-icon: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M18.3641%207.40738C18.5516%207.59491%2018.6569%207.84921%2018.6569%208.11438C18.6569%208.37954%2018.5516%208.63385%2018.3641%208.82138L10.8688%2016.3167C10.7697%2016.4158%2010.6521%2016.4944%2010.5227%2016.548C10.3933%2016.6016%2010.2545%2016.6292%2010.1144%2016.6292C9.97434%2016.6292%209.83561%2016.6016%209.70618%2016.548C9.57675%2016.4944%209.45915%2016.4158%209.3601%2016.3167L5.6361%2012.5934C5.54059%2012.5011%205.46441%2012.3908%205.412%2012.2688C5.35959%2012.1468%205.332%2012.0156%205.33085%2011.8828C5.32969%2011.75%205.355%2011.6183%205.40528%2011.4954C5.45556%2011.3725%205.52981%2011.2609%205.6237%2011.167C5.7176%2011.0731%205.82925%2010.9988%205.95214%2010.9486C6.07504%2010.8983%206.20672%2010.873%206.3395%2010.8741C6.47228%2010.8753%206.6035%2010.9029%206.7255%2010.9553C6.84751%2011.0077%206.95785%2011.0839%207.0501%2011.1794L10.1141%2014.2434L16.9494%207.40738C17.0423%207.31445%2017.1526%207.24073%2017.2739%207.19044C17.3953%207.14014%2017.5254%207.11426%2017.6568%207.11426C17.7881%207.11426%2017.9182%207.14014%2018.0396%207.19044C18.161%207.24073%2018.2712%207.31445%2018.3641%207.40738Z%22%20fill%3D%22%237032A3%22%2F%3E%0A%3C%2Fsvg%3E%0A");
  background-image: none;
  background-color: #07951b;
  -webkit-mask: var(--check-icon) center / contain no-repeat;
  mask: var(--check-icon) center / contain no-repeat;
}

@media (max-width: 768px) {
  a.site-logo {
    font-size: 28px;
  }

  /* Size mobile actions to their labels across both stylesheet bundles.
     The contents carousel already uses compact, scrollable links. */
  :is(.btn, .btn_accent1, .btn_accent1_2, .btn_accent1_3, .btn_accent1_4,
      .btn_accent2, .btn_accent3, .btn_accent4, .btn_border, .btn_border2,
      .btn_round, .btn_round_white):not(.toc__wrapper a),
  main .home .home_content > .flex_2 > a {
    display: flex !important;
    flex: 0 1 auto !important;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 48px;
    padding: 12px 20px !important;
    white-space: normal;
  }

  :is(.btn_accent1, .btn_accent2, .btn_accent3, .btn_accent4) > span {
    min-width: 0;
    max-width: none;
  }

  .slot_card > div:last-child {
    align-items: center;
  }

  .slot_filter__wrapper > button {
    flex: 0 0 auto;
    width: max-content;
    padding: 12px 20px;
  }
}

.provider-comparison tbody th[scope="row"] {
  text-align: left;
}

.provider-comparison tbody th[scope="row"] p {
  color: #000;
  font-weight: 500;
}

@media (max-width: 768px) {
  /* Each provider becomes a card while retaining the table's data and headers. */
  #dostawcy .provider-comparison {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  #dostawcy .provider-comparison table {
    display: block;
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    overflow: visible;
  }

  #dostawcy .provider-comparison thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #dostawcy .provider-comparison tbody {
    display: grid;
    width: 100%;
    gap: 16px;
  }

  #dostawcy .provider-comparison tbody tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    overflow: hidden;
    border: 1px solid #dbe8dd;
    border-radius: 14px;
    background: #fff;
  }

  #dostawcy .provider-comparison tbody :is(th, td) {
    display: block;
    width: auto !important;
    min-width: 0;
    padding: 16px;
    text-align: left;
  }

  #dostawcy .provider-comparison tbody p {
    min-width: 0;
    margin: 0 !important;
    color: #193120;
    font-size: 16px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  #dostawcy .provider-comparison tbody th[scope="row"] {
    grid-column: 1 / -1;
    background: #0c5b18;
  }

  #dostawcy .provider-comparison tbody th[scope="row"] p {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
  }

  #dostawcy .provider-comparison td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: #647067;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
  }

  #dostawcy .provider-comparison td:nth-child(3) {
    border-left: 1px solid #ebf1ec;
  }

  #dostawcy .provider-comparison td:last-child {
    grid-column: 1 / -1;
    border-top: 1px solid #ebf1ec;
    background: #f2fbf3;
  }

  #dostawcy .provider-comparison td:last-child p {
    display: block;
    font-size: 15px;
  }
}