/* =====================================================================
   Modern storefront look (2026-10-31)
   Loaded after style.css / main.css. Only the look changes — every link,
   button and form is the same. Uses the site's theme colour (--theme-color).
   ===================================================================== */
:root {
    --mx-bg: #f4f6f9;
    --mx-line: #e7ebf0;
    --mx-text: #1f2937;
    --mx-muted: #6b7280;
    --mx-radius: 14px;
    --mx-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --mx-shadow-lg: 0 10px 28px rgba(16, 24, 40, .12);
}
body { background: var(--mx-bg); }

/* ---------------- header: logo · search · track / account / cart ---------------- */
.logo-area { background: #fff; border-bottom: 1px solid var(--mx-line); }
.main-search form { height: 44px; border: 1.5px solid var(--mx-line); border-radius: 999px; background: #f8fafc; transition: border-color .2s, box-shadow .2s, background .2s; }
.main-search form:focus-within { border-color: var(--theme-color); background: #fff; box-shadow: 0 0 0 4px rgba(0, 0, 0, .04); }
.main-search form input { background: transparent; font-size: 14px !important; padding: 0 20px; width: auto; flex: 1 1 auto; float: none; border: 0; outline: none; color: var(--mx-text); }
.main-search form button { width: 58px; flex: 0 0 58px; float: none; border-radius: 0 999px 999px 0; display: flex; align-items: center; justify-content: center; }
.main-search form button svg { width: 20px; }
/* the search placeholder does not jump up when the box is clicked */
.main-search input:focus::-webkit-input-placeholder, .mobile-search input:focus::-webkit-input-placeholder { transform: none !important; font-size: inherit !important; opacity: .45 !important; }
.search_product { border-radius: 12px; border-color: var(--mx-line); box-shadow: var(--mx-shadow-lg); overflow: hidden; top: 6px; }
.header-list-items ul { gap: 6px; }
.header-list-items ul li.track_btn a, .header-list-items ul li.for_order a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; color: var(--mx-text) !important; font-size: 14px; font-weight: 500; transition: background .2s; }
.header-list-items ul li.track_btn a:hover, .header-list-items ul li.for_order a:hover { background: #f1f4f8; }
.header-list-items ul li.track_btn a i, .header-list-items ul li.for_order a i { color: var(--theme-color); }
.header-list-items .cart-dialog > a { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #f1f4f8; transition: background .2s; }
.header-list-items .cart-dialog > a:hover { background: #e7ecf3; }
.header-list-items .cart-dialog > a i { color: var(--theme-color) !important; }
.cshort-summary { border-radius: 14px !important; box-shadow: var(--mx-shadow-lg) !important; border: 1px solid var(--mx-line) !important; }

/* ---------------- menu bar + drop-downs ---------------- */
.menu-area { border: 0; box-shadow: 0 2px 10px rgba(0, 0, 0, .08); }
.catagory_menu > ul { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; }
.catagory_menu > ul > li.cat_bar > a { margin: 0 !important; padding: 12px 14px; border-radius: 0; font-size: 14.5px; font-weight: 500; letter-spacing: .1px; position: relative; display: flex !important; align-items: center; gap: 6px; }
.catagory_menu > ul > li.cat_bar > a .cat_head { padding: 0 !important; }
.catagory_menu > ul > li.cat_bar > a .cat_down { padding: 0 !important; font-size: 11px; opacity: .8; transition: transform .2s; }
.catagory_menu > ul > li.cat_bar:hover > a .cat_down { transform: rotate(180deg); }
.catagory_menu > ul > li.cat_bar > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: #fff; transform: scaleX(0); transition: transform .2s; opacity: .9; }
.catagory_menu > ul > li.cat_bar:hover > a::after { transform: scaleX(1); }
.catagory_menu .cat_bar > a:hover { background-color: transparent !important; }

.menu-area .Cat_menu { top: calc(100% + 6px) !important; width: 250px; padding: 8px; border: 1px solid var(--mx-line); border-radius: 14px; box-shadow: var(--mx-shadow-lg); transform: translateY(6px); transition: opacity .18s, transform .18s, visibility .18s; }
.main-header .menu-area .cat_bar:hover .Cat_menu { transform: translateY(0); top: calc(100% + 6px) !important; }
/* an invisible bridge so the mouse can move from the menu to the drop-down */
.menu-area .Cat_menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
ul.Cat_menu li { padding: 0 !important; border-bottom: 0 !important; }
ul.Cat_menu li > a { display: flex !important; align-items: center; justify-content: space-between; margin: 0 !important; padding: 9px 12px !important; border-radius: 9px; transition: background .15s; }
ul.Cat_menu li > a span { color: var(--mx-text) !important; font-weight: 500 !important; font-size: 14px; }
ul.Cat_menu li > a:hover { background: #f3f6fa; }
ul.Cat_menu li > a:hover span { color: var(--theme-color) !important; }
ul.Cat_menu li a i { position: static !important; color: #9aa4b2 !important; font-size: 11px; width: auto !important; padding: 0 !important; }
.child_menu { left: calc(100% + 8px) !important; top: -8px !important; width: 230px !important; padding: 8px !important; border: 1px solid var(--mx-line) !important; border-radius: 14px !important; box-shadow: var(--mx-shadow-lg) !important; }
.child_menu::before { content: ""; position: absolute; top: 0; bottom: 0; left: -10px; width: 10px; }
ul.child_menu li { padding: 0 !important; border-bottom: 0 !important; width: 100% !important; }
ul.child_menu li a, li.child_main > a { display: block; padding: 8px 12px !important; border-radius: 9px; font-size: 13.5px !important; font-weight: 500 !important; text-transform: none !important; color: #374151 !important; }
ul.child_menu li a:hover { background: #f3f6fa; color: var(--theme-color) !important; }

/* ---------------- sections ---------------- */
.mx-home section.homeproduct { background: transparent; padding: 18px 0 !important; margin: 0 !important; }
.mx-home section.homeproduct > .container > .row { background: #fff; border: 1px solid var(--mx-line); border-radius: 18px; box-shadow: var(--mx-shadow); margin: 0; padding: 18px 10px 20px; }
@media (max-width: 767px) {
    .mx-home section.homeproduct { padding: 10px 0 !important; }
    .mx-home section.homeproduct > .container > .row { border-radius: 14px; padding: 12px 2px 14px; }
}
.sec_title { margin-bottom: 14px !important; border-bottom: 0 !important; padding-bottom: 0 !important; }
.sec_title .section-title-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; border: 0 !important; padding: 0 !important; }
.sec_title .section-title-header::before, .sec_title .section-title-header::after { display: none !important; }
.sec_title .timer_inner { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
.section-title-name { position: relative; display: inline-flex; align-items: center; padding-left: 14px !important; font-size: 21px !important; font-weight: 700 !important; color: var(--mx-text) !important; background: none !important; border: 0 !important; line-height: 1.3; }
.section-title-name::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 78%; border-radius: 4px; background: var(--theme-color); }
.mx-see-all { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--mx-line); background: #fff; color: var(--mx-text) !important; font-size: 13px; font-weight: 600; text-decoration: none; transition: border-color .2s, color .2s, background .2s; }
.mx-see-all:hover { border-color: var(--theme-color); color: var(--theme-color) !important; background: #fff; }
.mx-see-all i { font-size: 11px; }
@media (max-width: 767px) {
    .section-title-name { font-size: 17px !important; }
    .mx-see-all { padding: 6px 11px; font-size: 12px; }
}
/* "View More" under a section: a soft outline pill */
.view_more_btn { display: inline-flex !important; align-items: center; gap: 6px; float: none !important; margin: 14px auto 0 !important; padding: 9px 26px !important; border-radius: 999px !important; border: 1.5px solid var(--theme-color) !important; background: #fff !important; color: var(--theme-color) !important; font-weight: 600; font-size: 14px; }
.view_more_btn:hover { background: var(--theme-color) !important; color: var(--theme-text, #fff) !important; }
.show_more_btn { text-align: center; }

/* ---------------- top categories ---------------- */
.topcategory .cat_item { background: #fff; border: 1px solid var(--mx-line) !important; border-radius: 16px !important; padding: 10px 10px 4px !important; transition: transform .2s, box-shadow .2s, border-color .2s; }
.topcategory .cat_item:hover { transform: translateY(-3px); border-color: transparent !important; box-shadow: var(--mx-shadow-lg) !important; }
.topcategory .cat_img { border-radius: 12px; overflow: hidden; background: #f6f8fb; aspect-ratio: 1 / 1; }
.topcategory .cat_img img { width: 100% !important; height: 100% !important; object-fit: cover; transition: transform .3s; }
.topcategory .cat_item:hover .cat_img img { transform: scale(1.05); }
.topcategory .cat_name a { color: var(--mx-text) !important; font-weight: 600; font-size: 13.5px; }
.topcategory .owl-item { padding: 6px 5px 12px !important; }

/* ---------------- product cards (home, category, search …) ---------------- */
.product_item { border: 1px solid var(--mx-line) !important; border-radius: 14px !important; padding: 8px !important; background: #fff; box-shadow: none; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.product_item:hover { transform: translateY(-3px); border-color: transparent !important; box-shadow: var(--mx-shadow-lg); }
.product_item .product_item_inner { flex: 1 1 auto; }
.product_item .pro_img { border-radius: 10px; overflow: hidden; background: #f6f8fb; }
.product_item_inner:hover .pro_img img { transform: scale(1.05); }
.product_item_inner .sale-badge { top: 14px; left: 14px; z-index: 2; }
.product_item_inner .sale-badge-inner { width: auto; }
.product_item_inner .sale-badge-box { background: #ef4444 !important; border-radius: 999px !important; padding: 3px 9px !important; box-shadow: 0 2px 6px rgba(239, 68, 68, .35); }
.product_item_inner span.sale-badge-text, .product_item_inner span.sale-badge-text p { font-size: 11px !important; font-weight: 700 !important; margin: 0 !important; color: #fff !important; line-height: 1.3; }
.product_item .pro_des { text-align: left; padding: 10px 4px 2px; }
.product_item .pro_name { height: auto !important; min-height: 2.7em; display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 4px !important; padding: 0 !important; line-height: 1.35; }
.product_item .pro_name a { color: var(--mx-text) !important; font-size: 14px !important; font-weight: 500; text-transform: none !important; }
.product_item .pro_name a:hover { color: var(--theme-color) !important; }
.product_item .pro_price { margin: 4px 0 2px; }
.product_item .pro_price p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; justify-content: flex-start; margin: 0; font-size: 16px !important; font-weight: 700 !important; color: var(--theme-color) !important; }
.product_item .pro_price del { order: 2; color: #9aa4b2 !important; font-size: 12.5px !important; font-weight: 400 !important; }
.product_item .pro_btn { margin-top: 8px; padding: 0 !important; }
.product_item .pro_btn button, .product_item .pro_btn .addcartbutton { display: flex !important; align-items: center; justify-content: center; width: 100% !important; height: 40px; margin: 0 !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 600; letter-spacing: .2px; }
.product_item .pro_btn .cart_btn { width: 100%; margin: 0 !important; }
@media (max-width: 767px) {
    .product_item { padding: 6px !important; border-radius: 12px !important; }
    .product_item:hover { transform: none; }
    .product_item .pro_name a { font-size: 13px !important; }
    .product_item .pro_price p { font-size: 14.5px !important; }
    .product_item .pro_btn button, .product_item .pro_btn .addcartbutton { height: 36px; font-size: 13px !important; border-radius: 9px !important; }
    .product_item_inner .sale-badge { top: 10px; left: 10px; }
}
/* home lists: a little more room between the cards */
@media (min-width: 992px) { .homeproduct .product_sliders { gap: 16px !important; } }
.hotdeal_slider .owl-item { padding: 4px 2px 14px; }
.hotdeal_slider .owl-stage { display: flex; }
.hotdeal_slider .owl-item { display: flex; }
.hotdeal_slider .product_item { width: 100%; margin-bottom: 0; }

/* hot deal timer: small rounded boxes */
.offer_timer .syotimer-cell { border-radius: 10px !important; }

/* ---------------- slider ---------------- */
@media (min-width: 992px) {
    section.slider-section.slider-full .main_slider .owl-nav button { width: 44px; height: 44px; border-radius: 50% !important; background: rgba(255, 255, 255, .85) !important; box-shadow: var(--mx-shadow-lg); color: var(--mx-text) !important; }
}

/* ---------------- footer ---------------- */
footer .footer-top { background: #fff; border-top: 1px solid var(--mx-line); padding-top: 44px !important; }
footer .footer-menu ul li.title a, footer .footer-aboutus .fau-title { color: var(--mx-text) !important; font-weight: 700 !important; letter-spacing: .4px; }
footer .footer-menu ul li a { color: #4b5563 !important; transition: color .2s, padding-left .2s; }
footer .footer-menu ul li:not(.title) a:hover { color: var(--theme-color) !important; padding-left: 3px; }
footer .social_link { gap: 8px; }
footer .social_link .mobile-social-link { display: inline-flex !important; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #f1f4f8; color: var(--mx-text) !important; transition: background .2s, color .2s; }
footer .social_link .mobile-social-link:hover { background: var(--theme-color); color: var(--theme-text, #fff) !important; }
footer .footer-hotlint { font-weight: 700; color: var(--theme-color) !important; }

/* ---------------- hot sale block: sits on the page like the other sections ---------------- */
.hs-wrap { background: transparent !important; padding: 34px 0 18px !important; margin: 0 !important; }
.hs-frame { background: #fff !important; border-radius: 18px !important; box-shadow: var(--mx-shadow); }
.hs-title { box-shadow: 0 0 0 6px var(--mx-bg) !important; }
.hs-card { border-color: var(--mx-line) !important; border-radius: 14px !important; }
.hs-card:hover { box-shadow: var(--mx-shadow-lg) !important; border-color: transparent !important; }

/* the "View More" link is in the section header on tablet / computer — the bottom button only on mobile */
@media (min-width: 576px) {
    .mx-home .homeproduct .view_more_btn { display: none !important; }
}

/* product grids: the gap between the rows comes from the grid (no extra space under each card) */
.product_sliders > .product_item { margin-bottom: 0 !important; }
@media (max-width: 767px) { .homeproduct .product_sliders { gap: 10px !important; } }
/* category blocks: "View More" is in the header on every screen — no second button at the bottom */
.mx-home .homeproduct .show_more_btn { display: none !important; }

/* smart search box list (2026-11-06): did you mean, categories, "see all", nothing found */
.search_product { max-height: min(75vh, 620px); overflow-y: auto !important; -webkit-overflow-scrolling: touch; }
.search_product ul { margin: 0; padding: 0; }
.search_product .ss-note { padding: 9px 15px; font-size: 13.5px; color: #555; border-bottom: 1px solid #eee; background: #fffbea; }
.search_product .ss-note a { font-weight: 700; color: var(--theme-color, #b74135); text-decoration: underline; }
.search_product .ss-cats { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 9px 15px; border-bottom: 1px solid #eee; font-size: 13px; color: #666; }
.search_product .ss-cats a { padding: 3px 10px; border-radius: 14px; border: 1px solid #ddd; color: #333; background: #fafafa; line-height: 1.5; }
.search_product .ss-cats a:hover { border-color: var(--theme-color, #b74135); color: var(--theme-color, #b74135); }
.search_product .ss-all { display: block; padding: 11px 15px; text-align: center; font-weight: 700; font-size: 14px; color: var(--theme-color, #b74135); background: #fafafa; }
.search_product .ss-all:hover { background: #f1f1f1; }
.search_product .ss-empty { padding: 14px 15px; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: #333; }
.search_product .ss-empty small { color: #777; font-size: 12.5px; line-height: 1.5; }
.search_product .ss-related-title { padding: 8px 15px 4px; font-size: 12.5px; font-weight: 700; color: #777; border-top: 1px solid #eee; text-transform: none; }
/* search page */
.ss-page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 4px 0 14px; font-size: 14px; color: #555; }
.ss-page-head .ss-suggest-line a { font-weight: 700; color: var(--theme-color, #b74135); text-decoration: underline; }
.ss-page-head .ss-cats a { display: inline-block; margin: 0 4px 4px 0; padding: 3px 11px; border-radius: 14px; border: 1px solid #ddd; color: #333; background: #fff; font-size: 13px; }
.ss-page-empty { padding: 30px 16px; text-align: center; background: #fff; border: 1px dashed #ddd; border-radius: 12px; margin-bottom: 20px; }
.ss-page-empty h3 { font-size: 18px; margin: 0 0 6px; }
.ss-page-empty p { margin: 0; color: #777; font-size: 14px; }
.ss-related-head { font-size: 17px; font-weight: 700; margin: 10px 0 12px; }
@media (max-width: 767px) { .mobile-search .search_product { max-height: calc(100vh - 300px); max-height: calc(100dvh - 300px); } }