/* # # # # # # # # # # # # # # # # # #
   ZMIENNE GLOBALNE I BANER COOKIE
# # # # # # # # # # # # # # # # # # */

:root {
  --kk-green: #7da966;
  --kk-green-dark: #6b9557;
  --kk-text: #535252;
  --kk-white: #ffffff;
  --kk-font-family: "Red Hat Display", Arial, sans-serif;
  --kk-letter-spacing: -.005em;
  --font-family: var(--kk-font-family);
  --font-family-headline: var(--kk-font-family);
  --menu-categories-5-title-font-family: var(--kk-font-family);
  --menu-categories-5-font-family: var(--kk-font-family);
  --product-name-font-family: var(--kk-font-family);
  --article-title-font-family: var(--kk-font-family);
  --footer-headline-font-family: var(--kk-font-family);
  --footer-link-font-family: var(--kk-font-family);
  --kk-label-red: #dc2626;
  --kk-label-new: #06845a;
  --kk-label-white: #ffffff;
  --kk-cms-hero-radius: 32px;
  --kk-cms-hero-radius-sm: 26px;
  --kk-cms-hero-media-radius: 28px;
  --kk-cms-hero-media-radius-sm: 22px;
}

.iai_cookie__box {
  background: #ffffffe5;
}

.iai_cookie__box__wrapper {
  max-width: 1920px;
}


/* # # # # # # # # # # # # # # # # # #
   STOPKA — MENU 4
# # # # # # # # # # # # # # # # # # */

footer {
    background-color: #483c40;
    color: #fff;
}

#footer_links .footer_links_label {
  color: #fff;
}

#footer_links a.footer_links_label:hover {
  color: #fff;
}

.footer_settings {
  color: #fff;
}

#footer_links .footer_links_sub a:hover {
  color: #959595;
}

@media (min-width: 1200px) {
  #footer_links[data-stretch-columns="true"] {
    grid-template-columns: repeat(5, 1fr);
  }
}

body #menu_banners2 {
  margin-bottom: 0;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.22);
}

body #menu_banners2 + #footer_links {
  padding-top: 24px;
}

#menu_banners2::before {
  background: #f7f3f300;
}

@media (max-width: 756px) {
  body #menu_banners2 {
    padding-bottom: 18px;
  }

  body #menu_banners2 + #footer_links {
    padding-top: 18px;
  }
}


/* # # # # # # # # # # # # # # # # # #
   SZEROKOŚĆ STRONY
# # # # # # # # # # # # # # # # # # */

@media (min-width: 979px) {
  div#container {
    max-width: 1920px;
    padding-left: 5rem;
    padding-right: 5rem;
  }
}

footer.max-width-1200 {
  max-width: 1920px;
  padding: 5rem;
}


/* # # # # # # # # # # # # # # # # # #
   PASEK DARMOWEJ DOSTAWY I LINKI POMIJANIA
# # # # # # # # # # # # # # # # # # */

#freeShipping.freeShipping {
  display: none !important;
}

header #menu_skip.menu_skip {
  display: none !important;
}


/* # # # # # # # # # # # # # # # # # #
   STRONA GŁÓWNA I ELEMENTY GLOBALNE
# # # # # # # # # # # # # # # # # # */

#menu_regulations {
  display: none;
}

#footer_links .footer_links_sub > li {
  width: 100%;
}

.shopping_list_top {
  display: none;
}

a.account_links__item.--register {
  display: none;
}

div#main_banner1 {
  background-image: url("/data/include/cms/B2C-kombinatkonopny/Tla/HP-graf-1.svg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  padding: 3vw 0 6vw 0;
}

#menu_orders {
  display: none;
}

#menu_account {
  display: none;
}

a.headline__after {
  border: solid 1px var(--kk-green);
  border-radius: 45px;
  padding: 0 22px;
  white-space: nowrap;
  font-weight: 700;
}

@media (min-width: 757px) {
  #footer_links .footer_links {
    flex-basis: 24.9%;
    padding: 20px 15px;
  }
}

@media (max-width: 757px) {
div#main_banner1 {
  padding: 8vw 0 12vw 0;
}
}

#main_banner1 {
  position: relative;
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
  margin-right: -50vw;
  box-sizing: border-box;
  background-color: #fff;
  z-index: 1;
}

#main_banner1 .main_slider__wrapper,
#main_banner1 .swiper-wrapper,
#main_banner1 .main_slider__item,
#main_banner1 .main_slider__item > .swiper-slide {
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}

.headline__after:hover {
  background: #829c35;
  border-color: #829c35;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(71, 84, 26, 0.18);
}

.headline__after:is(a:hover) .link__text {
  text-decoration: none;
}


/* # # # # # # # # # # # # # # # # # #
   HEADER I MENU GŁÓWNE
# # # # # # # # # # # # # # # # # # */

header #menu_categories .nav-link.active,
header #menu_categories .nav-link.--active {
  color: var(--kk-text);
}

body.main_page header #breadcrumbs,
body#main_page header #breadcrumbs,
.main_page header #breadcrumbs {
  display: none !important;
}

@media (min-width: 979px) {
  header {
    display: grid;
    grid-template-columns: clamp(120px, 9vw, 170px) minmax(320px, 1fr) auto;
    grid-template-areas:
      "kk-logo        kk-search kk-actions"
      "kk-logo        kk-nav    kk-nav"
      "kk-breadcrumbs kk-breadcrumbs kk-breadcrumbs";
    align-items: stretch;
    column-gap: clamp(24px, 3vw, 56px);
    row-gap: 12px;
    min-height: 135px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  header #logo {
    grid-area: kk-logo;
    width: clamp(120px, 9vw, 170px);
    min-height: 135px;
    align-self: stretch;
    justify-content: flex-start;
  }

  header #logo.align-items-center {
    align-items: stretch !important;
  }

  header #logo a {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: stretch;
  }

  header #logo img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
  }

  header #menu_search {
    grid-area: kk-search;
    align-self: center;
    width: 100%;
    max-width: 350px;
    justify-self: end;
    right: 18rem;
  }

  header #menu_search .menu_search__block {
    width: 100%;
  }

  header #menu_search .menu_search__item.--input {
    border: 1px solid rgba(83, 82, 82, 0.18);
    border-radius: 5px;
    overflow: hidden;
    background: var(--kk-white);
  }

  header #menu_search .menu_search__input {
    min-height: 42px;
    padding-left: 18px;
    color: var(--kk-text);
  }

  header #menu_search .menu_search__input::placeholder {
    color: rgba(83, 82, 82, 0.72);
  }

  header #menu_search .menu_search__submit {
    min-width: 46px;
  }

  header #menu_top {
    grid-area: kk-actions;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(16px, 2vw, 28px);
    align-self: center;
    white-space: nowrap;
  }
  header #menu_settings {
    display: none;
  }
  header .shopping_list_top {
    display: none;
  }
  header .kk-header-contact {
    color: var(--kk-text);
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 54px;
    font-size: 1.2rem;
    line-height: 1.2;
    font-weight: 500;
  }

  header .kk-header-contact::before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("/data/include/cms/B2C-kombinatkonopny/Ikony/phone1.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
  }

  header .kk-header-contact:hover {
    color: var(--kk-green);
    text-decoration: none;
  }
