/* MKM custom header — MOBILE — staging beta. Everything scoped under #mkm-header-m. */

/* ---- sticky host ---- */
header.mkm-header-host{position:sticky;top:0;z-index:1100;display:block;transition:box-shadow .25s ease;}
header.mkm-header-host.mkm-stuck{box-shadow:0 6px 22px -10px rgba(20,24,36,.28);}
header.mkm-header-host.mkm-stuck #mkm-header-m .b-band{max-height:0;}

/* hide the mobile header on desktop viewports (≥1025px) */
@media (min-width:1025px){ #mkm-header-m{ display:none !important; } }

#mkm-header-m{
  --slate:#2D3142; --slate2:#4F5D75; --coral:#E5625E; --puro:#9B1B30; --line:#e4e5ec;
  font-family:'Bricolage Grotesque',-apple-system,sans-serif;
  color:var(--slate);
  background:#fff;
  box-shadow:0 1px 0 #e7e8ed;
  -webkit-font-smoothing:antialiased;
}
#mkm-header-m *{box-sizing:border-box;}

/* ---- warranty band : bilingual scrolling marquee ---- */
#mkm-header-m .b-band{background:var(--slate);overflow:hidden;max-height:32px;transition:max-height .32s ease;}
#mkm-header-m .marquee-mask{height:32px;display:flex;align-items:center;overflow:hidden;}
#mkm-header-m .marquee{display:flex;flex:0 0 auto;align-items:center;animation:mkm-mq 42s linear infinite;will-change:transform;}
#mkm-header-m .b-band:active .marquee{animation-play-state:paused;}
#mkm-header-m .marquee .unit{display:flex;flex:0 0 auto;align-items:center;gap:9px;padding:0 22px;white-space:nowrap;}
#mkm-header-m .marquee .unit .sh{width:11px;height:11px;color:var(--coral);flex:0 0 auto;}
#mkm-header-m .marquee .unit .msg{font-size:10px;font-weight:500;letter-spacing:.085em;text-transform:uppercase;color:#aab0c0;margin:0;}
#mkm-header-m .marquee .unit .msg b{color:#fff;font-weight:700;}
@keyframes mkm-mq{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---- main bar ---- */
#mkm-header-m .b-main{display:flex;align-items:center;height:58px;padding:0 8px 0 6px;gap:2px;}
#mkm-header-m .burger{width:42px;height:42px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;background:none;border:0;cursor:pointer;flex:0 0 auto;padding:0;}
#mkm-header-m .burger span{display:block;width:21px;height:2px;background:var(--slate) !important;border-radius:2px;}
/* the bars keep the slate colour on hover/focus/active — they must not recolour */
#mkm-header-m .burger:hover span,#mkm-header-m .burger:focus span,#mkm-header-m .burger:active span{background:var(--slate) !important;}
/* burger morphs into an X while the off-canvas menu is open (no animation) */
#mkm-header-m .burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#mkm-header-m .burger.is-open span:nth-child(2){opacity:0;}
#mkm-header-m .burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
#mkm-header-m .logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto;margin-left:2px;}
#mkm-header-m .logo img{display:block;height:38px;width:auto;}
#mkm-header-m .spacer{flex:1 1 auto;}
#mkm-header-m .ic{width:40px;height:42px;display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;position:relative;text-decoration:none;flex:0 0 auto;padding:0;}
#mkm-header-m .ic svg{width:22px;height:22px;color:var(--slate);}
#mkm-header-m .ic:active svg{color:var(--coral);}
/* strip Woodmart's global <button> styling from all header buttons
   (grey box, uppercase, min-width) — !important beats the theme */
#mkm-header-m button.burger,
#mkm-header-m button.ic,
#mkm-header-m button.cutoff-bar{
  -webkit-appearance:none;appearance:none;
  background:none !important;border:0 !important;box-shadow:none !important;
  text-transform:none !important;letter-spacing:normal !important;
  min-width:0 !important;margin:0;color:var(--slate);}
