@charset "utf-8";
/* --- ANTI-GRAVITY GRID FIX V24 (Lifted Bottom Text) --- */

/* 0. Container Width Rescue */
.resultbox,
.newresultbox {
    width: 1210px !important;
    max-width: 100% !important;
}

/* 1. Grid Container */
.logo_img {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 15px 12px !important;
    justify-content: stretch !important;
    align-items: start !important;
    padding: 10px 0 !important;
    width: 100% !important;
    list-style: none !important;
}

/* 2. Grid Items */
.logo_img li {
    float: none !important;
    width: auto !important;
    min-height: 255px !important;
    box-sizing: border-box !important;
    border: solid 1px #ccc !important;
    padding: 0px !important;
    background: #fff !important;
    overflow: visible !important;
    position: relative !important;
    margin: 0 !important;
    cursor: pointer !important;
    transition: z-index 0s !important;
}

/* Hover Z-Index */
.logo_img li:hover {
    z-index: 1000 !important;
    border-color: transparent !important;
}

/* 2.5 Intermediate Containers */
.logo_img li .slipbox {
    display: block !important;
    width: 100% !important;
}

.logo_img li .slipbox>a {
    display: block !important;
    width: 100% !important;
    text-decoration: none !important;
}

/* 3. Image Container */
.logo_img li .image-wrapper,
.logo_img li .result-image-wrapper,
.logo_img li .slipbox>a:first-child {
    width: 100% !important;
    height: 205px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #fff !important;
    box-sizing: border-box !important;
    position: relative !important;
    margin: 0 !important;
}

/* 4. Image Logic */
.logo_img li img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    border: none !important;
}

/* 5. Text Line (.lop) */
.logo_img li .lop {
    position: relative !important;
    z-index: 50 !important;
    min-height: 24px !important;
    line-height: 24px !important;
    /* V24: Reduced Margin to Lift Text ~4px (from 5px to 1px) */
    margin-top: 1px !important;
    padding: 0 5px !important;
    text-align: left !important;
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    font-size: 12px !important;
}

/* Login/Price (Visual Right) */
.logo_img li .lop .main_nav,
.logo_img li .lop em:last-child {
    float: none !important;
    order: 2 !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
}

/* Category + ID (Visual Left) */
.logo_img li .tybox {
    float: none !important;
    order: 0 !important;
    margin-right: 5px !important;
}

/* 6. Title Box */
.logo_img li .titbox {
    height: 24px !important;
    line-height: 24px !important;
    overflow: hidden !important;
    text-align: center !important;
    margin-top: 0px !important;
    padding: 0 5px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
}

.logo_img li .titbox a {
    color: #333 !important;
    font-size: 14px !important;
}

/* 7. Hover Border Overlay */
.logo_img li::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    border: 2px solid transparent !important;
    pointer-events: none !important;
    z-index: 9999 !important;
}

.logo_img li:hover::after {
    border-color: #F60 !important;
}

/* 8. Slipmore / Collection - V23 OPTICAL CENTER */
.logo_img li .slipmore {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 20000 !important;
    pointer-events: none !important;
    background: transparent !important;
}

.logo_img li .slipmore em {
    display: none !important;
}

.logo_img li:hover .slipmore em {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    position: absolute !important;
    top: 0px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: auto !important;
    height: auto !important;
    padding: 0 !important;

    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    z-index: 20001 !important;
    pointer-events: auto !important;
}

/* The Button Look - V23 OPTICAL CENTER for "Text" */
.logo_img li:hover .slipmore em a {
    position: relative !important;
    display: block !important;

    padding: 2px 24px 2px 24px !important;

    height: 24px !important;
    line-height: 22px !important;

    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 0 0 10px 10px !important;

    color: #fff !important;
    font-size: 12px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    text-align: center !important;
    text-indent: 0 !important;
}

/* Pseudo-element for Star Icon - ABSOLUTE POSITIONED */
.logo_img li:hover .slipmore em a::before {
    content: "\2606" !important;
    position: absolute !important;
    left: 6px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;

    font-size: 14px !important;
    font-family: Arial, sans-serif !important;
    line-height: 1 !important;
}

.logo_img li:hover .slipmore em a:hover {
    background: #f60 !important;
    color: #fff !important;
}


/* Fix Links */
.logo_img li a {
    text-decoration: none !important;
}

/* Filter Visibility */
.s_tabox,
.s_tabox .contable,
#jDropDown {
    overflow: visible !important;
    visibility: visible !important;
    display: block !important;
}

#jDropDown .column_3 {
    z-index: 9999 !important;
}