/* Karma na Wagę – oferta BARF (kategoria "barf" i podkategorie, karty produktów BARF).
   Tokeny motywu: --knw-ink, --knw-paper, --knw-bg, --knw-line, --knw-muted, --knw-font, --knw-mono. */

.knwb-page, .knwb-product {
	--b-ink: var(--knw-ink, #141414);
	--b-paper: var(--knw-paper, #fff);
	--b-bg: var(--knw-bg, #f6f6f3);
	--b-line: var(--knw-line, #d9d9d4);
	--b-muted: var(--knw-muted, #5e5e5a);
	--b-soft: #ecece7;
	--b-on-dark: #e6e6e1;
	--b-mono: var(--knw-mono, "IBM Plex Mono", monospace);
}

/* ---------- Kategoria BARF: ten sam układ co pozostałe kategorie ----------
   Kolejność jak w „Karma sucha”: okruszki, nagłówek (tytuł, opis, obraz po prawej), pasek kategorii,
   kafelki linii, filtr, siatka. Kontener, odstępy, filtr i karty pochodzą z motywu. */
.knwb-page .woocommerce-products-header { display: flex; flex-direction: column; }
.knwb-page .woocommerce-products-header > * { order: 5; }
.knwb-page .woocommerce-products-header > .knwb-preview { order: 0; }
.knwb-page .woocommerce-products-header > .knwb-hero,
.knwb-page .woocommerce-products-header > .knwb-subhero { order: 1; }
.knwb-page .woocommerce-products-header > .knw-catbar { order: 2; }
.knwb-page .woocommerce-products-header > .knwb-lines2 { order: 3; }
.knwb-page .woocommerce-products-header > .knw-filter { order: 4; }
.knwb-page .knw-cat-hero,
.knwb-page .knwb-shead,
.knwb-page .knwb-ftoggle,
.knwb-page .woocommerce-products-header > .term-description,
.knwb-page .woocommerce-products-header > .page-title { display: none !important; }

/* Nagłówek: tekst po lewej, obraz w miejscu ilustracji kategorii */
.knwb-hero, .knwb-subhero {
	display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 32%, 340px);
	column-gap: var(--knw-s3, 32px); align-items: start;
	margin: 0 0 12px; padding: 0; border: 0; background: transparent;
}
.knwb-hero__text, .knwb-subhero__text { grid-column: 1; grid-row: 1; display: block; padding: 0; }
.knwb-hero__media, .knwb-subhero__media {
	grid-column: 2; grid-row: 1; position: relative; margin: 0; overflow: hidden;
	aspect-ratio: 3 / 2; border: 1px solid var(--b-ink); background: var(--b-bg);
}
.knwb-hero__media img, .knwb-subhero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 55%; margin: 0; }
.knwb-hero__media .knwb-imgwrap, .knwb-subhero__media .knwb-imgwrap { position: absolute; inset: 0; }
.knwb-hero__media--empty { display: none; }
.knwb-hero .knwb-ph--wide .knwb-ph__name, .knwb-subhero .knwb-ph--wide .knwb-ph__name { font-size: clamp(2.4rem, 5vw, 4.4rem); }

.knwb-hero__h, .knwb-subhero__h {
	font-size: clamp(2.2rem, 4.6vw, 4rem) !important; line-height: 1.08 !important; letter-spacing: -0.03em !important;
	margin: 0 0 var(--knw-s2, 16px) !important; max-width: none;
}
.knwb-hero__h span { display: block; margin-top: .3em; font-size: .42em; line-height: 1.15; letter-spacing: -0.02em; }
.knwb-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.knwb-hero__p, .knwb-subhero__p { margin: 0; max-width: 584px; font-size: inherit; line-height: 1.6; color: var(--knw-ink-2, #2a2a28); }
.knwb-hero__cta { display: none; }
.knwb-subhero__back { display: inline-block; margin: 0 0 10px; font-family: var(--b-mono); font-size: .78rem; text-decoration: none !important; }
.knwb-subhero__back::before { content: "← "; }
.knwb-subhero__other { display: inline-block; margin-top: 12px; font-size: .92rem; font-weight: 600; text-decoration: underline !important; text-underline-offset: 3px; }

/* Kafelki linii w stylu kafelków kategorii ze strony głównej */
.knwb-lines2 {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0;
	margin: 0 0 var(--knw-s2, 16px); border-top: 1px solid var(--b-ink); border-left: 1px solid var(--b-ink);
}
.knwb-line2 {
	position: relative; display: grid; grid-template-columns: 1fr 96px; grid-template-rows: auto 1fr auto; gap: 6px 16px;
	min-height: 170px; padding: 24px 22px 20px; background: var(--b-paper);
	border-right: 1px solid var(--b-ink); border-bottom: 1px solid var(--b-ink);
	color: var(--b-ink) !important; text-decoration: none !important; transition: background .15s, color .15s;
}
.knwb-line2__media { display: none; }
.knwb-line2__body { display: contents; }
.knwb-line2__t { grid-column: 1; grid-row: 1; font-size: clamp(1.35rem, 2vw, 1.75rem) !important; line-height: 1.05 !important; letter-spacing: -0.02em !important; margin: 0 !important; }
.knwb-line2__d { grid-column: 1; grid-row: 2; font-size: .9rem; line-height: 1.45; color: var(--b-muted); }
.knwb-line2__go { grid-column: 1; grid-row: 3; font-family: var(--b-mono); font-size: .75rem; color: var(--b-muted); text-decoration: none; }
.knwb-line2::after {
	content: ""; grid-column: 2; grid-row: 1 / span 3; align-self: end; width: 96px; aspect-ratio: 3 / 4;
	background-color: currentColor;
	-webkit-mask: url(/wp-content/themes/karma-na-wage-theme/assets/img/wilk-profil.svg) center bottom / contain no-repeat;
	mask: url(/wp-content/themes/karma-na-wage-theme/assets/img/wilk-profil.svg) center bottom / contain no-repeat;
}
.knwb-line2[href*="barf-veggies"]::after {
	-webkit-mask-image: url(/wp-content/themes/karma-na-wage-theme/assets/img/pomeranian-glowa.svg);
	mask-image: url(/wp-content/themes/karma-na-wage-theme/assets/img/pomeranian-glowa.svg);
}
.knwb-line2:hover { background: var(--b-ink); color: var(--b-paper) !important; }
.knwb-line2:hover .knwb-line2__d, .knwb-line2:hover .knwb-line2__go { color: var(--b-paper); }

/* Uwaga: zdjęcia BARF PURE i BARF & VEGGIES są w nagłówkach podkategorii. */

/* Filtr: standardowy wygląd z motywu (bez nadpisań). */
/* ---------- Placeholdery zdjęć (etykieta składu) ---------- */
.knwb-ph {
	position: relative; display: flex; flex-direction: column; justify-content: space-between;
	width: 100%; height: 100%; min-height: 100%; aspect-ratio: 1 / 1; padding: 8% 8% 9%;
	background: var(--b-ink); color: var(--b-on-dark); overflow: hidden; margin: 0 0 16px;
}
.knwb-ph--veg { background: var(--b-soft); color: var(--b-ink); }
.knwb-ph__line { font-family: var(--b-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.knwb-ph__name { font-family: var(--knw-font, sans-serif); font-weight: 800; font-size: clamp(1.4rem, 2.6vw, 2.3rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 11ch; margin-top: auto; padding-bottom: 7%; }
.knwb-ph__bar { display: flex; gap: 3px; height: 14px; }
.knwb-ph__bar i { display: block; min-width: 4px; background: currentColor; }
.knwb-ph__bar i:nth-child(2) { opacity: .62; }
.knwb-ph__bar i:nth-child(3) { opacity: .4; }
.knwb-ph__bar i:nth-child(n+4) { opacity: .25; }
.knwb-ph__bar i.is-veg { opacity: 1; background: repeating-linear-gradient(135deg, currentColor 0 2px, transparent 2px 6px); }
.knwb-ph--wide { aspect-ratio: auto; position: absolute; inset: 0; margin: 0; padding: 6%; }
.knwb-ph--wide .knwb-ph__name { font-size: clamp(3rem, 9vw, 8.5rem); max-width: none; line-height: .9; letter-spacing: -0.05em; padding-bottom: 5%; }
.knwb-line2 .knwb-ph__name { font-size: clamp(2.6rem, 6.2vw, 6rem); }
.knwb-ph--hero .knwb-ph__name { font-size: clamp(5rem, 15vw, 15rem); margin-bottom: -0.12em; padding-bottom: 0; }
.knwb-ph--single { margin: 0; }
.knwb-ph--single .knwb-ph__name { font-size: clamp(2.2rem, 4.4vw, 4rem); }

.knwb-imgwrap { position: relative; display: block; }
.knwb-hero__media .knwb-imgwrap,
.knwb-subhero__media .knwb-imgwrap,
.knwb-line2__media .knwb-imgwrap { position: absolute; inset: 0; }
.knwb-line2__media .knwb-imgwrap img { position: absolute; inset: 0; }
.knwb-viz {
	position: absolute; left: 10px; bottom: 10px; z-index: 2;
	padding: 3px 8px; background: rgba(20, 20, 20, .78); color: #fff;
	font-family: var(--b-mono); font-size: .64rem; letter-spacing: .08em; text-transform: uppercase; pointer-events: none;
}

/* ---------- Karty produktów BARF: standardowa karta motywu + zdjęcie ---------- */
body.knwb-page ul.products li.product .knwb-imgwrap { display: block; margin: 0 0 16px; }
body.knwb-page ul.products li.product img { object-fit: cover; }
body.knwb-page ul.products li.product .knwb-imgwrap img { margin: 0 !important; }
body.knwb-page ul.products li.product .knwb-ph__name { font-size: clamp(1.3rem, 2vw, 1.9rem); }
.knwb-card__desc { margin: 0 0 10px; font-size: .9rem; line-height: 1.45; color: var(--b-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.knwb-card__ing { margin: 0 0 12px; padding: 8px 0 0; border-top: 1px solid var(--b-line); font-size: .82rem; line-height: 1.4; }
.knwb-card__ing b { display: block; font-family: var(--b-mono); font-weight: 500; font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--b-muted); margin-bottom: 3px; }
.knwb-card__meta { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 12px !important; padding: 0; }
.knwb-card__meta li { margin: 0; padding: 3px 8px; border: 1px solid var(--b-line); font-family: var(--b-mono); font-size: .72rem; line-height: 1.4; }
.knwb-card__meta li.is-frozen { border-color: var(--b-ink); }
.knwb-soon { font-family: var(--b-mono); font-size: .9rem; color: var(--b-muted); }
body.knwb-page ul.products li.product .knw-loop-weights { display: none; }

/* ---------- Podgląd administratora ---------- */
.knwb-preview { margin: 0 0 14px; padding: 10px 14px; border: 1px dashed var(--b-ink); font-family: var(--b-mono); font-size: .78rem; background: var(--b-paper); }
.knwb-preview a { margin-left: 8px; }

/* ---------- Karta produktu BARF ---------- */
.knwb-product .woocommerce-breadcrumb { font-size: .82rem; }
.knwb-product .woocommerce-product-gallery .knwb-ph--single { aspect-ratio: 1 / 1; }
.knwb-facts { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0 0 18px !important; padding: 0; }
.knwb-facts li { margin: 0; padding: 5px 10px; border: 1px solid var(--b-ink); font-family: var(--b-mono); font-size: .76rem; line-height: 1.35; background: var(--b-paper); }
.knwb-facts li.is-strong { background: var(--b-ink); color: var(--b-paper); }
.knwb-product .woocommerce-product-details__short-description { font-size: 1.08rem; line-height: 1.6; max-width: 56ch; margin-bottom: 22px; }
.knwb-product .woocommerce-product-details__short-description p:last-child { font-size: .92rem; color: var(--b-muted); }
.knwb-sizes { margin: 0 0 24px; }
.knwb-sizes__h { font-family: var(--b-mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--b-muted); margin: 0 0 8px; }
.knwb-sizes__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0 !important; padding: 0; border-left: 1px solid var(--b-ink); }
.knwb-sizes__list li { margin: 0; padding: 14px 10px; border: 1px solid var(--b-ink); border-left: 0; text-align: center; font-family: var(--b-mono); font-size: 1rem; background: var(--b-paper); }
.knwb-store { margin: 24px 0 0; padding: 18px 20px; background: var(--b-soft); }
.knwb-store__h { font-size: 1.05rem !important; margin: 0 0 8px !important; }
.knwb-store ul { margin: 0 0 10px 1.1em !important; padding: 0; }
.knwb-store li { margin: 0 0 4px; font-size: .94rem; line-height: 1.45; }
.knwb-store a { font-size: .88rem; text-underline-offset: 3px; }
.knwb-ship { margin: -8px 0 18px; font-size: .86rem; color: var(--b-muted); }
.knwb-product .woocommerce-Tabs-panel--description { max-width: 72ch; }
.knwb-product .woocommerce-Tabs-panel--description h2 { font-size: 1.35rem !important; margin: 1.8em 0 .5em !important; }
.knwb-product .woocommerce-Tabs-panel--description h2:first-child { font-size: 1.7rem !important; margin-top: 0 !important; }
.knwb-product .woocommerce-Tabs-panel--description ul { margin: 0 0 1em 1.2em; }
.knwb-product .woocommerce-Tabs-panel--description li { margin-bottom: .35em; }
@media (min-width: 922px) {
	.knwb-product div.product .woocommerce-product-gallery { position: sticky; top: 24px; }
}

/* ---------- Responsywność ---------- */
@media (max-width: 921px) {
	.knwb-hero, .knwb-subhero { grid-template-columns: 1fr; row-gap: 16px; }
	.knwb-hero__media, .knwb-subhero__media { grid-column: 1; grid-row: 2; aspect-ratio: 16 / 9; }
}
@media (max-width: 680px) {
	.knwb-lines2 { grid-template-columns: 1fr; }
	.knwb-line2 { min-height: 150px; grid-template-columns: 1fr 72px; }
	.knwb-line2::after { width: 72px; }
}
@media (prefers-reduced-motion: reduce) {
	.knwb-line2 { transition: none; }
}