/* 
   MODERN UI V2 OVERLAY 
   Backporting design system from Website B to Website A
   Strictly scoped under .modern-ui-v2
*/

/* 1. Global Identity Injection */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;400;500;600;700&display=swap');

.modern-ui-v2 {
    font-family: 'Public Sans', sans-serif !important;
    line-height: 1.5 !important;
    font-size: 13px !important;
    color: #1b1b28 !important;
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Global Transition Smoothness */
.modern-ui-v2 *,
.modern-ui-v2 *::before,
.modern-ui-v2 *::after {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease !important;
}

/* 2. Global "Square-off" Philosophy */
.modern-ui-v2 .rounded,
.modern-ui-v2 .rounded-lg,
.modern-ui-v2 .rounded-md,
.modern-ui-v2 .rounded-sm,
.modern-ui-v2 .btn,
.modern-ui-v2 .form-control,
.modern-ui-v2 .card,
.modern-ui-v2 .aiz-card-box,
.modern-ui-v2 .aiz-megabox-elem,
.modern-ui-v2 .modal-content,
.modern-ui-v2 .aiz-range-slider .noUi-handle,
.modern-ui-v2 .badge {
    border-radius: 0px !important;
}

/* 3. Global Border and Shadow Reset */
.modern-ui-v2 .border,
.modern-ui-v2 .border-light {
    border-color: #ededf2 !important;
}

.modern-ui-v2 .shadow-sm,
.modern-ui-v2 .shadow-md,
.modern-ui-v2 .shadow-lg,
.modern-ui-v2 .hov-shadow-md:hover,
.modern-ui-v2 .hov-shadow-lg:hover {
    box-shadow: none !important;
}

/* Add subtle hover shadow and highlight box */
.modern-ui-v2 .aiz-card-box {
    position: relative;
    overflow: hidden;
    border: 0px none !important;
    /* Remove legacy borders */
    background: #fff;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

/* The "Up to Down" Highlight Box */
.modern-ui-v2 .aiz-card-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    border: 2px solid #e62e04;
    opacity: 0;
    pointer-events: none;
    transition: height 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.2s ease !important;
    z-index: 10;
}

.modern-ui-v2 .aiz-card-box:hover::after {
    height: 100%;
    opacity: 1;
}

.modern-ui-v2 .aiz-card-box:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-5px) !important;
}

/* Image Scaling on Hover */
.modern-ui-v2 .aiz-card-box:hover img {
    transform: scale(1.05) !important;
}

/* Button Reveal Interaction - App-like slide up */
.modern-ui-v2 .aiz-card-box .cart-btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #e62e04 !important;
    transform: translateY(100%) !important;
    transition: transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    z-index: 5;
}

.modern-ui-v2 .aiz-card-box:hover .cart-btn {
    transform: translateY(0%) !important;
}

/* Icon Slide-in from Right */
.modern-ui-v2 .aiz-p-hov-icon a {
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    transform: translateX(25px) !important;
    opacity: 0 !important;
}

.modern-ui-v2 .aiz-card-box:hover .aiz-p-hov-icon a {
    transform: translateX(0px) !important;
    opacity: 1 !important;
}

/* 4. Container & Layout (Website B Alignment) */
.modern-ui-v2 .container {
    max-width: 1140px !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
}

/* 5. Typography Scale Overrides */
.modern-ui-v2 h1,
.modern-ui-v2 .h1,
.modern-ui-v2 h2,
.modern-ui-v2 .h2,
.modern-ui-v2 h3,
.modern-ui-v2 .h3,
.modern-ui-v2 h4,
.modern-ui-v2 .h4,
.modern-ui-v2 .section-title {
    color: #1b1b28 !important;
    font-weight: 700 !important;
}

.modern-ui-v2 .section-title {
    font-size: 1.25rem !important;
    margin-bottom: 2rem !important;
    padding-bottom: 1rem !important;
    border-bottom: 2px solid #e62e04 !important;
    /* Primary accent border */
    display: inline-block;
    position: relative;
}

.modern-ui-v2 .section-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #1b1b28;
    transition: width 0.3s ease;
}

.modern-ui-v2 .section-title:hover::after {
    width: 100%;
}

/* 6. Page-Specific: Homepage */
.page-home section {
    margin-bottom: 3.5rem !important;
    /* Standardized spacing */
    padding-top: 1rem !important;
}

/* Today's Deals Peach Sidebar */
.todays-deal-sidebar {
    background-color: #fbece9 !important;
    /* Exact Peach from Screenshot */
    border-color: #f5d5cc !important;
}

.todays-deal-sidebar .deal-card {
    transition: all 0.3s ease;
    border-width: 2px !important;
    overflow: hidden;
}

.todays-deal-sidebar .deal-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(230, 46, 4, 0.1) !important;
}

/* Category Strip (Card Style) */
.modern-ui-v2 .category-card {
    border: 1px solid #f0f0f0 !important;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    background: #fff;
}

.modern-ui-v2 .category-card:hover {
    border-color: #E62E04 !important;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
}

.modern-ui-v2 .category-card .img-content {
    background: #fff;
}

