/********************************************************
			Coderplace Custom Styles
********************************************************/
.tm-carousel {
  display: none;
  position: relative;
  float: left;
  width: 100%;
  margin: 0;
}
.cp-carousel {
  display: none;
  position: relative;
  float: left;
  width: 100%;
  margin: 0;
}
.owl-carousel .owl-wrapper {
  display: none;
  position: relative;
  -webkit-transform: translate3d(0px, 0px, 0px);
  -ms-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate3d(0px, 0px, 0px);
  -moz-transform: translate3d(0px, 0px, 0px);
  display: flex !important;
  flex-wrap: wrap;
}
.owl-carousel .owl-wrapper:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.owl-carousel .owl-wrapper-outer {
  overflow-x: clip;
  position: relative;
  float: left;
  width: 100%;
  padding: 0;
}
.owl-carousel .owl-wrapper-outer.autoHeight {
  -webkit-transition: height 500ms ease-in-out;
  -moz-transition: height 500ms ease-in-out;
  -ms-transition: height 500ms ease-in-out;
  -o-transition: height 500ms ease-in-out;
  transition: height 500ms ease-in-out; 
}
.owl-carousel .owl-item {
  float: left;
  display: flex;
  height: auto;
}
#cptestimonial .owl-wrapper-outer .owl-item {
  display: block;
}
.owl-carousel .owl-item .manu_image a {
  display: inline-block;
}
.owl-carousel .owl-item .manu_image a img {
  max-width: 100%;
}

.owl-carousel .owl-wrapper,
.owl-carousel .owl-item {
  /* fix */
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  text-align: center;
}

/* mouse grab icon */
.customNavigation {
	position: absolute;
	z-index: 9;
	width: 100%;
	top: 58%;
	direction: ltr !important;
	right: 0;
	left: auto;
  opacity: 0;
  -khtml-opacity: 0;
-webkit-opacity: 0;
-moz-opacity: 0;
}
.products .customNavigation { top: 48%; }
.cpcategorylist .products .customNavigation { top: 37%; }
.tmcategorylist:hover .customNavigation {
	opacity: 1;
	-khtml-opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;
}
.customNavigation a.prev::before {
	content: "\E314";
	font-family: "Material Icons";
	position: absolute;
	font-size: 20px;
	right: 5px;
	top: -1px;
	color: #808080;
}
.customNavigation a.next::before {
	content: "\E315";
	font-family: "Material Icons";
	position: absolute;
	font-size: 20px;
	position: absolute;
	right: 3px;
	top: -1px;
	color: #808080;
}
#tmtestimonialcmsblock .customNavigation {
  top: -24px;
  z-index: 5;
  right: 15px;
}
#index #tmtestimonialcmsblock .customNavigation {
  top: -40px;
  right: 0;
}
.special-products .customNavigation {
	top: 52%;
}
.special-products:hover .customNavigation, 
.products:hover .customNavigation,
.testimonial-block-part:hover .customNavigation,
.tmblog-latest:hover .customNavigation, 
#tminstagramblock:hover .customNavigation,
.product-accessories:hover .customNavigation,
.productscategory-products:hover .customNavigation{
  opacity: 1;
  -khtml-opacity: 1;
  -webkit-opacity: 1;
  -moz-opacity: 1;
}
.lastest_block .customNavigation {
	top: 44%;
}
.customNavigation i {
	color: #222 !important;
	cursor: pointer;
	font-size: 0;
	font-weight: 500;
	height: 38px;
	line-height: 32px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	text-align: center;
	width: 38px;
	background: transparent;
	border-radius: 0;
	font-style: unset;
	box-shadow: 0px 0px 16px 0px rgba(0,0,0,0.11);
}

.customNavigation i.prev {
	background: transparent;
	right: auto;
	background: #fff;
	border-radius: 50%;
  left: -5px;
}
.customNavigation i.next {
	background: transparent;
	right: 0px;
	background: #fff;
	border-radius: 50%;
  right: -5px;
}
.tmcategorylist .customNavigation i.prev, 
.testimonial-block-part .customNavigation i.prev, 
#tminstagramblock .btn.prev.instagram_prev,
.special-products .customNavigation i.prev,
.btn.prev.accessories_prev {
	left: -20px;
}
.tmcategorylist .customNavigation i.next, 
.testimonial-block-part .customNavigation i.next, 
#tminstagramblock .btn.next.instagram_next,
.special-products .customNavigation i.next,
.btn.next.accessories_next  {
  right: -20px;
}
.testimonial-block-part .customNavigation i.prev, .testimonial-block-part .customNavigation i.next {
  display: block;
}
.customNavigation i.prev::before {
	content: '';
	-webkit-mask-image: url(../img/megnor/pro-left.svg);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-image: url(../img/megnor/pro-left.svg);
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: #000;
	mask-size: 18px;
	font-size: 18px;
	width: 38px;
	height: 38px;
	display: block;
  -webkit-mask-size: 18px;
}
#tmtestimonialcmsblock .customNavigation i.prev::before {
  right: 1px;
  font-weight: 500;
}
#tmtestimonialcmsblock .customNavigation i.next::before {
  right: 0;
  font-weight: 500;
}
.customNavigation i.next::before {
	content: '';
	-webkit-mask-image: url(../img/megnor/pro-right.svg);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-image: url(../img/megnor/pro-right.svg);
	mask-position: center;
	mask-repeat: no-repeat;
	background-color: #000;
	mask-size: 18px;
	font-size: 18px;
	width: 38px;
	height: 38px;
	display: block;
  -webkit-mask-size: 18px;
}
.customNavigation i.next:hover::before,.customNavigation i.prev:hover::before  {
  color: #fff;
}
#cpleftbanner1 img,
#cpleftbanner2 img {
  max-width: 100%;
}
#cpleftbanner1 li,
#cpleftbanner2 li {
  overflow: hidden;
  position: relative;
  float: left;
  border-radius: 25px;
}
#cpleftbanner1 li a,
#cpleftbanner2 li a {
  display: inline-block;
  position: relative;
  overflow: hidden;
  vertical-align: top;
}
.footer-container .links.lastest_block .customNavigation i.prev:hover {
  color: #9bbab1 !important;
}
.footer-container .links.lastest_block .customNavigation i.next:hover {
  color: #9bbab1 !important;
}

@media (max-width: 1449px) {
  .tmcategorylist .customNavigation i.prev, 
  .testimonial-block-part .customNavigation i.prev, 
  #tminstagramblock .btn.prev.instagram_prev,
  .special-products .customNavigation i.prev,
  .btn.prev.accessories_prev {
    left: -15px;
  }
  .tmcategorylist .customNavigation i.next, 
  .testimonial-block-part .customNavigation i.next,
   #tminstagramblock .btn.next.instagram_next,
   .special-products .customNavigation i.next,
   .btn.next.accessories_next {
    right: -15px;
  }
  .customNavigation i.next {
    right: 0;
  }
  .customNavigation i.prev {
    left: 0;
  }
}
@media (max-width: 1199px) {
  #tmtestimonialcmsblock .customNavigation {
    top: -36px;
    z-index: 5;
    right: -18px;
  }
}

@media (max-width: 991px) {
  #cpleftbanner1 li img,
  #cpleftbanner2 li a {
    width: auto;
  }
}
@media (max-width: 767px) {
  .customNavigation {
    opacity: 1;
    -khtml-opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
  }
  .tmcategorylist .customNavigation i.prev, 
  .testimonial-block-part .customNavigation i.prev, 
  #tminstagramblock .btn.prev.instagram_prev, 
  .special-products .customNavigation i.prev,
  .btn.prev.accessories_prev {
    left: 0;
  }
  .tmcategorylist .customNavigation i.next, 
  .testimonial-block-part .customNavigation i.next,
   #tminstagramblock .btn.next.instagram_next, 
   .special-products .customNavigation i.next,
   .btn.next.accessories_next {
    right: 0;
  }
  #main .images-container .js-qv-mask .customNavigation {
    top: 30%;
  }
  .quickview .mask.additional_slider .customNavigation i.prev {
    left: -10px !important;
  }
  .quickview .mask.additional_slider .customNavigation i.next {
    right: -10px !important;
  }
  .btn.next.brand_next {
    left: auto;
    right: 0;
    position: absolute;
  }
  .btn.prev.brand_prev {
    left: 0;
    right: auto;
  }
  .customNavigation i.next {
    left: auto;
    right: 0;
  }
}
@media (max-width: 480px) {
}

/* ===== [TEST Barlow Condensed — cały front] START — rollback: usuń całość między START a END ===== */
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/barlowcondensed/BarlowCondensed-300-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/barlowcondensed/BarlowCondensed-300-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/barlowcondensed/BarlowCondensed-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/barlowcondensed/BarlowCondensed-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/barlowcondensed/BarlowCondensed-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/barlowcondensed/BarlowCondensed-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlowcondensed/BarlowCondensed-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/barlowcondensed/BarlowCondensed-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlowcondensed/BarlowCondensed-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/barlowcondensed/BarlowCondensed-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
input, button, select, textarea, .btn {
  font-family: 'Barlow Condensed', sans-serif;
}
/* ===== [TEST Barlow Condensed — cały front] END ===== */

/* ===== [Figma redesign] DESIGN SYSTEM — fundament START — rollback: usuń całość między START a END ===== */
/* Tokeny kolorów z design-systemu Figma (node 124-388). Używane per-komponent. */
:root {
  --bio-yellow: #EABF60;
  --bio-beige: #FCF4E5;
  --bio-black: #000000;
  --bio-white: #FFFFFF;
  --bio-gray: #C4C4C4;
  --bio-gray-dark: #787878;
  --bio-green: #1DB233;
  --bio-orange: #FF7B00;
  --bio-blue: #1E96FC;
  --bio-red: #F9172B;
  --bio-navy: #054A91;
  --bio-accent: var(--bio-yellow);   /* akcent marki (zastępuje fiolet #6333cc per-komponent) */
}

/* Font Kalam (self-host) — akcentowy nagłówek H2 wg design-systemu. Opt-in: klasa .kalam / .h2-kalam. */
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/kalam/Kalam-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/kalam/Kalam-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/kalam/Kalam-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Kalam';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/kalam/Kalam-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.kalam, .h2-kalam { font-family: 'Kalam', cursive; }
/* ===== [Figma redesign] DESIGN SYSTEM — fundament END ===== */

/* ===== [Figma redesign] KARTA PRODUKTU (miniature) START — rollback: usuń między START a END ===== */
/* Badge'y: ZAWSZE widoczne (obecnie ukryte do hover), pigułki, kolory ze statusów */
.products .thumbnail-container .product-flags,
.special-products .products .thumbnail-container .product-flags,
.thumbnail-container .product-flags {
  opacity: 1;
  left: 12px;
  top: 12px;
  transform: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0;
  text-align: left;
}
.product-flags .product-flag {
  position: static !important;
  width: auto;
  margin: 0;
  display: inline-block;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  /* Cel: 20px + padding 8×15 na Full HD — dokładnie spec z Figmy (223:845/847).
     clamp skaluje w dół na węższych ekranach, żeby nie rozpychać kart.
     !important konieczne: motyw ma `.products li.product-flag{font-size:12px;line-height:14px;padding:5px 12px}`
     o wyższej specyficzności (2 klasy + element), które bez tego wygrywa */
  font-size: clamp(16px, 1.05vw, 20px) !important;
  line-height: 1 !important;
  letter-spacing: .2px;
  padding: clamp(6px, .42vw, 8px) clamp(11px, .78vw, 15px) !important;   /* @1920px = 8×15 jak Figma */
  border-radius: 100px !important;
  color: #fff !important;
  background: var(--bio-navy) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
.product-flags .product-flag.new { background: var(--bio-green) !important; }
.product-flags .product-flag.discount,
.product-flags .product-flag.discount-percentage,
.product-flags .product-flag.discount-amount,
.product-flags .product-flag.on-sale { background: var(--bio-red) !important; }
.product-flags .product-flag.pack { background: var(--bio-orange) !important; }
.product-flags .product-flag.online-only { background: var(--bio-navy) !important; }

/* Cena — pomarańczowa, POGRUBIONA 20px (wg 131-4052) */
.product-miniature .product-price-and-shipping .price {
  color: var(--bio-orange) !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700 !important;
  font-size: 20px !important;
  letter-spacing: .2px;
}
.product-miniature .product-price-and-shipping .regular-price {
  color: #C4C4C4 !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700 !important;
  font-size: 20px !important;
  text-decoration: line-through;
}

/* Przycisk „dodaj do koszyka" — akcent żółty + ciemny tekst (TYLKO w karcie) */
.product-miniature .add-to-cart-button .add-to-cart,
.product-miniature .add-to-cart {
  background: var(--bio-yellow);
  border-color: var(--bio-yellow);
  color: var(--bio-black);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-radius: 999px;
}
.product-miniature .add-to-cart-button .add-to-cart:hover,
.product-miniature .add-to-cart:hover {
  background: #d9ad4f;
  border-color: #d9ad4f;
  color: var(--bio-black);
}

/* Marka nad tytułem — drobna, szara, wersaliki */
.product-miniature .product-brand {
  display: block;
  font-size: 12px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--bio-gray-dark);
}
/* ===== [Figma redesign] KARTA PRODUKTU (miniature) END ===== */

/* ===== [Figma redesign] KARTA PRODUKTU — kafelek zdjęcia START ===== */
/* Zaokrąglony, jasny kafelek zdjęcia jak w makietach (New/Featured Products) */
.product-miniature .thumbnail-container .product-thumbnail {
  border-radius: 14px;
  overflow: hidden;
  background: #faf7f0;
  display: block;
}
.product-miniature .thumbnail-container .product-thumbnail img { border-radius: 14px; }
/* ===== [Figma redesign] KARTA PRODUKTU — kafelek zdjęcia END ===== */

