/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

/* Kontrast tekstu wtórnego wg WCAG 2.1 AA (1.4.3, 4.5:1). Zmierzone axe-core:
   #68758f dawało 4.21:1 na #f3f4f6. Nowa wartość: 4.79:1 na najciemniejszym
   tle, na którym występuje. Kolory marki zostają bez zmian. */
:root {
  --ventia-color-text-primary: #07122e;
  --ventia-color-text-secondary: #606c85;
  --ventia-color-brand-primary: #00a950;
  --ventia-color-brand-primary-hover: #009247;
  --ventia-color-brand-primary-light: #e5fff0;
  --ventia-color-brand-primary-dark: #00642f;
  --ventia-transition-button: background-color 0.15s ease, color 0.15s ease;
  --ventia-color-border-default: #e1e7ef;
  --ventia-color-bg-soft: #f8fafc;
  --ventia-color-bg-tint: #ddf7e9;
  --ventia-radius-12: 12px;
  /* Proporcja slotu to format, w którym marketing rysuje banery (1920x650).
     Poprzednie 1110/340 przyszło z demowego slajdu PrestaShopu — sample-1.jpg
     ma dokładnie tyle — i przycinało prawdziwy baner o ~10% w pionie. */
  --ventia-slider-ratio: 1920 / 650;
  --ventia-slider-ground: #07122e;
  /* Ten sam granat, przyciemniający obraz pod strzałkami na telefonie. */
  --ventia-slider-scrim: rgba(7, 18, 46, 0.45);
  /* Listwa z podpisem pod obrazem na telefonie. */
  --ventia-slider-rail: 68px;
}

a:focus {
  outline: none;
  outline-offset: initial;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
  color: var(--ventia-color-brand-primary);
  text-decoration: none;
}

/* Keeps an unbreakable string (a PHP notice printed before the doctype, a long
   URL in user content) from setting the page width and zooming mobile out. */
body {
  overflow-wrap: break-word;
}

/* Stopka siada na dnie okna, kiedy treść jest krótsza niż ekran, a przy dłuższej
   zachowuje się jak dotąd. Rośnie w tym układzie wyłącznie #wrapper; nagłówek
   i stopka zostają przy swojej wysokości.

   Na całą wysokość okna rozpięte jest body, nie <main>, bo nad <main> potrafi
   wylądować treść spoza layoutu: przy display_errors PHP wypisuje notice przed
   doctype, przeglądarka wrzuca go do body i przechodzi w quirks mode. Gdyby to
   <main> miało 100vh, strona byłaby o wysokość takiego notice'a za długa i
   stopka schodziła pod krawędź okna. Jako element flexa notice zabiera swoje,
   a <main> dobiera resztę.

   dvh po vh, nie zamiast: na telefonach 100vh liczy pasek adresu, który przy
   przewijaniu znika, więc krótka strona i tak dawała kilkadziesiąt pikseli
   przewijania. Starsze przeglądarki po prostu nie zobaczą drugiej linijki. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

body > main {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
}

body > main > #header,
body > main > #footer {
  flex-shrink: 0;
}

#wrapper {
  flex: 1 0 auto;
  background-color: #fff;
}

#footer {
  padding-top: 0;
}

@media (max-width: 767.98px) {
  #header > .header-nav {
    border: none;
  }

  #header .header-nav .container,
  #header .header-nav .row {
    padding: 0;
    margin: 0;
    max-width: 100%;
  }

  #header .hidden-md-up.mobile {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 12px 20px 16px;
  }

  #header .hidden-md-up.mobile #_mobile_logo {
    order: 1;
    margin: 0;
    max-width: 130px;
  }

  #header .hidden-md-up.mobile #_mobile_logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: 130px;
    max-height: 36px;
    object-fit: contain;
  }

  #header .hidden-md-up.mobile #_mobile_user_info {
    order: 2;
    margin-left: auto;
  }

  #header .hidden-md-up.mobile #_mobile_cart {
    order: 3;
  }

  #header .hidden-md-up.mobile #menu-icon {
    order: 4;
    float: none;
    margin: 0;
  }

  #header .hidden-md-up.mobile #_mobile_cart,
  #header .hidden-md-up.mobile #menu-icon,
  #header .hidden-md-up.mobile #_mobile_user_info {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    float: none;
    color: var(--ventia-color-text-primary);
  }

  #header .hidden-md-up.mobile .clearfix {
    display: none;
  }

  #header .hidden-md-up.mobile #_mobile_user_info .user-info {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    white-space: nowrap;
  }

  #header .hidden-md-up.mobile #_mobile_user_info .user-info a {
    margin: 0;
  }

  #header .hidden-md-up.mobile #_mobile_cart #blockcart-wrapper,
  #header .hidden-md-up.mobile #_mobile_cart .blockcart {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    background: transparent;
  }

  #header .hidden-md-up.mobile #_mobile_cart .blockcart .header {
    margin: 0;
  }

  #header .hidden-md-up.mobile #_mobile_cart .blockcart .header a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
  }

  #header .hidden-md-up.mobile #_mobile_cart .blockcart .header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 12px;
    border: 1px solid #dde4ea;
    color: black;
  }

  /* The count rides the icon so the cart keeps the same 44px footprint as the
     account and menu buttons; laid out inline it grew the button to 70px and
     ate the 18px gaps on both sides. */
  #header .hidden-md-up.mobile #_mobile_cart .cart-products-count {
    position: absolute;
    top: -6px;
    right: -6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 10px;
    line-height: 1;
    color: #fff;
    background: var(--ventia-color-brand-primary);
    border-radius: 9px;
  }

  #header .hidden-md-up.mobile #_mobile_cart .blockcart.inactive .cart-products-count {
    display: none;
  }

  #header .hidden-md-up.mobile #menu-icon {
    position: relative;
    border-radius: 12px;
    background: var(--ventia-color-brand-primary);
  }

  #header .hidden-md-up.mobile #menu-icon .material-icons {
    display: none !important;
  }

  #header .hidden-md-up.mobile #menu-icon::before,
  #header .hidden-md-up.mobile #menu-icon::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    border-radius: 1px;
    background: #fff;
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
  }

  #header .hidden-md-up.mobile #menu-icon::before {
    transform: translate(-50%, -50%);
    box-shadow: 0 -5px 0 #fff, 0 5px 0 #fff;
  }

  #header .hidden-md-up.mobile #menu-icon::after {
    transform: translate(-50%, -50%);
    opacity: 0;
  }

  #header.is-open .hidden-md-up.mobile #menu-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
    box-shadow: none;
  }

  #header.is-open .hidden-md-up.mobile #menu-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
    opacity: 1;
  }

  #header .header-nav .cart-preview.active i {
    color: black;
  }

  #_mobile_top_menu .top-menu {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  #_mobile_top_menu .top-menu > li {
    list-style: none;
    margin: 0 20px;
    border-bottom: 1px solid var(--ventia-color-border-default);
  }

  #_mobile_top_menu .top-menu > li > a.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    padding: 14px 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 20px;
    color: var(--ventia-color-text-primary);
    text-decoration: none;
  }

  #_mobile_top_menu .top-menu > li > a.dropdown-item::after {
    content: '';
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    background: url('../img/icon-chevron-right.svg') no-repeat center / contain;
  }
}

#header .header-nav .cart-preview .shopping-cart {
  color: black;
}

@media (min-width: 768px) {
  #header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      'logo   search  buttons'
      'menu   menu    menu';
    column-gap: 24px;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 20px max(15px, calc((100% - 1440px) / 2));
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.11);
  }

  /* The shadow used to come from a pseudo-element stretched to
     calc(100vw - 15px), i.e. the viewport minus a guessed scrollbar. A wider
     scrollbar (17px on Windows) made that wider than the viewport and scrolled
     the page sideways. The header now spans the full width itself and insets
     its own grid instead, so the 1440px column is padding rather than a
     max-width and nothing has to guess the scrollbar. */

  #header .header-banner {
    display: none;
  }

  #header .header-nav,
  #header .header-nav .container,
  #header .header-nav .row,
  #header .header-nav .hidden-sm-down,
  #header .header-nav .hidden-sm-down .col-md-5,
  #header .header-top,
  #header .header-top .container,
  #header .header-top .row,
  #header .header-top-right {
    display: contents !important;
  }

  #header .hidden-sm-down #search_widget {
    display: none !important;
  }

  #header #_desktop_logo {
    grid-area: logo;
    flex: none !important;
    max-width: none !important;
    width: auto !important;
  }

  #header #_desktop_logo .logo {
    display: block;
    max-height: 56px;
    width: auto;
    max-width: none;
  }

  #header #search_widget {
    grid-area: search;
  }

  #header .header-top-right #search_widget {
    display: none;
  }

  #header #_desktop_top_menu {
    margin-top: 34px;
    grid-area: menu;
  }

  #header #_desktop_top_menu .top-menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
  }

  #header #_desktop_top_menu .top-menu > li {
    list-style: none;
  }

  #header #_desktop_top_menu .top-menu > li > a.dropdown-item {
    display: block;
    padding: 0 0 6px;
    border-bottom: 2px solid transparent;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    line-height: 14px;
    color: var(--ventia-color-text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: border-color 0.15s ease;
  }

  #header #_desktop_top_menu .top-menu > li > a.dropdown-item:hover {
    border-bottom-color: var(--ventia-color-brand-primary);
  }

  #header .right-nav {
    grid-area: buttons;
    display: flex;
    justify-self: flex-end;
    align-items: center;
    gap: 20px;
    margin: 0;
    padding: 0;
  }
}

@media (min-width: 768px) {
  #header #search_widget {
    display: flex !important;
    align-items: center;
    height: 42px;
    max-width: 100%;
    width: 100%;
    padding: 0 16px;
    background: var(--ventia-color-bg-soft);
    border: 1px solid var(--ventia-color-border-default);
    border-radius: 8px;
    float: none !important;
    position: static !important;
  }

  #header #search_widget form {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 8px;
    position: static !important;
  }

  #header #search_widget input[type='text'] {
    order: 1;
    flex: 1 1 auto !important;
    min-width: 0;
    width: auto !important;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: var(--ventia-color-text-secondary);
    float: none !important;
    position: static !important;
  }

  #header #search_widget input[type='text']:focus {
    outline: none;
  }

  #header #search_widget i.material-icons.search {
    order: 2 !important;
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--ventia-color-text-secondary);
    cursor: pointer;
    float: none !important;
    position: static !important;
    line-height: 6px;
  }

  #header #search_widget i.material-icons.clear {
    display: none !important;
  }

  #header #_desktop_user_info .user-info a {
    display: flex !important;
    align-items: center;
    gap: 6px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--ventia-color-text-primary);
    text-decoration: none;
  }

  #header #_desktop_user_info .user-info a .material-icons {
    font-size: 18px;
  }

  #header #_desktop_user_info .user-info {
    margin: 0;
    display: flex;
  }

  #header #_desktop_cart .blockcart {
    height: 40px;
    margin: 0;
    padding: 0 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ventia-color-brand-primary);
    border-radius: var(--ventia-radius-12);
    transition: var(--ventia-transition-button);
  }

  #header #_desktop_cart .blockcart:hover {
    background: var(--ventia-color-brand-primary-hover);
  }

  #header #_desktop_cart .blockcart .header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
  }

  #header #_desktop_cart .blockcart .header,
  #header #_desktop_cart .blockcart .header a,
  #header #_desktop_cart .blockcart .header span,
  #header #_desktop_cart .blockcart .header i {
    color: #fff;
  }

  #header #_desktop_cart .blockcart .header a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
  }

  /* The template renders the bare number so the mobile badge reads cleanly;
     desktop keeps the "Koszyk (0)" wording it always had. */
  #header #_desktop_cart .cart-products-count::before {
    content: '(';
  }

  #header #_desktop_cart .cart-products-count::after {
    content: ')';
  }
}

@media (min-width: 1200px) {
  #header #search_widget {
    max-width: 590px;
    justify-self: center;
  }

  #header #_desktop_top_menu {
    margin-top: 34px;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  #header {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      'logo    buttons'
      'search  search'
      'menu    menu';
  }

  #header .right-nav {
    justify-content: flex-end;
  }

  #header #search_widget {
    margin-top:16px;
  }

  #header #_desktop_top_menu .top-menu {
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
}

/* Na biurku kropki leżą na zdjęciu, więc są białe — na telefonie schodzą na
   listwę i przemalowuje je blok mobilny niżej. classic chowa je od lg, stąd
   display. */
#carousel .carousel-indicators {
  display: flex !important;
  justify-content: center;
  bottom: 20px;
  margin-bottom: initial;
}

#carousel .carousel-indicators li {
  border-color: #fff;
}

#carousel .carousel-indicators .active {
  background-color: #fff;
}

/* Wysokość niesie sama proporcja, więc slot istnieje od pierwszego malowania
   — zanim banner się zdekoduje i nadal, gdy zwróci 404. Nic w środku go nie
   wyznacza; wszystko w środku go wypełnia. Poniżej md proporcję przejmuje sam
   obraz — slot zostaje zarezerwowany tak samo, tylko dochodzi do niego listwa
   z podpisem. */
#carousel .carousel-inner {
  height: auto;
  aspect-ratio: var(--ventia-slider-ratio);
  /* Baner nigdy nie jest wyższy niż wysokość, w której go narysowano. Do 1920 px
     — czyli na całym typowym biurku — nic to nie zmienia; dopiero panoramiczny
     monitor przestaje go rozciągać i przycina w pionie, zamiast pokazywać
     powiększony do 1000 px pas. */
  max-height: 650px;
  overflow: hidden;
  margin-bottom: 0;
  background-color: var(--ventia-slider-ground);
}

#carousel .carousel-item {
  height: 100%;
}

#carousel .carousel-item > a,
#carousel .carousel-item figure {
  display: block;
  height: 100%;
  margin: 0;
}

#carousel .carousel-item figure {
  position: relative;
}

