/* ========================================
   BUILD PRODUCT DETAIL - IMPROVEMENTS
   ======================================== */

/* Metal display clean text styling for single-option products */
.metal-display-clean {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 0 !important;
    margin: 8px 0 !important;
    font-family: 'Lato-Regular' !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #424242 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-rendering: optimizeLegibility !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

.metal-icon {
    width: 33px !important;
    height: 33px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    flex-shrink: 0 !important;
}

/* Metal-specific background images */
.metal-icon.wg-metalfilter {
    background-image: url(/B2CTheme/images/wg-metal-fliter.png) !important;
}

.metal-icon.tt-metalfilter {
    background-image: url(/B2CTheme/images/tt-metal-fliter.png) !important;
}

.metal-icon.yg-metalfilter {
    background-image: url(/B2CTheme/images/yg-metal-fliter.png) !important;
}

.metal-icon.rg-metalfilter {
    background-image: url(/B2CTheme/images/rg-metal-fliter.png) !important;
}

.metal-icon.pt-metalfilter {
    background-image: url(/B2CTheme/images/pt-metal-fliter.png) !important;
}

.metal-icon.pp-metalfilter {
    background-image: url(/B2CTheme/images/pp-metal-fliter.png) !important;
}

/* Mobile responsiveness for metal display */
@media (max-width: 767px) {
    .metal-display-clean {
        font-size: 13px !important;
        gap: 6px !important;
    }
    
    .metal-icon {
        width: 28px !important;
        height: 28px !important;
    }
}

/* ========================================
   BUILD PRODUCT DETAIL - DROPDOWN ALIGNMENT
   ======================================== */

/* RESPECT ORIGINAL DESIGN: Override only specific alignment issues */
@media (min-width: 768px) {
    /* Keep original 44% width but ensure proper alignment */
    .product-select2 {
        width: 44% !important;  /* RESTORE original width */
        float: left !important;
        margin-right: 2% !important;  /* Add spacing between elements */
    }
    
    /* REMOVED: .web-size rule conflicts with hide rule in Oldstyle.css */
    
    /* Keep original metal button dimensions */
    .metal_filter_select a.metal_filter_select_title {
        width: 186px !important;  /* Already correct in original */
        height: 18px !important;  /* Already correct in original */
    }
}

/* Mobile - RESTORE original responsive behavior */
@media (max-width: 767px) {
    .product-select2 {
        width: 100% !important;  /* RESTORE original mobile width */
        margin: 10px 0 !important;  /* RESTORE original mobile margin */
        float: none !important;
    }
    
    /* REMOVED: .web-size rule conflicts with hide rule in Oldstyle.css */
    
    .metal_filter_select {
        width: 100% !important;
        float: none !important;
    }
}