/* ------------------- Zmienne ------------------- */
:root {
  --brand: #5FAC21;
  --brand-2: #6EC627;
  --ink: #111;
  --muted: #667085;
  --bg-soft: #f6f8f4;
  --ring: rgba(95,172,33,.35);
  --shadow: 0 6px 18px rgba(16, 24, 40, 0.06);
  --shadow-strong: 0 10px 24px rgba(16, 24, 40, 0.12);
}

/* ------------------- Akcent focus dla klikalnych elementów ------------------- */
:where(a, button, [role="button"], .pasek1, .products-menu a, .title-link, .sort) {
  outline: none;
}

:where(a, button, .products-menu a, .title-link, .sort):focus-visible {
  box-shadow: 0 0 0 3px var(--ring);
  border-radius: .6rem;
}

/* ------------------- Reset + Typografia ------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  scroll-behavior: smooth;


}

/* Czcionki */
.playfair-display { font-family: "Playfair Display", serif; }
.poppins-thin { font-family: "Poppins", sans-serif; font-weight: 100; }
.poppins-extralight { font-weight: 200; }
.poppins-light { font-weight: 300; }
.poppins-regular { font-weight: 400; }
.poppins-medium { font-weight: 500; }
.poppins-semibold { font-weight: 600; }
.poppins-bold { font-weight: 700; }
.poppins-extrabold { font-weight: 800; }
.poppins-black { font-weight: 900; }
.poppins-thin-italic { font-weight: 100; font-style: italic; }
.poppins-extralight-italic { font-weight: 200; font-style: italic; }
.poppins-light-italic { font-weight: 300; font-style: italic; }
.poppins-regular-italic { font-weight: 400; font-style: italic; }
.poppins-medium-italic { font-weight: 500; font-style: italic; }
.poppins-semibold-italic { font-weight: 600; font-style: italic; }
.poppins-bold-italic { font-weight: 700; font-style: italic; }
.poppins-extrabold-italic { font-weight: 800; font-style: italic; }
.poppins-black-italic { font-weight: 900; font-style: italic; }

.delius-swash-caps-regular { font-family: "Delius Swash Caps", cursive; font-weight: 400; }

body {
  position: relative;
  z-index: 0;
  font-weight: normal;
  font-family: "Delius Swash Caps", cursive;
  height: 100%;
}

/* ------------------- NAVBAR ------------------- */
.products-section {}
.products-wrapper {
  display: flex;
  width: 100%;
  align-items: flex-start;
  padding: 0 2rem;
}

/* ------------------- LEWE MENU (estetyka chipsów, animacje submenu) ------------------- */
.products-menu {
  width: 18%;
  padding: 1.5rem 1rem 2rem 2rem;
  background: linear-gradient(180deg, #fff, var(--bg-soft) 90%);
  border-right: 1px solid green;
  border-radius: .8rem;
}

.products-menu-item-title {
  font-size: 1.1rem;
  letter-spacing: .5px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: .25rem;
  font-family: "Delius Swash Caps", cursive;
}

.products-menu-item {
  padding: .75rem 0 1rem;
  border-bottom: 1px dashed rgba(0, 0, 0, .08);
}

.products-menu-item:last-child {
  border-bottom: 0;
}

.products-menu-link,
.title-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .65rem;
  margin: .35rem .2rem .35rem 0;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease, transform .12s ease;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
}

.title-link {
  box-shadow: 0 0 2px green;
}


.products-menu a:hover,
.title-link:hover {
  color: var(--brand);
  background: rgba(95,172,33,.08);
  transform: translateY(-1px);
}

.products-menu a.active,
.title-link.active,
.products-cat2.active {
  background: var(--brand);
  color: #fff !important;
  box-shadow: var(--shadow);
}

.subtitle-link {
  font-size: .95rem !important;
  margin: .4rem 0 0 0;
  line-height: 1.2;
}

.products-cat2 {
  display: inline-flex;
  margin: .25rem .3rem .25rem 0;
  padding: .3rem .6rem;
  border-radius: 999px;
  font-size: .82rem;
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04);
  color: inherit;
}

