#blacksmith-layout {
    padding: 1.5rem;
    height: calc(100vh - 5rem); /* Keep height */
    background-color: var(--clay-darkest); /* Use theme variable */
    color: var(--clay-text-primary); /* Use theme variable */
}

#crafting-options {
    display: flex; /* Keep layout */
    gap: 1.5rem; /* Keep layout */
    justify-content: center; /* Keep layout */
}

.option-card {
    background: var(--gradient-surface); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    border-radius: 0.75rem; /* Keep rounding */
    padding: 1.5rem; /* Keep padding */
    box-shadow: var(--clay-shadow); /* Use theme variable */
    text-align: center; /* Keep layout */
    cursor: pointer; /* Keep interaction */
    transition: transform 0.2s, box-shadow 0.2s; /* Keep transition */
    color: var(--clay-text-primary); /* Use theme variable */
}

/* REMOVED HOVER EFFECT FOR OPTION CARD
.option-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--clay-shadow-heavy);
    border-color: var(--clay-border-light);
} */

.option-card img {
    width: 128px; /* Keep size */
    height: 128px; /* Keep size */
    object-fit: contain; /* Adjusted */
    margin-bottom: 1rem; /* Keep spacing */
    border-radius: 0.5rem; /* Keep rounding */
}
.option-card h2 {
    color: var(--clay-text-primary); /* Ensure heading color */
}

#weapon-types-grid {
    display: grid; /* Keep layout */
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); /* Keep layout */
    gap: 1.5rem; /* Keep layout */
}

.weapon-type-card {
    background: var(--gradient-surface); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    border-radius: 0.75rem; /* Keep rounding */
    padding: 1rem; /* Keep padding */
    box-shadow: var(--clay-shadow); /* Use theme variable */
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    align-items: center; /* Keep layout */
    text-align: center; /* Keep layout */
    cursor: pointer; /* Keep interaction */
    color: var(--clay-text-primary); /* Use theme variable */
}
/* REMOVED HOVER EFFECT FOR WEAPON TYPE CARD
.weapon-type-card:hover {
    border-color: var(--clay-border-light);
    box-shadow: var(--clay-shadow-heavy);
    transform: translateY(-2px);
} */

#weapon-crafting-container, #armor-crafting-container {
    display: grid; /* Keep layout */
    grid-template-columns: 1fr 1fr; /* Keep layout */
    gap: 1.5rem; /* Keep layout */
    height: calc(100% - 4rem); /* Adjust height slightly to account for back button */
    margin-top: 1rem; /* Add margin */
}

#weapon-list-column, #armor-list-column {
    background: var(--gradient-surface); /* Use theme variable */
    border: 1px solid var(--clay-border); /* Use theme variable */
    border-radius: 0.75rem; /* Consistent rounding */
    box-shadow: var(--clay-shadow); /* Use theme variable */
    height: 100%; /* Keep layout */
    overflow-y: auto; /* Keep layout */
    padding: 1rem; /* Keep padding */
    display: grid; /* Keep layout */
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); /* Keep layout */
    gap: 1rem; /* Keep layout */
    align-content: start; /* Keep layout */
}

#weapon-details-column, #armor-details-column {
     background: var(--gradient-surface); /* Use theme variable */
     border: 1px solid var(--clay-border); /* Use theme variable */
     border-radius: 0.75rem; /* Consistent rounding */
     box-shadow: var(--clay-shadow); /* Use theme variable */
     height: 100%; /* Keep layout */
     overflow-y: auto; /* Keep layout */
     display: flex; /* Keep layout */
     flex-direction: column; /* Keep layout */
     color: var(--clay-text-primary); /* Use theme variable */
     padding: 1.5rem; /* Keep padding */
}

.crafting-grid-item {
    aspect-ratio: 1 / 1; /* Keep layout */
    padding: 0.5rem; /* Keep padding */
    border-radius: 0.5rem; /* Keep rounding */
    cursor: pointer; /* Keep interaction */
    transition: all 0.2s; /* Keep transition */
    border: 1px solid var(--clay-border); /* Use theme variable */
    background-color: var(--clay-dark); /* Use theme variable */
    display: flex; /* Keep layout */
    align-items: center; /* Keep layout */
    justify-content: center; /* Keep layout */
}

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

.crafting-grid-item.selected {
    background-color: var(--clay-medium); /* Use theme variable */
    border-color: var(--clay-focus); /* Use theme variable */
    transform: scale(1.03); /* Slightly less scale when selected */
    box-shadow: 0 0 10px var(--clay-glow); /* Use theme variable */
}

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

.back-button {
    /* Styles are handled by clay-theme.css */
    margin-bottom: 1rem; /* Keep spacing */
    align-self: flex-start; /* Align button */
}

.weapon-details-content, .armor-details-content {
    display: flex; /* Keep layout */
    flex-direction: column; /* Keep layout */
    height: 100%; /* Keep layout */
}

