/* PIPPO Preiskalkulator – Frontend- und Editor-Styles */
.pippo-pk {
	--pk-petrol: var(--wp--preset--color--petrol, #0E3B3C);
	--pk-ink: var(--wp--preset--color--ink, #1E2A28);
	--pk-muted: var(--wp--preset--color--muted, #3D4B47);
	--pk-line: var(--wp--preset--color--sage-line, #D3E0D6);
	--pk-sel: var(--wp--preset--color--selected, #D3E7DA);
	--pk-paper: #fff;
	--pk-r: 16px;
	margin-top: 30px;
	color: var(--pk-ink);
}
.pippo-pk :where(button) { font: inherit; }

/* Kategorien */
.pk-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pk-cat {
	display: inline-flex; align-items: center; gap: 7px; padding: 10px 18px; border-radius: 999px;
	border: 1.5px solid var(--pk-line); background: transparent; color: var(--pk-ink);
	font: 600 14.5px/1 var(--wp--preset--font-family--inter); cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.pk-cat:hover { border-color: var(--pk-petrol); }
.pk-cat.is-active { background: var(--pk-petrol); border-color: var(--pk-petrol); color: #fff; }
.pk-cat__count { font: 600 13px/1 var(--wp--preset--font-family--inter); opacity: .6; }

/* Produktliste */
.pk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 22px; }
.pk-row {
	display: grid; grid-template-columns: 132px 1fr auto; grid-template-areas: "img text text" "img price btn";
	align-items: center; column-gap: 18px; row-gap: 14px; padding: 18px;
	background: var(--pk-paper); border: 1px solid var(--pk-line); border-radius: 16px;
	box-shadow: 0 12px 26px -20px rgba(14, 59, 60, .55); transition: background .15s, border-color .15s;
}
.pk-row[hidden], .pk-row.is-collapsed { display: none; }
.pk-row.is-selected { background: var(--pk-sel); border-color: var(--pk-petrol); box-shadow: 0 14px 28px -20px rgba(14, 59, 60, .6); }
.pk-row__img {
	grid-area: img; width: 132px; height: 132px; border: 1px solid var(--pk-line); border-radius: 14px; background: #fff;
	display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pk-row__img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pk-row__text { grid-area: text; align-self: end; min-width: 0; }
.pk-row__name { font: 700 15.5px/1.3 var(--wp--preset--font-family--inter); color: var(--pk-ink); }
.pk-row__incl { font: 400 13.5px/1.4 var(--wp--preset--font-family--inter); color: var(--pk-muted); margin-top: 2px; }
.pk-row__price { grid-area: price; align-self: start; font: 800 18px/1 var(--wp--preset--font-family--inter); color: var(--pk-petrol); white-space: nowrap; }
.pk-row__btn {
	grid-area: btn; align-self: start; padding: 10px 16px; border-radius: 10px; border: 1.5px solid var(--pk-line);
	background: #fff; color: var(--pk-petrol); font: 700 13.5px/1 var(--wp--preset--font-family--inter); cursor: pointer; white-space: nowrap;
}
.pk-row__btn:hover { border-color: var(--pk-petrol); }
.pk-row.is-selected .pk-row__btn { background: var(--pk-petrol); border-color: var(--pk-petrol); color: #fff; }

.pk-more {
	display: block; width: 100%; margin-top: 14px; padding: 15px 18px; border: 1.5px solid var(--pk-petrol); border-radius: 14px;
	background: transparent; color: var(--pk-petrol); font: 700 15px/1 var(--wp--preset--font-family--inter); cursor: pointer;
}
.pk-more[hidden] { display: none; }

/* Karte mit Optionen, Schätzung und Formular */
.pk-card {
	background: #fff; border: 1px solid var(--pk-line); border-radius: 20px; padding: clamp(20px, 3vw, 32px); margin-top: 16px;
	box-shadow: 0 26px 50px -34px rgba(14, 59, 60, .4);
}
.pk-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.pk-fieldset--extras { margin-top: 24px; }
.pk-fieldset legend { font: 700 16px/1.3 var(--wp--preset--font-family--inter); color: var(--pk-ink); padding: 0; }
.pk-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pk-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-top: 14px; }
.pk-opt {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 13px 15px;
	border-radius: var(--pk-r); border: 1.5px solid rgba(14, 59, 60, .16); background: #fff; color: var(--pk-ink);
	box-shadow: 0 1px 2px rgba(14, 59, 60, .05); cursor: pointer; text-align: left;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.pk-opt--stack { flex-direction: column; align-items: flex-start; gap: 4px; }
.pk-opt:hover { border-color: var(--pk-petrol); }
.pk-opt.is-on { border-color: var(--pk-petrol); background: var(--pk-sel); box-shadow: 0 0 0 3px rgba(14, 59, 60, .12); }
.pk-opt__label { font: 700 15px/1.2 var(--wp--preset--font-family--inter); }
.pk-opt__label--normal { font-weight: 600; font-size: 14.5px; }
.pk-opt__price { font: 600 13.5px/1 var(--wp--preset--font-family--inter); color: var(--pk-petrol); white-space: nowrap; }
.pk-opt__price--free { color: #2E8B57; }
.pk-opt__meta { display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 10px; }
.pk-opt__note { font: 600 13px/1.25 var(--wp--preset--font-family--inter); color: #2E8B57; }
/* Abholung: Preis rechtsbündig in derselben Zeile wie die Bezeichnung */
.pk-opt--stack[data-delivery="pickup"] { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; }
.pk-opt--stack[data-delivery="pickup"] .pk-opt__label { min-width: 0; }
.pk-opt--stack[data-delivery="pickup"] .pk-opt__price { margin-left: auto; text-align: right; }

.pk-estimate { margin-top: 24px; background: var(--pk-sel); border: 1px solid var(--pk-petrol); border-radius: 14px; padding: 18px 20px; }
.pk-estimate__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pk-estimate__label { font: 700 16px/1.2 var(--wp--preset--font-family--inter); }
.pk-total { font: 800 28px/1 var(--wp--preset--font-family--inter); color: var(--pk-petrol); white-space: nowrap; }
.pk-lines { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; border-top: 1px dashed var(--pk-line); padding-top: 12px; }
.pk-lines[hidden] { display: none; }
.pk-lines > div { display: flex; justify-content: space-between; gap: 10px; font: 500 13.5px/1.4 var(--wp--preset--font-family--inter); color: var(--pk-muted); }
.pk-lines__price { white-space: nowrap; }
.pk-empty { margin: 10px 0 0; font: 400 13.5px/1.5 var(--wp--preset--font-family--inter); color: var(--pk-muted); }
.pk-empty[hidden] { display: none; }
.pk-note { margin: 12px 0 0; font: 400 12.5px/1.5 var(--wp--preset--font-family--inter); color: var(--pk-muted); }

.pk-form-head { margin-top: 28px; border-top: 1px solid var(--pk-line); padding-top: 24px; scroll-margin-top: 90px; }
.pk-form-head h3 { font: 800 22px/1.2 var(--wp--preset--font-family--inter); margin: 0; color: var(--pk-ink); letter-spacing: -.01em; }
.pk-form-head p { margin: 8px 0 0; font: 400 15px/1.55 var(--wp--preset--font-family--inter); color: var(--pk-muted); }

.pk-form { margin-top: 20px; }
.pk-form[hidden] { display: none; }
.pk-2col--form { gap: 14px; margin-top: 0; }
.pk-field { display: flex; flex-direction: column; gap: 6px; font: 600 13.5px/1 var(--wp--preset--font-family--inter); color: var(--pk-ink); margin-top: 14px; }
.pk-2col--form .pk-field { margin-top: 0; }
.pk-field input, .pk-field textarea {
	padding: 13px 14px; border: 1.5px solid var(--pk-line); border-radius: 12px; background: #fff; color: var(--pk-ink);
	font: 400 15px/1.4 var(--wp--preset--font-family--inter); width: 100%; box-sizing: border-box;
}
.pk-field textarea { line-height: 1.5; resize: vertical; }
.pk-field input:focus, .pk-field textarea:focus { outline: 2px solid var(--pk-petrol); outline-offset: 1px; border-color: var(--pk-petrol); }
.pk-field input.is-invalid { border-color: #C4402A; }
.pk-err { font: 500 12.5px/1.3 var(--wp--preset--font-family--inter); color: #C4402A; }
.pk-err[hidden] { display: none; }
.pk-err--privacy { display: block; margin-top: 6px; }
.pk-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; font: 400 13.5px/1.45 var(--wp--preset--font-family--inter); color: var(--pk-ink); cursor: pointer; }
.pk-check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: #0E3B3C; flex: 0 0 auto; }
.pk-check a { text-decoration: underline; }
.pk-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pk-form-error { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #FBEAE6; color: #8A2A1B; font: 500 14px/1.45 var(--wp--preset--font-family--inter); }
.pk-form-error[hidden] { display: none; }
.pk-submit {
	display: flex; width: 100%; margin-top: 20px; align-items: center; justify-content: center; gap: 9px; padding: 16px 20px;
	border-radius: 13px; border: 0; background: var(--pk-petrol); color: #fff; font: 700 clamp(15px, 3.6vw, 16px)/1.2 var(--wp--preset--font-family--inter);
	cursor: pointer; text-align: center;
}
.pk-submit:hover { background: var(--wp--preset--color--petrol-dark, #092A2B); }
.pk-submit.is-loading { opacity: .7; cursor: progress; }

.pk-thanks { margin-top: 22px; background: var(--pk-sel); border: 1.5px solid var(--pk-petrol); border-radius: 16px; padding: 26px; text-align: center; }
.pk-thanks[hidden] { display: none; }
.pk-thanks__check { display: inline-flex; width: 52px; height: 52px; border-radius: 50%; background: var(--pk-petrol); color: #fff; align-items: center; justify-content: center; font-size: 26px; }
.pk-thanks h3 { font: 700 20px/1.25 var(--wp--preset--font-family--inter); margin: 14px 0 6px; letter-spacing: 0; }
.pk-thanks p { margin: 0 auto; max-width: 42ch; font: 400 15px/1.55 var(--wp--preset--font-family--inter); color: var(--pk-muted); }
.pk-wa-btn { display: inline-flex; align-items: center; gap: 9px; margin-top: 16px; padding: 13px 22px; border-radius: 13px; background: #25D366; color: #fff !important; font: 700 15px/1 var(--wp--preset--font-family--inter); }

@media (max-width: 880px) {
	.pk-grid { grid-template-columns: 1fr; }
	.pk-2col { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.pk-row { grid-template-columns: 96px auto 1fr; column-gap: 14px; row-gap: 12px; padding: 16px; }
	.pk-row__img { width: 96px; height: 96px; align-self: start; }
	.pk-row__text { align-self: start; }
	.pk-row__price { align-self: center; font-size: 18px; }
	.pk-row__btn { align-self: center; width: 100%; }
}

/* Hover-Effekt (nur mit Maus) */
@media (hover: hover) and (pointer: fine) {
	.pk-row { position: relative; transition: transform .25s cubic-bezier(.22, .7, .3, 1), box-shadow .25s ease, border-color .25s ease, background .15s; }
	.pk-row__img { transition: border-color .25s ease, background-color .25s ease; }
	.pk-row__img img { transition: transform .4s cubic-bezier(.22, .7, .3, 1); }
	.pk-row:hover { transform: translateY(-3px); border-color: #A7CBB6; box-shadow: 0 20px 36px -24px rgba(14, 59, 60, .6); }
	.pk-row:hover .pk-row__img { border-color: #A7CBB6; background: #EDF6F0; }
	.pk-row:hover .pk-row__img img { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
	.pk-row, .pk-row__img img { transition: none !important; }
	.pk-row:hover { transform: none !important; }
}