#main_tree5 {
  display: none;
}
  header .account_links {
    display: flex;
    align-items: center;
  }

  header .account_links > .account_links__item {
    background: transparent;
    color: var(--kk-text);
    padding: 0;
    border-radius: 0;
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 54px;
    line-height: 1.2;
  }

  header .account_links > .account_links__item:hover {
    background: transparent;
    color: var(--kk-green);
    text-decoration: none;
  }

  header .account_links > .account_links__item::before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("/data/include/cms/B2C-kombinatkonopny/Ikony/user1.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    margin-right: 0;
    flex: 0 0 auto;
  }

  header .account_links__text.--logged-out {
    font-size: 0;
    line-height: 1.2;
    font-weight: 500;
  }

  header .account_links__text.--logged-out::after {
    content: "Zaloguj";
    font-size: 1.2rem;
  }
  header #menu_basket.top_basket {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  header #menu_basket.top_basket.--hide {
    display: flex;
  }

  header #menu_basket .top_basket__sub {
    color: var(--kk-text);
    text-decoration: none;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 54px;
    line-height: 1.2;
    padding: 0;
  }

  header #menu_basket .top_basket__sub::before {
    content: "";
    width: 24px;
    height: 24px;
    background-image: url("/data/include/cms/B2C-kombinatkonopny/Ikony/cart1.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
  }

  header #menu_basket .top_basket__sub::after {
    content: "Koszyk";
    font-size: 1.2rem;
    font-weight: 500;
  }

  header #menu_basket .top_basket__sub:hover {
    color: var(--kk-green);
    text-decoration: none;
  }

  header #menu_basket .top_basket__price {
    display: none;
  }

  header #menu_basket .badge {
    position: absolute;
    top: -4px;
    right: 8px;
  }

  header #menu_categories {
    grid-area: kk-nav;
    align-self: end;
  }

  header #menu_navbar {
    padding-top: 0;
  }

  header #menu_categories .navbar-nav {
    gap: 20px;
    align-items: center;
  }

  header #menu_categories .navbar-nav .nav-item a[title="Sklep"]::before {
    content: "";
    width: 18px;
    height: 18px;
    background-image: url("/data/include/cms/B2B-kombinatkonopny/Ikony/leaf1.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin-right: 1rem;
    flex: 0 0 auto;
  }

  header #menu_categories .nav-link[title="Sklep"] {
    background-color: var(--kk-green);
    color: var(--kk-white);
    padding: 8px 12px;
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
  }

  header #menu_categories .nav-link[title="Sklep"]:hover {
    background-color: var(--kk-green-dark);
    color: var(--kk-white);
  }
  header #breadcrumbs.breadcrumbs {
    grid-area: kk-breadcrumbs;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    margin: 0;
    padding: 2px 0 0;
    font-size: 1.2rem;
    line-height: 1.4;
    color: var(--kk-text);
  }

  header #breadcrumbs .back_button {
    margin-right: 12px;
  }

  header #breadcrumbs #back_button {
    color: var(--kk-text);
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 1.2rem;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
  }

  header #breadcrumbs #back_button:hover {
    color: var(--kk-green);
  }

  header #breadcrumbs .list_wrapper {
    display: flex;
    align-items: center;
    min-width: 0;
  }

  header #breadcrumbs ol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  header #breadcrumbs li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
  }

  header #breadcrumbs .bc-label {
    color: rgba(83, 82, 82, 0.7);
  }

  header #breadcrumbs a {
    color: var(--kk-text);
    text-decoration: none;
  }

  header #breadcrumbs a:hover {
    color: var(--kk-green);
    text-decoration: none;
  }

  header #breadcrumbs .bc-active {
    color: var(--kk-green);
    font-weight: 600;
  }

  header #breadcrumbs .breadcrumbs__separator {
    display: none;
  }
}

@media (min-width: 757px) and (max-width: 978px) {
  header #menu_categories .navbar-nav {
    gap: 16px;
  }

  header #menu_navbar {
    padding-top: 1.5rem;
  }

  header #menu_categories .navbar-nav .nav-item a[title="Sklep"]::before {
    content: "";
    width: 18px;
    height: 18px;
    background-image: url("/data/include/cms/B2B-kombinatkonopny/Ikony/leaf1.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin-right: 1rem;
  }

  header #menu_categories .nav-link[title="Sklep"] {
    background-color: var(--kk-green);
    color: var(--kk-white);
    padding: 8px 12px;
    border-radius: 25px;
    display: inline-flex;
    align-items: center;
  }

  header #menu_categories .nav-link[title="Sklep"]:hover {
    background-color: var(--kk-green-dark);
    color: var(--kk-white);
  }
}

@media (max-width: 978px) {
  header #breadcrumbs.breadcrumbs {
    display: flex;
    width: 100%;
    margin: 8px 0 0;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--kk-text);
  }

  header #breadcrumbs .back_button {
    margin-right: 10px;
  }

  header #breadcrumbs #back_button {
    color: var(--kk-text);
    background: transparent;
    border: 0;
    padding: 0;
    font-size: 1.1rem;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  header #breadcrumbs .list_wrapper {
    min-width: 0;
  }

  header #breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  header #breadcrumbs li {
    display: inline-flex;
    align-items: center;
  }

  header #breadcrumbs .bc-label {
    display: none;
  }

  header #breadcrumbs a {
    color: var(--kk-text);
    text-decoration: none;
  }

  header #breadcrumbs .bc-active {
    color: var(--kk-green);
    font-weight: 600;
  }

  header #breadcrumbs .breadcrumbs__separator {
    display: none;
  }
}


/* # # # # # # # # # # # # # # # # # #
   STRONA GŁÓWNA — PASEK IKON NAD BANEREM
# # # # # # # # # # # # # # # # # # */

#main_cms.section {
  position: relative;
  z-index: 30;
  overflow: visible;
  box-shadow: 0 4px 20px 0 rgba(72,60,64,.1);
  border-radius: 49px;
}

#main_cms #info_banners.info_banners {
  position: relative;
  z-index: 31;
  overflow: visible;
  margin-top: -80px;
  margin-bottom: 0;
}

#main_cms #info_banners .info_banners__item,
#main_cms #info_banners .info_banners__icon,
#main_cms #info_banners .info_banners__text {
  position: relative;
  z-index: 32;
}

#main_banner1 .main_slider,
#main_banner1 .main_slider__wrapper,
#main_banner1 .swiper,
#main_banner1 .swiper-wrapper,
#main_banner1 .main_slider__item,
#main_banner1 .swiper-slide {
  position: relative;
  z-index: auto;
}

