/* --- Styling for [show_fixed_computers_promo] Shortcode (Vanilla CSS) --- */

.new-arrival-carousel {
    margin: 0px !important;
}

/* 1. Overall Wrapper */
.new-arrival-wrapper {
    max-width: 100%;
    /* Full width */
    overflow: hidden;
    /* Important for border-radius and layout */
}

/* 2. Main Row (Flex Container) */
.new-arrival-main-row {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center; /* Tetap center */
    gap: 0;
}

.new-arrival-main,
.new-arrival-banner {
    flex-grow: 1;
    flex-shrink: 1;
    max-width: 100%;
}

/* 3. Banner Column */
.new-arrival-banner {
    display: none;
    /* Hidden by default (like d-none) */
    width: 100%;
    /* Default width before breakpoints */
    height: auto;
    /* Let image define height initially */
}

/* 4. Main Content Column */
.new-arrival-main {
    padding: 1.25rem;
    width: 100%;
    background: linear-gradient(180deg, rgb(8,97,206) 0%, rgb(237,42,75) 100%);
    /* Full width by default */
}

/* --- Responsive Column Widths (Replicating Bootstrap Grid) --- */
/* Medium screens and up (>= 768px, Bootstrap 'md') */
@media (min-width: 768px) {
    .new-arrival-banner {
        display: block;
        /* Show banner (like d-md-block) */
        width: 41.666667%;
        /* approx 5/12 (like col-md-5) */
        height: auto;
        /* Allow column height to be determined by content/flex */
    }

    .new-arrival-main {
        width: 58.333333%;
        /* approx 7/12 (like col-md-7) */
    }

    .new-arrival-main-inner {
        height: 100%;
        
        /* Try to match banner height */
    }

    .new-arrival-banner img.new-arrival-image {
        height: 100%;
        /* Make image fill banner height */
    }
}

/* Large screens and up (>= 992px, Bootstrap 'lg') */
@media (min-width: 992px) {
    .new-arrival-banner {
        width: 24%;
        /* 4/12 (like col-lg-4) */
    }

    .new-arrival-main {
        width: 72%;
        /* 8/12 (like col-lg-8) */
    }
}

/* 5. Banner Image Styling */
.new-arrival-banner img.new-arrival-image {
    display: block;
    /* Remove extra space below image */
    width: 100%;
    /* Fill column width */
    /* height: 100%; */
    /* Height is handled via media query now */
    object-fit: cover;
    /* Cover the area */
}

/* 6. Inner Wrapper for Main Content */
.new-arrival-main-inner {
    /*border-left: 1px solid #EF4444;*/
    /* Add left border now that it's separate */
    /* Border and overflow are applied directly here */
    /* border-radius: 0 6px 6px 0; */
    /* Rounded corners on the right */
    /* height: 100%; */
    /* Attempt to match height in flex row */
}

/* Adjust border radius based on screen size */
/* Full rounded corners on small screens when banner is hidden */
.new-arrival-main-inner {
    border-radius: 6px;
    /* Fully rounded */
    border-left: none;
    display: flex;
    flex-direction: column;
    gap: 20px
    /* No left border needed when full width */
}

@media (min-width: 768px) {
    .new-arrival-main-inner {
        border-radius: 0 6px 6px 0;
        /* Right side rounded only */
        /* Add left border when next to banner */
    }
}

/* 7. Header Section */
.new-arrival-header {
    display: flex;
    align-items: center;
    /* Vertically center items */
    justify-content: space-between;
    /* Title left, Link right */
    /* padding: 1rem; */
    /* Equivalent to p-3 (adjust value if needed) */
    /* background-color: #F97316; */
    /* Orange background */
    color: #ffffff;
    /* White text */
}

.new-arrival-header .new-arrival-title {
    margin: 0;
    font-size: 18px;
    color: #ffffff;
    font-weight: 600;
    text-transform: uppercase;
}

.new-arrival-header .new-arrival-view-more {
    font-weight: 500;
    color: #ffffff;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    text-transform: uppercase;
}

@media screen and (max-width: 768px) {
    .new-arrival-header .new-arrival-view-more {
        font-size: 10px !important;
    }
    
}

.new-arrival-header .new-arrival-view-more:hover {
    text-decoration: underline;
}

/* 8. Product Content Area */
.new-arrival-content {
    height: 100%;
}

/* --- End Scoped Product Styling --- */

.new-arrival-content .gridview {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-content: space-between;
    background: white;
}

.new-arrival-content .gridview .list-col8 {
    display: flex !important;
    flex-direction: column;
    align-content: start;
    justify-content: space-between;
    height: max-content;
    padding: 16px 12px 26px 12px !important;
}

.new-arrival-content .gridview .list-col8 .product-name {
    display: flex !important;
    align-self: start !important;
    justify-self: start !important;
}

/* .new-arrival-content .owl-nav {
    display: block !important;
 } */