/* ===== [Figma redesign] KARTA — akcje na hover (koszyk/serce/podgląd) START ===== */
@media (min-width: 768px) {
  .products .product-miniature .thumbnail-container { position: relative; }
  /* strefa akcji jako nakładka na dole zdjęcia, ukryta do hover */
  /* strefa akcji: PIONOWO w prawym górnym rogu, ukryta do hover */
  .products .product-miniature .product-actions-main {
    position: absolute; right: 12px; top: 12px; left: auto; bottom: auto;
    margin: 0; padding: 0; z-index: 3;
    opacity: 0; transform: translateX(8px);
    transition: opacity .25s ease, transform .25s ease;
    pointer-events: none;
  }
  .products .product-miniature:hover .product-actions-main { opacity: 1; transform: none; pointer-events: auto; }
  .products .product-miniature .product-actions-main .add-to-cart-or-refresh {
    display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0;
  }
  /* podgląd ukryty — projekt ma tylko koszyk + serce */
  .products .product-miniature .product-actions-main .quick-view { display: none !important; }
  /* okrągłe przyciski-ikony 41px */
  .products .product-miniature .product-actions-main .add-to-cart,
  .products .product-miniature .product-actions-main .st-wishlist-button {
    width: 41px; height: 41px; min-width: 0; margin: 0; padding: 8px;
    border-radius: 50%; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.12); line-height: 1;
  }
  /* KOSZYK: pomarańczowe wypełnienie + biała ikona */
  .products .product-miniature .product-actions-main .add-to-cart {
    background: #FF7B00 !important; border: 0 !important; color: #fff !important;
  }
  /* [Figma redesign] hover: background-color (NIE skrócone background) — inaczej znika SVG i zostaje kwadrat */
  .products .product-miniature .product-actions-main .add-to-cart:hover { background-color: transparent !important; }
  .products .product-miniature .product-actions-main .add-to-cart i { color: #fff !important; font-size: 20px; margin: 0; }
  /* SERCE: białe koło, pomarańczowy kontur + pomarańczowa ikona */
  .products .product-miniature .product-actions-main .st-wishlist-button {
    background: #fff !important; border: 2px solid #FF7B00 !important; color: #FF7B00 !important;
  }
  .products .product-miniature .product-actions-main .st-wishlist-button:hover { background-color: #fff !important; }
  .products .product-miniature .product-actions-main .st-wishlist-button i { color: #FF7B00 !important; font-size: 20px; margin: 0; }
  /* ukryj etykietę serca + resetuj wrapper wishlist */
  .products .product-miniature .product-actions-main .wishlist { margin: 0; display: inline-flex; }
  .products .product-miniature .product-actions-main .st-wishlist-title { display: none; }
  /* dolny przycisk koszyka chowamy na desktopie (jest w hoverze) */
  .products .product-miniature .add-to-cart-button { display: none; }
}
/* mobile: karta jak w Figmie (225-140) — okrągły koszyk + serce na zdjęciu (zawsze widoczne), bez dolnego przycisku, bez licznika */
@media (max-width: 767px) {
  .products .product-miniature .thumbnail-container { position: relative; }
  .products .product-miniature .product-actions-main {
    position: absolute !important; right: 10px; top: 10px; left: auto; bottom: auto;
    margin: 0; padding: 0; z-index: 4; opacity: 1 !important; transform: none !important; pointer-events: auto !important;
  }
  .products .product-miniature .product-actions-main .add-to-cart-or-refresh {
    display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; margin: 0 !important;
  }
  .products .product-miniature .product-actions-main .quick-view { display: none !important; }
  /* pokaż koszyk (na mobile był ukryty) */
  .products .product-miniature .product-actions-main .add-to-cart.js-hover-cart { display: inline-flex !important; }
  /* okrągłe przyciski-ikony */
  .products .product-miniature .product-actions-main .add-to-cart,
  .products .product-miniature .product-actions-main .st-wishlist-button {
    width: 38px !important; height: 38px !important; min-width: 0 !important; margin: 0 !important; padding: 7px !important;
    border-radius: 50% !important; box-sizing: border-box !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.12); line-height: 1 !important;
  }
  /* KOSZYK: pomarańczowe koło + biała ikona */
  .products .product-miniature .product-actions-main .add-to-cart {
    background: #FF7B00 !important; border: 0 !important; color: #fff !important;
  }
  .products .product-miniature .product-actions-main .add-to-cart i { color: #fff !important; font-size: 20px !important; margin: 0 !important; }
  /* SERCE: białe koło, pomarańczowy kontur + pomarańczowa ikona */
  .products .product-miniature .product-actions-main .st-wishlist-button {
    background: #fff !important; border: 2px solid #FF7B00 !important; color: #FF7B00 !important;
  }
  .products .product-miniature .product-actions-main .st-wishlist-button i { color: #FF7B00 !important; font-size: 20px !important; margin: 0 !important; }
  .products .product-miniature .product-actions-main .wishlist { margin: 0 !important; display: inline-flex !important; }
  .products .product-miniature .product-actions-main .st-wishlist-title { display: none !important; }
  /* bez dolnego przycisku „Dodaj do koszyka" (zastąpiony ikoną na zdjęciu) */
  .products .product-miniature .add-to-cart-button { display: none !important; }
  /* bez licznika na mobile */
  .product-miniature .countdown { display: none !important; }
}
/* [Figma redesign] serce — glif FontAwesome (.fa-heart) nie renderuje się (pusty), użyj Material Icons (kontur serca) */
.products .product-miniature .product-actions-main .st-wishlist-button i,
.products .product-miniature .product-actions-main .st-wishlist-button i.fa-heart {
  font-family: 'Material Icons' !important; font-weight: normal !important; font-style: normal !important;
}
.products .product-miniature .product-actions-main .st-wishlist-button i.fa-heart::before {
  content: "\e87e" !important;  /* favorite_border — kontur serca (jak w Figmie) */
}
/* gdy dodane do listy życzeń → pełne serce */
.products .product-miniature .product-actions-main .st-wishlist-button.added i.fa-heart::before { content: "\e87d" !important; }



/* [Figma redesign] serce = pomarańczowy kontur jako background-image na przycisku (glif fontowy/maska zawodzą) */
.products .product-miniature .product-actions-main .st-wishlist-button i.fa-heart,
.products .product-miniature .product-actions-main .st-wishlist-button .st-wishlist-bt-content { display: none !important; }
.products .product-miniature .product-actions-main .st-wishlist-button {
  background-color: #fff !important;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2724%27%20height=%2724%27%20viewBox=%270%200%2024%2024%27%20fill=%27none%27%20stroke=%27%23FF7B00%27%20stroke-width=%272%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27%3E%3Cpath%20d=%27M20.84%204.61a5.5%205.5%200%200%200-7.78%200L12%205.67l-1.06-1.06a5.5%205.5%200%200%200-7.78%207.78l1.06%201.06L12%2021.23l7.78-7.78%201.06-1.06a5.5%205.5%200%200%200%200-7.78z%27/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: center !important; background-size: 20px 20px !important;
}

/* ===== [Figma redesign] KARTA — akcje na hover END ===== */

/* ===== [Figma redesign] IKONY BLOKU USŁUG (serviceblock) START ===== */
#cpserviceblock .service-cms-banner-list.service-1 .service_image,
#cpserviceblock .service-cms-banner-list.service-2 .service_image,
#cpserviceblock .service-cms-banner-list.service-3 .service_image,
#cpserviceblock .service-cms-banner-list.service-4 .service_image {
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  width: 46px; height: 46px;
}
#cpserviceblock .service-1 .service_image { -webkit-mask-image: url(../img/figma/svc-delivery.svg); mask-image: url(../img/figma/svc-delivery.svg); }
#cpserviceblock .service-2 .service_image { -webkit-mask-image: url(../img/figma/svc-clients.svg);  mask-image: url(../img/figma/svc-clients.svg); }
#cpserviceblock .service-3 .service_image { -webkit-mask-image: url(../img/figma/svc-support.svg);  mask-image: url(../img/figma/svc-support.svg); }
#cpserviceblock .service-4 .service_image { -webkit-mask-image: url(../img/figma/svc-payment.svg);  mask-image: url(../img/figma/svc-payment.svg); }
/* ===== [Figma redesign] IKONY BLOKU USŁUG END ===== */

/* ===== [Figma redesign] IKONY GÓRNEGO PASKA → Lucide START ===== */
.locator-icon::before, .track-icon::before, .account-icon::before {
  -webkit-mask-size: contain !important; mask-size: contain !important;
  -webkit-mask-position: center !important; mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
  width: 18px !important; height: 18px !important;
}
.locator-icon::before { -webkit-mask-image: url(../img/figma/hdr-locator.svg) !important; mask-image: url(../img/figma/hdr-locator.svg) !important; }
.track-icon::before   { -webkit-mask-image: url(../img/figma/hdr-track.svg) !important;   mask-image: url(../img/figma/hdr-track.svg) !important; width:22px !important; }
.account-icon::before { -webkit-mask-image: url(../img/figma/hdr-account.svg) !important; mask-image: url(../img/figma/hdr-account.svg) !important; }
/* ===== [Figma redesign] IKONY GÓRNEGO PASKA END ===== */

/* ===== [Figma redesign] SERCE (wishlist) → Lucide kontur START ===== */
i.fa-heart, .fa.fa-heart {
  font-size: 0 !important;
  display: inline-block; width: 20px; height: 20px; line-height: 1;
  -webkit-mask: url(../img/figma/icon-heart.svg) center / contain no-repeat;
  mask: url(../img/figma/icon-heart.svg) center / contain no-repeat;
  background-color: currentColor;
  vertical-align: middle;
}
/* ===== [Figma redesign] SERCE (wishlist) → Lucide kontur END ===== */

/* ===== [Figma redesign] GÓRNY PASEK PROMO (124-2604) START — rollback: usuń do END + blok w header.tpl ===== */
.bio-promo-bar {
  width: 100%;
  background: #EABF60;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.bio-promo-inner {
  display: flex;
  align-items: center;
  gap: 100px;
}
.bio-promo-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-decoration: none;
}
.bio-promo-item:hover, .bio-promo-item:focus { color: #fff; text-decoration: none; opacity: .9; }
.bio-promo-link { cursor: pointer; }
.bio-promo-txt {
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 21px;
  letter-spacing: 0.20px;
  white-space: nowrap;
}
.bio-promo-ico {
  display: inline-block;
  width: 24px; height: 24px;
  flex: 0 0 auto;
  background-color: #fff;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.bio-promo-ico.ico-van     { -webkit-mask-image: url(../img/figma/promo-van.svg);     mask-image: url(../img/figma/promo-van.svg); }
.bio-promo-ico.ico-gift    { -webkit-mask-image: url(../img/figma/promo-gift.svg);    mask-image: url(../img/figma/promo-gift.svg); }
.bio-promo-ico.ico-percent { -webkit-mask-image: url(../img/figma/promo-percent.svg); mask-image: url(../img/figma/promo-percent.svg); }
@media (max-width: 1200px) { .bio-promo-inner { gap: 40px; } }
@media (max-width: 767px)  { .bio-promo-bar { display: none !important; } }  /* mobile: ukryty */
/* ===== [Figma redesign] GÓRNY PASEK PROMO END ===== */

/* ===== [Figma redesign] HEADER MOBILNY — czysty rząd: logo | menu | search+koszyk (223-1495) START ===== */
/* przełącznik szukajki (lupka/X) — domyślnie ukryty; pokazywany tylko na mobile */
#search_block_top .bio-search-cb,
#search_block_top .bio-search-trigger,
#search_block_top .bio-search-close { display: none; }

@media (max-width: 767px) {
  /* pasek kontaktowy (telefon/mail/Zaloguj) — w mobilnej Figmie go nie ma */
  #header .header-nav { display: none !important; }
  /* koszyk: bez ceny — tylko ikonka + pomarańczowy badge (jak w Figmie) */
  #header .cart-total-home { display: none !important; }
  /* wishlist ukryty na mobile (w Figmie są tylko szukajka + koszyk) */
  #header .header-right .st-wishlist-button, #header .header-right .wishlist { display: none !important; }
  /* puste desktopowe mega-menu (header-center) — nie zajmuje miejsca */
  #header .header-center { display: none !important; }

  /* NAGŁÓWEK STICKY — przykleja się do góry przy scrollu */
  #header .header-top.header-top-main { position: -webkit-sticky !important; position: sticky !important; top: 0 !important; z-index: 1000 !important; background: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,.06); }

  /* rząd: logo+hamburger po lewej | szukajka+koszyk po prawej */
  #header .header-top .header-div .sub-container {
    position: relative;   /* kotwica dla nakładki szukajki */
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    flex-wrap: nowrap !important; gap: 6px !important;
    padding-left: 14px !important; padding-right: 14px !important; background: #fff;
  }
  #header .header-top-main.bg_main { flex: 0 0 auto; min-width: 0; display: flex; align-items: center; gap: 10px; }
  #header .header-right { flex: 0 0 auto !important; width: auto !important; padding: 0 !important; display: flex !important; align-items: center !important; gap: 14px !important; }

  /* logo mniejsze + ikony */
  #header .header-top .logo img, #header .header_logo img { max-height: 26px !important; width: auto !important; }
  #header .header-top .material-icons { font-size: 22px !important; }
  #header .header-right .blockcart { display: block !important; }
  #header .blockcart-header .cart-products-counthome {
    font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 12px;
  }

  /* SZUKAJKA — stan zwinięty: tylko lupka, formularz schowany */
  #header #search_block_top { position: static; width: auto !important; display: flex !important; align-items: center; }
  #header #search_block_top .bio-search-trigger {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 32px; height: 32px; cursor: pointer; color: #000;
  }
  #header #search_block_top .bio-search-trigger .material-icons { font-size: 24px !important; }
  /* ukryj natywną lupkę theme'a (mamy własny trigger .bio-search-trigger) */
  #header #search_block_top .search_button { display: none !important; }
  /* NAKŁADKA szukajki — zawsze w layoutcie (dla płynnej animacji), domyślnie niewidoczna */
  #header #search_block_top .searchtoggle {
    display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important;
    position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important;
    width: auto !important; height: auto !important;
    background: #fff; z-index: 40; padding: 0 14px !important; margin: 0 !important;
    /* stan zamknięty: przezroczysta, lekko przesunięta W PIONIE (poziom powodował przewijanie strony), nie łapie kliknięć */
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .28s ease, visibility .28s ease, transform .28s ease;
  }
  /* formularz = elastyczny wiersz: [input .......] [lupka] */
  #header #search_block_top .searchtoggle form {
    display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important;
    flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; position: relative !important;
  }
  #header #search_block_top .searchtoggle .cpsearch-main { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; position: relative; }
  #header #search_block_top .searchtoggle #search_query_top {
    width: 100% !important; box-sizing: border-box !important;
    height: 40px !important; padding: 0 16px !important;
    border-radius: 25px !important; background-color: #f0f0f0 !important; border: none !important;
  }
  #header #search_block_top .searchtoggle .select-wrapper,
  #header #search_block_top .searchtoggle #cp_url_ajax_search { display: none !important; }
  /* przycisk submit (lupka) — zwykły element flex obok inputu, NIE absolute/float */
  #header #search_block_top .searchtoggle .btn.btn-primary {
    position: static !important; float: none !important; transform: none !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    flex: 0 0 auto !important; order: 1;
    width: 34px !important; height: 34px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
  }
  #header #search_block_top .searchtoggle .btn.btn-primary .submit-text { display: none !important; }
  #header #search_block_top .searchtoggle .btn.btn-primary::before {
    content: "\E8B6" !important; font-family: "Material Icons" !important; font-size: 24px !important; line-height: 1 !important; color: #333 !important;
  }
  /* X zamknij — na samym końcu rzędu (poza inputem) */
  #header #search_block_top .searchtoggle .bio-search-close {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    order: 2; flex: 0 0 auto; width: 30px; height: 30px; cursor: pointer; color: #000;
  }
  #header #search_block_top .searchtoggle .bio-search-close .material-icons {
    font-family: "Material Icons" !important; font-size: 26px !important; line-height: 1 !important; color: #000 !important;
  }

  /* STAN OTWARTY (checkbox zaznaczony) — płynne pojawienie nakładki */
  #header #search_block_top .bio-search-cb:checked ~ .searchtoggle {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  }
  /* lupka-trigger znika płynnie przy otwieraniu */
  #header #search_block_top .bio-search-trigger { transition: opacity .2s ease; }
  #header #search_block_top .bio-search-cb:checked ~ .bio-search-trigger { visibility: hidden; opacity: 0; }
}
/* ===== [Figma redesign] HEADER MOBILNY END ===== */

