/* ==========================================================================
   Sklep - Born to perform

   Ładowane po arkuszach WooCommerce (zależność w functions.php). Selektory są
   celowo mocniejsze niż domyślne reguły Woo typu ".woocommerce a.button" czy
   ".woocommerce ul.products li.product a img", bo inaczej Woo je nadpisuje.
   ========================================================================== */

:root {
  /* Tło boxu ze zdjęciem produktu, z projektu Figma (13254:9942). */
  --shop-color--product-media-bg: #f3e9df;
  /* Aktywny filtr na liście produktów (Figma 13257:222). */
  --shop-color--accent: #f18519;
  --shop-radius--card: 20px;
  --shop-gap--grid: 2rem;
}

/* --------------------------------------------------------------------------
   Lista produktów: nagłówek ze zdjęciami i filtry (Figma 13257:222)
   -------------------------------------------------------------------------- */

.btp-archive-hero {
  padding: 4rem 0 0;
}

.btp-archive-hero__inner {
  position: relative;
  padding: 1rem 0 0;
}

.btp-archive-hero__content {
  position: relative;
  z-index: 1;
  max-width: 44rem;
  margin: 0 auto;
}

.btp-archive-hero__heading {
  margin: 0 0 1rem;
}

.btp-archive-hero__text {
  max-width: 34rem;
  margin: 0 auto;
  color: var(--base-color-brand--text-color);
}

.btp-archive-hero__text p:last-child {
  margin-bottom: 0;
}

.btp-archive-hero__photos {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.btp-archive-hero__photo {
  position: absolute;
  width: 75px;
  height: 75px;
  margin: 0;
  border-radius: 999px;
  overflow: hidden;
}

.btp-archive-hero__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Rozstawienie jak w projekcie: dwa okręgi wyżej i szerzej, dwa niżej i bliżej. */
.btp-archive-hero__photo:nth-child(1) { left: 3%; top: 0; }
.btp-archive-hero__photo:nth-child(2) { right: 3%; top: 0; }
.btp-archive-hero__photo:nth-child(3) { left: 11%; top: 6.5rem; }
.btp-archive-hero__photo:nth-child(4) { right: 11%; top: 6.5rem; }

@media (max-width: 991px) {
  .btp-archive-hero__photos {
    display: none;
  }
}

.btp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2.5rem;
}

.btp-filters__pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1.25rem;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  background-color: transparent;
  color: var(--text-color--text-primary);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btp-filters__pill:hover {
  border-color: var(--base-color-brand--mint);
  color: var(--base-color-brand--mint);
}

.btp-filters__pill--active,
.btp-filters__pill--active:hover {
  border-color: var(--shop-color--accent);
  background-color: var(--shop-color--accent);
  color: var(--base-color-neutral--white);
}

.btp-filters__pill--empty {
  border-color: rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.3);
  cursor: default;
}

/* --------------------------------------------------------------------------
   Siatka produktów
   -------------------------------------------------------------------------- */

.woocommerce ul.products,
ul.products {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3rem var(--shop-gap--grid);
  margin: 0;
  padding: 0;
  list-style: none;
}

.woocommerce ul.products::before,
.woocommerce ul.products::after {
  content: none;
  display: none;
}

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
ul.products li.btp-product {
  float: none;
  width: auto;
  margin: 0;
  padding: 0;
  clear: none;
}

@media (max-width: 991px) {
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1rem;
  }
}

/* --------------------------------------------------------------------------
   Karta produktu (Figma 13254:9941)
   -------------------------------------------------------------------------- */

li.btp-product {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

li.btp-product .btp-product__media {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  aspect-ratio: 305 / 413;
  padding-bottom: 17px;
  overflow: hidden;
  border-radius: var(--shop-radius--card);
  background-color: var(--shop-color--product-media-bg);
}

li.btp-product .btp-product__media-link {
  position: absolute;
  inset: 0;
  display: block;
  margin: 0;
}

/* Woo ustawia height:auto na obrazkach w pętli, dlatego mocniejszy selektor. */
.woocommerce ul.products li.product.btp-product .btp-product__media img,
li.btp-product .btp-product__media img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
  display: block;
  box-shadow: none;
}

/*
 * Karty webinarow: okladka jest kwadratowa, kafelek wyzszy niz szerszy.
 * "cover" obcinalby boki i zjadal napisy, wiec pokazujemy caly obrazek.
 */
/* Mocniejszy selektor, bo regula ogolna wyzej ma .woocommerce ul.products. */
.woocommerce ul.products li.product.btp-product.btp-product--kwadrat .btp-product__media img,
li.btp-product.btp-product--kwadrat .btp-product__media img {
  object-fit: contain;
  object-position: top center;
}

li.btp-product .btp-product__cart {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 0 12px;
}

/* Przycisk "Dodaj do koszyka" renderowany przez Woo. */
.woocommerce li.btp-product .btp-product__cart a.button,
.woocommerce li.btp-product .btp-product__cart a.added_to_cart,
li.btp-product .btp-product__cart a.button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 0.6875rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--shop-radius--card);
  background-color: var(--base-color-brand--mint);
  -webkit-backdrop-filter: blur(6.9px);
  backdrop-filter: blur(6.9px);
  color: var(--base-color-neutral--white);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease, opacity 0.2s ease;
}

.woocommerce li.btp-product .btp-product__cart a.button:hover,
li.btp-product .btp-product__cart a.button:hover {
  background-color: var(--base-color-brand--dark-mint);
  color: var(--base-color-neutral--white);
}

.woocommerce li.btp-product .btp-product__cart a.button.loading {
  opacity: 0.7;
  pointer-events: none;
}

/*
 * Po dodaniu produktu Woo dokleja do kafla link "Zobacz koszyk" i ptaszek na
 * przycisku. Przy modalu jedno i drugie jest zbędne, a rozpychało kafel i łamało
 * napis na dwie linie.
 */
.woocommerce li.btp-product .btp-product__cart a.added_to_cart {
  display: none;
}

.woocommerce li.btp-product .btp-product__cart a.button.added::after,
.woocommerce li.btp-product .btp-product__cart a.button::after {
  content: none;
  display: none;
}

.woocommerce li.btp-product .btp-product__cart a.button {
  white-space: nowrap;
}

.btp-btn__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: currentColor;
}

.btp-btn__icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* Opis pod zdjęciem */
li.btp-product .btp-product__body {
  display: flex;
  flex-direction: column;
  text-align: center;
  color: var(--text-color--text-primary);
}

.woocommerce ul.products li.product.btp-product .btp-product__title,
li.btp-product .btp-product__title {
  margin: 0;
  padding: 0;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
}

li.btp-product .btp-product__title a {
  color: inherit;
  text-decoration: none;
}

li.btp-product .btp-product__title a:hover {
  color: var(--base-color-brand--mint);
}

li.btp-product .btp-product__subtitle {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--base-color-brand--text-color);
}

.woocommerce ul.products li.product.btp-product .btp-product__price,
li.btp-product .btp-product__price {
  margin: 0;
  color: var(--text-color--text-primary);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.5;
}

li.btp-product .btp-product__price del {
  margin-right: 0.5rem;
  opacity: 0.5;
}

li.btp-product .btp-product__price ins {
  text-decoration: none;
  font-weight: 400;
}

/* Znacznik promocji z Woo */
.woocommerce ul.products li.product.btp-product .onsale {
  position: absolute;
  top: 12px;
  left: 12px;
  right: auto;
  z-index: 2;
  min-height: 0;
  min-width: 0;
  margin: 0;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background-color: var(--base-color-brand--dark-mint);
  color: var(--base-color-neutral--white);
  font-size: 0.75rem;
  line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Archiwum produktów - nagłówek i belka sortowania
   -------------------------------------------------------------------------- */

.btp-shop-archive__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.btp-shop-archive__title {
  margin: 0;
}

.woocommerce .btp-shop-archive .woocommerce-notices-wrapper:empty {
  display: none;
}

.woocommerce nav.woocommerce-pagination {
  margin-top: 3rem;
}

.woocommerce nav.woocommerce-pagination ul {
  border: 0;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
}

.woocommerce nav.woocommerce-pagination ul li {
  border: 0;
}

.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
  min-width: 40px;
  padding: 0.5rem 0.75rem;
  border-radius: 999px;
  font-family: bc-novatica-cyr, sans-serif;
}

.woocommerce nav.woocommerce-pagination ul li span.current {
  background-color: var(--base-color-brand--mint);
  color: var(--base-color-neutral--white);
}

/* --------------------------------------------------------------------------
   Karta produktu (Figma 13254:10128)
   -------------------------------------------------------------------------- */

.btp-product-single .woocommerce-breadcrumb {
  margin: 0 0 2.5rem;
  color: var(--base-color-brand--text-color);
  font-size: 0.875rem;
  line-height: 1.5;
}

.btp-product-single .woocommerce-breadcrumb a {
  color: var(--base-color-brand--text-color);
  text-decoration: none;
}