/* no focus square / tap-highlight square on the header icon buttons */
#mkm-header-m .burger,#mkm-header-m .ic,#mkm-header-m .cutoff-bar{
  -webkit-tap-highlight-color:transparent;outline:none !important;}
#mkm-header-m .burger:focus,#mkm-header-m .ic:focus,#mkm-header-m .cutoff-bar:focus,
#mkm-header-m .burger:focus-visible,#mkm-header-m .ic:focus-visible,#mkm-header-m .cutoff-bar:focus-visible{
  outline:none !important;box-shadow:none !important;}
#mkm-header-m .ic .cnt{position:absolute;top:3px;right:1px;min-width:17px;height:17px;background:var(--coral);
  color:#fff;font-weight:800;font-size:9.5px;display:flex;align-items:center;justify-content:center;
  border-radius:999px;padding:0 4px;}

/* ---- expanding search row ---- */
#mkm-header-m .b-search{max-height:0;overflow:hidden;transition:max-height .26s ease;background:#fff;}
#mkm-header-m .b-search.open{max-height:66px;}
#mkm-header-m .search-inner{display:flex;align-items:center;gap:10px;height:46px;margin:8px 14px;padding:0 15px;
  background:#f3f4f7;border:1.5px solid var(--line);border-radius:11px;}
#mkm-header-m .search-inner svg{width:18px;height:18px;color:#9398a6;flex:0 0 auto;}
#mkm-header-m .search-inner input{flex:1;background:none;border:0 !important;outline:0;box-shadow:none;font-family:inherit;
  font-size:14.5px;font-weight:500;color:var(--slate);height:100%;border-radius:0 !important;margin:0;padding:0;}
#mkm-header-m .search-inner input::placeholder{color:#9398a6;}

/* ---- compact cutoff strip — variante 3 (gris-slate + liseré coral) ---- */
#mkm-header-m .b-cutoff{background:#eceef3;border-top:1px solid #dfe2ea;border-bottom:1px solid #dfe2ea;
  border-left:3px solid var(--coral);}
#mkm-header-m .cutoff-bar{display:flex;align-items:center;gap:9px;width:100%;height:45px;padding:0 14px;
  background:none;border:0;cursor:pointer;font-family:inherit;}
#mkm-header-m .puro-ico{height:17px;width:auto;flex:0 0 auto;display:block;}
#mkm-header-m .cut-name .puro-ico{height:15px;}
#mkm-header-m .sonar{width:6px;height:6px;border-radius:50%;background:var(--coral);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(229,98,94,.55);animation:mkm-sonar 2.2s infinite;}
@keyframes mkm-sonar{0%{box-shadow:0 0 0 0 rgba(229,98,94,.55);}70%{box-shadow:0 0 0 7px rgba(229,98,94,0);}100%{box-shadow:0 0 0 0 rgba(229,98,94,0);}}
#mkm-header-m .cutoff-bar .lbl{font-weight:700;font-size:12px;color:var(--slate);letter-spacing:.005em;}
#mkm-header-m .cutoff-bar .sep{color:#c4c7d0;font-size:11px;}
#mkm-header-m .cutoff-bar .big{font-weight:800;font-size:13.5px;color:var(--slate);font-variant-numeric:tabular-nums;}
#mkm-header-m .cutoff-bar .big.urgent{color:var(--coral);}
#mkm-header-m .cutoff-bar .cv{margin-left:auto;color:#b9bcc7;font-size:10px;transition:transform .2s;}
#mkm-header-m .b-cutoff.open .cv{transform:rotate(180deg);}
#mkm-header-m .cutoff-panel{max-height:0;overflow:hidden;transition:max-height .28s ease;background:#fff;}
#mkm-header-m .b-cutoff.open .cutoff-panel{max-height:240px;}
#mkm-header-m .panel-inner{padding:6px 8px 10px;}
#mkm-header-m .cut-row{padding:12px 11px;border-radius:10px;}
#mkm-header-m .cut-row+.cut-row{margin-top:2px;}
#mkm-header-m .cut-top{display:flex;align-items:center;justify-content:space-between;gap:12px;}
#mkm-header-m .cut-name{display:flex;align-items:center;gap:8px;}
#mkm-header-m .cut-name svg{width:16px;height:16px;color:var(--slate2);flex:0 0 auto;}
#mkm-header-m .cut-name .lbl{font-weight:700;font-size:13px;color:var(--slate);}
#mkm-header-m .puro-logo{font-weight:800;font-size:15px;color:var(--puro);letter-spacing:-.03em;}
#mkm-header-m .puro-logo sup{font-size:6.5px;font-weight:700;vertical-align:super;}
#mkm-header-m .cut-row .t{font-weight:800;font-size:14px;color:var(--slate);font-variant-numeric:tabular-nums;}
#mkm-header-m .cut-row .t.urgent{color:var(--coral);}
#mkm-header-m .cut-meta{font-size:10.5px;color:#9398a6;margin-top:5px;}
#mkm-header-m .track{height:4px;background:#e7e8ed;border-radius:999px;margin-top:9px;overflow:hidden;}
#mkm-header-m .track i{display:block;height:100%;width:50%;background:var(--coral);border-radius:999px;transition:width .6s ease;}

