/* -------------------------------------------------------------------------- */
/*                 MODERN UI 2026 - VISUAL UPGRADE LAYER                      */
/*         Focus: Shadow, Border-Radius, Depth, Typography (No Layout Changes)*/
/* -------------------------------------------------------------------------- */

/* 1. Global Visuals & Typography Polish */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
.TitleHeading {
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    color: #2c3e50 !important;
}

/* 2. Modern Product Cards */
/* 2. Modern Product Cards */
.Content .ProductList li {
    background: #fff;
    border: 1px solid #f0f0f0;
    /* Subtle border replacing old harsh ones */
    border-radius: 12px;
    /* Modern rounded corners */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    /* Keeps content inside rounded corners */
    width: 160px !important;
    /* Increased from 122px */
    min-height: 280px !important;
    float: left !important;
    /* FORCE GRID LAYOUT */
    margin-right: 8px !important;
    /* Reduced margin to fit 3 columns in ~546px container (160+16)*3 = 528px < 546px */
    margin-bottom: 20px !important;
    margin-left: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    /* Ensure no padding affects width */
    box-sizing: content-box !important;
    /* Legacy box model safety */
}

/* OVERRIDE LEGACY LIST VIEW INTERNALS causing text errors */
.Content .ProductList.List .ProductImage {
    float: none !important;
    width: 100% !important;
    height: 160px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
}

.Content .ProductList.List .ProductDetails {
    margin: 0 !important;
    padding: 10px !important;
    text-align: center !important;
    background: none !important;
}

.Content .ProductList.List .ProductQty,
.Content .ProductList.List .ProductDescription,
.Content .ProductList.List li .ProductCompareButton {
    display: none !important;
    /* Hide list-only elements that break grid card design */
}

.ProductList .ProductImage {
    width: 100% !important;
    height: 160px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.ProductList .ProductImage img {
    max-width: 90%;
    max-height: 90%;
}


/* Hover Effect: Lift & Shadow */
.ProductList li:hover {
    transform: translateY(-5px);
    /* Lift up effect */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.05);
    border-color: transparent;
    z-index: 10;
}

.ProductList .ProductImage {
    transition: transform 0.5s ease;
}

.ProductList li:hover .ProductImage {
    transform: scale(1.05);
    /* Subtle zoom on image */
}

/* 3. Modern Buttons */
/* "Add to Cart" / Action Buttons */
.Content .ProductList .ProductActionAdd a,
.Button,
input[type="submit"],
input[type="button"],
button {
    border-radius: 6px !important;
    background-image: linear-gradient(to bottom, #3498DB, #2980b9) !important;
    /* Soft gradient */
    border: none !important;
    box-shadow: 0 2px 4px rgba(52, 152, 219, 0.3) !important;
    text-transform: uppercase;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    cursor: pointer;
}

/* Button Hover State */
.Content .ProductList .ProductActionAdd a:hover,
.Button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
button:hover {
    opacity: 1 !important;
    background-image: linear-gradient(to bottom, #5dade2, #3498DB) !important;
    box-shadow: 0 4px 8px rgba(52, 152, 219, 0.4) !important;
    transform: translateY(-1px);
}

/* 4. Modern Input Fields */
input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
    border-radius: 6px !important;
    border: 1px solid #dcdcdc !important;
    padding: 6px 10px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

input[type="text"]:focus,
textarea:focus {
    border-color: #3498DB !important;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1) !important;
    outline: none;
}

/* 5. Block Content Polish (Sidebars & Main Content) */
.Block {
    border-radius: 8px;
    margin-bottom: 20px !important;
}

.Block h2,
.TitleHeading {
    border-bottom: 2px solid #eee !important;
    padding-bottom: 10px !important;
    margin-bottom: 15px !important;
    background-color: transparent !important;
    /* Remove old heavy backgrounds if any */
}

/* 6. Pricing Visibility */
.ProductPrice,
.ProductList em {
    color: #e74c3c !important;
    /* Vivid Red/Orange for price */
    font-size: 1.4em !important;
    font-weight: 700 !important;
}

/* 7. Image Softening */
img {
    border-radius: 4px;
    /* Slight rounding for all images */
}

/* Helper Cleanups */
.ProductList strong a {
    text-decoration: none !important;
    color: #333 !important;
    font-size: 1.1em;
    display: block;
    margin-bottom: 5px;
}

.ProductList strong a:hover {
    color: #3498DB !important;
}

/* 8. Product Details Layout Optimization */
.PrimaryProductDetails .ProductThumb {
    width: 40% !important;
    float: left !important;
    box-sizing: border-box !important;
    padding-right: 20px;
}

.PrimaryProductDetails .ProductMain {
    width: 60% !important;
    float: left !important;
    box-sizing: border-box !important;
    padding-left: 20px;
}

/* Ensure images in the thumb column don't overflow */
.PrimaryProductDetails .ProductThumb img {
    max-width: 100% !important;
    height: auto !important;
}