.pf-paracord-wrapper {
	--pf-accent: #ff8a65; /* warm coral */
	--pf-accent-2: #ffd9cc; /* pale coral */
	--pf-border: #f0e7e3;
	--pf-text-soft: #615a56;
	border: 1px solid var(--pf-border);
	padding: 18px;
	margin: 16px 0;
	background: linear-gradient(180deg, #fff, #fff),
			radial-gradient(1200px 200px at 0% -10%, var(--pf-accent-2), transparent 60%);
	background-blend-mode: normal, soft-light;
	border-radius: 14px;
	box-shadow: 0 10px 24px rgba(255,138,101,0.10), 0 2px 6px rgba(0,0,0,0.04);
	transition: box-shadow 220ms ease, transform 220ms ease;
}
.pf-paracord-wrapper h4 {
	margin-top: 0;
	font-weight: 700;
	letter-spacing: .2px;
	color: #3b2f2a;
	position: relative;
	padding-bottom: 6px;
}
.pf-paracord-wrapper h4:after{
	content:"";
	position:absolute; left:0; bottom:0; width:56px; height:4px; border-radius:3px;
	background: linear-gradient(90deg, var(--pf-accent), #ffb199);
}

.pf-paracord-wrapper[data-pf-paracord="true"]:hover { box-shadow: 0 12px 30px rgba(255,138,101,0.12), 0 3px 8px rgba(0,0,0,0.05); transform: translateY(-1px); }

.pf-paracord-wrapper .form-row label { font-weight: 600; color: var(--pf-text-soft); }

.pf-paracord-wrapper select,
.pf-paracord-wrapper input[type="number"],
.pf-paracord-wrapper input[type="text"]{ width: 100%; max-width: 100%; height: 40px; border-radius: 10px; border: 1px solid var(--pf-border); background-color: #fff; transition: border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease; }

/* Fokuszustand warm und weich */
.pf-paracord-wrapper select:focus,
.pf-paracord-wrapper input:focus{ border-color: var(--pf-accent); box-shadow: 0 0 0 3px rgba(255,138,101,0.22); background-color: #fffaf8; }

/* Kompakteres Feld für Halsumfang (cm) */
#pf_paracord_size{ max-width: 120px; width: 100%; height: 34px; font-size: 14px; }

/* Stylische Box für die Größenangabe mit Einheit */
.pf-size-field .pf-size-input{ position: relative; display: inline-flex; align-items: center; max-width: 170px; }
.pf-size-field .pf-size-input input{ padding-right: 42px; padding-left: 24px; height: 34px; }
.pf-size-field .pf-size-input .pf-unit{ position: absolute; right: 8px; color: #6b5d57; font-size: 11px; background: #fff1eb; padding: 2px 5px; border-radius: 6px; pointer-events: none; }

/* kleines Icon links in der Box */
.pf-size-field .pf-size-input .pf-icon{ position:absolute; left:8px; width:14px; height:14px; opacity:.7; background: linear-gradient(180deg, #ff8a65, #ff6e40); mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="white" d="M7 10h10v4H7z"/></svg>') center/contain no-repeat; }

/* Info-Icon und Tooltip */
.pf-info{ display:inline-block; width:16px; height:16px; border-radius:50%; background:#fff1eb; color:#9a3412; margin-left:6px; position:relative; box-shadow: inset 0 0 0 1px #ffd7c5; }
.pf-info:after{ content:"i"; position:absolute; top:50%; left:50%; transform:translate(-50%,-57%); font-size:10px; font-weight:700; color:#9a3412; }
.pf-info:hover::before, .pf-info:focus::before{ content: attr(data-hint); position:absolute; left:50%; transform:translateX(-50%); bottom:125%; white-space:nowrap; background:#3b2f2a; color:#fff; padding:8px 10px; border-radius:8px; font-size:12px; box-shadow:0 8px 22px rgba(59,47,42,.24); }
.pf-info:hover::after, .pf-info:focus::after{ content:""; position:absolute; left:50%; transform:translateX(-50%); bottom:115%; border:6px solid transparent; border-top-color:#3b2f2a; }

.pf-paracord-fade-enter { opacity: 0; transform: translateY(4px); }
.pf-paracord-fade-enter.pf-paracord-fade-enter-active { opacity: 1; transform: translateY(0); transition: opacity 220ms ease, transform 220ms ease; }

/* Multi-Color Select Badges */
.pf-color-legend{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 4px; }
.pf-color-pill{ display:inline-flex; align-items:center; gap:6px; border:1px solid var(--pf-border); border-radius:999px; padding:6px 10px; background:#fff; }
.pf-color-pill .swatch{ width:14px; height:14px; border-radius:50%; border:1px solid rgba(0,0,0,.1); background:#ccc; }
.pf-color-selected{ display:flex; gap:10px; flex-wrap:wrap; }
.pf-color-selected .thumb{ display:inline-flex; align-items:center; gap:6px; padding:4px 6px; border:1px dashed var(--pf-border); border-radius:8px; }
.pf-color-selected .thumb img{ width:28px; height:28px; object-fit:cover; border-radius:6px; }

.pf-color-pills{ display:flex; flex-wrap:wrap; gap:10px; margin:6px 0; }
.pf-color-pill-btn{ display:inline-flex; align-items:center; gap:8px; border:1px solid var(--pf-border); border-radius:999px; padding:6px 10px; background:#fff; cursor:pointer; }
.pf-color-pill-btn img{ width:18px; height:18px; object-fit:cover; border-radius:50%; border:1px solid rgba(0,0,0,.08); }
.pf-color-pill-btn .swatch{ width:16px; height:16px; border-radius:50%; border:1px solid rgba(0,0,0,.1); }
.pf-color-pill-btn.active{ border-color: var(--pf-accent); background:#fff6f3; box-shadow:0 0 0 3px rgba(255,138,101,.15); }

.pf-color-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(90px,1fr)); gap:10px; margin:6px 0; }
.pf-color-card{ cursor:pointer; border:1px solid var(--pf-border); border-radius:12px; padding:8px; background:#fff; display:flex; flex-direction:column; align-items:center; gap:6px; transition: box-shadow .2s ease, border-color .2s ease; }
.pf-color-card img{ width:56px; height:56px; object-fit:cover; border-radius:8px; border:1px solid rgba(0,0,0,.06); }
.pf-color-card .sw{ width:40px; height:40px; border-radius:50%; border:1px solid rgba(0,0,0,.12); }
.pf-color-card span{ font-size:13px; color:#4b4b4b; }
.pf-color-card.active{ border-color: var(--pf-accent); box-shadow: 0 0 0 3px rgba(255,138,101,.15); background:#fff6f3; }