:root { /* Remove this block if vars are only in clay-theme.css */
    /* Keep only layout-specific variables if needed */
}

#magic-tailor-layout {
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    height: calc(100vh - 5rem); /* Keep height */
    padding: 1.5rem; /* Keep padding */
    background-color: var(--clay-darkest); /* Use theme variable */
    color: var(--clay-text-primary); /* Use theme variable */
    font-family: 'Inter', sans-serif;
    gap: 1.5rem; /* Add gap between header and content */
}

#magic-tailor-header { /* Added header container */
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clay-border);
    flex-shrink: 0;
}

#magic-tailor-back-button {
    /* Styles handled by clay-theme.css */
    margin-bottom: 0; /* Remove margin as it's in header now */
    align-self: center; /* Center vertically */
}

#magic-tailor-header h2 { /* Style for title */
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--clay-text-primary);
    margin: 0;
}

#tailor-tabs-container { /* Style for tabs container */
    display: flex;
    gap: 0.5rem;
}


#tailor-main-content {
    flex-grow: 1; /* Keep layout */
    display: grid; /* Use grid for layout */
    grid-template-columns: 1fr 1fr; /* Changed ratio to 50/50 */
    gap: 1.5rem; /* Use consistent gap */
    overflow: hidden; /* Prevent overflow */
}

#tailor-left-column,
#tailor-right-column {
    background: var(--gradient-surface); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    border-radius: 0.75rem; /* Keep rounding */
    box-shadow: var(--clay-shadow); /* Use theme variable */
    padding: 1rem; /* Reduced padding */
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    overflow: hidden; /* Prevent inner overflow */
}

#tailor-grid-container { /* Container for the grid itself */
    flex-grow: 1; /* Allow grid to fill space */
    overflow-y: auto; /* Allow grid scrolling */
    padding-right: 0.5rem; /* Space for scrollbar */
}


/* Tab/Option Buttons */
.tailor-option-btn {
    /* Styles handled by clay-theme.css */
    padding: 0.6rem 1rem; /* Adjusted padding */
    font-size: 0.85rem; /* Adjusted size */
}
.tailor-option-btn.active {
    color: var(--clay-secondary); /* Use theme variable */
    border-bottom: 2px solid var(--clay-secondary); /* Use theme variable */
    background-color: var(--clay-dark); /* Use theme variable */
    box-shadow: none; /* Remove tab shadow */
}

/* Armor Grid */
#armor-grid {
    display: grid; /* Keep layout */
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); /* Adjusted min size */
    gap: 0.75rem; /* Adjusted gap */
    align-content: start; /* Keep layout */
}

.armor-grid-item {
    aspect-ratio: 1 / 1; /* Keep layout */
    border-radius: 0.5rem; /* Adjusted rounding */
    background-color: var(--clay-dark); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    cursor: pointer; /* Keep interaction */
    transition: all 0.2s; /* Keep transition */
    overflow: hidden; /* Keep layout */
    position: relative; /* Keep layout */
    padding: 0.25rem; /* Add padding for image */
}

.armor-grid-item img {
    width: 100%; /* Keep layout */
    height: 100%; /* Keep layout */
    object-fit: contain; /* Keep layout */
}

/* REMOVED HOVER EFFECT FOR ARMOR GRID ITEM
.armor-grid-item:hover {
    transform: scale(1.05);
    border-color: var(--clay-focus);
    background-color: var(--clay-medium);
} */

.armor-grid-item.selected {
    border-color: var(--clay-focus); /* Use theme variable */
    box-shadow: 0 0 8px var(--clay-glow); /* Use theme variable */
    background-color: var(--clay-medium); /* Use theme variable */
}

.owned-badge,
.equipped-badge {
    /* Styles handled by clay-theme.css */
    position: absolute; /* Keep layout */
    bottom: 4px; /* Adjusted position */
    left: 50%; /* Keep layout */
    transform: translateX(-50%); /* Keep layout */
    font-size: 0.65rem; /* Adjusted size */
    padding: 0.1rem 0.4rem; /* Adjusted padding */
    z-index: 10; /* Keep layout */
}
.equipped-badge { z-index: 11; } /* Keep layout */


