/* ==========================================================================
   Perro Karma – Własny 6-pak (mobile-first, BEM: .pk6-*)
   ========================================================================== */

:root {
	--pk6-brown: #ab5f2e;
	--pk6-brown-dark: #8f4c22;
	--pk6-cream: #f9f2ea;
	--pk6-cream-2: #f3e8dc;
	--pk6-line: #ebdfd2;
	--pk6-ink: #212121;
	--pk6-text: #545454;
	--pk6-muted: #8a8079;
	--pk6-green: #258086;
	--pk6-green-bg: #e8f3ef;
	--pk6-green-ink: #23704a;
	--pk6-red: #b3261e;
	--pk6-radius: 16px;
	--pk6-shadow: 0 10px 30px rgba(49, 43, 43, .12);
	--pk6-head: 'League Spartan', sans-serif;
	--pk6-font: 'Poppins', sans-serif;
}

.pk6-builder [hidden],
.pk6-modal[hidden],
.pk6-modal [hidden],
.pk6-panel[hidden],
.pk6-hidden,
.pk6-aside__backdrop[hidden] {
	display: none !important;
}

.pk6-lock,
.pk6-lock body { overflow: hidden; }

/* Menu mobilne motywu wystaje poza ekran – clip nie psuje position: sticky. */
html:has(body.pk6-builder-page),
body.pk6-builder-page { overflow-x: clip; }

/* --- Przyciski ----------------------------------------------------------- */

.pk6-btn,
.pk6-chip,
.pk6-slot,
.pk6-link,
.pk6-tabs__tab,
.pk6-stepper__btn,
.pk6-slot__remove,
.pk6-modal__close,
.pk6-aside__bar {
	-webkit-appearance: none;
	appearance: none;
	margin: 0;
	font-family: var(--pk6-font);
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.pk6-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 0 22px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	transition: background-color .2s, border-color .2s, color .2s, transform .1s, opacity .2s;
}
.pk6-btn:active:not(:disabled) { transform: scale(.98); }
.pk6-btn:focus-visible,
.pk6-chip:focus-visible,
.pk6-slot:focus-visible,
.pk6-tabs__tab:focus-visible,
.pk6-stepper__btn:focus-visible,
.pk6-link:focus-visible { outline: 3px solid rgba(171, 95, 46, .35); outline-offset: 2px; }