.btp-product-single .woocommerce-breadcrumb a:hover {
  color: var(--base-color-brand--mint);
}

.btp-product-single div.product {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4rem;
  align-items: start;
}

/* Woo trzyma obie kolumny na width:48%; w naszej siatce muszą mieć 100%. */
.btp-product-single div.product div.images.woocommerce-product-gallery,
.btp-product-single div.product div.summary.entry-summary {
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.btp-product-single div.product .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
}

/*
 * Duże zdjęcie w stałym kadrze na beżowym tle, żeby okładka była widoczna
 * w całości i żeby wysokość kolumny nie skakała przy przełączaniu zdjęć.
 * contain, nie cover, bo obcięta okładka książki to strata informacji.
 */
.btp-product-single div.product .woocommerce-product-gallery__wrapper {
  border-radius: var(--shop-radius--card);
  overflow: hidden;
  background-color: var(--shop-color--product-media-bg);
}

/*
 * Bez wymuszonego kadru: wysokość dyktuje samo zdjęcie.
 *
 * Wcześniej była tu proporcja 4:5, ale Woo trzyma obrazki na regule
 * ".woocommerce div.product div.images img { height: auto }", która ma wyższą
 * specyficzność niż moje selektory, więc "height: 100%" nigdy nie wchodziło.
 * Obrazek zostawał w naturalnej wysokości, kontener był wyższy i pod zdjęciem
 * zostawał pas tła. Podbijanie selektorów po to, żeby dorysowywać puste pasy
 * przy zdjęciach o innej proporcji, nie miało sensu.
 */
.btp-product-single div.product .woocommerce-product-gallery__image {
  display: block;
  margin: 0;
}

.btp-product-single div.product .woocommerce-product-gallery__image > a {
  display: block;
}

.btp-product-single div.product div.images .woocommerce-product-gallery__image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--shop-radius--card);
}

/* Lupa powiększenia nad zdjęciem */
.btp-product-single div.product .woocommerce-product-gallery__trigger {
  top: 1rem;
  right: 1rem;
  z-index: 3;
}

/*
 * Pasek miniatur: jeden rząd przewijany w poziomie. Domyślnie Woo zawija je
 * do kolejnych wierszy i przy większej liczbie zdjęć rozjeżdża kolumnę.
 * Flexslider wstawia miniaturom szerokość procentową inline, dlatego jawne
 * wymiary i mocniejsze selektory.
 */
.btp-product-single div.product div.images .flex-control-thumbs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.75rem;
  margin: 0.875rem 0 0;
  padding: 0 0 0.25rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.btp-product-single div.product div.images .flex-control-thumbs::-webkit-scrollbar {
  display: none;
}

.btp-product-single div.product div.images .flex-control-thumbs li {
  flex: 0 0 auto;
  width: 78px;
  height: 78px;
  margin: 0;
  padding: 0;
  list-style: none;
  scroll-snap-align: start;
}

.btp-product-single div.product div.images .flex-control-thumbs li img {
  width: 78px;
  height: 78px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid transparent;
  background-color: var(--shop-color--product-media-bg);
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 0.2s ease, border-color 0.2s ease;
}

.btp-product-single div.product div.images .flex-control-thumbs li img:hover {
  opacity: 0.85;
}

/* Aktywna miniatura zaznaczona mintową obwódką, nie tylko przezroczystością. */
.btp-product-single div.product div.images .flex-control-thumbs li img.flex-active,
.btp-product-single div.product div.images .flex-control-thumbs li img.flex-active:hover {
  opacity: 1;
  border-color: var(--base-color-brand--mint);
}

@media (max-width: 575px) {
  .btp-product-single div.product div.images .flex-control-thumbs li,
  .btp-product-single div.product div.images .flex-control-thumbs li img {
    width: 64px;
    height: 64px;
  }
}

.btp-product-single div.product .flex-control-thumbs img {
  border-radius: 12px;
  background-color: var(--shop-color--product-media-bg);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btp-product-single div.product .flex-control-thumbs img.flex-active,
.btp-product-single div.product .flex-control-thumbs img:hover {
  opacity: 1;
}

.btp-product-single div.product .summary {
  float: none;
  width: auto;
  margin: 0;
}

.btp-product-single .btp-product-single__eyebrow {
  margin: 0 0 0.75rem;
  color: var(--base-color-brand--text-color);
}

.btp-product-single .btp-product-single__eyebrow a {
  color: inherit;
  text-decoration: none;
}

.btp-product-single div.product .product_title {
  margin: 0 0 1rem;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 2.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--base-color-brand--dark-mint);
}

.btp-product-single div.product .woocommerce-product-details__short-description {
  margin-bottom: 1.5rem;
  color: var(--base-color-brand--text-color);
  font-size: 1rem;
  line-height: 1.5;
}

.btp-product-single div.product p.price,
.btp-product-single div.product span.price {
  margin: 0 0 1.5rem;
  color: var(--text-color--text-primary);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
}

.btp-product-single div.product p.price del {
  opacity: 0.5;
  font-weight: 400;
}

.btp-product-single div.product p.price ins {
  text-decoration: none;
}

/* Box "Co zawiera" */
.btp-includes {
  margin-bottom: 2rem;
  padding: 1.5rem;
  border-radius: var(--shop-radius--card);
  background-color: rgba(68, 153, 158, 0.08);
}

.btp-includes__heading {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--base-color-brand--dark-mint);
}

.btp-includes__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.btp-includes__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--base-color-brand--text-color);
}

.btp-includes__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 0.25rem;
  color: var(--base-color-brand--mint);
}

.btp-includes__icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Koszyk z licznikiem ilości */
.btp-product-single div.product form.cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
}

.btp-product-single div.product form.cart::before,
.btp-product-single div.product form.cart::after {
  content: none;
  display: none;
}

.btp-product-single div.product form.cart div.quantity {
  order: 2;
}

/* Licznik ilości z przyciskami (minus i plus dokłada shop.js). */
.btp-page .woocommerce div.quantity,
.btp-product-single div.product form.cart div.quantity {
  display: inline-flex;
  align-items: center;
  margin: 0;
  float: none;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50px;
  overflow: hidden;
  background-color: var(--base-color-neutral--white);
}

.btp-page .woocommerce div.quantity input.qty,
.btp-product-single div.product form.cart div.quantity input.qty {
  width: 2.75rem;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1rem;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.btp-page .woocommerce div.quantity input.qty::-webkit-outer-spin-button,
.btp-page .woocommerce div.quantity input.qty::-webkit-inner-spin-button,
.btp-product-single div.quantity input.qty::-webkit-outer-spin-button,
.btp-product-single div.quantity input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.btp-qty__btn {
  width: 40px;
  height: 44px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--base-color-brand--text-color);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.btp-qty__btn:hover {
  background-color: rgba(68, 153, 158, 0.1);
  color: var(--base-color-brand--dark-mint);
}

.btp-product-single div.product form.cart button.single_add_to_cart_button {
  order: 1;
  flex: 1 1 16rem;
  min-height: 46px;
  padding: 0.6875rem 1.5rem;
  border: 1px solid var(--base-color-brand--mint);
  border-radius: 50px;
  background-color: var(--base-color-brand--mint);
  color: var(--base-color-neutral--white);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.btp-product-single div.product form.cart button.single_add_to_cart_button:hover {
  border-color: var(--base-color-brand--dark-mint);
  background-color: var(--base-color-brand--dark-mint);
}

/* --------------------------------------------------------------------------
   Produkt z wariantami (np. książka: papier / eBook)

   Formularz wariantów ma inną budowę niż zwykły koszyk: tabela z wyborem,
   pod nią cena wariantu i dopiero potem przycisk. Siatka dwukolumnowa z
   form.cart rozrzucała te bloki obok siebie, dlatego tu wracamy do bloku,
   a dwie kolumny zostają tylko na przycisku z licznikiem.
   -------------------------------------------------------------------------- */

.btp-product-single div.product form.cart.variations_form {
  display: block;
}

.btp-product-single div.product table.variations {
  width: 100%;
  margin: 0 0 1.25rem;
  border: 0;
  border-collapse: collapse;
}

.btp-product-single div.product table.variations tbody,
.btp-product-single div.product table.variations tr,
.btp-product-single div.product table.variations th.label,
.btp-product-single div.product table.variations td.value {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
}

.btp-product-single div.product table.variations th.label label {
  display: block;
  margin: 0 0 0.5rem;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--base-color-brand--dark-mint);
}

.btp-product-single div.product table.variations select {
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 0.5rem 2.75rem 0.5rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  background-color: var(--base-color-neutral--white);
  color: var(--text-color--text-primary);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%234e5151' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
}

.btp-product-single div.product table.variations select:focus {
  outline: none;
  border-color: var(--base-color-brand--mint);
  box-shadow: 0 0 0 3px rgba(68, 153, 158, 0.15);
}

/* Wyboru formatu nie trzeba czyscic osobnym linkiem - pierwsza pozycja
   selektora ("Wybierz opcje") robi to samo, a link wisial bez oprawy
   miedzy selektorem a cena.
   !important jest tu konieczne: add-to-cart-variation.js dopisuje do tego
   linku styl inline "visibility: visible; display: inline", a inline bije
   kazda regule z arkusza. */
.btp-product-single div.product .reset_variations {
  display: none !important;
}

.btp-product-single div.product .single_variation_wrap {
  display: block;
}

/* Cena wybranego wariantu.
   Woo pokazuje ja tutaj, zostawiajac zakres cen na gorze - po wyborze formatu
   widac wtedy dwie ceny naraz. W projekcie cena jest jedna i stoi nad boksem
   "Co zawiera", wiec ten blok chowamy, a gorna cene podmienia shop.js. */
.btp-product-single div.product .woocommerce-variation-price {
  display: none;
}

.btp-product-single div.product .woocommerce-variation-availability {
  margin-bottom: 0.75rem;
  font-size: 0.875rem;
  color: var(--base-color-brand--text-color);
}

/* Przycisk i licznik obok siebie, tak jak przy produkcie prostym */
.btp-product-single div.product .woocommerce-variation-add-to-cart {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1rem;
}

.btp-product-single div.product .woocommerce-variation-add-to-cart div.quantity {
  order: 2;
}

.btp-product-single div.product .woocommerce-variation-add-to-cart button.single_add_to_cart_button {
  order: 1;
}

.btp-product-single__shipping {
  margin: 0 0 2rem;
  color: var(--base-color-brand--text-color);
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
}

/* Ikony zaufania */
.btp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  list-style: none;
}

