/* ========================================================================== Boi Bazar - global layout (bb-layout.css) Top bar, desktop header + live search + mini-cart, category menu, mobile header / search / drawer, footer, mobile bottom nav, floating chat, loader. Every selector is prefixed with .bb (class on ) so it beats the legacy /style.css + /responsive.css rules; the few !important flags below each answer a legacy !important (noted inline). ========================================================================== */ .bb { --bb-topbar-h: 36px; --bb-nav-h: 62px; } /* ========================================================================== 1. Header shell ========================================================================== */ .bb header#navbar_top { box-shadow: none; } /* Legacy header was position:fixed with a hard-coded 145px #content offset (it actually overlapped content by ~13px). The header now stays in flow: static on tablets (where the category bar wraps to two rows), sticky from 992px with a negative top so the slim top bar scrolls away while logo + search + category menu stay pinned. */ @media (min-width: 768px) { .bb header#navbar_top { position: relative; z-index: 9999; } .bb #content { padding-top: 0; } } @media (min-width: 992px) { /* Height of the pinned part (logo row + menu bar) - use as `top` for any sticky element in page content so it clears the header: top: calc(var(--bb-sticky-offset, 0px) + 16px). */ .bb { --bb-sticky-offset: 132px; } .bb header#navbar_top { position: sticky; top: calc(-1 * var(--bb-topbar-h)); } } /* ========================================================================== 2. Top bar (hotline chip + marquee) ========================================================================== */ .bb .top_header { position: relative; height: var(--bb-topbar-h); overflow: hidden; background: var(--bb-grad-field); color: #fff; } .bb .top_header .bb-topbar { display: flex; align-items: center; gap: 16px; height: 100%; } .bb .bb-hotline { display: none; flex: 0 0 auto; align-items: center; gap: 8px; height: 26px; padding: 0 12px 0 10px; border-radius: var(--bb-r-pill); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); color: #fff; font: 600 14px/1 var(--bb-font-ui); letter-spacing: .01em; white-space: nowrap; transition: background-color .2s var(--bb-ease); } .bb .bb-hotline i { color: var(--bb-gold-500); font-size: 13px; } .bb .bb-hotline:hover, .bb .bb-hotline:focus-visible { background: rgba(255, 255, 255, .2); color: #fff; } @media (min-width: 576px) { .bb .bb-hotline { display: inline-flex; } } .bb .bb-topbar__news { flex: 1 1 auto; min-width: 0; height: 100%; display: flex; align-items: center; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%); } .bb .bb-topbar__marquee { display: block; width: 100%; color: #fff; font: 500 14px/1.4 var(--bb-font-ui); } /* ========================================================================== 3. Desktop header row: logo | search | actions ========================================================================== */ .bb .main-header { background: #fff; } .bb .logo-area { padding: 14px 0; background: #fff; border-bottom: 1px solid var(--bb-line); } .bb .logo-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(20px, 3vw, 44px); } .bb .main-logo { height: auto; text-align: left; } .bb .main-logo a { display: inline-flex; align-items: center; width: auto; height: auto; } .bb .main-logo img { /* the logo file carries ~20% built-in whitespace */ display: block; width: auto; height: 54px; } /* ---- Search pill (desktop + mobile share the treatment) ---- */ .bb .main-search { position: relative; width: 100%; max-width: 680px; margin: 0; justify-self: center; } .bb .main-search form, .bb .mobile-search form { position: relative; display: flex; align-items: center; width: 100%; height: 48px; margin: 0; padding: 0 4px 0 20px; overflow: visible; background: #fff; border: 2px solid var(--bb-green-100); border-radius: var(--bb-r-pill); transition: border-color .2s var(--bb-ease), box-shadow .2s var(--bb-ease); } .bb .main-search form:hover, .bb .mobile-search form:hover { border-color: #C4E2CF; } .bb .main-search form:focus-within, .bb .mobile-search form:focus-within { border-color: var(--bb-green-600); box-shadow: 0 0 0 4px var(--bb-green-100); } .bb .main-search form input, .bb .mobile-search form input { flex: 1 1 auto; float: none; width: auto !important; /* legacy .mobile-search input {width:86% !important} */ min-width: 0; height: 100%; padding: 0 12px 0 0; border: 0; background: transparent; color: var(--bb-ink); font-family: var(--bb-font-ui); font-size: 15.5px !important; /* legacy .main-search form input {font-size:12px !important} */ font-weight: 500; text-align: left; } .bb .main-search form input::placeholder, .bb .mobile-search form input::placeholder { color: var(--bb-ink-3); font-size: 15px; font-weight: 400; } .bb .main-search form input:focus-visible, .bb .mobile-search form input:focus-visible { outline: none; } .bb .main-search form button, .bb .mobile-search form button { position: static; flex: 0 0 40px; display: grid; place-items: center; float: none; width: 40px !important; /* legacy .mobile-search button {width:13% !important} */ height: 40px; padding: 0; border-radius: 50%; background: var(--bb-grad-sun); color: #fff; box-shadow: 0 3px 10px rgba(192, 20, 43, .28) !important; /* legacy button {box-shadow:0 0 !important} */ cursor: pointer; transition: filter .2s var(--bb-ease), transform .15s var(--bb-ease); } .bb .main-search form button:hover, .bb .mobile-search form button:hover { filter: brightness(.92) saturate(1.05); } .bb .main-search form button:active, .bb .mobile-search form button:active { transform: scale(.95); } .bb .main-search form button svg, .bb .mobile-search form button svg { width: 18px; height: 18px; color: #fff; stroke-width: 2.6; } .bb .main-search form button:focus-visible, .bb .mobile-search form button:focus-visible, .bb .cshort-summary .remove-cart:focus-visible { outline: 3px solid var(--bb-green-600) !important; /* legacy button:focus {outline:none !important} */ outline-offset: 2px; } /* ---- Live search results (filled by layouts/ajax/search.blade.php) ---- */ .bb .search_result { position: relative; z-index: 40; } /* Nothing typed = nothing to show (results used to linger after the box was cleared). */ .bb .main-search:has(input:placeholder-shown) .search_result, .bb .mobile-search:has(input:placeholder-shown) .search_result { display: none; } .bb .search_product { position: absolute; top: 8px; left: 0; right: 0; width: auto; z-index: 999999; overflow: hidden; background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-r-md); box-shadow: var(--bb-shadow-2); text-align: left; } .bb .search_product ul { max-height: min(440px, 62vh); margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; } .bb .search_product li { display: block; width: 100%; padding: 0; border: 0; transition: none; } .bb .search_product ul li:hover { background: none; } .bb .search_product .bb-sr-row { display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 14px; padding: 8px 10px; border-radius: var(--bb-r-sm); color: var(--bb-ink); transition: background-color .15s var(--bb-ease); } .bb .search_product .bb-sr-row:hover, .bb .search_product .bb-sr-row:focus-visible { background: var(--bb-green-50); color: var(--bb-ink); } .bb .search_product .bb-sr-row:focus-visible { outline-offset: -3px; } .bb .search_product .search_img { width: 42px; height: 58px; } .bb .search_product img { display: block; width: 42px; height: 58px; margin: 0; object-fit: cover; border-radius: var(--bb-r-book); background: var(--bb-green-50); box-shadow: 1px 1px 2px rgba(20, 20, 20, .18), 3px 5px 10px rgba(4, 50, 31, .16); } .bb .search_product .search_content { min-width: 0; } .bb .search_product .search_content .name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0 0 3px; color: var(--bb-ink); font: 600 15px/1.45 var(--bb-font-book); text-align: left; } .bb .search_product .bb-sr-row:hover .name { color: var(--bb-green-800); } .bb .search_product .search_content .price { margin: 0; color: var(--bb-red-600); font: 700 15px/1.3 var(--bb-font-ui); text-align: left; } .bb .search_product .search_content .price del { margin-right: 6px; color: var(--bb-ink-3); font-size: .85em; font-weight: 500; } .bb .search_product .bb-sr-empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 18px; color: var(--bb-ink-2); font: 500 15px/1.5 var(--bb-font-ui); } .bb .search_product .bb-sr-empty i { color: var(--bb-green-600); } /* ---- Header actions: Track Order / account / cart ---- */ .bb .header-list-items { margin: 0; text-align: right; } .bb .header-list-items > ul { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin: 0; } .bb .header-list-items > ul > li { display: block; margin: 0; padding: 0; font-weight: 500; } .bb .header-list-items .bb-act { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: var(--bb-r-pill); color: var(--bb-ink-2); font: 500 15px/1 var(--bb-font-ui); white-space: nowrap; transition: color .2s var(--bb-ease), background-color .2s var(--bb-ease); } .bb .header-list-items .bb-act i { color: var(--bb-green-600); font-size: 17px !important; /* legacy .track_btn a i / .for_order a i {font-size:16px !important} */ transition: color .2s var(--bb-ease); } .bb .header-list-items .bb-act:hover, .bb .header-list-items .bb-act:focus-visible { background: var(--bb-green-50); color: var(--bb-green-700); } .bb .header-list-items .bb-act:hover i { color: var(--bb-green-700); } /* Legacy ".header-list-items ul li span" turns every span into an absolute red badge - neutralise it for labels and for everything inside the mini-cart. */ .bb .header-list-items .bb-act__label, .bb .cshort-summary span { position: static; top: auto; right: auto; width: auto; height: auto; padding: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; line-height: inherit; } /* ---- Cart button (markup lives in layouts/ajax/cart_count.blade.php) ---- */ .bb .cart-dialog { position: relative; margin-left: 6px; } .bb .cart-dialog .bb-cart-trigger { display: inline-flex; align-items: center; border-radius: 50%; } .bb .cart-dialog .margin-shopping { position: relative; display: grid; place-items: center; width: 46px; height: 46px; margin: 0; border-radius: 50%; background: var(--bb-green-50); box-shadow: inset 0 0 0 1.5px var(--bb-green-100); color: var(--bb-green-700); transition: background-color .2s var(--bb-ease), color .2s var(--bb-ease), box-shadow .2s var(--bb-ease); } .bb .cart-dialog .margin-shopping i { color: inherit; font-size: 19px; } .bb .cart-dialog:hover .margin-shopping, .bb .cart-dialog:focus-within .margin-shopping { background: var(--bb-green-600); box-shadow: none; color: #fff; } .bb .cart-dialog .margin-shopping span { position: absolute; top: -3px; right: -5px; display: grid; place-items: center; min-width: 21px; width: auto; height: 21px; padding: 0 5px; border-radius: var(--bb-r-pill); background: var(--bb-grad-sun); color: #fff; font: 700 11.5px/1 var(--bb-font-ui); box-shadow: 0 0 0 2px #fff; } /* ---- Mini-cart dropdown ---- */ .bb .cshort-summary { position: absolute; top: calc(100% + 12px); right: -6px; width: 360px; max-height: none; padding: 0; overflow: visible; background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-r-md); box-shadow: var(--bb-shadow-2); text-align: left; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .2s var(--bb-ease), transform .2s var(--bb-ease), visibility 0s linear .2s; z-index: 1000; } .bb .cshort-summary::before { /* hover bridge across the 12px gap */ content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } .bb #cart-qty:hover .cshort-summary, .bb #cart-qty:focus-within .cshort-summary { top: calc(100% + 12px); opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--bb-ease), transform .2s var(--bb-ease), visibility 0s; } .bb .cshort-summary ul { display: block; max-height: 316px; margin: 0; padding: 6px 8px; overflow-y: auto; overscroll-behavior: contain; } .bb .cshort-summary ul li.bb-mc-item { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin: 0; padding: 10px 6px; border: 0; text-align: left; font-weight: 400; } .bb .cshort-summary ul li.bb-mc-item + li.bb-mc-item { border-top: 1px solid var(--bb-line); } .bb .cshort-summary .bb-mc-thumb { display: block; width: 42px; height: 58px; } .bb .cshort-summary .bb-mc-thumb img { display: block; width: 42px; height: 58px; padding: 0; border: 0; border-radius: var(--bb-r-book); object-fit: cover; background: var(--bb-green-50); box-shadow: 1px 1px 2px rgba(20, 20, 20, .18), 3px 5px 10px rgba(4, 50, 31, .16); } .bb .cshort-summary .bb-mc-info { display: block; min-width: 0; } .bb .cshort-summary .bb-mc-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0 0 4px; color: var(--bb-ink); font: 600 14.5px/1.45 var(--bb-font-book); } .bb .cshort-summary a.bb-mc-name:hover { color: var(--bb-green-700); } .bb .cshort-summary .bb-mc-meta { display: flex; align-items: baseline; gap: 10px; color: var(--bb-ink-3); font: 500 13px/1.3 var(--bb-font-ui); } .bb .cshort-summary .bb-mc-meta b { color: var(--bb-red-600); font-size: 14.5px; font-weight: 700; } .bb .cshort-summary .remove-cart { display: grid; place-items: center; width: 32px; height: 32px; line-height: 1; margin: 0; padding: 0; border-radius: 50%; background: var(--bb-red-50); color: var(--bb-red-600); cursor: pointer; transition: background-color .2s var(--bb-ease), color .2s var(--bb-ease); } .bb .cshort-summary .remove-cart:hover { background: var(--bb-red-600); color: #fff; } .bb .cshort-summary .remove-cart svg, .bb .cshort-summary .remove-cart .feather { width: 15px; height: 15px; color: inherit; stroke-width: 2.6; } .bb .cshort-summary .bb-mc-empty { display: flex; align-items: center; gap: 10px; margin: 0; padding: 18px 18px 16px; color: var(--bb-ink-2); font: 500 15px/1.5 var(--bb-font-ui); } .bb .cshort-summary .bb-mc-empty i { color: var(--bb-green-600); font-size: 18px; } .bb .cshort-summary .bb-mc-foot { padding: 12px 16px 16px; border-top: 1px solid var(--bb-line); border-radius: 0 0 var(--bb-r-md) var(--bb-r-md); background: var(--bb-paper); } .bb .cshort-summary .bb-mc-total { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 12px; color: var(--bb-ink-2); font: 600 15px/1.3 var(--bb-font-ui); } .bb .cshort-summary .bb-mc-total strong { display: inline; margin: 0; color: var(--bb-ink); font: 800 19px/1.2 var(--bb-font-ui); } .bb .cshort-summary .go_cart { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 46px; margin: 0; padding: 0 16px; border-radius: var(--bb-r-sm); background: var(--bb-grad-sun); color: #fff; font: 700 16px/1.2 var(--bb-font-ui); box-shadow: var(--bb-shadow-sun); transition: filter .2s var(--bb-ease), transform .15s var(--bb-ease); } .bb .cshort-summary .go_cart:hover, .bb .cshort-summary .go_cart:focus-visible { color: #fff; filter: brightness(.93) saturate(1.05); } .bb .cshort-summary .go_cart:active { transform: translateY(1px); } /* ---- Narrower desktops / tablets ---- */ @media (max-width: 1199px) { .bb .main-logo img { height: 48px; } .bb .header-list-items .bb-act { padding: 0 10px; } } @media (max-width: 991px) { .bb .logo-header { column-gap: 16px; } .bb .main-logo img { height: 44px; } .bb .header-list-items .bb-act { width: 44px; padding: 0; justify-content: center; } .bb .header-list-items .bb-act i { font-size: 19px !important; } .bb .header-list-items .bb-act__label { /* icon-only, label kept for screen readers */ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } /* ========================================================================== 4. Category menu bar + dropdowns ========================================================================== */ .bb .menu-area { position: relative; background: var(--bb-grad-field); border: 0; box-shadow: 0 10px 22px -14px rgba(4, 50, 31, .55); } .bb .catagory_menu { padding: 0; text-align: left; } .bb .catagory_menu > ul { display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; margin: 0; } @media (min-width: 1200px) { .bb .catagory_menu > ul { justify-content: space-between; } } /* (.menu-area added for specificity: these sit above the base link rule in source order.) */ /* 992-1199: tighten so all nine categories stay on one row (no orphan second line). */ @media (min-width: 992px) and (max-width: 1199px) { .bb .menu-area .catagory_menu li.cat_bar > a { padding: 0 9px; font-size: 15px; } .bb .menu-area .catagory_menu li.cat_bar > a::after { left: 9px; right: 9px; } } /* Tablets: two rows are unavoidable, so keep each row shorter. */ @media (max-width: 991px) { .bb .menu-area .catagory_menu li.cat_bar > a { height: 42px; padding: 0 10px; font-size: 15px; } .bb .menu-area .catagory_menu li.cat_bar > a::after { left: 10px; right: 10px; } } .bb .catagory_menu li.cat_bar { position: relative; display: block; margin: 0; } .bb .catagory_menu li.cat_bar > a { position: relative; display: flex; align-items: center; gap: 7px; width: auto; height: 48px; margin: 0 !important; /* legacy li.cat_bar>a {margin-left:0 !important} */ padding: 0 14px; background: transparent; color: #fff; font: 600 15.5px/1 var(--bb-font-ui); text-transform: none; white-space: nowrap; transition: background-color .2s var(--bb-ease); } .bb .catagory_menu li.cat_bar > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--bb-gold-500); transform: scaleX(0); transition: transform .22s var(--bb-ease); } .bb .catagory_menu li.cat_bar:hover > a, .bb .catagory_menu li.cat_bar:focus-within > a { background: rgba(255, 255, 255, .08); color: #fff; } .bb .catagory_menu li.cat_bar:hover > a::after, .bb .catagory_menu li.cat_bar:focus-within > a::after, .bb .catagory_menu li.cat_bar.is-current > a::after { transform: scaleX(1); } .bb .catagory_menu li.cat_bar span { padding: 0; color: inherit; } .bb .catagory_menu li.cat_bar > a .cat_down { position: static; padding: 0; color: rgba(255, 255, 255, .7); font-size: 11px !important; /* legacy .cat_down {font-size:10px !important} */ transition: transform .2s var(--bb-ease), color .2s var(--bb-ease); } .bb .catagory_menu li.cat_bar:hover > a .cat_down, .bb .catagory_menu li.cat_bar:focus-within > a .cat_down { color: var(--bb-gold-500); transform: rotate(180deg); } /* Dropdown card */ .bb .main-header .menu-area .Cat_menu { position: absolute; top: 100%; left: 0; width: max-content; min-width: 230px; max-width: 320px; margin-top: 6px; padding: 8px; background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-r-md); box-shadow: var(--bb-shadow-2); text-align: left; visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .18s var(--bb-ease), transform .18s var(--bb-ease), visibility 0s linear .18s; z-index: 1000; } .bb .main-header .menu-area .Cat_menu::before { /* hover bridge across the 6px gap */ content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; } .bb .main-header .menu-area .cat_bar:hover > .Cat_menu, .bb .main-header .menu-area .cat_bar:focus-within > .Cat_menu { top: 100%; visibility: visible; opacity: 1; transform: none; transition: opacity .18s var(--bb-ease), transform .18s var(--bb-ease), visibility 0s; } /* Items near the right edge open their card leftwards so it never leaves the viewport. */ .bb .main-header .menu-area .cat_bar:nth-last-child(-n+3) > .Cat_menu { left: auto; right: 0; } .bb .menu-area ul.Cat_menu li { position: relative; width: 100%; margin: 0; padding: 0; border: 0 !important; /* legacy ul.Cat_menu li / ul.child_menu li {border-bottom ... !important} */ } .bb .menu-area ul.Cat_menu li > a { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border-radius: 9px; color: var(--bb-ink); font: 500 15px/1.4 var(--bb-font-ui); text-transform: none; white-space: nowrap; transition: background-color .15s var(--bb-ease), color .15s var(--bb-ease); } .bb .menu-area ul.Cat_menu li > a::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--bb-green-100); transition: background-color .15s var(--bb-ease); } .bb .menu-area ul.Cat_menu li > a span { color: inherit; font-weight: inherit; } .bb .menu-area ul.Cat_menu li > a i { position: static; width: auto; margin-left: auto; padding-left: 6px; color: var(--bb-ink-3); font-size: 11px !important; /* legacy .cat_down {font-size:10px !important} */ } .bb .menu-area ul.Cat_menu li > a:hover, .bb .menu-area ul.Cat_menu li > a:focus-visible, .bb .menu-area ul.Cat_menu li.cat_list_hover:hover > a { background: var(--bb-green-50); color: var(--bb-green-800); } .bb .menu-area ul.Cat_menu li > a:hover::before, .bb .menu-area ul.Cat_menu li > a:focus-visible::before, .bb .menu-area ul.Cat_menu li.cat_list_hover:hover > a::before { background: var(--bb-green-600); } /* Child flyout */ .bb .menu-area .child_menu { position: absolute; top: -9px; left: 100%; width: max-content; min-width: 220px; max-width: 300px; margin-left: 10px; padding: 8px; overflow: visible; background: #fff; border: 1px solid var(--bb-line); border-radius: var(--bb-r-md); box-shadow: var(--bb-shadow-2); visibility: hidden; opacity: 0; z-index: 2; transition: opacity .18s var(--bb-ease), visibility 0s linear .18s; } .bb .menu-area .child_menu::before { content: ""; position: absolute; top: 0; bottom: 0; left: -12px; width: 12px; } .bb .menu-area .cat_list_hover:hover > .child_menu, .bb .menu-area .cat_list_hover:focus-within > .child_menu { visibility: visible; opacity: 1; transition: opacity .18s var(--bb-ease), visibility 0s; } .bb .main-header .menu-area .cat_bar:nth-last-child(-n+3) .child_menu { left: auto; right: 100%; margin-left: 0; margin-right: 10px; } .bb .main-header .menu-area .cat_bar:nth-last-child(-n+3) .child_menu::before { left: auto; right: -12px; } .bb .menu-area li.child_main { width: 100%; } .bb .menu-area li.child_main > a { padding: 9px 12px; color: var(--bb-ink) !important; /* legacy .child_main>a / li.child_main>a {color ... !important} */ font: 500 14.5px/1.4 var(--bb-font-ui); text-transform: none !important; /* legacy .child_main>a {text-transform:capitalize !important} */ } .bb .menu-area li.child_main > a:hover, .bb .menu-area li.child_main > a:focus-visible { color: var(--bb-green-800) !important; } /* ========================================================================== 5. Mobile header, search and drawer (legacy switches to these at <=767px) ========================================================================== */ @media (max-width: 767px) { .bb { --bb-topbar-h: 32px; } .bb .mobile-header { background: #fff; border-bottom: 1px solid var(--bb-line); } .bb .mobile-logo { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; height: 58px; padding: 0 8px; text-align: center; } .bb .menu-bar { margin: 0; } .bb .menu-bar .toggle { /* legacy header .toggle: float, 30-55px padding, margin-top */ position: relative; float: none; display: grid; place-items: center; box-sizing: border-box; width: 44px; height: 44px; min-height: 0; margin: 0; padding: 0; border-radius: 12px; color: var(--bb-green-800); line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s var(--bb-ease); } .bb .menu-bar .toggle:active { background: var(--bb-green-50); } .bb .menu-bar .toggle i { color: var(--bb-green-800); font-size: 21px; } .bb .menu-logo a { display: inline-flex; align-items: center; justify-content: center; height: 100%; } .bb .menu-logo img { display: block; width: auto; height: 44px; margin: 0; } .bb .menu-bag { margin: 0; display: flex; justify-content: flex-end; } .bb .menu-bag .margin-shopping { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bb-green-50); box-shadow: inset 0 0 0 1.5px var(--bb-green-100); color: var(--bb-green-700); -webkit-tap-highlight-color: transparent; } .bb .menu-bag .margin-shopping i { color: inherit; font-size: 18px; } .bb .menu-bag .margin-shopping span { position: absolute; top: -3px; right: -5px; display: inline-block; min-width: 21px; height: 21px; padding: 0 5px; border-radius: var(--bb-r-pill); background: var(--bb-grad-sun); color: #fff; font: 700 11.5px/21px var(--bb-font-ui); text-align: center; box-shadow: 0 0 0 2px #fff; } .bb .mobile-search { position: relative; z-index: 20; padding: 10px 14px 12px; background: #fff; border-bottom: 1px solid var(--bb-line); } .bb .mobile-search form { height: 46px; padding-left: 16px; } .bb .mobile-search form button { flex-basis: 38px; width: 38px !important; height: 38px; } /* see legacy note above */ .bb .mobile-search .search_product ul { max-height: 58vh; } /* ---- Drawer ---- */ .bb .mobile-menu { left: 0; width: min(320px, 86vw); height: 100vh; height: 100dvh; background: #fff; overscroll-behavior: contain; transform: translateX(-102%); visibility: hidden; box-shadow: none; transition: transform .28s var(--bb-ease), box-shadow .28s var(--bb-ease), visibility 0s linear .28s; } .bb .mobile-menu.active { left: 0; transform: none; visibility: visible; box-shadow: 18px 0 44px rgba(4, 50, 31, .28); transition: transform .28s var(--bb-ease), box-shadow .28s var(--bb-ease), visibility 0s; } .bb .mobile-menu::-webkit-scrollbar-thumb { background-color: var(--bb-green-100); } .bb .mobile-menu-logo { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 14px 14px 16px; background: var(--bb-grad-field); border: 0; } .bb .mobile-menu .logo-image { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 12px; background: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, .18); } .bb .mobile-menu .logo-image img { display: block; width: auto; height: 32px; } .bb .mobile-menu-close { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; } .bb .mobile-menu-close:active { background: rgba(255, 255, 255, .26); } .bb .mobile-menu-close i { color: #fff; font-size: 18px; } .bb .mobile-menu .bb-drawer-title { display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 18px 8px; color: var(--bb-ink); font: 800 17px/1.3 var(--bb-font-ui); font-stretch: 112%; } .bb .mobile-menu .bb-drawer-title::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--bb-grad-sun); box-shadow: 0 0 0 3px var(--bb-red-50); } .bb .mobile-menu .first-nav { padding: 0 0 28px; } .bb .mobile-menu .first-nav > li + li { border-top: 1px solid #EDF2EE; } .bb .mobile-menu .first-nav .parent-category { position: relative; display: block; line-height: normal; } .bb .mobile-menu .first-nav .parent-category .menu-category-name { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 7px 56px 7px 16px; color: var(--bb-ink); font: 600 15.5px/1.35 var(--bb-font-ui); text-transform: none; } .bb .mobile-menu .side_cat_img { flex: 0 0 34px; width: 34px; height: 34px; margin: 0; border-radius: 50%; object-fit: cover; background: var(--bb-green-50); box-shadow: 0 0 0 1px var(--bb-line); } .bb .mobile-menu li.parent-category.active { background: transparent; } .bb .mobile-menu li.parent-category.active > .menu-category-name { color: var(--bb-green-800); } .bb .mobile-menu span.menu-category-toggle, .bb .mobile-menu span.menu-subcategory-toggle { top: 0; right: 6px; width: 48px; height: 48px; border-radius: 12px; color: var(--bb-ink-3); cursor: pointer; -webkit-tap-highlight-color: transparent; } .bb .mobile-menu span.menu-subcategory-toggle { width: 44px; height: 44px; } .bb .mobile-menu span.menu-category-toggle i, .bb .mobile-menu span.menu-subcategory-toggle i { font-size: 12px; transition: transform .22s var(--bb-ease); } .bb .mobile-menu span.menu-category-toggle.active, .bb .mobile-menu span.menu-subcategory-toggle.active { background: var(--bb-green-50); color: var(--bb-green-700); } .bb .mobile-menu span.menu-category-toggle.active i, .bb .mobile-menu span.menu-subcategory-toggle.active i { transform: rotate(180deg); } .bb .mobile-menu .second-nav { margin: 0 0 8px 32px; padding: 0; background: transparent; border-left: 2px solid var(--bb-green-100); } .bb .mobile-menu .parent-subcategory { position: relative; } .bb .mobile-menu li.parent-subcategory.active { background: transparent; } .bb .mobile-menu .parent-subcategory .menu-subcategory-name { display: block; padding: 11px 52px 11px 16px; color: var(--bb-ink-2); font: 500 15px/1.4 var(--bb-font-ui); } .bb .mobile-menu .parent-subcategory .menu-subcategory-name:active { color: var(--bb-green-700); } .bb .mobile-menu ul.third-nav { margin: 0 0 6px 16px; padding: 0; background: transparent; border-left: 2px solid var(--bb-green-100); } .bb .mobile-menu .menu-childcategory-name { display: block; padding: 9px 16px; color: var(--bb-ink-2); font: 500 14.5px/1.4 var(--bb-font-ui); } } /* Overlay behind drawer / quick view */ .bb #page-overlay { background: rgba(23, 36, 29, .45); } /* ========================================================================== 6. Footer ========================================================================== */ .bb footer { padding: 0; } .bb .footer-top { position: relative; padding: 56px 0 44px; background: linear-gradient(90deg, #FFD36B 0%, #F2B33D 50%, #D48A0C 100%) top left / 100% 3px no-repeat, linear-gradient(160deg, #07603A 0%, #064A2E 42%, #04321F 100%); color: #D7E7DC; } .bb .footer-about { padding: 0; text-align: left; } /* The footer uses the white_logo variant (light lettering made for dark grounds), so it sits straight on the field - a white plate would erase the white "Kini". */ .bb .footer-about .bb-footer-logo { display: inline-flex; align-items: center; margin: 0 0 18px; padding: 0; border-radius: var(--bb-r-sm); background: none; transition: transform .2s var(--bb-ease); } .bb .footer-about .bb-footer-logo img { display: block; width: auto; max-width: 100%; height: 64px; } .bb .footer-about p { display: flex; align-items: flex-start; gap: 10px; max-width: 34ch; margin: 0 0 12px; color: #D7E7DC; font: 400 15px/1.6 var(--bb-font-ui); text-align: left; } .bb .footer-about p i, .bb .footer-about .footer-hotlint i { flex: 0 0 16px; width: 16px; margin-top: 5px; color: var(--bb-gold-500); font-size: 14px; text-align: center; } .bb .footer-about .footer-hotlint { display: inline-flex; align-items: flex-start; gap: 10px; margin: 0; color: #fff; font: 600 16px/1.5 var(--bb-font-ui); transition: color .18s var(--bb-ease); } .bb .footer-about .footer-hotlint i { margin-top: 5px; } .bb .footer-about .footer-hotlint:hover { color: var(--bb-gold-500); } .bb .footer-menu .title, .bb .footer-menu .stay_conn { display: block; margin: 0 0 12px; color: #fff; text-align: left; text-transform: none; } .bb .footer-menu ul li.title a { position: relative; display: inline-block; margin: 0 !important; /* legacy .footer-menu ul li a {margin:8px 0 !important} */ padding: 0 0 10px; color: #fff; font: 700 17px/1.3 var(--bb-font-ui); text-transform: none; cursor: default; } .bb .footer-menu ul li.title a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 3px; border-radius: 3px; background: var(--bb-grad-gold); } .bb .footer-menu ul li.title a:hover { color: #fff; } .bb .footer-menu ul li { display: block; } .bb .footer-menu ul li a { display: inline-block; margin: 0 !important; /* legacy margin:8px 0 !important; hover margin-left:2px !important */ padding: 6px 0; color: #CFE3D6; font: 400 15px/1.5 var(--bb-font-ui); text-align: left; text-transform: none; transition: color .18s var(--bb-ease), transform .18s var(--bb-ease); } .bb .footer-menu ul li a[href]:hover, .bb .footer-menu ul li a[href]:focus-visible { color: var(--bb-gold-500); } @media (prefers-reduced-motion: no-preference) { .bb .footer-menu ul li:not(.title):not(.social_list) a[href]:hover { transform: translateX(3px); } } /* Social chips (brand colour on hover; icon classes come from the DB) */ .bb .footer-menu ul.social_link { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; text-align: left; } .bb .footer-menu ul.social_link li.social_list { display: block; margin: 0; font-size: 17px; } .bb .footer-menu ul.social_link .mobile-social-link { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; overflow: hidden; border-radius: 50%; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; transition: background-color .2s var(--bb-ease), box-shadow .2s var(--bb-ease); } .bb .footer-menu ul.social_link .mobile-social-link i { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; background: transparent; color: #fff; font-size: 17px; line-height: 1; transition: background-color .2s var(--bb-ease); } .bb .footer-menu ul.social_link .mobile-social-link:hover, .bb .footer-menu ul.social_link .mobile-social-link:focus-visible { background: rgba(255, 255, 255, .22); box-shadow: none; } .bb .footer-menu ul.social_link .mobile-social-link:is(:hover, :focus-visible) i:is(.fa-facebook, .fa-facebook-f, .fa-facebook-square) { background: #1877F2; } .bb .footer-menu ul.social_link .mobile-social-link:is(:hover, :focus-visible) i:is(.fa-x-twitter, .fa-tiktok, .fa-threads) { background: #0F1419; } .bb .footer-menu ul.social_link .mobile-social-link:is(:hover, :focus-visible) i.fa-twitter { background: #1DA1F2; } .bb .footer-menu ul.social_link .mobile-social-link:is(:hover, :focus-visible) i:is(.fa-whatsapp, .fa-whatsapp-square) { background: #25D366; } .bb .footer-menu ul.social_link .mobile-social-link:is(:hover, :focus-visible) i:is(.fa-youtube, .fa-youtube-square) { background: #FF0000; } .bb .footer-menu ul.social_link .mobile-social-link:is(:hover, :focus-visible) i.fa-instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); } .bb .footer-menu ul.social_link .mobile-social-link:is(:hover, :focus-visible) i:is(.fa-linkedin, .fa-linkedin-in) { background: #0A66C2; } .bb .footer-menu ul.social_link .mobile-social-link:is(:hover, :focus-visible) i:is(.fa-telegram, .fa-telegram-plane) { background: #26A5E4; } .bb .footer-menu ul.social_link .mobile-social-link:is(:hover, :focus-visible) i:is(.fa-pinterest, .fa-pinterest-p) { background: #E60023; } .bb .footer-menu ul.social_link .mobile-social-link:is(:hover, :focus-visible) i.fa-facebook-messenger { background: #0084FF; } /* Copyright bar */ .bb .footer-bottom { margin: 0; padding: 14px 0; background: var(--bb-green-900); border-top: 1px solid rgba(255, 255, 255, .06); } .bb .copyright p { margin: 0; color: #BFD6C7; font: 400 14px/1.6 var(--bb-font-ui); text-align: center; } .bb .copyright p a, .bb .copyright p a span { color: #fff; font-weight: 600; transition: color .18s var(--bb-ease); } .bb .copyright p a:hover, .bb .copyright p a:hover span { color: var(--bb-gold-500); } /* Focus rings on dark surfaces are gold (green-600 would vanish on the field). */ .bb .top_header :focus-visible, .bb .menu-area :focus-visible, .bb .footer-top :focus-visible, .bb .footer-bottom :focus-visible, .bb .mobile-menu-logo :focus-visible, .bb .mobile-menu-logo:focus-visible { outline-color: var(--bb-gold-500); } .bb .menu-area .Cat_menu :focus-visible { outline-color: var(--bb-green-600); outline-offset: -2px; } .bb .footer-menu ul.social_link .mobile-social-link:focus-visible { outline: 3px solid var(--bb-gold-500); outline-offset: 3px; } @media (max-width: 767px) { .bb .footer-top { padding: 40px 0 32px; } .bb .footer-about { padding: 0; text-align: left; } .bb .footer-about p { text-align: left; } .bb .footer-menu ul li a { text-align: left; } .bb .footer-bottom { margin: 0; padding: 14px 0; } /* legacy: margin-bottom 24px + padding-bottom 77px */ /* Left-aligned with room on the right so the floating chat button never sits on the credit text. */ .bb .copyright p { padding-right: 60px; font-size: 13px; text-align: left; } } /* ========================================================================== 7. Mobile bottom navigation ========================================================================== */ @media (max-width: 767px) { /* Keep the last bit of every page clear of the fixed bar. */ .bb { padding-bottom: calc(var(--bb-nav-h) + 1px + env(safe-area-inset-bottom, 0px)); } /* +1px = nav border */ .bb .footer_nav { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; padding: 0 4px env(safe-area-inset-bottom, 0px); background: #fff; border-top: 1px solid var(--bb-line); box-shadow: 0 -6px 20px rgba(4, 50, 31, .08); text-align: center; } .bb .footer_nav ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: stretch; height: var(--bb-nav-h); margin: 0; } .bb .footer_nav ul li { position: relative; display: block; } .bb .footer_nav ul li a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: 100%; padding: 0 2px; color: var(--bb-ink-2); font: 500 12px/1.2 var(--bb-font-ui); white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; } .bb .footer_nav ul li a span { display: block; } .bb .footer_nav ul li i { color: var(--bb-green-600); font-size: 19px; } .bb .footer_nav ul li a:active { color: var(--bb-green-800); } .bb .footer_nav .mobilecart-qty { color: var(--bb-red-600); font-weight: 800; } /* Raised centre Home button */ .bb .footer_nav li.mobile_home { width: auto; height: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; } .bb .footer_nav li.mobile_home a { justify-content: flex-end; padding-bottom: 9px; color: var(--bb-green-800); font-weight: 700; } .bb .footer_nav li.mobile_home a > span:first-child { position: absolute; top: -20px; left: 50%; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--bb-grad-field); box-shadow: 0 0 0 4px #fff, 0 8px 18px rgba(4, 50, 31, .32); transform: translateX(-50%); } .bb .footer_nav li.mobile_home a > span:first-child i { color: #fff; font-size: 20px; } } /* ========================================================================== 8. Floating chat (moved out of the inline