/* ==========================================================================
   Cloudmaple — Mobile Drawer
   Colours and the breakpoint media queries are generated in PHP
   (CM_Drawer_Render::inline_css) — do not hard-code them here.
   ========================================================================== */

#cm-drawer{
  --cm-accent:#f1861c;
  --cm-accent-ink:#d96c05;
  --cm-ink:#0F172A;
  --cm-ink-2:#454F5E;
  --cm-ink-3:#8A93A3;
  --cm-line:#E4E7EC;
  --cm-line-soft:#F1F3F5;
  --cm-soft:#F7F9FB;
  --cm-warm:#FEF9E1;
}

/* ---------- shell ---------- */

#cm-drawer-backdrop{
  position:fixed; inset:0; z-index:99998;
  background:rgba(15,23,42,.55);
  opacity:0; transition:opacity .26s ease;
  -webkit-tap-highlight-color:transparent;
}
#cm-drawer-backdrop.is-open{ opacity:1; }

#cm-drawer{
  position:fixed; top:0; bottom:0; z-index:99999;
  width:min(89vw,430px);
  display:flex; flex-direction:column;
  background:#fff;
  color:var(--cm-ink);
  font-size:16px; line-height:1.35;
  box-shadow:-16px 0 44px -18px rgba(15,23,42,.55);
  transform:translateX(100%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  overscroll-behavior:contain;
}
#cm-drawer.is-open{ transform:translateX(0); }

#cm-drawer[hidden],
#cm-drawer-backdrop[hidden]{ display:none; }

html.cm-drawer-open{ overflow:hidden; }

#cm-drawer *{ box-sizing:border-box; }

/* ---------- top bar ---------- */

#cm-drawer .cm-topbar{
  flex:0 0 auto;
  background:var(--cm-ink); color:#E8EBF0;
  font-size:11.5px; font-weight:500; letter-spacing:.02em;
  text-align:center; padding:8px 12px;
  padding-top:calc(8px + env(safe-area-inset-top));
}

/* ---------- header ---------- */

#cm-drawer .cm-head{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 10px 10px 16px;
  border-bottom:1px solid var(--cm-line-soft);
}
#cm-drawer .cm-mark{ display:flex; align-items:center; text-decoration:none; min-width:0; }
#cm-drawer .cm-mark img{ height:34px; width:auto; max-width:170px; display:block; }
#cm-drawer .cm-mark-text{
  background:var(--cm-accent); color:#fff; font-weight:700; font-size:13px;
  padding:9px 14px; border-radius:999px; line-height:1;
}
#cm-drawer .cm-head-actions{ display:flex; align-items:center; gap:2px; }

#cm-drawer .cm-iconbtn{
  position:relative;
  width:42px; height:42px;
  display:grid; place-items:center;
  border:0; background:transparent; border-radius:12px;
  color:var(--cm-ink); cursor:pointer; text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
#cm-drawer .cm-iconbtn:active{ background:var(--cm-line-soft); }
#cm-drawer .cm-iconbtn:focus-visible{ outline:2px solid var(--cm-accent); outline-offset:-2px; }

#cm-drawer .cm-cart-badge{
  position:absolute; top:5px; right:5px;
  min-width:17px; height:17px; padding:0 4px;
  display:grid; place-items:center;
  background:var(--cm-accent); color:#fff;
  font-size:10.5px; font-weight:700; line-height:1;
  border-radius:999px;
}
#cm-drawer .cm-cart-badge[data-empty]{ display:none; }

/* ---------- scroll area ---------- */

#cm-drawer .cm-scroll{
  flex:1 1 auto;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}

#cm-drawer .cm-secttl{
  margin:20px 16px 8px;
  font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--cm-ink-3);
}

/* ---------- search ---------- */

#cm-drawer .cm-searchwrap{ padding:12px 16px 4px; }

#cm-drawer .cm-search{
  display:flex; align-items:center; gap:8px;
  border:1px solid var(--cm-line); border-radius:12px;
  background:var(--cm-soft); padding:0 8px 0 12px;
}
#cm-drawer .cm-search svg{ flex:0 0 auto; color:var(--cm-ink-3); }
#cm-drawer .cm-search input[type=search]{
  flex:1 1 auto; min-width:0;
  border:0; background:transparent; outline:0;
  font-size:15px; color:var(--cm-ink);
  padding:12px 0;
}
#cm-drawer .cm-search button{
  flex:0 0 auto; width:32px; height:32px;
  display:grid; place-items:center;
  border:0; border-radius:9px; cursor:pointer;
  background:var(--cm-accent); color:#fff;
}