.btp-badges__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1 1 6rem;
  text-align: center;
}

.btp-badges__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.btp-badges__icon img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  display: block;
}

.btp-badges__label {
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--base-color-brand--text-color);
}

/* Akordeon pod kartą produktu */
.btp-accordion {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 52rem;
  margin: 4rem 0 0 auto;
  width: 100%;
}

.btp-accordion__item {
  padding: 1.25rem 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--shop-radius--card);
  background-color: var(--base-color-neutral--white);
}

.btp-accordion__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  list-style: none;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--base-color-brand--dark-mint);
}

.btp-accordion__question::-webkit-details-marker {
  display: none;
}

.btp-accordion__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  color: var(--base-color-brand--mint);
  transition: transform 0.2s ease;
}

.btp-accordion__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.btp-accordion__item[open] .btp-accordion__icon {
  transform: rotate(45deg);
}

/*
 * Animowana wysokość wymaga ucięcia zawartości, a odstęp nad odpowiedzią daje
 * padding wewnątrz, nie margines, bo marginesy nie dają się animować razem
 * z wysokością.
 */
.btp-accordion__answer {
  overflow: hidden;
  padding-top: 1rem;
  color: var(--base-color-brand--text-color);
  font-size: 1rem;
  line-height: 1.5;
}

.btp-accordion__item[open] .btp-accordion__answer {
  will-change: height;
}

.btp-accordion__answer p:last-child {
  margin-bottom: 0;
}

/* Podobne produkty */
.btp-product-single .related.products,
.btp-product-single .up-sells.products {
  grid-column: 1 / -1;
  margin-top: 5rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.btp-product-single .related.products > h2,
.btp-product-single .up-sells.products > h2 {
  margin: 0 0 2.5rem;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.3;
}

@media (max-width: 991px) {
  .btp-product-single div.product {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  .btp-accordion {
    margin-top: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   Koszyk i finalizacja (Figma 13254:10682)
   Standardowe szablony WooCommerce, tylko ubrane w styl projektu.
   -------------------------------------------------------------------------- */

.btp-page .woocommerce-cart-form,
.btp-page .cart-collaterals {
  width: 100%;
}

/* Dwie kolumny: pozycje koszyka i box podsumowania. */
@media (min-width: 992px) {
  .btp-page .woocommerce:has(.woocommerce-cart-form) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    gap: 3rem;
    align-items: start;
  }

  /* Powiadomienia i nagłówki idą przez całą szerokość, nie zajmują kolumny. */
  .btp-page .woocommerce:has(.woocommerce-cart-form) > .woocommerce-notices-wrapper,
  .btp-page .woocommerce:has(.woocommerce-cart-form) > .woocommerce-message,
  .btp-page .woocommerce:has(.woocommerce-cart-form) > .woocommerce-info,
  .btp-page .woocommerce:has(.woocommerce-cart-form) > .woocommerce-error,
  .btp-page .woocommerce:has(.woocommerce-cart-form) > .cross-sells {
    grid-column: 1 / -1;
  }

  .btp-page .woocommerce > form.woocommerce-cart-form {
    grid-column: 1;
    grid-row: 2;
    float: none;
    width: auto;
  }

  .btp-page .woocommerce .cart-collaterals {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 6rem;
    float: none;
    width: auto;
  }
}

.btp-page .woocommerce table.shop_table.cart {
  border: 0;
  border-radius: 0;
  margin: 0;
}

.btp-page .woocommerce table.shop_table.cart thead {
  display: none;
}

/*
 * Woo wypisuje komórki w kolejności: remove, thumbnail, name, price, quantity,
 * subtotal. Projekt chce: zdjęcie, nazwa, ilość, cena pozycji, usunięcie.
 * Kolejność ustawiamy przez order, a jednostkową cenę chowamy, bo dubluje
 * wartość pozycji.
 */
.btp-page .woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto auto 2rem;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.btp-page .woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item td {
  border: 0;
  padding: 0;
}

.btp-page .woocommerce table.shop_table.cart td.product-thumbnail { order: 1; }
.btp-page .woocommerce table.shop_table.cart td.product-name { order: 2; }
.btp-page .woocommerce table.shop_table.cart td.product-quantity { order: 3; }
.btp-page .woocommerce table.shop_table.cart td.product-subtotal { order: 4; text-align: right; }
.btp-page .woocommerce table.shop_table.cart td.product-remove { order: 5; text-align: right; }

.btp-page .woocommerce table.shop_table.cart td.product-price {
  display: none;
}

/* Koszyk na mobilce: zdjęcie i treść w dwóch kolumnach, reszta pod spodem. */
@media (max-width: 767px) {
  .btp-page .woocommerce table.shop_table.cart tr.woocommerce-cart-form__cart-item {
    grid-template-columns: 64px minmax(0, 1fr) 1.5rem;
    gap: 0.75rem 1rem;
  }

  .btp-page .woocommerce table.shop_table.cart td.product-thumbnail img {
    width: 64px;
    height: 64px;
  }

  .btp-page .woocommerce table.shop_table.cart td.product-quantity {
    grid-column: 2;
  }

  .btp-page .woocommerce table.shop_table.cart td.product-subtotal {
    grid-column: 3 / -1;
    text-align: right;
  }

  .btp-page .woocommerce table.shop_table.cart td.product-remove {
    grid-column: 3;
    grid-row: 1;
  }

  .btp-page .woocommerce table.shop_table.cart td.actions button[name="update_cart"] {
    width: 100%;
  }
}

/* Wiersz akcji tabeli: przycisk aktualizacji jako pigułka konturowa. */
.btp-page .woocommerce table.shop_table.cart td.actions button[name="update_cart"],
.btp-page .woocommerce table.shop_table.cart td.actions input[name="update_cart"] {
  padding: 0.625rem 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 50px;
  background-color: transparent;
  color: var(--text-color--text-primary);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
}

.btp-page .woocommerce table.shop_table.cart td.actions button[name="update_cart"]:hover:not(:disabled) {
  border-color: var(--base-color-brand--mint);
  background-color: transparent;
  color: var(--base-color-brand--mint);
}

.btp-page .woocommerce table.shop_table.cart td.product-thumbnail img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  background-color: var(--shop-color--product-media-bg);
}

.btp-page .woocommerce table.shop_table.cart td.product-name a {
  color: var(--text-color--text-primary);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.btp-page .woocommerce table.shop_table.cart td.product-quantity .quantity {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.btp-page .woocommerce table.shop_table.cart td.product-quantity input.qty {
  width: 3.5rem;
  height: 38px;
  border: 0;
  background: transparent;
  font-family: bc-novatica-cyr, sans-serif;
  text-align: center;
}

.btp-page .woocommerce table.shop_table.cart td.product-price,
.btp-page .woocommerce table.shop_table.cart td.product-subtotal {
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1rem;
  white-space: nowrap;
}

.btp-page .woocommerce table.shop_table.cart td.product-remove a.remove {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background-color: transparent;
  color: var(--base-color-brand--text-color) !important;
  font-size: 1.25rem;
  line-height: 24px;
}

.btp-page .woocommerce table.shop_table.cart td.product-remove a.remove:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--base-color-brand--dark-mint) !important;
}

/* Domyślny kod rabatowy w wierszu akcji zastępujemy polem w podsumowaniu. */
.btp-page .woocommerce table.shop_table.cart td.actions .coupon {
  display: none;
}

.btp-page .woocommerce table.shop_table.cart td.actions {
  padding: 1.5rem 0 0;
  border: 0;
  text-align: left;
}

/*
 * Box podsumowania.
 * Woo ustawia .cart_totals na float:right i width:48%, co w naszej kolumnie
 * siatki dawało box szerokości ~170 px: etykiety łamały się na trzy linie,
 * a kwoty wychodziły za krawędź. Dlatego jawne 100% i brak float.
 */
.btp-page .woocommerce .cart-collaterals .cart_totals,
.btp-page .woocommerce-cart .cart-collaterals .cart_totals {
  float: none;
  width: 100%;
  padding: 1.5rem;
  border-radius: var(--shop-radius--card);
  background-color: rgba(0, 44, 45, 0.04);
}

.btp-page .woocommerce .cart-collaterals .cross-sells {
  float: none;
  width: 100%;
}

/* Etykiety w podsumowaniu w jednej linii, kwoty przy prawej krawędzi. */
.btp-page .woocommerce .cart_totals table.shop_table {
  table-layout: auto;
}

.btp-page .woocommerce .cart_totals table.shop_table th {
  width: auto;
  padding-right: 0.75rem;
  white-space: nowrap;
  text-align: left;
}

.btp-page .woocommerce .cart_totals table.shop_table td {
  width: auto;
  white-space: nowrap;
}

/*
 * Wiersz przesyłki bywa długi ("Wpisz swój adres, aby wyświetlić opcje
 * wysyłki", kalkulator), więc tam pozwalamy zawijać i układamy w kolumnie.
 */
.btp-page .woocommerce .cart_totals tr.shipping th,
.btp-page .woocommerce .cart_totals tr.woocommerce-shipping-totals th {
  white-space: normal;
}

.btp-page .woocommerce .cart_totals tr.shipping td,
.btp-page .woocommerce .cart_totals tr.woocommerce-shipping-totals td {
  white-space: normal;
  font-size: 0.875rem;
  line-height: 1.5;
}

.btp-page .woocommerce .cart_totals ul#shipping_method {
  padding: 0;
  background-color: transparent;
}

.btp-page .woocommerce .cart_totals ul#shipping_method li {
  gap: 0.5rem;
  padding: 0.375rem 0;
  border-bottom: 0;
  font-size: 0.875rem;
}

