/* OhMyKajo final navbar layout overrides. Loaded after the experimental navbar CSS.
The two @import rules that used to sit here have been removed. They pulled
https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap
and https://rsms.me/inter/inter.css - the SAME two URLs functions.php already
enqueues as `ohmykajo-font-montserrat` and `ohmykajo-font-inter`. So every page
was fetching both font stylesheets twice.
The duplicate mattered more than the extra request. An @import is only
discovered after the browser has downloaded and parsed this 80 KB file, so the
fonts sat three steps deep in the critical path instead of being visible as
tags in the initial HTML. Lighthouse attributed 1,765 ms and 835 ms of
render blocking to exactly these two resources, and once LiteSpeed combine was
enabled they ended up on line 1 of a 1.33 MB bundle, pushing discovery later
still - which is the likeliest reason desktop FCP got WORSE after combining.
Nothing else changes: the same fonts load from the same URLs via the existing
PHP enqueues, so weights, Arabic fallback and licensing are untouched. If a
future stylesheet needs a webfont, enqueue it in functions.php - do not @import. */
@media (min-width: 1025px) {
body .whb-general-header {
width: 100vw !important;
max-width: 100vw !important;
min-height: 82px !important;
margin: 0 !important;
padding-inline: 0 28px !important;
border: 0 !important;
border-radius: 0 !important;
border-color: transparent !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
overflow: visible !important;}
body.kajo-glass-nav-scrolled .whb-general-header,
body.whb-sticked .whb-general-header {
width: min(1320px, calc(100vw - 32px)) !important;
max-width: min(1320px, calc(100vw - 32px)) !important;
min-height: 66px !important;
margin-inline: auto !important;
padding-inline-end: 24px !important;
border: 1px solid rgba(82, 105, 72, .10) !important;
border-radius: 999px !important;
border-color: rgba(82, 105, 72, .12) !important;
background: rgba(255, 255, 255, .78) !important;
backdrop-filter: blur(18px) saturate(150%) !important;
-webkit-backdrop-filter: blur(18px) saturate(150%) !important;
box-shadow: 0 18px 42px rgba(31, 47, 40, .08) !important;}
body .whb-general-header > .container,
body .whb-general-header .whb-general-header-inner {
position: relative !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
max-width: none !important;
min-height: inherit !important;
margin: 0 !important;
padding: 0 !important;}
body .whb-general-header .whb-col-center {
position: absolute !important;
inset-inline-start: 0 !important;
inset-block-start: 50% !important;
z-index: 7 !important;
flex: none !important;
width: 82px !important;
max-width: 82px !important;
height: 82px !important;
min-height: 82px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, .86) !important;
box-shadow: 0 10px 26px rgba(31, 47, 40, .045) !important;
overflow: hidden !important;
transform: translateY(-50%) !important;}
body.kajo-glass-nav-scrolled .whb-general-header .whb-col-center,
body.whb-sticked .whb-general-header .whb-col-center {
width: 66px !important;
max-width: 66px !important;
height: 66px !important;
min-height: 66px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, .92) !important;}
body .whb-general-header .site-logo,
body .whb-general-header .wd-logo,
body .whb-general-header .site-logo a,
body .whb-general-header .site-logo picture {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 82px !important;
height: 82px !important;
margin: 0 !important;
padding: 0 !important;}
body.kajo-glass-nav-scrolled .whb-general-header .site-logo,
body.kajo-glass-nav-scrolled .whb-general-header .wd-logo,
body.kajo-glass-nav-scrolled .whb-general-header .site-logo a,
body.kajo-glass-nav-scrolled .whb-general-header .site-logo picture,
body.whb-sticked .whb-general-header .site-logo,
body.whb-sticked .whb-general-header .wd-logo,
body.whb-sticked .whb-general-header .site-logo a,
body.whb-sticked .whb-general-header .site-logo picture {
width: 66px !important;
height: 66px !important;}
body .whb-general-header .site-logo img,
body .whb-general-header .wd-logo img,
body .whb-general-header .site-logo img[src*="Logo.png"],
body .whb-general-header .site-logo img[data-src*="Logo.png"],
body .whb-general-header .wd-logo img[src*="Logo.png"],
body .whb-general-header .wd-logo img[data-src*="Logo.png"] {
max-width: 68px !important;
max-height: 68px !important;
object-fit: contain !important;
transform: scale(1.18) !important;}
body.kajo-glass-nav-scrolled .whb-general-header .site-logo img,
body.kajo-glass-nav-scrolled .whb-general-header .wd-logo img,
body.kajo-glass-nav-scrolled .whb-general-header .site-logo img[src*="Logo.png"],
body.kajo-glass-nav-scrolled .whb-general-header .site-logo img[data-src*="Logo.png"],
body.kajo-glass-nav-scrolled .whb-general-header .wd-logo img[src*="Logo.png"],
body.kajo-glass-nav-scrolled .whb-general-header .wd-logo img[data-src*="Logo.png"],
body.whb-sticked .whb-general-header .site-logo img,
body.whb-sticked .whb-general-header .wd-logo img,
body.whb-sticked .whb-general-header .site-logo img[src*="Logo.png"],
body.whb-sticked .whb-general-header .site-logo img[data-src*="Logo.png"],
body.whb-sticked .whb-general-header .wd-logo img[src*="Logo.png"],
body.whb-sticked .whb-general-header .wd-logo img[data-src*="Logo.png"] {
max-width: 54px !important;
max-height: 54px !important;
transform: scale(1.14) !important;}
body .whb-general-header .whb-col-left {
position: absolute !important;
left: 50% !important;
inset-block-start: 50% !important;
z-index: 6 !important;
width: auto !important;
max-width: min(740px, calc(100vw - 620px)) !important;
margin: 0 !important;
padding: 0 !important;
transform: translate(-50%, -50%) !important;}
body.kajo-glass-nav-scrolled .whb-general-header .whb-col-left,
body.whb-sticked .whb-general-header .whb-col-left {
left: 50% !important;
transform: translate(-50%, -50%) !important;}
body .whb-general-header .wd-header-main-nav {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;}
body .whb-general-header .wd-header-main-nav .menu {
margin: 0 !important;}
body .whb-general-header .wd-header-main-nav .menu > li > a {
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, Helvetica, sans-serif !important;
font-weight: 500 !important;
letter-spacing: 0 !important;}
body:not(.kajo-glass-nav-scrolled):not(.whb-sticked) .whb-general-header .wd-header-main-nav .menu > li > a,
body:not(.kajo-glass-nav-scrolled):not(.whb-sticked) .whb-general-header .wd-header-main-nav .menu > li.kajo-nav-active > a,
body:not(.kajo-glass-nav-scrolled):not(.whb-sticked) .whb-general-header .wd-header-main-nav .menu > li.current-menu-item > a,
body:not(.kajo-glass-nav-scrolled):not(.whb-sticked) .whb-general-header .wd-header-main-nav .menu > li.current-menu-ancestor > a,
body:not(.kajo-glass-nav-scrolled):not(.whb-sticked) .whb-general-header .wd-header-main-nav .menu > li.current_page_item > a {
border: 0 !important;
box-shadow: none !important;}
body .whb-general-header .whb-col-right {
position: absolute !important;
inset-inline-end: 28px !important;
inset-block-start: 50% !important;
z-index: 8 !important;
width: auto !important;
max-width: none !important;
margin: 0 !important;
transform: translateY(-50%) !important;}
body.kajo-glass-nav-scrolled .whb-general-header .whb-col-right,
body.whb-sticked .whb-general-header .whb-col-right {
inset-inline-end: 24px !important;}
/* Unscrolled the header is fully transparent, and the logo and menu carry
their own chips - the right-hand tools were the only controls without a
backdrop, so they vanished against dark hero banners. Each tool already
lays out as a 42px circle, so it just needs its own resting chip.
Scrolled and sticky states are excluded: there the whole header is already
a solid pill and the tools read fine on it. */
body:not(.kajo-glass-nav-scrolled):not(.whb-sticked) .whb-general-header .whb-col-right .wd-tools-element > a,
body:not(.kajo-glass-nav-scrolled):not(.whb-sticked) .whb-general-header .whb-col-right .kajo-language-docked .trp-current-language-item__wrapper {
border-radius: 999px !important;
background: rgba(255, 255, 255, .86) !important;
backdrop-filter: blur(18px) saturate(150%) !important;
-webkit-backdrop-filter: blur(18px) saturate(150%) !important;
box-shadow: 0 10px 26px rgba(31, 47, 40, .045) !important;}
/* The resting chip above out-specifies the shared hover rule, so the hover
tint has to be restated at this specificity to survive. */
body:not(.kajo-glass-nav-scrolled):not(.whb-sticked) .whb-general-header .whb-col-right .wd-tools-element:hover > a,
body:not(.kajo-glass-nav-scrolled):not(.whb-sticked) .whb-general-header .whb-col-right .wd-tools-element:focus-within > a,
body:not(.kajo-glass-nav-scrolled):not(.whb-sticked) .whb-general-header .whb-col-right .wd-tools-element.kajo-tool-hover > a,
body:not(.kajo-glass-nav-scrolled):not(.whb-sticked) .whb-general-header .whb-col-right .wd-tools-element > a:hover,
body:not(.kajo-glass-nav-scrolled):not(.whb-sticked) .whb-general-header .whb-col-right .kajo-language-docked:hover .trp-current-language-item__wrapper,
body:not(.kajo-glass-nav-scrolled):not(.whb-sticked) .whb-general-header .whb-col-right .kajo-language-docked:focus-within .trp-current-language-item__wrapper,
body:not(.kajo-glass-nav-scrolled):not(.whb-sticked) .whb-general-header .whb-col-right .kajo-language-docked.kajo-tool-hover .trp-current-language-item__wrapper {
background: rgba(245, 235, 222, .96) !important;
box-shadow: inset 0 0 0 1px rgba(235, 163, 109, .26), 0 8px 20px rgba(31, 47, 40, .10) !important;}}
/* Final phone-menu cascade: keep this after legacy mobile navigation rules. */
@media (max-width: 767px) {
body .mobile-nav .wd-nav-mobile,
body.home .mobile-nav .wd-nav-mobile {
overflow-x: hidden !important;
overflow-y: auto !important;}
body .mobile-nav .wd-nav-mobile li.menu-item-has-children {
position: relative !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;}
body .mobile-nav .wd-nav-mobile > li > a,
body .mobile-nav .wd-nav-mobile .wd-sub-menu > li > a,
body .mobile-nav .wd-nav-mobile .sub-sub-menu > li > a {
flex: 1 1 0 !important;
min-width: 0 !important;
padding: 0 !important;
border: 0 !important;
box-shadow: none !important;}
body .mobile-nav .kajo-mobile-submenu-toggle,
body.home .mobile-nav .kajo-mobile-submenu-toggle {
position: static !important;
display: grid !important;
flex: 0 0 46px !important;
width: 46px !important;
height: 64px !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
place-items: center !important;}
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu {
position: static !important;
display: block !important;
flex: 0 0 100% !important;
width: 100% !important;
height: auto !important;
max-height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
background: transparent !important;
opacity: 0 !important;
pointer-events: none !important;
transform: translate3d(0, -8px, 0) !important;
visibility: hidden !important;
z-index: auto !important;
transition: max-height .38s cubic-bezier(.22, 1, .36, 1), padding .38s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, transform .28s ease, visibility 0s linear .38s !important;}
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu.kajo-mobile-submenu-visible,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu.kajo-mobile-submenu-visible,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu.kajo-mobile-submenu-visible,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu.kajo-mobile-submenu-visible {
max-height: 900px !important;
margin: 0 0 8px !important;
padding: 0 0 6px 14px !important;
overflow: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
visibility: visible !important;}}
/* Layered phone-menu navigation: one menu level is visible at a time. */
@media (max-width: 767px) {
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu {
position: absolute !important;
inset: 0 !important;
display: block !important;
width: 100% !important;
height: 100% !important;
max-height: none !important;
margin: 0 !important;
padding: 0 26px 32px !important;
overflow-y: auto !important;
background: rgba(255, 255, 255, .76) !important;
backdrop-filter: blur(22px) saturate(135%) !important;
-webkit-backdrop-filter: blur(22px) saturate(135%) !important;
opacity: 0 !important;
pointer-events: none !important;
transform: translate3d(104%, 0, 0) !important;
visibility: hidden !important;
z-index: 10 !important;
transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, visibility 0s linear .4s !important;}
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu.kajo-mobile-submenu-visible,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu.kajo-mobile-submenu-visible,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu.kajo-mobile-submenu-visible,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu.kajo-mobile-submenu-visible {
padding: 0 26px 32px !important;
overflow-y: auto !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: translate3d(0, 0, 0) !important;
visibility: visible !important;
transition: transform .4s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, visibility 0s linear 0s !important;}
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu > li,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu > li {
border-bottom: 0 !important;}
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu > li > a,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu > li > a {
border-bottom: 0 !important;}}
/* Phone-menu visual polish. */
@media (max-width: 767px) {
body .mobile-nav .wd-nav-mobile > li > a,
body .mobile-nav .wd-nav-mobile .wd-sub-menu > li > a,
body .mobile-nav .wd-nav-mobile .sub-sub-menu > li > a { border: 0 !important; box-shadow: none !important;}}
/* Mobile menu: a full-screen, in-place accordion. This intentionally overrides
the older Woodmart drilldown presentation only on phone-sized screens. */
@media (max-width: 767px) {
body.kajo-mobile-menu-open {
overflow: hidden !important;}
body .mobile-nav .close-side-widget a {
border-color: rgba(6, 21, 37, .14) !important;}
body .mobile-nav .wd-nav-mobile,
body.home .mobile-nav .wd-nav-mobile {
overflow-x: hidden !important;
overflow-y: auto !important;}
body .mobile-nav .wd-nav-mobile li.menu-item-has-children {
position: relative !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;}
body .mobile-nav .wd-nav-mobile > li,
body .mobile-nav .wd-nav-mobile .wd-sub-menu > li,
body .mobile-nav .wd-nav-mobile .sub-sub-menu > li {
min-height: 64px !important;
border-bottom: 1px solid rgba(6, 21, 37, .12) !important;}
body .mobile-nav .wd-nav-mobile > li > a,
body .mobile-nav .wd-nav-mobile .wd-sub-menu > li > a,
body .mobile-nav .wd-nav-mobile .sub-sub-menu > li > a {
flex: 1 1 0 !important;
min-width: 0 !important;
min-height: 64px !important;
padding: 0 !important;
color: #061525 !important;
font-size: 15px !important;
font-weight: 600 !important;
text-transform: uppercase !important;}
body .mobile-nav .wd-nav-mobile .wd-sub-menu > li > a,
body .mobile-nav .wd-nav-mobile .sub-sub-menu > li > a {
min-height: 50px !important;
font-size: 13px !important;
font-weight: 500 !important;
text-transform: none !important;}
body .mobile-nav .kajo-mobile-submenu-toggle,
body.home .mobile-nav .kajo-mobile-submenu-toggle {
position: static !important;
display: grid !important;
flex: 0 0 46px !important;
width: 46px !important;
height: 64px !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
color: #526948 !important;
place-items: center !important;}
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu {
position: static !important;
display: block !important;
flex: 0 0 100% !important;
width: 100% !important;
height: auto !important;
max-height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
background: transparent !important;
opacity: 0 !important;
pointer-events: none !important;
transform: translate3d(0, -8px, 0) !important;
visibility: hidden !important;
z-index: auto !important;
transition: max-height .38s cubic-bezier(.22, 1, .36, 1), padding .38s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, transform .28s ease, visibility 0s linear .38s !important;}
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu.kajo-mobile-submenu-visible,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu.kajo-mobile-submenu-visible,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu.kajo-mobile-submenu-visible,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu.kajo-mobile-submenu-visible {
max-height: 900px !important;
margin: 0 0 8px !important;
padding: 0 0 6px 14px !important;
overflow: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: translate3d(0, 0, 0) !important;
visibility: visible !important;
transition: max-height .42s cubic-bezier(.22, 1, .36, 1), padding .42s cubic-bezier(.22, 1, .36, 1), opacity .24s ease, transform .32s ease, visibility 0s linear 0s !important;}
@media (prefers-reduced-motion: reduce) {
body .mobile-nav.wd-side-hidden,
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu {
transition: none !important;}}}
@media (max-width: 1024px) {
body {
--kajo-mobile-header-h: 62px;
--kajo-admin-bar-offset: 0px;}
body.admin-bar {
--kajo-admin-bar-offset: 46px;}
body .main-page-wrapper {
padding-top: var(--kajo-admin-bar-offset) !important;
margin-top: 0 !important;}
body .whb-header,
body .whb-main-header {
position: fixed !important;
top: var(--kajo-admin-bar-offset) !important;
right: 0 !important;
left: 0 !important;
z-index: 1002 !important;
width: 100% !important;
max-width: 100% !important;
height: var(--kajo-mobile-header-h) !important;
min-height: var(--kajo-mobile-header-h) !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;
box-shadow: none !important;
pointer-events: none !important;}
body .whb-top-bar,
body .whb-header-bottom {
display: none !important;}
body .whb-general-header {
position: fixed !important;
top: var(--kajo-admin-bar-offset) !important;
right: 0 !important;
left: 0 !important;
width: 100% !important;
max-width: 100% !important;
height: var(--kajo-mobile-header-h) !important;
min-height: var(--kajo-mobile-header-h) !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: rgba(255, 252, 247, .76) !important;
box-shadow: 0 10px 28px rgba(6, 21, 37, .08) !important;
backdrop-filter: blur(16px) saturate(145%) !important;
-webkit-backdrop-filter: blur(16px) saturate(145%) !important;
pointer-events: auto !important;
overflow: visible !important;}
body.kajo-glass-nav-scrolled .whb-general-header,
body.whb-sticked .whb-general-header {
top: var(--kajo-admin-bar-offset) !important;
width: 100% !important;
max-width: 100% !important;
height: var(--kajo-mobile-header-h) !important;
min-height: var(--kajo-mobile-header-h) !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: 0 12px 30px rgba(6, 21, 37, .1) !important;
transform: none !important;}
body .whb-general-header-inner {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 100% !important;
height: var(--kajo-mobile-header-h) !important;
min-height: var(--kajo-mobile-header-h) !important;
padding: 0 14px !important;}
body .whb-general-header .whb-mobile-left,
body .whb-general-header .whb-mobile-center,
body .whb-general-header .whb-mobile-right {
display: flex !important;
align-items: center !important;
height: var(--kajo-mobile-header-h) !important;
min-height: var(--kajo-mobile-header-h) !important;
margin: 0 !important;
padding: 0 !important;}
body .whb-general-header .whb-mobile-left {
position: absolute !important;
inset-inline-start: 14px !important;
top: 0 !important;
z-index: 4 !important;}
body .whb-general-header .whb-mobile-center {
position: absolute !important;
top: 0 !important;
left: 50% !important;
z-index: 3 !important;
transform: translateX(-50%) !important;}
body .whb-general-header .whb-mobile-right {
position: absolute !important;
inset-inline-end: 14px !important;
top: 0 !important;
z-index: 4 !important;
gap: 7px !important;}
body .whb-general-header .wd-header-mobile-nav > a,
body .whb-general-header .wd-header-mobile-nav .wd-tools-icon {
display: grid !important;
width: 42px !important;
min-width: 42px !important;
height: 42px !important;
min-height: 42px !important;
border-radius: 50% !important;
background: #9aad86 !important;
place-items: center !important;}
body .whb-general-header .wd-header-mobile-nav .wd-tools-icon:before {
color: #061525 !important;
font-size: 22px !important;}
body .whb-general-header .site-logo,
body .whb-general-header .wd-logo {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 58px !important;
min-width: 58px !important;
height: 58px !important;
min-height: 58px !important;
margin: 0 !important;
padding: 0 !important;}
body .whb-general-header .site-logo img,
body .whb-general-header .wd-logo img {
width: 54px !important;
max-width: 54px !important;
height: 54px !important;
max-height: 54px !important;
object-fit: contain !important;}
body .whb-general-header .wd-header-wishlist,
body .whb-general-header .wd-header-my-account {
display: none !important;}
body .whb-general-header .wd-header-search,
body .whb-general-header .wd-header-cart,
body .whb-general-header .kajo-language-docked {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
min-width: 32px !important;
height: 40px !important;
min-height: 40px !important;
margin: 0 !important;
padding: 0 !important;
pointer-events: auto !important;}
body .whb-general-header .wd-header-search > a,
body .whb-general-header .wd-header-cart > a,
body .whb-general-header .kajo-language-docked > a,
body .whb-general-header .kajo-language-docked .trp-current-language-item__wrapper {
display: grid !important;
width: 30px !important;
min-width: 30px !important;
height: 30px !important;
min-height: 30px !important;
padding: 0 !important;
border-radius: 50% !important;
background: transparent !important;
place-items: center !important;}
body .whb-general-header .wd-tools-icon:before {
color: #061525 !important;
font-size: 18px !important;}
body .whb-general-header .wd-tools-count,
body .whb-general-header .wd-cart-number {
display: grid !important;
inset-block-start: 2px !important;
inset-inline-end: 0 !important;
width: 14px !important;
min-width: 14px !important;
height: 14px !important;
min-height: 14px !important;
padding: 0 !important;
border-radius: 50% !important;
background: #f58634 !important;
color: #fff !important;
font-size: 9px !important;
font-weight: 800 !important;
line-height: 14px !important;
text-align: center !important;
place-items: center !important;
transform: translate(32%, -30%) !important;}
body .whb-general-header .wd-cart-number span,
body .whb-general-header .wd-tools-count span {
display: none !important;}
body .whb-general-header .kajo-language-docked .trp-shortcode-anchor {
display: none !important;}
body .whb-general-header .kajo-language-docked .trp-shortcode-overlay {
display: grid !important;
position: relative !important;
inset: auto !important;
overflow: visible !important;
place-items: center !important;}
body .whb-general-header .kajo-language-docked .trp-language-switcher,
body .whb-general-header .kajo-language-docked .trp-language-item {
width: 30px !important;
height: 30px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;}
body .whb-general-header .kajo-language-docked img.trp-flag-image {
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
object-fit: cover !important;}
body .whb-general-header .kajo-language-docked .trp-switcher-dropdown-list {
position: absolute !important;
top: calc(100% + 8px) !important;
right: 0 !important;
bottom: auto !important;
left: auto !important;
min-width: 46px !important;
padding: 6px !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, .96) !important;
box-shadow: 0 14px 34px rgba(31, 47, 40, .16) !important;}
body .whb-general-header .kajo-language-docked.kajo-language-open .trp-switcher-dropdown-list {
display: grid !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;}
body .wd-header-search-form-mobile,
body .whb-header-bottom .wd-search-form {
display: none !important;}
body .mobile-nav.wd-side-hidden {
top: calc(var(--kajo-mobile-header-h) + var(--kajo-admin-bar-offset)) !important;
height: calc(100vh - var(--kajo-mobile-header-h) - var(--kajo-admin-bar-offset)) !important;
max-height: calc(100vh - var(--kajo-mobile-header-h) - var(--kajo-admin-bar-offset)) !important;
background: rgba(255, 255, 255, .94) !important;
backdrop-filter: blur(14px) saturate(145%) !important;
-webkit-backdrop-filter: blur(14px) saturate(145%) !important;}}
@media (min-width: 783px) and (max-width: 1024px) {
body.admin-bar {
--kajo-admin-bar-offset: 32px;}}
@media (max-width: 480px) {
body .whb-general-header-inner {
padding-inline: 12px !important;}
body .whb-general-header .whb-mobile-left {
inset-inline-start: 12px !important;}
body .whb-general-header .whb-mobile-right {
inset-inline-end: 12px !important;
gap: 5px !important;}}
/* The chip belongs on the , which is round. The inner 20x20 icon span was
also being given a background and inset ring on hover with no radius, which
painted a small square inside the circle. */
body .whb-general-header .whb-col-right .wd-tools-element .wd-tools-icon,
body .whb-general-header .whb-col-right .wd-tools-element:hover .wd-tools-icon,
body .whb-general-header .whb-col-right .wd-tools-element:focus-within .wd-tools-icon,
body .whb-general-header .whb-col-right .wd-tools-element.kajo-tool-hover .wd-tools-icon,
body .whb-general-header .whb-col-right .wd-tools-element > a:hover .wd-tools-icon {
border-radius: 999px !important;
background: transparent !important;
box-shadow: none !important;}
@media (max-width: 1024px) {
body.home {
--kajo-mobile-header-h: 62px;
--kajo-admin-bar-offset: 0px;}
body.admin-bar.home {
--kajo-admin-bar-offset: 46px;}
@media (min-width: 783px) {
body.admin-bar.home {
--kajo-admin-bar-offset: 32px;}}
body.home .main-page-wrapper {
/* The mobile header is fixed and overlays the homepage hero, like desktop. */
padding-top: var(--kajo-admin-bar-offset) !important;
margin-top: 0 !important;}
body.home .whb-header,
body.home .whb-main-header {
position: fixed !important;
inset-block-start: var(--kajo-admin-bar-offset) !important;
inset-inline: 0 !important;
z-index: 999 !important;
max-width: 100vw !important;
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: none !important;
pointer-events: none !important;}
body.home .whb-main-header {
height: var(--kajo-mobile-header-h) !important;}
body.home .whb-top-bar,
body.home .whb-header-bottom {
display: none !important;}
body.home .whb-general-header {
position: relative !important;
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
min-height: var(--kajo-mobile-header-h) !important;
height: var(--kajo-mobile-header-h) !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: rgba(251, 247, 239, .82) !important;
backdrop-filter: blur(18px) saturate(155%) !important;
-webkit-backdrop-filter: blur(18px) saturate(155%) !important;
box-shadow: 0 10px 28px rgba(31, 47, 40, .08) !important;
overflow: visible !important;
pointer-events: auto !important;}
body.home.kajo-glass-nav-scrolled .whb-general-header,
body.home.whb-sticked .whb-general-header {
background: rgba(251, 247, 239, .92) !important;
backdrop-filter: blur(22px) saturate(165%) !important;
-webkit-backdrop-filter: blur(22px) saturate(165%) !important;
box-shadow: 0 12px 34px rgba(31, 47, 40, .14) !important;}
body.home .whb-general-header-inner {
position: relative !important;
display: block !important;
align-items: center !important;
min-height: var(--kajo-mobile-header-h) !important;
height: var(--kajo-mobile-header-h) !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
pointer-events: auto !important;}
body.home .whb-general-header .whb-mobile-left,
body.home .whb-general-header .whb-mobile-center,
body.home .whb-general-header .whb-mobile-right {
position: absolute !important;
inset-block-start: 0 !important;
display: flex !important;
align-items: center !important;
min-width: 0 !important;
height: var(--kajo-mobile-header-h) !important;
pointer-events: auto !important;}
body.home .whb-general-header .whb-mobile-left {
inset-inline-start: 14px !important;
width: 44px !important;
justify-content: flex-start !important;}
body.home .whb-general-header .whb-mobile-center {
left: 50% !important;
width: 70px !important;
transform: translateX(-50%) !important;
justify-content: center !important;}
body.home .whb-general-header .whb-mobile-right {
inset-inline-end: 14px !important;
width: auto !important;
justify-content: flex-end !important;
gap: 6px !important;
position: absolute !important;
z-index: 6 !important;}
body.home .wd-header-mobile-nav a,
body.home .wd-header-mobile-nav .wd-tools-icon {
width: 46px !important;
height: 46px !important;}
body.home .wd-header-mobile-nav a {
display: grid !important;
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
background: #9aad86 !important;
color: #fff !important;
place-items: center !important;
pointer-events: auto !important;}
body.home .wd-header-mobile-nav .wd-tools-icon:before {
color: #fff !important;
font-size: 22px !important;}
body.home .whb-general-header .site-logo,
body.home .whb-general-header .wd-logo,
body.home .whb-general-header .site-logo a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 58px !important;
max-width: 58px !important;
height: 58px !important;
margin: 0 auto !important;
padding: 0 !important;
transform: translateY(3px) !important;}
body.home .whb-general-header .site-logo a.wd-sticky-logo,
body.home .whb-general-header .wd-sticky-logo,
body.home .whb-general-header a.wd-sticky-logo {
display: none !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;}
body.home .whb-general-header .site-logo img,
body.home .whb-general-header .wd-logo img {
width: auto !important;
height: 50px !important;
max-width: 54px !important;
max-height: 50px !important;
object-fit: contain !important;
transform: translateY(-4px) scale(1.25) !important;}
body.admin-bar.home .whb-general-header .site-logo img,
body.admin-bar.home .whb-general-header .wd-logo img {
height: 48px !important;
max-width: 52px !important;
max-height: 48px !important;
transform: translateY(-4px) scale(1.25) !important;}
body.home .whb-general-header .whb-col-right {
gap: 4px !important;}
body.home .whb-general-header .wd-header-wishlist {
display: none !important;}
body.home .whb-general-header .wd-header-my-account {
display: none !important;}
body.home .whb-general-header .wd-header-search {
display: flex !important;
order: 1 !important;
visibility: visible !important;
opacity: 1 !important;}
body.home .whb-general-header .wd-header-cart {
order: 2 !important;
visibility: visible !important;
opacity: 1 !important;}
body.home .whb-general-header .kajo-language-docked {
display: flex !important;
order: 3 !important;
position: relative !important;
visibility: visible !important;
opacity: 1 !important;}
body.home .whb-general-header .wd-tools-element > a,
body.home .whb-general-header .kajo-language-docked .trp-current-language-item__wrapper {
display: grid !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
border-radius: 50% !important;
background: transparent !important;
color: #061525 !important;
place-items: center !important;
pointer-events: auto !important;}
body.home .whb-general-header .wd-tools-icon:before {
font-size: 18px !important;
color: #061525 !important;}
body.home .whb-general-header .wd-header-mobile-nav > a {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;}
body.home .whb-general-header .wd-header-mobile-nav .wd-tools-icon {
width: 42px !important;
height: 42px !important;}
body.home .whb-general-header .wd-header-mobile-nav .wd-tools-icon:before {
font-size: 22px !important;
color: #061525 !important;}
body.home .whb-general-header .wd-tools-count,
body.home .whb-general-header .wd-cart-number {
display: grid !important;
inset-block-start: 1px !important;
inset-inline-end: -1px !important;
width: 14px !important;
min-width: 14px !important;
height: 14px !important;
padding: 0 !important;
border-radius: 50% !important;
background: #f58634 !important;
color: #fff !important;
font-size: 9px !important;
font-weight: 700 !important;
line-height: 14px !important;
text-align: center !important;
place-items: center !important;
transform: translate(35%, -35%) !important;}
body.home .whb-general-header .wd-cart-number span,
body.home .whb-general-header .wd-tools-count span {
display: none !important;}
body.home .whb-general-header .kajo-language-docked .trp-shortcode-anchor {
display: none !important;}
body.home .whb-general-header .kajo-language-docked .trp-shortcode-overlay {
display: grid !important;
position: relative !important;
inset: auto !important;
overflow: visible !important;
place-items: center !important;}
body.home .whb-general-header .kajo-language-docked .trp-language-switcher,
body.home .whb-general-header .kajo-language-docked .trp-language-item {
width: 28px !important;
height: 28px !important;
padding: 0 !important;
border: 0 !important;
background: transparent !important;}
body.home .whb-general-header .kajo-language-docked img.trp-flag-image {
width: 22px !important;
height: 22px !important;
border-radius: 50% !important;
object-fit: cover !important;}
body.home .whb-general-header .kajo-language-docked .trp-switcher-dropdown-list {
position: absolute !important;
top: calc(100% + 8px) !important;
right: 0 !important;
bottom: auto !important;
left: auto !important;
min-width: 46px !important;
padding: 6px !important;
border-radius: 999px !important;
background: rgba(255, 255, 255, .96) !important;
box-shadow: 0 14px 34px rgba(31, 47, 40, .16) !important;}
body.home .whb-general-header .kajo-language-docked.kajo-language-open .trp-switcher-dropdown-list {
display: grid !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;}
body.home .whb-general-header .kajo-language-docked .trp-switcher-dropdown-list[hidden] {
display: none !important;}
body.home .wd-header-search-form-mobile,
body.home .whb-header-bottom .wd-search-form {
display: none !important;}
body.home .wd-search-opened .wd-search-full-screen,
body.home .wd-search-full-screen {
z-index: 1005 !important;}
body.home .mobile-nav.wd-side-hidden {
top: calc(var(--kajo-mobile-header-h) + var(--kajo-admin-bar-offset)) !important;
height: calc(100vh - var(--kajo-mobile-header-h) - var(--kajo-admin-bar-offset)) !important;
max-height: calc(100vh - var(--kajo-mobile-header-h) - var(--kajo-admin-bar-offset)) !important;
background: rgba(255, 255, 255, .92) !important;
backdrop-filter: blur(14px) saturate(145%) !important;
-webkit-backdrop-filter: blur(14px) saturate(145%) !important;}
body.home .mobile-nav .wd-heading {
min-height: 0 !important;
height: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;}
body.home .mobile-nav .wd-nav-mobile {
padding-top: 0 !important;}
body.home .mobile-nav .wd-nav-opener {
display: grid !important;
width: 48px !important;
min-width: 48px !important;
color: #526948 !important;
font-size: 0 !important;
line-height: 1 !important;
place-items: center !important;}
body.home .mobile-nav .wd-nav-opener:before {
content: "+" !important;
font-family: "Inter", Arial, sans-serif !important;
font-size: 20px !important;
font-weight: 500 !important;
line-height: 1 !important;}
body.home .mobile-nav .wd-nav-opener:after {
content: none !important;
display: none !important;}
body.home .mobile-nav .wd-drilldown-back .wd-nav-opener:before {
content: "<" !important;
font-size: 18px !important;}}
@media (max-width: 480px) {
body.home .main-page-wrapper {
padding-top: var(--kajo-admin-bar-offset) !important;
margin-top: 0 !important;}
body.home .main-page-wrapper > *:first-child,
body.home .main-page-wrapper > .container:first-child,
body.home .main-page-wrapper .kajo-home-hero:first-child,
body.home .main-page-wrapper .kajo-home-hero-panel:first-child {
margin-top: 0 !important;}
body.home .whb-general-header-inner {
padding-inline: 12px !important;}
body.home .whb-general-header .whb-mobile-right {
inset-inline-end: 12px !important;
gap: 5px !important;}
body.home .whb-general-header .whb-mobile-left {
inset-inline-start: 12px !important;}}
/* Homepage hero should sit full-width underneath the normal overlay navbar. */
@media (min-width: 1025px) {
body.home .main-page-wrapper {
padding-top: 0 !important;}
body.home .wd-content-layout.content-layout-wrapper.container,
body.home .entry-content.post-1043 {
width: 100% !important;
max-width: none !important;
margin-inline: 0 !important;
padding-inline: 0 !important;}
body.home .kajo-home-hero {
width: 100vw !important;
max-width: 100vw !important;
margin-inline-start: calc(50% - 50vw) !important;
margin-inline-end: calc(50% - 50vw) !important;
padding: 0 !important;}
body.home .kajo-home-hero-panel {
width: 100vw !important;
max-width: 100vw !important;
min-height: min(860px, calc(100vh - 4px)) !important;
margin: 0 !important;
border-radius: 0 !important;
border: 0 !important;
box-shadow: none !important;}
body.home .kajo-home-hero-copy {
padding-block-start: 104px !important;}
body.home .kajo-home-hero-media,
body.home .kajo-home-hero-main-image,
body.home .kajo-home-hero-img {
height: 100% !important;}}
@media (max-width: 1024px) {
body .whb-general-header .site-logo .wd-sticky-logo,
body .whb-general-header .wd-logo.wd-sticky-logo {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;}}
/* Mobile drawer hierarchy: keep the header usable and let only one native
Woodmart drawer own the screen at a time. */
@media (max-width: 767px) {
body.home .main-page-wrapper {
padding-top: 0 !important;}
body .whb-header,
body .whb-main-header,
body.home .whb-header,
body.home .whb-main-header {
z-index: 1007 !important;}
/* Keep the native drawer panel above Woodmart's dimmer. The page behind
the drawer may darken, but the navigation itself must stay frosted and
readable. */
/* Parent-theme sticky transforms can leave a false gap above the mobile
header. Its fixed top edge is always the visible bottom of wp-adminbar. */
body .whb-header,
body .whb-main-header,
body.home .whb-header,
body.home .whb-main-header,
body.whb-sticked .whb-header,
body.whb-sticked .whb-main-header,
body.kajo-glass-nav-scrolled .whb-header,
body.kajo-glass-nav-scrolled .whb-main-header {
top: var(--kajo-admin-bar-offset) !important;
transform: none !important;}
/* On the homepage Woodmart keeps the inner row relative to the fixed
shell. Its inherited admin-bar top value was applied twice. */
body.home .whb-header .whb-general-header,
body.home .whb-main-header .whb-general-header {
top: 0 !important;}}
/* Phone navigation drawer. This is a visual layer over Woodmart's existing
menu tree: the native links and drilldown panels remain the source of truth. */
@media (max-width: 767px) {
body.kajo-mobile-menu-open {
overflow: hidden !important;}
body .mobile-nav.wd-side-hidden {
inset-inline-start: 0 !important;
inset-inline-end: auto !important;
border-inline-end: 1px solid rgba(6, 21, 37, .1) !important;
will-change: transform !important;}
body .wd-close-side {
background: rgba(6, 21, 37, .42) !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity .36s ease, visibility 0s linear .36s !important;
visibility: hidden !important;}
body.kajo-mobile-menu-open .wd-close-side {
transition: opacity .36s ease !important;}
body .mobile-nav .wd-heading {
align-items: center !important;
justify-content: space-between !important;
overflow: visible !important;}
body .mobile-nav .kajo-mobile-menu-brand {
min-width: 0 !important;
align-items: center !important;
gap: 10px !important;
color: #061525 !important;
font-size: 17px !important;
font-weight: 700 !important;
line-height: 1 !important;}
body .mobile-nav .kajo-mobile-menu-brand img {
display: block !important;}
body .mobile-nav .close-side-widget {
display: flex !important;
align-items: center !important;
margin: 0 !important;}
body .mobile-nav .close-side-widget a {
transition: background-color .2s ease, color .2s ease, transform .2s ease !important;}
body .mobile-nav .close-side-widget a:hover,
body .mobile-nav .close-side-widget a:focus-visible {
background: #f58634 !important;
color: #fffdfa !important;
transform: rotate(90deg) !important;}
body .mobile-nav .close-side-widget .wd-action-text {
display: none !important;}
body .mobile-nav .close-side-widget .wd-action-icon,
body .mobile-nav .close-side-widget .wd-action-icon:before,
body .mobile-nav .close-side-widget .wd-action-icon:after {
display: block !important;}
body .mobile-nav .wd-nav-mobile > li,
body .mobile-nav .wd-nav-mobile .wd-sub-menu > li,
body .mobile-nav .wd-nav-mobile .sub-sub-menu > li {
min-height: 54px !important;
border-bottom: 1px solid rgba(6, 21, 37, .1) !important;
background: transparent !important;}
body .mobile-nav .wd-nav-mobile > li > a,
body .mobile-nav .wd-nav-mobile .wd-sub-menu > li > a,
body .mobile-nav .wd-nav-mobile .sub-sub-menu > li > a {
display: flex !important;
min-height: 54px !important;
align-items: center !important;
padding: 0 12px 0 0 !important;
color: #061525 !important;
font-family: "Inter", Arial, sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0 !important;
line-height: 1.2 !important;
text-transform: uppercase !important;
transition: color .2s ease, padding-inline-start .26s ease !important;}
body .mobile-nav .wd-nav-mobile > li > a:hover,
body .mobile-nav .wd-nav-mobile > li > a:focus-visible,
body .mobile-nav .wd-nav-mobile .wd-sub-menu > li > a:hover,
body .mobile-nav .wd-nav-mobile .wd-sub-menu > li > a:focus-visible {
padding-inline-start: 7px !important;
color: #d97832 !important;}
/* The category icons were hidden here, which left the mobile menu as a
plain list of words while the desktop mega menu showed them. Same
treatment as the dropdown in style.css - olive disc, round, padded -
scaled down to suit the 54px rows. */
body .mobile-nav .wd-nav-mobile .wd-nav-img {
display: inline-block !important;
flex: 0 0 auto !important;
width: 32px !important;
height: 32px !important;
max-height: 32px !important;
margin-inline-end: 12px !important;
padding: 6px !important;
border-radius: 100px !important;
background-color: transparent !important;
object-fit: contain !important;
position: relative !important;
filter: url("#kajo-icon-tint");}
/* Disc drawn behind the icon rather than on it - see the note in
ohmykajo-glass-navbar.css: a filter would recolour the background too. */
/* The disc is painted as a background on the anchor, positioned against
its CONTENT box - the very box the icon is laid out in. Drawn before as
an absolutely positioned ::before, it resolved against the anchor's
PADDING box and against whichever ancestor happened to be positioned, so
any inline padding on the row, or any failure of the `:has()` selector
that supplied `position: relative`, slid the disc about 20px clear of
the icon. Reported in Arabic and English alike.
A background cannot drift from the icon: same box, same origin. It is
also unaffected by the white `filter` on the image, which is why the
disc could not simply be set on the image itself.
`.kajo-has-nav-icon` is stamped by the mobile menu script; `:has()` is
kept beside it as a no-JS fallback. */
body .mobile-nav .wd-nav-mobile li > a.kajo-has-nav-icon,
body .mobile-nav .wd-nav-mobile li > a:has(> .wd-nav-img) {
position: relative !important;
background-image: radial-gradient(circle at 16px 50%, #9caf88 0 16px, rgba(0, 0, 0, 0) 16px) !important;
background-origin: content-box !important;
background-repeat: no-repeat !important;
background-position: left center !important;}
body.kajo-rtl .mobile-nav .wd-nav-mobile li > a.kajo-has-nav-icon,
body.kajo-rtl .mobile-nav .wd-nav-mobile li > a:has(> .wd-nav-img),
[dir="rtl"] .mobile-nav .wd-nav-mobile li > a.kajo-has-nav-icon,
[dir="rtl"] .mobile-nav .wd-nav-mobile li > a:has(> .wd-nav-img) {
background-image: radial-gradient(circle at calc(100% - 16px) 50%, #9caf88 0 16px, rgba(0, 0, 0, 0) 16px) !important;
background-position: right center !important;}
body .mobile-nav .wd-nav-opener {
width: 46px !important;
min-width: 46px !important;
height: 54px !important;
color: #526948 !important;}
body .mobile-nav .wd-nav-opener:before {
content: "\203A" !important;
font-family: Arial, sans-serif !important;
font-size: 25px !important;
font-weight: 400 !important;
line-height: 1 !important;}
body .mobile-nav .wd-drilldown-back {
position: relative !important;
min-height: 66px !important;
align-items: center !important;
padding-inline-start: 0 !important;
border-bottom-color: rgba(6, 21, 37, .14) !important;}
body .mobile-nav .wd-drilldown-back > a {
padding-inline-start: 8px !important;
color: #526948 !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: none !important;}
body .mobile-nav .wd-drilldown-back .wd-nav-opener {
order: -1 !important;
width: 34px !important;
min-width: 34px !important;}
body .mobile-nav .wd-drilldown-back .wd-nav-opener:before {
content: "\2039" !important;
font-size: 26px !important;}
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu {
background: rgba(255, 252, 247, .99) !important;
transition: transform .42s cubic-bezier(.22, 1, .36, 1) !important;
will-change: transform !important;}
body .mobile-nav .wd-nav-mobile .menu-item-account > a {
color: #526948 !important;}
/* Older homepage-only header rules intentionally collapsed the native
drawer heading. The menu now has its own visible drawer chrome. */
body.home .mobile-nav .wd-heading {
align-items: center !important;
justify-content: space-between !important;
overflow: visible !important;}
body.home .mobile-nav .wd-nav-opener {
width: 46px !important;
min-width: 46px !important;
height: 54px !important;
color: #526948 !important;
place-items: center !important;}
body.home .mobile-nav .wd-nav-opener:before {
content: "\203A" !important;
font-family: Arial, sans-serif !important;
font-size: 25px !important;
font-weight: 400 !important;
line-height: 1 !important;}
body.home .mobile-nav .wd-drilldown-back .wd-nav-opener:before {
content: "\2039" !important;
font-size: 26px !important;}
/* Each parent keeps its real destination link. The adjacent chevron opens
its existing Woodmart submenu as a separate animated menu level. */
body .mobile-nav .wd-nav-mobile li.menu-item-has-children {
position: static !important;
display: flex !important;
align-items: center !important;}
body .mobile-nav .kajo-mobile-submenu-toggle {
position: static !important;
cursor: pointer !important;
z-index: 3 !important;}
body .mobile-nav .kajo-mobile-submenu-toggle:before {
content: "\203A" !important;
font-family: Arial, sans-serif !important;
font-size: 25px !important;
font-weight: 400 !important;
line-height: 1 !important;
transition: color .2s ease, transform .2s ease !important;}
body .mobile-nav .kajo-mobile-submenu-toggle:hover:before,
body .mobile-nav .kajo-mobile-submenu-toggle:focus-visible:before {
color: #d97832 !important;
transform: translateX(3px) !important;}
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu {
position: absolute !important;
inset: 0 -20px auto -20px !important;
display: block !important;
width: calc(100% + 40px) !important;
height: calc(100dvh - var(--kajo-mobile-header-h) - var(--kajo-admin-bar-offset) - 74px) !important;
max-height: calc(100dvh - var(--kajo-mobile-header-h) - var(--kajo-admin-bar-offset) - 74px) !important;
margin: 0 !important;
padding: 8px 20px 28px !important;
overflow-y: auto !important;
border: 0 !important;
background: #fffdfa !important;
opacity: 0 !important;
pointer-events: none !important;
transform: translate3d(104%, 0, 0) !important;
transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .24s ease, visibility 0s linear .42s !important;
visibility: hidden !important;
z-index: 8 !important;}
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu {
inset: 0 !important;
width: 100% !important;
height: 100% !important;}
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu > li:not(.wd-drilldown-back) > a,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu > li:not(.wd-drilldown-back) > a {
padding-inline-start: 20px !important;}
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu.kajo-mobile-submenu-visible,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu.kajo-mobile-submenu-visible {
opacity: 1 !important;
pointer-events: auto !important;
transform: translate3d(0, 0, 0) !important;
transition: transform .42s cubic-bezier(.22, 1, .36, 1), opacity .24s ease, visibility 0s linear 0s !important;
visibility: visible !important;}
body.home .mobile-nav .kajo-mobile-submenu-toggle {
display: grid !important;}
body.home .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu {
background: #fffdfa !important;}
@media (prefers-reduced-motion: reduce) {
body .mobile-nav.wd-side-hidden,
body .wd-close-side,
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu {
transition: none !important;}}}
/* Final cascade: phone menu overlay and accordion, deliberately placed after
Woodmart's legacy drilldown declarations. */
@media (max-width: 767px) {
body .mobile-nav .wd-nav-mobile,
body.home .mobile-nav .wd-nav-mobile,
body .mobile-nav .wd-scroll,
body .mobile-nav .wd-content {
background: transparent !important;}
body .mobile-nav .wd-nav-mobile,
body.home .mobile-nav .wd-nav-mobile { overflow-x: hidden !important; overflow-y: auto !important;}
body .mobile-nav .wd-nav-mobile li.menu-item-has-children { position: relative !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important;}
body .mobile-nav .wd-nav-mobile > li > a,
body .mobile-nav .wd-nav-mobile .wd-sub-menu > li > a,
body .mobile-nav .wd-nav-mobile .sub-sub-menu > li > a { flex: 1 1 0 !important; min-width: 0 !important; padding: 0 !important; border: 0 !important; box-shadow: none !important;}
body .mobile-nav .kajo-mobile-submenu-toggle,
body.home .mobile-nav .kajo-mobile-submenu-toggle { position: static !important; display: grid !important; flex: 0 0 46px !important; width: 46px !important; height: 64px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; place-items: center !important;}
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu {
position: static !important;
display: block !important;
flex: 0 0 100% !important;
width: 100% !important;
height: auto !important;
max-height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
background: transparent !important;
opacity: 0 !important;
pointer-events: none !important;
transform: translate3d(0, -8px, 0) !important;
visibility: hidden !important;
z-index: auto !important;
transition: max-height .38s cubic-bezier(.22, 1, .36, 1), padding .38s cubic-bezier(.22, 1, .36, 1), opacity .2s ease, transform .28s ease, visibility 0s linear .38s !important;}
body .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu.kajo-mobile-submenu-visible,
body .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu.kajo-mobile-submenu-visible,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .wd-sub-menu.kajo-mobile-submenu-visible,
body.home .mobile-nav .wd-nav.wd-layout-drilldown .sub-sub-menu.kajo-mobile-submenu-visible {
max-height: 900px !important;
margin: 0 0 8px !important;
padding: 0 0 6px 14px !important;
overflow: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: none !important;
visibility: visible !important;}}
/* ===================================================================
* Mobile Shop menu icons - alignment hardening (Layer 2DH)
*
* The icons measure dead centre on their olive discs in Chrome at 360, 390,
* 430, 520 and 767px, yet were reported sitting off to the right. Both of the
* assumptions the original rule leans on are browser-dependent, and either
* one failing produces exactly that symptom, so both are now stated outright:
*
* box-sizing the rule sets width:32px with padding:6px and trusts an
* inherited border-box. Under content-box the image becomes
* 44px wide while the disc stays 32px, which pushes the glyph
* about 6px right of the disc centre and lets it spill over
* the edge of the circle.
*
* filter url(#kajo-icon-tint) points at a filter inside a 0x0 SVG.
* Chrome resolves it; engines that do not render the image
* offset, or not at all. brightness(0) invert(1) is exactly
* equivalent for white - white is the one colour the simple
* chain hits precisely - and references nothing.
*
* Verified pixel-identical to the previous rendering in Chrome before being
* committed, so this cannot regress the case that already worked.
* =================================================================== */
body .mobile-nav .wd-nav-mobile .wd-nav-img {
box-sizing: border-box !important;
filter: brightness(0) invert(1) !important;
}