#layout,
#content,
#main_cms,
#main_banner1,
#main_banner1 .main_slider,
#main_banner1 .main_slider__wrapper {
  overflow: visible;
}

@media (max-width: 1199px) {
  #main_cms #info_banners.info_banners {
    margin-top: -64px;
  }
}

@media (max-width: 756px) {
  #main_cms #info_banners.info_banners {
    margin-top: -70px;
  }
}

@media (max-width: 480px) {
  #main_cms #info_banners.info_banners {
    margin-top: -70px;
  }
}


/* # # # # # # # # # # # # # # # # # #
   STRONA GŁÓWNA — BANER GŁÓWNY: SLAJDY I PAGINACJA
# # # # # # # # # # # # # # # # # # */

#main_banner1 .main_slider {
  position: relative;
  max-width: 1390px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  overflow: visible;
}

#main_banner1 .main_slider__wrapper.swiper {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

#main_banner1 .sliderNavigation {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
}

#main_banner1 .sliderNavigation .swiper-button-prev,
#main_banner1 .sliderNavigation .swiper-button-next {
  z-index: 41;
  pointer-events: auto;
}

#main_banner1 .sliderNavigation .swiper-button-prev {
  left: calc(-1rem - 12px);
}

#main_banner1 .sliderNavigation .swiper-button-next {
  right: calc(-23rem - 12px);
}

@media (max-width: 756px) {
  #main_banner1 .sliderNavigation .swiper-button-prev {
    left: 4px;
  }

  #main_banner1 .sliderNavigation .swiper-button-next {
    right: 4px;
  }
}

#main_banner1 .swiper-wrapper {
  align-items: stretch;
  box-sizing: border-box;
}

#main_banner1 .main_slider__item.swiper-slide {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

#main_banner1 .main_slider__item > .swiper-slide {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

#main_banner1 .top-section__inner {
  width: 100%;
  max-width: 1390px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

#main_banner1 .top-section__slide {
  width: 100%;
  box-sizing: border-box;
  border-radius: 25px;
}

#main_banner1 .sliderPagination {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 22px;
  padding-bottom: 4px;
}

#main_banner1 .sliderPagination .swiper-pagination {
  position: static;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  width: auto;
  transform: none;
}

#main_banner1 .sliderPagination .swiper-pagination-bullet {
  display: block;
  width: 34px;
  height: 5px;
  margin: 0;
  border-radius: 999px;
  background: rgba(83, 82, 82, 0.28);
  opacity: 1;
  cursor: pointer;
  transition:
    width 0.25s ease,
    background-color 0.25s ease,
    opacity 0.25s ease;
}

#main_banner1 .sliderPagination .swiper-pagination-bullet-active {
  width: 52px;
  background: var(--kk-green);
  opacity: 1;
  height: 13px;
}

#main_banner1 .sliderPagination .swiper-pagination-bullet:hover {
  background: rgba(125, 169, 102, 0.65);
  height: 13px;
}

@media (max-width: 756px) {
  #main_banner1 .main_slider {
    padding-left: 12px;
    padding-right: 12px;
    overflow: visible;
  }
  #main_banner1 .main_slider__wrapper.swiper,
  #main_banner1 .swiper-wrapper,
  #main_banner1 .main_slider__item.swiper-slide,
  #main_banner1 .main_slider__item > .swiper-slide,
  #main_banner1 .top-section__inner,
  #main_banner1 .top-section__slide {
    height: auto !important;
    min-height: 0;
  }
  #main_banner1 .main_slider__wrapper.swiper {
    overflow-x: hidden;
    overflow-y: visible;
  }

  #main_banner1 .main_slider__item.swiper-slide {
    overflow: visible;
  }
  #main_banner1 .top-section__slide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding: 15px;
    border-radius: 22px;
  }
#main_banner1 .top-section__slide--image {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 17;
  min-height: 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  border-radius: 18px;
}
  #main_banner1 .top-section__slide--content {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  #main_banner1 .top-section__slide--content p {
    margin-bottom: 12px;
  }

  #main_banner1 .tytul_baner {
    font-size: clamp(2.4rem, 7vw, 3.2rem);
    line-height: 1.12;
    margin-bottom: 12px;
  }

  #main_banner1 .arrow-green {
    display: inline-flex;
    margin-top: 12px;
    line-height: 1.35;
  }

  #main_banner1 .sliderPagination {
    margin-top: 16px;
  }

  #main_banner1 .sliderPagination .swiper-pagination {
    gap: 7px;
  }

  #main_banner1 .sliderPagination .swiper-pagination-bullet {
    width: 24px;
    height: 4px;
  }

  #main_banner1 .sliderPagination .swiper-pagination-bullet-active {
    width: 38px;
    height: 4px;
  }
}


/* # # # # # # # # # # # # # # # # # #
   STRONA GŁÓWNA — STREFA BANNERS3
# # # # # # # # # # # # # # # # # # */

#menu_banners3 {
  padding-top: 5rem;
}


/* # # # # # # # # # # # # # # # # # #
   KARTA PRODUKTU
# # # # # # # # # # # # # # # # # # */

.projector_versions__status_amount {
  display: none;
}


/* # # # # # # # # # # # # # # # # # #
   STOPKA — WYRÓŻNIENIE POZYCJI
# # # # # # # # # # # # # # # # # # */

#links_footer_2_content li:nth-child(1),
#links_footer_2_content li:nth-child(3),
#links_footer_2_content li:nth-child(4) {
  font-weight: 700;
}

#links_footer_2_content li:nth-child(3) {
  position: relative;
  padding-top: 12px;
  margin-top: 12px;
}

#links_footer_2_content li:nth-child(3)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 1px;
  background-color: var(--kk-green);
}


/* # # # # # # # # # # # # # # # # # #
   KARTA PRODUKTU — UKRYCIE SEKCJI
# # # # # # # # # # # # # # # # # # */

#projector_returns {
  display: none;
}

#projector_stocks {
  display: none;
}


/* # # # # # # # # # # # # # # # # # #
   LINKI I ODSTĘPY
# # # # # # # # # # # # # # # # # # */

a {
  color: var(--kk-green);
}

p {
  line-height: 1.6;
}


/* # # # # # # # # # # # # # # # # # #
   SEKCJA BLOGOWA
# # # # # # # # # # # # # # # # # # */

body #main_blog.article {
  --kk-blog-green: #7da966;
  --kk-blog-ink: #1f241f;
  --kk-blog-card: #fffaf2;
  --kk-blog-shell: 1440px;

  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin: clamp(48px, 6vw, 96px) calc(50% - 50vw) 0;
  padding: clamp(56px, 6vw, 80px) 16px clamp(64px, 7vw, 80px);
  overflow: hidden;
  background: url('/data/include/cms/B2C-kombinatkonopny/Tla/HP-graf-2-blog.svg') center / cover no-repeat;
}