.btp-page .woocommerce .cart_totals .shipping-calculator-button {
  display: inline-block;
  margin-top: 0.25rem;
  color: var(--base-color-brand--mint);
  font-size: 0.875rem;
}

.btp-page .woocommerce .cart_totals .shipping-calculator-form {
  margin-top: 0.75rem;
}

.btp-page .woocommerce .cart_totals > h2 {
  margin: 0 0 1.25rem;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--base-color-brand--dark-mint);
}

.btp-page .woocommerce .cart_totals table.shop_table {
  border: 0;
  margin: 0;
}

.btp-page .woocommerce .cart_totals table.shop_table th,
.btp-page .woocommerce .cart_totals table.shop_table td {
  padding: 0.5rem 0;
  border: 0;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  color: var(--base-color-brand--text-color);
}

.btp-page .woocommerce .cart_totals table.shop_table td {
  text-align: right;
}

/*
 * Komórka podsumowania jest wyrównana do prawej, bo tak stoją kwoty. Wiersz
 * przesyłki to jednak lista wyboru z komunikatami wtyczki, a wyrównany do
 * prawej wielolinijkowy tekst czyta się fatalnie w tej wąskiej kolumnie.
 */
.btp-page .woocommerce .cart_totals tr.shipping td {
  text-align: left;
}

.btp-page .woocommerce .cart_totals tr.shipping .woocommerce-shipping-destination {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--base-color-brand--text-color);
}

.btp-page .woocommerce .cart_totals tr.order-total th,
.btp-page .woocommerce .cart_totals tr.order-total td {
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  color: var(--text-color--text-primary);
  font-size: 1.125rem;
  font-weight: 500;
}

.btp-page .woocommerce .cart_totals .wc-proceed-to-checkout {
  padding: 1.25rem 0 0;
}

.btp-page .woocommerce .cart_totals a.checkout-button {
  display: block;
  width: 100%;
  padding: 0.875rem 1.5rem;
  border-radius: 50px;
  background-color: var(--base-color-brand--mint);
  color: var(--base-color-neutral--white);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  text-align: center;
}

.btp-page .woocommerce .cart_totals a.checkout-button:hover {
  background-color: var(--base-color-brand--dark-mint);
}

/* Powiadomienia Woo w stylu motywu */
.woocommerce-info,
.woocommerce-message,
.woocommerce-error,
.woocommerce-noreviews,
p.no-comments {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  margin: 0 0 2rem;
  padding: 1rem 1.25rem;
  border: 1px solid rgba(68, 153, 158, 0.3);
  border-top: 1px solid rgba(68, 153, 158, 0.3);
  border-radius: var(--shop-radius--card);
  background-color: rgba(68, 153, 158, 0.08);
  color: var(--base-color-brand--dark-mint);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  list-style: none;
}

.woocommerce-info::before,
.woocommerce-message::before,
.woocommerce-error::before {
  content: none;
  display: none;
}

/* Woo ustawia focus na powiadomieniu skryptem, co dawało niebieską obwódkę
   przeglądarki. Zostawiamy widoczny fokus, tylko w kolorach motywu. */
.woocommerce-info:focus,
.woocommerce-message:focus,
.woocommerce-error:focus {
  outline: 2px solid rgba(68, 153, 158, 0.4);
  outline-offset: 2px;
}

.woocommerce-error {
  border-color: rgba(180, 35, 24, 0.25);
  background-color: rgba(180, 35, 24, 0.06);
  color: #7a1c14;
}

.btp-page .woocommerce-info a.button,
.btp-page .woocommerce-message a.button,
.woocommerce-info a.button,
.woocommerce-message a.button {
  order: 2;
  margin: 0 0 0 auto;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--base-color-brand--mint);
  border-radius: 999px;
  background-color: transparent;
  color: var(--base-color-brand--mint);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
  text-decoration: none;
}

.btp-page .woocommerce-info a.button:hover,
.btp-page .woocommerce-message a.button:hover,
.woocommerce-info a.button:hover,
.woocommerce-message a.button:hover {
  background-color: var(--base-color-brand--mint);
  color: var(--base-color-neutral--white);
}

/* Komunikat zajmuje tyle miejsca, ile potrzebuje. */
.woocommerce-message,
.woocommerce-info {
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   Kupon na finalizacji zamówienia

   Woo daje tu pasek "Masz kupon?" jako powiadomienie i rozkładany formularz
   w ramce. Sprowadzamy to do jednej linijki tekstu i pigułki z pomarańczowym
   przyciskiem, tak jak w koszyku.
   -------------------------------------------------------------------------- */

.btp-page .woocommerce-form-coupon-toggle .woocommerce-info {
  display: block;
  margin: 0 0 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--base-color-brand--text-color);
  font-size: 0.9375rem;
  text-align: left;
}

.btp-page .woocommerce-form-coupon-toggle .woocommerce-info a {
  color: var(--base-color-brand--mint);
  text-decoration: underline;
}

.btp-page .woocommerce form.checkout_coupon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  max-width: 30rem;
  margin: 0 0 2.5rem;
  padding: 4px;
  border: 0;
  border-radius: 999px;
  background-color: var(--base-color-neutral--white);
}

/* Zdanie "Jeśli masz kod kuponu, zastosuj go poniżej" dubluje przełącznik. */
.btp-page .woocommerce form.checkout_coupon > p:not(.form-row) {
  display: none;
}

.btp-page .woocommerce form.checkout_coupon .form-row {
  margin: 0;
  padding: 0;
  width: auto;
  float: none;
}

.btp-page .woocommerce form.checkout_coupon .form-row-first {
  flex: 1 1 auto;
  min-width: 0;
}

.btp-page .woocommerce form.checkout_coupon input.input-text {
  width: 100%;
  min-height: 38px;
  padding: 0 0.875rem;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
}

.btp-page .woocommerce form.checkout_coupon button.button {
  flex: 0 0 auto;
  min-height: 38px;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--shop-color--accent);
  color: var(--base-color-neutral--white);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
  font-weight: 400;
}

.btp-page .woocommerce form.checkout_coupon button.button:hover {
  background-color: var(--shop-color--accent);
  opacity: 0.9;
}

.btp-page .woocommerce form.checkout_coupon .clear {
  display: none;
}

/* Kod promocyjny w podsumowaniu koszyka */
.btp-coupon {
  margin-bottom: 1.25rem;
}

.btp-coupon__label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--base-color-brand--text-color);
}

