/*
 * ps_productcard – wspólny arkusz kart produktu (rodzina „Kompozytor sklepu”), projekt v2.
 * Bariera: każda reguła ma :not(#pcz) – specyficzność (1,x,0) wyższa niż reguły motywu (.klasa, #id .klasa),
 * a na starcie „all: revert” zeruje wszystko, co motyw mógłby wnieść. Do środka wchodzą tylko zmienne:
 * --pk-* (karta, okładka), --z-* (strefy), --ov-* (punkty na okładce), --e-* (element).
 * Projekt (views/css/designs/*.css) ustawia wyłącznie zmienne – wygląd elementów jest tutaj.
 */
.pcard:not(#pcz) {
  all: revert;
  --pk-k: 1;
  /* zmienne elementów i stref nie dziedziczą niczego spoza karty */
  --e-fs: initial; --e-fw: initial; --e-lh: initial; --e-ls: initial; --e-tt: initial; --e-fst: initial; --e-ta: initial; --e-c: initial;
  --e-bg: initial; --e-r: initial; --e-bd: initial; --e-sh: initial; --e-op: initial; --e-m: initial; --e-pd: initial; --e-w: initial; --e-as: initial;
  --e-ps: initial; --e-t: initial; --e-r2: initial; --e-b: initial; --e-l: initial; --e-tf: initial; --e-z: initial;
  --e-lines: initial; --e-hc: initial; --e-ofs: initial; --e-oc: initial; --e-sc: initial; --e-rot: initial; --e-rw: initial; --e-roff: initial;
  --e-inc: initial; --e-lowc: initial; --e-oosc: initial; --e-h: initial; --e-fc: initial; --e-tc: initial; --e-dbg: initial; --e-dc: initial;
  --e-hbg: initial; --e-lw: initial; --e-lst: initial; --e-lc: initial; --e-lwid: initial; --e-ics: initial; --e-icc: initial;
  --z-pd: initial; --z-gap: initial; --z-dir: initial; --z-ai: initial; --z-wrap: initial; --z-jc: initial; --z-bg: initial;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  container: pcard / inline-size;
  font-family: var(--pk-font, inherit);
  font-size: 14px;
  line-height: 1.35;
  color: var(--pk-text, #1f2937);
  text-align: var(--pk-align, left);
  background: var(--pk-bg, #fff);
  border: var(--pk-bw, 0) solid var(--pk-border, #e5e7eb);
  border-radius: var(--pk-radius, 10px);
  box-shadow: var(--pk-shadow, none);
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  -webkit-font-smoothing: antialiased;
}
/* bez SVG: „revert” kasowałby geometrię ikon (atrybuty d, r, cx są właściwościami CSS) */
.pcard:not(#pcz) *:not(svg, svg *), .pcard:not(#pcz) *::before, .pcard:not(#pcz) *::after {
  all: revert;
  box-sizing: border-box;
}
.pcard:not(#pcz):hover { box-shadow: var(--pk-shadow-h, none); transform: translateY(var(--pk-lift, 0)); border-color: var(--pk-border-h, var(--pk-border)); }
.pcard:not(#pcz):focus-within { box-shadow: var(--pk-shadow-h, none), 0 0 0 2px var(--pk-accent); }

/* ---------------------------------------------------------------- okładka */
.pcard:not(#pcz) .pc-media { position: relative; display: block; margin: 0; background: var(--pk-mbg, #fff); border-radius: var(--pk-mr, 0); overflow: hidden; flex: 0 0 auto; }
.pcard:not(#pcz) .pc-img { display: block; position: relative; aspect-ratio: var(--pk-ratio, 1/1); padding: var(--pk-mpad, 0); text-decoration: none; color: inherit; outline: none; }
.pcard:not(#pcz) .pc-img img { display: block; width: 100%; height: 100%; max-width: none; margin: 0; border: 0; object-fit: var(--pk-fit, contain); object-position: var(--pk-focus, 50% 50%); transition: transform .45s ease, opacity .3s ease; }
.pcard:not(#pcz) .pc-img .pc-img2 { position: absolute; inset: var(--pk-mpad, 0); width: calc(100% - 2 * var(--pk-mpad, 0px)); height: calc(100% - 2 * var(--pk-mpad, 0px)); opacity: 0; background: var(--pk-mbg, #fff); }
.pcard:not(#pcz):hover .pc-img img:first-child { transform: scale(var(--pk-zoom, 1)); }
.pcard:not(#pcz):hover .pc-img .pc-img2 { opacity: 1; }

/* punkty 3×3 na okładce: elementy w tym samym punkcie ustawiają się jeden pod drugim; przesunięcie – względem miejsca w punkcie */
.pcard:not(#pcz) .pc-ov { position: absolute; z-index: 2; display: flex; flex-direction: column; gap: var(--ov-gap, 6px); padding: var(--ov-in, 10px); pointer-events: none; max-width: 100%; }
.pcard:not(#pcz) .pc-ov > * { pointer-events: auto; }
.pcard:not(#pcz) .pc-ov[data-pos^="t"] { top: 0; }
.pcard:not(#pcz) .pc-ov[data-pos^="b"] { bottom: 0; }
.pcard:not(#pcz) .pc-ov[data-pos="l"], .pcard:not(#pcz) .pc-ov[data-pos="c"], .pcard:not(#pcz) .pc-ov[data-pos="r"] { top: 50%; transform: translateY(-50%); }
.pcard:not(#pcz) .pc-ov[data-pos$="l"], .pcard:not(#pcz) .pc-ov[data-pos="l"] { left: 0; align-items: flex-start; }
.pcard:not(#pcz) .pc-ov[data-pos$="r"], .pcard:not(#pcz) .pc-ov[data-pos="r"] { right: 0; align-items: flex-end; }
.pcard:not(#pcz) .pc-ov[data-pos="t"], .pcard:not(#pcz) .pc-ov[data-pos="b"], .pcard:not(#pcz) .pc-ov[data-pos="c"] { left: 50%; transform: translateX(-50%); align-items: center; }
.pcard:not(#pcz) .pc-ov[data-pos="c"] { transform: translate(-50%, -50%); }

/* wstęga w rogu */
.pcard:not(#pcz) .pc-ribbon { position: absolute; z-index: 3; top: var(--e-roff, 18px); width: var(--e-rw, 150px); padding: 5px 0; text-align: center; font-size: calc(var(--e-fs, 11px) * var(--pk-k)); font-weight: var(--e-fw, 800); letter-spacing: var(--e-ls, .06em); text-transform: var(--e-tt, uppercase); font-style: var(--e-fst, normal); background: var(--e-bg, var(--pk-sale)); color: var(--e-c, #fff); box-shadow: var(--e-sh, 0 2px 6px rgba(0,0,0,.18)); opacity: var(--e-op, 1); pointer-events: none; }
.pcard:not(#pcz) .pc-ribbon.is-tr { right: calc(var(--e-rw, 150px) * -0.28); transform: rotate(45deg); }
.pcard:not(#pcz) .pc-ribbon.is-tl { left: calc(var(--e-rw, 150px) * -0.28); transform: rotate(-45deg); }

/* ---------------------------------------------------------------- strefy */
.pcard:not(#pcz) .pc-body { position: relative; display: flex; flex-direction: var(--z-dir, column); flex-wrap: var(--z-wrap, wrap); align-items: var(--z-ai, stretch); justify-content: var(--z-jc, flex-start); align-content: flex-start; gap: var(--z-gap, var(--pk-gap, 6px)); padding: var(--z-pd, var(--pk-pad, 12px)); background: var(--z-bg, transparent); flex: 1 1 auto; min-width: 0; }
.pcard:not(#pcz) .pc-foot { position: relative; z-index: 2; display: flex; flex-direction: var(--z-dir, row); flex-wrap: var(--z-wrap, wrap); align-items: var(--z-ai, center); justify-content: var(--z-jc, var(--pk-justify, flex-start)); gap: var(--z-gap, 8px); padding: var(--z-pd, 0 var(--pk-pad, 12px) var(--pk-pad, 12px)); background: var(--z-bg, transparent); margin-top: auto; }
.pcard:not(#pcz) .pc-body > .pc-e { flex: 0 0 auto; }
.pcard:not(#pcz) .pc-body[style*="row"] > .pc-e, .pcard:not(#pcz) .pc-body > .pc-e--title { min-width: 0; }

/* ---------------------------------------------------------------- element (wspólne) */
.pcard:not(#pcz) .pc-e {
  display: block; min-width: 0;
  margin: var(--e-m, 0); padding: var(--e-pd, 0);
  width: var(--e-w, auto); align-self: var(--e-as, auto);
  font-size: calc(var(--e-fs, 13px) * var(--pk-k)); font-weight: var(--e-fw, 400); line-height: var(--e-lh, 1.35);
  letter-spacing: var(--e-ls, normal); text-transform: var(--e-tt, none); font-style: var(--e-fst, normal); text-align: var(--e-ta, inherit);
  color: var(--e-c, inherit); background: var(--e-bg, transparent); border: var(--e-bd, 0 solid transparent); border-radius: var(--e-r, 0);
  box-shadow: var(--e-sh, none); opacity: var(--e-op, 1);
  position: var(--e-ps, static); top: var(--e-t, auto); right: var(--e-r2, auto); bottom: var(--e-b, auto); left: var(--e-l, auto); transform: var(--e-tf, none); z-index: var(--e-z, auto);
}
.pcard:not(#pcz) > .pc-e { z-index: var(--e-z, 4); }
.pcard:not(#pcz) .pc-e a { color: inherit; text-decoration: none; }
.pcard:not(#pcz) .pc-e a:hover { color: var(--pk-accent); }
.pcard:not(#pcz) .pc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pcard:not(#pcz) .pc-pre { color: var(--pk-muted); }

/* ikony: biblioteka (wypełnienie), wbudowane (kontur), obraz */
.pcard:not(#pcz) .pc-ic { display: inline-block; width: var(--e-ics, 1.2em); height: var(--e-ics, 1.2em); flex: none; vertical-align: -.22em; color: var(--e-icc, currentColor); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pcard:not(#pcz) .pc-ic circle { fill: none; }
.pcard:not(#pcz) .pc-ic.is-fill { fill: currentColor; stroke: none; }
.pcard:not(#pcz) img.pc-ic { object-fit: contain; }
.pcard:not(#pcz) .pc-e > .pc-ic:first-child:not(:only-child) { margin-right: .35em; }
.pcard:not(#pcz) .pc-e > .pc-ic:last-child:not(:only-child) { margin-left: .35em; }

/* ---------------------------------------------------------------- typy */
.pcard:not(#pcz) .pc-e--title { font-size: calc(var(--e-fs, 15px) * var(--pk-k)); font-weight: var(--e-fw, 600); line-height: var(--e-lh, 1.3); color: var(--e-c, var(--pk-text)); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--e-lines, 2); line-clamp: var(--e-lines, 2); overflow: hidden; overflow-wrap: anywhere; }
.pcard:not(#pcz) .pc-e--title a { display: inline; }
.pcard:not(#pcz) .pc-e--title a:hover { color: var(--e-hc, var(--pk-accent)); }
.pcard:not(#pcz) .pc-e--title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* cała karta klikalna – jeden link w treści */
.pcard:not(#pcz) .pc-e--title a:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 2px; }
.pcard:not(#pcz) .pc-e--brand a { position: relative; z-index: 2; }

.pcard:not(#pcz) .pc-e--price { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: var(--pk-justify, flex-start); gap: 2px 10px; font-size: calc(var(--e-fs, 20px) * var(--pk-k)); font-weight: var(--e-fw, 700); line-height: var(--e-lh, 1.1); }
.pcard:not(#pcz) .pc-e--price.is-below { flex-direction: column; gap: 0; align-items: var(--pk-justify, flex-start); }
.pcard:not(#pcz) .pc-now { font-size: 1em; font-weight: inherit; color: var(--e-c, var(--pk-price)); white-space: nowrap; }
.pcard:not(#pcz) .has-disc .pc-now { color: var(--e-sc, var(--e-c, var(--pk-price))); }
.pcard:not(#pcz) .pc-old { font-size: calc(var(--e-ofs, 14px) * var(--pk-k)); font-weight: 400; color: var(--e-oc, var(--pk-muted)); text-decoration: line-through; white-space: nowrap; }
.pcard:not(#pcz) .pc-e--omnibus { font-size: calc(var(--e-fs, 11px) * var(--pk-k)); color: var(--e-c, var(--pk-muted)); line-height: var(--e-lh, 1.3); }
.pcard:not(#pcz) .pc-e--save { align-self: var(--e-as, var(--pk-justify, flex-start)); font-weight: var(--e-fw, 700); color: var(--e-c, var(--pk-sale)); }
.pcard:not(#pcz) .pc-e--brand, .pcard:not(#pcz) .pc-e--feature { color: var(--e-c, var(--pk-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard:not(#pcz) .pc-e--feature { color: var(--e-c, var(--pk-text)); }
.pcard:not(#pcz) .pc-e--delivery { color: var(--e-c, var(--pk-muted)); }
.pcard:not(#pcz) .pc-e--text { color: var(--e-c, var(--pk-text)); }
.pcard:not(#pcz) .pc-e--stock { display: inline-flex; align-items: center; gap: 6px; align-self: var(--e-as, var(--pk-justify, flex-start)); font-weight: var(--e-fw, 600); }
.pcard:not(#pcz) .pc-e--stock.has-dot::before { content: ""; width: .66em; height: .66em; border-radius: 50%; background: currentColor; flex: none; }
.pcard:not(#pcz) .pc-e--stock > .pc-ic { margin: 0; }
.pcard:not(#pcz) .pc-e--stock.is-in { color: var(--e-inc, #059669); }
.pcard:not(#pcz) .pc-e--stock.is-low { color: var(--e-lowc, #d97706); }
.pcard:not(#pcz) .pc-e--stock.is-oos { color: var(--e-oosc, var(--pk-muted)); }
.pcard:not(#pcz) .pc-e--sold { color: var(--e-c, #b45309); font-weight: var(--e-fw, 600); }
.pcard:not(#pcz) .pc-e--divider { height: 0; margin: var(--e-m, 2px 0); border: 0; border-top: var(--e-lw, 1px) var(--e-lst, solid) var(--e-lc, var(--pk-border)); width: var(--e-lwid, var(--e-w, auto)); }
.pcard:not(#pcz) .pc-e--spacer { height: var(--e-h, 8px); }

/* znaczki */
.pcard:not(#pcz) .pc-e--badge { display: inline-flex; align-items: center; justify-content: center; align-self: var(--e-as, var(--pk-justify, flex-start)); font-size: calc(var(--e-fs, 12px) * var(--pk-k)); font-weight: var(--e-fw, 800); line-height: var(--e-lh, 1); padding: var(--e-pd, .45em .7em); color: var(--e-c, #fff); background: var(--e-bg, var(--pk-accent)); border-radius: var(--e-r, 999px); white-space: nowrap; rotate: var(--e-rot, 0deg); }
.pcard:not(#pcz) .pc-ov .pc-e--badge { align-self: auto; }
.pcard:not(#pcz) .pc-e--badge.is-k-discount { background: var(--e-bg, var(--pk-sale)); }
.pcard:not(#pcz) .pc-e--badge.is-rect { border-radius: var(--e-r, 6px); }
.pcard:not(#pcz) .pc-e--badge.is-tag { border-radius: var(--e-r, 4px 999px 999px 4px); padding: var(--e-pd, .45em .9em .45em .7em); }
.pcard:not(#pcz) .pc-e--badge.is-circle { width: 3.6em; height: 3.6em; padding: 0; border-radius: var(--e-r, 50%); }
.pcard:not(#pcz) .pc-e--badge.is-plain { background: var(--e-bg, transparent); padding: var(--e-pd, 0); color: var(--e-c, var(--pk-sale)); border-radius: var(--e-r, 0); }

/* pasek okazji */
.pcard:not(#pcz) .pc-e--dealbar { display: flex; flex-direction: column; gap: 4px; font-size: calc(var(--e-fs, 12px) * var(--pk-k)); color: var(--e-c, var(--pk-muted)); }
.pcard:not(#pcz) .pc-bar { display: block; height: var(--e-h, 6px); background: var(--e-tc, var(--pk-border)); border-radius: 99px; overflow: hidden; }
.pcard:not(#pcz) .pc-bar i { display: block; height: 100%; background: var(--e-fc, var(--pk-sale)); border-radius: inherit; }

/* odliczanie */
.pcard:not(#pcz) .pc-e--countdown { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; align-self: var(--e-as, var(--pk-justify, flex-start)); font-size: calc(var(--e-fs, 12px) * var(--pk-k)); color: var(--e-c, var(--pk-sale)); font-weight: var(--e-fw, 600); }
.pcard:not(#pcz) .pc-e--countdown .pc-t { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--e-dc, inherit); }
.pcard:not(#pcz) .pc-e--countdown.is-pill { padding: var(--e-pd, 4px 10px); border-radius: var(--e-r, 999px); background: var(--e-bg, color-mix(in srgb, var(--pk-sale) 10%, transparent)); }
.pcard:not(#pcz) .pc-e--countdown.is-boxes .pc-t { display: inline-flex; gap: 4px; }
.pcard:not(#pcz) .pc-e--countdown.is-boxes .pc-t i { display: inline-flex; align-items: baseline; gap: 1px; font-style: normal; padding: 3px 6px; border-radius: 6px; background: var(--e-dbg, var(--pk-sale)); color: var(--e-dc, #fff); }
.pcard:not(#pcz) .pc-e--countdown.is-boxes .pc-t small { font-size: .7em; opacity: .8; }

/* przyciski */
.pcard:not(#pcz) .pc-cartf { display: contents; margin: 0; }
.pcard:not(#pcz) .pc-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 2.6em; padding: var(--e-pd, .55em 1.1em); font-family: inherit; font-size: calc(var(--e-fs, 14px) * var(--pk-k)); font-weight: var(--e-fw, 700); line-height: 1.1; color: var(--e-c, #fff); background: var(--e-bg, var(--pk-accent)); border: var(--e-bd, 2px solid var(--e-bg, var(--pk-accent))); border-radius: var(--e-r, var(--pk-btn-r, 8px)); cursor: pointer; text-decoration: none; white-space: nowrap; transition: filter .15s ease, background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; -webkit-appearance: none; appearance: none; }
.pcard:not(#pcz) .pc-btn.is-sm { min-height: 2.1em; padding: var(--e-pd, .35em .8em); }
.pcard:not(#pcz) .pc-btn.is-lg { min-height: 3.1em; padding: var(--e-pd, .75em 1.4em); }
.pcard:not(#pcz) .pc-btn:hover { filter: brightness(1.08); color: var(--e-hc, var(--e-c, #fff)); background: var(--e-hbg, var(--e-bg, var(--pk-accent))); }
.pcard:not(#pcz) .pc-btn:focus-visible { outline: 2px solid var(--pk-accent); outline-offset: 2px; }
.pcard:not(#pcz) .pc-btn.is-grow { flex: 1 1 auto; }
.pcard:not(#pcz) .pc-btn.is-outline { background: var(--e-bg, transparent); color: var(--e-c, var(--pk-accent)); border: var(--e-bd, 2px solid var(--pk-accent)); }
.pcard:not(#pcz) .pc-btn.is-outline:hover { background: var(--e-hbg, var(--pk-accent)); color: var(--e-hc, #fff); filter: none; }
.pcard:not(#pcz) .pc-btn.is-link { background: var(--e-bg, none); border-color: transparent; color: var(--e-c, var(--pk-accent)); padding: var(--e-pd, 0); min-height: 0; text-decoration: underline; text-underline-offset: 3px; }
.pcard:not(#pcz) .pc-btn.is-link:hover { background: var(--e-hbg, none); filter: none; }
.pcard:not(#pcz) .pc-btn.is-icon { width: 2.8em; height: 2.8em; min-height: 0; padding: 0; flex: 0 0 auto; }
.pcard:not(#pcz) .pc-btn.is-icon.is-sm { width: 2.2em; height: 2.2em; }
.pcard:not(#pcz) .pc-btn.is-icon.is-lg { width: 3.4em; height: 3.4em; }
.pcard:not(#pcz) .pc-ov .pc-btn.is-icon { box-shadow: var(--e-sh, 0 2px 8px rgba(17,24,39,.15)); }
.pcard:not(#pcz) .pc-btn .pc-ic { margin: 0; vertical-align: middle; }
.pcard:not(#pcz) .pc-btn.is-off { opacity: .45; cursor: not-allowed; filter: grayscale(1); }
.pcard:not(#pcz) .pc-btn.is-loading { opacity: .7; pointer-events: none; }

/* etykiety (Kompozytor sklepu › Etykiety): wygląd w zmiennych --l-* z arkusza projektów */
.pcard:not(#pcz) .pc-e--labels { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.pcard:not(#pcz) .pc-e--labels.is-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.pcard:not(#pcz) .pc-ov[data-pos$="r"] .pc-e--labels, .pcard:not(#pcz) .pc-ov[data-pos="r"] .pc-e--labels { align-items: flex-end; }
.pcard:not(#pcz) .pc-ov[data-pos="t"] .pc-e--labels, .pcard:not(#pcz) .pc-ov[data-pos="b"] .pc-e--labels, .pcard:not(#pcz) .pc-ov[data-pos="c"] .pc-e--labels { align-items: center; }
.pcard:not(#pcz) .pc-lbl { display: inline-flex; align-items: center; justify-content: center; gap: .35em; max-width: 100%; padding: var(--l-py, 5px) var(--l-px, 9px); font-family: inherit; font-size: calc(var(--l-fs, 12px) * var(--pk-k, 1) * var(--e-lk, 1)); font-weight: var(--l-fw, 700); line-height: 1.1; letter-spacing: var(--l-ls, normal); text-transform: var(--l-tt, none); color: var(--l-c, #fff); background: var(--l-bg, #5b5bd6); background-image: var(--l-bgi, none); border: var(--l-bd, 0); border-radius: var(--l-r, 999px); box-shadow: var(--l-sh, none); rotate: var(--l-rot, 0deg); white-space: nowrap; text-decoration: none; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 2; }
.pcard:not(#pcz) a.pc-lbl:hover { filter: brightness(1.08); }
.pcard:not(#pcz) .pc-lbl > span { overflow: hidden; text-overflow: ellipsis; }
.pcard:not(#pcz) .pc-lbl .pc-ic { width: 1.15em; height: 1.15em; margin: 0; color: currentColor; }
.pcard:not(#pcz) .pc-lbl.is-rect { border-radius: var(--l-r, 5px); }
.pcard:not(#pcz) .pc-lbl.is-tag { border-radius: var(--l-r, 4px 999px 999px 4px); padding-right: calc(var(--l-px, 9px) + .3em); }
.pcard:not(#pcz) .pc-lbl.is-circle { width: 3.8em; height: 3.8em; padding: 0 .3em; border-radius: var(--l-r, 50%); white-space: normal; text-align: center; line-height: 1; }
.pcard:not(#pcz) .pc-lbl.is-plain { background: none; padding: 0; color: var(--l-c, var(--pk-sale)); box-shadow: none; }
.pcard:not(#pcz) .pc-lbl.is-image { padding: 0; background: none; border: 0; box-shadow: none; border-radius: 0; }
.pcard:not(#pcz) .pc-lbl.is-image img { display: block; width: calc(var(--l-iw, 64px) * var(--pk-k, 1) * var(--e-lk, 1)); height: auto; max-width: 100%; }
.pcard:not(#pcz) .pc-lbl.is-ribbon { position: absolute; z-index: 3; width: 150px; max-width: none; padding: 5px 0; border-radius: 0; rotate: none; pointer-events: none; }
.pcard:not(#pcz) .pc-lbl.is-ribbon.is-tr { top: 18px; right: -42px; transform: rotate(45deg); }
.pcard:not(#pcz) .pc-lbl.is-ribbon.is-tl { top: 18px; left: -42px; transform: rotate(-45deg); }
.pcard:not(#pcz) .pc-lbl.is-ribbon.is-br { bottom: 18px; right: -42px; transform: rotate(-45deg); }
.pcard:not(#pcz) .pc-lbl.is-ribbon.is-bl { bottom: 18px; left: -42px; transform: rotate(45deg); }
.pcard:not(#pcz) .pc-lbl.is-ribbon.is-t, .pcard:not(#pcz) .pc-lbl.is-ribbon.is-c, .pcard:not(#pcz) .pc-lbl.is-ribbon.is-b { left: 0; right: 0; width: auto; padding: 5px 8px; }
.pcard:not(#pcz) .pc-lbl.is-ribbon.is-t { top: 0; }
.pcard:not(#pcz) .pc-lbl.is-ribbon.is-c { top: 50%; transform: translateY(-50%); }
.pcard:not(#pcz) .pc-lbl.is-ribbon.is-b { bottom: 0; }
.pcard:not(#pcz) .pc-lbl.is-ribbon.is-l, .pcard:not(#pcz) .pc-lbl.is-ribbon.is-r { top: 0; bottom: 0; width: auto; padding: 8px 5px; writing-mode: vertical-rl; }
.pcard:not(#pcz) .pc-lbl.is-ribbon.is-l { left: 0; transform: rotate(180deg); }
.pcard:not(#pcz) .pc-lbl.is-ribbon.is-r { right: 0; }
@media (max-width: 767px) { .pcard:not(#pcz) .pc-lbl.is-only-desktop { display: none; } }
@media (min-width: 768px) { .pcard:not(#pcz) .pc-lbl.is-only-mobile { display: none; } }

/* niedostępny – przygaszona okładka */
.pcard:not(#pcz).is-oos .pc-img img { opacity: .55; filter: grayscale(.4); }

/* ruch: tylko gdy użytkownik go nie wyłączył */
@media (prefers-reduced-motion: reduce) {
  .pcard:not(#pcz), .pcard:not(#pcz) * { transition: none !important; animation: none !important; }
  .pcard:not(#pcz):hover, .pcard:not(#pcz):hover .pc-img img { transform: none !important; }
}
@keyframes pcard-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pcard-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* bardzo wąski kafelek: stopka w kolumnie, przyciski na całą szerokość */
@container pcard (max-width: 170px) {
  .pcard:not(#pcz) .pc-foot { flex-direction: var(--z-dir, column); align-items: var(--z-ai, stretch); }
  .pcard:not(#pcz) .pc-foot .pc-btn:not(.is-icon) { width: 100%; }
}

/* listy motywu: karta wypełnia komórkę siatki / slajdu */
.product_item > .pcard:not(#pcz), .owl-item .item > .pcard:not(#pcz), li.item > .pcard:not(#pcz) { height: 100%; }

/* Kompozytor: kolumna dopasowana do wzorca (data-pc-sq 1–3, --pc-fit-h) – karta oddaje miejsce jak dawne kafelki.
   Najniższa cena z 30 dni zostaje zawsze (wymóg prawa przy obniżce). */
[data-pc-sq="1"] .pcard:not(#pcz) .pc-body, [data-pc-sq="2"] .pcard:not(#pcz) .pc-body, [data-pc-sq="3"] .pcard:not(#pcz) .pc-body { gap: 3px; padding: 8px; }
[data-pc-sq="1"] .pcard:not(#pcz) :is(.pc-e--divider, .pc-e--spacer, .pc-e--text, .pc-e--sold, .pc-e--delivery),
[data-pc-sq="2"] .pcard:not(#pcz) :is(.pc-e--divider, .pc-e--spacer, .pc-e--text, .pc-e--sold, .pc-e--delivery, .pc-e--brand, .pc-e--feature, .pc-e--save, .pc-e--dealbar),
[data-pc-sq="3"] .pcard:not(#pcz) :is(.pc-e--divider, .pc-e--spacer, .pc-e--text, .pc-e--sold, .pc-e--delivery, .pc-e--brand, .pc-e--feature, .pc-e--save, .pc-e--dealbar, .pc-e--stock) { display: none; }
[data-pc-sq="2"] .pcard:not(#pcz) .pc-img { aspect-ratio: auto; height: calc(var(--pc-fit-h, 600px) * .38); }
[data-pc-sq="3"] .pcard:not(#pcz) .pc-img { aspect-ratio: auto; }
[data-pc-sq="2"] .pcard:not(#pcz) .pc-e--title { -webkit-line-clamp: 2; line-clamp: 2; }
[data-pc-sq="3"] .pcard:not(#pcz) .pc-e--title { -webkit-line-clamp: 1; line-clamp: 1; }
[data-pc-sq="3"] .pcard:not(#pcz) .pc-foot { padding-bottom: 8px; }
[data-pc-sq="2"] .pcard:not(#pcz) > * { --pk-k: .9; }
[data-pc-sq="3"] .pcard:not(#pcz) > * { --pk-k: .82; }
[data-pc-sq="2"] .pcard:not(#pcz) .pc-e--omnibus, [data-pc-sq="3"] .pcard:not(#pcz) .pc-e--omnibus { line-height: 1.15; }
[data-pc-sq="3"] .pcard:not(#pcz) .pc-e--price { flex-wrap: nowrap; gap: 6px; }
[data-pc-sq="3"] .pcard:not(#pcz) .pc-img { height: calc(var(--pc-fit-h, 600px) * .24); }

/* ---- efekty po najechaniu (przyciski: koszyk, zobacz, podgląd, lista życzeń) */
.pcard:not(#pcz) .pc-btn .pc-ic { transition: transform .2s ease; }
.pcard:not(#pcz) .pc-btn:active:not(.is-off) { transform: scale(.95); }
.pcard:not(#pcz) .pc-btn.is-fx-none:hover { filter: none; }
.pcard:not(#pcz) .pc-btn.is-fx-lift:hover, .pcard:not(#pcz) .pc-btn.is-fx-auto.is-full:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(17,24,39,.2); }
.pcard:not(#pcz) .pc-btn.is-fx-grow:hover { transform: scale(1.08); }
.pcard:not(#pcz) .pc-btn.is-fx-fill:hover, .pcard:not(#pcz) .pc-btn.is-fx-auto.is-icon:hover, .pcard:not(#pcz) .pc-btn.is-fx-auto.is-outline:hover { background: var(--e-hbg, var(--pk-accent)); border-color: var(--e-hbg, var(--pk-accent)); color: var(--e-hc, #fff); filter: none; }
.pcard:not(#pcz) .pc-btn.is-fx-fill:hover .pc-ic, .pcard:not(#pcz) .pc-btn.is-fx-auto.is-icon:hover .pc-ic, .pcard:not(#pcz) .pc-btn.is-fx-auto.is-outline:hover .pc-ic { color: currentColor; }
.pcard:not(#pcz) .pc-btn.is-fx-auto.is-icon:hover { transform: translateY(-2px); }
.pcard:not(#pcz) .pc-btn.is-fx-auto.is-icon:hover .pc-ic { transform: scale(1.12); }
.pcard:not(#pcz) .pc-btn.is-fx-shine { overflow: hidden; }
.pcard:not(#pcz) .pc-btn.is-fx-shine:not([data-pin]) { position: relative; }
.pcard:not(#pcz) .pc-btn.is-fx-shine::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); pointer-events: none; opacity: 0; }
.pcard:not(#pcz) .pc-btn.is-fx-shine:hover::after { opacity: 1; animation: pc-shine .7s ease forwards; }
.pcard:not(#pcz) .pc-btn.is-fx-pulse:hover { animation: pc-pulse 1.1s ease-out infinite; }
.pcard:not(#pcz) .pc-btn.is-fx-wiggle:hover .pc-ic { animation: pc-wiggle .5s ease; }
.pcard:not(#pcz) .pc-btn.is-fx-slide:hover .pc-ic { transform: translateX(4px); }
.pcard:not(#pcz) .pc-btn.is-fx-slide.is-icon:hover .pc-ic { transform: translateY(-3px); }
@keyframes pc-shine { to { left: 120%; } }
@keyframes pc-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--e-hbg, var(--pk-accent)) 55%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } }
@keyframes pc-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } 75% { transform: rotate(-6deg); } }
/* lista życzeń */
.pcard:not(#pcz) .pc-e--wish.added .pc-ic { fill: currentColor; }
.pcard:not(#pcz) .pc-e--wish.is-icon.added { color: var(--e-hc, var(--pk-sale, #e02424)); }
.pcard:not(#pcz) .pc-e--wish.active, .pcard:not(#pcz) .pc-e--compare.active { opacity: .7; pointer-events: none; }
.pcard:not(#pcz) .pc-e--compare.added { background: var(--e-hbg, var(--pk-accent)); border-color: var(--e-hbg, var(--pk-accent)); color: var(--e-hc, #fff); }
.pcard:not(#pcz) .pc-e--compare .st-compare-bt-content { display: inline-flex; align-items: center; gap: .4em; }
.pcard:not(#pcz) .pc-e--wish .st-wishlist-bt-content { display: inline-flex; align-items: center; gap: .4em; }
@media (prefers-reduced-motion: reduce) {
  .pcard:not(#pcz) .pc-btn, .pcard:not(#pcz) .pc-btn .pc-ic { transition: none; animation: none !important; }
  .pcard:not(#pcz) .pc-btn:hover, .pcard:not(#pcz) .pc-btn:hover .pc-ic { transform: none !important; }
}