/* Barefoot World – badge produktowe */

.bfwb{
	position:absolute;
	z-index:5;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:6px;
	pointer-events:none;
	top:12px;
}

/* Kafel w katalogu musi mieć punkt odniesienia dla pozycjonowania.
   Motywy zwykle go mają, ale nie zawsze – dlatego ustawiamy go sami. */
.bfwb-wrap{position:relative;display:block}
.woocommerce ul.products li.product,
.woocommerce div.product div.images,
.t-entry-visual-cont,
.ptc-product-image{position:relative}

.bfwb--left{left:12px}
.bfwb--right{right:12px;align-items:flex-end}

.bfwb__it{
	display:inline-block;
	padding:6px 12px;
	border-radius:6px;
	font-size:12px;
	font-weight:700;
	line-height:1.2;
	letter-spacing:.02em;
	white-space:nowrap;
	box-shadow:0 2px 8px rgba(0,0,0,.14);
}

.bfwb__it--new{background:var(--bfwb-new-bg,#1f7a5a);color:var(--bfwb-new-fg,#fff)}
.bfwb__it--best{background:var(--bfwb-best-bg,#1a1a1a);color:var(--bfwb-best-fg,#fff)}

/* Produkt w promocji: badge promocji siedzi w tym samym rogu, więc schodzimy
   niżej albo przenosimy się na drugą stronę. */
.bfwb--sale-stack{top:52px}
.bfwb--sale-corner.bfwb--left{left:auto;right:12px;align-items:flex-end}
.bfwb--sale-corner.bfwb--right{right:auto;left:12px;align-items:flex-start}

/* Karta produktu – zdjęcie jest większe, więc odstęp też */
.bfwb--single{top:18px}
.bfwb--single.bfwb--left{left:18px}
.bfwb--single.bfwb--right{right:18px}
.bfwb--single.bfwb--sale-stack{top:62px}
.bfwb--single .bfwb__it{font-size:13px;padding:7px 14px}

@media (max-width:600px){
	.bfwb{top:8px;gap:5px}
	.bfwb--left{left:8px}
	.bfwb--right{right:8px}
	.bfwb__it{font-size:11px;padding:5px 10px}
	.bfwb--sale-stack{top:42px}
}

/* karuzele produktowe – kafel jest węższy, więc badge nieco mniejszy */
.ptc-product-item .bfwb{top:8px}
.ptc-product-item .bfwb--left{left:8px}
.ptc-product-item .bfwb--right{right:8px}
.ptc-product-item .bfwb__it{font-size:11px;padding:5px 10px}
.ptc-product-item .bfwb--sale-stack{top:44px}

/* ---------------------------------------------------------------------------
   Badge graficzne (własne PNG przypisane do kategorii)
   Szerokość podawana jest w procentach szerokości zdjęcia, więc badge trzyma
   tę samą proporcję niezależnie od liczby kolumn i wielkości ekranu.
   Kontener rozciąga się na całą szerokość zdjęcia – dzięki temu procent
   liczy się od zdjęcia, a nie od czegoś węższego. Odstęp od krawędzi robi
   margines samej grafiki, bo margines nie zmienia podstawy procentu.
   --------------------------------------------------------------------------- */

.bfwb-img{
	position:absolute;
	left:0;
	right:0;
	width:auto;
	max-width:none;
	z-index:6;
	display:flex;
	flex-direction:column;
	gap:6px;
	pointer-events:none;
}

.bfwb-img--tl,.bfwb-img--tr{top:12px}
.bfwb-img--bl,.bfwb-img--br{bottom:12px}
.bfwb-img--tl,.bfwb-img--bl{align-items:flex-start}
.bfwb-img--tr,.bfwb-img--br{align-items:flex-end}

/* Uncode ustawia szerokość obrazkom w kaflu regułami w rodzaju
   `.t-entry-visual img{width:100%}`, które biją zwykłą klasę. Dlatego
   selektor jest celowo mocniejszy (element + klasa) i z !important –
   inaczej badge rozjeżdża się na całą szerokość zdjęcia. */
img.bfwb-img__it,
.bfwb-img img.bfwb-img__it{
	display:block !important;
	width:var(--bfwb-iw,30%) !important;
	min-width:0 !important;
	max-width:none !important;
	height:auto !important;
	max-height:none !important;
	margin:0 12px !important;
	padding:0 !important;
	position:static !important;
	inset:auto !important;
	transform:none !important;
	object-fit:contain !important;
	flex:0 0 auto;
	border:0;
	border-radius:0;
	box-shadow:none;
	background:none;
}

/* Karta produktu – zdjęcie jest większe, więc odstępy od krawędzi też */
.bfwb-img--single.bfwb-img--tl,.bfwb-img--single.bfwb-img--tr{top:18px}
.bfwb-img--single.bfwb-img--bl,.bfwb-img--single.bfwb-img--br{bottom:18px}
.bfwb-img--single img.bfwb-img__it{margin:0 18px !important}

/* Na telefonie procent skaluje się sam – zmniejszamy tylko odstęp od krawędzi */
@media (max-width:600px){
	.bfwb-img{gap:4px}
	.bfwb-img--tl,.bfwb-img--tr{top:8px}
	.bfwb-img--bl,.bfwb-img--br{bottom:8px}
	.bfwb-img img.bfwb-img__it,
	.bfwb-img--single img.bfwb-img__it{margin:0 8px !important}
}

/* karuzele produktowe */
.ptc-product-item .bfwb-img--tl,.ptc-product-item .bfwb-img--tr{top:8px}
.ptc-product-item .bfwb-img--bl,.ptc-product-item .bfwb-img--br{bottom:8px}
.ptc-product-item .bfwb-img img.bfwb-img__it{margin:0 8px !important}