.weapon-header, .armor-header {
    display: flex; /* Keep layout */
    align-items: center; /* Keep layout */
    gap: 1.5rem; /* Keep spacing */
    padding-bottom: 1rem; /* Reduced padding */
    border-bottom: 1px solid var(--clay-border); /* Use theme variable */
    margin-bottom: 1rem; /* Added margin */
}

.weapon-detail-image, .armor-detail-image {
    width: 80px; /* Reduced size */
    height: 80px; /* Reduced size */
    object-fit: contain; /* Keep layout */
    background-color: var(--clay-dark); /* Use theme variable */
    border-radius: 0.5rem; /* Keep rounding */
    padding: 0.5rem; /* Keep padding */
    flex-shrink: 0; /* Keep layout */
    border: 1px solid var(--clay-border); /* Use theme variable */
}

.weapon-title h3, .armor-title h3 {
    font-size: 1.25rem; /* Reduced size */
    font-weight: 600; /* Adjusted weight */
    margin: 0 0 0.5rem 0; /* Keep spacing */
    color: var(--clay-text-primary); /* Ensure color */
}

.weapon-base-attack, .armor-base-value {
    display: flex; /* Keep layout */
    align-items: center; /* Keep layout */
    gap: 0.5rem; /* Keep spacing */
    background-color: var(--clay-dark); /* Use theme variable */
    color: var(--clay-text-primary); /* Use theme variable */
    padding: 0.4rem 0.8rem; /* Adjusted padding */
    border-radius: 0.375rem; /* Keep rounding */
    width: fit-content; /* Keep layout */
    border: 1px solid var(--clay-border); /* Use theme variable */
}

.weapon-base-attack .label, .armor-base-value .label {
    font-weight: 500; /* Adjusted weight */
    font-size: 0.8rem; /* Adjusted size */
    color: var(--clay-text-secondary); /* Use theme variable */
}

.weapon-base-attack .value, .armor-base-value .value {
    font-size: 1rem; /* Adjusted size */
    font-weight: 700; /* Adjusted weight */
    font-family: monospace;
}

.armor-type {
    font-size: 0.9rem; /* Adjusted size */
    font-weight: 500; /* Adjusted weight */
    color: var(--clay-text-tertiary); /* Use theme variable */
}

.weapon-body, .armor-body {
    flex-grow: 1; /* Keep layout */
    overflow-y: auto; /* Keep layout */
    padding-top: 1rem; /* Reduced padding */
    padding-right: 0.5rem; /* Add padding for scrollbar */
}

.details-section {
    margin-bottom: 1.5rem; /* Keep spacing */
}

.details-section h4 {
    font-size: 1rem; /* Adjusted size */
    font-weight: 600; /* Adjusted weight */
    margin-bottom: 0.75rem; /* Reduced margin */
    color: var(--clay-text-tertiary); /* Use theme variable */
    border-bottom: 1px solid var(--clay-border); /* Add subtle divider */
    padding-bottom: 0.3rem; /* Add padding below border */
}

.stats-grid {
    display: grid; /* Keep layout */
    grid-template-columns: 1fr; /* Single column for stats */
    gap: 0.5rem; /* Reduced gap */
}

.stat-item {
    /* Styles handled by clay-theme.css */
}

.stat-item .label {
    /* Styles handled by clay-theme.css */
}

.stat-item .value {
    /* Styles handled by clay-theme.css */
}

.cost-grid {
    display: grid; /* Keep layout */
    gap: 0.5rem; /* Reduced gap */
}

.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; /* Reduced size */
    height: 20px; /* Reduced size */
    margin-right: 0.5rem; /* Reduced margin */
}

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

.cost-item .value {
    font-weight: 600; /* Keep weight */
    color: var(--clay-text-primary); /* Use theme variable */
    font-size: 0.8rem; /* Adjusted size */
    font-family: monospace;
}

.weapon-footer, .armor-footer {
    padding-top: 1rem; /* Reduced padding */
    margin-top: auto; /* Keep layout */
    border-top: 1px solid var(--clay-border); /* Use theme variable */
}

.craft-button {
    /* Styles handled by clay-theme.css */
    padding: 0.75rem; /* Consistent padding */
    font-size: 1rem; /* Adjusted size */
}

/* Crafting Modal Styles inherit from main.css */

/* Remove redundant stat background colors if defined in clay-theme.css */
/* Ensure text within stat blocks uses theme colors */
.stat-item .label,
.item-attribute .label {
    color: var(--clay-text-secondary) !important;
}
.stat-item .value,
.item-attribute .value {
    color: var(--clay-text-primary) !important;
}

/* Ensure cost item text uses theme colors */
.cost-item .label { color: var(--clay-text-secondary); }
.cost-item .value { color: var(--clay-text-primary); }
/* Highlight insufficient resources */
.cost-item .value.insufficient { color: var(--clay-error) !important; font-weight: 700; }