/* ============================================================ Homepage design upgrade — additive, scoped to existing markup classes so it layers cleanly over style.css without touching Owl Carousel behaviour or blade structure. NOTE: this file is pushed into @stack('css') in the , which renders BEFORE style.css/main.css/responsive.css in the shared master layout. Any property that style.css also sets on the same selector must carry !important here, or style.css (loaded later) wins on equal specificity. Only redeclared properties get !important — untouched properties are left alone so the rest of the site's cascade is unaffected. ============================================================ */ :root { --upg-red: #e02020; --upg-red-dark: #b71919; --upg-ink: #1f2937; --upg-muted: #6b7280; --upg-line: #edf0f2; --upg-radius: 16px; --upg-radius-sm: 10px; --upg-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06); --upg-shadow-hover: 0 10px 20px rgba(16, 24, 40, .08), 0 22px 44px rgba(16, 24, 40, .10); } body { background: #f2f3f5 !important; } /* ---------- Section shells: turn flat blocks into elevated cards ---------- */ .homeproduct, .bottoads_area, .footer_top_ads_area { background: #fff; border-radius: var(--upg-radius); box-shadow: var(--upg-shadow); margin-bottom: 18px !important; padding: 22px 20px !important; } /* ---------- Section headers ---------- */ .sec_title { margin-bottom: 18px !important; } .section-title-header { border-bottom: 1px solid var(--upg-line) !important; padding-bottom: 14px !important; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .section-title-header .section-title-name { font-size: 21px !important; font-weight: 700 !important; font-family: "Lato", sans-serif; color: var(--upg-ink) !important; letter-spacing: .2px; padding: 0 0 0 14px !important; position: relative; display: inline-block; bottom: auto !important; } .section-title-header .section-title-name::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 5px; border-radius: 4px; background: linear-gradient(180deg, var(--upg-red), var(--upg-red-dark)); } a.view_more_btn { background: var(--upg-ink) !important; border-radius: 999px !important; padding: 9px 18px !important; font-size: 13px !important; font-weight: 600; letter-spacing: .2px; transition: .25s ease; float: none !important; } a.view_more_btn:hover { background: var(--upg-red) !important; transform: translateX(2px); } /* ---------- Hero slider ---------- */ section.slider-section { margin-top: 14px !important; margin-bottom: 18px !important; } .home-slider-container { border-radius: var(--upg-radius); overflow: hidden; box-shadow: var(--upg-shadow); } .home-slider-container .slider-item img { display: block; width: 100%; } .main_slider .owl-prev, .main_slider .owl-next { border-radius: 50%; background: rgba(255, 255, 255, .9) !important; box-shadow: 0 4px 14px rgba(0, 0, 0, .18); display: flex !important; align-items: center; justify-content: center; } .main_slider .owl-next i, .main_slider .owl-prev i { color: var(--upg-ink); font-size: 16px; } .main_slider .owl-next i:hover, .main_slider .owl-prev i:hover { color: var(--upg-red) !important; } /* ---------- Sidebar category menu ---------- */ .sidebar-menu { border-radius: var(--upg-radius) !important; box-shadow: var(--upg-shadow); padding: 6px; } .sidebar-menu li a { border-radius: var(--upg-radius-sm); margin: 2px 4px; } .sidebar-menu ul li:hover > a { background-color: #fdecec !important; color: var(--upg-red) !important; } /* ---------- Category chips ---------- */ .cat_item { border: 1px solid var(--upg-line) !important; border-radius: var(--upg-radius) !important; padding: 14px 8px 10px !important; height: auto !important; min-height: 140px; background: #fff; transition: .3s ease; } .cat_item:hover { border-color: transparent !important; box-shadow: var(--upg-shadow-hover); transform: translateY(-4px); } .cat_item .cat_img { width: 78px; height: 78px; margin: 0 auto; border-radius: 50%; background: #f7f8fa; display: flex; align-items: center; justify-content: center; overflow: hidden; transition: .3s ease; } .cat_item:hover .cat_img { background: #fdecec; } .cat_item .cat_img img { width: 62%; height: 62%; object-fit: contain; } .cat_name { padding: 10px 4px 0 !important; } .cat_name a { font-size: 13.5px; font-weight: 600; color: var(--upg-ink); } /* ---------- Product cards ---------- */ .product_item { border: 1px solid var(--upg-line) !important; border-radius: var(--upg-radius) !important; padding: 14px !important; margin-bottom: 24px !important; background: #fff; transition: .3s ease; } .product_item:hover { margin-top: 6px !important; border-color: transparent !important; box-shadow: var(--upg-shadow-hover); transform: translateY(-5px); } .product_item:hover .product_item_inner { border-color: transparent !important; } .pro_img { height: 190px !important; border-radius: var(--upg-radius-sm); background: #fafafa; } .product_item_inner .sale-badge { top: 8px !important; right: 8px !important; } .product_item_inner .sale-badge-inner { --sale-badge-width: 42px; } .product_item_inner .sale-badge-box { background: linear-gradient(135deg, var(--upg-red), var(--upg-red-dark)) !important; box-shadow: 0 4px 10px rgba(224, 32, 32, .35); } .pro_name a { font-size: 14px !important; color: var(--upg-ink) !important; transition: .2s ease; } .product_item:hover .pro_name a { color: var(--upg-red) !important; } .product_item i { color: #f5a623 !important; font-size: 12px; } .pro_price { margin-top: 10px !important; } .pro_price p { font-weight: 700 !important; color: var(--upg-ink) !important; } .pro_price del { font-size: 13px !important; color: #b6bac1 !important; } .cart_btn.order_button a, .pro_btn button { background: var(--upg-ink) !important; border-radius: 999px !important; font-weight: 600; letter-spacing: .2px; } .cart_btn.order_button a:hover, .pro_btn button:hover { background: var(--upg-red) !important; } /* ---------- Ad banners ---------- */ .bottoads_inner { display: grid; gap: 12px; } .ads_item { border-radius: var(--upg-radius-sm); overflow: hidden; box-shadow: var(--upg-shadow); } .ads_item img { display: block; width: 100%; transition: .4s ease; } .ads_item:hover img { transform: scale(1.03); } .footertop_ads_item { border-radius: var(--upg-radius-sm); overflow: hidden; box-shadow: var(--upg-shadow); } /* full-width promo banners between product sections */ section:has(> .container > .row > .col-md-12 > a > img.img-fluid.w-100) .col-md-12 a { display: block; border-radius: var(--upg-radius); overflow: hidden; box-shadow: var(--upg-shadow); margin-bottom: 18px; transition: .3s ease; } section:has(> .container > .row > .col-md-12 > a > img.img-fluid.w-100) .col-md-12 a:hover { box-shadow: var(--upg-shadow-hover); transform: translateY(-2px); } /* ---------- Customer reviews strip ---------- */ .customer-review .border.rounded { border-radius: var(--upg-radius-sm) !important; overflow: hidden; box-shadow: var(--upg-shadow); border-color: transparent !important; } /* ---------- Responsive tuning ---------- */ @media (max-width: 767px) { .homeproduct, .bottoads_area, .footer_top_ads_area { padding: 16px 12px !important; border-radius: 12px; } .section-title-header .section-title-name { font-size: 17px !important; } a.view_more_btn { padding: 7px 14px !important; font-size: 12px !important; } .pro_img { height: 130px !important; } }