/* Selected mobile menu, option 3. Icons: Tabler v3.34.1 (MIT). */
.wzd-menu-icon{display:inline-block;width:24px;height:24px;flex:0 0 24px;background:currentColor;-webkit-mask:var(--menu-icon) center/contain no-repeat;mask:var(--menu-icon) center/contain no-repeat}
.wzd-menu-icon--wall{--menu-icon:url("menu-icons/wall.svg")}
.wzd-menu-icon--flame{--menu-icon:url("menu-icons/flame.svg")}
.wzd-menu-icon--building-cottage{--menu-icon:url("menu-icons/building-cottage.svg")}
.wzd-menu-icon--hexagons{--menu-icon:url("menu-icons/hexagons.svg")}
.wzd-menu-icon--arrows-left-right{--menu-icon:url("menu-icons/arrows-left-right.svg")}
.wzd-menu-icon--calculator{--menu-icon:url("menu-icons/calculator.svg")}
.wzd-menu-icon--search{--menu-icon:url("menu-icons/search.svg")}
.wzd-menu-icon--file-invoice{--menu-icon:url("menu-icons/file-invoice.svg")}
.wzd-menu-icon--arrow-right{--menu-icon:url("menu-icons/arrow-right.svg")}
.wzd-menu-icon--chevron-down{--menu-icon:url("menu-icons/chevron-down.svg")}
.wzd-menu-icon--chevron-right{--menu-icon:url("menu-icons/chevron-right.svg")}
.wzd-menu-icon--x{--menu-icon:url("menu-icons/x.svg")}
.wzd-drawer:has(.wzd-menu-v3){background:#fff!important}
.wzd-drawer:has(.wzd-menu-v3) .wzd-drawer-head{min-height:68px!important;padding:14px 16px!important;border-bottom:0!important}
.wzd-drawer:has(.wzd-menu-v3) .wzd-drawer-head .wzd-brand .wzd-wmark{width:56px!important;height:46px!important}
.wzd-drawer:has(.wzd-menu-v3) .wzd-drawer-head .wzd-brand-watzadu{font-size:22px!important;letter-spacing:.01em!important}
.wzd-drawer:has(.wzd-menu-v3) .wzd-drawer-head .wzd-brand-tagline{display:block!important;font-size:12px!important;color:#74747c!important}
.wzd-drawer:has(.wzd-menu-v3) .wzd-drawer-close{background:transparent!important;border-radius:8px!important;color:#777781!important}
.wzd-drawer:has(.wzd-menu-v3) .wzd-drawer-close i{display:block!important;width:26px;height:26px;background:currentColor;-webkit-mask:url("menu-icons/x.svg") center/contain no-repeat;mask:url("menu-icons/x.svg") center/contain no-repeat;font-size:0!important}
.wzd-drawer:has(.wzd-menu-v3) .wzd-drawer-nav{padding:0 16px 16px!important}
.wzd-drawer:has(.wzd-menu-v3):not([data-menu-section="other"]) .wzd-drawer-lang{display:none!important}
.wzd-menu-v3{--menu-red:#a32622;--menu-border:#d9d9e1;--menu-blush:#fcf3f2;color:#202023;font-size:16px;line-height:1.4}
.wzd-menu-v3 [hidden]{display:none!important}
.wzd-menu-v3 a{text-decoration:none!important;color:inherit}
.wzd-menu-v3 button{font:inherit;cursor:pointer}
.wzd-menu-tabs{display:flex;border-bottom:1px solid var(--menu-border);margin-bottom:10px}
.wzd-menu-tabs>a,.wzd-menu-tabs>button{display:flex;align-items:center;justify-content:center;flex:1;min-height:48px;padding:0 4px;color:#74747c;border:0;border-bottom:3px solid transparent;background:transparent;font-size:17px;font-weight:500}
.wzd-menu-tabs>button[aria-pressed="true"]{color:var(--menu-red);border-bottom-color:var(--menu-red);font-weight:700}
.wzd-menu-search{display:flex;align-items:center;min-height:42px;border:1px solid var(--menu-border);border-radius:9px;background:#fdfdfd;margin-bottom:13px}
.wzd-menu-search button{display:flex;align-items:center;justify-content:center;flex:0 0 44px;min-height:44px;padding:0;border:0;background:transparent;color:#777781}
.wzd-menu-search input{flex:1;min-width:0;width:100%;height:44px;padding:0 10px 0 0;border:0!important;border-radius:9px;outline:0;background:transparent!important;color:#202023;font-size:16px;box-shadow:none!important}
.wzd-menu-search input::placeholder{color:#777781;opacity:1}
.wzd-menu-tools{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:19px}
.wzd-menu-tools>a{display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:8px 6px;border:1px solid var(--menu-red);border-radius:9px;background:var(--menu-blush);font-weight:600}
.wzd-menu-tools .wzd-menu-icon{color:var(--menu-red);width:29px;height:29px;flex-basis:29px}
.wzd-menu-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.wzd-menu-heading h2{margin:0!important;font-size:22px!important;font-weight:700!important;line-height:1.45!important}
.wzd-menu-heading>a{display:flex;align-items:center;color:var(--menu-red);font-size:12px;white-space:nowrap}
.wzd-menu-heading>a .wzd-menu-icon{width:15px;height:15px;flex-basis:15px}
.wzd-menu-v3 .wzd-drawer-items{display:grid;gap:10px}
.wzd-menu-v3 .wzd-drawer-group{border:1px solid var(--menu-border)!important;border-radius:9px;overflow:hidden;background:#fff}
.wzd-menu-v3 .wzd-drawer-group:has(details[open]){border-color:#dcb8b5!important}
.wzd-menu-v3 .wzd-drawer-group summary{min-height:64px!important;padding:8px 12px!important;gap:14px;font-size:18px!important;font-weight:600!important}
.wzd-menu-category-name{flex:1;min-width:0}
.wzd-menu-category-icon{display:flex;align-items:center;justify-content:center;width:54px;height:48px;flex:0 0 54px;border-radius:8px;background:var(--menu-blush);color:var(--menu-red)}
.wzd-menu-category-icon .wzd-menu-icon{width:34px;height:34px;flex-basis:34px}
.wzd-menu-v3 .wzd-drawer-group details[open]>summary{background:var(--menu-blush)!important;color:var(--menu-red)!important}
.wzd-menu-v3 .wzd-drawer-chevron{width:22px!important;height:22px!important;flex:0 0 22px!important}
.wzd-menu-v3 .wzd-drawer-links{padding:0 16px 3px!important;animation:none}
.wzd-menu-v3 .wzd-drawer-links>li+li{border-top:1px solid #e0e0e6}
.wzd-menu-v3 .wzd-drawer-links a,.wzd-menu-v3 .wzd-menu-extra>button{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px;min-height:44px!important;width:100%;padding:9px 3px!important;border:0!important;border-radius:0!important;background:transparent;color:#202023!important;font-size:16px!important;line-height:1.5!important;text-align:left}
.wzd-menu-v3 .wzd-drawer-links a>.wzd-menu-icon{width:19px;height:19px;flex-basis:19px;color:#777781}
.wzd-menu-v3 .wzd-menu-extra>button{color:var(--menu-red)!important}
.wzd-menu-extra>button .wzd-menu-icon{width:19px;height:19px;flex-basis:19px;transition:transform .2s}
.wzd-menu-extra>button[aria-expanded="true"] .wzd-menu-icon{transform:rotate(180deg)}
.wzd-menu-extra ul{list-style:none;padding:0 0 0 10px!important;margin:0!important;border-left:2px solid #efd9d7}
.wzd-menu-extra li{border-top:1px solid #e0e0e6}
.wzd-menu-v3 .wzd-menu-secondary summary{min-height:56px!important;font-size:17px!important}
.wzd-menu-secondary .wzd-menu-category-icon{height:40px}
.wzd-menu-secondary .wzd-menu-category-icon .wzd-menu-icon{width:29px;height:29px;flex-basis:29px}
.wzd-menu-footer-links{display:flex;justify-content:space-around;align-items:center;border-top:1px solid var(--menu-border);margin-top:12px;padding:14px 0 10px}
.wzd-menu-footer-links a{display:flex;align-items:center;justify-content:center;flex:1;min-height:32px;font-size:15px}
.wzd-menu-footer-links a+a{border-left:1px solid var(--menu-border)}
.wzd-menu-v3 .wzd-menu-quote{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:10px 14px;border-radius:8px;background:#ac2923;color:#fff;font-size:18px;font-weight:600}
.wzd-menu-quote>span:nth-child(2){flex:1;text-align:center}
.wzd-menu-quote .wzd-menu-icon:last-child{width:20px;height:20px;flex-basis:20px}
.wzd-menu-other-links{list-style:none;margin:0;padding:0;border:1px solid var(--menu-border);border-radius:9px;overflow:hidden}
.wzd-menu-other-links li+li{border-top:1px solid var(--menu-border)}
.wzd-menu-other-links a{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:12px 16px}
.wzd-menu-v3 a:focus-visible,.wzd-menu-v3 button:focus-visible,.wzd-menu-search:focus-within{outline:2px solid var(--menu-red);outline-offset:2px}
.wzd-menu-v3 a:hover,.wzd-menu-v3 button:hover{color:var(--menu-red)}
.wzd-menu-v3 .wzd-menu-quote:hover{background:#8e2521;color:#fff}
@media(max-width:359px){.wzd-menu-tools>a{gap:6px;font-size:14px}.wzd-menu-tools .wzd-menu-icon{width:25px;height:25px;flex-basis:25px}.wzd-menu-v3 .wzd-drawer-group summary{gap:10px;font-size:17px!important}.wzd-menu-heading h2{font-size:20px!important}}
@media(prefers-reduced-motion:reduce){.wzd-menu-extra>button .wzd-menu-icon{transition:none}}
/* Final density and brand alignment after comparing with the selected mock. */
.wzd-drawer:has(.wzd-menu-v3) .wzd-drawer-head{min-height:66px!important;padding:10px 16px!important}
.wzd-drawer:has(.wzd-menu-v3) .wzd-drawer-head .wzd-brand .wzd-wmark{width:64px!important;height:46px!important}
.wzd-drawer:has(.wzd-menu-v3) .wzd-drawer-head .wzd-brand-primary{font-size:22px!important;line-height:1.05!important;letter-spacing:.01em!important}
.wzd-drawer:has(.wzd-menu-v3) .wzd-drawer-head .wzd-brand-primary::after{content:"วัสดุ ดอทคอม";display:block;margin-top:3px;color:#777781;font-size:12px;font-weight:500;line-height:1.2;letter-spacing:0}
.wzd-menu-tabs{margin-bottom:5px}
.wzd-menu-tabs>a,.wzd-menu-tabs>button{min-height:40px;font-size:17px!important}
.wzd-menu-search{min-height:40px;margin-bottom:10px}
.wzd-menu-search input{height:40px;font-size:16px!important}
.wzd-menu-search button{min-height:40px}
.wzd-menu-footer-links{padding:10px 0 6px}
.wzd-menu-v3 .wzd-menu-quote{font-size:18px!important;line-height:1.4!important}
.wzd-menu-icon--building-cottage{--menu-icon:url("menu-icons/layout-grid.svg")}
.wzd-drawer:has(.wzd-menu-v3){border-radius:0!important}
.wzd-drawer:has(.wzd-menu-v3) .wzd-drawer-head .wzd-brand{gap:0!important}
.wzd-drawer:has(.wzd-menu-v3) .wzd-drawer-head .wzd-brand .wzd-wmark{width:68px!important;height:68px!important;margin:-11px 0!important}
.wzd-menu-tabs>button[aria-pressed="true"]{position:relative;border-bottom-color:transparent}
.wzd-menu-tabs>button[aria-pressed="true"]::after{content:"";position:absolute;bottom:-1px;left:50%;width:66px;height:3px;transform:translateX(-50%);background:var(--menu-red)}
.wzd-menu-tools{margin-bottom:14px}
.wzd-menu-tools .wzd-menu-icon{width:34px;height:34px;flex-basis:34px}
.wzd-menu-footer-links{padding:0 0 6px}
.wzd-menu-v3 .wzd-menu-category-name{font-weight:700}
.wzd-menu-v3 .wzd-menu-quote{position:relative;padding:8px 44px;background:#b32620!important}
.wzd-menu-quote>span:nth-child(2){flex:0 1 auto;font-size:18px!important;font-weight:600}
.wzd-menu-quote>.wzd-menu-icon:first-child{width:28px;height:28px;flex-basis:28px}
.wzd-menu-quote>.wzd-menu-icon:last-child{position:absolute;right:14px}
.wzd-menu-tools>a{padding:6px}
.wzd-menu-tools{margin-bottom:10px}

/* Localhost mobile-menu revision, 12 October 2026: compact icons, generous taps. */
@media (max-width:1024px) {
  .wzd-menu-v3 { --menu-red:#8e2521; --menu-border:#e4dfdb; --menu-blush:#faf3f1; }
  .wzd-menu-v3 .wzd-navigation-icon {
    display:block; width:22px; height:22px; flex:0 0 22px; color:var(--menu-red);
  }
  .wzd-menu-tabs { gap:4px; margin-bottom:12px; }
  .wzd-menu-tabs > :is(a,button) {
    gap:7px; min-width:0; min-height:48px; padding:8px 4px;
    border-radius:9px 9px 0 0; font-size:15px!important; line-height:1.5;
  }
  .wzd-menu-tabs .wzd-navigation-icon {
    width:20px; height:20px; flex-basis:20px; color:inherit;
  }
  .wzd-menu-tabs > button[aria-pressed="true"] { background:var(--menu-blush); }
  .wzd-menu-tabs > button[aria-pressed="true"]::after { width:48px; height:2px; }
  .wzd-menu-search { margin-bottom:12px; }
  .wzd-menu-search input { height:48px; }
  .wzd-menu-search button { min-height:48px; }
  .wzd-menu-tools { gap:12px; margin-bottom:16px; }
  .wzd-menu-tools > a { gap:8px; min-height:48px; padding:8px; font-size:15px; }
  .wzd-menu-tools .wzd-menu-icon { width:24px; height:24px; flex-basis:24px; }
  .wzd-menu-heading {
    align-items:center; flex-wrap:wrap; gap:12px 16px; margin:0 0 12px;
  }
  .wzd-menu-heading h2 { font-size:20px!important; }
  .wzd-menu-heading > a {
    justify-content:center; gap:4px; min-width:96px; min-height:48px;
    margin-left:auto; padding:8px 10px; border:1px solid var(--menu-border);
    border-radius:10px; background:#fff; font-size:14px;
  }
  .wzd-menu-v3 .wzd-drawer-items { gap:12px; }
  .wzd-menu-v3 .wzd-drawer-group { border-radius:12px; }
  .wzd-menu-v3 .wzd-drawer-group summary {
    min-height:56px!important; gap:12px; padding:10px 12px!important;
    font-size:17px!important;
  }
  .wzd-menu-category-icon, .wzd-menu-secondary .wzd-menu-category-icon {
    width:36px; height:36px; flex-basis:36px; border-radius:9px;
  }
  .wzd-menu-category-icon .wzd-menu-icon,
  .wzd-menu-category-icon .wzd-navigation-icon,
  .wzd-menu-secondary .wzd-menu-category-icon .wzd-menu-icon {
    width:24px; height:24px; flex-basis:24px;
  }
  .wzd-menu-v3 .wzd-drawer-links a,
  .wzd-menu-v3 .wzd-menu-extra > button { min-height:48px!important; padding:10px 3px!important; }
  .wzd-menu-subcategory > button > span:first-child { font-weight:600; }
  .wzd-menu-subcategory > ul {
    margin:0 0 10px!important; padding:0 0 0 12px!important;
    border-left:2px solid #e7ceca;
  }
  .wzd-menu-subcategory > ul > li:first-child { border-top:0; }
  .wzd-menu-subcategory > button[aria-expanded="true"] { color:var(--menu-red)!important; }
  .wzd-menu-footer-links {
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;
    margin-top:16px; padding:16px 0 0;
  }
  .wzd-menu-footer-links a {
    flex-direction:column; gap:6px; min-width:0; min-height:64px; padding:10px 4px;
    border:1px solid var(--menu-border); border-radius:10px;
    background:#fff; color:var(--menu-red); font-size:14px; line-height:1.5;
  }
  .wzd-menu-footer-links a + a { border-left:1px solid var(--menu-border); }
  .wzd-menu-v3 .wzd-menu-quote {
    min-height:52px; margin-top:16px; padding:12px 44px;
    border-radius:12px; background:var(--menu-red)!important;
  }
  .wzd-menu-quote > .wzd-menu-icon:first-child { width:24px; height:24px; flex-basis:24px; }
  .wzd-menu-other-links { border-radius:12px; }
  .wzd-menu-other-links a { gap:12px; min-height:60px; padding:14px 16px; font-size:16px; }
  .wzd-menu-other-links a > span:not(.wzd-menu-icon) { flex:1; min-width:0; }
  .wzd-menu-other-links a > .wzd-menu-icon { width:18px; height:18px; flex-basis:18px; color:#777781; }
  .wzd-menu-v3 :is(a,button,summary) { touch-action:manipulation; }
  .wzd-menu-v3 a:is(:link,:visited,:hover,:focus,:active) { text-decoration:none!important; box-shadow:none; }
  .wzd-menu-v3 :is(a,button,summary):focus-visible { outline:2px solid var(--menu-red); outline-offset:2px; }
  .wzd-drawer:has(.wzd-menu-v3) .wzd-drawer-close { width:48px; height:48px; }
  .wzd-menu-v3 :is(.wzd-menu-footer-links a,.wzd-menu-other-links a,.wzd-menu-heading > a):hover { background:var(--menu-blush); }
}
@media (max-width:359px) {
  .wzd-menu-tabs > :is(a,button) { gap:5px; font-size:14px!important; }
  .wzd-menu-heading h2 { font-size:18px!important; }
  .wzd-menu-tools > a { font-size:14px; }
  .wzd-menu-footer-links a { font-size:13px; }
}
/* Keep the drawer header reachable when WordPress's admin toolbar is visible. */
@media (min-width:783px) and (max-width:1024px) {
  .admin-bar .wzd-drawer:has(.wzd-menu-v3) { top:32px!important; height:calc(100dvh - 32px)!important; }
}
@media (max-width:782px) {
  .admin-bar .wzd-drawer:has(.wzd-menu-v3) { top:46px!important; height:calc(100dvh - 46px)!important; }
}