#carousel .carousel-item figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  color: #fff;
}

/* Wspólna typografia podpisu; miejsce i skalę nadają mu bloki na dole — na
   biurku leży na zdjęciu, na telefonie na listwie pod nim. */
#carousel .carousel-item .caption {
  position: absolute;
  top: 50%;
  bottom: initial;
  transform: translateY(-50%);
  margin: 0;
  text-align: left;
  color: #fff;
}

#carousel .carousel-item .caption .display-1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  text-transform: none;
  color: #fff;
}

#carousel .carousel-item .caption .caption-description p {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  color: #fff;
  margin: 0;
}

#carousel .carousel-control .icon-next:hover i,
#carousel .carousel-control .icon-prev:hover i {
  color: var(--ventia-color-brand-primary);
}

@media (min-width: 768px) {
  #carousel .carousel-item .caption {
    left: 84px;
    max-width: 550px;
  }

  #carousel .carousel-item .caption .display-1 {
    font-size: 48px;
    line-height: 54px;
    margin: 0 0 16px;
  }

  #carousel .carousel-item .caption .caption-description p {
    font-size: 16px;
    line-height: 18px;
  }
}

/* Na telefonie baner ma jakieś 130 px wysokości: napis położony na nim byłby
   nieczytelny, a slajd i tak niesie własny, wrysowany w grafikę. Obraz zostaje
   więc nietknięty, a podpis schodzi na granatową listwę pod nim — ten sam
   granat, który trzyma slot, zanim obraz się wczyta.

   Listwa jest wysokości stałej, nie zależnej od treści, bo trzy slajdy w bazie
   nie mają podpisu w ogóle: gdyby ją niosła treść, karuzela skakałaby przy
   każdej zmianie slajdu. */
@media (max-width: 767.98px) {
  #carousel .carousel-inner {
    height: auto;
    aspect-ratio: auto;
    max-height: none;
  }

  #carousel .carousel-item,
  #carousel .carousel-item > a,
  #carousel .carousel-item figure {
    height: auto;
  }

  #carousel .carousel-item figure {
    padding-bottom: var(--ventia-slider-rail);
  }

  /* Proporcja wraca tu na sam obraz, żeby slot dalej był zarezerwowany przed
     dekodowaniem — listwa dokłada do niego swoją stałą wysokość. */
  #carousel .carousel-item figure img {
    height: auto;
    aspect-ratio: var(--ventia-slider-ratio);
  }

  #carousel .carousel-item .caption {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: var(--ventia-slider-rail);
    max-width: none;
    /* Prawa strona listwy należy do kropek. */
    padding: 0 72px 0 16px;
    transform: none;
  }

  #carousel .carousel-item .caption .display-1 {
    font-size: 20px;
    line-height: 24px;
    margin: 0;
  }

  #carousel .carousel-item .caption .caption-description p {
    font-size: 13px;
    line-height: 17px;
    color: rgba(255, 255, 255, 0.78);
  }

  /* Kropki siedzą na listwie, nie na grafice, i to przy jej prawej krawędzi:
     podpis czyta się od lewej, znacznik pozycji zamyka wiersz od prawej.
     Aktywna jest zielona — na zdjęciu czytelniejsza jest biel, ale na firmowym
     granacie kolor marki od razu mówi, który slajd jest na wierzchu. */
  #carousel .carousel-indicators {
    right: 16px;
    bottom: calc((var(--ventia-slider-rail) - 8px) / 2);
    left: auto;
    justify-content: flex-end;
    width: auto;
    margin: 0;
  }

  #carousel .carousel-indicators li {
    border-color: rgba(255, 255, 255, 0.5);
  }

  #carousel .carousel-indicators .active {
    background-color: var(--ventia-color-brand-primary);
    border-color: var(--ventia-color-brand-primary);
  }
}

body#index #wrapper {
  padding-top: 0;
}

/* classic scales the arrow glyph to 50px but leaves Bootstrap's 30px control
   box and its -15px side margin, so the arrow paints 20px outside its own box
   and drags the document past the viewport edge. */
#carousel .carousel-control .icon-next,
#carousel .carousel-control .icon-prev {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  margin: -25px 0 0;
}

#carousel .carousel-control .icon-next i,
#carousel .carousel-control .icon-prev i {
  display: block;
  font-size: 50px;
  line-height: 1;
}

/* Ta sama strzałka na niskim, telefonowym slocie zajmowałaby prawie połowę jego
   wysokości, a classic podkłada pod nią szarą płytkę. Tu jest mniejsza, na
   firmowym granacie, i celuje w środek samego obrazu: pas strzałek dostaje
   proporcję slajdu, więc kończy się dokładnie tam, gdzie zaczyna listwa —
   bez przeliczania wysokości na vh czy vw. Klikalny jest cały bok karuzeli,
   kółko jest tylko tym, co widać. */
@media (max-width: 767.98px) {
  #carousel .direction {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: var(--ventia-slider-ratio);
  }

  #carousel .carousel-control .icon-next,
  #carousel .carousel-control .icon-prev {
    width: 34px;
    height: 34px;
    margin: -17px 0 0;
    background: var(--ventia-slider-scrim);
    border-radius: 50%;
  }

  #carousel .carousel-control .icon-prev {
    left: 8px;
  }

  #carousel .carousel-control .icon-next {
    right: 8px;
  }

  #carousel .carousel-control .icon-next i,
  #carousel .carousel-control .icon-prev i {
    font-size: 26px;
    background: none;
  }
}

body#index .breadcrumb {
  display: none;
}

/* The home page is full width, so it drops the Bootstrap container instead of
   sitting inside it and escaping with 100vw. That unit counts the scrollbar
   while the viewport does not, which made the page a scrollbar-width too wide
   and shifted it half that far off centre. Every child already carries its own
   max-width, so nothing here relies on the container. */
body#index #wrapper > .container {
  width: auto;
  max-width: none;
  padding: 0;
}

body#index #wrapper > .container > .row {
  margin-right: 0;
  margin-left: 0;
}

body#index #content-wrapper {
  padding: 0;
}

body#index #content.page-home {
  padding: 0;
  margin: 0;
}

/* Baner idzie przez całą szerokość strony, więc nie dostaje ramy 1440px, którą
   noszą sekcje pod nim. Szerokość podaje się jawnie, bo classic rozpycha
   karuzelę poniżej lg na 100vw — a ta jednostka liczy pasek przewijania,
   którego widok nie liczy, i strona wychodziła o jego szerokość za szeroka. */
body#index #carousel {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  left: initial;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* Kafelek kategorii niesie w treści bloku zwykłą strzałkę „→", a pod nią leżał
   obrazek z samym kółkiem. Poppins nie ma tego znaku, więc rysowała go czcionka
   zastępcza: włosowa kreska, do tego odsunięta od środka kółka o własny odstęp
   międzyliterowy. Strzałkę niesie teraz ikona — ta sama, którą motyw miał już
   dla telefonu, tylko że jako maska, więc kolor bierze z tokenu marki zamiast
   z pliku (SVG ma wpisane #00AF54 obok firmowego #00A950). Tekst zostaje w
   treści, ale się nie rysuje; ikona i tak mówi to samo, a treść bloku siedzi
   w bazie i zmiana jej wymagałaby migracji. */
#custom-text .category-card__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: auto;
  background: url('../img/icon-category-arrow-mobile.svg') no-repeat center / contain;
  font-size: 0;
  color: transparent;
}

/* Maska daje ikonie kolor z tokenu; gdyby przeglądarka jej nie umiała, zostaje
   zwykłe tło z linijki wyżej, czyli zieleń wpisana w plik. Same longhandy, bo
   skrót z ukośnikiem potrafi się nie sparsować, a wtedy zostałby goły zielony
   kwadrat zamiast strzałki. */
@supports ((-webkit-mask-image: url('')) or (mask-image: url(''))) {
  #custom-text .category-card__arrow {
    background: var(--ventia-color-brand-primary);
    -webkit-mask-image: url('../img/icon-category-arrow-mobile.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
    mask-image: url('../img/icon-category-arrow-mobile.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
  }
}

@media (min-width: 768px) {
  #index #custom-text {
    padding: 0;
  }

  #custom-text .category-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 85px 40px;
    background: var(--ventia-color-bg-page);
  }

  #custom-text .category-section__heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    margin-bottom: 24px;
  }

  #custom-text .category-section__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 35px;
    color: var(--ventia-color-text-primary);
    margin: 0;
  }

  #custom-text .category-section__subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 16px;
    color: var(--ventia-color-text-secondary);
    margin: 0;
  }

  #custom-text .category-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    column-gap: 14px;
    row-gap: 39px;
  }

  #custom-text .category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    height: 230px;
    background: var(--ventia-color-bg-page);
    border: 1px solid var(--ventia-color-border-default);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
  }

  #custom-text .category-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 200 / 132;
    overflow: hidden;
  }

  #custom-text .category-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #custom-text .category-card__title {
    margin-top: 14px;
    padding: 0 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
    color: var(--ventia-color-text-primary);
    text-align: center;
  }

  #custom-text .category-card__arrow {
    margin-bottom: 24px;
  }
}

@media (max-width: 767.98px) {
  #index #custom-text {
    padding: 0;
  }

  #custom-text .category-section {
    padding: 32px 20px;
    background: var(--ventia-color-bg-page);
  }

  #custom-text .category-section__heading {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
    margin-bottom: 20px;
  }

  #custom-text .category-section__title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 26px;
    line-height: normal;
    color: var(--ventia-color-text-primary);
    margin: 0;
  }

  #custom-text .category-section__subtitle {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: normal;
    color: var(--ventia-color-text-secondary);
    margin: 0;
  }

  #custom-text .category-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  #custom-text .category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: 200px;
    padding: 12px;
    background: var(--ventia-color-bg-page);
    border: 1px solid var(--ventia-color-border-default);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
  }

  #custom-text .category-card__image {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 94px;
    aspect-ratio: auto;
  }

  #custom-text .category-card__image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  #custom-text .category-card__title {
    margin-top: 10px;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: normal;
    color: var(--ventia-color-text-primary);
    text-align: center;
  }

  #custom-text .category-card__arrow {
    margin-bottom: 0;
  }
}

@media (min-width: 768px) {
  #custom-text .why-ventia__wrapper {
    max-width: 1440px;
    padding: 0 85px;
    margin: 0 auto;
  }

  #custom-text .why-ventia {
    display: flex;
    align-items: center;
    background: var(--ventia-color-bg-tint);
    border-radius: 12px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 11px 0;
  }

  #custom-text .why-ventia__intro {
    flex: 0 0 255px;
    padding: 0 30px;
  }

  #custom-text .why-ventia__intro-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 21px;
    text-align: left;
    line-height: 26px;
    color: var(--ventia-color-text-primary);
    margin: 0;
  }

  #custom-text .why-ventia__list {
    display: flex;
    flex: 1;
  }

  #custom-text .why-ventia__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 20px;
    border-left: 1px solid rgba(173, 229, 204, 0.9);
  }

  #custom-text .why-ventia__text {
    order: 1;
    margin: 0;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 11px;
    line-height: 14px;
    color: var(--ventia-color-text-primary);
  }

  #custom-text .why-ventia__icon {
    display: none;
  }

  #custom-text .why-ventia__item::before {
    content: '';
    order: 2;
    width: 40px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  #custom-text .why-ventia__item:nth-child(1)::before {
    background-image: url('../img/benefits/benefit-delivery-mobile.svg');
  }

  #custom-text .why-ventia__item:nth-child(2)::before {
    background-image: url('../img/benefits/benefit-availability-mobile.svg');
  }

  #custom-text .why-ventia__item:nth-child(3)::before {
    background-image: url('../img/benefits/benefit-original-mobile.svg');
  }

  #custom-text .why-ventia__item:nth-child(4)::before {
    background-image: url('../img/benefits/benefit-support-mobile.svg');
  }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  #custom-text .why-ventia__wrapper {
    padding: 0;
  }

  #custom-text .why-ventia {
    border-radius: 0;
  }
}

@media (max-width: 767.98px) {
  #custom-text .why-ventia {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px 20px;
    background: var(--ventia-color-bg-tint);
    border-radius: 0;
  }

  #custom-text .why-ventia__intro {
    width: auto;
    padding: 0;
  }

  #custom-text .why-ventia__intro-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 24px;
    line-height: 30px;
    color: var(--ventia-color-text-primary);
    margin: 0;
  }

  #custom-text .why-ventia__intro-title br:first-of-type {
    display: none;
  }

  #custom-text .why-ventia__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
  }

  #custom-text .why-ventia__item {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 12px;
    border-left: none;
  }

  #custom-text .why-ventia__text {
    order: 2;
    margin: 0;
    text-align: left;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    line-height: 18px;
    color: var(--ventia-color-text-primary);
  }

  #custom-text .why-ventia__icon {
    display: none;
  }

  #custom-text .why-ventia__item::before {
    content: '';
    order: 1;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }

  #custom-text .why-ventia__item:nth-child(1)::before {
    background-image: url('../img/benefits/benefit-delivery-mobile.svg');
  }

  #custom-text .why-ventia__item:nth-child(2)::before {
    background-image: url('../img/benefits/benefit-availability-mobile.svg');
  }

  #custom-text .why-ventia__item:nth-child(3)::before {
    background-image: url('../img/benefits/benefit-original-mobile.svg');
  }

  #custom-text .why-ventia__item:nth-child(4)::before {
    background-image: url('../img/benefits/benefit-support-mobile.svg');
  }
}