/* ===== [Figma redesign 225-138] POLECANE PRODUKTY (featured) — mobile: swipe + autoplay, bez strzałek ===== */
@media (max-width: 767px) {
  #featured-products .customNavigation { display: none !important; }
  /* tytuł mniejszy (był 50px i wychodził olbrzymi na 2 linie) + pełna szerokość, jedna linia, wyśrodkowany */
  #featured-products .products-section-title { width: 100% !important; float: none !important; text-align: center !important; }
  #featured-products .products-section-title h2.title {
    font-size: 30px !important; line-height: 30px !important; letter-spacing: 0.6px !important;
    padding-bottom: 16px !important; margin-bottom: 16px !important;
    display: block !important; width: 100% !important; white-space: nowrap !important;
  }
  /* jedna karta na widok — pełna szerokość, ten sam komponent co na stronie (nie ściśnięte 2 karty) */
  #feature-carousel .product_item,
  #feature-carousel article.item { width: 100% !important; }
  /* MNIEJSZY padding sekcji na mobile (desktopowe 95px zostawiało tylko ~170px na kartę) */
  #featured-products .container { max-width: 100% !important; padding: 0 14px 24px !important; }
}
/* ===== [Figma redesign] NOWOŚCI (cp_newproducts) — mobile: te same zmiany co Polecane ===== */
@media (max-width: 767px) {
  .newproducts .customNavigation { display: none !important; }
  /* tytuł mniejszy, jedna linia, wyśrodkowany */
  .newproducts .products-section-title { width: 100% !important; float: none !important; text-align: center !important; }
  .newproducts .products-section-title h2.title {
    font-size: 30px !important; line-height: 30px !important; letter-spacing: 0.6px !important;
    padding-bottom: 16px !important; margin-bottom: 16px !important;
    display: block !important; width: 100% !important; white-space: nowrap !important;
  }
  /* jedna karta na widok + mniejszy padding sekcji */
  #newproduct-carousel .product_item,
  #newproduct-carousel article.item { width: 100% !important; }
  .newproducts .container { max-width: 100% !important; padding: 0 14px 24px !important; }
}
/* ===== [Figma redesign] KARTA — DUŻE zdjęcie produktu na mobile (źródło home_default 326px) ===== */
@media (max-width: 767px) {
  /* zdjęcie wypełnia kartę, proporcja zachowana (bez zniekształceń object-fit:fill) */
  .products .product-miniature .thumbnail-container,
  .products .product-miniature .thumbnail-container .product-thumbnail {
    width: 100% !important; max-width: none !important; height: auto !important;
  }
  .products .product-miniature .thumbnail-container .product-thumbnail img {
    width: 100% !important; height: auto !important; max-width: 100% !important;
    object-fit: contain !important; display: block !important;
  }
}
/* ===== [Figma redesign 223-3143] KARUZELA MAREK (cp_brandlogo) — mobile: bez strzałek, DUŻE loga ===== */
@media (max-width: 767px) {
  .brands .customNavigation { display: none !important; }
  /* karta bez szarego tła i bez ciężkiego paddingu — czyste loga jak w Figmie */
  .brands .products .product_list article.item,
  .brands .products .product_list article.item .brand-area {
    background: transparent !important; padding: 0 !important; min-height: 0 !important; border-radius: 0 !important;
  }
  .brands #brand-carousel .item,
  .brands #brand-carousel .brand-area { overflow: visible !important; }
  .brands #brand-carousel .item { display: flex; align-items: center; justify-content: center; }
  .brands #brand-carousel .brand-image { align-self: center; width: 100%; text-align: center; }
  /* loga DUŻE — sztywny rozmiar w px (nie %, bo % kurczyło się do rozmiaru rodzica ~70px) */
  .brands #brand-carousel .brand-image img {
    width: 128px !important; max-width: 100% !important; height: auto !important; opacity: 1 !important; margin: 0 auto !important;
  }
}
/* ===== [Figma redesign 223-3143] END ===== */

/* ===== [Figma redesign 223-2957] GŁÓWNY BANER (cp_imageslider) — mobile ===== */
@media (max-width: 767px) {
  /* pionowe zdjęcie mobilne: pełna szerokość, naturalna proporcja (nie rozciągaj) */
  #carousel .carousel-inner,
  #carousel .carousel-item,
  #carousel .carousel-item figure,
  #carousel .carousel-item picture { height: auto !important; }
  #carousel .carousel-item img {
    width: 100% !important; height: auto !important; object-fit: cover; display: block;
  }
  /* układ kolumnowy — kropki POD zdjęciem (w DOM są przed slajdami) */
  #carousel { display: flex !important; flex-direction: column !important; }
  #carousel .carousel-inner { order: 1; margin: 0 !important; padding: 0 !important; }
  #carousel .carousel-indicators { order: 2; }
  #carousel .direction { order: 3; display: none !important; }  /* bez strzałek na mobile (jak w Figmie) */

  /* kropki jak w Figmie: TUŻ pod zdjęciem (~5px), aktywna = pomarańczowa pigułka, reszta = szare kółka */
  #carousel .carousel-indicators {
    position: relative !important; bottom: auto !important; left: auto !important; right: auto !important; top: auto !important;
    width: 100% !important; margin: 8px 0 14px !important; margin-inline-start: 0 !important; padding: 0 !important;
    display: flex !important; justify-content: center !important; align-items: center !important; gap: 5px !important;
  }
  #carousel .carousel-indicators li {
    width: 9px !important; height: 9px !important; border-radius: 64px !important;
    background-color: #D9D9D9 !important; margin: 0 !important; opacity: 1 !important; border: none !important;
    text-indent: 0 !important; transition: width .3s ease, background-color .3s ease;
  }
  #carousel .carousel-indicators li.active {
    width: 39px !important; height: 9px !important; background-color: #FF7B00 !important;
  }
}
/* ===== [Figma redesign 223-2957] END ===== */

/* ===== [Figma redesign] KATEGORIE (cp_categorylist) — mobile: 3 karty + "Zobacz więcej" ===== */
/* przycisk domyślnie ukryty (pokazywany tylko na mobile) */
.cat-more-wrap { display: none; }
@media (max-width: 767px) {
  /* tytuł sekcji 30px jak w Figmie */
  .cpcategorylist .products-section-title h2.title {
    font-size: 30px !important; line-height: 30px !important; letter-spacing: 0.6px !important;
    padding-bottom: 16px !important; margin-bottom: 16px !important;
  }
  /* licznik "Produkty (N)" — 14px */
  .cpcategory-container .categoryblock .block_content .categorylist .cate-heading .cate-pro-count {
    font-size: 14px !important; line-height: 18px !important;
  }
  /* kontener kart: pokazuj 3, resztę chowaj — płynne rozwijanie (JS ustawia max-height precyzyjnie) */
  #cpcategorylist {
    overflow: hidden;                      /* MUSI zostać hidden podczas animacji, inaczej treść wyskakuje od razu */
    max-height: 630px;                     /* ~3 karty (210px każda); JS nadpisuje dokładną wartością per szerokość */
    transition: max-height .5s ease-in-out;
    overflow-anchor: none;                 /* nie kotwicz scrolla przy zmianie wysokości */
  }
  /* przycisk "Zobacz więcej / mniej" */
  .cat-more-wrap { display: block; text-align: center; margin: 6px 0 0; }
  /* czcionka jak linki w stopce: Barlow Condensed 400, 16px, czarny, podkreślony */
  .cat-more-btn {
    background: none; border: none; cursor: pointer; padding: 10px 12px;
    font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 16px;
    line-height: 21px; color: #000; text-decoration: underline;
  }
  .cat-more-btn:hover { color: #FF7B00; }
}
/* ===== [Figma redesign] KATEGORIE mobile END ===== */

/* ===== [Figma redesign] GÓRNY PASEK KONTAKTOWY (124-2603) → biały START ===== */
#header .header-nav { background: #fff !important; padding: 10px 35px !important; }
#header .header-nav .sub-container { justify-content: space-between !important; }
#header .header-nav,
#header .header-nav a,
#header .header-nav span,
#header .header-nav .service,
#header .header-nav .cms_content {
  color: #000 !important;
  text-transform: none !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 21px !important;
  letter-spacing: 0.2px;
}
#header .header-nav .left-nav  { display: flex !important; align-items: center; gap: 30px !important; }
#header .header-nav .right-nav { gap: 30px !important; }
#header .header-nav .service   { display: inline-flex !important; align-items: center; gap: 8px; }
/* separator pionowy (kreski) — subtelny szary zamiast białego */
#header .header-nav .contact-link + .contact-link { border-color: #ddd !important; }
/* ikony na CZARNO + Lucide z tmp_assets */
#header .header-nav .call-service::before,
#header .header-nav .email-service::before,
.locator-icon::before, .track-icon::before, .account-icon::before {
  background-color: #000 !important;
  -webkit-mask-size: contain !important; mask-size: contain !important;
  -webkit-mask-position: center !important; mask-position: center !important;
  -webkit-mask-repeat: no-repeat !important; mask-repeat: no-repeat !important;
  width: 22px !important; height: 22px !important;
}
#header .header-nav .call-service::before  { -webkit-mask-image: url(../img/figma/hdr-phone.svg) !important; mask-image: url(../img/figma/hdr-phone.svg) !important; }
#header .header-nav .email-service::before { -webkit-mask-image: url(../img/figma/hdr-mail.svg) !important;  mask-image: url(../img/figma/hdr-mail.svg) !important; }
/* ===== [Figma redesign] GÓRNY PASEK KONTAKTOWY END ===== */

/* ===== [Figma redesign] MENU GŁÓWNE (124-480) START ===== */
/* burger ukryty na desktopie */
@media (min-width: 992px) { .menu-icon { display: none !important; } }
/* pozycje menu: Barlow Condensed 400, 20px, czarne, WERSALIKI */
#top-menu > li > a,
#top-menu > li.bio-menu-extra > a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 400 !important;
  font-size: 20px !important;
  letter-spacing: 0.2px;
  color: #000 !important;
  text-transform: uppercase;
}
/* % PROMOCJE — pomarańczowa pigułka */
#top-menu > li > a[href*="100-promocje"] {
  background: #FF7B00 !important;
  color: #fff !important;
  border-radius: 100px !important;
  padding: 5px 12px !important;
  line-height: 21px;
}
#top-menu > li > a[href*="100-promocje"]::before { content: "% "; }
/* separator | przed STREFA WIEDZY — krótka kreska (~1.2× czcionki), wyśrodkowana pionowo (Figma) */
#top-menu > li.bio-menu-sep { position: relative; border-left: 0 !important; padding-left: 22px; margin-left: 22px; }
#top-menu > li.bio-menu-sep::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 1px; height: 30px; background: #C4C4C4;
}
/* ===== [Figma redesign] MENU GŁÓWNE END ===== */

/* ===== [Figma redesign] MEGA MENU — hover top-level + pogrubione nagłówki kolumn (223-1271) START ===== */
/* płynne przejście koloru na pozycjach top-level */
#top-menu > li > a[data-depth="0"] { transition: color .2s ease, text-shadow .2s ease !important; }
/* po najechaniu (mega menu otwarte) → pomarańczowy + pogrubiony (faux-bold = bez skakania menu) */
#top-menu > li:hover > a[data-depth="0"]:not([href*="100-promocje"]),
#top-menu > li.sfHover > a[data-depth="0"]:not([href*="100-promocje"]) {
  color: #FF7B00 !important; text-shadow: .4px 0 0 currentColor;
}
/* nagłówki kolumn (pierwszy wiersz mega menu, data-depth=1) — pogrubione WERSALIKI (jak w Figmie) */
#top-menu a[data-depth="1"] {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .3px;
}
/* ===== [Figma redesign] MEGA MENU END ===== */

/* ===== [Figma redesign] KOSZYK Z CENĄ (124-480) START ===== */
.blockcart-header .cart-total-home {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 21px;
  color: #000;
  margin-left: 10px;
  vertical-align: middle;
  white-space: nowrap;
}
/* ===== [Figma redesign] KOSZYK Z CENĄ END ===== */

/* ===== [Figma redesign] wyrównanie pigułki PROMOCJE do linii menu ===== */
#top-menu > li:has(> a[href*="100-promocje"]),
#top-menu > li > a[href*="100-promocje"] {
  vertical-align: middle !important;
  align-self: center !important;
}
#top-menu > li > a[href*="100-promocje"] {
  display: inline-flex !important;
  align-items: center;
  line-height: 21px !important;
}

/* ===== [Figma redesign] PROMOCJE pigułka — offset pionowy (menu ma padding 43px) ===== */
#top-menu > li:has(> a[href*="100-promocje"]) { vertical-align: top !important; align-self: flex-start !important; }
#top-menu > li > a[href*="100-promocje"] {
  vertical-align: top !important;
  align-self: flex-start !important;
  position: relative !important;
  top: 33px !important;
}

/* ===== [Figma redesign] PROMOCJE — wyrównanie przez flex (bez magic-number) ===== */
@media (min-width: 992px) {
  #top-menu { display: flex !important; align-items: center !important; flex-wrap: wrap; }
  #top-menu > li { align-self: center !important; }
}
/* zresetuj wcześniejszą protezę top:33px / flex-start */
#top-menu > li:has(> a[href*="100-promocje"]) { align-self: center !important; vertical-align: middle !important; }
#top-menu > li > a[href*="100-promocje"] {
  position: static !important;
  top: auto !important;
  align-self: center !important;
  vertical-align: middle !important;
}

/* ===== [Figma redesign] MENU — bez zawijania (fix STREFA B2B) ===== */
@media (min-width: 992px) {
  #top-menu { flex-wrap: nowrap !important; }
  #top-menu > li { flex: 0 0 auto !important; }
  #_top_main_menu, #top-menu { overflow: visible !important; }
  #top-menu > li > a[data-depth="0"] { white-space: nowrap !important; }
}

/* ===== [Figma redesign] SEKCJA MAREK (131-3877) START ===== */
/* logotypy ZAWSZE pełne (usuń hover-fade / grayscale) */
.brands img,
.brands .products .product_list article img,
.brands .brand-image img,
.brands .brand-area img { opacity: 1 !important; filter: none !important; }
/* usuń szare pudełka #f0f0f0 */
.brands .products .product_list article.item .brand-area,
.brands .products .product_list article.product_item .brand-area {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 10px !important;
  box-shadow: none !important;
  min-height: auto !important;
}
/* odstępy sekcji wg projektu (50px góra/dół) */
section.brands .container { padding-top: 50px; padding-bottom: 50px; }
/* strzałki slidera: pomarańczowe kółka + biały grot */
.brands .customNavigation i.prev, .brands .customNavigation i.next,
.brands .btn.prev.brand_prev, .brands .btn.next.brand_next,
.btn.prev.brand_prev, .btn.next.brand_next {
  background: #FF7B00 !important;
}
.brands .customNavigation i.prev::before, .brands .customNavigation i.next::before,
.btn.prev.brand_prev::before, .btn.next.brand_next::before {
  background-color: #fff !important;
}
/* ===== [Figma redesign] SEKCJA MAREK END ===== */

/* ===== [Figma redesign] MAREK — strzałki zawsze widoczne + rozmiar logo ===== */
.brands .customNavigation { opacity: 1 !important; }
.brands .brand-image img,
.brands .brand-area img,
.brands .products .product_list article img {
  max-width: 170px !important;
  width: 100% !important;
  height: auto !important;
}
.brands .brand-image { width: 100%; }
/* ===== END ===== */

/* ===== [Figma redesign] MAREK — pełna szerokość, bez tytułu, pod banerem START ===== */
/* tuż pod banerem + prawie pełna szerokość */
section.brands { padding-top: 0 !important; margin-top: 0 !important; }
section.brands .container {
  max-width: 1840px !important;
  width: 100% !important;
  padding: 10px 35px 40px !important;
}
/* usuń nagłówek "Kupuj z popularnych marek" + pomarańczową falkę */
section.brands .products-section-title { display: none !important; }
/* DUŻO większe logotypy */
.brands .brand-image img,
.brands .brand-area img,
.brands .products .product_list article img {
  max-width: 100% !important;
  width: auto !important;
  max-height: 130px !important;
  height: auto !important;
}
.brands .brand-area { padding: 5px !important; }
/* ===== [Figma redesign] MAREK — pełna szerokość END ===== */

/* ===== [Figma redesign] GLOBAL: falka → złota belka + tytuły sekcji START ===== */
.products-section-title .title { position: relative; }
.products-section-title .title::after {
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background-color: #EABF60 !important;
  width: 82px !important;
  height: 6px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  border-radius: 0 !important;
}
.products-section-title h2.title {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 50px !important;
  line-height: 50px !important;
  letter-spacing: 1px !important;
  padding-bottom: 18px;
}
/* ===== [Figma redesign] GLOBAL: falka → złota belka END ===== */

/* ===== [Figma redesign] KATEGORIE (cp_categorylist / 157-5529) START ===== */
/* karta: beżowe tło zamiast szarego */
.cpcategory-container .categoryblock .block_content {
  background: #FCF4E5 !important;
  min-height: 159px !important;
}
/* tytuł kategorii: Barlow Condensed 700 20px czarny */
.cpcategory-container .categoryblock .block_content .categorylist .cate-heading,
.cpcategory-container .categoryblock .block_content .categorylist .cate-heading > a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  line-height: 21px !important;
  letter-spacing: 0.2px !important;
  color: #000 !important;
}
/* licznik "Produkty (N)": 16px 400 czarny */
.cpcategory-container .categoryblock .block_content .categorylist .cate-heading .cate-pro-count {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  color: #000 !important;
  margin-top: 8px !important;
}
/* ===== [Figma redesign] KATEGORIE END ===== */

/* ===== [Figma redesign] KATEGORIE — wymuszony border-radius karty ===== */
.cpcategory-container .categoryblock .block_content {
  border-radius: 25px !important;
  overflow: hidden;
}