.pk6-btn--primary { background: var(--pk6-brown); color: #fff; width: 100%; min-height: 54px; font-size: 16px; }
.pk6-btn--primary:hover:not(:disabled) { background: var(--pk6-brown-dark); }
.pk6-btn--primary:disabled { background: #cdb7a6; cursor: not-allowed; }
.pk6-btn--primary.is-loading { opacity: .7; cursor: progress; }
.pk6-btn--primary.is-ready { animation: pk6-pulse 1.8s ease-out 1; }

.pk6-btn--outline { background: #fff; border-color: var(--pk6-brown); color: var(--pk6-brown); }
.pk6-btn--outline:hover { background: var(--pk6-brown); color: #fff; }

.pk6-btn--add { width: 100%; min-height: 40px; padding: 0 12px; background: var(--pk6-brown); color: #fff; font-size: 14px; }
.pk6-btn--add:hover:not(:disabled) { background: var(--pk6-brown-dark); }
.pk6-btn--add:disabled { background: #e7ddd4; color: #a39a93; cursor: not-allowed; }

.pk6-link {
	background: none;
	border: 0;
	padding: 4px 0;
	color: var(--pk6-brown);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.pk6-link--muted { color: var(--pk6-muted); font-weight: 500; }

@keyframes pk6-pulse {
	0% { box-shadow: 0 0 0 0 rgba(171, 95, 46, .5); }
	100% { box-shadow: 0 0 0 16px rgba(171, 95, 46, 0); }
}

/* --- Strona kreatora ----------------------------------------------------- */

.pk6-page { background: #fff; }

.pk6-builder {
	max-width: 1350px;
	margin: 0 auto;
	padding: 16px 16px 120px;
	font-family: var(--pk6-font);
	color: var(--pk6-text);
}

/* Baner */
.pk6-hero {
	position: relative;
	display: grid;
	gap: 8px;
	overflow: hidden;
	padding: 24px 20px 20px;
	border-radius: 24px;
	background: radial-gradient(120% 140% at 100% 0%, #f3dfcb 0%, var(--pk6-cream) 55%);
}
.pk6-hero__eyebrow {
	margin: 0 0 6px;
	color: var(--pk6-brown);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.pk6-hero__title {
	margin: 0 0 10px;
	color: var(--pk6-ink);
	font-family: var(--pk6-head);
	font-size: clamp(30px, 6vw, 52px);
	font-weight: 700;
	line-height: 1.02;
}
.pk6-hero__accent { color: var(--pk6-brown); }
.pk6-hero__text { margin: 0 0 16px; max-width: 520px; font-size: 15px; line-height: 1.55; }
.pk6-hero__visual { position: relative; display: none; }
.pk6-hero__photo { width: 100%; height: 100%; object-fit: cover; border-radius: 18px; }
.pk6-hero__cans { position: relative; height: 100%; min-height: 230px; }
.pk6-hero__cans img {
	position: absolute;
	bottom: 0;
	width: 52%;
	height: auto;
	mix-blend-mode: multiply; /* zdjęcia produktów mają białe tło */
}
.pk6-hero__cans img:nth-child(1) { left: 0; transform: rotate(-10deg); z-index: 1; }
.pk6-hero__cans img:nth-child(2) { left: 24%; bottom: 14px; z-index: 3; }
.pk6-hero__cans img:nth-child(3) { right: 0; transform: rotate(9deg); z-index: 2; }
.pk6-hero__sticker {
	position: absolute;
	top: 0;
	right: 4%;
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: var(--pk6-brown);
	color: #fff;
	font-family: var(--pk6-head);
	font-size: 34px;
	font-weight: 700;
	line-height: .85;
	text-align: center;
	transform: rotate(8deg);
	box-shadow: var(--pk6-shadow);
}
.pk6-hero__sticker small { display: block; font-family: var(--pk6-font); font-size: 10px; font-weight: 500; line-height: 1.2; }

/* Układ */
.pk6-builder__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 20px; }

/* Pasek narzędzi */
.pk6-toolbar { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.pk6-chips {
	display: flex;
	gap: 8px;
	margin: 0 -16px;
	padding: 2px 16px 4px;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.pk6-chips::-webkit-scrollbar { display: none; }
.pk6-chip {
	flex: 0 0 auto;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--pk6-line);
	border-radius: 999px;
	background: #fff;
	color: var(--pk6-ink);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color .2s, border-color .2s, color .2s;
}
.pk6-chip span { margin-left: 2px; color: var(--pk6-muted); font-size: 12px; }
.pk6-chip:hover { border-color: var(--pk6-brown); }
.pk6-chip.is-active { border-color: var(--pk6-brown); background: var(--pk6-brown); color: #fff; }
.pk6-chip.is-active span { color: rgba(255, 255, 255, .8); }

.pk6-search { position: relative; display: block; margin: 0; }
.pk6-search svg { position: absolute; top: 50%; left: 16px; color: var(--pk6-muted); transform: translateY(-50%); pointer-events: none; }
.pk6-search input[type="search"] {
	width: 100%;
	height: 46px;
	margin: 0;
	padding: 0 16px 0 44px;
	border: 1px solid var(--pk6-line);
	border-radius: 999px;
	background: #fff;
	color: var(--pk6-ink);
	font-family: var(--pk6-font);
	font-size: 16px; /* bez zoomu na iOS */
	box-shadow: none;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}
.pk6-search input[type="search"]:focus { border-color: var(--pk6-brown); box-shadow: 0 0 0 3px rgba(171, 95, 46, .15); }

/* Siatka i karty */
.pk6-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.pk6-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 10px;
	border: 1.5px solid var(--pk6-line);
	border-radius: var(--pk6-radius);
	background: #fff;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.pk6-card:hover { box-shadow: 0 6px 18px rgba(49, 43, 43, .08); }
.pk6-card.is-selected { border-color: var(--pk6-brown); background: #fffaf5; }
.pk6-card.is-full { opacity: .65; }
.pk6-card__media {
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	margin-bottom: 8px;
	border-radius: 12px;
	background: #f7f3ee;
}
.pk6-card__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform .3s; }
.pk6-slot__img { mix-blend-mode: multiply; }
.pk6-card:hover .pk6-card__media img { transform: scale(1.04); }
.pk6-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--pk6-green);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}
.pk6-card__body { flex: 1; }
.pk6-card__name { margin: 0; color: var(--pk6-ink); font-family: var(--pk6-head); font-size: 18px; font-weight: 700; line-height: 1.15; }
.pk6-card__meta { display: block; color: var(--pk6-muted); font-size: 12px; }
.pk6-card__price { display: flex; flex-direction: column; margin: 6px 0 10px; line-height: 1.3; }
.pk6-card__regular { color: var(--pk6-ink); font-size: 15px; font-weight: 600; }
.pk6-card__set { color: var(--pk6-green-ink); font-size: 12px; }
.pk6-card__na { display: block; padding: 10px 0; color: var(--pk6-muted); font-size: 13px; text-align: center; }

.pk6-stepper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 40px;
	border: 2px solid var(--pk6-brown);
	border-radius: 999px;
	background: #fff;
}
.pk6-stepper__btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--pk6-brown);
}
.pk6-stepper__btn:hover:not(:disabled) { background: var(--pk6-cream); }
.pk6-stepper__btn:disabled { color: #cdb7a6; cursor: not-allowed; }
.pk6-stepper__value { color: var(--pk6-ink); font-size: 16px; font-weight: 700; }

.pk6-empty { grid-column: 1 / -1; padding: 32px 0; text-align: center; }

/* Panel zestawu (strona) */
.pk6-aside__box,
.pk6-panel {
	font-family: var(--pk6-font);
	color: var(--pk6-text);
}
.pk6-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pk6-panel__title { margin: 0; color: var(--pk6-ink); font-family: var(--pk6-head); font-size: 26px; font-weight: 700; line-height: 1.1; }
.pk6-panel__hint { margin: 4px 0 14px; font-size: 14px; }

.pk6-counter {
	display: inline-flex;
	align-items: center;
	min-width: 48px;
	justify-content: center;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--pk6-cream-2);
	color: var(--pk6-ink);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	transition: background-color .2s, color .2s;
}
.pk6-counter.is-complete { background: var(--pk6-green); color: #fff; }
.pk6-counter.is-bump { animation: pk6-shake .4s; }
@keyframes pk6-shake {
	20%, 60% { transform: translateX(-4px); }
	40%, 80% { transform: translateX(4px); }
}

.pk6-progress { display: block; width: 100%; height: 6px; overflow: hidden; border-radius: 999px; background: var(--pk6-cream-2); }
.pk6-progress__fill { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--pk6-brown); transition: width .3s ease; }

/* Sloty – lista */
.pk6-slots--list { display: grid; gap: 8px; }
.pk6-slots--list .pk6-slot {
	position: relative;
	display: grid;
	grid-template-columns: 22px 40px 1fr auto 28px;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 56px;
	padding: 6px 10px;
	border: 1.5px solid #fff;
	border-radius: 12px;
	background: #fff;
	color: var(--pk6-ink);
	font-size: 14px;
	text-align: left;
}
.pk6-slots--list .pk6-slot.is-empty { grid-template-columns: 22px 40px 1fr; border: 1.5px dashed #dccbbb; background: rgba(255, 255, 255, .6); color: var(--pk6-muted); }
.pk6-slots--list .pk6-slot.is-empty:hover { border-color: var(--pk6-brown); color: var(--pk6-brown); }
.pk6-slot__no { color: var(--pk6-muted); font-size: 13px; font-weight: 600; text-align: center; }
.pk6-slots--list .pk6-slot__img { width: 40px; height: 40px; object-fit: contain; }
.pk6-slots--list .pk6-slot__plus {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin: 0 auto;
	border: 1.5px dashed currentColor;
	border-radius: 50%;
}
.pk6-slots--list .pk6-slot__name { font-weight: 600; }
.pk6-slots--list .pk6-slot__name small { color: var(--pk6-muted); font-weight: 400; }
.pk6-slots--list .pk6-slot__price { font-size: 13px; }

.pk6-slot__remove {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--pk6-cream);
	color: var(--pk6-brown);
}
.pk6-slot__remove:hover { background: var(--pk6-brown); color: #fff; }

.pk6-slot.is-new { animation: pk6-pop .35s ease-out; }
@keyframes pk6-pop {
	0% { transform: scale(.85); opacity: .3; }
	70% { transform: scale(1.04); }
	100% { transform: scale(1); opacity: 1; }
}

/* Sloty – rząd (karta produktu) */
.pk6-slots--row,
.pk6-slots--mini { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.pk6-slots--row .pk6-slot,
.pk6-slots--mini .pk6-slot {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	width: 100%;
	padding: 4px;
	border: 1.5px solid var(--pk6-line);
	border-radius: 12px;
	background: #fff;
	color: var(--pk6-brown);
}
.pk6-slots--row .pk6-slot.is-empty { border-style: dashed; border-color: #dccbbb; }
.pk6-slots--row .pk6-slot.is-empty:hover { border-color: var(--pk6-brown); background: var(--pk6-cream); }
.pk6-slots--row .pk6-slot.is-filled,
.pk6-slots--mini .pk6-slot.is-filled { border-color: var(--pk6-brown); }
.pk6-slots--row .pk6-slot__img,
.pk6-slots--mini .pk6-slot__img { width: 100%; height: 100%; object-fit: contain; }
.pk6-slots--row .pk6-slot__name {
	position: absolute;
	top: calc(100% + 6px);
	left: -3px;
	right: -3px;
	overflow: hidden;
	color: var(--pk6-ink);
	font-size: 11.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.pk6-slots--row .pk6-slot.is-empty .pk6-slot__name { color: #b3a395; font-weight: 500; }
.pk6-slots--row .pk6-slot.is-empty .pk6-slot__plus {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--pk6-cream);
	transition: background-color .2s, color .2s, transform .2s;
}
.pk6-slots--row .pk6-slot.is-empty:hover .pk6-slot__plus { background: var(--pk6-brown); color: #fff; transform: scale(1.08); }
.pk6-slots--row .pk6-slot.is-filled { background: #fff; box-shadow: 0 3px 10px rgba(171, 95, 46, .12); }
.pk6-slots--row { margin-bottom: 30px; }
.pk6-slots--row .pk6-slot__remove,
.pk6-slots--mini .pk6-slot__remove { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; background: var(--pk6-brown); color: #fff; }
.pk6-slots--mini .pk6-slot { width: 42px; border-radius: 10px; }
.pk6-slots--mini { grid-template-columns: repeat(6, 42px); }
.pk6-slots--mini .pk6-slot.is-empty { border-style: dashed; color: #cdb7a6; }
.pk6-slots--mini .pk6-slot__name { display: none; }

.pk6-tools { display: flex; justify-content: space-between; gap: 12px; min-height: 30px; margin: 8px 0 4px; }

/* Podsumowanie */
.pk6-summary { margin-top: 12px; padding-top: 16px; border-top: 1px dashed #dccbbb; }
.pk6-summary__price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.pk6-summary__label { color: var(--pk6-ink); font-size: 15px; font-weight: 600; }
.pk6-summary__sub { display: block; color: var(--pk6-muted); font-size: 12px; font-weight: 400; }
.pk6-summary__values { display: flex; align-items: baseline; gap: 10px; }
.pk6-summary__values del { color: var(--pk6-muted); font-size: 15px; }
.pk6-summary__values strong { color: var(--pk6-ink); font-family: var(--pk6-head); font-size: 28px; font-weight: 700; line-height: 1; }

.pk6-savings {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 12px 0 0;
	padding: 10px 14px;
	border-radius: 12px;
	background: var(--pk6-green-bg);
	color: var(--pk6-green-ink);
	font-size: 13px;
	line-height: 1.45;
}
.pk6-savings svg { flex: 0 0 18px; margin-top: 1px; }

.pk6-message {
	max-height: 0;
	margin: 0;
	overflow: hidden;
	font-size: 13px;
	font-weight: 500;
	opacity: 0;
	transition: max-height .25s, opacity .25s, margin .25s;
}
.pk6-message.is-visible { max-height: 60px; margin-top: 10px; opacity: 1; }
.pk6-message[data-type="success"] { color: var(--pk6-green-ink); }
.pk6-message[data-type="error"] { color: var(--pk6-red); }
.pk6-message[data-type="info"] { color: var(--pk6-brown); }

/* Panel na mobile = dolny arkusz */
.pk6-aside {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9990;
	border-radius: 20px 20px 0 0;
	background: var(--pk6-cream);
	box-shadow: 0 -8px 30px rgba(49, 43, 43, .18);
	padding-bottom: env(safe-area-inset-bottom);
}
.pk6-aside__bar {
	display: grid;
	grid-template-columns: 1fr auto auto 18px;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 68px;
	padding: 12px 16px;
	border: 0;
	background: none;
	color: var(--pk6-ink);
	text-align: left;
}
.pk6-aside__bar-main { display: grid; gap: 6px; font-size: 15px; }
.pk6-aside__bar-total { font-family: var(--pk6-head); font-size: 20px; }
.pk6-aside__chevron { transition: transform .25s; }
.pk6-aside.is-open .pk6-aside__chevron { transform: rotate(180deg); }
.pk6-aside__box { display: none; max-height: calc(85vh - 68px); overflow-y: auto; padding: 0 16px 16px; overscroll-behavior: contain; }
.pk6-aside__box .pk6-panel__head,
.pk6-aside__box .pk6-panel__hint { display: none; }
.pk6-aside.is-open .pk6-aside__box { display: block; }
.pk6-aside__backdrop { position: fixed; inset: 0; z-index: 9989; background: rgba(33, 33, 33, .45); }
.pk6-lock-mobile { overflow: hidden; }

/* --- Karta produktu ------------------------------------------------------ */

.pk6-tabs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	margin: 0 0 16px;
	padding: 5px;
	border-radius: 16px;
	background: var(--pk6-cream);
	font-family: var(--pk6-font);
}
.pk6-tabs__tab {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	min-height: 52px;
	padding: 8px 10px;
	border: 1.5px solid transparent;
	border-radius: 12px;
	background: none;
	color: var(--pk6-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	transition: background-color .2s, border-color .2s, color .2s;
}
.pk6-tabs__tab.is-active { border-color: var(--pk6-brown); background: #fff; color: var(--pk6-ink); box-shadow: 0 2px 8px rgba(49, 43, 43, .06); }
.pk6-tabs__badge { padding: 2px 8px; border-radius: 999px; background: var(--pk6-green); color: #fff; font-size: 11px; font-weight: 600; }

.pk6-panel {
	margin-bottom: 16px;
	padding: 18px 16px;
	border-radius: 16px;
	background: var(--pk6-cream);
}
.pk6-panel__pick { width: 100%; margin-bottom: 4px; }

/* --- Okno wyboru ---------------------------------------------------------- */

.pk6-modal { position: fixed; inset: 0; z-index: 100000; font-family: var(--pk6-font); color: var(--pk6-text); }
.pk6-modal__backdrop { position: absolute; inset: 0; background: rgba(33, 33, 33, .5); opacity: 0; transition: opacity .2s; }
.pk6-modal__dialog {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	flex-direction: column;
	height: 92vh;
	height: 92dvh;
	border-radius: 20px 20px 0 0;
	background: #fff;
	box-shadow: var(--pk6-shadow);
	transform: translateY(24px);
	opacity: 0;
	transition: transform .25s ease, opacity .2s;
}
.pk6-modal.is-open .pk6-modal__backdrop { opacity: 1; }
.pk6-modal.is-open .pk6-modal__dialog { transform: none; opacity: 1; }

.pk6-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 16px 8px; }
.pk6-modal__title { margin: 0; color: var(--pk6-ink); font-family: var(--pk6-head); font-size: 24px; font-weight: 700; line-height: 1.1; }
.pk6-modal__subtitle { margin: 4px 0 0; font-size: 13px; }
.pk6-modal__close { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: var(--pk6-cream); color: var(--pk6-ink); }
.pk6-modal__close:hover { background: var(--pk6-cream-2); }

.pk6-toolbar--modal { margin: 0; padding: 8px 16px 12px; border-bottom: 1px solid var(--pk6-line); }
.pk6-modal__body { flex: 1; overflow-y: auto; padding: 12px 16px; overscroll-behavior: contain; }

/* Lista na mobile */
.pk6-grid--modal { grid-template-columns: 1fr; gap: 8px; }
.pk6-grid--modal .pk6-card { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; }
.pk6-grid--modal .pk6-card__media { margin: 0; }
.pk6-grid--modal .pk6-card__badge { top: 2px; left: 2px; padding: 1px 6px; font-size: 10px; }
.pk6-grid--modal .pk6-card__price { margin: 2px 0 0; }
.pk6-grid--modal .pk6-card__actions { min-width: 112px; }

.pk6-modal__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--pk6-line);
	background: var(--pk6-cream);
}
.pk6-modal__status { display: grid; gap: 8px; min-width: 0; }
.pk6-modal__label { color: var(--pk6-ink); font-size: 14px; }
.pk6-modal__label strong { color: var(--pk6-brown); }
.pk6-modal__footer .pk6-slots--mini { grid-template-columns: repeat(6, 34px); gap: 5px; }
.pk6-modal__footer .pk6-slots--mini .pk6-slot { width: 34px; }
.pk6-modal__done { width: auto; min-height: 48px; padding: 0 20px; font-size: 15px; }

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (min-width: 768px) {
	.pk6-builder { padding: 24px 24px 120px; }
	.pk6-hero { grid-template-columns: 1.3fr 1fr; align-items: center; padding: 36px 40px; }
	.pk6-hero__visual { display: block; height: 100%; min-height: 240px; }
	.pk6-toolbar { flex-direction: row; align-items: center; justify-content: space-between; }
	.pk6-toolbar { gap: 16px; }
	.pk6-chips { flex: 1 1 auto; min-width: 0; margin: 0; padding: 2px; }
	.pk6-builder .pk6-search { flex: 0 0 210px; }
	.pk6-chips { gap: 6px; }
	.pk6-chip { padding: 0 13px; }
	.pk6-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

	.pk6-modal__dialog {
		top: 50%;
		left: 50%;
		right: auto;
		bottom: auto;
		width: min(1100px, calc(100% - 48px));
		height: auto;
		max-height: 88vh;
		border-radius: 24px;
		transform: translate(-50%, calc(-50% + 16px));
	}
	.pk6-modal.is-open .pk6-modal__dialog { transform: translate(-50%, -50%); }
	.pk6-modal__header { padding: 24px 28px 8px; }
	.pk6-modal__title { font-size: 30px; }
	.pk6-toolbar--modal { flex-direction: row-reverse; padding: 8px 28px 16px; }
	.pk6-toolbar--modal .pk6-search { flex: 0 0 260px; }
	.pk6-modal__body { padding: 20px 28px; }
	.pk6-grid--modal { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
	.pk6-grid--modal .pk6-card { display: flex; padding: 10px; }
	.pk6-grid--modal .pk6-card__media { margin-bottom: 8px; }
	.pk6-grid--modal .pk6-card__badge { top: 8px; left: 8px; padding: 3px 9px; font-size: 12px; }
	.pk6-grid--modal .pk6-card__price { margin: 6px 0 10px; }
	.pk6-grid--modal .pk6-card__actions { min-width: 0; }
	.pk6-modal__footer { padding: 14px 28px; border-radius: 0 0 24px 24px; }
	.pk6-modal__status { display: flex; align-items: center; gap: 16px; }
	.pk6-modal__footer .pk6-slots--mini { grid-template-columns: repeat(6, 44px); gap: 8px; }
	.pk6-modal__footer .pk6-slots--mini .pk6-slot { width: 44px; }
	.pk6-modal__done { padding: 0 28px; }
}

/* ==========================================================================
   Desktop
   ========================================================================== */

@media (min-width: 1024px) {
	.pk6-builder { padding-bottom: 64px; }
	.pk6-hero { padding: 44px 56px; }
	.pk6-hero__visual { min-height: 280px; }

	.pk6-builder__layout { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; gap: 32px; margin-top: 32px; }
	.pk6-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

	.pk6-aside {
		position: sticky;
		top: 110px;
		z-index: 2;
		padding: 0;
		border-radius: 24px;
		box-shadow: none;
	}
	.pk6-aside__bar-wrap,
	.pk6-aside__backdrop { display: none !important; }
	.pk6-aside__box,
	.pk6-aside.is-open .pk6-aside__box { display: block; max-height: none; overflow: visible; padding: 24px; }
	.pk6-aside__box .pk6-panel__head,
	.pk6-aside__box .pk6-panel__hint { display: flex; }
	.pk6-aside__box .pk6-panel__hint { display: block; }
	.pk6-grid--modal { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
	.pk6-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.pk6-grid--modal { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ==========================================================================
   Dopracowanie: kroki, pasek mobilny, animacje, toast, baner w kategorii
   ========================================================================== */

/* Kroki „Jak to działa” w banerze */
.pk6-hero__steps {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	color: var(--pk6-text);
}
.pk6-hero__steps li { display: flex; align-items: center; gap: 12px; margin: 0; line-height: 1.35; }
.pk6-hero__steps strong { color: var(--pk6-ink); }
.pk6-hero__step-no {
	display: inline-grid;
	flex: 0 0 34px;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: #fff;
	color: var(--pk6-brown);
	font-family: var(--pk6-head);
	font-size: 18px;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(171, 95, 46, .15);
}

/* Pasek mobilny: tytuł + licznik, przycisk koszyka gdy komplet */
.pk6-aside__bar-wrap { display: flex; align-items: center; gap: 10px; padding-right: 12px; }
.pk6-aside__bar-wrap .pk6-aside__bar { flex: 1; min-width: 0; grid-template-columns: 1fr auto 18px; }
.pk6-aside__bar-title { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.pk6-aside__bar-title .pk6-counter { min-width: 0; padding: 2px 8px; font-size: 12px; }
.pk6-aside__bar-cta { flex: 0 0 auto; width: auto; min-height: 46px; padding: 0 16px; font-size: 14px; animation: pk6-pop .35s ease-out; }
.pk6-aside.is-complete .pk6-aside__bar-total { display: none; }

/* Spinner w przycisku */
.pk6-spinner {
	display: none;
	width: 18px;
	height: 18px;
	border: 2.5px solid rgba(255, 255, 255, .35);
	border-top-color: #fff;
	border-radius: 50%;
	animation: pk6-spin .7s linear infinite;
}
.pk6-btn.is-loading .pk6-spinner { display: inline-block; }
.pk6-btn.is-loading svg { display: none; }
@keyframes pk6-spin { to { transform: rotate(360deg); } }

/* Animacja dodania */
.pk6-fly {
	position: fixed;
	z-index: 100001;
	object-fit: contain;
	pointer-events: none;
	mix-blend-mode: multiply;
	will-change: transform, opacity;
}
.pk6-slot.is-landed,
.pk6-counter.is-landed { animation: pk6-land .3s ease-out; }
/* Delikatne „osiadanie” po wylądowaniu – jedno, bez drugiego powiększenia. */
@keyframes pk6-land {
	0% { transform: scale(1); }
	45% { transform: scale(.94); }
	100% { transform: scale(1); }
}

/* Komunikat z linkiem */
.pk6-message a,
.pk6-toast a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Toast (mobile, gdy panel zestawu jest zwinięty) */
.pk6-toast {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: calc(84px + env(safe-area-inset-bottom));
	z-index: 9995;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--pk6-ink);
	color: #fff;
	font-family: var(--pk6-font);
	font-size: 14px;
	font-weight: 500;
	box-shadow: var(--pk6-shadow);
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}
.pk6-toast.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.pk6-toast[data-type="success"] { background: var(--pk6-green-ink); }
.pk6-toast[data-type="error"] { background: var(--pk6-red); }

/* Zakładki: etykieta nie łamie „6-pak” */
.pk6-tabs__label { text-wrap: balance; }

/* Mobile: filtry i wyszukiwarka przyklejone nad siatką */
@media (max-width: 1023px) {
	.pk6-builder .pk6-toolbar {
		position: sticky;
		top: var(--wp-admin--admin-bar--height, 0px);
		z-index: 20;
		margin: 0 -16px 12px;
		padding: 10px 16px;
		background: rgba(255, 255, 255, .96);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}
@media (max-width: 600px) {
	.admin-bar .pk6-builder .pk6-toolbar { top: 0; } /* admin bar na wąskich ekranach nie jest przyklejony */
}

/* Okno wyboru (tablet+): przyciski na pełną szerokość karty */
@media (min-width: 768px) {
	.pk6-grid--modal .pk6-card { align-items: stretch; }
}

/* Baner w kategorii */
.pk6-promo {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	gap: 14px;
	margin: 0 0 24px;
	padding: 18px 20px;
	border-radius: 20px;
	background: radial-gradient(120% 160% at 100% 0%, #f3dfcb 0%, var(--pk6-cream) 60%);
	color: var(--pk6-text);
	font-family: var(--pk6-font);
	text-decoration: none;
	transition: box-shadow .2s, transform .2s;
}
.pk6-promo:hover { box-shadow: var(--pk6-shadow); transform: translateY(-2px); }
.pk6-promo__cans { display: none; }
.pk6-promo__text { display: grid; gap: 2px; }
.pk6-promo__eyebrow {
	justify-self: start;
	margin-bottom: 4px;
	padding: 2px 10px;
	border-radius: 999px;
	background: var(--pk6-green);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.pk6-promo__title { color: var(--pk6-ink); font-family: var(--pk6-head); font-size: 24px; font-weight: 700; line-height: 1.1; }
.pk6-promo__desc { font-size: 14px; line-height: 1.45; }
.pk6-promo__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 46px;
	padding: 0 22px;
	border-radius: 999px;
	background: var(--pk6-brown);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color .2s;
}
.pk6-promo:hover .pk6-promo__cta { background: var(--pk6-brown-dark); }
.pk6-promo:hover .pk6-promo__cta svg { transform: translateX(3px); }
.pk6-promo__cta svg { transition: transform .2s; }

@media (min-width: 768px) {
	.pk6-promo { grid-template-columns: auto 1fr auto; gap: 24px; padding: 16px 28px 16px 16px; }
	.pk6-promo__cans { position: relative; display: block; width: 170px; height: 96px; }
	.pk6-promo__cans img {
		position: absolute;
		bottom: 0;
		width: 92px;
		height: 92px;
		object-fit: contain;
		mix-blend-mode: multiply;
	}
	.pk6-promo__cans img:nth-child(1) { left: 0; transform: rotate(-9deg); }
	.pk6-promo__cans img:nth-child(2) { left: 40px; bottom: 6px; z-index: 2; }
	.pk6-promo__cans img:nth-child(3) { left: 80px; transform: rotate(8deg); }
	.pk6-promo__title { font-size: 28px; }
}

@media (min-width: 1024px) {
	.pk6-hero__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
	.pk6-hero__steps li { align-items: flex-start; }
}

/* ==========================================================================
   Baner ze zdjęciem + odręczne dopiski
   ========================================================================== */

/* Mobile: zdjęcie na górze, płynnie przechodzi w tło banera */
.pk6-hero--photo { gap: 0; padding: 0; }
.pk6-hero--photo .pk6-hero__content { position: relative; z-index: 2; padding: 0 20px 22px; margin-top: -28px; }
.pk6-hero--photo .pk6-hero__visual { display: block; order: -1; height: 240px; }
.pk6-hero--photo .pk6-hero__photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 38%;
	border-radius: 0;
	-webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
	mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}
.pk6-hero__note {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 66%;
	transform: rotate(-6deg);
	filter: drop-shadow(0 0 6px rgba(255, 255, 255, .95)) drop-shadow(0 0 2px #fff);
}
.pk6-hero__note img { display: block; width: auto; height: 22px; max-width: 100%; }
.pk6-hero__note svg { flex: 0 0 auto; }
.pk6-hero--photo .pk6-hero__sticker {
	top: auto;
	right: 16px;
	bottom: 34px;
	width: 76px;
	height: 76px;
	font-size: 28px;
}
.pk6-hero--photo .pk6-hero__sticker small { font-size: 9px; }

/* Dopisek pod panelem zestawu (desktop) */
.pk6-aside__note { display: none; }

@media (min-width: 768px) {
	.pk6-hero--photo { grid-template-columns: 1.15fr 1fr; align-items: stretch; min-height: 340px; }
	.pk6-hero--photo .pk6-hero__content { align-self: center; margin: 0; padding: 40px 0 40px 44px; }
	.pk6-hero--photo .pk6-hero__visual { order: 0; height: auto; min-height: 100%; }
	.pk6-hero--photo .pk6-hero__photo {
		object-position: 55% 42%;
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 32%);
		mask-image: linear-gradient(to right, transparent 0%, #000 32%);
	}
	.pk6-hero__note { top: 24px; right: 26px; }
	.pk6-hero__note img { height: 28px; }
	.pk6-hero--photo .pk6-hero__sticker { right: auto; bottom: 26px; left: 10%; width: 96px; height: 96px; font-size: 36px; }
	.pk6-hero--photo .pk6-hero__sticker small { font-size: 10px; }
}

@media (min-width: 1024px) {
	.pk6-hero--photo { min-height: 380px; }
	.pk6-hero--photo .pk6-hero__content { padding: 52px 0 52px 60px; }

	.pk6-aside__note {
		display: flex;
		align-items: flex-end;
		justify-content: center;
		gap: 4px;
		margin: 2px 0 0; padding-bottom: 16px;
		transform: rotate(-3deg);
	}
	.pk6-aside__note-text { display: block; width: auto; height: 26px; margin-bottom: 2px; }
	.pk6-aside__arrow { margin-bottom: 6px; color: var(--pk6-brown); }
	.pk6-aside__paw { margin-left: 6px; color: var(--pk6-orange, #dcad63); transform: rotate(18deg); }
}

/* Koszyk: zablokowana ilość pozycji zestawu */
.pk6-cart-qty { display: inline-block; min-width: 32px; font-weight: 600; text-align: center; }

@media (prefers-reduced-motion: reduce) {
	.pk6-builder *,
	.pk6-modal *,
	.pk6-panel * { animation: none !important; transition: none !important; }
}

/* Wejście z koszyka (edycja składu / uzupełnienie) */
.pk6-context {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 20px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--pk6-line);
	border-left: 3px solid var(--pk6-brown);
	border-radius: 12px;
	background: #fff;
	color: var(--pk6-ink);
	font-family: var(--pk6-font);
	font-size: 14px;
}
.pk6-context__icon {
	display: grid;
	flex: 0 0 30px;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--pk6-cream);
	color: var(--pk6-brown);
	font-size: 15px;
}
.pk6-context__text { flex: 1; line-height: 1.4; }
.pk6-context__back { color: var(--pk6-brown); font-weight: 600; white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }