/* DEL-040: retained layout and state hooks; presentation follows shared web tokens. */
.sock-production-note{color:var(--mg-text-muted);margin:16px 0 4px}
.band-upload-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:12px}
.band-upload-actions button{min-height:36px}
.config-range[hidden]{display:none}
.config-upload>span{display:block;margin-top:4px;color:var(--mg-text)}
.config-range input{width:100%;accent-color:var(--mg-color-purple)}
.mp-placement-group{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 20px}
.mp-placement-group button{display:flex;align-items:center;gap:8px;min-height:66px;border:1px solid var(--mg-divider);border-radius:var(--mg-radius);background:var(--mg-surface);color:var(--mg-text);padding:12px;cursor:pointer}
.mp-placement-group svg{width:36px;height:36px;fill:none;stroke:currentColor;stroke-width:1.5}
.mp-placement-group .placement-spot{fill:var(--mg-color-purple);stroke:none}
.mp-placement-group button[aria-pressed=true]{border-color:var(--mg-divider);background:var(--ci-soft,#edf3ed)}
.mp-editor .mp-adjust{border:1px solid var(--mg-divider);border-radius:var(--mg-radius);padding:12px 16px;margin:16px 0}
.mp-adjust summary{min-height:26px}
.mp-editor .mp-adjust .mp-range{margin:16px 0}
.mp-adjust input[type=range]{height:24px;accent-color:var(--mg-color-purple)}
@media(max-width:600px){
.mp-placement-group button{padding:8px;min-height:64px}
.mp-editor .mp-adjust{padding:12px}}



/* Hero interactions and customer project carousel. */
.hero-demo-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 0 12px;font:700 14px/20px var(--mg-font-family);color:var(--mg-text)}
.hero-demo-heading>span:first-child{display:flex;align-items:center;gap:8px}
.hero-demo-heading i{width:6px;height:6px;border-radius:50%;background:var(--mg-color-purple);flex:none}
.hero-demo-heading>span:last-child{font:400 12px/16px var(--mg-font-expanded);color:var(--mg-text-muted);text-align:right}
.hero-quick-actions{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:12px}
.hero-quick-actions button{min-height:44px;padding:10px 12px;border:1px solid var(--mg-control-border);border-radius:var(--mg-radius);background:#fff;color:var(--mg-text);font:400 14px/20px var(--mg-font-family)}
.hero-quick-actions button[aria-pressed=true]{border-color:var(--mg-color-purple);background:var(--mg-color-purple-50);box-shadow:none}
.hero-quick-actions a{display:inline-flex;align-items:center;min-height:44px;font:700 14px/20px var(--mg-font-family);color:var(--mg-color-purple);margin:0}
.hero-color-actions button{display:flex;gap:8px;align-items:center}
.hero-sole-field{display:grid;grid-template-columns:1fr;gap:8px;margin-top:12px;font:400 14px/20px var(--mg-font-family)}
.hero-sole-field input{width:100%;min-height:48px;font:400 16px/24px var(--mg-font-family);margin:0}
.reference-showcase{padding-block:var(--mg-section-space);border:0}
.reference-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.reference-heading>p{font:700 18px/28px var(--mg-font-family);margin:0;color:var(--mg-text)}
.reference-nav button{min-height:44px;padding:10px 12px;font:400 14px/20px var(--mg-font-family);background:#fff;color:var(--mg-text);border:1px solid var(--mg-control-border)}
.reference-nav>span{font:400 13px/20px var(--mg-font-expanded);color:var(--mg-text-muted)}
.reference-showcase .brand-example{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--mg-grid-gap);border:0;border-radius:var(--mg-radius);background:var(--mg-color-purple-50);overflow:hidden}
.reference-showcase .brand-example-photo{height:auto;min-height:0;aspect-ratio:1;background:var(--mg-surface-soft)}
.reference-showcase .brand-example-photo img{width:100%;height:100%;object-fit:contain;filter:none}
.reference-showcase .brand-example-copy{padding:32px;display:flex;align-items:start;flex-direction:column;justify-content:center}
.reference-showcase .brand-example-copy h2{font-size:var(--mg-type-h2-size);line-height:var(--mg-type-h2-line);max-width:16ch}
.reference-showcase .brand-example-copy>p:not(.eyebrow){font:400 var(--mg-type-body-size)/var(--mg-type-body-line) var(--mg-font-family);margin-top:16px;color:var(--mg-text-muted);max-width:36ch}
.reference-showcase .brand-example-copy .eyebrow{font:400 14px/20px var(--mg-font-family);margin-bottom:12px;color:var(--mg-color-purple)}
.reference-showcase .brand-example-copy .underlink{margin-top:24px;min-height:44px}
.reference-selector{margin-top:24px}
.reference-selector>p{font:700 14px/20px var(--mg-font-family);margin-bottom:12px}
.reference-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 5 * var(--mg-grid-gap)) / 6);gap:var(--mg-grid-gap);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;padding:4px 4px 12px;margin:-4px;scrollbar-width:thin}
.reference-choice{min-width:0;padding:8px;border:1px solid var(--mg-control-border);scroll-snap-align:start;cursor:pointer;background:#fff;color:var(--mg-text);border-radius:var(--mg-radius)}
.reference-choice .reference-sample{height:auto;aspect-ratio:4/5;object-fit:contain;background:var(--mg-surface-soft)}
.reference-choice>span{font:400 13px/18px var(--mg-font-family);margin-top:8px}
.reference-choice[aria-pressed=true]{border-color:var(--mg-color-purple);background:var(--mg-color-purple-50);box-shadow:none}
.reference-scroll-hint{font:400 13px/18px var(--mg-font-family);color:var(--mg-text-muted)}
@media(max-width:767px){.reference-showcase .brand-example{grid-template-columns:1fr;gap:0}.reference-showcase .brand-example-copy{padding:24px}.reference-showcase .brand-example-copy h2{max-width:none}.reference-showcase .brand-example-copy>p:not(.eyebrow){max-width:none}.reference-heading{align-items:start;gap:16px;flex-wrap:wrap}.reference-track{grid-auto-columns:calc((100% - 24px) / 2.4)}.reference-nav{margin-left:auto}}
@media(min-width:768px) and (max-width:1023px){.reference-track{grid-auto-columns:calc((100% - 60px)/4)}}

/* Actual demonstration garment colour chips, not semantic interface colours. */
.hero-color-actions i{display:block;width:16px;height:16px;border:1px solid var(--mg-control-border);border-radius:50%;background:#fff}
.hero-color-actions .demo-black i{background:#30332f}.hero-color-actions .demo-lilac i{background:#b9a3de}

.reference-nav{display:flex;align-items:center;gap:8px}
.reference-colors{display:flex;gap:8px;margin-top:20px}
.reference-colors span{display:block;width:24px;height:8px;border-radius:var(--mg-radius)}
.reference-choice .reference-logo{display:block;width:80%;height:28px;object-fit:contain;margin:12px auto 4px}
.reference-scroll-hint{display:block;margin-top:8px}