/* The editor and the public wardrobe use identical, independently stacked columns. */
#inventory-container.wardrobe-layout {
    display: block;
    width: 100%;
    max-width: min(2160px, calc(100vw - 36px));
    min-width: 0;
    margin: 0 auto;
    padding: 0;
    position: relative;
    box-sizing: border-box;
    overflow-anchor: none;
    column-gap: 20px;
}
#inventory-container.wardrobe-layout > .category-section {
    width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}
#inventory-container.wardrobe-layout.layout-packed > .category-section {
    position: absolute;
    width: var(--layout-width);
    left: var(--layout-x);
    top: var(--layout-y);
}
.wardrobe-layout .category-header { flex-wrap: wrap; gap: 8px; }
.wardrobe-layout .category-grid { grid-template-columns: repeat(var(--wardrobe-item-columns, 6), minmax(0, 1fr)); }
.wardrobe-layout .item-cell, .wardrobe-layout .add-item-button {
    width: 100%;
    height: auto;
    padding-top: 0;
    aspect-ratio: 1;
}
.layout-toolbar {
    width: 100%;
    max-width: min(2160px, calc(100vw - 36px));
    margin: 0 auto 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    text-align: left;
}
.layout-toolbar button, .layout-toolbar select, .layout-handle {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #334155;
    padding: 9px 14px;
    min-height: 44px;
    font: inherit;
}
.layout-toolbar button:disabled { opacity: .55; cursor: default; }
.layout-toolbar [hidden], .layout-handle[hidden] { display: none !important; }
.layout-toolbar .layout-save { background: #3b82f6; border-color: #3b82f6; color: white; }
.layout-toolbar [role="status"] { font-size: .875rem; }
.layout-help { flex-basis: 100%; font-size: .875rem; color: #475569; }
.layout-handle { cursor: grab; touch-action: none; user-select: none; margin-left: auto; }
.layout-handle:focus-visible, .layout-toolbar button:focus-visible {
    outline: 3px solid #60a5fa;
    outline-offset: 3px;
}
.layout-editing > .category-section { min-height: 124px; }
.layout-editing .category-grid { display: none; }
.layout-editing .category-header { margin: 0; border: 0; font-size: 1rem; }
#inventory-container.wardrobe-layout .layout-drop-slot {
    position: absolute;
    width: var(--layout-width);
    left: var(--layout-x);
    top: var(--layout-y);
    min-height: 124px;
    height: auto;
    border: 2px dashed #3b82f6;
    border-radius: 10px;
    background: rgba(59,130,246,.12);
    display: grid;
    place-items: center;
    color: #2563eb;
    font-size: .875rem;
    box-sizing: border-box;
    pointer-events: none;
}
/* The sibling cards move smoothly out of the way as a slot is inserted. */
@media (prefers-reduced-motion: no-preference) {
    #inventory-container.wardrobe-layout.layout-editing.layout-packed > .category-section:not(.layout-dragging):not(.layout-settling) {
        transition: top 155ms cubic-bezier(.2, .8, .2, 1),
                    left 155ms cubic-bezier(.2, .8, .2, 1);
    }
    #inventory-container.wardrobe-layout.layout-editing .layout-drop-slot {
        transition: top 130ms ease-out, left 130ms ease-out;
    }
    @keyframes wardrobe-pickup {
        0%   { transform: scale(.985) rotate(0deg); filter: brightness(1); }
        65%  { transform: scale(1.055) rotate(1.25deg); filter: brightness(1.035); }
        100% { transform: scale(1.035) rotate(.65deg); filter: brightness(1.025); }
    }
}
#inventory-container.wardrobe-layout.layout-packed > .category-section.layout-dragging {
    position: fixed !important;
    z-index: 3000 !important;
    pointer-events: none;
    opacity: .97;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .28);
    transform: scale(1.035) rotate(.65deg);
    transition: none !important;
    will-change: left, top, transform;
    cursor: grabbing;
}
@media (prefers-reduced-motion: no-preference) {
    #inventory-container.wardrobe-layout.layout-packed > .category-section.layout-dragging {
        animation: wardrobe-pickup 185ms cubic-bezier(.2, .75, .25, 1.1) both;
    }
}
#inventory-container.wardrobe-layout.layout-packed > .category-section.layout-settling {
    transition: none !important;
    transform-origin: top left;
    will-change: transform;
}

body.site-theme-star .layout-toolbar button,
body.site-theme-star .layout-toolbar select,
body.site-theme-star .layout-handle {
    background: #1d2d60;
    border-color: #526795;
    color: #e0e7ff;
}
body.site-theme-star .layout-toolbar .layout-save { background: #2955a2; }
body.site-theme-star .layout-help { color: #bfdbfe; }
body.site-theme-star .layout-drop-slot { color: #bfdbfe; border-color: #60a5fa; }
@media (max-width: 768px) {
    #inventory-container.wardrobe-layout { column-gap: 15px; }
    .wardrobe-layout .category-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .layout-toolbar { gap: 8px; }
}

.layout-viewport {
    width: 100%;
    max-width: min(2160px, calc(100vw - 24px));
    margin: 0 auto;
    overflow-x: auto;
    padding: 4px 6px;
}
#inventory-container[data-layout-columns="6"] > .category-section { padding: 12px; }
#inventory-container[data-layout-columns="6"] .category-header { font-size: 1rem; gap: 6px; }
#inventory-container[data-layout-columns="6"] .category-total { font-size: .8rem; }
#open-tool-settings-btn.wardrobe-settings-button { width: auto; height: auto; min-height: 40px; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.wardrobe-columns-select { min-height: 40px; padding: 6px 14px; border: 1px solid #cbd5e1; border-radius: 8px; background: white; color: #334155; }
body.site-theme-star .wardrobe-columns-select { background: #1d2d60; color: #e0e7ff; border-color: #526795; }
.wardrobe-settings-toolbar { flex-wrap: wrap; gap: 12px; }


@media (min-width: 769px) {
    #inventory-container[data-layout-columns="6"] > .category-section {
        padding: 14px;
    }
    #inventory-container[data-layout-columns="6"] .category-header {
        font-size: 1.02rem;
    }
    #inventory-container[data-layout-columns="6"] .category-total {
        font-size: .82rem;
    }
}