@media (max-width: 767.98px) {
  #index .featured-products {
    padding: 32px 20px;
    background: var(--ventia-color-bg-page);
  }

  .featured-products .products-section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 26px;
    text-transform: none !important;
    color: var(--ventia-color-text-primary);
    text-align: left;
    margin: 0 0 20px;
  }

  .featured-products .products {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start !important;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0;
    padding: 0 0 4px;
  }

  .featured-products .product {
    flex: 0 0 auto !important;
    width: 268px !important;
    max-width: 268px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .featured-products .thumbnail-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 16px 16px 14px;
    background: var(--ventia-color-bg-page);
    border: 1px solid var(--ventia-color-border-default);
    border-radius: 12px;
  }

  .featured-products .highlighted-informations {
    display: none;
  }

  .featured-products .product-title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
  }

  .featured-products .product-title a {
    color: var(--ventia-color-text-primary);
    text-decoration: none;
  }

  .featured-products .product-price-and-shipping {
    margin: 0;
  }

  .featured-products .price {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 21px;
    color: var(--ventia-color-text-primary);
  }

  .featured-products .product-list-reviews,
  .featured-products .product-flags {
    display: none;
  }

  .featured-products .all-product-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    gap: 8px;
    height: 44px;
    margin: 20px auto 0;
    padding: 0 16px;
    background: var(--ventia-color-brand-primary);
    border-radius: var(--ventia-radius-12);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    float: none !important;
    transition: var(--ventia-transition-button);
  }

  .featured-products .all-product-link:hover {
    background: var(--ventia-color-brand-primary-hover);
    color: #fff;
  }

  .featured-products .all-product-link .material-icons {
    display: none;
  }
}

@media (min-width: 768px) {
  .featured-products {
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 85px;
    background: var(--ventia-color-bg-page);
  }

  .featured-products .products-section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 28px;
    line-height: 34px;
    text-transform: none !important;
    color: var(--ventia-color-text-primary);
    text-align: center;
    margin: 0 0 22px;
  }

  .featured-products .products {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: flex-start !important;
    width: fit-content;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 23px;
    overflow-x: visible;
    margin: 0;
    padding: 0;
  }

  .featured-products .product {
    flex: 1 1 196px !important;
    width: auto !important;
    min-width: 196px !important;
    max-width: 300px !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .featured-products .thumbnail-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    padding: 16px 16px 14px;
    background: var(--ventia-color-bg-page);
    border: 1px solid var(--ventia-color-border-default);
    border-radius: 12px;
  }

  .featured-products .product-title {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 13px;
    line-height: 16px;
  }

  .featured-products .product-title a {
    color: var(--ventia-color-text-primary);
    text-decoration: none;
  }

  .featured-products .product-price-and-shipping {
    margin: 0;
  }

  .featured-products .price {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 17px;
    line-height: 21px;
    color: var(--ventia-color-text-primary);
  }

  .featured-products .product-list-reviews,
  .featured-products .product-flags {
    display: none;
  }

  .featured-products .all-product-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    gap: 8px;
    height: 44px;
    margin: 20px auto 0;
    padding: 0 16px;
    background: var(--ventia-color-brand-primary);
    border-radius: var(--ventia-radius-12);
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    float: none !important;
    transition: var(--ventia-transition-button);
  }

  .featured-products .all-product-link:hover {
    background: var(--ventia-color-brand-primary-hover);
    color: #fff;
  }

  .featured-products .all-product-link .material-icons {
    display: none;
  }
}

@media (max-width: 767.98px) {
  #footer {
    background: var(--ventia-color-bg-soft);
  }

  #footer .footer-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--ventia-color-bg-soft);
    padding: 24px 20px;
    margin-top: 0;
  }

  #footer .footer-logo {
    display: block;
    height: 60px;
    width: 124px;
  }

  #footer .footer-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  #footer .footer-container .container,
  #footer .footer-container .row,
  #footer .col-md-6.links,
  #footer .col-md-6.links .row {
    display: contents;
  }

  #footer .wrapper,
  #footer #block_myaccount_infos,
  #footer .block-contact {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #footer .wrapper .title,
  #footer #block_myaccount_infos .title,
  #footer .block-contact .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 52px;
    margin: 0;
    padding: 14px 0;
    border-bottom: 1px solid var(--ventia-color-border-default);
    cursor: pointer;
  }

  #footer .wrapper .title .h3,
  #footer #block_myaccount_infos .title .h3,
  #footer .block-contact .title .h3 {
    margin: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: var(--ventia-color-text-primary);
  }

  #footer .navbar-toggler.collapse-icons {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
  }

  #footer .navbar-toggler.collapse-icons .material-icons {
    display: none !important;
  }

  #footer .navbar-toggler.collapse-icons::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../img/icon-chevron-down.svg') no-repeat center / contain;
    transition: transform 0.2s ease;
  }

  #footer .title[aria-expanded='true'] .navbar-toggler.collapse-icons::before {
    transform: rotate(180deg);
  }

  #footer .wrapper ul,
  #footer .account-list,
  #footer #contact-infos {
    list-style: none;
    margin: 0;
    padding: 12px 0 4px;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    color: var(--ventia-color-text-secondary);
  }

  #footer .wrapper ul {
    background-color: transparent;
  }

  #footer .wrapper ul li,
  #footer .account-list li {
    padding: 6px 0;
  }

  #footer .wrapper ul li {
    border-bottom: none;
  }

  #footer .wrapper ul a,
  #footer .account-list a,
  #footer #contact-infos a {
    color: inherit;
    text-decoration: none;
  }

  #footer .footer-container p.text-sm-center {
    text-align: left;
    margin: 8px 0 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: var(--ventia-color-text-secondary);
  }

  #footer .footer-container p.text-sm-center a {
    color: inherit;
    text-decoration: none;
  }

  #footer .wrapper .title.clearfix::after {
    display: none;
  }
}

@media (min-width: 1200px) {
  .featured-products .products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-left: auto;
    margin-right: auto;
    width: fit-content;
  }
}

@media (min-width: 768px) {
  #footer {
    background: #f3f4f6;
    padding-top: 0;
  }

  #footer .footer-container {
    display: grid;
    grid-template-columns: auto repeat(4, 1fr);
    grid-template-areas:
      'logo col1 col2 col3 col4'
      'copyright copyright copyright copyright copyright';
    column-gap: 40px;
    row-gap: 24px;
    align-items: start;
    max-width: 1440px;
    margin: 0 auto;
    padding: 32px 85px 24px;
    background: #f3f4f6;
  }

  #footer .footer-container .container,
  #footer .footer-container .row,
  #footer .col-md-6.links,
  #footer .col-md-6.links .row {
    display: contents;
  }

  #footer .footer-logo {
    grid-area: logo;
    display: block;
    width: 151px;
    height: 37px;
  }

  #footer .footer-logo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  #footer .wrapper,
  #footer #block_myaccount_infos,
  #footer .block-contact {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    flex: none !important;
    float: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-wrap: break-word;
  }

  #footer .wrapper {
    grid-area: col1;
  }

  #footer .col-md-6.links .wrapper + .wrapper {
    grid-area: col2;
  }

  #footer #block_myaccount_infos {
    grid-area: col3;
  }

  #footer .block-contact {
    grid-area: col4;
  }

  #footer .title {
    display: none;
  }

  #footer .wrapper > p.h3,
  #footer #block_myaccount_infos > p.h3,
  #footer .block-contact > p.h4 {
    margin: 0 0 12px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: none !important;
    color: var(--ventia-color-text-primary);
  }

  #footer #block_myaccount_infos > p.h3 a {
    font-family: 'Poppins', sans-serif;
    font-weight: 600 !important;
    font-size: 13px !important;
    text-transform: none !important;
    color: var(--ventia-color-text-primary) !important;
  }

  #footer .collapse {
    display: block !important;
  }

  #footer .wrapper ul,
  #footer .account-list,
  #footer #contact-infos {
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    line-height: 1.8;
    color: #374151;
  }

  #footer .wrapper ul li,
  #footer .account-list li {
    margin: 0;
    padding: 0;
    border: none;
  }

  #footer .wrapper ul a,
  #footer .account-list a,
  #footer #contact-infos a {
    color: inherit;
    text-decoration: none;
  }

  #footer .wrapper ul a:hover,
  #footer .account-list a:hover {
    color: var(--ventia-color-brand-primary);
  }

  #footer .footer-container .col-md-12 {
    grid-area: copyright;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
  }

  #footer .footer-container p.text-sm-center {
    text-align: left;
    margin: 0;
    padding-top: 20px;
    border-top: 1px solid #d1d5db;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: var(--ventia-color-text-secondary);
  }

  #footer .footer-container p.text-sm-center a {
    color: inherit;
    text-decoration: none;
  }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  #footer .footer-container {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
      'logo logo logo logo'
      'col1 col2 col3 col4'
      'copyright copyright copyright copyright';
  }
}

/* ==========================================================================
   Breadcrumb — mobile (wg Figma "02 Category introduction / Mobile",
   node 146-105 — tylko warstwa "Breadcrumb", reszta ramki poza zakresem).
   Motyw bazowy już dostarcza separator "/" (li::after, wyłączony na
   :last-child) i chowa breadcrumb na data-depth="1" (strona główna) —
   tu tylko restylizacja kolorów/typografii/odstępów.
   ========================================================================== */

@media (max-width: 767.98px) {
  .breadcrumb {
    padding: 20px 20px 0;
    margin: 0;
    background: var(--ventia-color-bg-page);
  }

  .breadcrumb li,
  .breadcrumb li a,
  .breadcrumb li span {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 11px;
    color: var(--ventia-color-text-secondary);
  }

  .breadcrumb li a {
    text-decoration: none;
  }

  .breadcrumb li::after {
    margin: 0 6px;
    color: var(--ventia-color-text-secondary);
  }
}

/* Hide on both mobile and desktop */
body:is(#category, #search, #best-sales, #new-products, #prices-drop) #subcategories {
  display: none;
}

/* #js-product-list-header to jedyny H1 tych stron. Na display: none wypadał
   z drzewa dostępności i axe raportował page-has-heading-one — strona bez
   nagłówka pierwszego poziomu. Ukryty wizualnie zostaje dla czytników. */