/* ===== [Figma redesign] KARTA PRODUKTU — poprawki (131-4074) START ===== */
/* biały kafelek zdjęcia (zamiast beżowego) */
.product-miniature .thumbnail-container .product-thumbnail { background: #fff !important; }
/* nazwa produktu: NIE pogrubiona (400) */
.product-miniature .product-title a { font-weight: 400 !important; }
/* podkategoria (szara) nad nazwą */
.product-miniature .product-brand {
  display: block;
  color: #787878 !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 400 !important;
  font-size: 20px !important;
  line-height: 21px;
  letter-spacing: .2px;
  text-transform: none !important;
}
/* gwiazdki: 5 szarych (fallback, moduł opinii wyłączony) */
.product-miniature .product-star-rating { display: flex; gap: 2px; margin: 4px 0; }
.product-miniature .product-star-rating i { color: #C4C4C4; font-size: 18px; line-height: 1; }
.product-miniature .comments_note ~ .product-star-rating.js-star-fallback,
.product-miniature .star_content ~ .product-star-rating.js-star-fallback { display: none; }
/* ===== [Figma redesign] KARTA PRODUKTU — poprawki END ===== */

/* ===== [Figma redesign] FEATURED — strzałki jak w sekcji marek + szerokość START ===== */
/* ta sama szerokość co sekcja marek → strzałki na tej samej krawędzi */
@media (min-width: 768px) {
#featured-products .container {
  max-width: 1840px !important;
  width: 100% !important;
  padding-left: 35px !important;
  padding-right: 35px !important;
}
}
/* strzałki: pomarańczowe koła + biały grot, na krawędziach (jak brand_prev/next) */
#featured-products .customNavigation i.prev,
#featured-products .customNavigation i.next,
.btn.prev.feature_prev, .btn.next.feature_next {
  background: #FF7B00 !important;
}
#featured-products .customNavigation i.prev::before,
#featured-products .customNavigation i.next::before,
.btn.prev.feature_prev::before, .btn.next.feature_next::before {
  background-color: #fff !important;
}
.btn.prev.feature_prev { left: -10px !important; }
.btn.next.feature_next { right: -10px !important; }
#featured-products .customNavigation { opacity: 1 !important; }
/* wyraźniejszy border-radius kafla zdjęcia */
.product-miniature .thumbnail-container .product-thumbnail,
.product-miniature .thumbnail-container .product-thumbnail img { border-radius: 16px !important; }
/* ===== [Figma redesign] FEATURED — strzałki END ===== */

/* ===== [Figma redesign] FEATURED — fix: strzałki nie nachodzą + radius ramek START ===== */
/* więcej paddingu → produkty odsunięte od strzałek (TYLKO desktop — na mobile 95px zjadało kartę) */
@media (min-width: 768px) {
#featured-products .container { max-width: 1840px !important; padding: 10px 95px 40px !important; }
#featured-products .btn.prev.feature_prev { left: -25px !important; }
#featured-products .btn.next.feature_next { right: -25px !important; }
}
/* zaokrąglona RAMKA zdjęcia (kontener + thumbnail + img) */
.product-miniature .thumbnail-container { border-radius: 16px !important; overflow: hidden !important; }
.product-miniature .thumbnail-container .product-thumbnail,
.product-miniature .thumbnail-container .product-thumbnail img { border-radius: 16px !important; }
/* ===== [Figma redesign] FEATURED — fix END ===== */

/* ===== [Figma redesign] KARTA — ikony przycisków (SVG z tmp_assets) START ===== */
@media (min-width: 768px) {
  .products .product-miniature .product-actions-main .add-to-cart,
  .products .product-miniature .product-actions-main .st-wishlist-button {
    width: 41px !important; height: 40px !important; padding: 0 !important;
    background-color: transparent !important;
    background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important;
    border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
  }
  .products .product-miniature .product-actions-main .add-to-cart {
    background-image: url(../img/figma/btn-cart.svg) !important;
  }
  .products .product-miniature .product-actions-main .st-wishlist-button {
    background-image: url(../img/figma/btn-wishlist.svg) !important;
  }
  .products .product-miniature .product-actions-main .add-to-cart i,
  .products .product-miniature .product-actions-main .st-wishlist-button i { display: none !important; }
  .products .product-miniature .product-actions-main .add-to-cart:hover,
  .products .product-miniature .product-actions-main .st-wishlist-button:hover { opacity: .88; }
}
/* ===== [Figma redesign] KARTA — ikony przycisków END ===== */

/* ===== [Figma redesign] KARTA — wishlist białe koło + strzałki featured dalej START ===== */
@media (min-width: 768px) {
  /* wishlist: białe koło pod SVG (SVG ma przezroczyste wnętrze → prześwitywało czarne zdjęcie) */
  .products .product-miniature .product-actions-main .st-wishlist-button {
    background-color: #fff !important;
    border-radius: 50% !important;
  }
  /* strzałki featured: dalej od produktów, w linii ze strzałkami marek (25px od krawędzi) */
  #featured-products .btn.prev.feature_prev { left: -70px !important; }
  #featured-products .btn.next.feature_next { right: -70px !important; }
}
/* ===== [Figma redesign] KARTA — wishlist białe koło + strzałki featured END ===== */

/* ===== [Figma redesign] NOWOŚCI — identycznie jak "Polecane produkty" (odstępy + strzałki) START ===== */
@media (min-width: 768px) {
.newproducts .container { max-width: 1840px !important; width: 100% !important; padding: 10px 95px 40px !important; }
}
.newproducts .customNavigation i.prev, .newproducts .customNavigation i.next,
.newproducts .btn.prev.newproduct_prev, .newproducts .btn.next.newproduct_next { background: #FF7B00 !important; }
.newproducts .customNavigation i.prev::before, .newproducts .customNavigation i.next::before,
.newproducts .btn.prev.newproduct_prev::before, .newproducts .btn.next.newproduct_next::before { background-color: #fff !important; }
.newproducts .btn.prev.newproduct_prev { left: -70px !important; }
.newproducts .btn.next.newproduct_next { right: -70px !important; }
.newproducts .customNavigation { opacity: 1 !important; }
/* ===== [Figma redesign] NOWOŚCI END ===== */

/* ===== [Figma redesign] WISHLIST — jeden spójny przycisk (fix czarnego serca) START =====
   Motyw (theme.css) maskuje .products .product_list .wishlist span na 17px CZARNE serce
   (background-color:#000) i nakłada je na nasze pomarańczowe koło. Tu to neutralizujemy:
   pokazujemy WYŁĄCZNIE pomarańczowe koło z btn-wishlist.svg, chowamy motywową maskę.
   Selektor oparty na .wishlist (a nie .product-miniature .product-actions-main) => działa
   też w karuzelach cp_featuredproducts / list. */
.wishlist .st-wishlist-button {
  width: 41px !important; height: 41px !important; min-width: 0 !important;
  margin: 0 !important; padding: 0 !important;
  border-radius: 50% !important; box-sizing: border-box !important; overflow: hidden;
  display: inline-flex !important; align-items: center; justify-content: center;
  background: #fff url(../img/figma/btn-wishlist.svg) center / contain no-repeat !important;
  border: 0 !important; box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; filter: none !important;
}
.wishlist .st-wishlist-button:hover { background-color: #FFF3E8 !important; }
/* zabij motywowe czarne serce (maska na span) oraz ikonę FA w środku */
.wishlist .st-wishlist-button .st-wishlist-bt-content,
.products .product_list .wishlist span,
.wishlist .st-wishlist-button i,
.wishlist .st-wishlist-button .fa {
  display: none !important;
  -webkit-mask: none !important; mask: none !important;
  background: none !important; background-color: transparent !important;
}
/* ===== [Figma redesign] WISHLIST — fix czarnego serca END ===== */

/* ===== [Figma redesign] ukryj sekcję "Kupuj według kategorii" (cp_categoryproductsslider) — odwracalne: usuń tę regułę ===== */
#cpcategorytabs { display: none !important; }

/* ===== [Figma redesign] HEADER — typografia wg Figmy (Desktop/Title 2: Barlow Condensed 20/400/ls .2px, czarny) START ===== */
/* pasek kontaktowy: telefon, mail, Sklepy, Śledź swoje zamówienie, Zaloguj się */
#header .header-nav .contact-link .service,
#header .header-nav .right-nav .top-link span {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 20px !important; font-weight: 400 !important; letter-spacing: .2px !important; color: #000 !important;
}
/* menu główne (PIES, KOT, ... STREFA WIEDZY, STREFA B2B) — TYLKO top-level (id + direct child),
   NIE .top-menu (bo submenu też ma klasę top-menu i psuło pogrubienie nagłówków) */
#header #top-menu > li > a {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 20px !important; font-weight: 400 !important; letter-spacing: .2px !important;
}
/* (separator "|" telefon/mail usunięty na życzenie) */
/* pozioma kreska oddzielająca pasek kontaktowy od mega-menu (Figma) — trochę niżej */
#header .header-nav .sub-container { border-bottom: 1px solid #E6E6E6; padding-bottom: 14px; }
/* ===== [Figma redesign] HEADER typografia END ===== */

/* ===== [Figma redesign] STOPKA (163-6984) — tło, newsletter, logo START ===== */
/* tło koloru jako fallback — NIE skrócone 'background', żeby nie kasować parallax FOOTER_IMAGE */
.footer-container { background-color: #FAEED8 !important; }
/* pasek newslettera: nagłówek po lewej, formularz po prawej */
.footer-before { padding: 44px 0 28px; }
.footer-before .block_newsletter {
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.footer-before .block_newsletter .title { margin: 0; }
/* ukryj ikonkę maila przed nagłówkiem newslettera */
.footer-before .block_newsletter .title .block_title::before { display: none !important; content: none !important; }
.footer-before .block_newsletter .title .block_title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 50px;
  line-height: 50px; letter-spacing: 1px; color: #000; text-transform: none;
}
.footer-before .block_newsletter .block_content { flex: 0 0 auto; }
.footer-before .block_newsletter .col-xs-12 { padding: 0; }
.footer-before .block_newsletter .input-wrapper { position: relative; display: block; width: 500px; max-width: 100%; }
.footer-before .block_newsletter input[type="email"] {
  border: 0 !important; border-radius: 100px; background: #fff; color: #000;
  width: 100%; height: 50px; box-sizing: border-box;
  padding: 0 165px 0 22px;   /* zapas z prawej pod przycisk leżący NA polu */
  font-family: 'Barlow Condensed', sans-serif; font-size: 16px;
}
.footer-before .block_newsletter input[name="submitNewsletter"] {
  /* przycisk LEŻY NA POLU: przyklejony do prawej krawędzi i tej samej wysokości co pole (50px),
     dzięki czemu nie widać białego paska nad/pod nim (Figma 223:1146 = 151×50, flush do prawej) */
  position: absolute !important; right: 0 !important; top: 0 !important;
  width: auto !important; height: 50px !important;
  background: #FF7B00 !important; color: #fff !important; border: 0 !important;
  border-radius: 100px !important; padding: 0 30px !important;
  font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important;
  font-size: 20px !important; line-height: 50px !important; letter-spacing: .2px !important;
}
/* logo w stopce */
.footer-middle .footer-logo { padding: 34px 0 22px; }
.footer-middle .footer-logo img { max-height: 46px; width: auto; }

/* --- czcionki Barlow Condensed w całej stopce --- */
.footer-container, .footer-container * { font-family: 'Barlow Condensed', sans-serif !important; }
.footer-container { color: #000; }
/* NIE nadpisuj czcionki ikon (inaczej material-icons robią się kwadracikami) */
.footer-container .material-icons, .footer-container i.material-icons { font-family: 'Material Icons' !important; }

/* kreska pod newsletterem i nad copyrightem (Figma) */
/* (kreska pod newsletterem usunięta na życzenie) */
.footer-after .container { border-top: 1px solid rgba(0,0,0,.14); padding-top: 18px; }

/* tytuły kolumn: 20px / 700, bez uppercase */
.footer-container .block-contact-title,
.footer-container .footer-block .h3,
.footer-container .links .h3,
.footer-container .block-social .h3,
.footer-container .links .title .h3 {
  font-size: 20px !important; font-weight: 700 !important; letter-spacing: .2px !important;
  color: #000 !important; text-transform: none !important; margin: 0 0 16px !important;
}
/* linki: 16px / 400 / podkreślone / czarne */
.footer-container .footer-block a,
.footer-container .links a,
.footer-container .contactdiv a,
.footer-container .block-contact a {
  font-size: 16px !important; font-weight: 400 !important; color: #000 !important;
  text-decoration: underline !important; line-height: 21px !important;
}
.footer-container .footer-block li { margin-bottom: 6px; }
.footer-container .footer-block a:hover,
.footer-container .contactdiv a:hover { color: #FF7B00 !important; }
/* adres/kontakt: tekst nie podkreślony, linki tak */
.footer-container .contactdiv,
.footer-container .contactdiv span { font-size: 16px !important; color: #000 !important; line-height: 21px; }

/* ikony social => białe kółka z ciemną ikoną (Figma) */
.footer-container .block-social ul { display: flex; gap: 10px; padding: 0; margin: 6px 0 0; }
.footer-container .block-social ul li { list-style: none; margin: 0; }
.footer-container .block-social ul li a {
  width: 34px !important; height: 34px !important; border-radius: 50% !important;
  background-color: #fff !important; display: inline-flex !important; align-items: center; justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* --- układ 4 kolumn: [kontakt] [Moje konto] [Moje zamówienie] [Regulaminy] --- */
.footer-middle .footer { display: flex; align-items: flex-start; gap: 30px; flex-wrap: wrap; }
.footer-middle .footer .footer-left { flex: 1 1 24%; max-width: 26%; float: none; width: auto; padding: 0; }
.footer-middle .footer .footer-right { flex: 1 1 70%; float: none; width: auto; padding: 0; }
.footer-middle .footer-left::after, .footer-container .footer-left::after { display: none !important; } /* usuń pionową kreskę motywu */
/* ukryj tylko stare bloki ps_linklist (Produkty/Nasza firma) — NIE ruszaj .left-block/.right-block,
   bo to treść popupu kuponowego (cpcouponpop), nie kolumna stopki */
.footer-right .links.block { display: none !important; }
/* nowe kolumny linków */
.bio-footer-cols { display: flex; gap: 30px; align-items: flex-start; }
.bio-footer-col { flex: 1 1 0; }
.bio-footer-title {
  font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important;
  font-size: 20px !important; letter-spacing: .2px; color: #000 !important; margin: 0 0 16px !important;
}
.bio-footer-links { list-style: none; margin: 0; padding: 0; }
.bio-footer-links li { margin-bottom: 6px; }
.bio-footer-links a {
  font-family: 'Barlow Condensed', sans-serif !important; font-weight: 400 !important;
  font-size: 16px !important; line-height: 21px !important; color: #000 !important; text-decoration: underline !important;
}
.bio-footer-links a:hover { color: #FF7B00 !important; }

/* --- ikony telefon/mail w kolumnie kontakt (SVG z tmp_assets) --- */
/* ukryj nagłówek "Kontakt Z Nami" (Kontakt jest już w kolumnie "Moje zamówienie") */
.footer-container .block-contact .block-contact-title,
.footer-container .block-contact .title.clearfix { display: none !important; }
.footer-container .block-contact li { display: flex; align-items: center; gap: 8px; list-style: none; margin-bottom: 6px; }
.footer-container .block-contact .ftr-ico { width: 18px; height: 18px; flex: 0 0 18px; }
.footer-container .block-contact .contactdiv { display: block; }

@media (max-width: 991px) {
  .footer-middle .footer .footer-left { max-width: 100%; flex-basis: 100%; }
  .bio-footer-cols { flex-wrap: wrap; }
  .bio-footer-col { flex-basis: 45%; }
}

/* ===== [Figma redesign 225-2476] STOPKA — MOBILE ===== */
@media (max-width: 767px) {
  /* NEWSLETTER: mniejszy tytuł, wyśrodkowany, przycisk "Subskrybuj" widoczny */
  .footer-before { padding: 32px 20px 20px !important; }
  .footer-before .block_newsletter {
    flex-direction: column !important; align-items: center !important; gap: 18px !important; text-align: center !important;
  }
  .footer-before .block_newsletter .title .block_title {
    font-size: 22px !important; line-height: 26px !important; letter-spacing: .2px !important;
  }
  /* wszystkie poziomy formularza = 100% szerokości, box-sizing (żeby przycisk się nie ucinał) */
  .footer-before .block_newsletter,
  .footer-before .block_newsletter .block_content,
  .footer-before .block_newsletter form,
  .footer-before .block_newsletter .col-xs-12,
  .footer-before .block_newsletter .input-wrapper {
    width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important;
  }
  /* przycisk LEŻY NA POLU również na mobile (Figma 225:1007 = 110×50, flush do prawej krawędzi pola) */
  .footer-before .block_newsletter .input-wrapper { display: block !important; position: relative !important; padding: 0 !important; }
  .footer-before .block_newsletter input[type="email"] {
    min-width: 0 !important; width: 100% !important; height: 50px !important; box-sizing: border-box !important;
    padding: 0 122px 0 18px !important;   /* zapas pod przycisk (~110px) */
  }
  .footer-before .block_newsletter input[name="submitNewsletter"] {
    position: absolute !important; right: 0 !important; top: 0 !important;
    height: 50px !important; width: auto !important; padding: 0 20px !important;
    font-size: 16px !important; line-height: 50px !important; white-space: nowrap !important;
  }

  /* KOLUMNY = AKORDEON: stack na całą szerokość, chevron, zwinięte domyślnie */
  .footer-container .bio-footer-cols { display: block !important; }
  .footer-container .bio-footer-col {
    flex-basis: auto !important; width: 100% !important; margin: 0 !important;
    border-bottom: 1px solid rgba(0,0,0,.14);
  }
  .footer-container .bio-footer-col .bio-footer-title {
    display: flex !important; justify-content: space-between !important; align-items: center !important;
    cursor: pointer; margin: 0 !important; padding: 15px 2px !important; font-size: 18px !important;
  }
  .footer-container .bio-footer-col .bio-footer-title::after {
    content: "\e313"; font-family: 'Material Icons' !important; font-weight: normal !important;
    font-size: 24px; color: #000; transition: transform .3s ease;
  }
  .footer-container .bio-footer-col.open .bio-footer-title::after { transform: rotate(180deg); }
  .footer-container .bio-footer-col .bio-footer-links {
    max-height: 0 !important; overflow: hidden; transition: max-height .35s ease; padding: 0 2px !important;
  }
  .footer-container .bio-footer-col.open .bio-footer-links { max-height: 620px !important; padding-bottom: 14px !important; }

  /* stack logo/kontakt/kolumny w pionie */
  .footer-middle .footer { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; }
  .footer-middle .footer-logo { padding: 22px 0 12px !important; text-align: left; }
  .footer-middle > .container { padding-left: 20px !important; padding-right: 20px !important; }

  /* KONTAKT: pokaż adres/telefon/mail (rozwinięte), ukryj przełącznik "Informacja o sklepie" */
  .footer-container .block-contact .title.clearfix,
  .footer-container .block-contact .block-contact-title { display: none !important; }
  .footer-container .block-contact ul#block-contact_list,
  .footer-container .block-contact #block-contact_list.collapse {
    display: block !important; height: auto !important; visibility: visible !important; padding: 0 !important; margin: 0 !important;
  }
  .footer-container .block-contact { padding: 4px 0 6px !important; text-align: left; float: none !important; width: 100% !important; }
  .footer-container .block-contact li { justify-content: flex-start; }

  /* SOCIAL: bez nagłówka "obserwuj nas"; ikony w rzędzie (okrągłe). Uwaga: lista pusta = brak URL-i w module */
  .footer-container .block-social .h3,
  .footer-container .block-social h3,
  .footer-container .block-social .block_title,
  .footer-container .block-social [data-toggle="collapse"] { display: none !important; }
  .footer-container .block-social .block_content.collapse,
  .footer-container .block-social ul {
    display: flex !important; height: auto !important; flex-wrap: wrap; gap: 10px; padding: 0 !important; margin: 10px 0 0 !important;
  }
  /* jeśli social nie ma ikon (pusty) — nie zostawiaj pustego odstępu */
  .footer-container .block-social:empty, .footer-container .block-social .block:empty { display: none; }
}
/* ===== [Figma redesign] STOPKA END ===== */

/* ===== [Figma redesign] cpcmsbanner3 → baner "producent" (158-5534) + pill button (159-5542) START ===== */
#cpcmsbanner3 { background-color: #FCF4E5 !important; }
/* blok tekstu po lewej, ~46% szerokości */
#cpcmsbanner3 .cms-block {
  width: 46%; max-width: 640px; margin-right: auto; text-align: left;
}
/* nagłówek — Barlow Condensed, ciemny, pogrubiony */
#cpcmsbanner3 .cms-block .offer-text2 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-size: 44px !important; line-height: 1.05 !important; font-weight: 700 !important;
  color: #1a1a1a !important; margin: 0 0 18px !important; text-transform: none !important;
}
/* opis — szary, mniejszy */
#cpcmsbanner3 .cms-block .offer-desc {
  color: #4a4a4a; font-size: 15px; line-height: 1.55; max-width: 540px; margin: 0 0 28px;
  font-weight: 400;
}
/* przycisk — pomarańczowa pigułka (Figma 159-5542) */
#cpcmsbanner3 .cms-block .offer-button a {
  display: inline-flex !important; align-items: center; justify-content: center;
  background: #FF7B00 !important; color: #fff !important;
  border-radius: 100px !important; padding: 10px 24px !important;
  font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important;
  font-size: 20px !important; line-height: 21px !important; letter-spacing: .2px !important;
  border: 0 !important; text-decoration: none !important; box-shadow: none !important;
}
#cpcmsbanner3 .cms-block .offer-button a:hover { background: #e56f00 !important; }

/* ===== [Figma redesign 225-723] cpcmsbanner3 — MOBILE ===== */
@media (max-width: 767px) {
  /* przesuń tło w prawo (pokaż czystą lewą część obrazka) — karma/pies znika za prawą krawędź */
  #cpcmsbanner3 { background-position: 0% top !important; }
  /* tekst na CAŁĄ szerokość (nie 46%), na tle zdjęcia; padding jak w Figmie (28px boki / 32px góra) */
  #cpcmsbanner3 .sub-container,
  #cpcmsbanner3 #cpcmsbanner3_block1,
  #cpcmsbanner3 .left-side,
  #cpcmsbanner3 .main-content {
    width: 100% !important; max-width: none !important; flex: none !important; float: none !important;
  }
  #cpcmsbanner3 .cms-block {
    width: 100% !important; max-width: none !important; margin: 0 !important;
    padding: 32px 28px !important; box-sizing: border-box !important;
  }
  /* nagłówek 30px */
  #cpcmsbanner3 .cms-block .offer-text2 {
    font-size: 30px !important; line-height: 30px !important; letter-spacing: 0.6px !important;
    color: #000 !important; margin: 0 0 16px !important;
  }
  /* opis 14px, czarny, pełna szerokość */
  #cpcmsbanner3 .cms-block .offer-desc {
    font-size: 14px !important; line-height: 18px !important; color: #000 !important;
    max-width: none !important; margin: 0 0 40px !important;
  }
  /* pigułka bez zmian (20px/700) — tylko domknięcie odstępów */
  #cpcmsbanner3 .cms-block .offer-button { margin: 0 !important; }
  #cpcmsbanner3 .cms-block .offer-button a {
    font-size: 20px !important; line-height: 21px !important; padding: 10px 20px !important;
  }
}
/* ===== [Figma redesign] cpcmsbanner3 END ===== */