body #main_blog.article *,
body #main_blog.article *::before,
body #main_blog.article *::after {
  box-sizing: border-box;
}

body #main_blog.article > .headline__wrapper {
  display: grid;
  grid-template: "label cta" auto "title cta" auto / minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 32px;
  max-width: var(--kk-blog-shell);
  margin: 0 auto clamp(32px, 4vw, 64px);
  padding: 0;
  border: 0;
}

body #main_blog.article .headline {
  grid-area: label;
  justify-self: start;
  margin: 0;
  padding: 0;
  color: var(--kk-blog-green);
  font-size: clamp(18px, 1.6vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
}

body #main_blog.article > .headline__wrapper::after {
  content: "Edukacja konopna";
  grid-area: title;
  color: var(--kk-blog-ink);
  font-size: clamp(40px, 0vw, 96px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.045em;
}

body #main_blog.article .headline__after {
  grid-area: cta;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--kk-blog-green);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body #main_blog.article .headline__after .link__text {
  font-size: 0;
}

body #main_blog.article .headline__after .link__text::before {
  content: "Sprawdź nasze artykuły";
  font-size: 14px;
}

body #main_blog.article .headline__after:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(31, 36, 31, 0.16);
}

body #main_blog.article > .article__block {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  max-width: var(--kk-blog-shell);
  margin: 0 auto;
  padding: 0;
}

body #main_blog.article .article__item {
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 0;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  background: var(--kk-blog-card);
  box-shadow: 0 18px 45px rgba(31, 36, 31, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body #main_blog.article .article__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 58px rgba(31, 36, 31, 0.18);
}

body #main_blog.article .article__image_wrapper {
  display: block;
  width: 100%;
  aspect-ratio: 1060 / 620;
  overflow: hidden;
  background: rgba(125, 169, 102, 0.12);
}

body #main_blog.article .article__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

body #main_blog.article .article__item:hover .article__image {
  transform: scale(1.04);
}

body #main_blog.article .article__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(20px, 2vw, 32px);
}

body #main_blog.article .article__name_wrapper {
  margin: 0 0 14px;
  padding: 0;
}

body #main_blog.article .article__name {
  color: var(--kk-blog-ink);
  font-size: clamp(20px, 0vw, 30px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-decoration: none;
}

body #main_blog.article .article__name:hover,
body #main_blog.article .article__more_link {
  color: var(--kk-blog-green);
}

body #main_blog.article .article__text {
  margin: 0 0 22px;
  color: #5f665c;
  font-size: 15px;
  line-height: 1.6;
}

body #main_blog.article .article__more_link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

@media (max-width: 756px) {
  body #main_blog.article {
    margin-top: 40px;
    padding: 48px 16px 64px;
  }

  body #main_blog.article > .headline__wrapper {
    grid-template: "label" auto "title" auto "cta" auto / 1fr;
    gap: 10px;
    margin-bottom: 28px;
  }

  body #main_blog.article > .headline__wrapper::after {
    font-size: clamp(38px, 14vw, 58px);
    line-height: 0.98;
  }

  body #main_blog.article .headline__after {
    margin-top: 10px;
  }

  body #main_blog.article > .article__block {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  body #main_blog.article .article__content {
    padding: 20px;
  }
}


/* # # # # # # # # # # # # # # # # # #
   SEKCJA AKTUALNOŚCI
# # # # # # # # # # # # # # # # # # */

body #main_news.article {
  --kk-news-green: #7da966;
  --kk-news-ink: #1f241f;
  --kk-news-card: #fffaf2;
  --kk-news-shell: 1440px;

  display: block;
  box-sizing: border-box;
  width: 100vw;
  max-width: none;
  margin: clamp(48px, 6vw, 96px) calc(50% - 50vw) 0;
  padding: clamp(56px, 6vw, 112px) 16px clamp(64px, 7vw, 128px);
  overflow: hidden;
  background: url('/data/include/cms/B2C-kombinatkonopny/Tla/HP-graf-2-blog.svg') center / cover no-repeat;
}

body #main_news.article *,
body #main_news.article *::before,
body #main_news.article *::after {
  box-sizing: border-box;
}

body #main_news.article > .headline__wrapper {
  display:none;
}

body #main_news.article .headline {
  grid-area: label;
  justify-self: start;
  margin: 0;
  padding: 0;
  color: var(--kk-news-green);
  font-size: clamp(18px, 1.6vw, 28px);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
}

body #main_news.article .headline__after {
  grid-area: cta;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 999px;
  background: var(--kk-news-green);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

body #main_news.article .headline__after .link__text {
  font-size: 0;
}

body #main_news.article .headline__after .link__text::before {
  content: "Sprawdź aktualności";
  font-size: 14px;
}

body #main_news.article > .article__block {
  margin-right: auto;
  margin-left: auto;
  max-width: var(--kk-news-shell);
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 34px);
  padding: 0;
}

body #main_news.article .article__item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: auto;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  background: var(--kk-news-card);
  box-shadow: 0 18px 45px rgba(31, 36, 31, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

body #main_news.article .article__item:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 58px rgba(31, 36, 31, 0.18);
}

body #main_news.article .article__image_wrapper {
  display: block;
  width: 100%;
  aspect-ratio: 1060 / 620;
  overflow: hidden;
  background: rgba(125, 169, 102, 0.12);
}

body #main_news.article .article__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s ease;
}

body #main_news.article .article__item:hover .article__image {
  transform: scale(1.04);
}

body #main_news.article .article__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: clamp(20px, 2vw, 32px);
}

body #main_news.article .article__date {
  margin: 0 0 10px;
  color: var(--kk-news-green);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

body #main_news.article .article__name_wrapper {
  margin: 0 0 14px;
  padding: 0;
}

body #main_news.article .article__name {
  color: var(--kk-news-ink);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-decoration: none;
}

body #main_news.article .article__name:hover,
body #main_news.article .article__more_link {
  color: var(--kk-news-green);
}

body #main_news.article .article__text {
  display: -webkit-box;
  margin: 0 0 22px;
  overflow: hidden;
  color: #5f665c;
  font-size: 15px;
  line-height: 1.6;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

body #main_news.article .article__more_link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

body #main_news.article .article__more_link:hover {
  text-decoration: underline;
}

@media (max-width: 756px) {
  body #main_news.article {
    margin-top: 40px;
    padding: 48px 16px 64px;
  }

  body #main_news.article > .headline__wrapper {
    grid-template-areas:
      "label"
      "title"
      "cta";
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 28px;
  }

  body #main_news.article > .headline__wrapper::after {
    font-size: clamp(38px, 14vw, 58px);
    line-height: 0.98;
  }

  body #main_news.article .headline__after {
    margin-top: 10px;
  }

  body #main_news.article > .article__block {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  body #main_news.article .article__content {
    padding: 20px;
  }
}