.btp-coupon__row {
  display: flex;
  align-items: center;
  padding: 4px;
  border-radius: 999px;
  background-color: var(--base-color-neutral--white);
}

.btp-coupon__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  padding: 0 0.75rem;
  border: 0;
  background: transparent;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
}

.btp-coupon__btn {
  flex: 0 0 auto;
  height: 38px;
  padding: 0 1.25rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--shop-color--accent);
  color: var(--base-color-neutral--white);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.btp-coupon__btn:hover {
  opacity: 0.9;
}

/* --------------------------------------------------------------------------
   Finalizacja zamówienia: dane po lewej, podsumowanie po prawej

   Blokowy checkout Woo ma taki układ z pudełka, ale zostaliśmy przy klasycznym
   ze względu na PayU i geowidget InPostu, więc dwie kolumny robimy siatką.
   Komórki przypisane jawnie, bo kontener ma też nagłówek i przełączniki
   logowania oraz kuponu.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  .btp-page form.checkout.woocommerce-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    grid-template-rows: auto 1fr;
    gap: 0 3rem;
    align-items: start;
  }

  .btp-page form.checkout.woocommerce-checkout #customer_details {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .btp-page form.checkout.woocommerce-checkout #order_review_heading {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }

  .btp-page form.checkout.woocommerce-checkout #order_review {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 6rem;
  }

  /* Lewa kolumna jest węższa, więc dane rozliczeniowe i dostawy jedno pod drugim. */
  .btp-page .woocommerce form.checkout .col2-set .col-1,
  .btp-page .woocommerce form.checkout .col2-set .col-2 {
    float: none;
    width: 100%;
  }

  .btp-page .woocommerce form.checkout .col2-set .col-2 {
    margin-top: 2.5rem;
  }
}

.btp-page form.checkout.woocommerce-checkout #order_review_heading {
  margin-bottom: 1rem;
}

/* Podsumowanie jako karta, tak jak box w koszyku. */
.btp-page .woocommerce #order_review {
  padding: 1.5rem;
  border-radius: var(--shop-radius--card);
  background-color: rgba(0, 44, 45, 0.04);
}

.btp-page .woocommerce table.woocommerce-checkout-review-order-table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  margin: 0 0 1.25rem;
}

.btp-page .woocommerce table.woocommerce-checkout-review-order-table thead th {
  padding: 0 0 0.75rem;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--base-color-brand--text-color);
}

.btp-page .woocommerce table.woocommerce-checkout-review-order-table td,
.btp-page .woocommerce table.woocommerce-checkout-review-order-table th {
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
  vertical-align: top;
}

.btp-page .woocommerce table.woocommerce-checkout-review-order-table td.product-total,
.btp-page .woocommerce table.woocommerce-checkout-review-order-table th:last-child {
  text-align: right;
  white-space: nowrap;
}

.btp-page .woocommerce table.woocommerce-checkout-review-order-table tfoot th {
  white-space: nowrap;
  text-align: left;
  color: var(--base-color-brand--text-color);
  font-weight: 400;
}

.btp-page .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.btp-page .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 0;
  color: var(--text-color--text-primary);
  font-size: 1.125rem;
  font-weight: 500;
}

/* Dostawa i płatności w stylu projektu */
.btp-page .woocommerce-checkout h3,
.btp-page .woocommerce-checkout #order_review_heading {
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--base-color-brand--dark-mint);
}

.btp-page .woocommerce form .form-row input.input-text,
.btp-page .woocommerce form .form-row textarea,
.btp-page .woocommerce form .form-row select,
.btp-page .woocommerce .select2-container .select2-selection--single {
  min-height: 46px;
  padding: 0.5rem 0.875rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
}

/* Wewnątrz karty podsumowania metody płatności są na białym tle, bo sama
   karta ma już przygaszone. */
.btp-page .woocommerce-checkout #order_review #payment {
  border-radius: 12px;
  background-color: var(--base-color-neutral--white);
}

.btp-page .woocommerce ul#shipping_method {
  border-radius: 12px;
  background-color: var(--base-color-neutral--white);
}

.btp-page .woocommerce ul#shipping_method {
  margin: 0;
  padding: 1rem 1.25rem;
  list-style: none;
}

/*
 * Pozycja metody: input, etykieta i opcjonalny opis. Opis (.payment_box) musi
 * iść do nowej linii na pełną szerokość, inaczej nachodzi na nazwę metody.
 */
.btp-page .woocommerce ul#shipping_method li,
.btp-page .woocommerce-checkout #payment ul.payment_methods li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin: 0;
  padding: 0.875rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
}

.btp-page .woocommerce-checkout #payment ul.payment_methods li label {
  flex: 1 1 auto;
  margin: 0;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

/*
 * Etykieta metody dostawy stoi w wąskiej kolumnie podsumowania, a "InPost
 * Paczkomat 24/7: 18,99 zł" jest dłuższe niż to miejsce. Przy flex-wrap
 * o złamaniu decyduje szerokość treści, zanim element zdąży się skurczyć,
 * więc etykieta lądowała pod kółkiem wyboru. Baza 0 trzyma ją w jednym
 * wierszu z radiem, a tekst zawija się już w środku.
 */
.btp-page .woocommerce ul#shipping_method li label {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}

/*
 * Opis metody dostawy, np. "Odbiór w wybranym paczkomacie, 24/7". Dokłada go
 * Flexible Shipping jako trzeci element pozycji, więc bez pełnej szerokości
 * wpadałby w ten sam wiersz co etykieta i spychał ją do nowej linii.
 * Mniejszy stopień pisma, bo to podpis, nie treść równorzędna z nazwą metody.
 */
.btp-page .woocommerce ul#shipping_method li .shipping-method-description {
  flex: 0 0 100%;
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  text-align: left;
  color: var(--base-color-brand--text-color);
}

.btp-page .woocommerce-checkout #payment ul.payment_methods li input[type="radio"] {
  flex: 0 0 auto;
  margin: 0;
}

.btp-page .woocommerce-checkout #payment div.payment_box {
  flex: 1 1 100%;
  width: 100%;
  margin: 0.25rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background-color: rgba(68, 153, 158, 0.08);
  color: var(--base-color-brand--text-color);
  font-size: 0.875rem;
  line-height: 1.5;
}

.btp-page .woocommerce-checkout #payment div.payment_box::before {
  content: none;
  display: none;
}

.btp-page .woocommerce-checkout #payment div.payment_box p:last-child {
  margin-bottom: 0;
}

/* Metoda bez opisu: Woo renderuje pusty box, który zostawiał pustą lukę. */
.btp-page .woocommerce-checkout #payment div.payment_box:empty {
  display: none;
  margin: 0;
  padding: 0;
}

/* Kółka radio muszą być widoczne, to nimi klient wybiera płatność. */
.btp-page .woocommerce-checkout #payment ul.payment_methods li input[type="radio"],
.btp-page .woocommerce ul#shipping_method li input[type="radio"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--base-color-brand--mint);
  opacity: 1;
  appearance: auto;
  -webkit-appearance: radio;
}

/*
 * Zgoda RODO i przycisk zamówienia.
 * Woo zagnieżdża tu trzy kontenery: .place-order > .terms-and-conditions-wrapper
 * > .privacy-policy-text. Padding tylko na zewnętrznym, inaczej odstępy się
 * sumują i nad tekstem powstaje kilkadziesiąt pikseli pustki.
 */
.btp-page .woocommerce-checkout #payment div.form-row.place-order {
  margin: 0;
  padding: 1.25rem;
}

.btp-page .woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper {
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: 0.875rem;
}

/*
 * Zgoda na dostarczenie pliku przed uplywem 14 dni. Pole dokladamy my, wiec
 * i wyglad trzeba dolozyc - Woo stylizuje tylko swoja zgode na regulamin.
 */
.btp-page .woocommerce-checkout #payment p.btp-zgoda {
  margin: 0 0 1.25rem;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

/*
 * Zgoda na regulamin: motyw ustawia inputom appearance:none i zerowa szerokosc,
 * wiec ustawowe pole wyboru bylo niewidoczne. Da sie je klikac przez etykiete,
 * ale klient nie widzi, czy jest zaznaczone.
 */
.btp-page .woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper input[type="checkbox"],
.btp-page .woocommerce-checkout #payment p.btp-zgoda input[type="checkbox"] {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--base-color-brand--mint);
  opacity: 1;
  appearance: auto;
  -webkit-appearance: checkbox;
}

.btp-page .woocommerce-checkout #payment .woocommerce-terms-and-conditions-wrapper label.checkbox,
.btp-page .woocommerce-checkout #payment p.btp-zgoda label.checkbox {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin: 0;
  cursor: pointer;
}

.btp-page .woocommerce-checkout #payment .woocommerce-privacy-policy-text {
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--base-color-brand--text-color);
}

.btp-page .woocommerce-checkout #payment .woocommerce-privacy-policy-text p:last-child {
  margin-bottom: 0;
}