body:is(#category, #search, #best-sales, #new-products, #prices-drop) #js-product-list-header {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

body:is(#category, #search, #best-sales, #new-products, #prices-drop) .block-categories,
body:is(#category, #search, #best-sales, #new-products, #prices-drop) .block-categories .category-top-menu {
  margin-bottom: 0;
}

/* Classic reserves 20px each side; the tabs below need that room to keep their
   label on one line in the narrow left column. */
body:is(#category, #search, #best-sales, #new-products, #prices-drop) .block-categories {
  padding-right: 12px;
  padding-left: 12px;
}

/* Breadcrumb — desktop (wg Figma "02 Category introduction / Section",
   node 111-64 — tylko warstwa "Breadcrumb", reszta ramki poza zakresem).
   Ponownie wykorzystuje mechanizm separatora "/" z motywu bazowego. */
@media (min-width: 768px) {
  .breadcrumb {
    padding: 20px 85px 0;
    margin: 0;
    background: var(--ventia-color-bg-page);
  }

  .breadcrumb li,
  .breadcrumb li a,
  .breadcrumb li span {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: var(--ventia-color-text-secondary);
  }

  .breadcrumb li a {
    text-decoration: none;
  }

  .breadcrumb li::after {
    margin: 0 6px;
    color: var(--ventia-color-text-secondary);
  }
}

/* Category title (.category-top-menu a.h6) — mobile + desktop, wg Figma
   "02 Category introduction / Mobile" node 146-105, warstwa "Category title" */
.category-top-menu a.h6,
#search_filters .h6 {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 30px;
  line-height: normal;
  text-transform: none !important;
  color: var(--ventia-color-text-primary);
}

/* Subcategory tabs (.category-sub-menu) — normal (node 147-110) / hover
   (node 147-108). Realny HTML nie ma podtytułu "X produktów" ani ikony
   markera z Figmy, więc stylujemy tylko to, co faktycznie istnieje. */
.category-sub-menu {
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* An item that has children holds three things: the tab link, the expand toggle
   and the .collapse panel with the sub-categories. Laid out as one flex row they
   shared a line, so the tab was squeezed down to its own border and the panel
   ended up beside the tab, outside #left-column. Two grid rows in a single
   column keep the tab on the first row and put the panel on the second, which is
   also what makes the collapse animation a plain height transition again.
   flex-shrink: 0 keeps a tab at its label width instead of being squeezed until
   the text wraps; the row scrolls instead (see the mobile block below). */
.block-categories .category-sub-menu li,
.block-categories .category-sub-menu li[data-depth] {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 0 0 auto;
  margin: 0;
}

/* The dash classic prefixes deeper items with would land in the grid as an item
   of its own; the nesting reads off the indent below instead. */
.block-categories .category-sub-menu li:not([data-depth='0']):not([data-depth='1'])::before {
  content: none;
}

/* classic gives the depth-0 link a 5px top margin and keeps it inline-block,
   which drops the tab off the centre of its row — visible as soon as anything
   else sits in the same row, such as the expand toggle. */
.block-categories .category-sub-menu li > a,
.block-categories .category-sub-menu li[data-depth='0'] > a {
  grid-area: 1 / 1;
  display: flex;
  width: auto;
  min-width: 0;
  margin: 0;
}

/* The toggle shares the tab's grid cell rather than taking a column of its own,
   so a tab with children stays exactly as wide as one without. classic pins it
   with position: absolute / top: 0, which anchored it to the top edge of the
   whole item — off centre against the label, and further off once the item grew
   a second row. */
.block-categories .category-sub-menu .collapse-icons,
.block-categories .category-sub-menu .arrows {
  grid-area: 1 / 1;
  position: static;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  justify-self: end;
  width: 24px;
  height: 24px;
  margin: 0 8px 0 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}

.block-categories .category-sub-menu .collapse-icons .material-icons,
.block-categories .category-sub-menu .arrows .material-icons {
  margin: 0;
  font-size: 18px;
  line-height: 18px;
}

/* Reserve the toggle's corner so a long label never runs underneath it. */
.block-categories .category-sub-menu li:has(> .collapse-icons) > a,
.block-categories .category-sub-menu li:has(> .arrows) > a {
  padding-right: 40px !important;
}

.block-categories .category-sub-menu li > .collapse,
.block-categories .category-sub-menu li > .collapsing {
  grid-area: 2 / 1;
  min-width: 0;
}

/* A nested menu is a list under its parent tab, never the horizontally
   scrolling strip the top-level one turns into on mobile. */
.block-categories .category-sub-menu .category-sub-menu {
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 0;
  padding-left: 12px;
  overflow: visible;
}

.block-categories .category-sub-menu .category-sub-menu a,
.block-categories .category-sub-menu .category-sub-link {
  font-size: 11px;
  white-space: normal;
  overflow-wrap: anywhere;
}

.category-sub-menu a {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  padding: 12px 10px !important;
  background: var(--ventia-color-bg-page);
  border: 1px solid #d9e0e5;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 11px;
  line-height: 17px;
  white-space: nowrap;
  color: var(--ventia-color-text-primary);
  text-decoration: none;
}

.category-sub-menu a:hover {
  background: #e5fff0;
  border-color: #00b054;
  color: var(--ventia-color-brand-primary);
}

/* Only ever a phone control — custom.js drives it, see the drill-down module. */
.category-drill-back {
  display: none;
}

@media (max-width: 767.98px) {
  .category-sub-menu {
    overflow-x: auto;
    overflow-y: hidden;
  }

  .category-drill {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .category-drill > .category-sub-menu {
    flex: 1 1 auto;
    min-width: 0;
  }

  .category-drill.is-drilled > .category-drill-back {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 43px;
    padding: 0;
    background: var(--ventia-color-bg-page);
    border: 1px solid #d9e0e5;
    border-radius: 10px;
    color: var(--ventia-color-text-primary);
    cursor: pointer;
  }

  .category-drill-back .material-icons {
    font-size: 20px;
    line-height: 20px;
  }

  /* Every level above the visible one drops out of the layout, so the level
     being shown becomes a run of items in the scrolling row itself rather than a
     panel nested inside it. */
  .category-drill.is-drilled .category-sub-menu li.is-open,
  .category-drill.is-drilled .category-sub-menu li.is-open > .collapse,
  .category-drill.is-drilled .category-sub-menu li.is-open > .collapse > .category-sub-menu {
    display: contents;
  }

  .category-drill.is-drilled .category-sub-menu li.is-open > a,
  .category-drill.is-drilled .category-sub-menu li.is-open > .collapse-icons,
  .category-drill.is-drilled .category-sub-menu li.is-open > .arrows {
    display: none;
  }

  /* What the level being left behind is: the siblings of an item on the path. */
  .category-drill.is-drilled .category-sub-menu > li.is-open ~ li,
  .category-drill.is-drilled .category-sub-menu > li:has(~ li.is-open) {
    display: none;
  }

  /* Row again, not the indented column the desktop panel nests. */
  .category-drill.is-drilled .category-sub-menu .category-sub-menu a,
  .category-drill.is-drilled .category-sub-menu .category-sub-link {
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .category-drill[data-drill-motion='in'] > .category-sub-menu {
    animation: ventia-drill-in 200ms ease-out;
  }

  .category-drill[data-drill-motion='out'] > .category-sub-menu {
    animation: ventia-drill-out 200ms ease-out;
  }
}

@keyframes ventia-drill-in {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
}

@keyframes ventia-drill-out {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .category-drill > .category-sub-menu {
    animation: none !important;
  }
}

@media (min-width: 768px) {
  .category-sub-menu {
    flex-direction: column;
  }
}

/* .showing — wg Figma "Text / Range summary" (node 104-97, w ramce 115-64) */
.showing {
  text-align: left !important;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 11px;
  line-height: 18px;
  color: var(--ventia-color-text-secondary);
}

/* .total-products — desktop, wg Figma "Text / Product count" (node 104-96) */
.total-products p {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 22px;
  color: var(--ventia-color-text-primary);
}

/* .select-title (przycisk sortowania "Wybierz") — wg Figma "Select / Sort"
   (node 148-111) */
.select-title {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 0 12px !important;
  margin: 0 !important;
  background: var(--ventia-color-bg-page) !important;
  border: 1px solid var(--ventia-color-border-default) !important;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: var(--ventia-color-text-primary) !important;
}

.select-title .material-icons {
  display: none !important;
}

.select-title::after {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: url('../img/icon-chevron-down-sort.svg') no-repeat center / contain;
}

/* #search_filter_toggler (przycisk "Filtr") — wg Figma "Button / Otwórz
   filtry" (node 148-107) */
#search_filter_toggler {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 0 14px;
  margin: 0;
  background: var(--ventia-color-brand-primary);
  border: none;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: none !important;
  color: #fff;
}

#search_filter_toggler::before {
  content: '';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: url('../img/icon-filter.svg') no-repeat center / contain;
}

/* .btn.btn-secondary.ok (przycisk "Tak" filtrów mobilnych) — wg Figma
   "Button / Primary" (node 152-117) */
@media (max-width: 767.98px) {
  #search_filter_controls {
    padding: 0 20px;
    margin-bottom: 16px;
  }

  .btn.btn-secondary.ok {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    margin: 0 !important;
    background: var(--ventia-color-brand-primary);
    border: none;
    border-radius: var(--ventia-radius-12);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: none !important;
    color: #fff;
  }

  .btn.btn-secondary.ok .material-icons {
    display: none;
  }

  /* Same shape as .btn.btn-secondary.ok, gray instead of green */
  .btn.btn-tertiary.js-search-filters-clear-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    margin: 0 !important;
    margin-bottom: 10px !important;
    background: var(--ventia-color-border-default);
    border: none;
    border-radius: var(--ventia-radius-12);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: none !important;
    color: #374151;
  }

  .btn.btn-tertiary.js-search-filters-clear-all .material-icons {
    color: #374151;
  }

  body:is(#category, #search, #best-sales, #new-products, #prices-drop) #left-column #search_filters .facet ul li {
    padding: 0.8rem;
  }

  #search_filters .facet .facet-label a {
    font-size: 13px;
  }

  .facet-dropdown {
    margin-bottom: 10px;
  }

  #search_filters_wrapper {
    position: absolute;
    width: 100%;
    left: 0;
    top: 10px;
    background-color: #fff;
  }

  .dropdown-menu {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid var(--ventia-color-border-default) !important;
  }

  .thumbnail-container {
    padding: 12px;
    border: 1px solid var(--ventia-color-border-default);
    border-radius: 12px;
    background-color: #fff;
  }

  .product-miniature .product-title a {
    color: var(--ventia-color-text-primary);
    font-family: Poppins;
    font-size: 11px;
    font-style: normal;
    font-weight: 700;
    line-height: 15px; /* 136.364% */
  }

  .page-list li:has(.previous),
  .page-list li:has(.next) {
    display: block;
    width: 100%;
  }

  .page-list li:has(.previous) a,
  .page-list li:has(.next) a {
    margin-left: auto;
    margin-right: auto;
    width: fit-content !important;
    float: none;
  }
}

@media (min-width: 768px) {
  #search_filters .facet-title {
    font-weight: 700;
  }

  #search_filters .facet .facet-dropdown,
  #search_filters .facet .facet-dropdown .select-title {
    padding: 0;
  }

  .dropdown-menu {
    border-radius: 10px !important;
    overflow: hidden !important;
    border: 1px solid var(--ventia-color-border-default) !important;
    max-height: 400px !important;
    overflow: auto !important;
  }

  .thumbnail-container {
    padding: 12px;
    border: 1px solid var(--ventia-color-border-default);
    border-radius: 12px;
    background-color: #fff;
  }

  .product-miniature .product-title a {
    color: var(--ventia-color-text-primary);
    font-family: Poppins;
    font-size: 13px;
    font-style: normal;
    font-weight: 700;
    line-height: 15px; /* 123.077% */
  }

  .active_filters {
    background: transparent;
    border-radius: 12px;
    border: 1px solid var(--ventia-color-brand-primary);
    color: var(--ventia-color-brand-primary);
    padding: 10px;
    padding-bottom: 0;
  }

  .active_filters .active-filter-title {
    display: block;
  }

  .active_filters .filter-block {
    background: #e5fff0;
    border-radius: 12px;
    border: 1px solid var(--ventia-color-brand-primary);
  }

  .active_filters .filter-block .close {
    color: var(--ventia-color-brand-primary);
  }

  #_desktop_search_filters_clear_all .btn.btn-tertiary.js-search-filters-clear-all {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    padding: 12px 16px;
    margin: 0 !important;
    margin-bottom: 10px !important;
    background: var(--ventia-color-border-default);
    border: none;
    border-radius: var(--ventia-radius-12);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: none !important;
    color: #374151;
  }
}

#search_filters_wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#search_filters .facet-title {
  font-size: 14px !important;
}

.facet-dropdown {
  background: none;
  border: none;
  box-shadow: none;
}

/* Kontrolki paginacji (.page-list) — mobile + desktop, wg Figma
   "Pagination / Controls" (node 105-71) */
.page-list {
  display: flex !important;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  background: transparent;
  text-align: left !important;
}

.page-list li {
  margin: 0;
}

.page-list li a,
.page-list li span.spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--ventia-color-text-primary);
  text-decoration: none;
  transition: var(--ventia-transition-button), border-color 0.15s ease;
}

.page-list li a:hover {
  background: var(--ventia-color-brand-primary-light);
  border-color: var(--ventia-color-brand-primary);
  color: var(--ventia-color-brand-primary-dark);
}

.page-list li.current a {
  background: var(--ventia-color-brand-primary);
  border-color: var(--ventia-color-brand-primary);
  color: #fff;
}

.page-list li.current a:hover {
  background: var(--ventia-color-brand-primary-hover);
  border-color: var(--ventia-color-brand-primary-hover);
  color: #fff;
}

.page-list li a.next {
  gap: 4px;
  width: auto;
  padding: 0 12px;
}

.page-list li a.next .material-icons {
  font-size: 16px;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .pagination {
    display : grid;
    justify-content: center;
  }

  .pagination > div {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    float: none;
  }
}

@media (min-width: 1200px) {
  .pagination {
    display : flex;
    justify-content: space-between;
  }

  .pagination > div {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
    float: none;
  }

  .pagination .page-list {
    margin-left: auto;
    margin-right: 0;
    justify-content: flex-end;
  }

  .pagination .page-list::after {
    display: none;
  }
}

.product-images>li.thumb-container .thumb.selected,
.product-images>li.thumb-container .thumb:hover,
#product-modal .modal-content .modal-body .product-images img:hover {
  border: var(--ventia-color-brand-primary) 3px solid;
  border-radius: 10px;
}

#product .h1 {
  color: var(--ventia-color-text-primary);
  font-family: Poppins;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 33px; /* 126.923% */
}

.product-price {
  color: var(--ventia-color-text-primary);
  font-family: Poppins;
  font-size: 28px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
}

.product-prices > div {
  margin-bottom: 0;
}

.product-prices .tax-shipping-delivery-label {
  margin-bottom: 30px;
  color: var(--ventia-color-text-secondary);
  font-family: Poppins;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.product-information,
.product-container .tabs {
  color: var(--ventia-color-text-primary);
  font-family: Poppins;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 18px; /* 163.636% */
}

.product-container .tabs {
  padding: 0;
}

.btn-primary {
  border-radius: 10px;
  background-color: var(--ventia-color-brand-primary);
  transition: var(--ventia-transition-button);
}

.btn-primary:hover:not(:disabled):not(.disabled) {
  background-color: var(--ventia-color-brand-primary-hover);
}

.product-availability .alert .alert-content-wrapper {
  align-items: center;
}

.product-availability .alert-success {
  color: var(--ventia-color-brand-primary);
  background-color: var(--ventia-color-brand-primary-light);
  border: none;
  border-radius: 10px;
}

.product-availability .alert-warning {
  border-radius: 10px;
}

.blockreassurance_product .item-product {
  margin-right: 10px;
}

#product .tabs .nav-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  justify-content: flex-start;
  align-items: flex-end;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 3px;
}

.tabs .nav-tabs .nav-link {
    color: #7a7a7a;
    border: 0 solid transparent;
    border-bottom: 3px solid transparent;
    width: min-content;
    color: var(--ventia-color-text-secondary);
    font-family: Poppins;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.tabs .nav-tabs .nav-link.active,
.tabs .nav-tabs .nav-link:hover {
    border: 0;
    border-bottom: var(--ventia-color-brand-primary) 3px solid;
    color: var(--ventia-color-brand-primary);
    font-weight: 700;
}

.product-accessories .h5,
.featured-products h2 {
  color: var(--ventia-color-text-primary);
  font-family: Poppins;
  font-size: 26px;
  font-style: normal;
  font-weight: 700;
  line-height: 33px; /* 126.923% */
}

.product-accessories {
  margin-top: 3rem;
}

.featured-products {
  padding: 0;
}

.product-attachments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-attachments .attachment {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--ventia-color-border-default);
}

.product-attachments .attachment p {
  display: none;
}

.product-attachments .attachment h4 {
  overflow: hidden;
  color: var(--ventia-color-text-primary);
  text-overflow: ellipsis;
  font-family: Poppins;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.product-attachments .attachment a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product-attachments .attachment > a {
  color: var(--ventia-color-text-secondary);
}

.product-attachments .attachment > a::after {
  display: block;
  content: '';
  width: 24px;
  height: 24px;
  background-image: url('../img/icon_download.svg');
  background-repeat: no-repeat;
  background-size: 18px 18px;
  background-position: center;
  border-radius: 4px;
  border: 1px solid var(--ventia-color-text-secondary);
}

.tab-content #description,
.tab-content #product-details {
  font-size: 13px;
}

