/* Desktop keeps the full chooser; compact layouts use one decision at a time. */
.cmf-step{display:contents}.cmf-step-heading,.cmf-progress-caption,.cmf-step-hint{display:none}
@media(max-width:999px){
 #colours.cmf-progressive .colour-copy>#colour-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-width:0}
 #colours.cmf-progressive .cmf-progress-caption{display:block;margin:0 0 2px;font-size:12px;line-height:1.55;color:var(--muted);min-height:19px;letter-spacing:0}
 #colours.cmf-progressive .cmf-step{display:block;min-width:0;border:1px solid var(--line);border-radius:18px;background:color-mix(in srgb,var(--paper) 80%,white);overflow:hidden;transition:border-color .2s,background .2s}
 #colours.cmf-progressive .cmf-step[data-open=true]{border-color:color-mix(in srgb,var(--ink) 70%,transparent);background:color-mix(in srgb,var(--paper) 94%,white)}
 #colours.cmf-progressive .cmf-step--panels{grid-column:1;grid-row:7;margin:0}
 #colours.cmf-progressive .cmf-step-heading{display:grid;grid-template-columns:22px minmax(42px,.55fr) minmax(0,1fr) auto 12px;align-items:center;gap:10px;width:100%;min-height:74px;padding:15px 18px;border:0;background:transparent;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
 #colours.cmf-progressive .cmf-step-heading:focus-visible{outline:2px solid var(--amber);outline-offset:-4px;border-radius:17px}
 #colours.cmf-progressive .cmf-step-number{font-size:10px;letter-spacing:.05em;color:var(--muted)}
 #colours.cmf-progressive .cmf-step-title{font-size:15px;font-weight:500;line-height:1.3}
 #colours.cmf-progressive .cmf-step-value{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;font-size:12px;line-height:1.4;color:var(--muted)}
 #colours.cmf-progressive .cmf-step-value>span{overflow-wrap:anywhere}
 #colours.cmf-progressive .cmf-step-chip{display:block;flex:none;width:15px;height:15px;border:1px solid #0002;border-radius:50%}
 #colours.cmf-progressive .cmf-step-chip[hidden]{display:none}
 #colours.cmf-progressive .cmf-step-action{font-size:11px;line-height:1.4;color:var(--ink);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--ink) 35%,transparent);text-underline-offset:3px}
 #colours.cmf-progressive .cmf-step-chevron{display:block;width:12px;height:12px;transition:transform .2s;color:var(--muted)}
 #colours.cmf-progressive .cmf-step-chevron svg{display:block;width:100%;height:100%}
 #colours.cmf-progressive .cmf-step[data-open=true] .cmf-step-chevron{transform:rotate(180deg)}
 #colours.cmf-progressive .cmf-step .colour-field,#colours.cmf-progressive .cmf-step .colour-panel-field{display:block;padding:0 18px 18px;margin:0;min-width:0;width:100%;box-sizing:border-box}
 #colours.cmf-progressive .cmf-step fieldset[hidden]{display:none!important}
 #colours.cmf-progressive .cmf-step legend{position:absolute!important;overflow:hidden;width:1px;height:1px;padding:0;margin:-1px;clip:rect(0,0,0,0);white-space:nowrap;border:0;float:none}
 #colours.cmf-progressive .cmf-step .colour-swatches{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;justify-content:space-between;flex-wrap:nowrap;padding:3px 0 1px}
 #colours.cmf-progressive .cmf-step .colour-swatch{width:100%;height:46px;min-width:0}
 #colours.cmf-progressive .cmf-step .colour-swatch>span{width:30px;height:30px}
 #colours.cmf-progressive .cmf-step .colour-panel-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
 #colours.cmf-progressive .cmf-step .colour-panel-choice span{padding:10px 7px;font-size:12px;min-height:44px}
 #colours.cmf-progressive .cmf-step-hint{display:block;margin:10px 0 0;font-size:11px;line-height:1.5;color:var(--muted)}
 #colours.cmf-progressive .cmf-step-heading[hidden],#colours.cmf-progressive .cmf-progress-caption[hidden],#colours.cmf-progressive .cmf-step-hint[hidden]{display:none}
}
@media(max-width:500px){
 #colours.cmf-progressive .cmf-step-heading{grid-template-columns:17px minmax(40px,.55fr) minmax(0,1fr) auto 11px;gap:7px;min-height:72px;padding:14px}
 #colours.cmf-progressive .cmf-step .colour-field,#colours.cmf-progressive .cmf-step .colour-panel-field{padding:0 14px 16px}
 #colours.cmf-progressive .cmf-step .colour-swatches{gap:4px}
 #colours.cmf-progressive .cmf-step-title{font-size:14px}
 #colours.cmf-progressive .cmf-step-value{font-size:11px;gap:6px}
 #colours.cmf-progressive .cmf-step-action{font-size:10px}
 #colours.cmf-progressive .cmf-step .colour-panel-choice span{font-size:11px;padding-inline:3px}
}
@media(prefers-reduced-motion:reduce){.cmf-step,.cmf-step-chevron{transition:none!important}}
/* Keep the real product in view while the compact chooser progresses. */
@media(max-width:999px){
 #colours.cmf-progressive{--cmf-preview-height:clamp(150px,30svh,260px)}
 #colours.cmf-progressive>.colour-visual{position:sticky;top:94px;align-self:start;z-index:2;height:var(--cmf-preview-height);min-height:0;border:1px solid var(--line);border-radius:22px;background:radial-gradient(ellipse at 50% 50%,#b3bf9e26,transparent 72%),var(--paper);box-shadow:0 8px 18px #17221c0a}
 #colours.cmf-progressive :is(.cmf-step,.colour-preset,.colour-swatch,.colour-panel-choice){scroll-margin-block-start:calc(108px + var(--cmf-preview-height));scroll-margin-block-end:88px}
}
@media(min-width:600px) and (max-width:999px){
 #colours.cmf-progressive{grid-template-columns:minmax(0,.72fr) minmax(0,1fr);column-gap:22px;--cmf-preview-height:min(520px,calc(100svh - 128px))}
 #colours.cmf-progressive .colour-copy>:is(.eyebrow,h2,p:not(.colour-note)){grid-column:1/-1}
 #colours.cmf-progressive>.colour-visual{grid-column:1;grid-row:4/9}
 #colours.cmf-progressive .colour-copy>.colour-presets{grid-column:2;grid-row:4}
 #colours.cmf-progressive .colour-copy>#colour-controls{grid-column:2;grid-row:5}
 #colours.cmf-progressive .colour-copy>.cmf-step--panels{grid-column:2;grid-row:6}
 #colours.cmf-progressive .colour-copy>.colour-actions{grid-column:2;grid-row:7}
 #colours.cmf-progressive .colour-copy>.colour-note{grid-column:2;grid-row:8}
 #colours.cmf-progressive :is(.cmf-step,.colour-preset,.colour-swatch,.colour-panel-choice){scroll-margin-block-start:108px}
 #colours.cmf-progressive .cmf-step-heading{grid-template-columns:17px minmax(40px,.55fr) minmax(0,1fr) auto 11px;gap:7px;min-height:72px;padding:14px}
 #colours.cmf-progressive .cmf-step .colour-field,#colours.cmf-progressive .cmf-step .colour-panel-field{padding:0 14px 16px}
 #colours.cmf-progressive .cmf-step .colour-swatches{gap:4px}
 #colours.cmf-progressive .cmf-step .colour-swatch>span{width:28px;height:28px}
 #colours.cmf-progressive .cmf-step-title{font-size:14px}
 #colours.cmf-progressive .cmf-step-value{font-size:11px;gap:6px}
 #colours.cmf-progressive .cmf-step-action{font-size:10px}
 #colours.cmf-progressive .cmf-step .colour-panel-options{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:599px) and (max-height:520px){
 #colours.cmf-progressive>.colour-visual{position:relative;top:auto;height:240px}
 #colours.cmf-progressive :is(.cmf-step,.colour-preset,.colour-swatch,.colour-panel-choice){scroll-margin-block-start:108px}
}
@media(max-width:999px){
 #colours.cmf-progressive .colour-preset-options{scrollbar-width:none;-ms-overflow-style:none}
 #colours.cmf-progressive .colour-preset-options::-webkit-scrollbar{display:none;width:0;height:0}
}