/* ===== [Figma redesign] cpcmsbanner6 → "Wartości Biofeed" (160-6799) START ===== */
#cpcmsbanner6 { margin: 40px 0 !important; }
#cpcmsbanner6 .bio-values {
  display: flex; gap: 24px; justify-content: center; align-items: stretch;
  flex-wrap: wrap; margin-top: 30px;
}
#cpcmsbanner6 .bio-value-card {
  flex: 1 1 0; max-width: 305px; min-width: 240px;
  background: #FCF4E5; border-radius: 25px; padding: 36px 26px;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px;
}
#cpcmsbanner6 .bio-value-icon {
  width: 105px; height: 105px; border-radius: 50%; background: #fff;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
#cpcmsbanner6 .bio-value-icon img { width: auto; height: 52px; max-width: 64px; display: block; }
#cpcmsbanner6 .bio-value-title {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px;
  line-height: 21px; letter-spacing: .2px; color: #000; margin: 0;
}
#cpcmsbanner6 .bio-value-desc {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 400; font-size: 16px;
  line-height: 21px; color: #000; margin: 0;
}
@media (max-width: 991px) { #cpcmsbanner6 .bio-value-card { flex-basis: 45%; } }
@media (max-width: 575px) { #cpcmsbanner6 .bio-value-card { flex-basis: 100%; max-width: 100%; } }
/* ===== [Figma redesign] cpcmsbanner6 END ===== */

/* ===== [Figma redesign] cp_cmsbanner5 → złoty pasek zaufania (159-5654) START ===== */
#cpcmsbanner5 { background: #EABF60 !important; margin: 40px 0 !important; padding: 12px 0 !important; float: left; width: 100%; overflow: hidden; }
/* [Figma redesign] marquee ma jechać przez CAŁĄ szerokość okna — bez ograniczenia do 1680px */
#cpcmsbanner5 .sub-container { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
#cpcmsbanner5 #cpcmsbanner5_block1.bio-trustbar {
  display: flex !important; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 18px 55px !important; float: none !important; background: transparent !important; text-align: center;
}
#cpcmsbanner5 .bio-trust-item { display: inline-flex; align-items: center; gap: 8px; }
#cpcmsbanner5 .bio-trust-item span {
  color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 20px; line-height: 21px; letter-spacing: .2px;
}
#cpcmsbanner5 .bio-trust-item i.material-icons { color: #fff; font-size: 28px; line-height: 1; }
/* ===== [Figma redesign] cp_cmsbanner5 END ===== */

/* ===== [Figma redesign] cp_cmsbanner5 — przewijanie (marquee) + większe odstępy ===== */
#cpcmsbanner5 #cpcmsbanner5_block1.bio-trustbar { display: block !important; float: none !important; gap: 0 !important; }
#cpcmsbanner5 .marquee { height: auto !important; min-height: 42px; overflow: hidden; display: flex; align-items: center; }
#cpcmsbanner5 .marquee .marquee_content { gap: 90px !important; align-items: center; }
#cpcmsbanner5 .marquee .marquee_content .list-inline.bio-trust-list {
  display: flex !important; align-items: center; gap: 90px !important; list-style: none; padding: 0; margin: 0;
}
#cpcmsbanner5 .bio-trust-item { display: inline-flex !important; align-items: center; gap: 8px; white-space: nowrap; position: static; }
#cpcmsbanner5 .bio-trust-item span { color:#fff !important; font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:20px; line-height:21px; letter-spacing:.2px; }
#cpcmsbanner5 .bio-trust-item i.material-icons { color:#fff !important; font-size:28px; line-height:1; }
/* własna ikona SVG (polski producent) zamiast material-icon flag */
#cpcmsbanner5 .bio-trust-item .bio-trust-svg { width:28px; height:28px; display:inline-block; vertical-align:middle; flex:0 0 28px; }
/* ===== END ===== */

/* ===== [Figma redesign] cp_cmsbanner5 — bezszwowy marquee (4 kopie, -25%) ===== */
#cpcmsbanner5 .marquee { overflow: hidden; }
#cpcmsbanner5 .marquee .marquee_content {
  display: flex !important; width: max-content !important; gap: 0 !important;
  animation: bio-marquee 30s linear infinite !important;
}
#cpcmsbanner5 .marquee .marquee_content .list-inline.bio-trust-list {
  display: flex !important; align-items: center; gap: 90px !important; padding: 0 45px 0 45px !important;
  margin: 0 !important; list-style: none; flex-shrink: 0;
}
@keyframes bio-marquee { from { transform: translateX(0); } to { transform: translateX(-25%); } }
/* ===== END ===== */

/* ===== [Figma redesign] SZUKAJKA DESKTOP — jedna pigułka jak w projekcie (223-490) START ===== */
@media (min-width: 768px) {
  /* motyw ma dwie globalne reguły `span.search_button` o równej specyficzności i ta późniejsza
     ustawia display:block (lupa z mask-image) → renderowała się DRUGA lupka jako osobny blok
     nad polem i rozbijała header na dwa rzędy. Na mobile motyw ją chowa, na desktopie nie. */
  #header #search_block_top .search_button,
  #header #search_block_top > span.search_button { display: none !important; }

  #header #search_block_top .searchtoggle { display: block !important; position: static !important; }
  #header #search_block_top .searchtoggle form {
    display: flex !important; align-items: center !important; position: relative !important; margin: 0 !important;
  }
  #header #search_block_top .searchtoggle .cpsearch-main {
    flex: 1 1 auto !important; min-width: 0 !important; position: relative !important; width: auto !important;
  }
  /* pole = pełna pigułka, szare tło, miejsce na lupkę po prawej */
  #header #search_block_top .searchtoggle #search_query_top {
    width: 100% !important; box-sizing: border-box !important; height: 44px !important;
    padding: 0 46px 0 20px !important; border: none !important;
    border-radius: 25px !important; background-color: #f0f0f0 !important;
  }
  /* dropdown kategorii ukryty — design ma czystą pigułkę */
  #header #search_block_top .searchtoggle .select-wrapper,
  #header #search_block_top .searchtoggle #cp_url_ajax_search { display: none !important; }
  /* lupka WEWNĄTRZ pola, po prawej */
  #header #search_block_top .searchtoggle .btn.btn-primary {
    position: absolute !important; right: 6px !important; top: 50% !important; transform: translateY(-50%) !important;
    width: 34px !important; height: 34px !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important;
    background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 50% !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
  }
  #header #search_block_top .searchtoggle .btn.btn-primary .submit-text { display: none !important; }
  #header #search_block_top .searchtoggle .btn.btn-primary::before {
    content: "\E8B6" !important; font-family: "Material Icons" !important; font-size: 22px !important; line-height: 1 !important; color: #333 !important;
  }
}
/* ===== END ===== */

/* ===== [Figma redesign] MOBILE — strzałki karuzel (365:719/720) START ===== */
/* Ikona = lucide/arrow-right 1:1 z Figmy (365:721/723), kolory #C4C4C4 / #FF7B00, gap 24px.
   SPECYFICZNOŚĆ: motyw ustawia pomarańczowe tło m.in. selektorem
   `.brands .btn.prev.brand_prev` = (0,4,0), który bije `.brands .customNavigation i.prev` = (0,3,1).
   Dlatego selektory zawierają klasy przycisku (i.btn.prev.brand_prev = 5 klas + element).
   Skrót `mask` resetuje wszystkie pod-właściwości maski motywu naraz.
   STAN: klasy .bio-nav-on/.bio-nav-off nadaje custom.js wg pozycji karuzeli. */