@media (min-width: 768px) {
  .product-container {
    margin-top: 30px;
  }

  #product .tabs .nav-tabs {
    justify-content: flex-start;
  }

  .tabs .nav-tabs .nav-link {
    width: auto;
    color: var(--ventia-color-text-secondary);
    font-family: Poppins;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .tab-content #description,
  .tab-content #product-details {
    font-size: 14px;
  }
}
/* ==========================================================================
   Koszyk (#cart) — revamp wg design systemu z Figmy "Tomek" (node 164-115):
   te same tokeny co lista produktów — karty biel/1px border/12px radius,
   Poppins, zieleń brandowa, kontrolki 48px. Czysty CSS na HTML-u motywu
   bazowego (bez nadpisań .tpl).
   ========================================================================== */

#cart .card.cart-container,
#cart .card.cart-summary {
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: var(--ventia-radius-12);
  box-shadow: none;
}

#cart .cart-grid {
  margin-top: 8px;
  margin-bottom: 32px;
}

#cart .cart-grid-body .card-block {
  padding: 20px;
}

#cart .cart-grid-body .cart-overview {
  padding: 0 20px;
}

#cart .cart-grid-body .card-block h1 {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 26px;
  line-height: normal;
  text-transform: none;
  color: var(--ventia-color-text-primary);
}

#cart .cart-container hr.separator {
  margin: 0;
  border-top: 1px solid var(--ventia-color-border-default);
}

#cart .cart-item {
  padding: 20px 0;
  border-bottom: 1px solid var(--ventia-color-border-default);
}

#cart .cart-item:last-child {
  padding-bottom: 8px;
  border-bottom: none;
}

/* Miniatura produktu — jasnoszara ramka jak kafel z listy produktów;
   zdjęcie bez kadrowania (contain), więc passe-partout 6px */
#cart .product-line-grid-left .product-image {
  display: block;
  padding: 6px;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

#cart .product-line-grid-left .product-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Nazwa produktu — typografia jak .product-title na liście produktów */
#cart .product-line-grid-body .product-line-info a.label {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  color: var(--ventia-color-text-primary);
  text-decoration: none;
}

#cart .product-line-grid-body .product-line-info a.label:hover {
  color: var(--ventia-color-brand-primary);
}

/* Szablon bazowy wstawia gołe <br/> między ceną a atrybutami */
#cart .product-line-grid-body > br {
  display: none;
}

#cart .product-line-grid-body .product-line-info {
  margin-bottom: 4px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--ventia-color-text-secondary);
}

#cart .product-line-grid-body .product-line-info .label,
#cart .product-line-grid-body .product-line-info .value {
  font-size: 12px;
  color: var(--ventia-color-text-secondary);
}

/* Cena jednostkowa pod nazwą */
#cart .product-line-grid-body .product-price {
  margin: 2px 0 6px;
}

#cart .product-line-grid-body .product-price .price {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 20px;
  color: var(--ventia-color-text-primary);
}

#cart .product-line-grid-body .product-price .unit-price-cart {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 11px;
  color: var(--ventia-color-text-secondary);
}

#cart .product-line-grid-body .product-discount .regular-price {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--ventia-color-text-secondary);
  text-decoration: line-through;
}

#cart .product-line-grid-body .product-discount .discount {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: var(--ventia-color-bg-tint);
  border-radius: 6px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: var(--ventia-color-brand-primary);
}

/* Stepper ilości (bootstrap-touchspin z motywu bazowego) — kontrolka 48px
   w stylu selecta sortowania z listy produktów */
#cart .qty .bootstrap-touchspin {
  display: inline-flex;
  align-items: stretch;
  float: none;
  height: 48px;
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: none;
}

#cart .qty .js-cart-line-product-quantity {
  width: 48px;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ventia-color-text-primary);
}

/* Input przed inicjalizacją touchspina przez JS — ta sama rama */
#cart .qty > input.js-cart-line-product-quantity {
  height: 48px;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: 10px;
}

#cart .qty .input-group-btn-vertical {
  display: flex;
  flex-direction: column;
  width: 30px;
  border-left: 1px solid var(--ventia-color-border-default);
}

#cart .qty .btn-touchspin {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: #fff;
  border: none;
  border-radius: 0;
}

#cart .qty .btn-touchspin:hover {
  background: var(--ventia-color-bg-soft);
}

#cart .qty .btn-touchspin.bootstrap-touchspin-up {
  border-bottom: 1px solid var(--ventia-color-border-default);
}

#cart .qty .btn-touchspin .material-icons {
  position: static;
  font-size: 16px;
  color: var(--ventia-color-text-secondary);
}

/* Cena łączna pozycji — wyrównana do wysokości steppera */
#cart .product-line-grid-right .price .product-price {
  display: flex;
  align-items: center;
  height: 48px;
  line-height: normal;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ventia-color-text-primary);
}

/* Usunięcie pozycji — kwadratowy przycisk 44px jak ikony w nagłówku mobile */
#cart .cart-line-product-actions .remove-from-cart {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 2px 0 0;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: 10px;
  color: var(--ventia-color-text-secondary);
}

#cart .cart-line-product-actions .remove-from-cart:hover {
  background: var(--ventia-color-bg-soft);
  color: var(--ventia-color-text-primary);
}

#cart .cart-line-product-actions .remove-from-cart .material-icons {
  float: none;
  font-size: 20px;
}

/* Desktop: linia produktu jako flex (miniatura | opis | stepper · cena · kosz) —
   kolumny md-3/md-4/md-5 motywu bazowego nie mieszczą kontrolek 48px
   (kosz wystawał poza padding karty) */
@media (min-width: 768px) {
  #cart .product-line-grid {
    display: flex;
    align-items: center;
    gap: 20px;
  }

  #cart .product-line-grid > .clearfix {
    display: none;
  }

  #cart .product-line-grid .product-line-grid-left,
  #cart .product-line-grid .product-line-grid-body,
  #cart .product-line-grid .product-line-grid-right {
    float: none;
    width: auto;
    max-width: none;
    padding: 0;
  }

  #cart .product-line-grid .product-line-grid-left {
    flex: 0 0 104px;
  }

  #cart .product-line-grid .product-line-grid-body {
    flex: 1 1 auto;
    min-width: 0;
  }

  #cart .product-line-grid .product-line-grid-right {
    flex: 0 0 auto;
  }

  #cart .product-line-grid-right > .row,
  #cart .product-line-grid-right .col-md-10 > .row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
  }

  #cart .product-line-grid-right > .row > .col-md-10,
  #cart .product-line-grid-right > .row > .col-md-2,
  #cart .product-line-grid-right .qty,
  #cart .product-line-grid-right .price {
    flex: 0 0 auto;
    float: none;
    width: auto;
    max-width: none;
    padding: 0;
  }

  /* Wspólna prawa krawędź kwot niezależnie od długości ceny */
  #cart .product-line-grid-right .price .product-price {
    min-width: 96px;
    justify-content: flex-end;
  }

  #cart .cart-line-product-actions .remove-from-cart {
    margin: 0;
  }
}

/* Link "Kontynuuj zakupy" pod kartą produktów */
#cart .cart-grid-body > a.label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 16px 0 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ventia-color-text-primary);
  text-decoration: none;
}

#cart .cart-grid-body > a.label:hover {
  color: var(--ventia-color-brand-primary);
}

#cart .cart-grid-body > a.label .material-icons {
  font-size: 18px;
}

/* Pusty koszyk */
#cart .cart-overview .no-items {
  display: block;
  padding: 20px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: var(--ventia-color-text-secondary);
}

/* Podsumowanie (prawa kolumna) — jeden schemat paddingów: pion na kontenerze,
   poziom 20px na każdym card-blocku, zero na liniach; wszystkie kwoty
   kończą się na tej samej prawej krawędzi */
#cart .cart-summary .cart-detailed-totals {
  padding-top: 20px;
}

#cart .cart-summary .card-block {
  padding: 0 20px;
}

#cart .cart-summary .card-block.cart-detailed-subtotals {
  padding-bottom: 2px;
}

#cart .cart-summary .checkout.card-block {
  padding: 8px 20px 20px;
}

#cart .cart-summary .cart-summary-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  padding: 0;
  margin: 0 0 10px;
}

/* Clearfixowe ::after zostaje niewidocznym itemem flexa i dokłada gap
   na końcu wiersza — kwoty kończyły się 12px przed krawędzią */
#cart .cart-summary .cart-summary-line::after,
#cart .product-line-grid-right .row::after {
  display: none;
}

#cart .cart-summary .cart-summary-line .label {
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: var(--ventia-color-text-secondary);
}

#cart .cart-summary .cart-summary-line .value {
  float: none;
  margin-left: auto;
  text-align: right;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  color: var(--ventia-color-text-primary);
}

/* Dopisek z detalami dostawy zajmuje pełną szerokość pod linią */
#cart .cart-summary .cart-summary-line > div {
  width: 100%;
}

/* Pozycje "N × nazwa produktu" w podsumowaniu (override szablonu
   cart-detailed-totals.tpl) — nazwa przycinana, kwota zawsze w kolumnie */
#cart .cart-summary .cart-summary-product-line-mini {
  flex-wrap: nowrap;
}

#cart .cart-summary .cart-summary-product-line-mini .label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#cart .cart-summary .cart-summary-product-line-mini .value {
  flex: 0 0 auto;
}

#cart .cart-summary .cart-detailed-subtotals + .cart-summary-totals .cart-total,
#cart .cart-summary .cart-total {
  margin-top: 4px;
  padding: 14px 0 4px;
  border-top: 1px solid var(--ventia-color-border-default);
}

#cart .cart-summary .cart-total .label,
#cart .cart-summary .cart-total .value {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ventia-color-text-primary);
}

/* Pusty koszyk: brak subtotali nad "Razem" — separator wisiałby samotnie
   pod górną krawędzią karty */
#cart .cart-summary .cart-detailed-subtotals:not(:has(.cart-summary-line)) + .cart-summary-totals .cart-total {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* Przycisk "Przejdź do realizacji zamówienia" — Button / Primary
   jak "Otwórz filtry" na liście produktów */
#cart .cart-summary .checkout .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  padding: 12px 16px;
  background: var(--ventia-color-brand-primary);
  border: none;
  border-radius: var(--ventia-radius-12);
  box-shadow: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: none;
  color: #fff;
  transition: var(--ventia-transition-button);
}

#cart .cart-summary .checkout .btn-primary:hover:not(.disabled):not(:disabled) {
  background: var(--ventia-color-brand-primary-hover);
}

#cart .cart-summary .checkout .btn-primary.disabled,
#cart .cart-summary .checkout .btn-primary:disabled {
  background: var(--ventia-color-border-default);
  color: var(--ventia-color-text-secondary);
  opacity: 1;
}

/* Kod promocyjny — całość wyrównana do lewej krawędzi treści karty,
   linki w brandowej zieleni, bez reliktów stylów classica */
#cart .block-promo {
  padding: 0 10px;
  margin: 4px 0 16px;
}

#cart .block-promo p {
  margin: 0;
}

#cart .block-promo .promo-code-button {
  padding: 0;
  text-align: left;
}

#cart .block-promo .promo-code-button a.collapse-button {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ventia-color-brand-primary);
  text-decoration: none;
}

#cart .block-promo .promo-code-button a.collapse-button:hover {
  text-decoration: underline;
}

#cart .block-promo .promo-code {
  padding: 12px 0 0;
  background: transparent;
}

/* "Zamknij" pod formularzem — drugorzędny link tekstowy */
#cart .block-promo .promo-code .cancel-promo {
  display: inline-block;
  margin-top: 12px;
  padding: 0;
  text-align: left;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--ventia-color-text-secondary);
  text-decoration: none;
}

#cart .block-promo .promo-code .cancel-promo:hover {
  color: var(--ventia-color-text-primary);
  text-decoration: underline;
}

/* Błąd kuponu — bez strzałki-dymka z classica */
#cart .block-promo .promo-code .alert-danger {
  margin-top: 12px;
  padding: 10px 12px;
  background: #fdeef0;
  border: 1px solid #f2c6cd;
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: #b02a37;
}

#cart .block-promo .promo-code .alert-danger::after {
  display: none;
}

#cart .block-promo .promo-code .alert-danger .material-icons {
  font-size: 16px;
  vertical-align: text-bottom;
}

#cart .block-promo .promo-code form {
  display: flex;
  gap: 8px;
  text-align: initial;
}

#cart .block-promo .promo-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  text-indent: 0;
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: var(--ventia-color-text-primary);
}

#cart .block-promo .promo-input:focus {
  outline: none;
  border-color: var(--ventia-color-brand-primary);
}

#cart .block-promo .promo-input + button {
  flex: 0 0 auto;
  height: 48px;
  margin: 0;
  padding: 0 18px;
  background: var(--ventia-color-brand-primary);
  border: none;
  border-radius: var(--ventia-radius-12);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: none;
  color: #fff;
}

/* Lista dodanych kuponów */
#cart .block-promo .promo-name .cart-summary-line .label {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  color: var(--ventia-color-text-primary);
}

#cart .block-promo .promo-name .cart-summary-line span {
  color: var(--ventia-color-brand-primary);
}

#cart .block-promo .promo-name .cart-summary-line a .material-icons {
  color: var(--ventia-color-text-secondary);
}

/* Pasek korzyści pod podsumowaniem (cart.tpl override) — zamiast modułu
   blockreassurance; treści i ikony jak w sekcji why-ventia na stronie głównej */
#cart .cart-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0 0;
  padding: 16px;
  background: var(--ventia-color-bg-tint);
  border-radius: var(--ventia-radius-12);
}

#cart .cart-benefits__item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--ventia-color-text-primary);
}

#cart .cart-benefits__item::before {
  content: '';
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

#cart .cart-benefits__item--delivery::before {
  background-image: url('../img/benefits/benefit-delivery-mobile.svg');
}

#cart .cart-benefits__item--original::before {
  background-image: url('../img/benefits/benefit-original-mobile.svg');
}

#cart .cart-benefits__item--support::before {
  background-image: url('../img/benefits/benefit-support-mobile.svg');
}