.btp-page .woocommerce-checkout #payment #place_order {
  margin-top: 0;
}

.btp-page .woocommerce ul#shipping_method li:last-child,
.btp-page .woocommerce-checkout #payment ul.payment_methods li:last-child {
  border-bottom: 0;
}

.btp-page .woocommerce-checkout #payment ul.payment_methods {
  padding: 1rem 1.25rem;
  border-bottom: 0;
}

.btp-page .woocommerce-checkout #payment ul.payment_methods li img {
  max-height: 24px;
  width: auto;
  margin-left: auto;
}

.btp-page .woocommerce-checkout #payment div.form-row.place-order {
  padding: 1.25rem;
}

.btp-page .woocommerce-checkout #payment #place_order {
  width: 100%;
  min-height: 50px;
  border-radius: 50px;
  background-color: var(--base-color-brand--mint);
  color: var(--base-color-neutral--white);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

.btp-page .woocommerce-checkout #payment #place_order:hover {
  background-color: var(--base-color-brand--dark-mint);
}

/* --------------------------------------------------------------------------
   Podziękowanie za zamówienie i szczegóły zamówienia
   -------------------------------------------------------------------------- */

.btp-page .woocommerce-order .woocommerce-notice--success {
  margin-bottom: 2rem;
  padding: 1.25rem 1.5rem;
  border-radius: var(--shop-radius--card);
  background-color: rgba(68, 153, 158, 0.08);
  color: var(--base-color-brand--dark-mint);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
}

.btp-page .woocommerce ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  margin: 0 0 3rem;
  padding: 1.5rem;
  border: 0;
  border-radius: var(--shop-radius--card);
  background-color: rgba(0, 44, 45, 0.04);
  list-style: none;
}

.btp-page .woocommerce ul.woocommerce-order-overview li {
  flex: 1 1 10rem;
  margin: 0;
  padding: 0;
  border: 0;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--base-color-brand--text-color);
  text-transform: none;
}

.btp-page .woocommerce ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: 0.25rem;
  color: var(--text-color--text-primary);
  font-size: 1.0625rem;
  font-weight: 500;
}

.btp-page .woocommerce table.woocommerce-table--order-details,
.btp-page .woocommerce table.woocommerce-table--order-downloads,
.btp-page .woocommerce table.woocommerce-orders-table {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  margin-bottom: 2.5rem;
}

.btp-page .woocommerce table.woocommerce-table th,
.btp-page .woocommerce table.woocommerce-orders-table th {
  padding: 0.75rem 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  color: var(--base-color-brand--text-color);
}

.btp-page .woocommerce table.woocommerce-table td,
.btp-page .woocommerce table.woocommerce-orders-table td {
  padding: 0.875rem 0;
  border: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
}

.btp-page .woocommerce table.woocommerce-table tfoot td,
.btp-page .woocommerce table.woocommerce-table tfoot th {
  border-bottom: 0;
}

.btp-page .woocommerce table.woocommerce-table tfoot tr:last-child th,
.btp-page .woocommerce table.woocommerce-table tfoot tr:last-child td {
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  font-size: 1.0625rem;
  font-weight: 500;
  color: var(--text-color--text-primary);
}

.btp-page .woocommerce .woocommerce-customer-details address {
  padding: 1.25rem 1.5rem;
  border: 0;
  border-radius: var(--shop-radius--card);
  background-color: rgba(0, 44, 45, 0.04);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  font-style: normal;
}

.btp-page .woocommerce .woocommerce-bacs-bank-details {
  padding: 1.25rem 1.5rem;
  border-radius: var(--shop-radius--card);
  background-color: rgba(241, 133, 25, 0.08);
}

/* --------------------------------------------------------------------------
   Moje konto
   -------------------------------------------------------------------------- */

/*
 * Dwie kolumny: menu konta i treść. Klasa woocommerce-account siedzi na <body>,
 * dlatego celujemy w kontener po zawartości, a nie po klasie nadrzędnej.
 */
@media (min-width: 992px) {
  .btp-page .woocommerce:has(.woocommerce-MyAccount-navigation) {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
  }

  .btp-page .woocommerce:has(.woocommerce-MyAccount-navigation) > .woocommerce-notices-wrapper {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  /*
   * Komórki przypisane jawnie. Bez tego pusty wrapper powiadomień zajmuje
   * pierwszą komórkę i menu wypada w prawą kolumnę.
   */
  .btp-page .woocommerce-MyAccount-navigation {
    grid-column: 1;
    grid-row: 2;
    position: sticky;
    top: 6rem;
  }

  .btp-page .woocommerce-MyAccount-content {
    grid-column: 2;
    grid-row: 2;
  }
}

.btp-page .woocommerce-MyAccount-navigation {
  float: none;
  width: auto;
}

.btp-page .woocommerce-MyAccount-navigation ul {
  margin: 0;
  padding: 1rem;
  border-radius: var(--shop-radius--card);
  background-color: rgba(0, 44, 45, 0.04);
  list-style: none;
}

.btp-page .woocommerce-MyAccount-navigation li {
  margin: 0;
}

.btp-page .woocommerce-MyAccount-navigation li a {
  display: block;
  padding: 0.625rem 0.75rem;
  border-radius: 12px;
  color: var(--base-color-brand--text-color);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
  text-decoration: none;
}

.btp-page .woocommerce-MyAccount-navigation li a:hover {
  background-color: rgba(68, 153, 158, 0.1);
  color: var(--base-color-brand--dark-mint);
}

.btp-page .woocommerce-MyAccount-navigation li.is-active a {
  background-color: var(--base-color-brand--mint);
  color: var(--base-color-neutral--white);
}

.btp-page .woocommerce-MyAccount-content {
  float: none;
  width: auto;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
}

.btp-page .woocommerce-MyAccount-content > p:first-child {
  margin-top: 0;
}

.btp-page .woocommerce-MyAccount-content h2,
.btp-page .woocommerce-MyAccount-content h3 {
  margin: 0 0 1rem;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--base-color-brand--dark-mint);
}

.btp-page .woocommerce-MyAccount-content .woocommerce-Address {
  padding: 1.25rem 1.5rem;
  border-radius: var(--shop-radius--card);
  background-color: rgba(0, 44, 45, 0.04);
}

.btp-page .woocommerce-MyAccount-content .woocommerce-Address address {
  font-style: normal;
  line-height: 1.6;
}

/* Logowanie i rejestracja */
.btp-page .woocommerce form.woocommerce-form-login,
.btp-page .woocommerce form.woocommerce-form-register,
.btp-page .woocommerce form.woocommerce-ResetPassword {
  max-width: 32rem;
  padding: 1.75rem;
  border: 0;
  border-radius: var(--shop-radius--card);
  background-color: rgba(0, 44, 45, 0.04);
}

.btp-page .woocommerce form.woocommerce-form-login button.button,
.btp-page .woocommerce form.woocommerce-form-register button.button {
  border-radius: 50px;
  padding: 0.75rem 1.75rem;
}

/* --------------------------------------------------------------------------
   Strony Woo w domyślnym szablonie strony (Koszyk, Zamówienie, Moje konto)
   -------------------------------------------------------------------------- */

.btp-page .woocommerce {
  font-family: bc-novatica-cyr, sans-serif;
}

.btp-page .woocommerce a.button,
.btp-page .woocommerce button.button,
.btp-page .woocommerce input.button,
.btp-page .woocommerce a.button.alt,
.btp-page .woocommerce button.button.alt {
  border: 1px solid var(--base-color-brand--mint);
  border-radius: var(--shop-radius--card);
  background-color: var(--base-color-brand--mint);
  color: var(--base-color-neutral--white);
  font-family: bc-novatica-cyr, sans-serif;
  font-weight: 400;
}

.btp-page .woocommerce a.button:hover,
.btp-page .woocommerce button.button:hover,
.btp-page .woocommerce input.button:hover,
.btp-page .woocommerce a.button.alt:hover,
.btp-page .woocommerce button.button.alt:hover {
  border-color: var(--base-color-brand--dark-mint);
  background-color: var(--base-color-brand--dark-mint);
  color: var(--base-color-neutral--white);
}

/* --------------------------------------------------------------------------
   Elementy wspólne sklepu: etykieta, pigułka, nagłówek sekcji
   -------------------------------------------------------------------------- */

.btp-eyebrow {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.btp-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0.75rem 1.5rem;
  border: 1px solid var(--base-color-brand--mint);
  border-radius: 50px;
  background-color: var(--base-color-brand--mint);
  color: var(--base-color-neutral--white);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btp-pill:hover {
  border-color: var(--base-color-brand--dark-mint);
  background-color: var(--base-color-brand--dark-mint);
  color: var(--base-color-neutral--white);
}

.btp-pill--outline {
  border-color: rgba(0, 0, 0, 0.15);
  background-color: transparent;
  color: var(--text-color--text-primary);
}

.btp-pill--outline:hover {
  border-color: var(--base-color-brand--mint);
  background-color: transparent;
  color: var(--base-color-brand--mint);
}

.btp-pill--disabled {
  border-color: rgba(68, 153, 158, 0.35);
  background-color: rgba(68, 153, 158, 0.35);
  cursor: default;
}

.btp-pill__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
}