/* ---- Woodmart off-canvas menu : opens BELOW the sticky header (top = --mkm-hh,
   set by the JS on burger click) + dim backdrop. mkm-mnav-dim is mirrored onto
   .wd-close-side by the JS while the menu is open. ---- */
.mobile-nav.wd-opened{z-index:1300 !important;top:var(--mkm-hh,0px) !important;
  bottom:0 !important;height:auto !important;overflow-y:auto !important;
  border-top:1px solid #e4e5ec !important;}
.wd-close-side.mkm-mnav-dim{z-index:1290 !important;top:var(--mkm-hh,0px) !important;
  opacity:1 !important;background:rgba(20,24,36,.42) !important;pointer-events:auto !important;
  /* override Woodmart's delayed top/z-index transition → backdrop dims uniformly, no lag */
  transition:opacity .18s ease !important;}

/* ---- mobile menu : clean expand-arrows. Woodmart's opener uses an icon-font
   glyph (::after content:"\f113" → renders unreliably, "arrows disappear") and a
   terracotta active square. Replace with a pure-CSS chevron — zero font dependency,
   consistent on every level and state. ---- */
.mobile-nav .wd-nav-opener{background:transparent !important;}
.mobile-nav .wd-nav-opener::after{content:none !important;}
.mobile-nav .wd-nav-opener::before{
  content:"" !important;box-sizing:border-box;position:absolute;top:50%;left:50%;
  width:9px;height:9px;border-right:2px solid #2D3142;border-bottom:2px solid #2D3142;
  background:none !important;
  transform:translate(-50%,-50%) rotate(-45deg);transition:transform .18s ease;}
.mobile-nav .wd-nav-opener.wd-active::before{
  transform:translate(-50%,-50%) rotate(45deg);}

/* ---- mobile menu : self-sufficient row styling. Woodmart splits the menu-row
   separator border + the caret-suppression rule across header CSS "parts" it
   omits on its system pages (/my-account/, /checkout/…). On those pages an extra
   woodmart-font caret renders after every label and the row separators vanish.
   Define both here — this file loads on EVERY page — so the menu looks identical
   everywhere, independent of which Woodmart parts the page happens to load. */
.mobile-nav .menu-item > a::after,
.mobile-nav .woodmart-nav-link::after{content:none !important;}
.mobile-nav .menu-item > a{
  min-height:50px !important;
  border-bottom:1px solid rgba(0,0,0,.106) !important;
  padding-right:20px !important;}

/* ---- mobile menu : thin charter scrollbar. The default scrollbar renders
   inconsistently (classic + gap on some browsers/OS, overlay on others).
   Force a thin, consistently-styled 7px scrollbar. ---- */
.mobile-nav.wd-opened{scrollbar-width:thin;scrollbar-color:#c4c7d0 transparent;}
.mobile-nav.wd-opened::-webkit-scrollbar{width:7px;}
.mobile-nav.wd-opened::-webkit-scrollbar-track{background:transparent;}
.mobile-nav.wd-opened::-webkit-scrollbar-thumb{background:#c4c7d0;border-radius:999px;}

/* ---- slide-out cart drawer (reused from desktop) : opens BELOW the sticky
   header (top = --mkm-hh, set by the JS when the drawer opens) ---- */
#mkm-header-m .mkm-cart-drawer{position:fixed;inset:0;top:var(--mkm-hh,0px);z-index:1200;
  visibility:hidden;opacity:0;transition:opacity .25s ease,visibility 0s linear .25s;}
#mkm-header-m .mkm-cart-drawer.open{visibility:visible;opacity:1;transition:opacity .25s ease;}
#mkm-header-m .mkm-cart-backdrop{position:absolute;inset:0;background:rgba(20,24,36,.42);}
#mkm-header-m .mkm-cart-panel{position:absolute;top:0;right:0;height:100%;width:400px;max-width:100vw;
  background:#fff;display:flex;flex-direction:column;box-shadow:-18px 0 50px -24px rgba(20,24,36,.5);
  transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);}