@media (max-width: 767px) {
  #featured-products .customNavigation,
  .newproducts .customNavigation,
  .brands .customNavigation,
  #cpcategorytabs .customNavigation,
  .cpcategorylist .customNavigation,
  .special-products .customNavigation {
    display:flex!important; position:static!important;
    top:auto!important; right:auto!important; bottom:auto!important; left:auto!important;
    width:100%!important; justify-content:center!important; align-items:center!important;
    gap:24px!important; margin:4px 0 14px!important;
    opacity:1!important; visibility:visible!important; transform:none!important;
  }
  /* w #featured-products nawigacja leży w DOM PO karuzeli — nad karty */
  #featured-products #spe_res { display:flex!important; flex-direction:column!important; }
  #featured-products #spe_res .customNavigation { order:-1!important; }

  #featured-products .customNavigation i.btn.prev.feature_prev,
  .newproducts .customNavigation i.btn.prev.newproduct_prev,
  .brands .customNavigation i.btn.prev.brand_prev,
  #cpcategorytabs .customNavigation i.btn.prev.cpcategory_prev,
  .cpcategorylist .customNavigation i.btn.prev.cpcategory_prev,
  .special-products .customNavigation i.btn.prev,
  #featured-products .customNavigation i.btn.next.feature_next,
  .newproducts .customNavigation i.btn.next.newproduct_next,
  .brands .customNavigation i.btn.next.brand_next,
  #cpcategorytabs .customNavigation i.btn.next.cpcategory_next,
  .cpcategorylist .customNavigation i.btn.next.cpcategory_next,
  .special-products .customNavigation i.btn.next {
    position:static!important; display:inline-flex!important;
    align-items:center!important; justify-content:center!important;
    width:24px!important; height:24px!important; min-width:0!important;
    margin:0!important; padding:0!important;
    left:auto!important; right:auto!important; top:auto!important;
    background:none!important; background-color:transparent!important;
    box-shadow:none!important; border:0!important; border-radius:0!important;
    line-height:1!important; font-size:0!important; overflow:visible!important;
    cursor:pointer!important;
  }
  /* stan domyślny (fallback gdyby JS nie wystartował): wstecz szary, dalej pomarańczowy */
  #featured-products .customNavigation i.btn.prev.feature_prev::before,
  .newproducts .customNavigation i.btn.prev.newproduct_prev::before,
  .brands .customNavigation i.btn.prev.brand_prev::before,
  #cpcategorytabs .customNavigation i.btn.prev.cpcategory_prev::before,
  .cpcategorylist .customNavigation i.btn.prev.cpcategory_prev::before,
  .special-products .customNavigation i.btn.prev::before {
    content:''!important; position:static!important; display:block!important;
    width:24px!important; height:24px!important; margin:0!important;
    background-color:#C4C4C4!important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 5L5 12L12 19'/%3E%3C/svg%3E") center / 24px 24px no-repeat!important; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M12 5L5 12L12 19'/%3E%3C/svg%3E") center / 24px 24px no-repeat!important;
    -webkit-transition:background-color .28s ease!important; transition:background-color .28s ease!important;
  }
  #featured-products .customNavigation i.btn.next.feature_next::before,
  .newproducts .customNavigation i.btn.next.newproduct_next::before,
  .brands .customNavigation i.btn.next.brand_next::before,
  #cpcategorytabs .customNavigation i.btn.next.cpcategory_next::before,
  .cpcategorylist .customNavigation i.btn.next.cpcategory_next::before,
  .special-products .customNavigation i.btn.next::before {
    content:''!important; position:static!important; display:block!important;
    width:24px!important; height:24px!important; margin:0!important;
    background-color:#FF7B00!important;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12H19M12 19L19 12L12 5'/%3E%3C/svg%3E") center / 24px 24px no-repeat!important; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12H19M12 19L19 12L12 5'/%3E%3C/svg%3E") center / 24px 24px no-repeat!important;
    -webkit-transition:background-color .28s ease!important; transition:background-color .28s ease!important;
  }
  /* kierunek DOSTĘPNY -> pomarańczowy; NIEDOSTĘPNY (skraj) -> szary. +1 klasa = wyższa specyficzność */
  #featured-products .customNavigation i.btn.prev.feature_prev.bio-nav-on::before,
  .newproducts .customNavigation i.btn.prev.newproduct_prev.bio-nav-on::before,
  .brands .customNavigation i.btn.prev.brand_prev.bio-nav-on::before,
  #cpcategorytabs .customNavigation i.btn.prev.cpcategory_prev.bio-nav-on::before,
  .cpcategorylist .customNavigation i.btn.prev.cpcategory_prev.bio-nav-on::before,
  .special-products .customNavigation i.btn.prev.bio-nav-on::before,
  #featured-products .customNavigation i.btn.next.feature_next.bio-nav-on::before,
  .newproducts .customNavigation i.btn.next.newproduct_next.bio-nav-on::before,
  .brands .customNavigation i.btn.next.brand_next.bio-nav-on::before,
  #cpcategorytabs .customNavigation i.btn.next.cpcategory_next.bio-nav-on::before,
  .cpcategorylist .customNavigation i.btn.next.cpcategory_next.bio-nav-on::before,
  .special-products .customNavigation i.btn.next.bio-nav-on::before { background-color:#FF7B00!important; }

  #featured-products .customNavigation i.btn.prev.feature_prev.bio-nav-off::before,
  .newproducts .customNavigation i.btn.prev.newproduct_prev.bio-nav-off::before,
  .brands .customNavigation i.btn.prev.brand_prev.bio-nav-off::before,
  #cpcategorytabs .customNavigation i.btn.prev.cpcategory_prev.bio-nav-off::before,
  .cpcategorylist .customNavigation i.btn.prev.cpcategory_prev.bio-nav-off::before,
  .special-products .customNavigation i.btn.prev.bio-nav-off::before,
  #featured-products .customNavigation i.btn.next.feature_next.bio-nav-off::before,
  .newproducts .customNavigation i.btn.next.newproduct_next.bio-nav-off::before,
  .brands .customNavigation i.btn.next.brand_next.bio-nav-off::before,
  #cpcategorytabs .customNavigation i.btn.next.cpcategory_next.bio-nav-off::before,
  .cpcategorylist .customNavigation i.btn.next.cpcategory_next.bio-nav-off::before,
  .special-products .customNavigation i.btn.next.bio-nav-off::before { background-color:#C4C4C4!important; }
}
/* ===== END ===== */

/* ===== [Figma redesign] STRONA KATEGORII (listing 331-212) — ETAP 1: nagłówek, breadcrumb, pasek sortowania START ===== */

/* --- Breadcrumb: pasek #EEEEEE, Barlow Condensed 16px, separator #BFBFBF (wg 331:3701) --- */
/* KLUCZOWE: motyw daje #breadcrumb_wrapper padding 50px + margin-bottom 50px -> ogromny szary pas.
   Figma (331:3701) = cienki pasek ~39px. Tniemy wrapper: */
#breadcrumb_wrapper {
  padding-top: 10px !important; padding-bottom: 10px !important; margin-bottom: 22px !important;
  background-color: #EEEEEE !important;
}
.breadcrumb {
  background: #EEEEEE !important; border-radius: 0 !important;
  padding: 0 !important; margin: 0 !important; border: 0 !important; box-shadow: none !important;
}
.breadcrumb ol { margin: 0 !important; padding: 0 !important; display: flex; flex-wrap: wrap; align-items: center; list-style: none; }
.breadcrumb li { display: inline-flex; align-items: center; margin: 0 !important; }
.breadcrumb li,
.breadcrumb li a,
.breadcrumb li a span,
.breadcrumb li span[itemprop="name"] {
  font-family: 'Barlow Condensed', sans-serif !important; font-weight: 400 !important;
  font-size: 16px !important; line-height: 21px !important; color: #000 !important; text-decoration: none !important;
}
.breadcrumb li a:hover span { color: #FF7B00 !important; }
.breadcrumb li::before { content: none !important; }             /* zdejmij domyślny separator motywu (::before) */
.breadcrumb li a::after { content: none !important; display: none !important; }  /* zdejmij DRUGI separator motywu (kreska 1px na a::after) -> był podwójny "| |" */
.breadcrumb li:not(:last-child)::after { content: "|"; color: #BFBFBF; margin: 0 12px; }

/* --- Nagłówek kategorii: akcent #EABF60 (6×38) + tytuł Barlow Condensed 700 50px (wg 331:3708) --- */
.block-category.card,
.block-category {
  border: 0 !important; box-shadow: none !important; background: transparent !important;
  padding: 0 !important; margin: 20px 0 4px !important;
}
.block-category .h1,
.block-category h1.h1 {
  font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important;
  font-size: 50px !important; line-height: 50px !important; color: #000 !important; text-transform: none !important;
  margin: 0 !important; padding-left: 21px !important; position: relative; display: inline-block;
}
.block-category .h1::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 6px; height: 38px; background: #EABF60; border-radius: 2px;
}

/* --- Pasek sortowania (wg 354:6380): "Znaleziono X produktów" | "Sortuj wg:" [pigułka] --- */
#js-product-list-top .products-selection,
.products-selection {
  display: flex !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin: 18px 0 22px !important;
}
.products-selection .total-products {
  display: flex !important; align-items: center; gap: 14px; float: none !important; width: auto !important; padding: 0 !important;
}
.products-selection .total-products p {
  margin: 0 !important; font-family: 'Barlow Condensed', sans-serif !important; font-weight: 400 !important;
  font-size: 20px !important; line-height: 21px !important; color: #000 !important;
}
/* przełączniki widoku grid/list — ukryte (lista pozioma, nie ma w Figmie) */
.products-selection .grid_list { display: none !important; }
.products-selection .grid_list--noop { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.products-selection .grid_list li a {
  font-size: 0 !important; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 8px; color: #9a9a9a; background: #f2f2f2;
}
.products-selection .grid_list li a:hover { color: #FF7B00; }
.products-selection .grid_list li#grid a::before { content: "grid_view"; font-family: 'Material Icons'; font-size: 20px; }
.products-selection .grid_list li#list a::before { content: "view_list"; font-family: 'Material Icons'; font-size: 20px; }

.products-selection .product_sort {
  display: flex !important; align-items: center; gap: 12px; float: none !important; width: auto !important; padding: 0 !important;
}
.products-selection .sort-by {
  font-family: 'Barlow Condensed', sans-serif !important; font-weight: 400 !important; font-size: 20px !important;
  color: #000 !important; width: auto !important; padding: 0 !important; white-space: nowrap; text-align: right;
}
/* dropdown = biała pigułka radius 100 (wg 354:6398) */
.products-sort-order { padding: 0 !important; width: auto !important; min-width: 200px; }
.products-sort-order .select-title {
  background: #fff !important; border: 1px solid #E3E3E3 !important; border-radius: 100px !important;
  padding: 8px 16px 8px 20px !important; min-width: 200px; height: 40px;
  display: inline-flex !important; align-items: center; justify-content: space-between; gap: 10px;
  font-family: 'Barlow Condensed', sans-serif !important; font-size: 15px !important; color: #000 !important;
  box-shadow: none !important;
}
.products-sort-order .select-title i { color: #000; margin: 0 !important; }
.products-sort-order .dropdown-menu { border-radius: 12px !important; border: 1px solid #eee !important; box-shadow: 0 8px 24px rgba(0,0,0,.08) !important; padding: 6px !important; }
.products-sort-order .dropdown-menu .select-list { font-family: 'Barlow Condensed', sans-serif !important; font-size: 15px !important; padding: 8px 12px !important; border-radius: 8px !important; }
.products-sort-order .dropdown-menu .select-list:hover { background: #FFF3E6 !important; color: #FF7B00 !important; }

/* blok "Podkategorie" nie występuje w Figmie (nawigacja jest w sidebarze) — ukryj */
#subcategories { display: none !important; }
/* ===== END ETAP 1 ===== */

/* ===== [Figma redesign] STRONA KATEGORII — ETAP 2: poziome karty produktów (359:1001) START ===== */
/* Scoped do #js-product-list — strona główna (inne szablony) nietknięta. */
#js-product-list .product_list.grid { display: flex !important; flex-direction: column; gap: 16px; margin: 0; }
#js-product-list .product_item { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; padding: 0 !important; }
#js-product-list .product-miniature.bio-listrow { width: 100%; margin: 0; }
#js-product-list .bio-listrow > .row {
  display: flex !important; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 24px;
  margin: 0; background: #fff; border: 1px solid #ECECEC; border-radius: 16px;
  padding: 16px 24px; min-height: 220px; box-shadow: 0 1px 4px rgba(0,0,0,.03);
}
#js-product-list .bio-listrow > .row:hover { box-shadow: 0 6px 18px rgba(0,0,0,.07); }

/* KOLUMNA 1: obrazek */
#js-product-list .bio-listrow .thumbnail-container {
  flex: 0 0 210px; width: 210px; height: 210px; position: relative; margin: 0; padding: 0; opacity: 1;
  left: auto; top: auto; transform: none; display: block;
}
#js-product-list .bio-listrow .thumbnail-container .product-thumbnail,
#js-product-list .bio-listrow .thumbnail-container picture { display: block; width: 100%; height: 100%; }
#js-product-list .bio-listrow .thumbnail-container img { width: 100% !important; height: 100% !important; object-fit: contain; }
/* wishlist = serduszko prawy-górny róg; quick-view/compare ukryte (Figma pokazuje tylko wishlist) */
#js-product-list .bio-listrow .thumbnail-container .product-actions-main {
  position: absolute !important; top: 8px; right: 8px; left: auto; bottom: auto; opacity: 1 !important;
  transform: none !important; pointer-events: auto; width: auto; background: none; padding: 0; display: block;
}
#js-product-list .bio-listrow .thumbnail-container .quick-view,
#js-product-list .bio-listrow .thumbnail-container .comparepro,
#js-product-list .bio-listrow .thumbnail-container .product-compare { display: none !important; }

/* KOLUMNA 2: info */
#js-product-list .bio-listrow .product-info-col {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; align-self: center;
}
#js-product-list .bio-listrow .product-brand {
  color: #8A8A8A; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; line-height: 1.1; text-transform: none;
}
#js-product-list .bio-listrow .product-title { margin: 0; }
#js-product-list .bio-listrow .product-title a {
  color: #111 !important; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 20px; line-height: 1.2;
}
#js-product-list .bio-listrow .product-star-rating { display: flex; gap: 1px; margin: 2px 0; }
/* brak opinii -> szare gwiazdki; realne oceny renderuje moduł opinii własnym markupem */
#js-product-list .bio-listrow .product-star-rating .material-icons { font-size: 18px; color: #D5D5D5; }
#js-product-list .bio-listrow .product-star-rating.no-reviews .material-icons { color: #D5D5D5; }
#js-product-list .bio-listrow .product-price-and-shipping { margin-top: 6px; display: flex; align-items: baseline; gap: 10px; }
#js-product-list .bio-listrow .price {
  color: #FF7B00; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 26px; line-height: 1;
}
#js-product-list .bio-listrow .regular-price {
  color: #B7B7B7; text-decoration: line-through; font-family: 'Barlow Condensed', sans-serif; font-size: 18px;
}

/* KOLUMNA 3: akcje */
#js-product-list .bio-listrow .product-actions-col {
  flex: 0 0 220px; width: 220px; display: flex; flex-direction: column; gap: 10px; align-items: stretch; align-self: center;
}
#js-product-list .bio-listrow .product-stock { display: flex; flex-direction: column; gap: 5px; margin-bottom: 2px; }
#js-product-list .bio-listrow .product-stock .stock-label { font-family: 'Barlow Condensed', sans-serif; font-size: 14px; color: #555; text-align: center; }
/* licznik stanu w kolorze paska: number ORAZ wypełnienie paska = ten sam --stock-color (progi w szablonie) */
#js-product-list .bio-listrow .product-stock.stock-high { --stock-color: #1DB233; }  /* dużo — zielony */
#js-product-list .bio-listrow .product-stock.stock-mid  { --stock-color: #FF9800; }  /* średnio — pomarańczowy */
#js-product-list .bio-listrow .product-stock.stock-low  { --stock-color: #E53935; }  /* mało — czerwony */
#js-product-list .bio-listrow .product-stock .stock-label b { color: var(--stock-color, #1DB233); }
#js-product-list .bio-listrow .product-stock .stock-bar { display: block; height: 6px; border-radius: 6px; background: #E8E8E8; overflow: hidden; }
#js-product-list .bio-listrow .product-stock .stock-bar > span { display: block; height: 100%; background: var(--stock-color, #1DB233); border-radius: 6px; }