.btp-pill__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.btp-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.btp-section-head__text {
  max-width: 42rem;
}

.btp-section-head__text h2 {
  margin: 0 0 0.75rem;
}

.btp-section-head__text p {
  margin: 0;
  color: var(--base-color-brand--text-color);
}

/* --------------------------------------------------------------------------
   Strona główna sklepu: hero (Figma 13254:9921)
   -------------------------------------------------------------------------- */

.btp-shop-hero {
  padding-top: 1.75rem;
}

.btp-shop-hero__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 33rem;
  padding: 4rem 1.5rem;
  overflow: hidden;
  border-radius: var(--shop-radius--card);
  background-color: var(--base-color-brand--dark-mint);
}

.btp-shop-hero__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btp-shop-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 44, 45, 0.25) 0%, rgba(0, 44, 45, 0.55) 100%);
}

.btp-shop-hero__content {
  position: relative;
  z-index: 1;
  max-width: 50rem;
}

.btp-shop-hero__heading {
  margin: 0 0 1.5rem;
}

.btp-shop-hero__text {
  margin: 0 auto;
  max-width: 41rem;
}

.btp-shop-hero__actions {
  margin-top: 2rem;
}

@media (max-width: 767px) {
  .btp-shop-hero__inner {
    min-height: 26rem;
    padding: 3rem 1.25rem;
  }
}

/* --------------------------------------------------------------------------
   Strona główna sklepu: kafle kategorii (Figma 13254:10069)
   -------------------------------------------------------------------------- */

.btp-shop-cats {
  padding: 2.5rem 0;
}

.btp-shop-cats__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

.btp-cat-card {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  justify-content: space-between;
  padding: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--shop-radius--card);
  background-color: var(--base-color-neutral--white);
}

.btp-cat-card__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  text-align: center;
}

.btp-cat-card__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
}

.btp-cat-card__icon img {
  width: 38px;
  height: 38px;
  object-fit: contain;
  display: block;
}

.btp-cat-card__title {
  margin: 0 0 0.5rem;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--text-color--text-primary);
}

.btp-cat-card__desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--base-color-brand--text-color);
}

.btp-cat-card__actions .btp-pill {
  width: 100%;
}

@media (max-width: 991px) {
  .btp-shop-cats__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .btp-shop-cats__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Strona główna sklepu: dlaczego materiały pomagają (Figma 13254:10014)
   -------------------------------------------------------------------------- */

.btp-shop-benefits__head {
  max-width: 44rem;
  margin: 0 auto 3rem;
}

.btp-shop-benefits__head h2 {
  margin: 0 0 1rem;
}

.btp-shop-benefits__head p {
  margin: 0;
  color: var(--base-color-brand--text-color);
}

.btp-shop-benefits__row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem;
}

.btp-benefit-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: var(--shop-radius--card);
  background-color: var(--base-color-neutral--white);
  text-align: center;
}

.btp-benefit-card__img {
  width: 169px;
  height: 145px;
  flex: 0 0 auto;
}

.btp-benefit-card__img img {
  width: 169px;
  height: 145px;
  object-fit: contain;
  display: block;
}

.btp-benefit-card__title {
  margin: 0 0 0.5rem;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--base-color-brand--dark-mint);
}

.btp-benefit-card__desc {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--base-color-brand--text-color);
}

@media (max-width: 991px) {
  .btp-shop-benefits__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px) {
  .btp-shop-benefits__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Nawigacja: koszyk i profil (Figma 13254:9905)
   -------------------------------------------------------------------------- */

/*
 * Po dołożeniu "Sklep", koszyka i profilu pasek nawigacji przestał się mieścić
 * w jednej linii na 1440 px, więc zwężamy odstępy w menu i zmniejszamy okrągły
 * przycisk przy "Kontakt".
 */
@media (min-width: 992px) {
  /* Pozycje menu nie mogą się łamać na dwie linie. */
  .navbar2_link,
  .navbar2_link .button-text-02,
  .navbar2_dropdwn-toggle {
    white-space: nowrap;
  }

  .navbar2_link {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .navbar2_button-wrapper {
    margin-left: 0.75rem;
    grid-column-gap: 0.75rem;
  }

  .nav-ctc-button {
    grid-column-gap: 0.75rem;
    grid-row-gap: 0.75rem;
  }

  /* Okrągły przycisk ze strzałką przy "Kontakt" - mniejszy, żeby nie dominował. */
  /* Padding zdjety, wiec ikone centrujemy flexem, inaczej ucieka w rog. */
  .nav-ctc-button .button.is-icon-only,
  .navbar2_button-wrapper .button.is-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    padding: 0;
  }

  .nav-ctc-button .button.is-icon-only .icon-embed-small,
  .navbar2_button-wrapper .button.is-icon-only .icon-embed-small {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
  }
}

.btp-nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-right: 0.75rem;
}

.btp-nav-actions__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-color--text-primary);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  text-decoration: none;
  transition: color 0.2s ease;
}

.btp-nav-actions__link:hover {
  color: var(--base-color-brand--mint);
}

.btp-nav-actions__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
}

.btp-nav-actions__icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Profil: obrysowana ikona bez wypełnienia, jak w projekcie. */
.btp-nav-actions__icon--user {
  width: 24px;
  height: 24px;
  color: var(--base-color-brand--dark-mint);
}

.btp-nav-actions__icon--user svg {
  width: 24px;
  height: 24px;
}

.btp-nav-actions__link {
  white-space: nowrap;
}

/* Licznik: pomarańczowy krążek nad prawym górnym rogiem ikony koszyka. */
.btp-nav-actions__cart {
  position: relative;
}

.btp-nav-actions__cart .btp-cart-count {
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: var(--shop-color--accent);
}

/*
 * Poniżej 992 px menu zwija się do hamburgera, a w pasku zostają logo,
 * "Kontakt", okrągły przycisk i hamburger. Dołożenie koszyka i profilu
 * rozpychało dokument szerzej niż ekran (poziomy scroll na całej witrynie),
 * więc na mobile zostaje sam koszyk z licznikiem. Profil jest w menu i stopce.
 */
@media (max-width: 991px) {
  .btp-nav-actions {
    gap: 0.5rem;
    margin-right: 0.5rem;
  }

  .navbar2_button-wrapper {
    margin-left: 0.5rem;
    grid-column-gap: 0.5rem;
  }

  .nav-ctc-button {
    grid-column-gap: 0.5rem;
    grid-row-gap: 0.5rem;
  }

  .nav-ctc-button .button.is-icon-only,
  .navbar2_button-wrapper .button.is-icon-only {
    width: 2rem;
    height: 2rem;
    min-width: 2rem;
    padding: 0;
  }
}

/* --------------------------------------------------------------------------
   Modal po dodaniu do koszyka
   -------------------------------------------------------------------------- */

.btp-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.btp-modal[hidden] {
  display: none;
}

body.btp-modal-open {
  overflow: hidden;
}

.btp-modal__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 44, 45, 0.55);
}

.btp-modal__panel {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  border-radius: var(--shop-radius--card);
  background-color: var(--base-color-neutral--white);
  box-shadow: 0 24px 60px rgba(0, 44, 45, 0.2);
}

.btp-modal__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.btp-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--base-color-brand--mint);
}

.btp-modal__icon svg {
  width: 22px;
  height: 22px;
  display: block;
}

.btp-modal__title {
  flex: 1 1 auto;
  margin: 0;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--base-color-brand--dark-mint);
}

.btp-modal__close {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background-color: transparent;
  color: var(--base-color-brand--text-color);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.btp-modal__close:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.btp-modal__product {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 0;
}

.btp-modal__product-img {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--shop-color--product-media-bg);
}

.btp-modal__product-img img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  display: block;
}

.btp-modal__product-name {
  margin: 0 0 0.5rem;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
}

/* Wybrany format pod nazwą produktu, np. "Format: eBook (PDF)". */
.btp-modal__product-variant {
  margin: -0.25rem 0 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--base-color-brand--text-color);
}

.btp-modal__product-price {
  margin: 0;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  white-space: nowrap;
}

.btp-modal__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 999px;
  overflow: hidden;
}

.btp-modal__qty-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background-color: transparent;
  color: var(--base-color-brand--text-color);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}

.btp-modal__qty-btn:hover {
  background-color: rgba(68, 153, 158, 0.1);
  color: var(--base-color-brand--mint);
}

.btp-modal__qty-input {
  width: 2.5rem;
  height: 32px;
  border: 0;
  background: transparent;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 0.9375rem;
  text-align: center;
}

.btp-modal__totals {
  margin: 0;
  padding: 1rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.btp-modal__totals-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--base-color-brand--text-color);
}

