.ppcfg { --cream:#f6f2e9; --card:#fffdf8; --ink:#2b2620; --muted:#8a8175; --line:#e6dfd0; --clay:#b5654a; --clay-tint:#f7ede4; max-width:560px; margin:1.5rem 0; color:var(--ink); }
.ppcfg * { box-sizing:border-box; }
.ppcfg-section { margin-bottom:1.6rem; position:relative; }
.ppcfg-head { display:flex; align-items:baseline; gap:0.5rem; margin-bottom:0.6rem; }
.ppcfg-label { font-size:0.72rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--muted); font-weight:600; }
.ppcfg-label.sub { opacity:0.7; margin-left:auto; }
.ppcfg-label-value { font-size:0.85rem; color:var(--ink); margin-left:auto; }
.ppcfg-whatsthis { background:none; border:0; padding:0; font:inherit; font-size:0.74rem; font-weight:600; color:var(--clay); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.ppcfg-whatsthis:hover { opacity:0.8; }
.ppcfg-cards { display:grid; grid-template-columns:1fr 1fr; gap:0.6rem; }
.ppcfg-card { display:flex; justify-content:space-between; align-items:center; border:1px solid var(--line); border-radius:12px; padding:0.7rem 0.9rem; cursor:pointer; background:var(--card); position:relative; }
.ppcfg-card input { position:absolute; opacity:0; }
.ppcfg-card:has(input:checked) { border-color:var(--clay); background:var(--clay-tint); }
.ppcfg-card-name { font-weight:600; font-size:0.88rem; }
.ppcfg-card-tag { font-size:0.74rem; color:var(--clay); font-weight:600; }

/* Swatches */
.ppcfg-swatches { grid-template-columns:repeat(auto-fill, minmax(96px, 1fr)); }
.ppcfg-swatch { flex-direction:column; align-items:center; gap:0.45rem; text-align:center; padding:0.7rem 0.5rem; }
.ppcfg-swatch-chip { width:36px; height:36px; border-radius:50%; border:1px solid rgba(0,0,0,0.12); box-shadow:inset 0 0 0 2px #fff; }
.ppcfg-swatch .ppcfg-card-name { font-size:0.8rem; }
.ppcfg-swatch .ppcfg-card-tag { font-size:0.68rem; }

.ppcfg-sizes { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:0.7rem; }
.ppcfg-size-preset { border:1px solid var(--line); background:var(--card); border-radius:8px; padding:0.5rem 0.9rem; font:inherit; font-weight:600; cursor:pointer; }
.ppcfg-size-preset.on { border-color:var(--clay); background:var(--clay-tint); color:var(--clay); }
.ppcfg-dims { display:flex; gap:0.6rem; }
.ppcfg-dims label { flex:1; display:flex; flex-direction:column; font-size:0.72rem; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted); gap:0.3rem; }
.ppcfg-dims input, .ppcfg-qty { padding:0.55rem 0.65rem; border:1px solid var(--line); border-radius:7px; font:inherit; font-size:1rem; }
.ppcfg-qty { width:10rem; }
.ppcfg-file { display:inline-block !important; pointer-events:auto !important; opacity:1 !important; width:100%; font-size:0.85rem; cursor:pointer; }
/* "What's this?" popover */
.ppcfg-popover { position:absolute; z-index:40; top:1.9rem; left:0; right:0; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 32px rgba(43,38,32,0.14); padding:1.1rem 1.2rem 1rem; }
.ppcfg-popover[hidden] { display:none; }
.ppcfg-popover-close { position:absolute; top:0.5rem; right:0.7rem; background:none; border:0; font-size:1.4rem; line-height:1; color:var(--muted); cursor:pointer; padding:0.2rem; }
.ppcfg-popover-close:hover { color:var(--clay); }
.ppcfg-popover-body { max-height:60vh; overflow-y:auto; }
.ppcfg-popover-intro { font-size:0.9rem; color:var(--ink); margin:0 0 0.8rem; line-height:1.5; }
.ppcfg-popover-item { margin:0 0 0.9rem; }
.ppcfg-popover-item:last-child { margin-bottom:0; }
.ppcfg-popover-name { display:block; font-weight:700; font-size:0.95rem; color:var(--ink); margin-bottom:0.15rem; }
.ppcfg-popover-spec { display:block; font-size:0.86rem; color:var(--muted); line-height:1.5; }

.ppcfg-sum-discount { color:var(--clay); }
.ppcfg-sum-discount strong { color:var(--clay); }
.ppcfg-nudge { font-size:0.8rem; color:var(--clay); margin:0.5rem 0 0; font-weight:600; }
.ppcfg-summary { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:1rem 1.2rem; margin:1.6rem 0 1rem; }
.ppcfg-sum-row { display:flex; justify-content:space-between; align-items:baseline; padding:0.25rem 0; }
.ppcfg-sum-total { font-size:1.3rem; border-top:1px solid var(--line); margin-top:0.5rem; padding-top:0.6rem; }
.ppcfg-sum-note { font-size:0.78rem; color:var(--muted); margin:0.4rem 0 0; }
.ppcfg-errors { color:#c0392b; font-size:0.85rem; margin-bottom:0.8rem; }
.ppcfg-btn-row { display:flex; gap:0.6rem; }
.ppcfg-add { flex:1; background:var(--clay) !important; color:#fff !important; border:0; border-radius:10px; padding:1rem; font-size:1rem; font-weight:600; cursor:pointer; }
.ppcfg-add:disabled { background:#cbb8af !important; cursor:not-allowed; }
.ppcfg-clear { background:transparent; color:var(--muted); border:1px solid var(--line); border-radius:10px; padding:1rem 1.1rem; font-size:0.85rem; font-weight:600; cursor:pointer; }
.ppcfg-clear:hover { border-color:var(--clay); color:var(--clay); }
@media (max-width:480px){
	.ppcfg-cards{ grid-template-columns:1fr; }
	/* On mobile, render the popover as a centered card with a dimmed backdrop. */
	.ppcfg-popover { position:fixed; top:50%; left:50%; right:auto; transform:translate(-50%,-50%); width:min(92vw, 420px); max-height:80vh; z-index:1001; }
	.ppcfg-section.ppcfg-info-open::before { content:""; position:fixed; inset:0; background:rgba(43,38,32,0.45); z-index:1000; }
}