#js-product-list .bio-listrow .add-to-cart-button { margin: 0; display: block !important; }  /* nadpisz ukrycie z reguł home (linie ~630/666) */
#js-product-list .bio-listrow .add-to-cart-button form { margin: 0; }
#js-product-list .bio-listrow .add-to-cart-button .btn.add-to-cart {
  width: 100%; height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #FF7B00 !important; color: #fff !important; border: 0 !important; border-radius: 10px !important;
  font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 17px !important; box-shadow: none !important;
  text-transform: none !important; letter-spacing: 0 !important;
}
#js-product-list .bio-listrow .add-to-cart-button .btn.add-to-cart .material-icons { font-size: 20px; }
#js-product-list .bio-listrow .add-to-cart-button .btn.add-to-cart[disabled] { background: #cccccc !important; opacity: .6; }
#js-product-list .bio-listrow .view-product-btn {
  width: 100%; height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px solid #FF7B00; color: #FF7B00 !important; border-radius: 10px; text-decoration: none !important;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 17px; background: #fff;
  transition: background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}
#js-product-list .bio-listrow .view-product-btn .material-icons { transition: color .28s ease; }
#js-product-list .bio-listrow .view-product-btn:hover { background: #FF7B00; color: #fff !important; box-shadow: 0 4px 12px rgba(255,123,0,.28); }
#js-product-list .bio-listrow .view-product-btn:hover .material-icons { color: #fff !important; }
#js-product-list .bio-listrow .view-product-btn .material-icons { font-size: 20px; }

/* mobile: karta pionowo (obrazek nad treścią) */
@media (max-width: 767px) {
  #js-product-list .bio-listrow > .row { flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; min-height: 0; text-align: center; }
  #js-product-list .bio-listrow .thumbnail-container { flex-basis: auto; width: 100%; height: 200px; }
  #js-product-list .bio-listrow .product-actions-col { width: 100%; flex-basis: auto; }
  #js-product-list .bio-listrow .product-price-and-shipping { justify-content: center; }
}
/* ===== END ETAP 2 ===== */

/* ===== [Figma redesign] STRONA KATEGORII — ETAP 3: sidebar filtrów jako biała karta (360:2849) START ===== */
/* Ukryj duplikujące/niepotrzebne bloki lewej kolumny (Figma: Kategoria + Serie/Marka + Cena + baner) */
#left-column .block-categories,                         /* ps_categorytree "Kupuj Według Kategorii" (dup z faceted Kategorie) */
#left-column .sidebar-featured,                         /* "Najczęściej Oglądany Produkt" — nie ma w Figmie */
#left-column .cp-sidebar-featured,
#left-column #cp_sidebarfeaturedproducts,
#left-column .featured-products,
#left-column .products-block { display: none !important; }

/* facety spoza Figmy */
#search_filters .facet[data-type="availability"],
#search_filters .facet[data-type="extras"],
#search_filters .facet[data-type="weight"] { display: none !important; }

/* "Filtruj według" nagłówek bloku — zbędny (Figma ma tytuły per-facet) */
#search_filters_wrapper > .h6:first-child,
#search_filters .h4.hidden-md-up,
#search_filters > p:first-child { display: none !important; }

/* KARTA filtrów */
#left-column #search_filters_wrapper { padding: 0; }
#left-column #search_filters {
  background: #fff; border: 1px solid #ECECEC; border-radius: 16px; padding: 22px 22px 26px;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
}
/* nagłówki facetów */
#search_filters .facet { border: 0 !important; padding: 0 0 18px !important; margin: 0 0 4px !important; }
#search_filters .facet .facet-title {
  font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important;
  font-size: 22px !important; color: #111 !important; text-transform: none !important; margin: 0 0 10px !important;
}
#search_filters .facet ul { margin: 0; padding: 0; list-style: none; }
#search_filters .facet .facet-label {
  display: flex !important; align-items: center; gap: 10px; margin: 0 0 8px !important; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-size: 17px; color: #222; font-weight: 400;
}
#search_filters .facet .facet-label a { color: #222 !important; text-decoration: none !important; flex: 1 1 auto; font-weight: 400 !important; }
#search_filters .facet .facet-label .magnitude {
  color: #9a9a9a !important; font-size: 15px; margin-left: auto; padding-left: 6px;
}
/* checkboxy — pomarańczowe gdy zaznaczone */
#search_filters .custom-checkbox input[type="checkbox"] + span,
#search_filters .custom-checkbox input[type="radio"] + span {
  width: 20px; height: 20px; border: 2px solid #D9D9D9; border-radius: 6px; margin: 0; flex: 0 0 20px;
}
#search_filters .custom-checkbox input[type="checkbox"]:checked + span,
#search_filters .custom-checkbox input[type="radio"]:checked + span {
  background: #FF7B00 !important; border-color: #FF7B00 !important;
}
#search_filters .custom-checkbox input + span .material-icons { color: #fff !important; font-size: 18px; margin-left: -1px; }

/* suwak ceny — pomarańczowy */
#search_filters .faceted-slider .ui-slider,
#search_filters .ui-slider-horizontal { height: 6px !important; background: #E8E8E8 !important; border: 0 !important; border-radius: 6px !important; }
#search_filters .ui-slider .ui-slider-range { background: #FF7B00 !important; }
#search_filters .ui-slider .ui-slider-handle {
  width: 18px !important; height: 18px !important; border-radius: 50% !important;
  background: #FF7B00 !important; border: 3px solid #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.25) !important; top: -7px !important;
}
#search_filters .faceted-slider p, #search_filters .faceted-slider .current-value { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; color: #222; }

/* "Wyczyść wszystko" w sidebarze — ukryte (clear jest w pasku "Aktywne filtry" jak w Figmie 360:1349) */
#search_filters .clear-all-wrapper { display: none !important; }

/* kolejność facetów jak w Figmie: Kategoria -> Marka(Serie) -> Cena */
#left-column #search_filters { display: flex; flex-direction: column; }
#left-column #search_filters > * { order: 5; }
#left-column #search_filters .facet[data-type="category"] { order: 1; }
#left-column #search_filters .facet[data-type="manufacturer"] { order: 2; }
#left-column #search_filters .facet[data-type="price"] { order: 3; padding-bottom: 4px !important; }
/* ostatni widoczny facet bez dolnego marginesu (mniej pustej przestrzeni) */
#left-column #search_filters .facet:last-of-type { padding-bottom: 0 !important; }

/* pasek "Aktywne filtry" (wg 360:1338): etykieta + chipy + "Wyczyść wszystko" */
#js-product-list-top .active_filters,
.block-categories .active_filters,
#search_filters_wrapper .active_filters,
#js-active-search-filters,
.active_filters { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin: 0 0 16px; }
/* etykieta "Aktywne filtry:" — pogrubiona, BEZ kapitalizacji motywu, z dwukropkiem (wg 360:1340) */
.active_filters .active-filter-title, .active_filters p { font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 18px !important; margin: 0 !important; text-transform: none !important; color: #000 !important; }
.active_filters .active-filter-title::after { content: ":"; }
.active_filters ul { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; margin: 0 !important; padding: 0 !important; list-style: none !important; }
/* chipy — wg Figmy 360:1341: BEZ tła/ramki, szary tekst + czarny ✕ */
.active_filters .filter-block, .active_filters ul li {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important;
  font-family: 'Barlow Condensed', sans-serif !important; font-size: 18px !important; color: #9a9a9a !important;
  display: inline-flex; align-items: center; gap: 8px;
}
.active_filters .filter-block .js-search-link,
.active_filters .filter-block .js-search-link .material-icons.close { color: #000 !important; text-decoration: none !important; }
.active_filters .filter-block .js-search-link .material-icons { font-size: 20px; font-weight: 700; }
/* ===== END ETAP 3 ===== */

/* ===== [Figma redesign] STRONA KATEGORII — ETAP 4: paginacja (354:6699) START ===== */
#js-product-list .pagination.row,
.pagination.row {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  margin: 24px 0 10px; padding: 16px 0 0; border-top: 1px solid #EDEDED;
}
.pagination .col-md-4 {
  width: auto; padding: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; color: #777;
}
.pagination .col-md-8 { width: auto; padding: 0; }
.pagination .page-list { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; float: none !important; }
.pagination .page-list li { margin: 0; }
/* kółka jak w Figmie (354:6699): nieaktywne szare, aktywne pomarańczowe */
.pagination .page-list li a,
.pagination .page-list li > span:not(.spacer) {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; min-width: 40px; padding: 0; border-radius: 50%; border: 0;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600; font-size: 17px; color: #333; background: #F0F0F0;
  text-decoration: none !important; transition: background-color .2s ease, color .2s ease;
}
.pagination .page-list li a:hover { background: #FFE3C7; color: #FF7B00; }
.pagination .page-list li.current a,
.pagination .page-list li.current > span {
  background: #FF7B00 !important; color: #fff !important;
}
.pagination .page-list li .spacer { background: transparent !important; border: 0; width: auto; color: #999; padding: 0 4px; }
.pagination .page-list li a.disabled { opacity: .4; pointer-events: none; }
/* strzałki prev/next (ikony material) */
.pagination .page-list li.previous a,
.pagination .page-list li.next a { font-size: 0; }
.pagination .page-list li.previous a::before { content: "chevron_left"; font-family: 'Material Icons'; font-size: 24px; }
.pagination .page-list li.next a::before { content: "chevron_right"; font-family: 'Material Icons'; font-size: 24px; }
/* ===== END ETAP 4 ===== */

/* ===== [Figma redesign] KATEGORIA — poprawki sidebaru (suwak Cena + Latest News) ===== */
/* "Latest News" (ets_blog/ets_news displayLeftColumn) — nie ma w Figmie */
#left-column .sidebar-latest-blog { display: none !important; }

/* Suwak CENY — trzymamy w karcie MARGINESEM (>= promień uchwytu 9px), BEZ overflow:hidden,
   żeby uchwyt nie był przycinany. Track = szerokość auto (wypełnia), po 14px z każdej strony. */
#left-column #search_filters { overflow-x: visible; }
#left-column #search_filters .facet[data-type="price"] { overflow: visible; }
#left-column #search_filters .facet[data-type="price"] .faceted-slider {
  padding: 0 !important; margin: 16px 0 8px !important; width: auto !important; box-sizing: border-box !important; list-style: none;
}
#left-column #search_filters .facet[data-type="price"] .ui-slider,
#left-column #search_filters .facet[data-type="price"] .ui-slider-horizontal {
  width: auto !important; min-width: 0 !important; max-width: none !important; display: block !important;
  margin: 8px 14px !important; box-sizing: border-box !important;
}
/* etykieta zakresu ceny — w obrębie karty */
#left-column #search_filters .facet[data-type="price"] .faceted-slider .current-value,
#left-column #search_filters .facet[data-type="price"] p { padding: 0 !important; margin: 0 0 6px !important; }
/* ===== END ===== */

/* ===== [Figma redesign] KATEGORIA — drobne poprawki (baner overlay + paginacja next) ===== */
/* nowy baner sidebar ma własny tekst — ukryj stary overlay "Nowe trendy / Zniżki do 60%" */
#cpleftbanner1 .left-offer-block { display: none !important; }
/* paginacja: ukryj "Następny"/"Poprzedni" — UWAGA klasa .next/.previous jest na <a>, nie <li>!
   (nawigacja przez numery stron, jak w Figmie 354:6699) */
.pagination .page-list li:has(> a.next),
.pagination .page-list li:has(> a.previous) { display: none !important; }
.pagination .page-list a.next,
.pagination .page-list a.previous { display: none !important; }   /* fallback bez :has() */
/* ===== END ===== */

/* ===== [dodane] dane spółki GW w stopce + link regulaminu w koszyku ===== */
.footer-container .bio-footer-gw { margin-top: 16px; }
.footer-container .bio-footer-gw .bio-footer-gw-name { font-weight: 700; margin: 0 0 4px; font-size: 16px; }
.footer-container .bio-footer-gw .bio-footer-gw-legal { margin: 0; line-height: 1.7; font-size: 14px; color: #333; }
.cart-regulamin-note { margin: 12px 0 0; font-size: 14px; color: #555; }
.cart-regulamin-note a { color: #FF7B00; text-decoration: underline; font-weight: 600; }
/* ===== END ===== */

/* zgoda RODO: gwiazdka wymagalności */
.custom-checkbox .required-star, label .required-star { color: #e53935; font-weight: 700; }

/* link do regulaminu w zgodzie RODO (checkbox) */
.psgdpr-terms-link { color: #FF7B00; text-decoration: underline; }
.psgdpr-terms-link:hover { color: #e06c00; }

/* ===== [Figma redesign] KATEGORIA — uwagi: tytuł nad kolumnami + "Pokaż wyniki" START ===== */
/* Tytuł "Pies" (.block-category w #js-product-list-header) w Figmie (331:212) jest NAD obiema
   kolumnami, przy lewej krawędzi kontenera. W DOM to 1. dziecko #content-wrapper (prawa kolumna).
   Na desktopie wyciągamy go na pełną szerokość kontenera i spychamy sidebar poniżej tytułu. */
@media (min-width: 992px) {
  #content-wrapper #main > #js-product-list-header {
    width: 133.3333%;
    margin-left: -33.3333%;
    position: relative;
    z-index: 2;
  }
  #content-wrapper #main > #js-product-list-header .block-category {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }
  #columns_inner #left-column { margin-top: 62px; }
}

/* Przycisk "Pokaż wyniki" na dole karty filtrów */
#search_filters .js-show-results {
  display: block; width: 100%; margin: 10px 0 0; padding: 13px 20px;
  background: #FF7B00 !important; border: 0 !important; border-radius: 100px !important;
  font-family: 'Barlow Condensed', sans-serif !important; font-weight: 600 !important;
  font-size: 18px !important; line-height: 1 !important; letter-spacing: .3px;
  color: #fff !important; text-align: center; text-decoration: none !important; text-transform: none !important;
  box-shadow: 0 4px 12px rgba(255,123,0,.28); transition: background-color .2s ease, transform .05s ease;
}
#search_filters .js-show-results:hover { background: #e56e00 !important; }
#search_filters .js-show-results:active { transform: translateY(1px); }
/* ===== END ===== */

/* ===== [FIX 1440px] header: serce+koszyk zawsze widoczne, szukajka się kurczy (nie wypycha ich poza ekran) START ===== */
@media (min-width: 768px) {
  #header .header-right {
    display: flex !important; align-items: center !important; justify-content: flex-end !important;
    flex-wrap: nowrap !important; gap: 14px !important; min-width: 0 !important; flex: 0 1 auto !important;
  }
  /* wishlist (serce) + koszyk: nie kurczą się, zawsze na ekranie */
  #header .header-right > * { flex: 0 0 auto; }
  /* szukajka wypełnia dostępne miejsce, ale KURCZY się gdy go brakuje */
  #header .header-right #search_block_top {
    flex: 1 1 auto !important; width: auto !important; max-width: 360px !important; min-width: 104px !important;
    padding: 0 !important;
  }
  /* pozwól kontenerowi rzędu ciasno się kurczyć; menu (header-center) NIE kurczymy poniżej treści */
  #header .header-top-main.bg_main { min-width: 0 !important; }
}
/* ===== END ===== */

/* ===== [Figma redesign] MOBILE listing: ikona Filtr (Frame 1321315479) + ukrycie nazwy kategorii w kaflu START ===== */
/* przycisk filtra = sama ikona (własne pomarańczowe kółko), wyrównany do prawej */
.products-selection .filter-mobile.slider { margin-left: auto; }
.products-selection .filter-button { padding: 0 !important; text-align: right; }
#search_filter_toggler.filter-icon-btn {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; margin: 0 !important; min-width: 0 !important;
  width: 44px !important; height: 45px !important; line-height: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
}
#search_filter_toggler.filter-icon-btn::before,
#search_filter_toggler.filter-icon-btn::after { content: none !important; }
#search_filter_toggler.filter-icon-btn img { display: block; width: 44px; height: 45px; }
#search_filter_toggler.filter-icon-btn:hover,
#search_filter_toggler.filter-icon-btn:focus,
#search_filter_toggler.filter-icon-btn:active { background: transparent !important; opacity: .88; }

/* usuń nazwę głównej kategorii ("Pies") pod miniaturką na liście — wersja mobilna */
@media (max-width: 767px) {
  #js-product-list .product-brand,
  #products .product-brand,
  .products .product-brand { display: none !important; }
}
/* ===== END ===== */

/* ===== [Blog] ukrycie nagłówka "posts", autora i daty publikacji START ===== */
/* nagłówek "posts" tylko na stronie głównej bloga (kategorie/autor zachowują tytuł) */
.ets-blog-wrapper.ets-page-home > .page-header,
#main.ets-page-home .page-header { display: none !important; }
/* autor ("By ...") i data w kaflach/postach bloga */
.ets-blog-wrapper .author-block,
.ets-blog-wrapper .post-date { display: none !important; }
/* ===== END ===== */

/* ===== [Figma 360-9083] MOBILNY PANEL FILTRÓW: nagłówek "Filtry" pomarańczowy + pełna szerokość START ===== */
@media (max-width: 991px) {
  .filter-mobile #search_filters {
    width: 100% !important; max-width: 420px !important; padding: 0 0 24px !important;
    display: flex !important; flex-direction: column !important;
  }
  /* nagłówek "Filtry" — pomarańczowy pasek pełnej szerokości, biały tekst wyśrodkowany, biały X */
  .filter-mobile #search_filters .text-uppercase {
    order: 0 !important;
    background: #FF7B00 !important; color: #fff !important;
    font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important;
    font-size: 24px !important; text-align: center !important; text-transform: none !important;
    padding: 15px 20px !important; margin: 0 0 14px !important; position: relative !important;
  }
  .filter-mobile #search_filters .text-uppercase::after {
    background-color: #fff !important;
    position: absolute !important; top: 50% !important; right: 16px !important; left: auto !important;
    transform: translateY(-50%) !important; float: none !important; margin: 0 !important;
  }
  /* kolejność jak w Figmie: Kategoria -> Serie(marka) -> Cena -> Pokaż wyniki */
  .filter-mobile #search_filters > * { order: 5; }
  .filter-mobile #search_filters .facet[data-type="category"] { order: 1 !important; }
  .filter-mobile #search_filters .facet[data-type="manufacturer"] { order: 2 !important; }
  .filter-mobile #search_filters .facet[data-type="price"] { order: 3 !important; }
  .filter-mobile #search_filters .js-show-results { order: 6 !important; display: block !important; width: auto !important; box-sizing: border-box !important; }
  /* poziomy margines treści (nagłówek pełnej szerokości, reszta z odstępem) */
  .filter-mobile #search_filters .facet,
  .filter-mobile #search_filters .clear-all-wrapper,
  .filter-mobile #search_filters .js-show-results { margin-left: 18px !important; margin-right: 18px !important; }
}
/* ===== END ===== */