.products-cat2:hover {
  background: rgba(95,172,33,.08);
  color: var(--brand);
}

/* ------------------- FIX: Brakująca kropka przed .submenu-block ------------------- */
.submenu-block {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .4rem .35rem 0;
  border-radius: .5rem;
}

.submenu-toggle {
  margin-left: auto;
  width: 1.25rem;
  height: 1.25rem;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.submenu-toggle::before {
  content: "▾";
  font-size: 1rem;
  color: var(--brand);
  display: inline-block;
  line-height: 1;
  transition: transform .2s ease;
}

.submenu-toggle.is-open::before {
  transform: rotate(180deg);
}

.submenu-panel {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease;
  padding: 0 0 0 .7rem;
  border-left: 2px dashed rgba(95,172,33,.25);
  margin-left: .4rem;
}

.submenu-panel.is-open {
  max-height: 600px;
  opacity: 1;
}

/* ------------------- FILTR (formularz nad listą) ------------------- */
.mb-4 {
  position: absolute;
  left: auto;
  right: 1.5rem;
  top: 0;
  z-index: 101;
  display: flex;
  align-items: center;
  gap: .6rem;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  padding: .5rem .75rem;
  border-radius: .6rem;
  box-shadow: 0 4px 18px rgba(0,0,0,.06);
}

.mb-4 label {
  font-size: .9rem;
  color: #3b3b3b;
  opacity: .85;
}

.mb-4 select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: .5rem;
  padding: .45rem .6rem .45rem .6rem;
  font-size: .95rem;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.02) inset;
}

.mb-4 select:focus {
  outline: none;
  border-color: #76b73e;
  box-shadow: 0 0 0 3px rgba(118,183,62,.2);
}

/* ------------------- GRID PRODUKTÓW ------------------- */
.all-products {
  position: relative;
  width: 100%;
  display: grid;
  align-content: start;
  grid-template-columns: repeat(4, 1fr);
  padding: 8rem 1rem 9rem 1rem;
  gap: 1rem;
}

.product-page-title {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%);
  font-size: 2.5rem;
  font-weight: normal;
}

.product-page-continue {
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translate(-50%);
  background-color: rgb(95,172,33);
  color: #fff;
  border-radius: .6rem;
  padding: .6rem 1.2rem;
  font-size: 1.4rem;
  cursor: pointer;
}

/* ------------------- SORT BY ------------------- */
.sort-wrapper {
  position: absolute;
  right: 0;
  z-index:100;
}

.sort-by {
  position: absolute;
  top: 57px;
  right: 16rem;
  font-size: .95rem;
  letter-spacing: .3px;
  color: #3b3b3b;
  opacity: .85;
}

.sort {
  position: absolute;
  top: 48px;
  right: 1.5rem;
  width: 14rem;
  padding: .65rem 2.25rem .65rem 1rem;
  border-radius: .6rem;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
  cursor: pointer;
  transition: box-shadow .25s ease, transform .15s ease;
  font-size: .95rem;
}