@media (min-width: 768px) {
  #cart .cart-grid-body .card-block h1 {
    font-size: 28px;
    line-height: 34px;
  }
}

@media (max-width: 767.98px) {
  #cart .cart-item {
    padding: 16px 0;
  }

  #cart .cart-grid-right {
    margin-top: 16px;
  }

  /* Ciaśniejsze paddingi kart na mobile — ten sam schemat co desktop */
  #cart .cart-grid-body .card-block {
    padding: 16px;
  }

  #cart .cart-grid-body .cart-overview {
    padding: 0 16px;
  }

  #cart .cart-summary .cart-detailed-totals {
    padding-top: 16px;
  }

  #cart .cart-summary .card-block {
    padding: 0 16px;
  }

  #cart .cart-summary .checkout.card-block {
    padding: 8px 16px 16px;
  }

  #cart .block-promo {
    padding: 0 16px;
  }

  /* Rząd akcji (stepper + cena + kosz) — ciasne kolumny xs motywu bazowego
     zamieniamy na flex: stepper z lewej, cena i kosz z prawej */
  #cart .product-line-grid-right > .row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
  }

  #cart .product-line-grid-right > .row > .col-xs-4.hidden-md-up {
    display: none;
  }

  #cart .product-line-grid-right > .row > .col-md-10 {
    flex: 1 1 auto;
    float: none;
    width: auto;
    max-width: none;
    padding: 0;
  }

  #cart .product-line-grid-right .col-md-10 > .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
  }

  #cart .product-line-grid-right .qty,
  #cart .product-line-grid-right .price {
    flex: 0 0 auto;
    float: none;
    width: auto;
    max-width: none;
    padding: 0;
  }

  #cart .product-line-grid-right > .row > .text-xs-right {
    flex: 0 0 auto;
    float: none;
    width: auto;
    max-width: none;
    padding: 0;
  }

  #cart .product-line-grid-right .qty .bootstrap-touchspin,
  #cart .product-line-grid-right .qty > input.js-cart-line-product-quantity {
    height: 44px;
  }

  #cart .product-line-grid-right .price .product-price {
    height: 44px;
    justify-content: flex-end;
  }

  #cart .cart-line-product-actions .remove-from-cart {
    margin: 0;
  }
}

/* ==========================================================================
   Zamówienie / checkout (#checkout) — revamp wg design systemu: kroki
   checkoutu jako karty biel/1px border/12px radius, Poppins, zieleń
   brandowa, kontrolki 48px. Czysty CSS na HTML-u motywu bazowego
   (bez nadpisań .tpl). Selektory z prefiksem body#checkout, żeby wygrywać
   ze stylami bazowymi o tej samej specyficzności.
   ========================================================================== */

body#checkout section#content {
  margin-top: 8px;
  margin-bottom: 32px;
}

/* Motyw bazowy zeruje margines linku kontaktowego na checkoucie —
   przywracamy wartość z normalnego headera, żeby wyglądał identycznie */
body#checkout #header .header-nav #_desktop_contact_link #contact-link {
  margin-top: 0.9375rem;
}

/* Motyw bazowy chowa wyszukiwarkę na checkoucie (#checkout #search_widget
   {display: none}) — na desktopie nadpisuje ją grid headera, na mobile
   przywracamy ręcznie, żeby header wyglądał jak na reszcie sklepu */
@media (max-width: 767.98px) {
  body#checkout #header #search_widget {
    display: block;
  }

  /* Bazowe #checkout dokłada pionowy padding do .header-nav —
     zerujemy, żeby mobile header miał identyczną wysokość jak w sklepie */
  body#checkout #header > .header-nav {
    padding: 0;
  }
}

body#checkout a {
  transition: color 0.15s ease;
}

body#checkout a:hover {
  color: var(--ventia-color-brand-primary);
}

body#checkout button {
  cursor: pointer;
}

/* Karty kroków */
body#checkout section.checkout-step {
  padding: 20px 24px;
  margin-bottom: 16px;
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: var(--ventia-radius-12);
  box-shadow: none;
}

/* Motyw bazowy zeruje ramkę ostatniego kroku — przywracamy */
body#checkout section.checkout-step:last-child {
  border: 1px solid var(--ventia-color-border-default);
}

/* Tytuł kroku — numer w kółku + nazwa + edycja po prawej */
body#checkout section.checkout-step .step-title {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: normal;
  text-transform: none;
  color: var(--ventia-color-text-primary);
  border-bottom: none;
}

/* Bazowe dorysowywanie separatorów między krokami — wyłączone */
body#checkout section.checkout-step.-current + .checkout-step .step-title {
  padding-top: 0;
  border-top: none;
}

body#checkout section.checkout-step.-complete:first-of-type .step-title {
  padding-top: 0;
}

/* Otwarty (aktywny) krok — linia pod tytułem */
body#checkout section.checkout-step.-current .step-title {
  padding-bottom: 16px;
  border-bottom: 1px solid var(--ventia-color-border-default);
}

/* Klikalne tytuły kroków (JS dodaje -clickable) — hover tło bg-soft */
body#checkout section.checkout-step.-clickable:not(.-current) .step-title {
  padding: 8px;
  margin: -8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

body#checkout section.checkout-step.-clickable:not(.-current) .step-title:hover {
  background: rgba(0, 169, 80, 0.06);
}

body#checkout section.checkout-step .step-title.not-allowed,
body#checkout section.checkout-step.-unreachable .step-title {
  cursor: default;
}

body#checkout section.checkout-step.-unreachable .step-title:hover {
  background: transparent;
}

/* Numer kroku w kółku 32px */
body#checkout section.checkout-step .step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ventia-color-text-secondary);
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: 50%;
}

body#checkout section.checkout-step.-reachable.-current .step-number {
  width: 32px;
  height: 32px;
  margin: 0;
  font-size: 13px;
  color: #fff;
  background-color: var(--ventia-color-brand-primary);
  border: none;
}

/* Ukończony krok — zielony check w tintowanym kółku */
body#checkout section.checkout-step.-reachable.-complete .step-title .done {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  font-size: 18px;
  color: var(--ventia-color-brand-primary);
  background: var(--ventia-color-bg-tint);
  border-radius: 50%;
}

/* Krok ukończony otwarty ponownie do edycji (client-side) — pokazujemy
   tylko numer, bez dublowania z zielonym checkiem */
body#checkout section.checkout-step.-reachable.-complete.-current .step-title .done {
  display: none;
}

/* Link "Edytuj" przy ukończonym kroku */
body#checkout section.checkout-step.-reachable.-complete .step-title .step-edit {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  float: none;
  margin: 0 0 0 auto;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  text-transform: none;
  color: var(--ventia-color-brand-primary);
}

body#checkout section.checkout-step.-reachable.-complete .step-title .step-edit .edit {
  font-size: 16px;
}

body#checkout section.checkout-step.-reachable.-complete .step-title .step-edit:hover {
  color: #009247;
  text-decoration: underline;
}

/* Krok jeszcze niedostępny — wyciszony, bez półprzezroczystości */
body#checkout section.checkout-step.-unreachable .step-title {
  opacity: 1;
  color: var(--ventia-color-text-secondary);
}

body#checkout section.checkout-step.-unreachable .step-number {
  color: var(--ventia-color-text-secondary);
  background: var(--ventia-color-bg-soft);
}

/* Treść kroku */
body#checkout section.checkout-step .content {
  padding: 20px 0 4px;
}

/* Zakładki "Zamówienie jako gość" / "Zaloguj się" */
body#checkout .checkout-step .nav-inline {
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 0 0 4px;
}

body#checkout .checkout-step .nav-inline .nav-item {
  margin: 0;
}

body#checkout .checkout-step .nav-inline .nav-separator {
  display: none;
}

body#checkout .checkout-step .nav-inline .nav-link {
  padding: 0 0 6px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ventia-color-text-secondary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

body#checkout .checkout-step .nav-inline .nav-link:hover {
  color: var(--ventia-color-text-primary);
}

body#checkout .checkout-step .nav-inline .nav-link.active {
  color: var(--ventia-color-text-primary);
  border-bottom-color: var(--ventia-color-brand-primary);
}

/* Formularze — etykiety */
body#checkout .form-control-label {
  padding-top: 14px;
  padding-bottom: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  color: var(--ventia-color-text-primary);
  text-align: left;
}

body#checkout .form-group.row {
  margin-bottom: 14px;
}

/* Formularze — inputy i selecty 48px */
body#checkout .form-control {
  height: 48px;
  padding: 0 14px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--ventia-color-text-primary);
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: 10px;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body#checkout .form-control:focus {
  color: var(--ventia-color-text-primary);
  background-color: #fff;
  border-color: var(--ventia-color-brand-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 169, 80, 0.12);
}

body#checkout select.form-control {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 36px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2368758f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center;
}

body#checkout textarea.form-control {
  height: auto;
  min-height: 96px;
  padding: 12px 14px;
}

/* Hasło z przyciskiem "Pokaż" */
body#checkout .input-group.focus {
  outline: none;
}

body#checkout .input-group .form-control {
  border-right: none;
  border-radius: 10px 0 0 10px;
}

body#checkout .input-group .input-group-btn > .btn {
  height: 48px;
  padding: 0 14px;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 11px;
  text-transform: none;
  color: var(--ventia-color-text-secondary);
  background: var(--ventia-color-bg-soft);
  border: 1px solid var(--ventia-color-border-default);
  border-radius: 0 10px 10px 0;
  box-shadow: none;
}

body#checkout .input-group .input-group-btn > .btn {
  transition: background-color 0.15s ease, color 0.15s ease;
}

body#checkout .input-group .input-group-btn > .btn:hover {
  color: var(--ventia-color-text-primary);
  background: var(--ventia-color-border-default);
}

/* Teksty pomocnicze przy polach */
body#checkout .form-control-comment {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: var(--ventia-color-text-secondary);
}

body#checkout div.form-control-comment {
  padding-top: 16px;
}

body#checkout span.form-control-comment {
  display: block;
  margin-top: 6px;
}

/* "Stwórz konto (opcjonalnie)" */
body#checkout .form-informations {
  margin: 4px 0 16px;
}

body#checkout .form-informations-title {
  margin-bottom: 2px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ventia-color-text-primary);
}

body#checkout .form-informations-option {
  margin-bottom: 2px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--ventia-color-text-secondary);
}

body#checkout .form-informations-subtitle {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--ventia-color-text-secondary);
}

/* Radio "Pan / Pani" */
body#checkout .js-input-column.form-control-valign {
  padding-top: 12px;
}

body#checkout .radio-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin: 0 24px 0 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--ventia-color-text-primary);
  cursor: pointer;
}

/* Custom radio — 20px, zielona kropka */
body#checkout .custom-radio {
  width: 20px;
  height: 20px;
  margin-right: 0;
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
}

body#checkout .custom-radio input[type="radio"]:checked + span {
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  background-color: var(--ventia-color-brand-primary);
}

body#checkout .custom-radio:has(input[type="radio"]:checked) {
  border-color: var(--ventia-color-brand-primary);
}

/* Custom checkbox — 18px, radius 4px, zielone wypełnienie */
body#checkout .custom-checkbox input[type="checkbox"] + span {
  width: 18px;
  height: 18px;
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: 4px;
}

body#checkout .custom-checkbox input[type="checkbox"]:checked + span {
  background: var(--ventia-color-brand-primary);
  border-color: var(--ventia-color-brand-primary);
}

body#checkout .custom-checkbox input[type="checkbox"] + span .checkbox-checked {
  margin: 0;
  font-size: 14px;
  line-height: 16px;
  color: #fff;
}

body#checkout .custom-checkbox > label {
  padding-left: 28px;
}

body#checkout .custom-checkbox label {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--ventia-color-text-primary);
  cursor: pointer;
}

body#checkout .custom-checkbox label em {
  color: var(--ventia-color-text-secondary);
}

body#checkout .custom-checkbox label a,
body#checkout .condition-label label a {
  font-weight: 500;
  color: var(--ventia-color-brand-primary);
  text-decoration: none;
}

body#checkout .custom-checkbox label a:hover,
body#checkout .condition-label label a:hover {
  text-decoration: underline;
}

/* Wskaźnik siły hasła */
body#checkout .password-requirements p {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: var(--ventia-color-text-secondary);
}

body#checkout .password-requirements .material-icons {
  font-size: 16px;
}

body#checkout .password-strength-text {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
}

/* "Nie pamiętasz hasła?" */
body#checkout .forgot-password {
  margin: 4px 0 0;
}

body#checkout .forgot-password a {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--ventia-color-brand-primary);
}

body#checkout .forgot-password a:hover {
  color: #009247;
  text-decoration: underline;
}

/* Przyciski primary (Dalej / Zamawiam / dodaj kupon) */
body#checkout .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 32px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: none;
  color: #fff;
  background: var(--ventia-color-brand-primary);
  border: none;
  border-radius: var(--ventia-radius-12);
  box-shadow: none;
  cursor: pointer;
  transition: var(--ventia-transition-button);
}

body#checkout .btn-primary:hover:not(:disabled):not(.disabled) {
  color: #fff;
  background: var(--ventia-color-brand-primary-hover);
}

body#checkout .btn-primary:disabled,
body#checkout .btn-primary.disabled {
  color: var(--ventia-color-text-secondary);
  background: var(--ventia-color-border-default);
  opacity: 1;
}

body#checkout .checkout-step .form-footer {
  padding: 6px 0 4px;
  text-align: right;
}

/* Krok 2: adresy */
body#checkout .checkout-step h2.h4 {
  margin: 4px 0 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-transform: none;
  color: var(--ventia-color-text-primary);
}

body#checkout .js-address-form > form > p,
body#checkout .js-address-form p:first-child {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--ventia-color-text-secondary);
}

body#checkout section.checkout-step #customer-form,
body#checkout section.checkout-step #delivery-address,
body#checkout section.checkout-step #invoice-address,
body#checkout section.checkout-step #login-form {
  margin-top: 20px;
  margin-left: 0;
}