/* FiboSearch inside the drawer */
#cm-drawer .dgwt-wcas-search-wrapp{ max-width:100%; width:100%; }
#cm-drawer .dgwt-wcas-search-input{ font-size:15px !important; height:46px !important; border-radius:12px !important; }
#cm-drawer .dgwt-wcas-search-submit{ border-radius:0 12px 12px 0 !important; }
#cm-drawer .dgwt-wcas-suggestions-wrapp{ z-index:100000 !important; }

/* ---------- action block ---------- */

#cm-drawer .cm-action{
  margin:14px 16px 4px;
  padding:14px;
  border:1px solid var(--cm-line);
  border-radius:14px;
  background:linear-gradient(180deg,var(--cm-warm),#fff 78%);
}
#cm-drawer .cm-action[data-state="b2b"]{ background:linear-gradient(180deg,#F2FBF5,#fff 78%); }
#cm-drawer .cm-action-top{ display:flex; gap:11px; align-items:flex-start; }
#cm-drawer .cm-action-ic{
  flex:0 0 auto; width:34px; height:34px;
  display:grid; place-items:center;
  border-radius:10px; background:var(--cm-accent); color:#fff;
}
#cm-drawer .cm-action[data-state="b2b"] .cm-action-ic{ background:#0F9D58; }
#cm-drawer .cm-action h3{
  margin:0; font-size:14.5px; font-weight:700; color:var(--cm-ink); line-height:1.25;
}
#cm-drawer .cm-action p{
  margin:3px 0 0; font-size:12.5px; line-height:1.45; color:var(--cm-ink-2);
}

#cm-drawer .cm-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
#cm-drawer .cm-chip{
  display:inline-flex; align-items:center;
  padding:8px 12px; border-radius:999px;
  border:1px solid var(--cm-line);
  background:#fff; color:var(--cm-ink);
  font-size:12.5px; font-weight:600; text-decoration:none;
  white-space:nowrap;
}
#cm-drawer .cm-chip.is-primary{ background:var(--cm-accent); border-color:var(--cm-accent); color:#fff; }
#cm-drawer .cm-chip.is-ghost{ background:transparent; color:var(--cm-ink-2); }
#cm-drawer .cm-chip:active{ transform:translateY(1px); }

/* ---------- brands ---------- */

#cm-drawer .cm-brands{ padding:0 16px; }
#cm-drawer .cm-chips-brand{ margin-top:0; }

/* ---------- lists ---------- */

#cm-drawer .cm-list{ padding:2px 8px 0; }

#cm-drawer .cm-row{
  width:100%;
  display:flex; align-items:center; gap:12px;
  padding:13px 8px;
  border:0; background:transparent;
  border-bottom:1px solid var(--cm-line-soft);
  color:var(--cm-ink); font-size:15px; font-weight:600;
  text-align:left; text-decoration:none; cursor:pointer;
  font-family:inherit; line-height:1.25;
  -webkit-tap-highlight-color:transparent;
}
#cm-drawer .cm-row:last-child{ border-bottom:0; }
#cm-drawer .cm-row:active{ background:var(--cm-line-soft); }
#cm-drawer .cm-row:focus-visible{ outline:2px solid var(--cm-accent); outline-offset:-2px; }
#cm-drawer .cm-row.is-active{ color:var(--cm-accent-ink); }

#cm-drawer .cm-ic{
  flex:0 0 auto; width:36px; height:36px;
  display:grid; place-items:center;
  border-radius:10px; background:var(--cm-soft); color:var(--cm-ink-2);
}
#cm-drawer .cm-row.is-active .cm-ic{ background:#FFF3E4; color:var(--cm-accent-ink); }

#cm-drawer .cm-lbl{ flex:1 1 auto; min-width:0; }

#cm-drawer .cm-cnt{
  flex:0 0 auto;
  font-size:11.5px; font-weight:600; color:var(--cm-ink-3);
  background:var(--cm-soft); border-radius:999px; padding:3px 8px;
}
#cm-drawer .cm-chev{
  flex:0 0 auto; display:grid; place-items:center; color:var(--cm-ink-3);
  transition:transform .22s ease;
}
#cm-drawer .cm-toggle[aria-expanded="true"] .cm-chev{ transform:rotate(180deg); }

