/* === MASPLAY WHITE HEADER 1.0.3 (loaded by wp-content/mu-plugins/masplay-header.php) === Part 1 only applies to
. The mu-plugin adds that class ONLY after it has rearranged the live default_header DOM. If the rearrangement is skipped (other header, markup changed), none of these rules match and the original header stays exactly as it is today (fail-safe). Part 2 (mobile cart badge + mobile menu colours) applies to the live markup as it is. Rollback: delete the mu-plugin file (this CSS is then no longer loaded). */ /* ---------- 1. White single-row header (desktop >= 1025px + mobile layout) ---------- */ .whb-header.mp-white{--mp-ink:#1d1d1f;--mp-nav:#333;--mp-deep:#0F5C86;--mp-cyan:#02A8DA} .whb-header.mp-white .whb-header-bottom{display:none} .whb-header.mp-white .whb-general-header{border-bottom-color:rgba(0,0,0,.08)} @media (min-width:1025px){ .whb-header.mp-white .whb-general-header-inner{height:84px;max-height:84px} } /* logo (stacked, 200x174 source) */ .whb-header.mp-white .wd-logo img.mp-logo{width:66px;max-width:66px;height:auto;padding-top:0;padding-bottom:0} @media (max-width:1024px){.whb-header.mp-white .wd-logo img.mp-logo{width:48px;max-width:48px}} @media (min-width:1025px) and (max-width:1365px){.whb-header.mp-white .whb-col-left .wd-logo img.mp-logo{width:56px;max-width:56px}} @media (min-width:1025px) and (max-width:1199px){.whb-header.mp-white .whb-col-left .wd-logo img.mp-logo{width:48px;max-width:48px}} /* main menu, now in the general row */ .whb-header.mp-white .whb-general-header .whb-col-center{min-width:0} .whb-header.mp-white .whb-general-header .wd-header-main-nav{flex:1 1 auto;min-width:0} .whb-header.mp-white .whb-general-header .wd-nav-main{ --nav-gap:clamp(5px,calc((100vw - 1200px) / 26),9px); flex-wrap:nowrap;white-space:nowrap} .whb-header.mp-white .whb-general-header .wd-nav-main>li>a{ height:44px;color:var(--mp-nav); font:700 12px/1 Lato,Arial,Helvetica,sans-serif !important; letter-spacing:.05em;text-transform:uppercase;background:transparent} .whb-header.mp-white .whb-general-header .wd-nav-main>li.menu-item-has-children>a:after{display:none} /* dropdowns start at the bottom edge of the 84px row (link 44px -> 20px gap); :after keeps the hover bridge */ .whb-header.mp-white .whb-general-header .wd-nav-main>li>.wd-dropdown-menu{margin-top:20px} .whb-header.mp-white .whb-general-header .wd-nav-main>li>.wd-dropdown-menu:after{height:20px} /* underline colour: Woodmart uses --wd-primary-color (#F7F7F7 on this site = invisible) */ .whb-header.mp-white .whb-general-header .wd-nav-main.wd-style-underline .nav-link-text{padding:6px 0} .whb-header.mp-white .whb-general-header .wd-nav-main.wd-style-underline .nav-link-text:after{ top:auto;bottom:-2px;height:2px;border-radius:2px;background-color:var(--mp-cyan)} .whb-header.mp-white .whb-general-header .wd-nav-main>li.current-menu-item>a, .whb-header.mp-white .whb-general-header .wd-nav-main>li.current-menu-ancestor>a{color:var(--mp-deep)} .whb-header.mp-white .whb-general-header .wd-nav-main>li.current-menu-ancestor>a .nav-link-text:after{width:100%} /* neutralise the global Additional-CSS hover (.woodmart-nav-link:hover = blue fill + white text) on top-level items only */ .whb-header.mp-white .wd-nav-main>li>a.woodmart-nav-link:hover, .whb-header.mp-white .wd-nav-main>li:hover>a.woodmart-nav-link{background-color:transparent;color:var(--mp-deep) !important} /* 1.0.2 (desktop only, >=1025px; the menu column is hidden below that): logo + menu = one left-aligned group, menu right after the logo (logo -> INICIO text = 10px .site-logo padding + 14px nav padding = 24px; 28px at >=1366px). Bigger menu: fluid size = the largest that keeps the 12 items on ONE row on inner pages (search + account + cart icons, the widest case) with ~8px of slack before the first icon box (+11px icon padding): 1025-1070px 10.5px, 1126-1199px 11.6px, 1200px 11.9px, 1280px 13px, 1315-1365px 13.5px, 1366px 13.7px, >=1390px 14px. Basis: the 12 Lato-700 uppercase labels measure 66.98px per 1px of font-size (letter-spacing 0). */ @media (min-width:1025px){ .whb-header.mp-white .whb-general-header .whb-col-center{justify-content:flex-start} .whb-header.mp-white .whb-general-header .wd-header-main-nav{text-align:left;padding-left:14px;padding-right:0} } /* 1.0.3: the logo+menu GROUP is centred. Row = [spacer :before][logo][menu column][icons]. The spacer (flex-basis --mp-cb, grows) and the menu column (grows; the menu stays at its left edge) share the free space equally, so space left of the logo = --mp-cb + x and space after CONTACTO = x (up to the first icon box). --mp-cb = the icon link padding (11px; 7px at 1025-1199px) => equal VISIBLE space up to the first icon glyph ("centred in the space left of the icons"). True page centring would need --mp-cb = icon column width - 10px (119px inner pages / 76px home) and only fits on wide screens, so from 1464px --mp-cb ramps up to that value (reached at ~1619px inner pages, ~1528px home) while keeping >=1px, typically ~10-20px, before the icons. To leave room for equal spaces on inner pages, 1.0.3 trims the menu gap by 0.4px per side at 1200-1464px (1280: 5 -> 4.6px, 1440: 8.16 -> 7.76px); font sizes are unchanged from 1.0.2. If the free space ever runs out (e.g. longer menu labels), only the spacer shrinks: the menu packs against the icons, never under them. */ @media (min-width:1025px){ .whb-header.mp-white .whb-general-header-inner{--mp-cb:7px} .whb-header.mp-white .whb-general-header-inner:before{content:"";display:block;flex:1 1 var(--mp-cb);min-width:0;height:1px} .whb-header.mp-white .whb-general-header .whb-col-left, .whb-header.mp-white .whb-general-header .whb-col-right{flex:0 0 auto} .whb-header.mp-white .whb-general-header .whb-col-center{flex:1 0 auto} } @media (min-width:1200px){ .whb-header.mp-white .whb-general-header-inner{--mp-cb:calc(11px + clamp(0px,(100vw - 1464px) * .6986,108px))} body.home .whb-header.mp-white .whb-general-header-inner{--mp-cb:calc(11px + clamp(0px,(100vw - 1464px) * 1.016,65px))} } @media (min-width:1366px){ .whb-header.mp-white .whb-general-header .wd-header-main-nav{padding-left:18px} .whb-header.mp-white .whb-general-header .wd-nav-main{--nav-gap:clamp(5.6px,calc((100vw - 1390px) * .0432 + 5.6px),9px)} .whb-header.mp-white .whb-general-header .wd-nav-main>li>a{font-size:clamp(13px,calc(1.42vw - 5.73px),14px) !important;letter-spacing:0} } @media (min-width:1025px) and (max-width:1365px){ .whb-header.mp-white .whb-general-header .wd-nav-main{--nav-gap:clamp(4.6px,calc((100vw - 1315px) * .0432 + 4.6px),6.8px)} .whb-header.mp-white .whb-general-header .wd-nav-main>li>a{font-size:clamp(11.5px,calc(1.42vw - 5.17px),13.5px) !important;letter-spacing:0} } /* 1025-1199px (48px logo): gap 2->4px while the size stays 10.5px, then the size grows to 11.6px, then gap 4->6px */ @media (min-width:1025px) and (max-width:1199px){ .whb-header.mp-white .whb-general-header .wd-nav-main{--nav-gap:min(6px,max(clamp(2px,calc((100vw - 1025px) * .0432 + 2px),4px),calc((100vw - 1126px) * .0432 + 4px)))} .whb-header.mp-white .whb-general-header .wd-nav-main>li>a{font-size:clamp(10.5px,calc(1.42vw - 4.39px),11.6px) !important;letter-spacing:0} } /* icons: thin line icons (CSS mask) instead of woodmart-font glyphs / the old custom cart PNG */ .whb-header.mp-white .wd-tools-element>a{color:var(--mp-ink)} .whb-header.mp-white .whb-col-right .wd-tools-element>a{padding-left:11px;padding-right:11px} @media (min-width:1025px) and (max-width:1199px){.whb-header.mp-white .whb-col-right .wd-tools-element>a{padding-left:7px;padding-right:7px}} .whb-header.mp-white .mp-search-toggle .wd-tools-text, .whb-header.mp-white .whb-col-right .wd-header-my-account .wd-tools-text{display:none} .whb-header.mp-white .mp-search-toggle .wd-tools-icon:before, .whb-header.mp-white .wd-header-my-account .wd-tools-icon:before, .whb-header.mp-white .wd-header-cart .wd-tools-icon:before, .whb-header.mp-white .wd-header-mobile-nav .wd-tools-icon:before{ content:"" !important;display:block;width:21px;height:21px;font-size:0; background-color:currentColor; -webkit-mask:var(--mp-ico) center/contain no-repeat;mask:var(--mp-ico) center/contain no-repeat} .whb-header.mp-white .mp-search-toggle{--mp-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E")} .whb-header.mp-white .wd-header-my-account{--mp-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8.5' r='3.8'/%3E%3Cpath d='M4.5 20c1.3-3.6 4.2-5.4 7.5-5.4s6.2 1.8 7.5 5.4'/%3E%3C/svg%3E")} .whb-header.mp-white .wd-header-cart{--mp-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1.2 11.2a1.5 1.5 0 0 1-1.5 1.3H7.7a1.5 1.5 0 0 1-1.5-1.3L5 8Z'/%3E%3Cpath d='M9 10V7a3 3 0 0 1 6 0v3'/%3E%3C/svg%3E")} .whb-header.mp-white .wd-header-mobile-nav{--mp-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E")} .whb-header.mp-white .wd-header-mobile-nav .wd-tools-icon:before{width:23px;height:23px} .whb-header.mp-white .wd-header-mobile-nav .wd-tools-text{display:none} .whb-header.mp-white .mp-search-toggle .wd-tools-icon:after{display:none} .whb-header.mp-white .wd-header-cart.wd-design-5{margin-right:0} @media (max-width:1024px){ .whb-header.mp-white .whb-mobile-right .wd-tools-element>a{padding-left:9px;padding-right:9px} .whb-header.mp-white .whb-mobile-left .wd-tools-element>a{padding-left:8px} .whb-header.mp-white .whb-mobile-right .wd-header-cart>a{padding-right:12px} } /* search panel (the live AJAX search form, opened by the search icon) */ .whb-header.mp-white .mp-search-panel{position:absolute;left:0;right:0;top:100%;z-index:400;background:#fff; border-bottom:1px solid rgba(0,0,0,.08);box-shadow:0 12px 24px -12px rgba(0,0,0,.18);padding:18px 0} .whb-header.mp-white .mp-search-panel[hidden]{display:none} .whb-header.mp-white .mp-search-inner{display:flex;align-items:flex-start;gap:12px} .whb-header.mp-white .mp-search-panel .wd-search-form{flex:1 1 auto;max-width:720px;margin:0 auto;padding:0} .whb-header.mp-white .mp-search-close{flex:none;width:42px;height:42px;padding:0;border:0;background:transparent;cursor:pointer;color:var(--mp-ink); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/20px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/20px no-repeat; background-color:currentColor} @media (max-width:1024px){.whb-header.mp-white .mp-search-panel{padding:12px 0}} /* ---------- 2. Mobile fixes (apply to the live markup as it is) ---------- */ /* (a) mobile cart count: design 5 badge uses --wd-primary-color (#F7F7F7) + white text = invisible */ .whb-header .wd-header-cart.wd-design-5 .wd-cart-number{ top:-7px;right:-9px;width:auto;min-width:16px;height:16px;padding:0 4px;border-radius:8px; background-color:#02A8DA;color:#fff;font:700 10px/16px Lato,Arial,sans-serif} /* (b) mobile side menu: current item / hover / opened sub-menu used #F7F7F7 too */ .mobile-nav .wd-nav-mobile{--nav-mobile-link-color-hover:#0F5C86;--nav-mobile-link-color-current:#0F5C86} .mobile-nav .wd-nav-opener.wd-active{background-color:#02A8DA} /* fallback only: if the PHP clean-up of the empty "Categorias" tab did not run, hide the placeholder */ .mobile-nav>.create-nav-msg{display:none} .mobile-nav>.wd-nav-mob-tab:has(+ .create-nav-msg){display:none} /* === /MASPLAY WHITE HEADER 1.0.3 === */ /* ========================================================================== 1.1.0 (desktop only, >=1025px): header v2 items + mega menu. Every rule is scoped to .mp2-nav / .mpmm, which only exist when the v2 menu is on (kill switches => 1.0.3 look). The mobile header and the mobile side menu are not affected. ========================================================================== */ @media (min-width:1025px){ .whb-header.mp-white .whb-general-header .wd-nav-main.mp2-nav{--nav-gap:clamp(9px,calc((100vw - 1100px) / 22),16px)} .whb-header.mp-white .whb-general-header .wd-nav-main.mp2-nav>li>a{height:44px;font-family:"Jost","Lato",Arial,sans-serif !important;font-size:clamp(14.5px,calc(.5vw + 8.4px),15.5px) !important;font-weight:400 !important;text-transform:none !important;letter-spacing:0 !important;color:#1d1d1f} .whb-header.mp-white .whb-general-header .wd-nav-main.mp2-nav>li>a:hover,.whb-header.mp-white .whb-general-header .wd-nav-main.mp2-nav>li:hover>a,.whb-header.mp-white .whb-general-header .wd-nav-main.mp2-nav>li.mpmm-open>a{color:var(--mp-deep) !important} .whb-header.mp-white .whb-general-header .wd-nav-main.mp2-nav.wd-style-underline .nav-link-text{padding:7px 0} .whb-header.mp-white .whb-general-header .wd-nav-main.mp2-nav.wd-style-underline .nav-link-text:after{height:2px;bottom:0;border-radius:2px;background-color:var(--mp-deep)} .whb-header.mp-white .whb-general-header .wd-nav-main.mp2-nav>li.current-menu-item>a{color:var(--mp-deep) !important;font-weight:600 !important} .whb-header.mp-white .whb-general-header .wd-nav-main.mp2-nav>li.mpmm-open>a .nav-link-text:after{width:100%} /* chevron on items with a panel */ .whb-header.mp-white .whb-general-header .wd-nav-main.mp2-nav>li.mp2-mega>a .nav-link-text{display:inline-flex;align-items:center;gap:6px} .whb-header.mp-white .whb-general-header .wd-nav-main.mp2-nav>li.mp2-mega>a .nav-link-text:before{content:"";order:2;width:6px;height:6px;margin-top:-3px;border:solid currentColor;border-width:0 1.6px 1.6px 0;transform:rotate(45deg);opacity:.5;transition:opacity .2s} .whb-header.mp-white .whb-general-header .wd-nav-main.mp2-nav>li.mp2-mega:hover>a .nav-link-text:before{opacity:.9} /* Ofertas: blue + orange dot */ .whb-header.mp-white .wd-nav-main.mp2-nav>li.mp2-ofertas>a{color:var(--mp-deep) !important;font-weight:600 !important} .whb-header.mp-white .wd-nav-main.mp2-nav>li.mp2-ofertas>a .nav-link-text{display:inline-flex;align-items:center;gap:7px} .whb-header.mp-white .wd-nav-main.mp2-nav>li.mp2-ofertas>a .nav-link-text:before{content:"";width:6px;height:6px;border-radius:50%;background:#F26B1D;box-shadow:0 0 0 3px rgba(242,107,29,.16)} /* mega panel: full width under the header (positioned against .whb-main-header) */ .whb-header.mp-white .wd-nav-main.mp2-nav>li.mp2-mega{position:static} .whb-header.mp-white .mpmm{position:absolute;left:0;right:0;top:100%;z-index:400;visibility:hidden;opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .22s;background:#fff;border-top:1px solid #ececf0;box-shadow:0 24px 48px -18px rgba(15,35,60,.18);text-align:left;white-space:normal;font-family:"Jost","Lato",Arial,sans-serif;color:#1d1d1f;cursor:default} .whb-header.mp-white .mpmm:before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22px} .whb-header.mp-white .wd-nav-main.mp2-nav>li.mp2-mega:hover>.mpmm,.whb-header.mp-white .wd-nav-main.mp2-nav>li.mpmm-open>.mpmm,.whb-header.mp-white .wd-nav-main.mp2-nav>li.mp2-mega:focus-within>.mpmm{visibility:visible;opacity:1;pointer-events:auto;transform:none;transition:opacity .16s ease .1s,transform .16s ease .1s,visibility 0s linear .1s} .whb-header.mp-white .wd-nav-main.mp2-nav>li.mp2-mega:focus-within>.mpmm{transition:none} .whb-header.mp-white .wd-nav-main.mp2-nav:hover>li.mp2-mega:not(:hover):not(.mpmm-open)>.mpmm{transition:none;visibility:hidden;opacity:0} .whb-header.mp-white .mpmm-in{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr)) 236px;gap:0 26px;max-width:1222px;margin:0 auto;padding:26px 15px 18px} .whb-header.mp-white .mpmm-nopromo .mpmm-in{grid-template-columns:repeat(var(--n),minmax(0,1fr))} .whb-header.mp-white .mpmm-col{min-width:0} .whb-header.mp-white .mpmm-ph{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/10;max-height:150px;border-radius:14px;background:#F5F5F7;overflow:hidden} .whb-header.mp-white .mpmm-img{width:auto !important;height:86% !important;max-width:90%;object-fit:contain;mix-blend-mode:multiply} .whb-header.mp-white .mpmm-t{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:14px 0 6px;padding:0 0 8px;border-bottom:2px solid #1d1d1f;font:600 15.5px/1.2 "Jost",Arial,sans-serif} .whb-header.mp-white .mpmm-t a{color:#1d1d1f !important;background:none !important} .whb-header.mp-white .mpmm-t span{font:500 12px/1 "Jost",Arial,sans-serif;color:#86868b} .whb-header.mp-white .mpmm-col ul{list-style:none;margin:0 0 6px;padding:0} .whb-header.mp-white .mpmm-col li{margin:0} .whb-header.mp-white .mpmm-col li a{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0;font:400 14px/1.3 "Jost",Arial,sans-serif !important;color:#1d1d1f !important;background:none !important;text-transform:none !important} .whb-header.mp-white .mpmm-col li a:hover{color:var(--mp-deep) !important} .whb-header.mp-white .mpmm-col li small{font:400 12px/1 "Jost",Arial,sans-serif;color:#86868b} .whb-header.mp-white .mpmm-all{display:inline-flex;align-items:center;gap:5px;margin-top:4px;font:600 13.5px/1.3 "Jost",Arial,sans-serif;color:var(--mp-deep) !important;background:none !important} .whb-header.mp-white .mpmm-all:hover{text-decoration:underline} .whb-header.mp-white .mpmm-promo{grid-column:-2;grid-row:1;display:flex;flex-direction:column;align-items:flex-start;min-width:0;padding:14px 16px 16px;border-radius:16px;background:#F5F5F7;color:#1d1d1f !important} .whb-header.mp-white .mpmm-promo>*{max-width:100%} .whb-header.mp-white .mpmm-promo .mpmm-ph{aspect-ratio:4/3;max-height:none;background:#fff} .whb-header.mp-white .mpmm-promo .mpmm-img{mix-blend-mode:normal;height:92% !important} .whb-header.mp-white .mpmm-k{margin-top:12px;padding:4px 9px;border-radius:999px;background:#fff;font:600 11px/1 "Jost",Arial,sans-serif;color:var(--mp-deep);letter-spacing:.02em} .whb-header.mp-white .mpmm-promo strong{margin-top:8px;font:600 17px/1.2 "Jost",Arial,sans-serif} .whb-header.mp-white .mpmm-spec{margin-top:4px;font:400 12.5px/1.35 "Jost",Arial,sans-serif;color:#6e6e73} .whb-header.mp-white .mpmm-price{margin-top:8px;font:600 14.5px/1.2 "Jost",Arial,sans-serif} .whb-header.mp-white .mpmm-price del{margin-left:4px;font-weight:400;font-size:12.5px;color:#86868b} .whb-header.mp-white .mpmm-price em{display:block;margin-top:2px;font:400 11.5px/1.2 "Jost",Arial,sans-serif;color:#6e6e73;font-style:normal} .whb-header.mp-white .mpmm-btn{margin-top:12px;padding:9px 20px;border-radius:999px;background:var(--mp-deep);color:#fff;font:600 13.5px/1 "Jost",Arial,sans-serif} .whb-header.mp-white .mpmm-promo:hover .mpmm-btn{background:#0b4a6c} .whb-header.mp-white .mpmm-foot{display:flex;justify-content:space-between;max-width:1222px;margin:0 auto;padding:12px 15px 16px;border-top:1px solid #f0f0f3} .whb-header.mp-white .mpmm-foot a{display:inline-flex;align-items:center;gap:5px;font:600 13px/1.3 "Jost",Arial,sans-serif;color:var(--mp-deep) !important;background:none !important} .whb-header.mp-white .mpmm-foot a+a{color:#6e6e73 !important;font-weight:500} } @media (min-width:1025px) and (max-width:1300px){ .whb-header.mp-white .mpmm-in{grid-template-columns:repeat(var(--n),minmax(0,1fr)) 210px;gap:0 20px} .whb-header.mp-white .mpmm-nopromo .mpmm-in{grid-template-columns:repeat(var(--n),minmax(0,1fr))} .whb-header.mp-white .mpmm-col li a{font-size:13.5px !important} .whb-header.mp-white .mpmm-t{font-size:14.5px} } @media (min-width:1025px) and (max-width:1180px){ .whb-header.mp-white .whb-general-header .wd-nav-main.mp2-nav{--nav-gap:7px} .whb-header.mp-white .whb-general-header .wd-nav-main.mp2-nav>li>a{font-size:14px !important} } /* ========================================================================== 1.2.0 (mobile/tablet only, <=1024px): menu sheet inside Woodmart's drawer (.mobile-nav.mpmv) + bottom tab bar (.mpmb). Desktop (>=1025px) is untouched: every rule below is inside @media (max-width:1024px) except the bar's display:none. ========================================================================== */ .mpmb{display:none} @media (max-width:1024px){ html{--mpmb-h:58px;--mpmb-sab:env(safe-area-inset-bottom,0px)} /* --- bottom bar --- */ .mpmb{position:fixed;left:0;right:0;bottom:0;z-index:390;display:flex;height:calc(var(--mpmb-h) + var(--mpmb-sab));padding:0 0 var(--mpmb-sab);margin:0;background:#0F5C86;box-shadow:0 -1px 0 rgba(255,255,255,.06),0 -6px 18px rgba(10,30,50,.18);font-family:"Jost","Lato",Arial,sans-serif;transition:transform .2s ease} .mpmb .mpmb-i{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;padding:0;color:rgba(255,255,255,.82) !important;text-decoration:none;background:none;-webkit-tap-highlight-color:transparent} .mpmb .mpmb-i.on{color:#fff !important} .mpmb .mpmb-i.on:before{content:"";position:absolute;top:0;left:50%;width:34px;height:3px;margin-left:-17px;border-radius:0 0 3px 3px;background:#02A8DA} .mpmb .mpmb-ic{position:relative;display:block;width:25px;height:25px} .mpmb .mpmb-ic svg{display:block;width:25px;height:25px} .mpmb .mpmb-l{font:500 11.5px/1 "Jost",Arial,sans-serif;letter-spacing:.01em;text-transform:none;white-space:nowrap} .mpmb .mpmb-i.on .mpmb-l{font-weight:600} .mpmb .mpmb-dot{position:absolute;top:-1px;right:-3px;width:8px;height:8px;border-radius:50%;background:#F26B1D;box-shadow:0 0 0 2px #0F5C86} .mpmb .mpmb-n{position:absolute;top:-5px;right:-9px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#02A8DA;color:#fff;font:600 11px/18px "Jost",Arial,sans-serif;text-align:center;box-shadow:0 0 0 2px #0F5C86} .mpmb .mpmb-n[data-n="0"]{display:none} html.mpmb-kb .mpmb{transform:translateY(110%)} html.mpmv-open .mpmb{z-index:100001} body.mpmb-on{padding-bottom:calc(var(--mpmb-h) + var(--mpmb-sab))} body.mpmb-on .scrollToTop{bottom:calc(var(--mpmb-h) + var(--mpmb-sab) + 12px)} /* floating social buttons (inline position:fixed links) hidden while the menu is open */ html.mpmv-open a[style*="9999999999999999"]{display:none !important} html.mpmv-open,html.mpmv-open body{overflow:hidden} /* --- menu sheet: Woodmart's drawer restyled (it still opens/closes it) --- */ .mobile-nav.mpmv.wd-side-hidden{left:8px;right:8px;top:56px;bottom:calc(var(--mpmb-h) + var(--mpmb-sab));width:auto !important;max-width:none;padding:0;overflow:visible;background:#F5F5F7;border-radius:18px;box-shadow:0 -10px 40px rgba(0,0,0,.25);transform:translate3d(0,calc(100% + 120px),0);visibility:hidden;transition:transform .45s cubic-bezier(.19,1,.22,1),visibility 0s linear .45s;z-index:99999;font-family:"Jost","Lato",Arial,sans-serif;color:#1d1d1f;text-align:left} .mobile-nav.mpmv.wd-side-hidden.wd-opened{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.19,1,.22,1),visibility 0s} .mobile-nav.mpmv a{color:inherit;text-decoration:none} .mobile-nav.mpmv button{-webkit-appearance:none;appearance:none;margin:0;min-height:0;box-shadow:none;text-transform:none;letter-spacing:0;cursor:pointer;-webkit-tap-highlight-color:transparent} .mobile-nav.mpmv .mpmv-in{position:absolute;inset:0} .mobile-nav.mpmv .mpmv-clip{position:absolute;inset:0;overflow:hidden;border-radius:18px} .mobile-nav.mpmv .mpmv-x{position:absolute;right:10px;top:-14px;z-index:3;display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:50%;border:2px solid #fff;background:#0F5C86;color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.25)} .mobile-nav.mpmv .mpmv-x svg{width:16px;height:16px} .mobile-nav.mpmv .mpmv-l1,.mobile-nav.mpmv .mpmv-l2{position:absolute;inset:0;display:flex;flex-direction:column;background:#F5F5F7;transition:transform .28s ease} .mobile-nav.mpmv .mpmv-l2{transform:translateX(100%);visibility:hidden} .mobile-nav.mpmv .mpmv-l2.on{visibility:visible} .mobile-nav.mpmv.mpmv-drill .mpmv-l1{transform:translateX(-30%)} .mobile-nav.mpmv.mpmv-drill .mpmv-l2.on{transform:none} .mobile-nav.mpmv .mpmv-tabs{display:flex;gap:4px;padding:14px 12px 0;background:#0F5C86;overflow-x:auto;scrollbar-width:none} .mobile-nav.mpmv .mpmv-tabs button{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:auto;padding:11px 14px 12px;border:0;border-radius:12px 12px 0 0;background:rgba(255,255,255,.12);color:#fff;font:500 16px/1 "Jost",Arial,sans-serif} .mobile-nav.mpmv .mpmv-tabs button.on{background:#F5F5F7;color:#0F5C86;font-weight:600;font-size:17px} .mobile-nav.mpmv .mpmv-tabs b{font:500 11.5px/1 "Jost",Arial,sans-serif;padding:3px 6px;border-radius:999px;background:rgba(255,255,255,.18)} .mobile-nav.mpmv .mpmv-tabs button.on b{background:#e3eef4} .mobile-nav.mpmv .mpmv-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#F26B1D;box-shadow:0 0 0 3px rgba(242,107,29,.18);flex:0 0 auto} .mobile-nav.mpmv .mpmv-body{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:12px 10px 28px} .mobile-nav.mpmv .mpmv-pane{display:none} .mobile-nav.mpmv .mpmv-pane.on{display:block} .mobile-nav.mpmv .mpmv-chips{display:flex;gap:8px;overflow-x:auto;padding:0 2px 12px;scrollbar-width:none} .mobile-nav.mpmv .mpmv-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px;border-radius:999px;background:#fff;border:1px solid #dfe3e8;font:500 14px/1 "Jost",Arial,sans-serif;color:#1d1d1f} .mobile-nav.mpmv .mpmv-chip svg{width:17px;height:17px;color:#0F5C86} .mobile-nav.mpmv .mpmv-chip b{font-weight:500;color:#6e6e73;font-size:12.5px} .mobile-nav.mpmv .mpmv-chip.mpmv-wa svg{color:#1faa53} .mobile-nav.mpmv .mpmv-list{display:flex;flex-direction:column;gap:8px} .mobile-nav.mpmv .mpmv-row{display:flex;align-items:center;gap:14px;min-height:72px;padding:8px 14px 8px 8px;border-radius:14px;background:#fff;box-shadow:0 1px 0 rgba(15,35,60,.05)} .mobile-nav.mpmv .mpmv-ph{flex:0 0 56px;width:56px;height:56px;border-radius:12px;background:#F5F5F7;display:flex;align-items:center;justify-content:center;overflow:hidden} .mobile-nav.mpmv .mpmv-img{width:86% !important;height:86% !important;max-width:none;object-fit:contain;mix-blend-mode:multiply} .mobile-nav.mpmv .mpmv-nm{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;font:500 17.5px/1.15 "Jost",Arial,sans-serif} .mobile-nav.mpmv .mpmv-nm small{font:400 12.5px/1 "Jost",Arial,sans-serif;color:#6e6e73} .mobile-nav.mpmv .mpmv-chev{flex:0 0 16px;width:16px;height:16px;color:#1d1d1f;opacity:.7} .mobile-nav.mpmv .mpmv-of .mpmv-nm{color:#0F5C86;font-weight:600} .mobile-nav.mpmv .mpmv-of .mpmv-nm>span{display:inline-flex;align-items:center;gap:8px} .mobile-nav.mpmv .mpmv-of .mpmv-nm small{margin-left:15px} .mobile-nav.mpmv .mpmv-prod .mpmv-pn{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:500 14.5px/1.25 "Jost",Arial,sans-serif} .mobile-nav.mpmv .mpmv-prod .mpmv-pr{font:600 13.5px/1.2 "Jost",Arial,sans-serif;color:#0F5C86} .mobile-nav.mpmv .mpmv-prod .mpmv-pr del{margin-left:4px;font-weight:400;color:#86868b} .mobile-nav.mpmv .mpmv-note{margin:0 4px 10px;font:400 13px/1.35 "Jost",Arial,sans-serif;color:#6e6e73} .mobile-nav.mpmv .mpmv-foot{display:flex;gap:18px;justify-content:center;padding:18px 0 4px;font:500 14px/1 "Jost",Arial,sans-serif;color:#6e6e73} .mobile-nav.mpmv .mpmv-foot a:first-child{color:#0F5C86;font-weight:600;display:inline-flex;gap:5px;align-items:center} .mobile-nav.mpmv .mpmv-l2h{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 14px 13px;background:#fff;border-bottom:1px solid #e8eaee} .mobile-nav.mpmv .mpmv-back{display:inline-flex;align-items:center;gap:4px;height:auto;padding:6px 10px 6px 4px;border:0;border-radius:999px;background:none;color:#0F5C86;font:600 15px/1 "Jost",Arial,sans-serif} .mobile-nav.mpmv .mpmv-back svg{width:18px;height:18px} .mobile-nav.mpmv .mpmv-h{margin:0 52px 0 0;display:flex;align-items:baseline;gap:8px;font:600 20px/1 "Jost",Arial,sans-serif;color:#1d1d1f} .mobile-nav.mpmv .mpmv-h small{font:400 12.5px/1 "Jost",Arial,sans-serif;color:#6e6e73} .mobile-nav.mpmv .mpmv-allbar{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;padding:14px 16px;border-radius:14px;background:#0F5C86;color:#fff;font:600 15px/1 "Jost",Arial,sans-serif} .mobile-nav.mpmv .mpmv-sec{margin:0 0 8px;border-radius:14px;background:#fff;overflow:hidden} .mobile-nav.mpmv .mpmv-row-sub{box-shadow:none;border-radius:0} .mobile-nav.mpmv .mpmv-lines{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 4px 78px} .mobile-nav.mpmv .mpmv-lines a{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-radius:999px;background:#F5F5F7;font:400 13.5px/1 "Jost",Arial,sans-serif} .mobile-nav.mpmv .mpmv-lines small{font-size:11.5px;color:#6e6e73} .mobile-nav.mpmv .mpmv-all{display:inline-flex;align-items:center;gap:5px;margin:6px 0 12px 78px;font:600 13.5px/1.2 "Jost",Arial,sans-serif;color:#0F5C86} .mobile-nav.mpmv .mpmv-promo{display:flex;gap:14px;align-items:center;margin-top:4px;padding:12px;border-radius:14px;background:#fff;border:1px solid #e2e6ea} .mobile-nav.mpmv .mpmv-promo .mpmv-ph{flex-basis:84px;width:84px;height:84px} .mobile-nav.mpmv .mpmv-pt{display:flex;flex-direction:column;gap:3px;min-width:0} .mobile-nav.mpmv .mpmv-pt em{align-self:flex-start;padding:3px 8px;border-radius:999px;background:#F5F5F7;font:600 11px/1 "Jost",Arial,sans-serif;color:#0F5C86;font-style:normal} .mobile-nav.mpmv .mpmv-pt strong{font:600 16px/1.2 "Jost",Arial,sans-serif} .mobile-nav.mpmv .mpmv-spec{font:400 12px/1.3 "Jost",Arial,sans-serif;color:#6e6e73} .mobile-nav.mpmv .mpmv-price{font:600 14px/1.2 "Jost",Arial,sans-serif} .mobile-nav.mpmv .mpmv-price small,.mobile-nav.mpmv .mpmv-price del{font-weight:400;color:#6e6e73;font-size:12px} }