.btp-modal__totals-row dt,
.btp-modal__totals-row dd {
  margin: 0;
}

.btp-modal__totals-row--total {
  margin-bottom: 0;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--text-color--text-primary);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1.125rem;
  font-weight: 500;
}

.btp-modal__actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.btp-modal__btn {
  justify-content: center;
  text-align: center;
}

@media (max-width: 575px) {
  .btp-modal__product {
    grid-template-columns: 56px minmax(0, 1fr);
  }

  .btp-modal__product-price {
    grid-column: 2;
  }

  .btp-modal__actions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   Licznik koszyka w nagłówku
   -------------------------------------------------------------------------- */

.btp-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background-color: var(--base-color-brand--dark-mint);
  color: var(--base-color-neutral--white);
  font-size: 0.75rem;
  line-height: 1;
}

.btp-cart-count--empty {
  display: none;
}

/* --------------------------------------------------------------------------
   404 i wyszukiwanie
   -------------------------------------------------------------------------- */

.btp-404__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

.btp-404__search,
.btp-search__form {
  margin-top: 2rem;
}

.btp-single__image {
  margin-bottom: 2rem;
}

.btp-single__image img {
  width: 100%;
  height: auto;
  border-radius: var(--shop-radius--card);
  display: block;
}

.btp-single__back {
  margin-top: 2.5rem;
}

.btp-archive__list,
.btp-search__list {
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.btp-archive__item,
.btp-search__item {
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.btp-archive__item h2,
.btp-search__item h2 {
  margin: 0 0 0.5rem;
}

.btp-archive__item a,
.btp-search__item a {
  color: inherit;
  text-decoration: none;
}

.btp-archive__item a:hover,
.btp-search__item a:hover {
  color: var(--base-color-brand--mint);
}

.btp-archive__pagination,
.btp-search__pagination {
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Awatar autorki w bloku "Wiecej o mnie"

   Webflow daje .author-avatar-img szerokosc i wysokosc 100%, ale bez
   object-fit, wiec kazde niekwadratowe zdjecie bylo sciskane.
   -------------------------------------------------------------------------- */

.author-avatar-img,
.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* --------------------------------------------------------------------------
   Oczekiwanie na potwierdzenie BLIK (zamiast szablonu wtyczki Paynow)
   -------------------------------------------------------------------------- */

.btp-blik {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin: 0 0 2rem;
  padding: 1.5rem 1.75rem;
  border: 1px solid rgba(68, 153, 158, 0.25);
  border-radius: var(--shop-radius--card);
  background-color: #fff;
}

.btp-blik__spinner {
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  margin-top: 0.15rem;
  border: 3px solid rgba(68, 153, 158, 0.2);
  border-top-color: var(--base-color-brand--mint);
  border-radius: 50%;
  animation: btp-blik-obrot 0.9s linear infinite;
}

@keyframes btp-blik-obrot {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .btp-blik__spinner { animation-duration: 3s; }
}

.btp-blik__tytul {
  margin: 0 0 0.35rem;
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--base-color-brand--dark-mint);
}

.btp-blik__opis {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--base-color-brand--text-color);
}

.btp-blik__uwaga {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: rgba(0, 44, 45, 0.6);
}

@media (max-width: 479px) {
  .btp-blik { flex-direction: column; gap: 1rem; padding: 1.25rem; }
}

/* --------------------------------------------------------------------------
   Kasa: szersze podsumowanie i porządek w jego środku (23.09)

   Kolumna podsumowania miała 24rem. W dwóch kolumnach tabeli zostawało na
   metody wysyłki niecałe 13rem, więc "InPost Paczkomat 24/7: 16,90 zł"
   łamało się na cztery linie, a pod spodem stał pogrubiony opis.
   -------------------------------------------------------------------------- */

@media (min-width: 992px) {
  .btp-page form.checkout.woocommerce-checkout {
    grid-template-columns: minmax(0, 1fr) 30rem;
  }
}

@media (min-width: 1280px) {
  .btp-page form.checkout.woocommerce-checkout {
    grid-template-columns: minmax(0, 1fr) 34rem;
    gap: 0 4rem;
  }
}

/*
 * Stopka podsumowania jako elastyczne wiersze zamiast wierszy tabeli.
 *
 * W układzie tabeli wysyłka stała w drugiej kolumnie, obok podpisu
 * "Przesyłka", i dostawała połowę szerokości karty. Przestawienie samego
 * wiersza na blok nie pomagało: przeglądarka zamyka go w niewidocznej
 * komórce, która kurczy się do treści. Stopka jako blok, a jej wiersze
 * jako flex, dają to, o co chodziło: podpis po lewej, kwota przy prawej
 * krawędzi pod nagłówkiem "Kwota", a wysyłka i paczkomat na całą szerokość.
 */
.btp-page .woocommerce table.woocommerce-checkout-review-order-table,
.btp-page .woocommerce table.woocommerce-checkout-review-order-table thead,
.btp-page .woocommerce table.woocommerce-checkout-review-order-table tbody,
.btp-page .woocommerce table.woocommerce-checkout-review-order-table tfoot {
  display: block;
  width: 100%;
}

.btp-page .woocommerce table.woocommerce-checkout-review-order-table tr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.btp-page .woocommerce table.woocommerce-checkout-review-order-table thead tr {
  border-bottom-color: rgba(0, 0, 0, 0.12);
}

.btp-page .woocommerce table.woocommerce-checkout-review-order-table th,
.btp-page .woocommerce table.woocommerce-checkout-review-order-table td {
  display: block;
  border: 0;
}

/* Linia pod nagłówkiem idzie przez cały wiersz, nie przez każdą komórkę
   osobno - inaczej między "Produkt" a "Kwota" zostawała w niej przerwa. */
.btp-page .woocommerce table.woocommerce-checkout-review-order-table thead th {
  border-bottom: 0;
}

/* Nazwa produktu zabiera, ile trzeba, kwota trzyma się prawej krawędzi. */
.btp-page .woocommerce table.woocommerce-checkout-review-order-table .product-name {
  flex: 1 1 0;
  min-width: 0;
}

.btp-page .woocommerce table.woocommerce-checkout-review-order-table .product-total,
.btp-page .woocommerce table.woocommerce-checkout-review-order-table tfoot td {
  flex: 0 0 auto;
  text-align: right;
}

/* Linia nad sumą przeniesiona z komórek na wiersz. */
.btp-page .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total {
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 0;
}

.btp-page .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.btp-page .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
  border-top: 0;
}

/* Wysyłka i wybór paczkomatu na pełną szerokość karty. */
.btp-page .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th,
.btp-page .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td,
.btp-page .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.paczkomaty-shipping td {
  flex: 0 0 100%;
  width: 100%;
  text-align: left;
}

.btp-page .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals th {
  padding-bottom: 0.5rem;
}

.btp-page .woocommerce table.woocommerce-checkout-review-order-table tfoot tr.woocommerce-shipping-totals td {
  padding-top: 0;
}

.btp-page .woocommerce table.woocommerce-checkout-review-order-table tr.paczkomaty-shipping select,
.btp-page .woocommerce table.woocommerce-checkout-review-order-table tr.paczkomaty-shipping .select2-container {
  width: 100% !important;
  max-width: none;
}

.btp-page .woocommerce table.woocommerce-checkout-review-order-table ul#shipping_method {
  width: 100%;
  box-sizing: border-box;
}

/* Opis metody dziedziczył pogrubienie komórki tabeli. To podpis, nie nazwa. */
.btp-page .woocommerce ul#shipping_method li .shipping-method-description {
  font-weight: 400;
  color: rgba(0, 44, 45, 0.65);
}

/* Etykieta płatności w jednym wierszu z kółkiem - ten sam problem co przy
   wysyłce: długa nazwa z logo spadała pod radio. */
.btp-page .woocommerce-checkout #payment ul.payment_methods li label {
  flex: 1 1 0;
  min-width: 0;
}

.btp-page .woocommerce-checkout #payment ul.payment_methods li label img {
  display: inline-block;
  max-height: 20px;
  width: auto;
  margin: 0 0 0 0.375rem;
  vertical-align: middle;
}

/* Pole kodu BLIK jak pozostałe pola formularza. Wtyczka daje mu natywną,
   cienką ramkę, która w tej karcie wyglądała na zepsutą. */
.btp-page .woocommerce-checkout #paynow_blik_code {
  display: block;
  width: 100%;
  max-width: 11rem;
  min-height: 46px;
  margin-top: 0.375rem;
  padding: 0.5rem 0.875rem;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  background-color: var(--base-color-neutral--white);
  font-family: bc-novatica-cyr, sans-serif;
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  text-align: center;
  color: var(--text-color--text-primary);
}

.btp-page .woocommerce-checkout #paynow_blik_code:focus {
  border-color: var(--base-color-brand--mint);
  outline: 2px solid rgba(68, 153, 158, 0.25);
  outline-offset: 0;
}