/* ---------- submenu ---------- */

#cm-drawer .cm-sub{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .26s cubic-bezier(.32,.72,0,1);
}
#cm-drawer .cm-sub[data-open="true"]{ grid-template-rows:1fr; }
#cm-drawer .cm-sub > div{ overflow:hidden; }

#cm-drawer .cm-subinner{
  margin:0 0 8px 48px;
  padding-left:12px;
  border-left:2px solid var(--cm-line);
}
#cm-drawer .cm-subinner a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 4px;
  font-size:14px; font-weight:500; color:var(--cm-ink-2); text-decoration:none;
}
#cm-drawer .cm-subinner a.is-active{ color:var(--cm-accent-ink); font-weight:600; }
#cm-drawer .cm-subinner a .cm-n{ font-size:11.5px; color:var(--cm-ink-3); }
#cm-drawer .cm-subinner a.cm-all{ color:var(--cm-accent-ink); font-weight:600; font-size:13px; }

/* ---------- secondary links ---------- */

#cm-drawer .cm-sec{
  margin:18px 16px 0; padding-top:14px;
  border-top:1px solid var(--cm-line);
  display:flex; flex-direction:column;
}
#cm-drawer .cm-sec a{
  display:flex; align-items:center; gap:11px;
  padding:11px 0;
  font-size:14px; color:var(--cm-ink-2); text-decoration:none;
}
#cm-drawer .cm-sec a svg{ flex:0 0 auto; color:var(--cm-ink-3); }
#cm-drawer .cm-sec a.is-active,
#cm-drawer .cm-sec a:hover,
#cm-drawer .cm-sec a:focus{ color:var(--cm-accent-ink); }
#cm-drawer .cm-sec a:hover svg{ color:var(--cm-accent-ink); }

/* ---------- sales rep ---------- */

#cm-drawer .cm-rep{
  margin:18px 16px 0; padding:13px;
  display:flex; gap:11px; align-items:flex-start;
  border:1px solid var(--cm-line); border-radius:14px; background:var(--cm-soft);
}
#cm-drawer .cm-rep-ic{
  flex:0 0 auto; width:34px; height:34px;
  display:grid; place-items:center; border-radius:10px;
  background:#fff; border:1px solid var(--cm-line); color:var(--cm-ink-2);
}
#cm-drawer .cm-rep-body{ display:flex; flex-direction:column; gap:2px; min-width:0; }
#cm-drawer .cm-rep-ttl{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--cm-ink-3); font-weight:700; }
#cm-drawer .cm-rep-body strong{ font-size:14.5px; color:var(--cm-ink); }
#cm-drawer .cm-rep-body a{ font-size:13px; color:var(--cm-accent-ink); text-decoration:none; }

/* ---------- footer ---------- */

#cm-drawer .cm-foot{
  margin-top:20px;
  padding:18px 16px calc(22px + env(safe-area-inset-bottom));
  background:var(--cm-soft); border-top:1px solid var(--cm-line);
}
#cm-drawer .cm-foot-grid{ display:flex; gap:10px; }
#cm-drawer .cm-foot-grid a{
  flex:1 1 0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 8px; border-radius:11px;
  font-size:13.5px; font-weight:700; text-decoration:none;
}
#cm-drawer .cm-call{ background:var(--cm-accent); color:#fff; }
#cm-drawer .cm-mail{ background:#fff; border:1px solid var(--cm-line); color:var(--cm-ink); }

#cm-drawer .cm-hours{
  margin:12px 0 0;
  font-size:11.5px; line-height:1.6; color:var(--cm-ink-3); text-align:center;
}
#cm-drawer .cm-social{ display:flex; justify-content:center; gap:16px; margin-top:14px; }
#cm-drawer .cm-social a{ color:var(--cm-ink-3); line-height:0; }
#cm-drawer .cm-social a:hover{ color:var(--cm-accent-ink); }

/* ---------- motion ---------- */

@media (prefers-reduced-motion:reduce){
  #cm-drawer,
  #cm-drawer-backdrop,
  #cm-drawer .cm-sub,
  #cm-drawer .cm-chev{ transition:none !important; }
}