/* ===== [Figma 360-5783] selektor ilości w kaflu + cena mobile (większa, do lewej) START ===== */
#js-product-list .bio-listrow .bio-qty-stepper {
  display: flex; align-items: center; width: max-content; margin: 4px auto 12px;
  border: 1px solid #E0E0E0; border-radius: 8px; overflow: hidden; background: #fff;
}
#js-product-list .bio-listrow .bio-qty-btn {
  width: 40px; height: 40px; padding: 0; border: 0; background: #fff; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif; font-size: 22px; line-height: 1; color: #333;
  display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s ease, color .15s ease;
}
#js-product-list .bio-listrow .bio-qty-btn:hover { background: #FFF3E6; color: #FF7B00; }
#js-product-list .bio-listrow .bio-qty-input {
  width: 46px; height: 40px; border: 0; border-left: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0;
  text-align: center; background: #fff;
  font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 700; color: #111;
  -moz-appearance: textfield; appearance: textfield; box-shadow: none !important;
}
#js-product-list .bio-listrow .bio-qty-input:focus { outline: none; border-color: #FF7B00; }
#js-product-list .bio-listrow .bio-qty-input::-webkit-outer-spin-button,
#js-product-list .bio-listrow .bio-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* MOBILE: cena większa i wyrównana do lewej (jak w Figmie) */
@media (max-width: 767px) {
  #js-product-list .bio-listrow .product-price-and-shipping { justify-content: flex-start !important; }
  #js-product-list .bio-listrow .price { font-size: 26px !important; line-height: 1.1 !important; }
}
/* ===== END ===== */

/* ===== [tablet/laptop 992–1600px] szukajka zwinięta do LUPKI (klik -> dropdown), jak na mobile.
       1920+ zostaje pełnym pillem. Eliminuje nachodzenie ikon na wyszukiwarkę. ===== */
@media (min-width: 992px) and (max-width: 1600px) {
  #header .header-right #search_block_top {
    position: relative !important; flex: 0 0 auto !important;
    width: 40px !important; max-width: 40px !important; min-width: 0 !important;
    display: flex !important; align-items: center; justify-content: center; padding: 0 !important; overflow: visible !important;
  }
  #header #search_block_top .bio-search-trigger {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 40px; height: 40px; cursor: pointer; color: #000;
  }
  #header #search_block_top .bio-search-trigger .material-icons { font-size: 24px !important; }
  #header #search_block_top .search_button { display: none !important; }

  /* dropdown z formularzem — zakotwiczony do lupki, po prawej */
  #header #search_block_top .searchtoggle {
    display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important;
    position: absolute !important; top: calc(100% + 10px) !important; right: 0 !important; left: auto !important; bottom: auto !important;
    width: 340px !important; height: auto !important; margin: 0 !important; padding: 8px 12px !important;
    background: #fff !important; border-radius: 30px !important; box-shadow: 0 10px 30px rgba(0,0,0,.18) !important;
    z-index: 1000 !important;
    opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-6px);
    transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
  }
  #header #search_block_top .bio-search-cb:checked ~ .searchtoggle {
    opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important;
  }
  #header #search_block_top .bio-search-cb:checked ~ .bio-search-trigger { visibility: hidden; opacity: 0; }

  /* wnętrze dropdownu: [input .....] [lupka-submit] [X] */
  #header #search_block_top .searchtoggle form {
    display: flex !important; flex-direction: row !important; align-items: center !important; gap: 6px !important;
    flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; position: relative !important; order: 1;
  }
  #header #search_block_top .searchtoggle .cpsearch-main { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; position: relative; }
  #header #search_block_top .searchtoggle #search_query_top {
    width: 100% !important; box-sizing: border-box !important; height: 40px !important; padding: 0 16px !important;
    border-radius: 25px !important; background-color: #f0f0f0 !important; border: none !important;
  }
  #header #search_block_top .searchtoggle .select-wrapper,
  #header #search_block_top .searchtoggle #cp_url_ajax_search { display: none !important; }
  #header #search_block_top .searchtoggle .btn.btn-primary {
    position: static !important; float: none !important; transform: none !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    flex: 0 0 auto !important; order: 1; width: 34px !important; height: 34px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important;
    background: transparent !important; border: none !important; box-shadow: none !important;
  }
  #header #search_block_top .searchtoggle .btn.btn-primary .submit-text { display: none !important; }
  #header #search_block_top .searchtoggle .btn.btn-primary::before {
    content: "\E8B6" !important; font-family: "Material Icons" !important; font-size: 22px !important; line-height: 1 !important; color: #333 !important;
  }
  #header #search_block_top .searchtoggle .bio-search-close {
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    order: 2; flex: 0 0 auto; width: 30px; height: 30px; cursor: pointer; color: #000;
  }
  #header #search_block_top .searchtoggle .bio-search-close .material-icons {
    font-family: "Material Icons" !important; font-size: 24px !important; line-height: 1 !important; color: #000 !important;
  }
}
/* ===== END ===== */

/* ===== [Figma 440-5022] QUICK VIEW (Zobacz produkt) — modal desktop START ===== */
.bio-quickview .modal-dialog { max-width: 900px; width: 94%; }
.bio-quickview .modal-content { border: 0; border-radius: 0; overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.35); }
/* pomarańczowy nagłówek */
.bio-quickview .bio-qv-header { background: #FF7B00 !important; border: 0 !important; padding: 15px 24px !important; display: flex; align-items: center; justify-content: center; position: relative; }
.bio-quickview .bio-qv-title { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 22px; color: #fff; text-align: center; letter-spacing: .3px; }
.bio-quickview .bio-qv-close { position: absolute !important; right: 18px !important; top: 0 !important; bottom: 0 !important; height: auto !important; width: 34px !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; float: none !important; opacity: 1 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #fff !important; text-shadow: none !important; font-size: 30px !important; line-height: 1 !important; cursor: pointer; }
.bio-quickview .bio-qv-close span { display: block; line-height: 1; margin-top: -3px; }
.bio-quickview .bio-qv-close span { color: #fff !important; }
/* body + siatka */
.bio-quickview .modal-body { padding: 28px 30px 30px !important; }
.bio-quickview .bio-qv-grid { display: grid; grid-template-columns: 42% 1fr; gap: 0; align-items: start; }
.bio-quickview .bio-qv-info { border-left: 1px solid #ECECEC; padding-left: 34px; }
.bio-quickview .bio-qv-media { position: relative; text-align: center; padding-right: 24px; }
.bio-quickview .bio-qv-img { max-width: 100%; height: auto; }
.bio-quickview .bio-qv-flag.discount { position: absolute; top: 6px; left: 6px; z-index: 2; background: #E53935; color: #fff; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 16px; line-height: 1; padding: 6px 15px; border-radius: 20px; }
.bio-quickview .bio-qv-wish { position: absolute; top: 6px; right: 30px; z-index: 2; }
/* nazwa + meta */
.bio-quickview .bio-qv-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 28px; line-height: 1.12; color: #111; margin: 0 0 8px; text-transform: none; }
.bio-quickview .bio-qv-meta { font-family: 'Barlow Condensed', sans-serif; font-size: 16px; color: #9a9a9a; padding-bottom: 14px; border-bottom: 1px solid #ECECEC; margin: 0 0 16px; }
.bio-quickview .bio-qv-meta .bio-qv-sep { margin: 0 12px; color: #ddd; }
.bio-quickview .bio-qv-desc { font-family: 'Barlow Condensed', sans-serif; font-size: 17px; line-height: 1.5; color: #333; margin: 0 0 18px; }
/* cena */
.bio-quickview .bio-qv-price { border-top: 1px solid #ECECEC; padding-top: 16px; margin-top: 4px; }
.bio-quickview .bio-qv-price .product-prices { margin: 0; }
.bio-quickview .bio-qv-price .current-price, .bio-quickview .bio-qv-price .price { display: inline; color: #FF7B00 !important; font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 30px !important; }
.bio-quickview .bio-qv-price .regular-price { color: #bdbdbd !important; text-decoration: line-through; font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 22px !important; margin-left: 10px; }
.bio-quickview .bio-qv-price .discount, .bio-quickview .bio-qv-price .tax-shipping-delivery-label { display: none !important; }
/* akcje: ilość + dostępność + koszyk */
.bio-quickview .bio-qv-actions { margin-top: 18px; }
.bio-quickview .product-add-to-cart .product-quantity { display: flex !important; flex-wrap: wrap; align-items: center; gap: 16px; margin: 0; }
.bio-quickview .product-add-to-cart .control-label { display: none !important; }
.bio-quickview .product-add-to-cart .product-double-quantity { order: 1; margin: 0; }
.bio-quickview .product-add-to-cart .qty { margin: 0; }
.bio-quickview .product-add-to-cart #quantity_wanted { width: 64px; height: 44px; text-align: center; border: 1px solid #E0E0E0; border-radius: 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 18px; }
.bio-quickview .product-add-to-cart #product-availability { order: 2; margin: 0; font-family: 'Barlow Condensed', sans-serif; font-size: 16px; color: #333; display: flex; align-items: center; gap: 6px; }
.bio-quickview .product-add-to-cart #product-availability .product-available { color: #1DB233; }
.bio-quickview .product-add-to-cart .product-minimal-quantity { order: 3; flex: 1 1 100%; margin: 4px 0 0; font-size: 13px; color: #888; }
.bio-quickview .product-add-to-cart .wish-comp { display: none !important; }
.bio-quickview .product-add-to-cart .add { order: 4; flex: 1 1 100%; margin: 16px 0 0; }
.bio-quickview .product-add-to-cart .add-to-cart { width: 100%; background: #FF7B00 !important; border: 0 !important; border-radius: 100px !important; color: #fff !important; font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 18px !important; text-transform: none !important; padding: 14px 20px !important; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 6px 16px rgba(255,123,0,.28); }
.bio-quickview .product-add-to-cart .add-to-cart:hover { background: #e56e00 !important; }
.bio-quickview .product-add-to-cart .add-to-cart .material-icons { font-size: 20px; }
/* box dostawy */
.bio-quickview .bio-qv-perks { border: 1px dashed #CFCFCF; border-radius: 14px; padding: 18px 22px; margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.bio-quickview .bio-qv-perk { display: flex; align-items: center; gap: 12px; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 17px; color: #333; }
.bio-quickview .bio-qv-perk i { color: #444; font-size: 24px; }
/* mobile: kolumny w pionie */
@media (max-width: 767px) {
  .bio-quickview .bio-qv-grid { grid-template-columns: 1fr; }
  .bio-quickview .bio-qv-info { border-left: 0; padding-left: 0; margin-top: 18px; }
  .bio-quickview .bio-qv-media { padding-right: 0; }
}
/* ===== END ===== */

/* ukryj ikonkę quick-view (⛶ mask quickview.svg) doklejaną przez motyw do przycisku "Zobacz produkt" */
.view-product-btn.quick-view::after,
.view-product-btn.quick-view::before { content: none !important; display: none !important; -webkit-mask: none !important; mask: none !important; }

/* ===== [Figma 440-5022] quick view — poprawki: kwadraty + szara ramka + stan magazynowy ===== */
.bio-quickview .bio-qv-actions { margin-top: 4px; }
.bio-quickview .bio-qv-buyrow { display: flex; align-items: center; gap: 22px; margin: 18px 0 16px; }
.bio-quickview .bio-qv-buyrow .product-quantity { margin: 0 !important; flex: 0 0 auto; display: block; }
.bio-quickview .bio-qv-buyrow .qty { margin: 0; }
/* pole ilości — KWADRATOWE (bez zaokrągleń) */
.bio-quickview #quantity_wanted { width: 50px !important; text-align: center; border-radius: 0 !important; font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 18px !important; color: #111 !important; box-shadow: none !important; }
/* stan magazynowy: "w magazynie: X sztuk" + pasek */
.bio-quickview .bio-qv-stock { flex: 1 1 auto; min-width: 0; }
.bio-quickview .bio-qv-stock-label { display: block; font-family: 'Barlow Condensed', sans-serif; font-size: 15px; color: #333; text-align: center; margin-bottom: 6px; }
.bio-quickview .bio-qv-stock-label b { color: #1DB233; }
.bio-quickview .bio-qv-stock.stock-mid .bio-qv-stock-label b { color: #FF9800; }
.bio-quickview .bio-qv-stock.stock-low .bio-qv-stock-label b { color: #E53935; }
.bio-quickview .bio-qv-stock-bar { display: block; height: 7px; border-radius: 7px; background: #E8E8E8; overflow: hidden; }
.bio-quickview .bio-qv-stock-bar > span { display: block; height: 100%; background: #1DB233; border-radius: 7px; }
.bio-quickview .bio-qv-stock.stock-mid .bio-qv-stock-bar > span { background: #FF9800; }
.bio-quickview .bio-qv-stock.stock-low .bio-qv-stock-bar > span { background: #E53935; }
/* Dodaj do koszyka — pigułka (zostaje zaokrąglona) */
.bio-quickview .bio-qv-actions .add-to-cart { width: 100%; background: #FF7B00 !important; border: 0 !important; border-radius: 100px !important; color: #fff !important; font-family: 'Barlow Condensed', sans-serif !important; font-weight: 700 !important; font-size: 18px !important; text-transform: none !important; padding: 14px 20px !important; display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-shadow: 0 6px 16px rgba(255,123,0,.28); }
.bio-quickview .bio-qv-actions .add-to-cart:hover { background: #e56e00 !important; }
.bio-quickview .bio-qv-actions .add-to-cart .material-icons { font-size: 20px; }
/* ramka dostawy — zaokrąglona + wszystko szare */
.bio-quickview .bio-qv-perks { border-radius: 14px !important; border-color: #BDBDBD !important; }
.bio-quickview .bio-qv-perk, .bio-quickview .bio-qv-perk i { color: #8f8f8f !important; }
/* ===== END ===== */