body#checkout section.checkout-step .address-selector {
  gap: 12px;
  justify-content: flex-start;
}

body#checkout section.checkout-step .address-item {
  flex: 1 1 calc(50% - 6px);
  min-width: 240px;
  margin-bottom: 0;
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: var(--ventia-radius-12);
  transition: border-color 0.15s ease;
}

body#checkout section.checkout-step .address-item:hover {
  border-color: var(--ventia-color-brand-primary);
}

body#checkout section.checkout-step .address-item.selected {
  background: #fff;
  border: 1px solid var(--ventia-color-brand-primary);
  box-shadow: 0 0 0 1px var(--ventia-color-brand-primary);
}

body#checkout section.checkout-step .address-item > header {
  min-height: 0;
}

body#checkout section.checkout-step .radio-block {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 16px;
  margin: 0;
}

body#checkout section.checkout-step .radio-block .custom-radio {
  flex: 0 0 20px;
  margin-top: 1px;
}

body#checkout section.checkout-step .address-alias {
  display: block;
  margin-bottom: 4px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ventia-color-text-primary);
}

body#checkout section.checkout-step .address {
  margin-left: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--ventia-color-text-secondary);
}

body#checkout section.checkout-step .address-item hr {
  margin: 0;
  border-top: 1px solid var(--ventia-color-border-default);
}

body#checkout section.checkout-step .address-footer {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 10px 16px;
}

body#checkout section.checkout-step .address-footer a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--ventia-color-text-secondary);
}

body#checkout section.checkout-step .address-footer a:hover {
  color: var(--ventia-color-brand-primary);
}

body#checkout section.checkout-step .address-footer a .material-icons {
  font-size: 16px;
}

body#checkout section.checkout-step .add-address a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ventia-color-brand-primary);
}

body#checkout section.checkout-step .add-address a i {
  font-size: 18px;
}

body#checkout section.checkout-step .add-address a:hover {
  color: #009247;
  text-decoration: underline;
}

body#checkout .cancel-address {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--ventia-color-text-secondary);
}

body#checkout .cancel-address:hover,
body#checkout .block-promo a.cancel-promo:hover {
  color: var(--ventia-color-text-primary);
  text-decoration: underline;
}

/* Przycisk "Wróć" (dodawany z custom.js) — secondary obok "Dalej".
   Tło bg-soft + ramka, żeby nie zlewał się z wyszarzonym primary
   ("Złóż zamówienie" przed zaznaczeniem zgód ma tło border-default). */
body#checkout .btn.ventia-step-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 28px;
  float: left;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: none;
  color: #374151;
  background: var(--ventia-color-bg-soft);
  border: 1px solid var(--ventia-color-border-default);
  border-radius: var(--ventia-radius-12);
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

body#checkout .btn.ventia-step-back:hover {
  background: var(--ventia-color-border-default);
}

/* W kroku płatności "Wróć" stoi pod pełnowymiarowym "Zamawiam" */
body#checkout #checkout-payment-step .btn.ventia-step-back {
  display: flex;
  float: none;
  width: 100%;
  margin-top: 12px;
}

/* Natywny checkbox "Użyj tego adresu także do faktury" */
body#checkout .checkout-step input[type="checkbox"] {
  accent-color: var(--ventia-color-brand-primary);
}

body#checkout .checkout-step input[type="checkbox"]#use_same_address {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
  cursor: pointer;
}

body#checkout .checkout-step label[for="use_same_address"] {
  margin: 0 0 0 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--ventia-color-text-primary);
  cursor: pointer;
  transition: color 0.15s ease;
}

body#checkout .checkout-step label[for="use_same_address"]:hover {
  color: var(--ventia-color-brand-primary);
}

/* Link "Dane do faktury różnią się od adresu dostawy" (otwiera okno faktury) */
body#checkout .checkout-step a[data-link-action="different-invoice-address"] {
  display: inline-flex;
  align-items: center;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ventia-color-brand-primary);
}

body#checkout .checkout-step a[data-link-action="different-invoice-address"]:hover {
  color: #009247;
  text-decoration: underline;
}

/* Okna formularzy adresowych — "Adres dostawy", "Dane do faktury", "dodaj
   nowy adres". Każde z nich to jedna karta na tle bg-soft: pola ORAZ rząd
   akcji (Anuluj / Wróć / Dalej) stoją w środku, bo guzik, który zapisuje
   adres, należy do tego adresu, a nie do kroku. */
@keyframes ventia-card-enter {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Płynne wejście tylko dla okna otwieranego OBOK już zapisanych danych
   (rozpoznawane po linku Anuluj) — formularz, który jest na kroku od
   początku, nie ma skąd wjeżdżać. */
body#checkout #invoice-address:has(.js-cancel-address),
body#checkout #delivery-address:has(.js-cancel-address) {
  animation: ventia-card-enter 0.35s ease both;
}

body#checkout #invoice-address > .js-address-form,
body#checkout #delivery-address > .js-address-form {
  padding: 20px;
  background: var(--ventia-color-bg-soft);
  border: 1px solid var(--ventia-color-border-default);
  border-radius: var(--ventia-radius-12);
}

body#checkout #invoice-address .form-fields,
body#checkout #delivery-address .form-fields {
  display: block;
}

/* Rząd akcji w stopce karty — flex zamiast floatów. Floaty wypadały poza
   kartę: ::after, który je czyścił, jest tu wygaszony (w kontenerze flex
   byłby dodatkowym elementem), więc stopka nie miała z czego wziąć
   wysokości i guziki lądowały pod spodem kroku. */
body#checkout #invoice-address .form-footer,
body#checkout #delivery-address .form-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 16px 0 0;
  margin-top: 4px;
  border-top: 1px solid var(--ventia-color-border-default);
}

body#checkout #invoice-address .form-footer::after,
body#checkout #delivery-address .form-footer::after {
  display: none;
}

body#checkout #invoice-address .form-footer .cancel-address,
body#checkout #delivery-address .form-footer .cancel-address {
  order: 2;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: none;
  min-height: 40px;
  padding: 8px 20px;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ventia-color-text-secondary);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: 10px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body#checkout #invoice-address .form-footer .cancel-address:hover,
body#checkout #delivery-address .form-footer .cancel-address:hover {
  color: var(--ventia-color-text-primary);
  background: #fff;
  text-decoration: none;
}

body#checkout #invoice-address .form-footer .btn.ventia-step-back,
body#checkout #delivery-address .form-footer .btn.ventia-step-back {
  order: 1;
  float: none;
  background: #fff;
}

body#checkout #invoice-address .form-footer .btn.ventia-step-back:hover,
body#checkout #delivery-address .form-footer .btn.ventia-step-back:hover {
  background: var(--ventia-color-border-default);
}

body#checkout #invoice-address .form-footer .continue,
body#checkout #invoice-address .form-footer .btn-primary,
body#checkout #delivery-address .form-footer .continue,
body#checkout #delivery-address .form-footer .btn-primary {
  order: 3;
  float: none;
  margin-left: auto;
}

/* Panel z danymi do faktury — to, co odsłania checkbox "Chcę fakturę VAT"
   i link "Użyj innych danych do faktury". Biały kafel w jasnoszarej ramce,
   odcinający się od bg-soft karty adresu. */
body#checkout .ventia-form-panel {
  padding: 16px 20px 2px;
  margin: 0 0 14px;
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: var(--ventia-radius-12);
}

body#checkout .ventia-form-panel .form-group.row:last-child {
  margin-bottom: 0;
}

/* Od 768px .col-md-* są kolumnami i pole musi stanąć w tej samej co reszta
   formularza, więc ujemne marginesy znoszą wcięcie panelu: 20px paddingu
   i 1px ramki, do tego -15px, które bootstrapowy .row ma sam z siebie.
   Panel wtedy obrysowuje wiersz, zamiast go przesuwać.

   Niżej kolumny są jedna pod drugą — nie ma z czym równać, a te same
   marginesy dokleiłyby pole do ramki panelu. */
@media (min-width: 768px) {
  body#checkout .ventia-form-panel .form-group.row {
    margin-right: -36px;
    margin-left: -36px;
  }
}

/* Wariant tekstowy — zapowiedź osobnych danych do faktury zamiast pól,
   których nie da się jeszcze wysłać (druga karta adresu powstaje dopiero
   po zapisaniu pierwszej). */
body#checkout .ventia-form-panel-note {
  padding: 16px 20px;
  animation: ventia-card-enter 0.25s ease both;
}

body#checkout .ventia-form-panel-title {
  margin: 0 0 4px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ventia-color-text-primary);
}

body#checkout .ventia-form-panel-text {
  margin: 0 0 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: var(--ventia-color-text-secondary);
}

body#checkout .ventia-form-panel-undo {
  padding: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ventia-color-brand-primary);
  background: none;
  border: none;
}

body#checkout .ventia-form-panel-undo:hover {
  color: #009247;
  text-decoration: underline;
}

/* Krok 3: metody dostawy jako karty z radio */
body#checkout section.checkout-step .delivery-options > .row {
  border-right: none;
}

body#checkout section.checkout-step .delivery-options .delivery-option {
  min-height: 0;
  padding: 14px 4px;
  margin: 0 0 12px;
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: var(--ventia-radius-12);
  transition: border-color 0.15s ease;
}

body#checkout section.checkout-step .delivery-options .delivery-option:hover {
  border-color: var(--ventia-color-brand-primary);
}

body#checkout section.checkout-step .delivery-options .delivery-option label {
  cursor: pointer;
}

body#checkout section.checkout-step .delivery-options .delivery-option:has(input[type="radio"]:checked) {
  border-color: var(--ventia-color-brand-primary);
  box-shadow: 0 0 0 1px var(--ventia-color-brand-primary);
}

/* Motyw bazowy odsuwa nazwę przewoźnika bez logo o 33% — wyrównujemy */
body#checkout section.checkout-step .delivery-options .delivery-option label .carrier:not(.carrier-hasLogo) > .col-xs-12 {
  padding-left: 15px;
}

body#checkout section.checkout-step .carrier-name {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  text-transform: none;
  color: var(--ventia-color-text-primary);
}

body#checkout section.checkout-step .carrier-delay {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--ventia-color-text-secondary);
}

body#checkout section.checkout-step .carrier-price {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--ventia-color-text-primary);
}

/* Komentarz do zamówienia + opcje */
body#checkout .order-options label,
body#checkout #delivery > label,
body#checkout #gift label {
  margin-bottom: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: var(--ventia-color-text-secondary);
  text-align: left;
}

body#checkout #delivery textarea,
body#checkout #gift textarea {
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: var(--ventia-color-text-primary);
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: 10px;
}

body#checkout #delivery textarea,
body#checkout #gift textarea {
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body#checkout #delivery textarea:focus,
body#checkout #gift textarea:focus {
  border-color: var(--ventia-color-brand-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 169, 80, 0.12);
}

/* Krok 4: metody płatności jako karty z radio */
body#checkout .payment-options .payment-option {
  display: flex;
  align-items: center;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: var(--ventia-radius-12);
  transition: border-color 0.15s ease;
}

body#checkout .payment-options .payment-option:hover {
  border-color: var(--ventia-color-brand-primary);
}

body#checkout .payment-options .payment-option:has(input[type="radio"]:checked) {
  border-color: var(--ventia-color-brand-primary);
  box-shadow: 0 0 0 1px var(--ventia-color-brand-primary);
}

body#checkout .payment-options .payment-option .custom-radio {
  float: none;
  flex: 0 0 20px;
  margin-right: 12px;
}

body#checkout .payment-options .payment-option label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--ventia-color-text-primary);
  cursor: pointer;
}

body#checkout .payment-options .payment-option label img {
  max-height: 24px;
}

body#checkout .additional-information {
  margin: 4px 0 12px 46px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: var(--ventia-color-text-secondary);
}

/* Zgody (regulamin) */
body#checkout #conditions-to-approve {
  padding-top: 8px;
}

body#checkout #conditions-to-approve ul {
  padding-left: 0;
  margin: 0;
  list-style: none;
}

body#checkout #conditions-to-approve li {
  margin-bottom: 10px;
  overflow: hidden;
}

body#checkout .condition-label {
  padding-left: 28px;
  margin-top: 1px;
}

body#checkout .condition-label label {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: var(--ventia-color-text-primary);
}

/* Przycisk potwierdzenia zamówienia — pełna szerokość */
body#checkout #payment-confirmation .btn-primary {
  display: flex;
  width: 100%;
}

/* Prawa kolumna — karta podsumowania zamówienia */
body#checkout .cart-grid-right .card {
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: var(--ventia-radius-12);
  box-shadow: none;
}

body#checkout #js-checkout-summary > .card-block:first-child {
  padding: 20px 20px 6px;
}

body#checkout .cart-summary-products p {
  margin: 0;
}

/* Lista produktów — zawsze widoczna w całości (override
   cart-summary-products.tpl usuwa licznik sztuk i "pokaż szczegóły") */
body#checkout #cart-summary-product-list {
  margin-top: 0;
}

body#checkout #cart-summary-product-list .media-list {
  margin: 0;
}

body#checkout #cart-summary-product-list .media {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  margin: 0;
  border-top: 1px solid var(--ventia-color-border-default);
}

body#checkout #cart-summary-product-list .media:first-child {
  padding-top: 0;
  border-top: none;
}

body#checkout #cart-summary-product-list .media-left {
  padding: 0;
}

body#checkout #cart-summary-product-list img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: 8px;
}

body#checkout #cart-summary-product-list .media-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-content: start;
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}

body#checkout #cart-summary-product-list .media-body br {
  display: none;
}

body#checkout #cart-summary-product-list .product-name {
  grid-column: 1;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 16px;
}

body#checkout #cart-summary-product-list .product-name a {
  color: var(--ventia-color-text-primary);
  text-decoration: none;
}

body#checkout #cart-summary-product-list .product-name a:hover {
  color: var(--ventia-color-brand-primary);
}