/* Details Panel */
#layered-armor-details-container {
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    height: 100%; /* Keep layout */
    overflow-y: auto; /* Allow details scrolling */
    padding-right: 0.5rem; /* Scrollbar padding */
}

.details-content {
    flex-grow: 1; /* Keep layout */
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    color: var(--clay-text-secondary); /* Use theme variable */
}

.details-header {
    display: flex; /* Keep layout */
    align-items: center; /* Keep layout */
    gap: 1rem; /* Adjusted gap */
    padding-bottom: 1rem; /* Keep padding */
    margin-bottom: 1rem; /* Adjusted margin */
    border-bottom: 1px solid var(--clay-border); /* Use theme variable */
}

.details-image {
    width: 100px; /* Adjusted size */
    height: 100px; /* Adjusted size */
    object-fit: contain; /* Keep layout */
    background-color: var(--clay-dark); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    border-radius: 0.5rem; /* Keep rounding */
    padding: 0.5rem; /* Keep padding */
    flex-shrink: 0; /* Keep layout */
}
.details-info {
    flex-grow: 1; /* Allow info to take space */
}

.details-name {
    font-size: 1.25rem; /* Adjusted size */
    font-weight: 600; /* Adjusted weight */
    color: var(--clay-text-primary); /* Use theme variable */
    margin-bottom: 0.25rem; /* Add margin */
}
.details-info p { /* Target type text */
    font-size: 0.8rem; /* Adjusted size */
    color: var(--clay-text-muted); /* Use theme variable */
}

.cost-section {
    margin-top: 1rem; /* Keep spacing */
    padding-top: 1rem; /* Keep padding */
    border-top: 1px solid var(--clay-border); /* Use theme variable */
}

.cost-section h4 {
    font-size: 1rem; /* Adjusted size */
    font-weight: 600; /* Keep weight */
    margin-bottom: 0.75rem; /* Adjusted margin */
    color: var(--clay-text-tertiary); /* Use theme variable */
}

.cost-grid {
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    gap: 0.5rem; /* Keep spacing */
}

.cost-item {
    display: flex; /* Keep layout */
    align-items: center; /* Keep layout */
    background-color: var(--clay-dark); /* Use theme variable */
    padding: 0.4rem 0.6rem; /* Adjusted padding */
    border-radius: 0.375rem; /* Keep rounding */
    border: 1px solid var(--clay-border); /* Use theme variable */
}

.cost-item img {
    width: 20px; /* Keep size */
    height: 20px; /* Keep size */
    margin-right: 0.5rem; /* Keep spacing */
}

.cost-item .label {
    flex-grow: 1; /* Keep layout */
    font-size: 0.8rem; /* Adjusted size */
    color: var(--clay-text-secondary); /* Use theme variable */
}

.cost-item .value {
    font-weight: 600; /* Keep weight */
    font-family: monospace;
    font-size: 0.8rem; /* Adjusted size */
    /* Color handled inline based on affordability */
}

.craft-btn, .equip-btn, .unequip-btn {
    /* Styles handled by clay-theme.css */
    width: 100%; /* Keep layout */
    padding: 0.6rem; /* Adjusted padding */
    margin-top: auto; /* Push button to bottom */
    font-size: 0.9rem; /* Adjusted size */
}
/* Adjust specific button colors if needed */
.craft-btn { background: var(--clay-success); color: #fff; border-color: #388E3C; }
/* REMOVED HOVER EFFECT FOR CRAFT BUTTON
.craft-btn:hover:not(:disabled) { background: #388E3C; } */
.equip-btn { background: var(--clay-info); color: #fff; border-color: #1976D2; }
/* REMOVED HOVER EFFECT FOR EQUIP BUTTON
.equip-btn:hover { background: #1976D2; } */
.unequip-btn { background: var(--clay-error); color: #fff; border-color: #D32F2F; }
/* REMOVED HOVER EFFECT FOR UNEQUIP BUTTON
.unequip-btn:hover { background: #D32F2F; } */


.placeholder-text-center {
    text-align: center; /* Keep layout */
    width: 100%; /* Keep layout */
    color: var(--clay-text-muted); /* Use theme variable */
    padding: 2rem 0; /* Add padding */
}