#mkm-header-m .mkm-cart-drawer.open .mkm-cart-panel{transform:translateX(0);}
#mkm-header-m .mkm-cart-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  padding:19px 22px;border-bottom:1px solid var(--line);}
#mkm-header-m .mkm-cart-title{font-weight:800;font-size:16px;color:var(--slate);}
#mkm-header-m .mkm-cart-close{background:#f3f4f7 !important;border:0 !important;box-shadow:none !important;
  cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:19px;line-height:1;color:var(--slate) !important;
  padding:0;min-width:0 !important;transition:.15s;}
#mkm-header-m .mkm-cart-close:hover{background:var(--coral) !important;color:#fff !important;}
#mkm-header-m .mkm-cart-body{flex:1 1 auto;overflow-y:auto;padding:6px 22px 22px;}
@media(max-width:480px){#mkm-header-m .mkm-cart-panel{width:100%;}}

#mkm-header-m .mkm-cart-body .woocommerce-mini-cart{list-style:none;margin:0;padding:0;}
#mkm-header-m .mkm-cart-body .woocommerce-mini-cart-item{position:relative;list-style:none;
  display:flex;gap:12px;align-items:flex-start;
  padding:15px 0 15px 26px;border-bottom:1px solid #f0f1f4;font-size:13px;line-height:1.45;}
#mkm-header-m .mkm-cart-body .woocommerce-mini-cart-item::before,
#mkm-header-m .mkm-cart-body .woocommerce-mini-cart-item::marker{content:none !important;}
#mkm-header-m .mkm-cart-body .cart-item-link{display:none !important;}
#mkm-header-m .mkm-cart-body .cart-item-image{flex:0 0 58px;width:58px !important;margin:0 !important;padding:0 !important;}
#mkm-header-m .mkm-cart-body .cart-item-image img{width:58px !important;height:58px !important;
  min-width:58px !important;max-width:58px !important;
  object-fit:contain;margin:0 !important;padding:0 !important;display:block;
  border:1px solid var(--line);border-radius:8px;}
#mkm-header-m .mkm-cart-body .cart-info{flex:1 1 auto;min-width:0;}
#mkm-header-m .mkm-cart-body .woocommerce-mini-cart-item a{color:var(--slate);text-decoration:none;font-weight:600;}
#mkm-header-m .mkm-cart-body .woocommerce-mini-cart-item a:hover{color:var(--coral);}
/* "qty × price" text line */
#mkm-header-m .mkm-cart-body span.quantity{color:var(--slate2);font-weight:500;}
/* quantity stepper — restyled from Woodmart's dark pill to the header charter */
#mkm-header-m .mkm-cart-body div.quantity{display:inline-flex;align-items:center;margin-top:8px;
  border:1.5px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;}