/* Category Section Refinements */
.gutters-16 {
    margin-right: -8px;
    margin-left: -8px;
}

.gutters-16>.col,
.gutters-16>[class*="col-"] {
    padding-right: 8px;
    padding-left: 8px;
}

.h-180px {
    height: 180px !important;
}

.w-150px {
    width: 150px !important;
}

@media (min-width: 768px) {
    .size-md-200px {
        width: 200px !important;
        height: 200px !important;
    }
}

@media (min-width: 992px) {
    .size-lg-280px {
        width: 280px !important;
        height: 280px !important;
    }
}

.home-category-banner {
    position: relative;
    transition: transform 0.3s ease;
}

.home-category-banner:hover {
    transform: scale(1.02);
}

.home-category-name {
    transition: all 0.3s ease;
}

.home-category-banner:hover .home-category-name {
    padding-bottom: 15px !important;
    background: rgba(0, 0, 0, 0.6) !important;
}

/* Hero Split Adjustments */
.home-banner-area .todays-deal-list img {
    transition: transform 0.3s ease;
}

.home-banner-area .todays-deal-list .deal-card:hover img {
    transform: scale(1.05);
}

/* Banner Scaling Effect */
.modern-ui-v2 .hov-scale-img,
.modern-ui-v2 .hov-scale {
    overflow: hidden !important;
    display: block;
}

.modern-ui-v2 .hov-scale-img img,
.modern-ui-v2 .hov-scale:hover {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.modern-ui-v2 .hov-scale-img:hover img,
.modern-ui-v2 .hov-scale:hover {
    transform: scale(1.05) !important;
}

/* Category Box Refinement */
.modern-ui-v2 .category-box:hover .category-name {
    color: #e62e04 !important;
}

.modern-ui-v2 .category-box {
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

.modern-ui-v2 .category-box:hover {
    border-color: #ededf2 !important;
    background: #fff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05) !important;
}

@media (min-width: 992px) {
    .page-home section {
        margin-bottom: 4rem !important;
    }

    .page-home .container {
        max-width: 1400px !important;
        /* Home usually allows wider layout on B */
    }
}

/* 7. Page-Specific: Listings */
.page-listing .aiz-filter-sidebar {
    background: #fff !important;
    border: 1px solid #ededf2 !important;
}

.page-listing .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* Mobile 2-column grid force */
@media (max-width: 767px) {
    .page-listing .row-cols-2>.col {
        padding-right: 5px !important;
        padding-left: 5px !important;
    }
}

/* 8. Page-Specific: Product Details */
.page-product .bg-white.shadow-sm.rounded.p-3 {
    border: 1px solid #ededf2 !important;
}

.page-product h1 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
}

.page-product .text-primary {
    color: #e62e04 !important;
    /* Match B's high-contrast red */
}

/* 9. Buttons & Inputs */
.modern-ui-v2 .btn-primary {
    background-color: #e62e04 !important;
    border-color: #e62e04 !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* 10. Forms & Interactions */
.modern-ui-v2 .form-control:focus {
    border-color: #e62e04 !important;
    box-shadow: none !important;
}

.modern-ui-v2 .aiz-steps {
    border-bottom: 1px solid #ededf2 !important;
    padding-bottom: 1rem !important;
    margin-bottom: 2rem !important;
}

.modern-ui-v2 .aiz-steps .col.active .text-primary {
    color: #e62e04 !important;
}

.modern-ui-v2 .aiz-steps .col.done .text-success {
    color: #1f7f55 !important;
}

/* 11. Product Box Refinement */
.modern-ui-v2 .aiz-card-box {
    transition: all 0.3s ease !important;
}

/* Category Feature Section (Banner + products) */
.modern-ui-v2 .category-featured-section {
    background: #fff;
    border: 1px solid #ededf2;
    overflow: hidden;
}

.modern-ui-v2 .category-featured-section .row.no-gutters {
    display: flex;
}

.modern-ui-v2 .category-featured-section .category-banner {
    position: relative;
    height: 100%;
    min-height: 400px;
    background-size: cover;
    background-position: center;
}

@media (max-width: 991px) {
    .modern-ui-v2 .category-featured-section .category-banner {
        min-height: 200px;
    }
}

.modern-ui-v2 .aiz-card-box .p-2.p-md-3 {
    padding: 1rem !important;
}

.modern-ui-v2 .aiz-card-box .fs-14 {
    /* font-size: 16px !important; */
    font-weight: 500 !important;
}

.modern-ui-v2 .aiz-card-box .fw-700 {
    font-size: 16px !important;
    color: #e62e04 !important;
}

/* 12. Checkout Sidebar */
.page-checkout #cart_summary .card {
    border: 1px solid #ededf2 !important;
}

/* 13. Mobile Bottom Nav Reset (if applicable) */
.modern-ui-v2 .aiz-mobile-side-nav {
    border-radius: 0 !important;
}

/* 14. Badge Colors */
.modern-ui-v2 .badge-inline {
    border-radius: 0 !important;
    font-weight: 600 !important;
    padding: 4px 8px !important;
}