/* Visual wardrobe controls retain the original named values for submission. */
#wardrobe-picker select.carousel-value{display:none!important}
.wardrobe-selectors>div,.stockings-box{min-width:0}
.wardrobe-carousel{display:grid;grid-template-columns:38px minmax(0,1fr) 38px;gap:8px;align-items:center;margin:8px 0 16px;min-width:0}
.wardrobe-carousel>button{padding:0;width:38px;height:44px;font-size:30px;line-height:1;border:1px solid var(--line);background:#fbfaf6;color:var(--ink);border-radius:4px;cursor:pointer}
.wardrobe-carousel>button:disabled{opacity:.4;cursor:not-allowed}
.wardrobe-carousel-card{min-width:0;min-height:100px;border:1px solid #8a7556;background:#f4f3eb;text-align:center;display:flex;flex-direction:column;justify-content:center;touch-action:pan-y;overflow:hidden}
.wardrobe-carousel-card:focus-visible,.wardrobe-carousel>button:focus-visible{outline:3px solid #8a7556;outline-offset:3px}
.wardrobe-carousel .wardrobe-carousel-card img{width:100%;height:240px;object-fit:contain;margin:0;background:#eeeae1}
.wardrobe-carousel-status{display:flex;flex-direction:column;gap:8px;padding:14px 8px}
.wardrobe-carousel-status strong{font-size:14px;font-weight:600}
.wardrobe-carousel-status small{font-size:11px;color:#71634f}
.carousels-ready #outfit-preview,.carousels-ready #lingerie-preview,.carousels-ready #footwear-preview,.carousels-ready #hosiery-reference-preview{display:none!important}
.wardrobe-carousel img[hidden]{display:none!important}
.stockings-box .wardrobe-carousel-card{min-height:76px}
@media(max-width:640px){.wardrobe-selectors{grid-template-columns:1fr}.wardrobe-carousel .wardrobe-carousel-card img{height:260px}.hosiery-selectors{grid-template-columns:1fr}}

/* Keep navigation in the title row, independent of preview dimensions. */
.wardrobe-carousel{align-items:start}
.wardrobe-carousel>button{margin-top:16px;align-self:start}
.wardrobe-carousel-card{justify-content:flex-start}
.wardrobe-carousel-status{order:-1;min-height:76px;box-sizing:border-box;justify-content:center;overflow-wrap:anywhere}
#admin-hosiery>.hosiery-selectors{grid-template-columns:minmax(0,1fr)}
#admin-hosiery>.hosiery-selectors>div{min-width:0}

.wardrobe-column{display:flex;flex-direction:column;gap:20px;min-width:0}
.wardrobe-selectors{align-items:start}
.outer-clothing-last{grid-column:1/-1}
@media(max-width:640px){.outer-clothing-last{grid-column:auto}}

/* Compact stocking controls sit directly beneath the preview and checkbox. */
#wardrobe-picker #hosiery-help{display:none!important}
#wardrobe-picker #admin-hosiery{border:0;padding:0;margin:8px 0 0;min-width:0}
#wardrobe-picker #admin-hosiery>legend{display:none}
#wardrobe-picker #admin-hosiery>.hosiery-selectors{margin:0;padding:0;gap:0}

/* Automatic choices show examples without selecting any of them. */
.wardrobe-mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;background:#eeeae1}
.wardrobe-mosaic[hidden]{display:none!important}
.wardrobe-carousel .wardrobe-mosaic img{width:100%;height:130px;object-fit:contain;min-width:0}
.suspender-checkbox{display:flex;align-items:center;gap:10px;margin:12px 0 4px;cursor:pointer}
.suspender-checkbox input{width:20px;height:20px;margin:0;accent-color:#67583e}
.stocking-colour-picker{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.stocking-swatch{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:60px;padding:7px;border:1px solid transparent;border-radius:5px;background:transparent;color:var(--ink);font-size:12px;cursor:pointer}
.swatch-chip{width:27px;height:27px;border-radius:50%;border:1px solid #9e9788}
.stocking-swatch[aria-pressed="true"]{border-color:#67583e;background:#e9e4d8;box-shadow:0 0 0 1px #67583e}
.stocking-swatch:focus-visible,.suspender-checkbox input:focus-visible{outline:3px solid #67583e;outline-offset:3px}
.stocking-swatch:disabled{opacity:.4;cursor:not-allowed}

#wardrobe-picker .stocking-colour-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
#wardrobe-picker .stocking-swatch{width:100%;min-width:0;letter-spacing:normal;text-transform:none}
#wardrobe-picker .suspender-checkbox{display:flex;gap:10px;align-items:center}
#wardrobe-picker .suspender-checkbox input{flex:0 0 20px;width:20px;height:20px}

/* Clear navigation and an explicit automatic-choice label over the examples. */
.wardrobe-carousel{grid-template-columns:44px minmax(0,1fr) 44px;gap:8px}
.wardrobe-carousel>button{width:44px;height:48px;background:#29454b;color:#fff;border:2px solid #29454b;border-radius:8px;font-size:38px;font-weight:700;box-shadow:0 2px 4px #20383b24}
.wardrobe-carousel>button:hover:not(:disabled){background:#163238;border-color:#163238}
.wardrobe-carousel>button:active:not(:disabled){transform:translateY(1px)}
.wardrobe-carousel>button:disabled{background:#eeeae1;color:#71634f;border-color:#d7d1c5;box-shadow:none}
.wardrobe-carousel-visual{position:relative;width:100%}
.wardrobe-random-badge{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:7px;width:max-content;max-width:calc(100% - 16px);box-sizing:border-box;padding:9px 12px;border-radius:6px;background:#29454b;color:#fff;box-shadow:0 2px 8px #0003;font-size:12px;font-weight:600;line-height:1.3;pointer-events:none}
.wardrobe-random-badge[hidden]{display:none!important}
.wardrobe-random-badge>span{font-size:24px;line-height:1}
#wardrobe-picker .stockings-box{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
#wardrobe-picker .stockings-box>.hosiery-selectors{grid-template-columns:minmax(0,1fr);margin:0}
#wardrobe-picker #admin-hosiery{margin:0}
@media(max-width:540px){#wardrobe-picker .stockings-box{grid-template-columns:minmax(0,1fr);gap:16px}}

/* Restrained editorial controls match the cover and page typography. */
.wardrobe-carousel>button{background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:0;font-size:22px;font-weight:400;box-shadow:none}
.wardrobe-carousel>button:hover:not(:disabled){background:#e9ece2;border-color:var(--ink)}
.wardrobe-carousel-card{border-color:var(--line);background:#fbfaf6}
.wardrobe-carousel-status strong{font:20px Georgia,serif;font-weight:400}
.wardrobe-carousel-status small{font-size:10px;color:var(--muted);letter-spacing:.3px}
.wardrobe-carousel.is-automatic .wardrobe-carousel-card{min-height:150px;justify-content:center;background:#eff1e8}
.wardrobe-carousel.is-automatic .wardrobe-carousel-status{padding:28px 14px}
.wardrobe-carousel.is-automatic .wardrobe-carousel-visual{display:none}