body#checkout #cart-summary-product-list .product-quantity {
  grid-column: 1;
  margin-top: 2px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: var(--ventia-color-text-secondary);
}

body#checkout #cart-summary-product-list .product-price {
  grid-column: 2;
  grid-row: 1;
  float: none;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 16px;
  color: var(--ventia-color-text-primary);
  text-align: right;
  white-space: nowrap;
}

body#checkout #cart-summary-product-list .product-line-info {
  grid-column: 1 / -1;
  font-family: 'Poppins', sans-serif;
  font-size: 11px;
  color: var(--ventia-color-text-secondary);
}

/* Subtotale */
body#checkout .cart-grid-right .card .cart-summary-subtotals-container {
  padding: 14px 0 4px;
  margin-top: 12px;
  border-top: 1px solid var(--ventia-color-border-default);
  border-bottom: none;
}

body#checkout .cart-grid-right .card .cart-summary-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 10px;
}

body#checkout .cart-grid-right .card .cart-summary-line .label,
body#checkout .cart-grid-right .card .cart-summary-subtotals-container .cart-summary-line .label {
  padding: 0;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 13px;
  line-height: 20px;
  color: var(--ventia-color-text-secondary);
  white-space: normal;
}

body#checkout .cart-grid-right .card .cart-summary-line .value,
body#checkout .cart-grid-right .card .cart-summary-subtotals-container .cart-summary-line .value {
  float: none;
  margin-left: auto;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 20px;
  color: var(--ventia-color-text-primary);
  text-align: right;
}

body#checkout .cart-grid-right .card .cart-summary-subtotals-container .cart-summary-line:not(:last-child) {
  margin-bottom: 10px;
}

/* Razem */
body#checkout .cart-grid-right .card .cart-summary-totals {
  padding: 14px 0 16px;
  margin: 0 20px;
  border-top: 1px solid var(--ventia-color-border-default);
}

body#checkout .cart-grid-right .card .cart-total {
  padding: 0;
  margin-bottom: 0;
  background-color: transparent;
}

body#checkout .cart-grid-right .card .cart-total .label,
body#checkout .cart-grid-right .card .cart-total .value {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--ventia-color-text-primary);
}

body#checkout .cart-grid-right .card .cart-summary-line .label.sub,
body#checkout .cart-grid-right .card .cart-summary-line .value.sub {
  font-size: 12px;
  font-weight: 400;
  color: var(--ventia-color-text-secondary);
}

/* Kod promocyjny */
body#checkout .block-promo {
  padding: 0 20px 18px;
  margin-bottom: 0;
}

body#checkout .block-promo .promo-code-button {
  display: block;
  margin: 0;
  text-align: left;
}

body#checkout .block-promo .promo-code-button a.collapse-button {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--ventia-color-brand-primary);
  text-decoration: none;
}

body#checkout .block-promo .promo-code-button a.collapse-button:hover {
  color: #009247;
  text-decoration: underline;
}

body#checkout .block-promo .promo-code {
  padding: 12px 0 0;
  background: transparent;
}

body#checkout .block-promo .promo-code form {
  display: flex;
  gap: 8px;
  text-align: initial;
}

body#checkout .block-promo .promo-input {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
  height: 48px;
  margin: 0;
  padding: 0 14px;
  text-indent: 0;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  color: var(--ventia-color-text-primary);
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: 10px;
}

body#checkout .block-promo .promo-input:focus {
  outline: none;
  border-color: var(--ventia-color-brand-primary);
  box-shadow: 0 0 0 3px rgba(0, 169, 80, 0.12);
}

body#checkout .block-promo .promo-code button.btn-primary {
  flex: 0 0 auto;
  padding: 0 18px;
  margin: 0;
}

body#checkout .block-promo .promo-code .alert {
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
}

body#checkout .block-promo a.cancel-promo {
  display: inline-block;
  margin-top: 10px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--ventia-color-text-secondary);
}

body#checkout .block-promo .promo-name .cart-summary-line .label {
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  color: var(--ventia-color-text-primary);
}

body#checkout .block-promo .promo-name .cart-summary-line span {
  color: var(--ventia-color-brand-primary);
}

body#checkout .block-promo .promo-name .cart-summary-line a .material-icons {
  color: var(--ventia-color-text-secondary);
}

/* Blok reassurance pod podsumowaniem */
body#checkout .cart-grid-right .blockreassurance_product {
  padding: 14px 20px;
  margin-top: 16px;
  background: #fff;
  border: 1px solid var(--ventia-color-border-default);
  border-radius: var(--ventia-radius-12);
}

body#checkout .cart-grid-right .blockreassurance_product > div {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
}

body#checkout .cart-grid-right .blockreassurance_product .item-product {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  float: none;
  margin: 0;
}

body#checkout .cart-grid-right .blockreassurance_product .item-product img {
  max-width: 100%;
  max-height: 100%;
}

body#checkout .cart-grid-right .blockreassurance_product p.block-title {
  margin: 0;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--ventia-color-text-primary);
}

/* Alerty w checkoucie */
body#checkout .checkout-step .alert {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  border-radius: 10px;
}

/* Bez migania przy wejściu na krok: motyw bazowy chowa fallbacki no-JS
   (.ps-hidden-by-js, np. przyciski "Wybierz" przy płatnościach) i opisy
   nieaktywnych płatności (.ps-hidden) dopiero JS-em na dole strony, przez
   co pierwszy paint różni się od stanu końcowego. Ustawiamy stan docelowy
   już w CSS — JS core'a i tak nadpisuje widoczność inline'owo. */
body#checkout .ps-hidden-by-js,
body#checkout .ps-hidden {
  display: none;
}

/* Minimalna stopka checkoutu (Regulamin + copyright) */
body#checkout #footer {
  padding: 24px 15px;
  margin-top: 8px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 20px;
  color: var(--ventia-color-text-secondary);
  text-align: center;
  background: #fff;
  border-top: 1px solid var(--ventia-color-border-default);
}

body#checkout #footer .js-terms {
  margin-bottom: 2px;
}

body#checkout #footer a {
  font-weight: 500;
  color: var(--ventia-color-brand-primary);
  text-decoration: none;
}

body#checkout #footer a:hover {
  color: #009247;
  text-decoration: underline;
}

@media (min-width: 768px) {
  body#checkout section.checkout-step .step-title {
    font-size: 18px;
  }

  /* "Nie pamiętasz hasła?" pod kolumną inputów (label = col-md-3) */
  body#checkout .forgot-password {
    margin-left: 25%;
    padding-left: 15px;
  }

  /* Cena przewoźnika dobita do prawej */
  body#checkout section.checkout-step .delivery-option label > .row > .col-sm-3 {
    text-align: right;
  }

  /* Checkbox "Użyj tego adresu także do faktury" pod kolumną inputów */
  body#checkout .checkout-step .form-group .col-md-offset-3 {
    margin-left: 25%;
  }
}

@media (max-width: 767.98px) {
  body#checkout section.checkout-step {
    padding: 16px;
  }

  body#checkout section.checkout-step .content {
    padding: 16px 0 4px;
  }

  body#checkout section.checkout-step.-current .step-title {
    padding-bottom: 14px;
  }

  /* Etykiety nad polami */
  body#checkout .form-control-label {
    padding-top: 0;
    margin-bottom: 6px;
  }

  body#checkout .js-input-column.form-control-valign {
    padding-top: 0;
  }

  body#checkout div.form-control-comment {
    padding-top: 4px;
  }

  /* Przyciski na pełną szerokość */
  body#checkout .checkout-step .continue.btn-primary {
    display: flex;
    float: none;
    width: 100%;
  }

  /* "Wróć" pod "Dalej", też na pełną szerokość */
  body#checkout .btn.ventia-step-back {
    display: flex;
    float: none;
    width: 100%;
    margin-top: 10px;
  }

  body#checkout .cart-grid-right {
    margin-top: 4px;
  }

  body#checkout section.checkout-step .address-item {
    flex-basis: 100%;
  }

  /* Wiersz przewoźnika: radio z lewej, opis wypełnia resztę (bazowo
     label col-xs-9 + space-between zostawiały dziurę po radiu) */
  body#checkout section.checkout-step .delivery-options .delivery-option {
    flex-wrap: nowrap;
  }

  body#checkout section.checkout-step .delivery-options .delivery-option > .col-sm-1 {
    flex: 0 0 auto;
    width: auto;
    padding-right: 0;
  }

  body#checkout section.checkout-step .delivery-options .delivery-option label.delivery-option-2 {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    text-align: left;
  }
}

/* Kafelek listingu — cały kafelek klikalny (overlay rozciągnięty z linku
   w tytule), hover na ramce i przycisk koszyka wyniesiony ponad overlay */
.js-product .product-miniature {
  height: 100%;
}

/* Karta rozciąga się na całą wysokość kolumny, więc marginesu classica nie
   widać jako odstępu między rzędami — niesie go siatka (mobile) i margines
   kolumny (desktop) niżej */
#js-product-list .thumbnail-container,
.product-accessories .thumbnail-container {
  margin-bottom: 0;
}

@media (min-width: 768px) {
  #js-product-list .products > .product,
  .product-accessories .products > .product {
    margin-bottom: 28px;
  }
}

.product-miniature .thumbnail-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.product-miniature .thumbnail-container:hover {
  border-color: var(--ventia-color-brand-primary);
  box-shadow: 0 6px 20px rgba(7, 18, 46, 0.1);
}

/* Nazwy w obrębie kategorii są prawie identyczne i rozjeżdżają się dopiero
   przy modelu, więc kod katalogowy idzie nad nazwą — to po nim klient
   rozpoznaje część, nawet gdy nazwa przytnie się na trzeciej linii */
.product-miniature .product-miniature-reference {
  margin-bottom: 4px;
  font-family: 'Poppins', sans-serif;
  font-size: 10px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ventia-color-text-secondary);
}

/* position: static, bo classic ustawia tu relative i przechwytuje overlay
   linku — przez to klikalny był tylko pasek z opisem, a nie cały kafelek */
.product-miniature .product-description {
  position: static;
  padding: 12px 0 0;
  text-align: left;
}

.product-miniature .product-title {
  margin: 0;
  text-align: left;
  text-transform: none;
}

/* Stała wysokość trzech linii — ceny i przyciski w rzędzie stoją wtedy
   w jednej osi, bez dziury, którą wcześniej zostawiał margin-top: auto */
.product-miniature .product-title a {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  min-height: 45px;
  overflow: hidden;
  line-height: 15px;
  text-align: left;
}

.product-miniature .product-price-and-shipping {
  margin-top: 20px;
  text-align: left;
}

.product-miniature .product-price-and-shipping .price {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--ventia-color-text-primary);
}

.product-miniature .product-title a::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: '';
}

/* Zdjęcie ma własny link do produktu i musi zostać nad overlayem tytułu.
   Pod spodem klik w nie trafiał w overlay, więc dla przeglądarki kafelek
   działał, ale zdjęcie przestawało być klikalnym linkiem — a Playwright
   odmawia klikania elementu, który coś przykrywa. */
.product-miniature .thumbnail-container .product-thumbnail {
  z-index: 2;
}

.product-miniature .product-description {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

/* Formularz przepuszcza kliknięcia, żeby odstęp nad przyciskiem nie robił
   martwej strefy w linku obejmującym cały kafelek — łapie je sam przycisk */
.product-miniature .product-miniature-add-to-cart {
  position: relative;
  z-index: 2;
  margin: 0;
  margin-top: auto;
  padding-top: 12px;
  pointer-events: none;
}

.product-miniature .product-miniature-add-to-cart .btn-primary {
  pointer-events: auto;
}

.product-miniature .product-miniature-add-to-cart .btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 14px;
  text-transform: none;
  color: #fff;
  background: var(--ventia-color-brand-primary);
  border: none;
  border-radius: var(--ventia-radius-12);
  box-shadow: none;
  transition: var(--ventia-transition-button);
}

.product-miniature .product-miniature-add-to-cart .btn-primary:hover:not(:disabled) {
  background: var(--ventia-color-brand-primary-hover);
}

/* box-shadow: none wyżej gasi bootstrapowy pierścień focusu, więc obrys
   wraca tutaj — inaczej kafelek jest nieobsługiwalny z klawiatury */
.product-miniature .product-miniature-add-to-cart .btn-primary:focus-visible,
.product-miniature .product-title a:focus-visible {
  outline: 2px solid var(--ventia-color-brand-primary-dark);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .product-miniature .thumbnail-container,
  .product-miniature .product-miniature-add-to-cart .btn-primary {
    transition: none;
  }
}

@media (max-width: 767.98px) {
  /* Listing na dwie równe kolumny — bazowe .product miało flex-grow, więc
     przy nieparzystej liczbie produktów ostatni kafelek rozpychał się na
     całą szerokość; grid trzyma stałe kolumny i daje odstęp w pionie */
  #js-product-list .products,
  .product-accessories .products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 12px;
    margin: 0;
  }

  #js-product-list .products > .product,
  .product-accessories .products > .product {
    flex: none;
    width: auto;
    max-width: none;
    padding: 0;
    margin: 0;
  }


  .product-miniature .product-miniature-add-to-cart {
    padding-top: 10px;
  }

  .product-miniature .product-miniature-add-to-cart .btn-primary {
    min-height: 38px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 16px;
  }
}

/* Classic zbija link zdjęcia do height: calc(100% - 70px) pod swój pasek opisu,
   którego kafelek Ventii nie ma — zdjęcie lądowało w lewym górnym rogu */
.featured-products .product-miniature .thumbnail-container .thumbnail-top {
  width: 100%;
}

.featured-products .product-miniature .thumbnail-container .product-thumbnail {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
}

.featured-products .product-miniature .thumbnail-container .product-thumbnail picture {
  display: block;
  width: 100%;
  height: 100%;
}

.featured-products .product-miniature .thumbnail-container .product-thumbnail img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: contain;
}