/* # # # # # # # # # # # # # # # # # #
   PRODUKTY — HOTSPOTY I LISTING
# # # # # # # # # # # # # # # # # # */

body :is(.hotspot__wrapper, #search.search.products) {
  --kk-product-green: #7da966;
  --kk-product-dark-green: #55783f;
  --kk-product-accent: #829c35;
  --kk-product-text: #171914;
  --kk-product-muted: #6f716b;
  --kk-product-border: rgba(31, 31, 31, 0.12);
  --kk-product-shadow: 0 12px 30px rgba(0, 0, 0, 0.055);
  --kk-product-shadow-hover: 0 18px 42px rgba(0, 0, 0, 0.09);
}

body :is(.hotspot__wrapper, #search.search.products) .product,
body :is(.hotspot__wrapper, #search.search.products) .product *,
body :is(.hotspot__wrapper, #search.search.products) .product *::before,
body :is(.hotspot__wrapper, #search.search.products) .product *::after {
  box-sizing: border-box;
}

body .hotspot__wrapper .hotspot__products.swiper-wrapper {
  align-items: stretch;
}

body .hotspot__wrapper .product.hotspot__product.swiper-slide {
  height: auto;
}

body :is(.hotspot__wrapper, #search.search.products) .product {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: 0;
  height: auto;
  padding: 16px 16px 20px;
  overflow: hidden;
  border: 1px solid var(--kk-product-border);
  border-radius: 24px;
  background: #ffffff;
  text-align: center;
  box-shadow: var(--kk-product-shadow);
  transition:
    transform 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

body :is(.hotspot__wrapper, #search.search.products) .product:hover {
  border-color: rgba(130, 156, 53, 0.45);
  transform: translateY(-4px);
  box-shadow: var(--kk-product-shadow-hover);
}

body :is(.hotspot__wrapper, #search.search.products) .product__icon {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  aspect-ratio: 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #ffffff;
  text-decoration: none;
}

body :is(.hotspot__wrapper, #search.search.products) .product__icon picture {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #ffffff;
}

body :is(.hotspot__wrapper, #search.search.products) .product__icon img {
  display: block;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 10px;
  border: 0;
  background: #ffffff;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: normal;
  transition: transform 0.28s ease;
}

body :is(.hotspot__wrapper, #search.search.products) .product:hover .product__icon img {
  transform: scale(1.025);
}

body :is(.hotspot__wrapper, #search.search.products) .product__icon .label_icons {
  position: absolute;
  z-index: 3;
  top: 10px;
  left: 10px;
  margin: 0;
}

body :is(.hotspot__wrapper, #search.search.products) .product__icon .label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 6px 11px;
  border-radius: 999px;
  background: var(--kk-product-accent);
  color: #ffffff;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
}

body :is(.hotspot__wrapper, #search.search.products) .product__content_wrapper {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-width: 0;
  padding: 16px 3px 0;
  text-align: center;
}

body #search.search.products .product__content_wrapper h2 {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  text-align: center;
}

body :is(.hotspot__wrapper, #search.search.products) .product__name {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  min-height: 63px;
  margin: 0;
  padding: 0;
  color: var(--kk-product-green);
  font-size: 15px;
  line-height: 1.4;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 0.2s ease;
}

body :is(.hotspot__wrapper, #search.search.products) .product__name:hover {
  color: var(--kk-product-dark-green);
  text-decoration: none;
}

body :is(.hotspot__wrapper, #search.search.products) .product__name:focus-visible {
  border-radius: 5px;
  outline: 2px solid var(--kk-product-accent);
  outline-offset: 4px;
}

.projector_buy__number_amounts {
  display: none;
}

#projector_dictionary .dictionary__param[data-series="true"] {
display: none;
}

body :is(.hotspot__wrapper, #search.search.products) .product__prices {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 3px 5px;
  width: 100%;
  min-height: 26px;
  margin: auto 0 0;
  padding: 14px 0 0;
  color: var(--kk-product-text);
  text-align: center;
}

body :is(.hotspot__wrapper, #search.search.products) .product__prices .price.--main,
body :is(.hotspot__wrapper, #search.search.products) .product__prices .price__sub,
body :is(.hotspot__wrapper, #search.search.products) .product__prices .new_price,
body :is(.hotspot__wrapper, #search.search.products) .product__prices .product__price {
  color: var(--kk-product-text);
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
}

body :is(.hotspot__wrapper, #search.search.products) .product__prices .price.--main {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

body :is(.hotspot__wrapper, #search.search.products) .product__prices .price_vat,
body :is(.hotspot__wrapper, #search.search.products) .product__prices .price_sellby {
  color: var(--kk-product-muted);
  font-size: 11px;
  line-height: 1.3;
  font-weight: 400;
}

body :is(.hotspot__wrapper, #search.search.products) .product__prices .price.--before-rebate,
body :is(.hotspot__wrapper, #search.search.products) .product__prices .omnibus_price {
  color: var(--kk-product-muted);
  font-size: 12px;
  font-weight: 400;
}

body :is(.hotspot__wrapper, #search.search.products) .product__compare:empty {
  display: none;
}


/* # # # # # # # # # # # # # # # # # #
   PRODUKTY — PRZYCISKI
# # # # # # # # # # # # # # # # # # */

body .hotspot__wrapper .hotspot__name .headline__after,
body :is(.hotspot__wrapper, #search.search.products) .product :is(
  a.product__more,
  a.product__choose,
  a.product__select,
  a.product__button,
  button.product__more,
  button.product__choose,
  button.product__select,
  button.product__button,
  .product__buttons > a,
  .product__buttons > button,
  .product__actions > a,
  .product__actions > button,
  .product__button_wrapper > a,
  .product__button_wrapper > button,
  .product__content_wrapper > a:not(.product__name):not(.price),
  .product__content_wrapper > button,
  .product__content_wrapper > form > a,
  .product__content_wrapper > form > button
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: auto;
  min-width: 150px;
  min-height: 42px;
  margin: 16px auto 0;
  padding: 10px 18px;
  border: 1px solid var(--kk-product-green);
  border-radius: 999px;
  background: #ffffff;
  color: var(--kk-product-dark-green);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  appearance: none;
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

body .hotspot__wrapper .hotspot__name .headline__after {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
}

body :is(.hotspot__wrapper, #search.search.products) .product :is(
  a.product__more,
  a.product__choose,
  a.product__select,
  a.product__button,
  button.product__more,
  button.product__choose,
  button.product__select,
  button.product__button,
  .product__buttons > a,
  .product__buttons > button,
  .product__actions > a,
  .product__actions > button,
  .product__button_wrapper > a,
  .product__button_wrapper > button,
  .product__content_wrapper > a:not(.product__name):not(.price),
  .product__content_wrapper > button,
  .product__content_wrapper > form > a,
  .product__content_wrapper > form > button
)::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-left: 2px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
}

body .hotspot__wrapper .hotspot__name .headline__after:hover,
body :is(.hotspot__wrapper, #search.search.products) .product :is(
  a.product__more,
  a.product__choose,
  a.product__select,
  a.product__button,
  button.product__more,
  button.product__choose,
  button.product__select,
  button.product__button,
  .product__buttons > a,
  .product__buttons > button,
  .product__actions > a,
  .product__actions > button,
  .product__button_wrapper > a,
  .product__button_wrapper > button,
  .product__content_wrapper > a:not(.product__name):not(.price),
  .product__content_wrapper > button,
  .product__content_wrapper > form > a,
  .product__content_wrapper > form > button
):hover {
  border-color: var(--kk-product-accent);
  background: var(--kk-product-accent);
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(85, 120, 63, 0.2);
}

body .hotspot__wrapper .hotspot__name .headline__after:focus-visible,
body :is(.hotspot__wrapper, #search.search.products) .product :is(
  a.product__more,
  a.product__choose,
  a.product__select,
  a.product__button,
  button.product__more,
  button.product__choose,
  button.product__select,
  button.product__button,
  .product__buttons > a,
  .product__buttons > button,
  .product__actions > a,
  .product__actions > button,
  .product__button_wrapper > a,
  .product__button_wrapper > button,
  .product__content_wrapper > a:not(.product__name):not(.price),
  .product__content_wrapper > button,
  .product__content_wrapper > form > a,
  .product__content_wrapper > form > button
):focus-visible {
  outline: 2px solid var(--kk-product-accent);
  outline-offset: 3px;
}

body .hotspot__wrapper .hotspot__name.headline__wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

body .hotspot__wrapper .hotspot__name .headline {
  min-width: 0;
  text-decoration: none;
}

@media (max-width: 1199px) {
  body :is(.hotspot__wrapper, #search.search.products) .product {
    padding: 14px 14px 18px;
    border-radius: 22px;
  }

  body :is(.hotspot__wrapper, #search.search.products) .product__icon {
    border-radius: 17px;
  }

  body :is(.hotspot__wrapper, #search.search.products) .product__name {
    min-height: 60px;
    font-size: 14px;
  }

  body :is(.hotspot__wrapper, #search.search.products) .product__prices .price.--main,
  body :is(.hotspot__wrapper, #search.search.products) .product__prices .price__sub,
  body :is(.hotspot__wrapper, #search.search.products) .product__prices .new_price,
  body :is(.hotspot__wrapper, #search.search.products) .product__prices .product__price {
    font-size: 17px;
  }
}

@media (max-width: 756px) {
  body :is(.hotspot__wrapper, #search.search.products) .product {
    padding: 12px 12px 16px;
    border-radius: 20px;
  }

  body :is(.hotspot__wrapper, #search.search.products) .product:hover {
    transform: translateY(-2px);
  }

  body :is(.hotspot__wrapper, #search.search.products) .product__icon {
    border-radius: 16px;
  }

  body :is(.hotspot__wrapper, #search.search.products) .product__icon img {
    padding: 8px;
  }

  body :is(.hotspot__wrapper, #search.search.products) .product__content_wrapper {
    padding-top: 13px;
  }

  body :is(.hotspot__wrapper, #search.search.products) .product__name {
    min-height: 58px;
    font-size: 13px;
    line-height: 1.35;
  }

  body :is(.hotspot__wrapper, #search.search.products) .product__prices {
    padding-top: 12px;
  }

  body :is(.hotspot__wrapper, #search.search.products) .product__prices .price.--main,
  body :is(.hotspot__wrapper, #search.search.products) .product__prices .price__sub,
  body :is(.hotspot__wrapper, #search.search.products) .product__prices .new_price,
  body :is(.hotspot__wrapper, #search.search.products) .product__prices .product__price {
    font-size: 16px;
  }

  body :is(.hotspot__wrapper, #search.search.products) .product :is(
    a.product__more,
    a.product__choose,
    a.product__select,
    a.product__button,
    button.product__more,
    button.product__choose,
    button.product__select,
    button.product__button,
    .product__buttons > a,
    .product__buttons > button,
    .product__actions > a,
    .product__actions > button,
    .product__button_wrapper > a,
    .product__button_wrapper > button,
    .product__content_wrapper > a:not(.product__name):not(.price),
    .product__content_wrapper > button,
    .product__content_wrapper > form > a,
    .product__content_wrapper > form > button
  ) {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 9px 12px;
    font-size: 12px;
  }

  body .hotspot__wrapper .hotspot__name.headline__wrapper {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
  }

  body .hotspot__wrapper .hotspot__name .headline__after {
    min-width: 0;
    min-height: 38px;
    margin-left: 0;
    padding: 8px 14px;
    font-size: 12px;
  }
}


/* # # # # # # # # # # # # # # # # # #
   PRODUKTY — ETYKIETY
# # # # # # # # # # # # # # # # # # */

body :is(.hotspot__wrapper, #search.search.products)
.product__icon
.label_icons:not(.--hidden) {
  position: absolute;
  z-index: 5;
  top: 12px;
  left: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: auto;
  min-width: 0;
  max-width: calc(100% - 24px);
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
  transform: none;
}

body :is(.hotspot__wrapper, #search.search.products)
.product__icon
.label_icons
.label:not(.--hidden) {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  max-width: 150px;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 4px 6px;
  border: 0;
  border-radius: 5px;
  background: var(--kk-product-accent, #829c35);
  color: #ffffff;
  font-family: inherit;
  font-size: 10px;
  line-height: normal;
  font-weight: 500;
  letter-spacing: normal;
  text-align: center;
  text-transform: uppercase;
  white-space: normal;
  box-shadow: 0 5px 12px rgba(45, 62, 34, 0.16);
  transform: none;
}

body :is(.hotspot__wrapper, #search.search.products)
.product__icon
.label_icons
.label::before,
body :is(.hotspot__wrapper, #search.search.products)
.product__icon
.label_icons
.label::after {
  display: none;
  content: none;
}

body :is(.hotspot__wrapper, #search.search.products)
.product__icon
.label_icons.--hidden,
body :is(.hotspot__wrapper, #search.search.products)
.product__icon
.label.--hidden {
  display: none;
}

body :is(.hotspot__wrapper, #search.search.products)
.product__icon
.label_icons
span {
  flex: 0 0 auto;
}

@media (max-width: 756px) {
  body :is(.hotspot__wrapper, #search.search.products)
  .product__icon
  .label_icons:not(.--hidden) {
    top: 8px;
    left: 8px;
    gap: 4px;
    max-width: calc(100% - 16px);
  }

  body :is(.hotspot__wrapper, #search.search.products)
  .product__icon
  .label_icons
  .label:not(.--hidden) {
    max-width: 115px;
    min-height: 0;
    padding: 4px 6px;
    font-size: 10px;
    line-height: normal;
  }
}


/* # # # # # # # # # # # # # # # # # #
   TYPOGRAFIA
# # # # # # # # # # # # # # # # # # */

html,
body,
button,
input,
select,
textarea,
optgroup,
option {
  font-family: var(--kk-font-family) !important;
  letter-spacing: var(--kk-letter-spacing) !important;
}

body *:not([class^="icon-"]):not([class*=" icon-"]):not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not(code):not(kbd):not(pre):not(samp) {
  font-family: var(--kk-font-family) !important;
  letter-spacing: var(--kk-letter-spacing) !important;
}

body [class^="icon-"],
body [class*=" icon-"],
body .fa,
body [class^="fa-"],
body [class*=" fa-"],
code,
kbd,
pre,
samp {
letter-spacing: normal !important;
}

@media (max-width: 756px) {

/* Element dokłada dodatek HTML/JS — tu wyłącznie jego wygląd na telefonie. */
body header #menu_top a.kk-header-contact {
display: inline-flex !important;
flex: 0 0 42px !important;
align-items: center;
justify-content: center;
width: 42px !important;
min-width: 42px !important;
height: 42px !important;
margin: 0;
padding: 0;
overflow: hidden;
color: transparent !important;
font-size: 0 !important;
line-height: 0 !important;
text-decoration: none;
background-color: transparent;
}

body header #menu_top a.kk-header-contact > span {
display: none !important;
}

body header #menu_top a.kk-header-contact::before {
content: "";
display: block !important;
flex: 0 0 24px;
width: 24px;
min-width: 24px;
height: 24px;
margin: 0;
background-image: url("/data/include/cms/B2C-kombinatkonopny/Ikony/phone1.svg");
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}

body header #menu_top a.kk-header-contact:hover,
body header #menu_top a.kk-header-contact:focus,
body header #menu_top a.kk-header-contact:active {
color: transparent !important;
text-decoration: none;
}
}


/* # # # # # # # # # # # # # # # # # #
   PODSTRONY CMS — ZAOKRĄGLENIA BANERA (tablet i telefon)
# # # # # # # # # # # # # # # # # # */

@media (max-width: 979px) {
  #content [class^="kk-"][class$="__hero"]:not([class*="blog"]) {
    border-radius: var(--kk-cms-hero-radius);
  }
  #content [class^="kk-"][class$="__hero-media"]:not([class*="blog"]) {
    overflow: hidden;
    border-radius: var(--kk-cms-hero-media-radius);
  }
  #content [class^="kk-"]:is([class$="__hero-image"], [class$="__hero-img"]):not([class*="blog"]) {
    border-radius: var(--kk-cms-hero-media-radius);
  }
}

@media (max-width: 756px) {
  #content [class^="kk-"][class$="__hero"]:not([class*="blog"]) {
    border-radius: var(--kk-cms-hero-radius-sm);
  }

  #content [class^="kk-"][class$="__hero-media"]:not([class*="blog"]) {
    overflow: hidden;
    border-radius: var(--kk-cms-hero-media-radius-sm);
  }

  #content [class^="kk-"]:is([class$="__hero-image"], [class$="__hero-img"]):not([class*="blog"]) {
    border-radius: var(--kk-cms-hero-media-radius-sm);
  }
}


/* # # # # # # # # # # # # # # # # # #
   KARTA PRODUKTU — BELKA „WYPRODUKOWANO W POLSCE”
# # # # # # # # # # # # # # # # # # */

html[lang="pl"] #projector_additional_section.projector_info::after {
  content: "Wyprodukowano w Polsce";
  display: flex;
  align-items: center;
  min-height: 20px;
  padding-left: 30px;
  background-image: url("/data/include/cms/B2C-kombinatkonopny/Pliki/madeInIcon.22856ff81.svg");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 20px 20px;
  color: inherit;
  font-size: inherit;
  line-height: 1.4;
}


/* # # # # # # # # # # # # # # # # # #
   PRODUKTY — ETYKIETY: KOLORY
# # # # # # # # # # # # # # # # # # */

body :is(.hotspot__wrapper, #search.search.products)
.product__icon
.label_icons
.label:not(.--hidden).--new {
  border: 1px solid transparent;
  background: var(--kk-label-new, #06845a);
  color: var(--kk-label-white, #ffffff);
}

body :is(.hotspot__wrapper, #search.search.products)
.product__icon
.label_icons
.label:not(.--hidden):is(
  .--promo,
  .--promotion,
  .--discount,
  .--sale
) {
  border: 1px solid transparent;
  background: var(--kk-label-red, #dc2626);
  color: var(--kk-label-white, #ffffff);
  box-shadow: 0 5px 12px rgba(153, 27, 27, 0.20);
}

body :is(.hotspot__wrapper, #search.search.products)
.product__icon
.label_icons
.label:not(.--hidden):is(
  .--disable,
  .--disabled,
  .--unavailable,
  .--soldout,
  .--out
) {
  max-width: 135px;
  border: 1px solid var(--kk-label-red, #dc2626);
  background: var(--kk-label-white, #ffffff);
  color: var(--kk-label-red, #dc2626);
  box-shadow: 0 5px 12px rgba(45, 62, 34, 0.12);
}

@media (max-width: 756px) {
  body :is(.hotspot__wrapper, #search.search.products)
  .product__icon
  .label_icons
  .label:not(.--hidden):is(
    .--disable,
    .--disabled,
    .--unavailable,
    .--soldout,
    .--out
  ) {
    max-width: 105px;
  }
}

body :is(.hotspot__wrapper, #search.search.products)
.product__icon
.label_icons
.label:not(.--hidden):is(
  .--bestseller,
  .--recommended,
  .--recommend
) {
  border: 1px solid transparent;
  background: #55783f;
  color: #ffffff;
}

body :is(.hotspot__wrapper, #search.search.products)
.product__icon
.label_icons
.label:not(.--hidden):is(
  .--last,
  .--limited
) {
  border: 1px solid transparent;
  background: #a77832;
  color: #ffffff;
}


/* # # # # # # # # # # # # # # # # # #
   PODSTRONY CMS — BANER NA CAŁĄ SZEROKOŚĆ (desktop)
# # # # # # # # # # # # # # # # # # */

@media (min-width: 979px) {

  /* Wrapper tresci CMS ma z arkusza platformy overflow: auto (klasa .cm) - baner
     szerszy od wrappera wywolywal dolny suwak. Ustawiamy obie osie: overflow-x: visible
     samo w sobie przelicza sie na auto, gdy druga os nie jest visible.

     Selektor celuje w baner NA DOWOLNEJ GLEBOKOSCI (nie w bezposrednie dziecko) i obejmuje
     oba wrappery uzywane przez maske: .text_menu__txt_sub na podstronach /pl/about/ oraz
     .contact_cms na /pl/contact.html - obydwa nosza klase .cm. Czesc podstron ma miedzy
     wrapperem a sekcja kk- dodatkowy kontener ._ae_desc, przez ktory wariant z ">" ich
     nie lapal. Warunek :has(...__hero) sprawia, ze regula wchodzi dokladnie tam, gdzie
     baner jest rozciagany na 100vw - pozostale strony CMS zachowuja przewijanie. */
  #content :is(.cm, .text_menu__txt_sub):has([class^="kk-"][class$="__hero"]:not([class*="blog"])) {
    overflow: visible;
  }

  #content [class^="kk-"]:not([class*="blog"]):has(> [class$="__hero"]) {
    overflow: visible;
  }

  #content [class^="kk-"][class$="__hero"]:not([class*="blog"]) {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
    border-radius: 0;
  }
  #content [class^="kk-"][class$="__hero-inner"]:not([class*="blog"]) {
    width: min(1440px, calc(100% - 178px));
  }
}


/* # # # # # # # # # # # # # # # # # #
   STRONA REKLAMACJI — MENU I NAGŁÓWEK
# # # # # # # # # # # # # # # # # # */

/* !important jest konieczny — arkusz platformy ukrywa te elementy regułą z !important. */

#container.rma-open_page #menu_categories        { display: block !important; }

#container.rma-open_page #menu_search            { display: flex  !important; }

#container.rma-open_page #menu_top               { display: flex  !important; }

#container.rma-open_page #menu_basket            { display: flex  !important; }

#container.rma-open_page #menu_settings          { display: flex  !important; }

#container.rma-open_page #breadcrumbs.breadcrumbs{ display: flex  !important; }

html.order_process:has(#container.rma-open_page) footer #footer_links {
  display: grid !important;
}

@media (min-width: 979px) {
  #container.rma-open_page > header {
    display: grid;
    grid-template-columns: clamp(120px, 9vw, 170px) minmax(320px, 1fr) auto;
    grid-template-areas:
      "kk-logo        kk-search      kk-actions"
      "kk-logo        kk-nav         kk-nav"
      "kk-ordernav    kk-ordernav    kk-ordersec"
      "kk-breadcrumbs kk-breadcrumbs kk-breadcrumbs";
  }

  #container.rma-open_page > header > .order_navigation {
    grid-area: kk-ordernav;
  }

  #container.rma-open_page > header > .order_process_security {
    grid-area: kk-ordersec;
  }
}

/* # # # # # # # # # # # # # # # # # #
   PODSTRONY CMS — SYSTEMOWY TYTUL H1 UKRYTY WIZUALNIE
# # # # # # # # # # # # # # # # # # */

/* Tytul znika z widoku, ale zostaje w kodzie, w drzewie dostepnosci i w indeksie.

   Swiadomie NIE uzywamy display:none. Ono usuwa element z drzewa dostepnosci
   (czytniki ekranu traca jedyny naglowek strony), a wyszukiwarki przypisuja tresci
   ukrytej domyslnie mniejsza wage. Ponizszy wzorzec zostawia element wyrenderowany
   o rozmiarze 1x1 px i przycina go maska - jest standardem dostepnosci, nie sztuczka.

   Zakres: klasa .text_menu__label wystepuje WYLACZNIE na podstronach CMS.
   Listingi i wyszukiwarka uzywaja .search_name__label, strona reklamacji
   .rma_open__label, blog .big_label - zadnego z nich ta regula nie dotyka. */

#content h1.text_menu__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* # # # # # # # # # # # # # # # # # #
   STRONY PROCESU ZAMOWIENIA — NAGLOWEK I STOPKA
# # # # # # # # # # # # # # # # # # */

/* Dotyczy stron z klasa html.order_process: logowania, rejestracji i krokow
   skladania zamowienia. Maska ukrywa na nich menu, wyszukiwarke i koszyk.

   W naszej siatce naglowka zostaja wtedy dwa elementy: #logo (grid-area: kk-logo)
   oraz .order_process_security, ktore ma z arkusza platformy grid-area: security -
   nazwe, ktorej nasze grid-template-areas nie deklaruje. Przegladarka tworzy dla
   niej sciezki niejawne: naglowek rosl do 252 px zamiast 103 px, a logo ladowalo
   w prawym dolnym rogu (zmierzone x = 1245 przy oknie 1440).

   Strona reklamacji jest WYLACZONA z tej reguly: KOM-20260901-002 przywraca tam
   pelna nawigacje, wiec potrzebuje pelnej trzywierszowej siatki. */

@media (min-width: 979px) {

  html.order_process:not(:has(#container.rma-open_page)) #container > header {
    grid-template-columns: clamp(120px, 9vw, 170px) 1fr;
    grid-template-areas:
      "kk-logo security"
      "kk-nav  kk-nav";
    align-items: center;
    min-height: 0;
    row-gap: 0;
  }

  /* Logo w tej samej wielkosci co na stronie glownej: 135 px wysokosci.
     Platforma zbija je na tych stronach do 75 px (.order_process #logo) i do 50 px
     na samym obrazku (.order_process #logo img, specyficznosc 1,1,1 - bije nasza
     regule bazowa `header #logo img` o specyficznosci 1,0,2). Dlatego nadpisujemy
     tu jawnie oba, bez !important - dluzszy lancuch selektora wystarcza. */
  html.order_process:not(:has(#container.rma-open_page)) #container > header > #logo {
    min-height: 135px;
    height: 135px;
    max-height: none;
    align-self: center;
  }

  html.order_process:not(:has(#container.rma-open_page)) #container > header > #logo img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
  }

  html.order_process:not(:has(#container.rma-open_page)) #container > header > .order_process_security {
    grid-area: security;
    justify-self: end;
  }

  /* Nawigacja "Kontynuuj zakupy / Twoje konto / Koszyk" ma z arkusza platformy
     grid-area: navigation - kolejna nazwa spoza naszej siatki. Bez tej reguly
     ladowala w niejawnej czwartej sciezce, w prawym gornym rogu (zmierzone x = 1070).
     Wlasny wiersz i wysrodkowanie. */
  html.order_process:not(:has(#container.rma-open_page)) #container > header > .order_navigation {
    grid-area: kk-nav;
    justify-self: center;
    margin-top: 8px;
  }
}

/* Stopka: na tych stronach platforma ogranicza ja do 1170 px, przez co ciemny pasek
   nie siega krawedzi okna. Reszta sklepu ma 1920 px - wyrownujemy. Bez media query,
   bo ponizej 979 px max-width i tak nie jest ograniczeniem (zmierzone: bez zmian). */

html.order_process footer.max-width-1200 {
  max-width: 1920px;
}

/* Zawartosc stopki (dane kontaktowe, ustawienia, banery) byla dodatkowo zbijana do
   1170 px przez `.order_process .container` z arkusza platformy - stad wrazenie, ze
   pasek jest szeroki, ale tresc w nim nie. Zdejmujemy limit tylko WEWNATRZ stopki;
   glowny kontener tresci (formularz logowania) zachowuje swoja szerokosc. */

html.order_process footer.max-width-1200 .container {
  max-width: 1920px;
}