#mkm-header-m .mkm-cart-body div.quantity .minus,
#mkm-header-m .mkm-cart-body div.quantity .plus{-webkit-appearance:none;appearance:none;
  width:32px;height:32px;padding:0;margin:0;background:#e9ebef !important;border:0 !important;
  box-shadow:none !important;border-radius:0 !important;color:var(--slate2) !important;
  font-size:15px;font-weight:700;line-height:1;cursor:pointer;transition:.14s;}
#mkm-header-m .mkm-cart-body div.quantity .minus:hover,
#mkm-header-m .mkm-cart-body div.quantity .plus:hover{background:#dde0e6 !important;color:var(--coral) !important;}
#mkm-header-m .mkm-cart-body div.quantity .qty{width:40px;height:32px;padding:0;margin:0;
  border:0 !important;border-left:1.5px solid var(--line) !important;
  border-right:1.5px solid var(--line) !important;border-radius:0 !important;background:#fff;
  text-align:center;font-family:inherit;font-weight:700;font-size:13px;color:var(--slate);
  box-shadow:none !important;-moz-appearance:textfield;}
#mkm-header-m .mkm-cart-body div.quantity .qty::-webkit-outer-spin-button,
#mkm-header-m .mkm-cart-body div.quantity .qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
#mkm-header-m .mkm-cart-body a.remove{position:absolute;left:0;top:16px;width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;background:#f3f4f7 !important;
  color:#9398a6 !important;font-size:13px;font-weight:700;text-decoration:none;line-height:1;
  text-indent:0 !important;}
#mkm-header-m .mkm-cart-body a.remove::before,
#mkm-header-m .mkm-cart-body a.remove::after{content:none !important;display:none !important;}
#mkm-header-m .mkm-cart-body a.remove:hover{background:var(--coral) !important;color:#fff !important;}
#mkm-header-m .mkm-cart-body .woocommerce-mini-cart__total{display:flex;justify-content:space-between;
  align-items:baseline;margin:18px 0 14px;font-weight:800;font-size:15px;color:var(--slate);}
#mkm-header-m .mkm-cart-body .woocommerce-mini-cart__total .woocommerce-Price-amount{font-size:17px;}
#mkm-header-m .mkm-cart-body .woocommerce-mini-cart__buttons{display:flex;flex-direction:column;gap:9px;margin:0;padding:0;}
#mkm-header-m .mkm-cart-body .woocommerce-mini-cart__buttons a{display:block;text-align:center;
  font-family:inherit;font-weight:700;font-size:14px;padding:13px;border-radius:9px;text-decoration:none;
  text-transform:none !important;min-width:0 !important;letter-spacing:normal;}
#mkm-header-m .mkm-cart-body .woocommerce-mini-cart__buttons a.button:not(.checkout){background:#f3f4f7 !important;color:var(--slate) !important;}
#mkm-header-m .mkm-cart-body .woocommerce-mini-cart__buttons a.button:not(.checkout):hover{background:#e9eaef !important;}
#mkm-header-m .mkm-cart-body .woocommerce-mini-cart__buttons a.checkout{background:var(--slate) !important;color:#fff !important;}
#mkm-header-m .mkm-cart-body .woocommerce-mini-cart__buttons a.checkout:hover{background:#1f2330 !important;}
#mkm-header-m .mkm-cart-body .woocommerce-mini-cart__empty-message{padding:34px 0;text-align:center;
  color:var(--slate2);font-size:14px;}

/* ---- Hide Searchanise's mobile fullscreen instant-search overlay. We use
   our own search box in the header (.b-search) — the JS clone-replace in
   mkm_header_mobile.js detaches Searchanise's listener, this is a CSS
   safety-net for any late re-binding or popup that slips through. Scoped
   to the mobile variant (.snize-ac-results-mobile / .snize-mobile-top-panel)
   so the desktop Searchanise dropdown is unaffected. ---- */
#snize-instant-search-results.snize-ac-results-mobile{display:none !important;}
.snize-mobile-top-panel{display:none !important;}