.sort:hover {
  box-shadow: 0 8px 26px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

.sort-list {
  position: absolute;
  top: 6.25rem;
  right: 0;
  width: 14rem;
  background: #fff;
  border-radius: .7rem;
  list-style: none;
  padding: .4rem;
  margin-top: .25rem;
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
  border: 1px solid rgba(0,0,0,.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
  z-index: 3;
}

.sort-list-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transform: translateX(-10%);
}

.sort-list li {
  padding: .65rem .8rem;
  border-radius: .5rem;
  font-size: .95rem;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.sort-list li:hover {
  background: #f2f6ee;
  color: #2f6b1e;
}

.sort-list li.active {
  background: #e8f5da;
  color: #2a5d1a;
  font-weight: 500;
}

/* ------------------- KARTY PRODUKTU ------------------- */
.product {
  position: relative;
  height: 380px;
  width: 100%;
  max-width: 260px;
  min-width: 240px;
  margin: 0;
  padding: .5rem .5rem 3rem .5rem;
  text-align: center;
  color: black;
  background-color: #fbfbf7;
  box-shadow: 1px 2px 4px 0 rgba(0,0,0,.41);
  line-height: 1.2;
}

.product-image {
  width: 100%;
  height: 70%;
  cursor: pointer;
  object-fit: contain;
  border-radius: 1rem;
  background-color: #fff;
  transition: transform .5s ease;
}

.product-image:hover {
  transform: scale(1.06);
  transition: transform .5s;
}

.product:hover {
  box-shadow: 1px 2px 5px 4px rgba(28,74,26,.6);
}

.product h3 {
  font-weight: normal;
  font-size: 1rem;
  margin: .6rem 0;
}

.product span {
  color: black;
  font-size: 14px;
}

.price {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left:3px;
  position: absolute;
  bottom: .4rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 19px;
  font-weight: normal;
  width: 5.7rem;
  cursor: default;
  font-family: 'Montserrat', sans-serif;
}

.products-cart {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 5vw;
  height: 2.4rem;
  padding: 4px;
  background-color: rgb(110, 198, 39);
  border-radius: 5px 0 0 0;
  display: flex;
  color: #fff;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: black 0 0 1px;
}

.products-cart button {
  width: 100%;
  background-color: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

.cart-icon {
  width: 2rem;
  height: 2rem;
}

.products-cart:hover {
  background-color: rgba(110, 198, 39, .85);
  transition: background-color .4s;
}




.product .bx, .product .bxs-heart {
  position: absolute;
  top: .5rem;
  right: .8rem;
  font-size: 35px;
  cursor: pointer;
  transition: transform 0.3s ease, color 0.3s ease;
}

.product .bx:hover, .product .bxs-heart:hover {
  transform: scale(1.1);
}

.product .bxs-heart {
  color: red; /* Czerwony kolor dla pełnego serca */
}

.product .bx {
  color: rgb(255, 59, 0); /* Kolor pustego serca */
}

.product .bx, .product .bxs-heart {
  transition: transform 0.3s ease, opacity 0.3s ease; /* Animacja przejścia zmiany rozmiaru i przezroczystości */
}

/* Opcjonalna animacja wejścia przy pojawianiu się serca */
.product .bx-heart,
.product .bxs-heart {
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.product .favorite-toggle {
  transition: opacity 0.4s ease;
}

.product .favorite-toggle:hover .bx {
  opacity: 1;
  transform: scale(1.15);  /* Powiększamy serce na hover */
}




.products-page {
  display: flex;
  align-items: center;
  justify-content: center;
}

.products-page a {
  background-color: rgb(95, 172, 33);
  color: #fff;
  border-radius: .6rem;
  padding: .6rem 1.2rem;
  font-size: 1.4rem;
  cursor: pointer;
}

.products-page a:hover {
  background-color: rgba(95, 172, 33, .9);
}

/* ------------------- Kalkulator ilości ------------------- */
.calc-product {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 5rem; /* Początkowa szerokość */
  height: 2.5rem;
  background: #fff;
  font-size: 1.1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px;
  box-shadow: black 0 0 1px;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;

}

.calc-product .calc-input {
  width: 2.2rem;
  text-align: center;
  height: 80%;
  font-size: 1.1rem;
  user-select: none;
  font-family: 'Montserrat', sans-serif;
  margin-top:3px;
  margin-left: 2px;
}

.calc-product button {
  width: 1.2rem; /* Zwiększono szerokość przycisków */
  height: 1.2rem;
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: bold;
  color: #5FAC21;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s ease;
  border-radius: 50%;
}

.calc-product button:hover {
  background-color: rgba(95, 172, 33, 0.1);
  transform: scale(1.1);
}

.calc-product button:active {
  transform: scale(0.95);
}


.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    position:absolute;
    bottom:3rem;
    right:20rem;


    gap: 15px;
    font-family: 'Arial', sans-serif;

    z-index: 10;
    grid-column: 2; /* Paginacja zajmuje drugi wiersz */
    padding: 1rem 0; /* Odstęp wokół paginacji */
    margin-top: 2.5rem;

}

.pagination a {
    background-color: #4CAF50; /* Zielony */
    color: white;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.pagination a:hover {
    background-color: #45a049; /* Ciemniejszy zielony przy hover */
    transform: translateY(-2px); /* Efekt "unoszenia" przy hover */
}

.pagination .current-page {
    font-size: 18px;
    color: #555;
    font-weight: 600;
}

.pagination a.prev, .pagination a.next {
    font-weight: bold;
}

.pagination a:focus {
    outline: none;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.5);
}

.pagination a:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

.pagination .prev,
.pagination .next {
    background-color: #007bff; /* Niebieski przy poprzedniej/następnej */
}

.pagination .prev:hover,
.pagination .next:hover {
    background-color: #0056b3;
}


.badge--promo {
  position: absolute;
  top: 16px; left: -7px;
  background: #e63946;
  color: #fff!important;
  padding: 6px 12px;
  font: 600 12px/1.1 "Poppins", system-ui;
  text-transform: uppercase; letter-spacing: .5px;
  border-radius: 1px 8px 8px 1px;
  box-shadow: 0 4px 10px rgba(0,0,0,.15);



  z-index: 3;             /* ponad obrazkiem (który zwykle ma z-index:auto/0) */
  pointer-events: none;   /* żeby hover na obrazku działał normalnie */
  transform: translateZ(0);
}




/* ------------------- Media Queries ------------------- */

@media (max-width: 1300px) {
  /* Zmniejszamy liczbę kolumn do 3 na średnich ekranach */
  .all-products {
    grid-template-columns: repeat(3, 1fr);
  }

  .product {
    max-width: 100%; /* Produkty zajmują całą szerokość */
  }

  .products-cart {
    width: 3rem; /* Zmniejszamy szerokość przycisku koszyka */
  }

    .calc-product {
    width: 4.5rem; /* Zmniejszamy szerokość */
    height: 2.2rem;
    padding: 4px;
  }

  .calc-product .calc-input {
    width: 1.8rem; /* Zmniejszamy szerokość inputa */
    font-size: 1rem;
  }

  .calc-product button {
    width: 1.1rem;
    height: 1.1rem;
  }
}

@media (max-width: 1000px) {
  /* Zmniejszamy liczbę kolumn do 2 na mniejszych ekranach */
  .all-products {
    grid-template-columns: repeat(2, 1fr);


  }
  .products-section {}
.products-wrapper {

  padding: 0;
}

.products-menu {
  width: 20%;

}

.products-menu-link,
.title-link {

  padding: .35rem .65rem;
  margin: .35rem .2rem .35rem 0;
  border-radius: 999px;
  font-size: 0.85rem;
}

.subtitle-link {
  font-size: .8rem !important;

}



  .product {
    max-width: 100%;
  }

  .products-cart {
    width: 3.5rem; /* Zmniejszamy szerokość przycisku koszyka */
  }

  .calc-product {
    width: 4rem; /* Zmniejszamy szerokość */
    height: 2rem;
  }

  .calc-product .calc-input {
    width: 1.6rem;
    font-size: 0.9rem;
  }

  .calc-product button {
    width: 1rem;
    height: 1rem;
  }

  .product h3 {
    font-size: 0.9rem; /* Zmniejszamy rozmiar nazwy produktu */
  }

  .pagination {

    bottom:3rem;
    right:10rem;


}
}

@media (max-width: 768px) {
  /* Mobile: uproszczenie layoutu listy */
  .products-menu {
    display: none;
  }

  .products-wrapper {
  display: flex;
  flex-direction:column;
  margin-top:0;

}


  .all-products {
    border-left: none;
    padding-top: 7.5rem;
    width:100%;
    margin-left:0;

  }

  .mb-4 {

    position:static;
    margin: .5rem 1rem 0 0.7rem;

    margin-bottom:-6.2rem;
    margin-top: 4rem;
    display:flex;
    flex-wrap:wrap;

    width:40vw;
  }

  .mb-4 label{ white-space:nowrap; }    /* etykieta nie łamie się w połowie */

  .mb-4 select{
    flex:1 1 240px;            /* rośnie, a w razie ciasnoty ma min ~240px */
    max-width:100%;            /* nie wyjdzie poza kontener */
    font-size:0.8rem;
    }

  .sort-wrapper {

    width:150px;
    right:2.5rem;
    top:3rem
  }

  .sort,
  .sort-by,
  .caret {

    right: auto;
    top: auto;
  }

  .sort {
    width: 100%;
    margin: .5rem 1rem 0 1rem;
  }

  .sort-by {
    margin: .75rem 1rem 0 auto;
    display: block;
    text-align: right;
    right:170px;
    top:3.5rem;
  }

  .sort-list {
    position: absolute;
    right: -4rem;
    top: 3.25rem;
    width: calc(100% + 2rem);
  }

  .pagination {

    right:8rem;
}


.badge--promo {

  top: 16px; left: -7px;

  padding: 4px 10px;

  font-size: 13px!important;



}


}


@media (max-width: 600px) {

.all-products {
    display:grid;
    grid-template-columns: repeat(2, 1fr);


  }
    .pagination {

    right:6rem;
}



    .products-section {}
    .products-wrapper {

      padding: 0 0.5rem;
    }
  /* Zmiana na jedną kolumnę na bardzo małych ekranach */

  .product {
    max-width: 100%;
    /* Automatyczna wysokość dla produktów */
  }

  .product h3 {
    font-size: 0.8rem; /* Zmniejszamy rozmiar nazwy produktu */
  }



  .products-cart {
    width: 3rem; /* Zmniejszamy szerokość przycisku koszyka */
  }

  .calc-product {
    width: 3.5rem; /* Zmniejszamy szerokość przycisków */
    height: 1.8rem;
    font-size: 1rem;
    padding: 3px;
  }

  .calc-product .calc-input {
    width: 1.4rem;
    font-size: 0.8rem;
  }

  .calc-product button {
    width: 0.9rem;
    height: 0.9rem;
    font-size: 1.2rem;
  }



  .sort-wrapper {


    width:120px;
    right:2.4rem;
    top:4rem
  }

  .sort,
  .sort-by,
  .caret {

    right: auto;
    top: auto;
  }

  .sort {
    width: 100%;
    margin: .5rem 1rem 0 1rem;
    padding: .2rem 1.5rem .2rem 1rem;
    font-size: .6rem;
  }

  .sort-by {
    margin: .75rem 1rem 0 auto;
    display: block;
    text-align: right;
    right:130px;
    top:4rem;
    font-size:0.7rem;
  }

  .sort-list {
    position: absolute;
    right: -2rem;
    top: 1.8rem;

    width: calc(100% + 2rem);
  }

  .sort-list li {

  font-size: .6rem;

}


  .mb-4 {

  gap: .5rem;
  width:10rem;

}

.mb-4 label {
  font-size: .7rem;

}

.mb-4 select {

  padding: .45rem .6rem .45rem .6rem;
  font-size: .6rem;
  line-height: 1;
}

.badge--promo {

  top: 16px; left: -7px;

  padding: 4px 10px;

  font-size: 11px!important;



}

}

@media (max-width: 533px) {
    .all-products {







      grid-template-columns: repeat(2, 1fr);
      padding: 8rem .5rem 9rem .5rem;

  }

  .product {
  position: relative;
  height: 210px;
  width: 100%;
  max-width: 260px;
  min-width: 10px;
  margin: 0;

}

.product-image {
  width: 100%;
  height: 60%;

}


.product h3 {
  font-weight: normal;
  font-size: .7rem;
  margin: .6rem 0;
}


.price {

  margin-left:3px;

  bottom: .4rem;
  font-size: 15px;
  width: 4rem;
}

.products-cart {
  width: 2.5rem;
  height: 1.8rem;
  padding: 4px;
}


.cart-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.products-cart:hover {
  background-color: rgba(110, 198, 39, .85);
  transition: background-color .4s;
}




.product .bx, .product .bxs-heart {

  font-size: 25px;

  right: .6rem;

}


.calc-product {


  height: 1.8rem;
  background: #fff;
  font-size: .8rem;
  padding: 5px;
}

.calc-product .calc-input {
  width: 1.7rem;
  height: 100%;
  font-size: .8rem;

}

.calc-product button {
  width: 1rem; /* Zwiększono szerokość przycisków */
  height: 1rem;

  font-size: 1.1rem;

}



    .pagination {

    right:4rem;


    gap: 10px;
    font-family: 'Arial', sans-serif;

    z-index: 10;

    margin-top: 4.5rem;

}

.pagination a {

    color: white;
    padding: 7px 15px;
    border-radius: 30px;
    text-decoration: none;
    font-size: 12px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.pagination a:hover {
    background-color: #45a049; /* Ciemniejszy zielony przy hover */
    transform: translateY(-2px); /* Efekt "unoszenia" przy hover */
}

.pagination .current-page {
    font-size: 14px;
    color: #555;
    font-weight: 600;
}

.badge--promo {

  top: 16px; left: -7px;

  padding: 3px 9px;

  font-size: 10px!important;

}

}


@media (max-width: 400px) {


  .products-section {}
    .products-wrapper {

      padding:0;
    }



      .mb-4 {

          gap: .4rem;
          width:9.5rem;

        }

        .mb-4 label {
          font-size: .6rem;

        }

        .mb-4 select {

          padding: .45rem .6rem .45rem .6rem;
          font-size: .5rem;
          line-height: 0.8;
        }

        .sort-wrapper {


            width:110px;
            right:1.7rem;
            top:4.5rem
          }

          .sort,
          .sort-by,
          .caret {

            right: auto;
            top: auto;
          }

          .sort {
            width: 6rem;
            margin: .5rem 1rem 0 1rem;
            padding: .2rem 0 .2rem 0.7rem;
            font-size: .5rem;
          }

          .sort-by {
            display:none;
          }

          .sort-list {
            position: absolute;
            right: -1rem;
            top: 1.8rem;

            width: calc(100% + 2rem);
          }

          .sort-list li {

          font-size: .5rem;

        }
        .pagination {

            right:3.5rem;
        }



        .product h3 {

          font-size: .6rem;

        }


        .price {

          font-size: 11px;

        }

        .products-cart {
          width: 2.2rem;
          height: 1.5rem;
          padding: 4px;
        }


        .cart-icon {
          width: 1.2rem;
          height: 1.2rem;
        }

        .product .bx, .product .bxs-heart {



              right: .4rem;

            }

        .calc-product {

          width: 2.5rem; /* Początkowa szerokość */
          height: 1.5rem;

          font-size: .7rem;
          padding: 5px;

        }

        .calc-product .calc-input {
          width: 1rem;
          height: 100%;
          font-size: .6rem;

        }

        .calc-product button {
          width: .7rem; /* Zwiększono szerokość przycisków */
          height: .7rem;

          font-size: .75rem;


        }

        .badge--promo {

          top: 16px; left: -7px;

          padding: 3px 7px;

          font-size: 8px!important;

    }


}





@media (max-width: 380px){

 .pagination {

                right:2.5rem;
                }

}

@media (max-width: 360px){

 .pagination {

                right:2.3rem;
                }

}

@media (max-width: 340px){

 .pagination {

                right:2rem;
                }

        .badge--promo {



          padding: 3px 6px;

          font-size: 7px!important;

    }

      .product {
          position: relative;
          height: 180px;
          width: 100%;
          max-width: 260px;
          min-width: 10px;
          margin: 0;

        }

      .product-image {
          width: 100%;
          height: 60%;

        }

}


.product { position: relative; }