/* Shared Flowballoons page furniture and palette, around the configurator. */
.cfg-main{--cfg-gutter:max(clamp(20px,5.5vw,66px),calc((100% - 1200px)/2));max-width:none;padding:0;margin:0}
.cfg-main>.cfg-breadcrumbs{margin:0;padding:22px var(--cfg-gutter);background:#fff;font-size:14px;color:#6a5870}
.cfg-breadcrumbs a{color:#8b337e}
.cfg-main>.cfg-intro{max-width:none;margin:0;padding:64px var(--cfg-gutter);background:linear-gradient(120deg,#ffe6f3,#fff8d6 60%,#e8f5cf)}
.cfg-intro h1{font-size:clamp(36px,5.4vw,64px);line-height:1.05;letter-spacing:-.055em;margin:0 0 25px;color:var(--ink)}
.cfg-intro>p:last-child{max-width:800px;font-size:18px;line-height:1.55;color:var(--ink)}
.cfg-eyebrow{font-family:'DM Mono',monospace;font-size:12px;letter-spacing:.08em;font-weight:700;color:#713066}
.cfg-intro .cfg-eyebrow{font-size:13px;color:var(--ink);margin:0 0 18px}
.cfg-main>.cfg-config-list{padding:28px var(--cfg-gutter);margin:0;background:var(--cream);gap:10px;flex-wrap:wrap}
.cfg-config-list a{font-family:inherit;font-size:14px;padding:11px 17px;border:1px solid #e6cde3;background:#fff;color:#6e2a66}
.cfg-config-list a[aria-current=page]{background:var(--blue);border-color:var(--blue);color:white}
.cfg-config-list a:hover{background:#fce3f3;color:#6e2a66}
.cfg-main>.cfg-workspace{padding:4px var(--cfg-gutter) 64px;gap:28px;background:var(--cream)}
.cfg-preview-panel,.cfg-controls-panel{border:1px solid #e9dce6;box-shadow:0 8px 24px #6823630b;border-radius:22px}
.cfg-preview-panel{top:132px;padding:24px;background:#fff}
.cfg-controls-panel{padding:28px;background:#f9e7f4}
.cfg-panel-title h2,.cfg-controls-panel>h2{color:var(--ink);font-size:26px;letter-spacing:-.035em}
.cfg-panel-title span{background:#fff0b4;color:var(--ink)}
.cfg-field,.cfg-check,.cfg-section-title h3,.cfg-slot,.cfg-summary{color:var(--ink)}
.cfg-field select,.cfg-field input,.cfg-field textarea{color:var(--ink);border-color:#dfc9dc;font-family:inherit;background:#fffdfb}
.cfg-check input{accent-color:var(--blue)}
.cfg-slot{padding:12px 14px;border-radius:16px;border-color:#e6cde3;background:#fffdfb}
.cfg-slot strong{font-size:14px}.cfg-slot small{font-size:13px;color:#6a5870}
.cfg-slot:hover,.cfg-slot:focus-visible{border-color:var(--blue);background:#fff}
.cfg-slot-arrow,.cfg-section-title button{color:var(--blue)}
.cfg-summary{background:#fff0b4;border-radius:18px}
.cfg-submit{background:var(--blue);font-family:inherit;font-size:14px;border-radius:100px;transition:transform .2s,box-shadow .2s}
.cfg-submit:hover{filter:none;transform:translateY(-3px);box-shadow:0 7px 15px #32143d20}
.cfg-main>.cfg-seo{max-width:none;margin:0;padding:64px var(--cfg-gutter);background:#e9f8ca;color:var(--ink)}
.cfg-seo h2{font-size:clamp(28px,4vw,42px);line-height:1.12;letter-spacing:-.04em;margin:0 0 22px;color:var(--ink)}
.cfg-seo p{max-width:800px;font-size:16px;line-height:1.7}.cfg-seo a{color:#803275}
.cfg-picker{font-family:Manrope,Arial,sans-serif;background:var(--cream);color:var(--ink)}
.cfg-picker-head h2{color:var(--ink)}
.cfg-groups button[aria-pressed=true]{background:var(--blue);border-color:var(--blue)}

/* One scroll area: keep search, category filters and close control in view. */
.cfg-picker{box-sizing:border-box;overflow:hidden;height:min(85dvh,850px);max-height:calc(100dvh - 24px)}
.cfg-picker[open]{display:flex;flex-direction:column;gap:0}
.cfg-picker-head,.cfg-picker>.cfg-field,.cfg-picker-status,.cfg-picker>.cfg-groups{flex:none;min-width:0}
.cfg-picker-head button{flex:none}
.cfg-picker .cfg-groups{flex-wrap:wrap;overflow:visible;padding:3px 0;gap:6px}
.cfg-picker .cfg-color-list{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#cba5c7 transparent;padding:3px 8px 6px 2px;align-content:start}
.cfg-picker .cfg-color-list::-webkit-scrollbar{width:6px}
.cfg-picker .cfg-color-list::-webkit-scrollbar-thumb{background:#cba5c7;border-radius:8px}
html:has(.cfg-picker[open]){overflow:hidden}
@media(max-width:620px){.cfg-picker{padding:16px;height:calc(100dvh - 24px)}.cfg-picker .cfg-groups{gap:4px}.cfg-picker .cfg-groups button{padding:5px 9px;font-size:11px}.cfg-picker .cfg-field{margin:12px 0}.cfg-picker-status{margin:8px 0}}
@media(max-height:500px){.cfg-picker{padding:12px;height:calc(100dvh - 16px)}.cfg-picker-head .cfg-eyebrow{display:none}.cfg-picker .cfg-field{margin:6px 0}.cfg-picker .cfg-field input{padding:6px 10px;margin-top:3px}.cfg-picker-status{margin:5px 0}.cfg-picker .cfg-groups button{padding:3px 8px}}
.cfg-color-option{color:var(--ink);border-color:#e6cde3}.cfg-color-option.is-selected{background:#f9e7f4;border-color:var(--blue)}
@media(max-width:1040px){.cfg-preview-panel{top:168px}}
@media(max-width:850px){.cfg-preview-panel{position:static}}
@media(max-width:760px){
 .cfg-main>.cfg-intro,.cfg-main>.cfg-seo{padding-block:42px}
 .cfg-main>.cfg-config-list{padding-block:20px;gap:8px}
 .cfg-config-list a{font-size:12px;padding:9px 12px}
 .cfg-main>.cfg-workspace{padding-bottom:42px;gap:22px}
 .cfg-preview-panel,.cfg-controls-panel{padding:18px}
 .cfg-panel-title h2,.cfg-controls-panel>h2{font-size:23px}
 .cfg-intro>p:last-child{font-size:16px}
}