/* WordPress-native integration and the visual/interaction corrections visible in the supplied reference video. */
.lang-dropdown{position:relative;display:inline-block;z-index:1001}.lang-current{background:transparent;border:0;color:inherit;padding:8px 10px;cursor:pointer;font:inherit}.lang-options{display:none;position:absolute;right:0;top:100%;min-width:180px;background:#fff;border:1px solid #e7e7e7;box-shadow:0 8px 25px rgba(0,0,0,.12);padding:6px 0}.lang-dropdown.is-open .lang-options,.lang-dropdown:hover .lang-options{display:block}.lang-options a{display:flex;gap:10px;padding:8px 14px;color:#333!important;white-space:nowrap;text-decoration:none}.lang-options a:hover,.lang-options a.current{background:#f5f7f9;color:#F5B800!important}.lang-mobile{margin:10px 0}.lang-mobile .lang-options{position:relative;top:auto;left:auto;right:auto;width:100%;box-shadow:none}.main-menu>li.menu-children>a:after{content:'⌄';margin-left:7px;font-size:12px}.main-menu li{position:relative}.main-menu .sub-menu{min-width:210px}.main-menu .sub-menu .sub-menu{left:100%;top:0}.main-menu li.menu-children:hover>.sub-menu{display:block}.tree-toggle{cursor:pointer}.tree-toggle:after{content:'+'}.mtree li.active>.tree-toggle:after{content:'−'}.mtree li.active>ul,.mtree li:hover>ul{display:block}.pro_page .prom_img img{max-width:100%;height:auto}.pro_page #pro_img_gallery{overflow:hidden}.pro_page #pro_img_thumbs img{height:76px;object-fit:cover}.pro_table li{word-break:break-word}.pro_table li p{display:inline-block;margin-right:5px}.mobile-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:9999;background:#fff;box-shadow:0 -3px 15px rgba(0,0,0,.12);display:flex}.mobile-bottom-nav a{flex:1;text-align:center;padding:10px 4px;font-size:12px;color:#333}.boang-inquiry-form input,.boang-inquiry-form textarea{width:100%;margin-bottom:10px}.boang-inquiry-form textarea{min-height:120px}.boang-inquiry-form .form-result{margin-top:8px}.cbp-vm-options a{cursor:pointer}.cbp-vm-view-list>ul>li .li{display:flex;gap:20px}.cbp-vm-view-list>ul>li .cbp-vm-image{width:240px;flex:0 0 240px}.cbp-vm-view-grid>ul>li .cbp-vm-image img,.products .cbp-vm-image img{width:100%;aspect-ratio:1/1;object-fit:cover}.newm img{max-width:100%;height:auto}.newm table{max-width:100%}.newm iframe{max-width:100%}@media(max-width:991px){.hidden_mob{display:none!important}.hidden_web{display:block}.main-menu{display:none}.mobile-bottom-nav.hidden_web{display:flex}.pro_page .main_text{padding-top:20px}.n_left{margin-bottom:25px}.cbp-vm-view-list>ul>li .li{display:block}.cbp-vm-view-list>ul>li .cbp-vm-image{width:100%}.fixed-contact{display:none}.lang-mobile{display:block}.main-navigation-inner{padding-bottom:20px}.nav_con{display:flex;flex-direction:column;gap:8px}.products .n_title{font-size:24px}}
.album-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.album-grid a{display:block}.album-grid img{display:block;width:100%;height:auto}@media(max-width:767px){.album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ==========================================================
   BOANG 3.0 final interaction layer
   Accent is intentionally yellow for every interactive state.
   ========================================================== */
:root{--boang-accent:#F5B800;--boang-accent-dark:#D9A000;--boang-black:#1e2228;--boang-white:#fff;--boang-border:#e7e7e7;--boang-shadow:0 10px 35px rgba(0,0,0,.12)}
html{scroll-behavior:smooth}

a,button,input,textarea,select{outline-color:var(--boang-accent)}
a:hover,a:focus,.main-menu>li>a:hover,.main-menu>li.current>a,.main-menu>li.active>a,.main-menu .sub-menu li>a:hover{color:var(--boang-accent)!important}
button:hover,button:focus,input:focus,textarea:focus,select:focus{border-color:var(--boang-accent)!important;box-shadow:0 0 0 2px rgba(245,184,0,.16)}
.boang-yellow-button,.boang-quote,.my_more1,.inquiry_pro,.ms_btn,.search_btn,.email_btn{background:var(--boang-accent)!important;border-color:var(--boang-accent)!important;color:#171717!important}
.boang-yellow-button:hover,.boang-quote:hover,.my_more1:hover,.inquiry_pro:hover,.ms_btn:hover{background:var(--boang-accent-dark)!important;border-color:var(--boang-accent-dark)!important;color:#111!important}
.cbp-vm-options a,.cbp-vm-options a:hover,.cbp-vm-options a:focus{color:#555!important;text-decoration:none}
.cbp-vm-options a.cbp-vm-selected{background:var(--boang-accent)!important;color:#171717!important;border-color:var(--boang-accent)!important}
.boang-tabs{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:25px auto}
.boang-tab{border:1px solid var(--boang-border);background:#fff;padding:10px 18px;cursor:pointer;transition:.2s;font:inherit}
.boang-tab img{width:40px;height:40px;object-fit:contain;vertical-align:middle;margin-right:7px}.boang-tab.is-active{background:var(--boang-accent);border-color:var(--boang-accent);color:#111}.boang-tab:hover{border-color:var(--boang-accent)}
.boang-tab-panel{display:none}.boang-tab-panel.is-active{display:block}
.boang-fixed-contact{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:10020;display:flex;align-items:center}.boang-float-toggle{width:42px;height:42px;border:0;background:var(--boang-accent);color:#111;cursor:pointer;box-shadow:var(--boang-shadow)}.boang-float-items{display:flex;flex-direction:column;background:#fff;box-shadow:var(--boang-shadow);border:1px solid #eee}.boang-float-items>a,.boang-float-items>button{width:72px;min-height:68px;padding:7px 4px;border:0;border-bottom:1px solid #eee;background:#fff;color:#222;text-decoration:none;text-align:center;cursor:pointer}.boang-float-items>a:hover,.boang-float-items>button:hover{background:var(--boang-accent);color:#111!important}.boang-float-icon{display:block;font-size:22px;line-height:24px;margin-bottom:4px}.boang-float-items b{font-size:10px;font-weight:600}.boang-fixed-contact.is-collapsed .boang-float-items{display:none}
.boang-leave-message-trigger{position:fixed;right:88px;bottom:22px;z-index:10019;border:0;background:var(--boang-accent);color:#111;padding:12px 18px;box-shadow:var(--boang-shadow);cursor:pointer}.boang-leave-message{position:fixed;right:88px;bottom:72px;width:340px;z-index:10021;background:#fff;border:1px solid var(--boang-border);box-shadow:var(--boang-shadow);padding:0}.boang-popup-head{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;background:var(--boang-accent);color:#111}.boang-popup-close{border:0;background:transparent;font-size:25px;line-height:1;cursor:pointer;color:#111}.boang-float-form{padding:15px}.boang-float-form label{display:block;font-size:12px;font-weight:600;margin-bottom:9px}.boang-float-form input,.boang-float-form textarea{box-sizing:border-box;width:100%;margin-top:4px;padding:9px;border:1px solid #ddd}.boang-float-form textarea{min-height:90px;resize:vertical}.boang-float-form button{width:100%;padding:10px;border:0}.boang-qr-modal[hidden],.boang-leave-message[hidden]{display:none}.boang-qr-modal{position:fixed;inset:0;z-index:10050}.boang-qr-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}.boang-qr-dialog{position:relative;width:min(420px,calc(100% - 30px));margin:8vh auto 0;background:#fff;padding:22px;text-align:center;box-shadow:var(--boang-shadow)}.boang-qr-dialog .boang-popup-close{position:absolute;right:8px;top:8px}.boang-qr-dialog img{max-width:100%;height:auto;display:block;margin:15px auto}.boang-back-top{position:fixed;right:15px;bottom:75px;width:42px;height:42px;border:0;border-radius:50%;background:#222;color:#fff;z-index:10018;opacity:0;visibility:hidden;transition:.2s;cursor:pointer}.boang-back-top.is-visible{opacity:1;visibility:visible}.boang-back-top:hover{background:var(--boang-accent);color:#111}
.boang-bottom-inquiry{position:fixed;left:50%;bottom:0;transform:translateX(-50%);z-index:10010}.boang-bottom-inquiry-link{display:block;background:var(--boang-accent);color:#111!important;padding:9px 30px;font-weight:700;box-shadow:0 -2px 15px rgba(0,0,0,.12)}
.boang-mobile-bottom{display:none}.boang-mobile-panel{display:none}
.newm,.newm *{max-width:100%}.newm img{height:auto!important}.newm table{width:100%!important;border-collapse:collapse;overflow:auto;display:table}.newm iframe{max-width:100%}
.boang-lang-ar,.lang-ar{direction:rtl}.boang-lang-ar .boang-top-left,.boang-lang-ar .boang-top-right{direction:rtl}.boang-lang-ar .boang-main-nav,.boang-lang-ar .boang-mobile-nav,.boang-lang-ar .newm,.boang-lang-ar .pro_table,.boang-lang-ar .boang-leave-message{direction:rtl}.boang-lang-ar .boang-float-items{right:auto;left:0}.boang-lang-ar .boang-leave-message-trigger{right:auto;left:88px}.boang-lang-ar .boang-leave-message{right:auto;left:88px}
.lang-options a.current,.lang-options a:hover{background:var(--boang-accent)!important;color:#111!important}
@media(max-width:991px){
 .boang-main-nav,.boang-desktop-lang,.boang-top-right .boang-search-desktop{display:none!important}.boang-mobile-toggle{display:flex!important}.boang-mobile-panel{display:block;max-height:0;overflow:hidden;transition:max-height .25s ease;background:#fff;border-top:1px solid #eee}.boang-header.mobile-open .boang-mobile-panel{max-height:85vh;overflow:auto}.boang-mobile-nav ul{list-style:none;margin:0;padding:0}.boang-mobile-nav li{position:relative;border-bottom:1px solid #eee}.boang-mobile-nav a{display:block;padding:14px 12px;color:#222!important}.boang-mobile-nav a:hover,.boang-mobile-nav a:focus{background:rgba(245,184,0,.1);color:#111!important}.mobile-sub-toggle{position:absolute;right:4px;top:5px;width:40px;height:40px;border:0;background:transparent;font-size:24px;cursor:pointer}.mobile-has-sub.open>.mobile-sub-toggle{color:var(--boang-accent-dark)}.mobile-sub-menu{display:none;background:#fafafa}.mobile-has-sub.open>.mobile-sub-menu{display:block}.mobile-sub-menu a{padding-left:30px}.boang-mobile-bottom{position:fixed;display:flex;left:0;right:0;bottom:0;height:62px;background:#fff;z-index:10025;box-shadow:0 -3px 18px rgba(0,0,0,.12)}.boang-mobile-bottom a{flex:1;text-align:center;text-decoration:none!important;color:#333!important;padding:7px 3px 4px;font-size:11px}.boang-mobile-bottom a:hover,.boang-mobile-bottom a:focus{color:#111!important;background:var(--boang-accent)}.boang-mobile-bottom span{display:block;font-size:21px;line-height:25px}.boang-mobile-bottom b{font-weight:500}.boang-fixed-contact{right:6px;top:auto;bottom:74px;transform:none}.boang-float-toggle{width:38px;height:38px}.boang-float-items>a,.boang-float-items>button{width:58px;min-height:54px}.boang-float-icon{font-size:18px;line-height:19px}.boang-leave-message-trigger{right:6px;bottom:140px;padding:9px 11px;font-size:11px}.boang-leave-message{right:6px;bottom:190px;width:min(340px,calc(100% - 12px))}.boang-back-top{right:6px;bottom:210px}.boang-bottom-inquiry{display:none}.boang-topbar-inner{min-height:36px}.boang-top-left{display:flex;justify-content:center;width:100%;font-size:11px}.boang-top-left .boang-top-link{padding:6px 5px}.boang-nav-inner{min-height:62px}.boang-logo img{max-height:52px}.boang-mobile-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;border:0;background:transparent;cursor:pointer}.boang-mobile-toggle span{display:block;width:26px;height:2px;background:#222}.boang-mobile-toggle:hover span{background:var(--boang-accent-dark)}.boang-search-mobile{display:flex;padding:12px}.boang-search-mobile input{flex:1;min-width:0}.boang-search-mobile button{width:44px}.boang-mobile-lang{padding:12px}.boang-mobile-lang .lang-current{width:100%;border:1px solid #ddd;text-align:left}.boang-mobile-lang .lang-options{position:static;width:100%;box-shadow:none}.boang-tabs{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}.boang-tab{flex:0 0 auto}.boang-tab img{width:28px;height:28px}.boang-tab-panel .boang-container{padding-left:12px;padding-right:12px}.boang-qr-dialog{margin-top:5vh}.boang-lang-ar .mobile-sub-toggle{right:auto;left:4px}.boang-lang-ar .mobile-sub-menu a{padding-right:30px;padding-left:12px}
}
@media(max-width:767px){
 .boang-header .boang-top-left .boang-top-link:nth-child(2){display:none}.boang-logo{max-width:180px}.boang-logo img{max-width:170px}.boang-card-img img{width:100%;height:auto}.cbp-vm-options{display:flex;justify-content:flex-end}.cbp-vm-view-list>ul>li .li{display:block}.cbp-vm-view-list>ul>li .cbp-vm-image{width:100%;margin-bottom:10px}.pro_page .container{padding-left:12px;padding-right:12px}.pro_main{display:block}.prom_img,.main_text{width:100%!important;float:none!important}.pro_table li{width:100%;display:block}.pro_table li p{display:inline-block;min-width:110px}.features-tab{margin-top:20px}.newm{font-size:14px;line-height:1.7}.newm table{font-size:12px}.pro_inq{padding:15px}.boang-news-card,.boang-case{min-width:0}.boang-section-head h2{font-size:26px}.boang-home-section{overflow:hidden}
}
@media(min-width:992px){.n_main>.container{display:flex;gap:28px}.n_main .n_right{flex:1;min-width:0}.pro_page .pro_main{display:flex;gap:30px}.pro_page .prom_img{flex:0 0 45%}.pro_page .main_text{flex:1;min-width:0}}
.boang-attr-label{display:inline-flex;align-items:center;gap:4px;margin:3px 12px 3px 0}.boang-attr-label input{accent-color:var(--boang-accent)}

/* BOANG 3.0.1 precision correction layer */
.boang-container{width:min(1200px,calc(100% - 40px));margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
.boang-container>*{box-sizing:border-box}
.boang-home-section,.boang-about-section,.boang-factory-section,.boang-cases-section,.boang-news-section{width:100%;overflow:hidden}
.boang-section-head{text-align:center;margin-left:auto;margin-right:auto}
.boang-fixed-contact{right:0!important}
.boang-fixed-contact .boang-float-toggle{display:none}
.boang-float-items{overflow:hidden}
.boang-float-items>a,.boang-float-items>button{width:48px;min-height:58px;transition:width .18s ease;background:#fff}
.boang-float-items .boang-float-icon{margin:0 auto 3px}
.boang-float-items b{display:none}
.boang-fixed-contact:hover .boang-float-items,.boang-fixed-contact:focus-within .boang-float-items{box-shadow:0 8px 28px rgba(0,0,0,.18)}
.boang-fixed-contact:hover .boang-float-items>a,.boang-fixed-contact:hover .boang-float-items>button,.boang-fixed-contact:focus-within .boang-float-items>a,.boang-fixed-contact:focus-within .boang-float-items>button{width:148px;text-align:left;padding-left:13px}
.boang-fixed-contact:hover .boang-float-items b,.boang-fixed-contact:focus-within .boang-float-items b{display:inline;font-size:11px;margin-left:7px}
.boang-fixed-contact:hover .boang-float-icon,.boang-fixed-contact:focus-within .boang-float-icon{display:inline-block;vertical-align:middle;width:24px}
.boang-fixed-contact.is-collapsed .boang-float-items{display:flex!important}
.boang-mobile-bottom{display:none!important}
@media(max-width:991px){
 .boang-container{width:calc(100% - 24px)!important}
 .boang-mobile-toggle{display:flex!important;visibility:visible!important;opacity:1!important}
 .boang-mobile-bottom{display:flex!important;visibility:visible!important;opacity:1!important}
 .boang-fixed-contact{display:flex!important;visibility:visible!important;opacity:1!important;right:6px!important;top:auto!important;bottom:74px!important;transform:none!important}
 .boang-fixed-contact .boang-float-items{display:flex!important}
 .boang-fixed-contact .boang-float-items>a,.boang-fixed-contact .boang-float-items>button{width:56px!important;min-height:52px!important;padding:6px 3px!important;text-align:center!important}
 .boang-fixed-contact .boang-float-items b{display:block!important;font-size:9px!important;margin:0!important}
 .boang-fixed-contact .boang-float-icon{display:block!important;width:auto!important;font-size:17px!important}
 .boang-fixed-contact .boang-float-toggle{display:none!important}
 .boang-leave-message-trigger{z-index:10030!important}
 .boang-back-top{z-index:10031!important}
}
@media(min-width:992px){
 .boang-fixed-contact:hover .boang-float-items,.boang-fixed-contact:focus-within .boang-float-items{display:flex!important}
}
@media(max-width:767px){
 .boang-container{width:calc(100% - 20px)!important}
 .boang-tabs{justify-content:flex-start!important}
 .boang-home-section .boang-section-head{padding-left:5px;padding-right:5px}
}


/* BOANG 3.1.0: source-driven import/UI repair */
:root{--boang-accent:#F5B800;--boang-accent-dark:#D9A000;--boang-contact:#F5B800}

/* Desktop contact: one compact trigger, rectangular panel on hover/click; QR is last. */
.boang-fixed-contact{right:0!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;display:flex!important;align-items:center!important;z-index:10030!important}
.boang-fixed-contact .boang-float-toggle{display:flex!important;width:42px;height:118px;align-items:center;justify-content:center;border:0;background:var(--boang-contact)!important;color:#fff!important;cursor:pointer;writing-mode:vertical-rl;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.boang-fixed-contact .boang-float-items{position:absolute;right:42px;top:50%;transform:translateY(-50%) translateX(10px);display:flex!important;flex-direction:column;width:260px;background:var(--boang-contact)!important;border:0!important;box-shadow:0 12px 34px rgba(0,0,0,.2)!important;opacity:0;visibility:hidden;pointer-events:none;transition:.18s ease}
.boang-fixed-contact.is-open .boang-float-items,.boang-fixed-contact:hover .boang-float-items,.boang-fixed-contact:focus-within .boang-float-items{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(-50%) translateX(0)}
.boang-fixed-contact .boang-float-items>a,.boang-fixed-contact .boang-float-items>button{width:260px!important;min-height:50px!important;display:flex!important;align-items:center!important;gap:12px!important;padding:10px 16px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.2)!important;background:var(--boang-contact)!important;color:#fff!important;text-align:left!important}
.boang-fixed-contact .boang-float-items>a:hover,.boang-fixed-contact .boang-float-items>button:hover{background:#F5B800!important;color:#fff!important}
.boang-fixed-contact .boang-float-icon{display:inline-flex!important;width:24px!important;margin:0!important;font-size:19px!important;color:#fff!important;align-items:center;justify-content:center}
.boang-fixed-contact .boang-float-items b{display:inline!important;margin:0!important;font-size:14px!important;font-weight:500!important;color:#fff!important}
.boang-fixed-contact .boang-qr-trigger{flex-wrap:wrap;align-items:flex-start!important}
.boang-fixed-contact .boang-float-qr{display:block;width:86px;height:86px;object-fit:cover;margin:4px 0 4px 36px;background:#fff;padding:3px}
.boang-bottom-inquiry{display:none!important}

/* Mobile header must show logo + search + menu, not an empty bar. */
.boang-mobile-search-toggle{display:none}
@media(max-width:991px){
  .boang-header .nav_section{background:#fff!important;border-bottom:1px solid #eee}
  .boang-header .nav_section .main{display:flex!important;align-items:center!important;min-height:64px!important;gap:6px!important}
  .boang-header #logo{display:block!important;visibility:visible!important;opacity:1!important;flex:1 1 auto!important;max-width:none!important;margin:0!important}
  .boang-header #logo a{display:inline-flex!important;align-items:center!important}
  .boang-header #logo img{display:block!important;max-width:168px!important;max-height:52px!important;width:auto!important;height:auto!important}
  .boang-header .nav_r{display:none!important}
  .boang-mobile-search-toggle{display:flex!important;align-items:center;justify-content:center;width:42px;height:42px;border:0;background:#fff;color:#222;font-size:25px;cursor:pointer}
  .boang-mobile-toggle{display:flex!important;flex:0 0 42px!important;margin:0!important}
  .boang-mobile-lang{display:block!important;padding:10px 12px 0!important}
  .boang-mobile-panel .container{width:100%!important;max-width:none!important;padding:0 10px!important}
  .boang-search-mobile{display:flex!important}

  /* Contact is collapsed on mobile; tap the blue trigger to show the panel. */
  .boang-fixed-contact{right:6px!important;top:auto!important;bottom:74px!important;transform:none!important}
  .boang-fixed-contact .boang-float-toggle{display:flex!important;width:46px!important;height:46px!important;border-radius:50%!important;writing-mode:initial!important;font-size:0!important}
  .boang-fixed-contact .boang-float-toggle:before{content:'☎';font-size:20px;color:#fff}
  .boang-fixed-contact .boang-float-items{right:52px!important;top:auto!important;bottom:0!important;transform:translateX(8px)!important;width:min(260px,calc(100vw - 74px))!important}
  .boang-fixed-contact.is-open .boang-float-items,.boang-fixed-contact:focus-within .boang-float-items{transform:translateX(0)!important}
  .boang-fixed-contact:not(.is-open) .boang-float-items{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
  .boang-fixed-contact .boang-float-items>a,.boang-fixed-contact .boang-float-items>button{width:100%!important;min-height:46px!important;padding:9px 13px!important;text-align:left!important}
  .boang-fixed-contact .boang-float-items b{display:inline!important;font-size:13px!important}
  .boang-fixed-contact .boang-float-icon{display:inline-flex!important;font-size:18px!important}
  .boang-fixed-contact .boang-float-qr{width:76px;height:76px;margin-left:34px}
  .boang-leave-message-trigger{right:60px!important;bottom:76px!important}
}
@media(max-width:420px){.boang-header #logo img{max-width:145px!important}.boang-mobile-search-toggle,.boang-mobile-toggle{width:38px!important}}

/* ==========================================================
   BOANG 3.2.0 — legacy theme rebuild correction layer
   Keep the proven native importer/data model from 3.1.1.
   Frontend corrections are intentionally appended so they win
   over the legacy stylesheet without changing imported data.
   ========================================================== */
:root{
  --boang-accent:#F5B800;
  --boang-accent-dark:#D9A000;
  --boang-contact:#F5B800;
}

/* Desktop header: match the original large/transparent -> small/white behavior. */
@media(min-width:992px){
  .boang-header.large{background:transparent!important;box-shadow:none!important}
  .boang-header.small{background:#fff!important;box-shadow:0 5px 16px rgba(0,0,0,.10)!important}
  .boang-header.small .main-menu>li>a,
  .boang-header.small .lang-current,
  .boang-header.small .top_con a,
  .boang-header.small .top_quote{color:#333!important}
  .boang-header .main-menu>li>a:before{background:var(--boang-accent)!important}
  .boang-header .main-menu>li.active>a,
  .boang-header .main-menu>li:hover>a{color:var(--boang-accent)!important}
  .boang-header .main-menu .sub-menu li>a:hover{background:var(--boang-accent)!important;color:#111!important}
}

/* Never show the extra centered banner title from the old generated layer. */
.boang-banner-link{display:block!important;line-height:0}
.boang-banner-link img{display:block!important;width:100%!important;height:auto!important}
.banner .banner_text{display:none!important}
.banner .swiper-pagination-bullet-active{background:var(--boang-accent)!important;border-color:var(--boang-accent)!important}
.banner .swiper-button-next:after,.banner .swiper-button-prev:after{color:#fff}

/* Home sections always use one centered content rail. */
.boang-container{width:min(1200px,calc(100% - 40px))!important;margin-inline:auto!important;box-sizing:border-box}
.boang-section-head{max-width:1000px;margin-inline:auto!important;text-align:center}
.boang-about-grid,.boang-cases-grid,.boang-news-section .boang-container,.boang-factory-section .boang-container{margin-inline:auto!important}
.boang-category-section .boang-container,.boang-about-section .boang-container,.boang-factory-section .boang-container,.boang-cases-section .boang-container,.boang-news-section .boang-container{position:relative}

/* All interactive states use the requested yellow accent. */
a:hover,a:focus-visible,button:hover,button:focus-visible,
.main-menu>li.active>a,.main-menu>li:hover>a,
.main-menu .sub-menu li>a:hover{color:var(--boang-accent)!important}
.cbp-vm-options a.cbp-vm-selected,
.cbp-vm-options a:hover{background:var(--boang-accent)!important;border-color:var(--boang-accent)!important;color:#111!important}
.cbp-vm-options a:focus-visible{outline:2px solid var(--boang-accent)!important}
.page_num>span{background:var(--boang-accent)!important;color:#111!important}
.page_num a:hover{background:var(--boang-accent)!important;color:#111!important}
.products .h4 a,.products .cbp-vm-details{color:#333!important}
.cbp-vm-view-grid ul li .li:hover:after{border-color:var(--boang-accent)!important}

/* Desktop fixed contact: narrow tab; hover/click opens a rectangular blue panel. QR is last. */
.boang-fixed-contact{right:0!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important;z-index:10030!important}
@media(min-width:992px){
  .boang-fixed-contact .boang-float-toggle{display:flex!important;width:42px!important;height:116px!important;border:0!important;border-radius:0!important;background:var(--boang-contact)!important;color:#fff!important;align-items:center;justify-content:center;writing-mode:vertical-rl;box-shadow:0 4px 18px rgba(0,0,0,.18)}
  .boang-fixed-contact .boang-float-items{position:absolute!important;right:42px!important;top:50%!important;transform:translateY(-50%) translateX(10px)!important;width:260px!important;display:flex!important;flex-direction:column!important;background:var(--boang-contact)!important;border:0!important;box-shadow:0 12px 34px rgba(0,0,0,.22)!important;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .18s ease,transform .18s ease!important}
  .boang-fixed-contact:hover .boang-float-items,
  .boang-fixed-contact:focus-within .boang-float-items,
  .boang-fixed-contact.is-open .boang-float-items{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(-50%) translateX(0)!important}
  .boang-fixed-contact .boang-float-items>a,
  .boang-fixed-contact .boang-float-items>button{width:260px!important;min-height:50px!important;display:flex!important;align-items:center!important;gap:12px!important;padding:10px 16px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.18)!important;background:var(--boang-contact)!important;color:#fff!important;text-align:left!important;box-sizing:border-box!important}
  .boang-fixed-contact .boang-float-items>a:hover,
  .boang-fixed-contact .boang-float-items>button:hover{background:#F5B800!important;color:#fff!important}
  .boang-fixed-contact .boang-float-icon{display:inline-flex!important;width:24px!important;margin:0!important;font-size:19px!important;color:#fff!important;align-items:center;justify-content:center}
  .boang-fixed-contact .boang-float-items b{display:inline!important;margin:0!important;font-size:14px!important;font-weight:500!important;color:#fff!important}
  .boang-fixed-contact .boang-contact-copy{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .boang-fixed-contact .boang-qr-trigger{align-items:flex-start!important;flex-wrap:wrap!important}
  .boang-fixed-contact .boang-float-qr{display:block!important;width:88px!important;height:88px!important;object-fit:contain!important;margin:4px 0 4px 36px!important;background:#fff!important;padding:3px!important}
}

/* Leave-message is one single desktop/mobile trigger. */
.boang-leave-message-trigger{right:20px!important;bottom:20px!important;background:var(--boang-accent)!important;color:#111!important}
.boang-leave-message-trigger:hover{background:var(--boang-accent-dark)!important;color:#111!important}
.boang-bottom-inquiry{display:none!important}

/* Mobile: independent header row with visible logo + search + hamburger. */
@media(max-width:991px){
  body{padding-bottom:62px!important}
  .boang-header,
  .boang-header.small,
  .boang-header.large{position:relative!important;left:auto!important;top:auto!important;width:100%!important;background:#fff!important;box-shadow:0 1px 8px rgba(0,0,0,.08)!important;z-index:10040!important}
  .boang-header .header_section{display:none!important}
  .boang-header .nav_section{display:block!important;background:#fff!important;border-bottom:1px solid #e8e8e8!important;padding:0!important}
  .boang-header .nav_section .container{width:100%!important;max-width:none!important;padding:0 12px!important}
  .boang-header .nav_section .main{display:flex!important;align-items:center!important;justify-content:space-between!important;min-height:64px!important;width:100%!important}
  .boang-header #logo{display:block!important;visibility:visible!important;opacity:1!important;flex:1 1 auto!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important}
  .boang-header #logo a{display:inline-flex!important;align-items:center!important;max-width:100%!important}
  .boang-header #logo img{display:block!important;width:auto!important;max-width:154px!important;max-height:48px!important;height:auto!important;visibility:visible!important;opacity:1!important}
  .boang-header .nav_r{display:none!important}
  .boang-mobile-search-toggle{display:flex!important;align-items:center!important;justify-content:center!important;width:42px!important;height:42px!important;border:0!important;background:transparent!important;color:#222!important;font-size:0!important;position:relative!important;cursor:pointer!important}
  .boang-mobile-search-toggle:before{content:'';display:block;width:17px;height:17px;border:2px solid currentColor;border-radius:50%}
  .boang-mobile-search-toggle:after{content:'';position:absolute;width:9px;height:2px;background:currentColor;transform:rotate(45deg);margin:16px 0 0 16px}
  .boang-mobile-toggle{display:flex!important;flex:0 0 42px!important;width:42px!important;height:42px!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:5px!important}
  .boang-mobile-toggle span{display:block!important;width:26px!important;height:2px!important;background:#222!important}
  .boang-mobile-toggle:hover span{background:var(--boang-accent)!important}
  .boang-header .height{display:none!important}
  .height{height:0!important}
  .boang-mobile-panel{position:absolute!important;left:0!important;right:0!important;top:64px!important;background:#fff!important;max-height:0!important;overflow:hidden!important;border-top:1px solid #eee!important;box-shadow:0 12px 24px rgba(0,0,0,.12)!important;transition:max-height .25s ease!important}
  .boang-header.mobile-open .boang-mobile-panel{max-height:calc(100vh - 64px)!important;overflow:auto!important}
  .boang-mobile-panel .container{width:100%!important;max-width:none!important;padding:0 12px!important}
  .boang-mobile-lang{padding:10px 0!important}
  .boang-search-mobile{display:flex!important;padding:8px 0 12px!important}
  .boang-search-mobile input{height:42px!important;min-width:0!important;border:1px solid #ddd!important;padding:0 12px!important}
  .boang-search-mobile button{width:46px!important;height:42px!important}
  .boang-mobile-nav ul{margin:0!important;padding:0!important}
  .boang-mobile-nav a{color:#222!important;padding:13px 10px!important}
  .boang-mobile-nav a:hover,.boang-mobile-nav a:focus{background:rgba(245,184,0,.12)!important;color:#111!important}
  .boang-mobile-bottom{display:flex!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;height:62px!important;z-index:10025!important;background:#fff!important}
  .boang-mobile-bottom a{color:#333!important}
  .boang-mobile-bottom a:hover,.boang-mobile-bottom a:focus{background:var(--boang-accent)!important;color:#111!important}

  /* Mobile contact stays available, but collapsed so it never covers page content. */
  .boang-fixed-contact{display:flex!important;right:8px!important;top:auto!important;bottom:76px!important;transform:none!important;z-index:10030!important}
  .boang-fixed-contact .boang-float-toggle{display:flex!important;width:46px!important;height:46px!important;border:0!important;border-radius:50%!important;background:var(--boang-accent)!important;color:#111!important;align-items:center!important;justify-content:center!important;writing-mode:initial!important;box-shadow:0 5px 18px rgba(0,0,0,.2)!important}
  .boang-fixed-contact .boang-float-items{position:absolute!important;right:52px!important;bottom:0!important;top:auto!important;width:min(260px,calc(100vw - 74px))!important;display:flex!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateX(10px)!important;background:var(--boang-contact)!important;border:0!important;box-shadow:0 10px 28px rgba(0,0,0,.2)!important;transition:.18s ease!important}
  .boang-fixed-contact.is-open .boang-float-items{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateX(0)!important}
  .boang-fixed-contact .boang-float-items>a,
  .boang-fixed-contact .boang-float-items>button{width:100%!important;min-height:46px!important;padding:8px 12px!important;display:flex!important;align-items:center!important;gap:10px!important;background:var(--boang-contact)!important;color:#fff!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.18)!important;text-align:left!important}
  .boang-fixed-contact .boang-float-items b{display:inline!important;font-size:12px!important;color:#fff!important}
  .boang-fixed-contact .boang-float-icon{display:inline-flex!important;width:22px!important;font-size:17px!important;color:#fff!important}
  .boang-fixed-contact .boang-contact-copy{display:flex!important;align-items:center!important;gap:8px!important;flex-wrap:wrap!important}
  .boang-fixed-contact .boang-float-qr{width:72px!important;height:72px!important;margin:4px 0 4px 28px!important;background:#fff!important;padding:3px!important}
  .boang-leave-message-trigger{right:62px!important;bottom:78px!important;padding:10px 12px!important;font-size:11px!important;z-index:10031!important}
  .boang-leave-message{right:8px!important;bottom:132px!important;width:min(340px,calc(100vw - 16px))!important;z-index:10032!important}
  .boang-back-top{right:8px!important;bottom:190px!important;z-index:10033!important}

  /* Homepage mobile centering and spacing. */
  .boang-container{width:calc(100% - 20px)!important;margin-inline:auto!important}
  .boang-section-head{width:100%!important;text-align:center!important;margin-inline:auto!important}
  .boang-section-head h2{font-size:26px!important;line-height:1.25!important;margin:8px 0 12px!important}
  .boang-section-head p{font-size:14px!important;line-height:1.6!important;margin:0 auto!important}
  .boang-tabs{width:100%!important;justify-content:flex-start!important;overflow-x:auto!important;flex-wrap:nowrap!important;margin:16px auto!important;padding-bottom:5px!important;scrollbar-width:none}
  .boang-tabs::-webkit-scrollbar{display:none}
  .boang-tab{flex:0 0 auto!important;padding:8px 12px!important}
  .boang-tab img{width:30px!important;height:30px!important}
  .boang-tab-panel .boang-container{width:calc(100% - 20px)!important;padding:0!important}
  .boang-about-grid{display:block!important}
  .boang-about-copy,.boang-about-image{width:100%!important;max-width:none!important}
  .boang-about-image img{display:block!important;width:100%!important;height:auto!important;margin:0 auto!important}
  .boang-services ul{display:grid!important;grid-template-columns:repeat(3,1fr)!important;gap:8px!important;padding:0!important}
  .boang-services li{text-align:center!important}
  .boang-factory-slider,.boang-news-slider,.boang-product-slider{width:100%!important}
  .boang-card,.boang-news-card{width:100%!important}
}
@media(max-width:420px){
  .boang-header #logo img{max-width:142px!important;max-height:44px!important}
  .boang-mobile-search-toggle{width:38px!important}
  .boang-mobile-toggle{flex-basis:40px!important;width:40px!important}
  .boang-leave-message-trigger{right:60px!important}
}

/* Arabic keeps the same component geometry while reversing text direction. */
.boang-lang-ar{direction:rtl}
.boang-lang-ar .boang-fixed-contact{direction:ltr}
.boang-lang-ar .boang-mobile-bottom{direction:rtl}
.boang-lang-ar .boang-mobile-nav,.boang-lang-ar .newm,.boang-lang-ar .pro_table,.boang-lang-ar .boang-leave-message{direction:rtl}

/* Product archive: keep titles/details above the legacy hover overlay and keep
   the Grid/List controls available on phones. */
.cbp-vm-view-grid ul li .li .text{position:relative;z-index:1001;color:#333}
.cbp-vm-view-grid ul li .h4 a{position:relative!important;z-index:1002!important;color:#333!important}
.cbp-vm-view-grid ul li .cbp-vm-details{position:relative;z-index:1002;color:#666!important}
.cbp-vm-view-grid ul li .cbp-vm-image{position:relative;z-index:1001}
.cbp-vm-view-grid ul li .cbp-vm-image img{display:block;min-height:180px;background:#f7f7f7;object-fit:cover}
.cbp-vm-options a{font-size:18px!important;line-height:32px!important;color:#555!important}
@media(max-width:991px){
  .cbp-vm-options{display:flex!important;justify-content:flex-end!important;margin-bottom:12px!important}
  .cbp-vm-options a{display:flex!important;align-items:center!important;justify-content:center!important}
}


/* 3.2.2 product-detail stabilization: the legacy mtree script is not required by the WP theme. */
ul.mtree{opacity:1!important;visibility:visible!important}
.boang_sidebar ul.mtree a,.n_left ul.mtree a{color:#333!important;text-decoration:none!important;visibility:visible!important}
.boang_sidebar ul.mtree li ul a,.n_left ul.mtree li ul a{color:#666!important}
.boang_sidebar ul.mtree>li>h2,.n_left ul.mtree>li>h2{margin:0!important;padding:0!important}
.boang_sidebar ul.mtree>li>h2>a,.n_left ul.mtree>li>h2>a{color:#333!important}
.boang_sidebar ul.mtree>li:hover>h2>a,.n_left ul.mtree>li:hover>h2>a{color:#fff!important}
.boang_sidebar .tree-toggle,.n_left .tree-toggle{position:absolute;right:8px;top:8px;width:30px;height:30px;border:0;background:transparent;color:#666;font-size:18px;z-index:2}
.boang_sidebar ul.mtree>li:hover .tree-toggle,.n_left ul.mtree>li:hover .tree-toggle{color:#fff}

/* Legacy product-detail HTML uses fixed 515.5px inline widths. Normalize those widths inside the WP content area. */
.product-detail-main .newm{color:#333;font-size:15px;line-height:1.8;overflow:hidden}
.product-detail-main .newm p{margin:0 0 14px}
.product-detail-main .newm h1,.product-detail-main .newm h2,.product-detail-main .newm h3,.product-detail-main .newm h4{line-height:1.35;color:#333}
.product-detail-main .newm img{max-width:100%!important;height:auto!important;vertical-align:middle}
.product-detail-main .newm iframe{max-width:100%;border:0}
.product-detail-main .newm .page_quality2L{width:100%!important;max-width:100%;margin:24px 0;clear:both}
.product-detail-main .newm .spe_main{display:flex;align-items:center;gap:30px;width:100%!important;max-width:100%;box-sizing:border-box}
.product-detail-main .newm .spe_main>div{box-sizing:border-box;max-width:100%!important}
.product-detail-main .newm .page_quality2L_img{flex:1 1 50%;width:auto!important;text-align:center}
.product-detail-main .newm .text-detail{flex:1 1 50%;width:auto!important}
.product-detail-main .newm .spe_main_2{flex-direction:row-reverse}
.product-detail-main .newm .det_pic_content{clear:both;width:100%!important;max-width:100%}
.product-detail-main .newm .det_pic_content ul.list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0;padding:0;list-style:none}
.product-detail-main .newm .det_pic_content ul.list li{list-style:none;margin:0;padding:0}
.product-detail-main .newm .det_pic_content ul.list .column{width:100%!important;text-align:center}
.product-detail-main .newm table{width:100%!important;max-width:100%;border-collapse:collapse}
.product-detail-main .newm td,.product-detail-main .newm th{padding:8px;border:1px solid #e5e5e5}
.boang-additional-detail{margin-top:30px;padding-top:24px;border-top:1px solid #eee}
.boang-additional-detail h2{font-size:22px;margin:0 0 18px}

/* Swiper 8 no longer adds the old .swiper-slide-visible class used by the legacy stylesheet. */
.rel_section .swiper-slide{opacity:1!important;visibility:visible!important}
.rel_section .swiper-slide .li{opacity:1!important;filter:none!important}
.rel_section .li .img img{display:block;width:100%;height:auto;opacity:1!important}
.rel_section .li .h4,.rel_section .li p{opacity:1!important;color:#333}

@media(max-width:991px){
 .product-detail-main .newm .spe_main,.product-detail-main .newm .spe_main_2{display:block}
 .product-detail-main .newm .page_quality2L_img,.product-detail-main .newm .text-detail{width:100%!important;margin-bottom:18px}
 .product-detail-main .newm .det_pic_content ul.list{grid-template-columns:1fr 1fr;gap:10px}
}
@media(max-width:575px){.product-detail-main .newm .det_pic_content ul.list{grid-template-columns:1fr}.product-detail-main .newm{font-size:14px}}

/* ==========================================================
   BOANG HOME 3.3.0 — legacy homepage structure restoration
   The homepage now uses the original Zend class structure so
   the original responsive stylesheet is the visual baseline.
   ========================================================== */
.cate_section .ah-tab-item{cursor:pointer;text-decoration:none}
.cate_section .ah-tab-content{display:none!important}
.cate_section .ah-tab-content[data-ah-tab-active="true"]{display:block!important}
.cate_section .ah-tab-item[data-ah-tab-active="true"]{color:#fff!important;background:#F5B800!important}
.cate_section .ah-tab>.ah-tab-item[data-ah-tab-active="true"] img{filter:brightness(0) invert(1)}
.cate_section .pro_section .swiper-slide{opacity:1!important;visibility:visible!important}
.cate_section .pro_section .swiper-slide .li{opacity:1!important}
.fac_section .swiper-slide{opacity:1!important;visibility:visible!important}
.news_section .swiper-slide{opacity:1!important;visibility:visible!important}
.case_section .back img{opacity:.1}
.case_section .back .inner{position:relative;z-index:2}
.about_section .about_img img{max-width:100%;height:auto}
.about_section .about_img table,.about_section .about_img iframe{max-width:100%}
@media(max-width:991px){
  .cate_section .ah-tab{overflow-x:auto!important;white-space:nowrap!important}
  .cate_section .ah-tab>.ah-tab-item{float:none!important;width:auto!important;display:inline-block!important}
  .cate_section .text_p{display:none!important}
  .about_section .about_img{padding:0 15px!important}
}


/* ==========================================================
   BOANG 3.3.1 — Homepage geometry / overflow stabilization
   ========================================================== */
html{max-width:100%;overflow-x:hidden!important}body{max-width:100%;overflow-x:visible!important}@supports (overflow:clip){body{overflow-x:clip!important}}
*,*:before,*:after{box-sizing:border-box}
.container{width:100%!important;max-width:1360px!important;margin-left:auto!important;margin-right:auto!important;padding-left:30px!important;padding-right:30px!important}
.swiper-container,.swiper,.pro_scrollbar,.news_scrollbar{width:100%;max-width:100%;overflow:hidden}
.swiper-wrapper{max-width:none}
img,video,iframe{max-width:100%;}
.banner,.banner .swiper-container,.boang-banner-slider{width:100%!important;max-width:100vw!important;overflow:hidden!important}
.banner .swiper-slide{width:100%!important;max-width:100vw!important;overflow:hidden}
.banner .swiper-slide img{width:100%!important;height:auto!important;display:block}

/* Header menu items must never wrap into a second line. */
.main-menu>li>a{white-space:nowrap!important}
.main-menu>li{white-space:nowrap}
.main-menu{display:flex;align-items:center;flex-wrap:nowrap}
@media(min-width:993px){
  .nav_section .main{display:flex;align-items:center;min-width:0}
  .nav_section .nav_r{min-width:0;flex:1 1 auto}
  .header-navigation,.main-navigation,.main-navigation-inner{min-width:0}
  .main-menu{justify-content:flex-end;gap:0}
  .main-menu>li>a{padding-left:12px!important;padding-right:12px!important}
}

/* Project Cases: keep the image visible on both desktop and mobile.
   The old 3D card hid the front image and reduced the back image to 10%,
   which made the title appear to float alone. */
.case_section{overflow:hidden!important}
.case_section ul{display:flex!important;flex-wrap:wrap!important;margin:0 -10px!important;padding:0!important}
.case_section ul li{float:none!important;display:block!important;box-sizing:border-box!important}
.case_section .li{position:relative!important;overflow:hidden!important;aspect-ratio:4/3!important;background:#F5B800}
.case_section .front,.case_section .back{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;transform:none!important;backface-visibility:visible!important}
.case_section .front .img,.case_section .front .img img,.case_section .back>a,.case_section .back>a img{display:block!important;width:100%!important;height:100%!important}
.case_section .front img,.case_section .back img{width:100%!important;height:100%!important;object-fit:cover!important;opacity:1!important}
.case_section .back{opacity:0!important;background:rgba(4,82,165,.94)!important;transition:opacity .35s ease!important;z-index:3!important}
.case_section .front{z-index:2!important;opacity:1!important}
.case_section .back>a{position:absolute!important;inset:0!important;z-index:0!important}
.case_section .back>a img{opacity:.18!important}
.case_section .back .inner{position:absolute!important;inset:0!important;z-index:2!important;transform:none!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:center!important;text-align:center!important;padding:24px!important;color:#fff!important}
.case_section li:hover .front{opacity:1!important;transform:none!important}
.case_section li:hover .back{opacity:1!important;transform:none!important}
.case_section ul li .title{color:#fff!important;font-weight:700!important;margin:0 0 10px!important;height:auto!important;font-size:22px!important;line-height:1.35!important}
.case_section ul li p{color:#fff!important;font-weight:600!important;height:auto!important;max-height:66px!important;margin:0 0 12px!important}
.case_section ul li .more{flex:0 0 auto}
@media(max-width:992px){
  .case_section ul li{width:50%!important;padding:0 8px!important;margin-bottom:16px!important}
  .case_section .li{aspect-ratio:4/3!important}
  .case_section .front{display:block!important}
  .case_section .back{position:absolute!important;display:block!important;padding:0!important}
  .case_section .back .inner{position:absolute!important;inset:0!important;display:flex!important;padding:14px!important}
  .case_section ul li p{display:none!important}
  .case_section ul li .title{font-size:16px!important;line-height:1.35!important;margin:0!important}
  .case_section ul li .more{display:none!important}
}
@media(max-width:575px){
  .container{padding-left:15px!important;padding-right:15px!important}
  .case_section ul{margin:0 -6px!important}
  .case_section ul li{padding:0 6px!important}
}

/* Product hero was 36% + 74% in the legacy CSS (=110%), which created a phantom horizontal canvas. */
.pro_page .pro_main{width:100%!important;max-width:100%!important;min-width:0!important}
.pro_page .prom_img{width:42%!important;min-width:0!important;box-sizing:border-box!important}
.pro_page .main_text{width:58%!important;min-width:0!important;box-sizing:border-box!important}
.pro_page .prom_img #pro_img_gallery,.pro_page .prom_img #pro_img_gallery .swiper-wrapper{width:100%!important;max-width:100%!important}
.pro_page .main_text,.pro_page .pro_table,.pro_page .pro_table ul{max-width:100%!important;min-width:0!important;overflow:hidden}
.pro_page .main_text *{max-width:100%;box-sizing:border-box}
@media(max-width:992px){.pro_page .prom_img,.pro_page .main_text{width:100%!important}}

/* Factory / product / news sliders must not create a page-wide phantom width. */
.fac_section .pro_scrollbar,.cate_section .pro_scrollbar,.news_section .news_scrollbar{width:100%!important;max-width:100%!important}
.fac_section .swiper-wrapper,.cate_section .swiper-wrapper,.news_section .swiper-wrapper{width:auto!important}

/* Footer subscribe/logo block: white instead of the legacy blue-tinted image panel. */
#footer .footer_top{background:#fff!important}
#footer .footer_top .footer_logo{background:#fff!important;background-image:none!important}
#footer .footer_top .email_title{background:#fff!important}
#footer .footer_top .email_main{background:#fff!important}

.boang-product-empty-detail{padding:18px;background:#fff8df;border:1px solid #f5d46a;color:#765d00}


/* ==========================================================
   BOANG 3.3.2 — source-reference corrections
   ========================================================== */
:root{--boang-contact:#F5B800!important;--boang-accent:#F5B800;--boang-accent-dark:#D9A000}
.boang-fixed-contact .boang-float-toggle{background:#F5B800!important;color:#111!important}
@media(min-width:992px){
 .boang-fixed-contact .boang-float-items{background:#F5B800!important}
 .boang-fixed-contact .boang-float-items>a,.boang-fixed-contact .boang-float-items>button{background:#F5B800!important;color:#111!important;border-bottom:1px solid rgba(0,0,0,.12)!important}
 .boang-fixed-contact .boang-float-items>a:hover,.boang-fixed-contact .boang-float-items>button:hover{background:#D9A000!important;color:#111!important}
 .boang-fixed-contact .boang-float-icon,.boang-fixed-contact .boang-float-items b{color:#111!important}
 .boang-fixed-contact .boang-float-qr{background:#fff!important}
}
@media(max-width:991px){
 .boang-fixed-contact{right:0!important;top:50%!important;bottom:auto!important;transform:translateY(-50%)!important}
 .boang-fixed-contact .boang-float-toggle{position:relative!important;z-index:10060!important;width:46px!important;height:118px!important;background:#F5B800!important;color:#111!important}
 .boang-fixed-contact .boang-float-items{position:fixed!important;inset:0!important;width:100vw!important;height:100vh!important;max-height:none!important;margin:0!important;padding:0!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;background:#F5B800!important;border:0!important;box-shadow:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:none!important;z-index:10055!important;overflow-y:auto!important}
 .boang-fixed-contact.is-open .boang-float-items,.boang-fixed-contact:focus-within .boang-float-items{opacity:1!important;visibility:visible!important;pointer-events:auto!important}
 .boang-fixed-contact .boang-float-items>a,.boang-fixed-contact .boang-float-items>button{width:100%!important;min-height:0!important;height:auto!important;flex:0 0 auto!important;padding:28px 24px!important;background:#F5B800!important;color:#111!important;border:0!important;border-bottom:1px solid rgba(0,0,0,.14)!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:24px!important;text-align:left!important;font-size:26px!important}
 .boang-fixed-contact .boang-float-items>a:hover,.boang-fixed-contact .boang-float-items>button:hover{background:#D9A000!important;color:#111!important}
 .boang-fixed-contact .boang-float-icon{display:inline-flex!important;width:52px!important;height:52px!important;align-items:center!important;justify-content:center!important;font-size:34px!important;color:#111!important;margin:0!important}
 .boang-fixed-contact .boang-float-items b{font-size:24px!important;color:#111!important;font-weight:500!important}
 .boang-fixed-contact .boang-qr-trigger{display:block!important;padding:26px 24px 40px!important}
 .boang-fixed-contact .boang-contact-copy{display:grid!important;grid-template-columns:52px 1fr!important;align-items:center!important;gap:20px 24px!important;width:100%!important}
 .boang-fixed-contact .boang-float-qr{grid-column:2!important;width:210px!important;height:210px!important;margin:0!important;background:#fff!important;padding:6px!important;object-fit:contain!important}
}

/* Seven source Factory images; desktop shows four and arrows scroll through all seven. */
.fac_section .boang-factory-slider{position:relative!important;overflow:hidden!important}
.fac_section .boang-factory-slider .swiper-wrapper{display:flex!important;width:auto!important;max-width:none!important}
.fac_section .boang-factory-slider .swiper-slide{height:auto!important;opacity:1!important;visibility:visible!important}
.fac_section .boang-factory-slider .swiper-slide .li{height:100%!important}
.fac_section .boang-factory-slider .swiper-slide img{display:block!important;width:100%!important;height:220px!important;object-fit:cover!important}
@media(max-width:991px){.fac_section .boang-factory-slider .swiper-slide img{height:190px!important}}

/* Match the source category order: custom_cat_desc 1→4, then legacy product_sort within each category. */
.cate_section .ah-tab{display:flex!important}
.cate_section .ah-tab-item{flex:1 1 0!important;min-width:0!important;text-align:center!important;white-space:nowrap!important}
.cate_section .pro_section .swiper-wrapper{display:flex!important}
.boang-home-products-slider.swiper-container{overflow:hidden!important}
.boang-home-products-slider .swiper-slide{padding:0!important}

/* Short descriptions are part of the source content model, not optional filler. */
.products .cbp-vm-details,.news .text>p,.blog_list .text>p,.cate_section .pro_section .text>p,.news_section .text>p{display:block!important;opacity:1!important;color:#777!important;line-height:1.6!important}
.products .cbp-vm-view-grid .tags_ul,.products .cbp-vm-view-list .tags_ul{display:block!important;opacity:1!important;visibility:visible!important}

/* Product admin editors stay visible and clearly separated. */
#boang_product_content,#boang_product_detail_editor{border:2px solid #F5B800!important}
#boang_product_content .inside,#boang_product_detail_editor .inside{background:#fff!important}

/* ==========================================================
   BOANG 3.3.3 — mobile cleanup + source-matched fixed contact
   ========================================================== */
@media (max-width: 991px){
  .boang-fixed-contact{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}
  .boang-leave-message-trigger,.boang-leave-message{display:none!important;visibility:hidden!important}
  .boang-product-site .n_right{width:100%!important;max-width:100%!important;float:none!important}
  .boang-product-site .product-detail-main .container{display:block!important}
}

@media (min-width: 992px){
  .boang-fixed-contact{z-index:999999;position:fixed;right:0;top:40%;width:50px;margin-top:-90px;overflow:hidden;opacity:1;transform:none;background:transparent;transition:all .4s}
  .boang-fixed-contact:hover{width:260px}
  .boang-fixed-contact .item-list{margin:0;padding:0;list-style:none}
  .boang-fixed-contact li{position:relative;height:50px;overflow:hidden;list-style:none;background:#F5B800!important;border-bottom:1px solid rgba(0,0,0,.12);transition:all .3s}
  .boang-fixed-contact li .column{height:100%;position:relative}
  .boang-fixed-contact li i{width:50px;height:50px;color:#111;font-size:18px;line-height:50px;display:inline-block;text-align:center;font-style:normal}
  .boang-fixed-contact li a{position:absolute;top:0;right:-135px;display:block;width:210px;line-height:110%;padding:17px 0 0 50px;color:#111!important;white-space:nowrap;transition:all .3s;font-size:16px;text-align:left;opacity:0;text-decoration:none!important}
  .boang-fixed-contact:hover li a{right:0;opacity:1}
  .boang-fixed-contact li:hover{background:#D9A000!important}
  .boang-fixed-contact .online_code{height:50px}
  .boang-fixed-contact .online_code a{padding-top:9px;right:-210px}
  .boang-fixed-contact .online_code p{margin:0 0 5px;color:#111;line-height:18px}
  .boang-fixed-contact .online_code a img{display:block;width:80px;height:80px;object-fit:contain;background:#fff;padding:2px;margin:0 4px}
  .boang-fixed-contact:hover .online_code{height:130px}
  .boang-fixed-contact:hover .online_code a{right:0;opacity:1}
}

/* 3.3.3 product editor: make the single source-of-truth box obvious. */
.boang-admin-product-note{background:#fff8df;border-left:4px solid #F5B800;padding:10px 12px;margin:4px 0 18px}
.boang-admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
.boang-admin-grid>p{margin-top:0}
@media(max-width:782px){.boang-admin-grid{grid-template-columns:1fr}}

/* 3.4.1 — source-matched interaction layer. Keep the legacy ah-tab/horizontalmenu geometry. */
:root{--boang-accent:#F5B800;--boang-accent-dark:#D9A000;}

/* Product category tabs: the source style.css already defines the desktop/mobile widths.
   Do not replace it with flex:1 or fixed 24.9% rules; horizontalmenu controls transforms/overflow. */
.cate_section .ah-tab-item[data-ah-tab-active="true"],
.cate_section .ah-tab>.ah-tab-item:hover{background:var(--boang-accent)!important;color:#fff!important;}
.cate_section .ah-tab>.ah-tab-item[data-ah-tab-active="true"] img,
.cate_section .ah-tab>.ah-tab-item:hover img{filter:brightness(0) invert(1)!important;}
.cate_section .ah-tab-overflow-list>.ah-tab-item:hover,
.cate_section .ah-tab-overflow-list>.ah-tab-item[data-ah-tab-active="true"]{border-left-color:var(--boang-accent)!important;color:var(--boang-accent)!important;background:#fff!important;}

/* News/product Swiper: use the legacy CSS-defined slide widths with real touch movement. */
.news_section .news_scrollbar,.cate_section .pro_scrollbar{touch-action:pan-y;}
.news_section .news_scrollbar .swiper-wrapper,.cate_section .pro_scrollbar .swiper-wrapper{align-items:stretch;}
.news_section .news_scrollbar .swiper-slide,.cate_section .pro_scrollbar .swiper-slide{flex-shrink:0;}

/* Contact: title is a separate block from the contact content on every viewport. */
.n_main>.container>.n_title{display:block!important;clear:both!important;width:100%!important;float:none!important;}
.contact{display:block!important;clear:both!important;width:100%!important;}
.contact_info,.con_main{display:block!important;clear:both!important;width:100%!important;}

/* Legacy back-to-top: keep the source ring geometry and yellow theme. */
.progress-wrap{right:.3rem!important;bottom:80px!important;width:.46rem!important;height:.46rem!important;}
.progress-wrap::after{color:var(--boang-accent)!important;}
.progress-wrap svg.progress-circle path{stroke:var(--boang-accent)!important;}

/* Theme interaction color: site-owned states use the theme yellow. */
a:hover,.main-menu>li>a:hover,.main-menu>li.active>a,
.news_section ul li .li .title:hover,.news_section ul li .more:hover,
.pro_section .li:hover .more,
.cate_section .ah-tab-item:hover,.page_nav .ah-tab-item:hover{color:var(--boang-accent)!important;}
.pro_section .li:hover .h4{color:#333!important;}

@media only screen and (max-width:500px){
  .progress-wrap{right:.15rem!important;bottom:60px!important;}
  .news_section .news_scrollbar .swiper-slide{width:100%!important;}
}
@media only screen and (min-width:501px) and (max-width:768px){
  .news_section .news_scrollbar .swiper-slide{width:50%!important;}
}
/* ===== BOANG 3.4.2 final source-matched fixes ===== */
:root{--boang-accent:#F5B800;--boang-accent-dark:#D9A000;}
.cate_section .ah-tab{display:block!important;position:relative!important;white-space:nowrap!important;overflow:hidden!important;letter-spacing:-.3em!important;padding-right:0!important}.cate_section .ah-tab>.ah-tab-item{display:inline-block!important;float:none!important;width:auto!important;min-width:0!important;flex:0 0 auto!important;vertical-align:top!important;transform:translateX(0);transition:transform .3s,color .3s,background-color .3s!important}.cate_section .ah-tab-item[data-ah-tab-active="true"],.cate_section .ah-tab>.ah-tab-item:hover{background:var(--boang-accent)!important;color:#fff!important}.cate_section .ah-tab-overflow-list>.ah-tab-item:hover,.cate_section .ah-tab-overflow-list>.ah-tab-item[data-ah-tab-active="true"]{border-left-color:var(--boang-accent)!important;color:var(--boang-accent)!important;background:#fff!important}.cate_section .ah-tab-overflow-wrapper{background:#fff!important}@media(max-width:992px){.cate_section .ah-tab{padding-right:120px!important;overflow:hidden!important}.cate_section .ah-tab>.ah-tab-item{display:inline-block!important;float:none!important;width:auto!important}}
.hot_left .vertical_scrollbar{height:420px!important;overflow:hidden!important}.hot_left .vertical_scrollbar .swiper-slide{height:105px!important;opacity:1!important;visibility:visible!important}.hot_left .vertical_scrollbar .swiper-wrapper{height:auto!important}.hot_left .swiper-button-next,.hot_left .swiper-button-prev{width:29px!important;height:50px!important;right:10px!important;left:auto!important;top:0!important;margin:0!important;background-color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;background-size:22px 22px!important}.hot_left .swiper-button-prev{right:40px!important;top:0!important}.hot_left .swiper-button-next:after,.hot_left .swiper-button-prev:after{display:none!important}
.n_left{height:max-content!important}.n_left .theiaStickySidebar{position:static!important;width:100%!important}.n_left ul.mtree{opacity:1!important;margin:0!important}.n_left ul.mtree>li>h2>a{color:#333!important;background:#f7f7f7!important}.n_left ul.mtree>li:hover>h2>a,.n_left ul.mtree>li.mtree-open>h2>a,.n_left ul.mtree>li.active>h2>a{background:var(--boang-accent)!important;color:#fff!important}.n_left ul.mtree ul li.active>a,.n_left ul.mtree ul li:hover>a,.n_left ul.mtree .mtree-level-2 li.active a,.n_left ul.mtree .mtree-level-2 li a:hover{color:var(--boang-accent)!important}.n_left ul.mtree a:hover{text-decoration:none!important;color:var(--boang-accent)!important}.n_left .nav_h4,.n_left .left_h4{background:var(--boang-accent)!important;color:#111!important}.hot_left .li .more{color:var(--boang-accent)!important}
.products .cbp-vm-view-grid .cbp-vm-details,.products .cbp-vm-view-grid .tags_ul{display:none!important;opacity:0!important;visibility:hidden!important}.products .cbp-vm-view-grid ul li .my_more1{display:inline-flex!important;opacity:0;visibility:hidden}.products .cbp-vm-view-grid ul li .li:hover .my_more1{opacity:1!important;visibility:visible!important}.products .cbp-vm-view-list .cbp-vm-details{display:block!important;opacity:1!important;visibility:visible!important;width:70%!important;height:40px!important;max-height:40px!important;overflow:hidden!important;line-height:20px!important;margin:5px 0!important}.products .cbp-vm-view-list .tags_ul{display:block!important}@media(max-width:768px){.products .cbp-vm-view-grid ul li .my_more1{display:none!important}.products .cbp-vm-view-grid .cbp-vm-details{display:none!important}.products .cbp-vm-view-list .cbp-vm-details{width:100%!important}}
.boang-contact-map{margin-top:35px!important;position:relative!important;overflow:hidden!important}.boang-contact-map-inner{width:100%!important;overflow:hidden!important;background:#f7f7f7!important}.boang-contact-map-inner iframe{display:block!important;width:100%!important;height:450px!important;border:0!important}.boang-map-link{display:inline-block!important;margin-top:10px!important;color:var(--boang-accent)!important;text-decoration:underline!important}@media(max-width:768px){.boang-contact-map{margin-top:25px!important}.boang-contact-map-inner iframe{height:300px!important}}
.header_section .iconfont,.top_quote .iconfont,#footer .iconfont{color:var(--boang-accent)!important;fill:var(--boang-accent)!important;margin-right:6px!important;vertical-align:middle!important}.footer_con .footer-contact-row{display:flex!important;align-items:center!important;gap:6px!important}.footer_con li a{display:flex!important;align-items:center!important;gap:6px!important}.footer_con li a .iconfont{margin-right:0!important}
/* Footer: social icons spaced 10px apart */
#footer .footer_con .footer_sns a{margin:0 10px 0 0!important}
#footer .footer_con .footer_sns a:last-child{margin-right:0!important}
/* Footer: bold all footer navigation menu items (Follow Us / Hot Tags / Products columns) */
#footer .ul.footer_follow li a,
#footer .ul.footer_tags li a,
#footer .ul.footer_pro li a{font-weight:700!important}
/* Right-side fixed contact panel (phone/email/whatsapp/QR): the sitewide
   a:hover{color:accent} rule was turning this panel's white text yellow on
   its own yellow background on hover, making it unreadable. Keep it white. */
.fixed-contact li a:hover,
.fixed-contact li:hover a,
.fixed-contact li:hover i{color:#fff!important}
/* Product detail spec table: bold labels, and the row order reversed
   (last row first, in sequence) as requested. */
.pro_table ul{display:flex!important;flex-direction:column-reverse!important}
.pro_table ul li{float:none!important;width:100%!important}
.pro_table ul li p{font-weight:700!important}
@media(max-width:768px){.boang-mobile-bottom{display:block!important;position:fixed!important;left:0!important;right:0!important;bottom:0!important;height:62px!important;padding:0!important;overflow:visible!important;background:#fff!important;box-shadow:2px 0 20px rgba(0,0,0,.08)!important}.boang-mobile-bottom>a{position:absolute!important;top:0!important;width:20%!important;max-width:20%!important;height:62px!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;flex-direction:column!important;padding:7px 4px 4px!important;box-sizing:border-box!important}.boang-mobile-bottom>a:nth-child(1){left:0!important}.boang-mobile-bottom>a:nth-child(2){left:20%!important}.boang-mobile-bottom>a:nth-child(3){left:60%!important}.boang-mobile-bottom>a:nth-child(4){left:80%!important}.boang-mobile-bottom>a:nth-child(3) .iconfont{position:absolute!important;left:50%!important;top:-10px!important;transform:translateX(-50%)!important;width:48px!important;height:48px!important;line-height:48px!important;border-radius:50%!important;background:var(--boang-accent)!important;color:#111!important;box-shadow:0 3px 12px rgba(0,0,0,.16)!important;font-size:24px!important}.boang-mobile-bottom>a:nth-child(3) b{margin-top:38px!important}.boang-mobile-bottom>a .iconfont{display:block!important;width:32px!important;height:32px!important;line-height:32px!important;font-size:20px!important;color:var(--boang-accent)!important}.boang-mobile-bottom>a b{display:block!important;color:#666!important;font-size:12px!important;line-height:12px!important;font-weight:400!important;text-transform:capitalize!important}.boang-mobile-bottom>a:hover,.boang-mobile-bottom>a:focus{background:#fff!important}.boang-mobile-bottom>a:hover b,.boang-mobile-bottom>a:focus b{color:var(--boang-accent)!important}}
.progress-wrap{right:.3rem!important;bottom:80px!important;width:.46rem!important;height:.46rem!important}.progress-wrap::after{color:var(--boang-accent)!important}.progress-wrap svg.progress-circle path{stroke:var(--boang-accent)!important}@media(max-width:768px){.progress-wrap{right:.15rem!important;bottom:60px!important}}
/* Desktop product sidebar stays in view while the right-side content scrolls, like Theia Sticky Sidebar. */
/* (4.1.4) sidebar sticky rules live in the 4.1.4 block at the end of this file */

/* ==========================================================
   BOANG 3.4.3 — homepage corrections from the legacy Zend source
   ========================================================== */
@font-face{font-family:"FontAwesome";src:url("../font/fontawesome-webfont.woff2") format("woff2"),url("../font/fontawesome-webfont.woff") format("woff"),url("../font/fontawesome-webfont.ttf") format("truetype"),url("../font/fontawesome-webfont.eot") format("embedded-opentype");font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:"iconfont";src:url("../font/iconfont.woff2") format("woff2"),url("../font/iconfont.woff") format("woff"),url("../font/iconfont.ttf") format("truetype");font-weight:normal;font-style:normal;font-display:swap}

/* 1) The legacy icon fonts are now local and all site UI icon glyphs use the yellow accent. */
.iconfont{font-family:"iconfont"!important}
.header_section .iconfont,.top_quote .iconfont,#footer .iconfont,.boang-mobile-bottom .iconfont{color:var(--boang-accent)!important}

/* 2) Desktop logo/navigation: keep both regions shrink-safe so the logo never sits over menu text. */
@media(min-width:992px){
  .boang-header .nav_section .main{display:flex!important;align-items:center!important;min-width:0!important}
  .boang-header #logo{flex:0 0 auto!important;min-width:0!important;margin-right:clamp(18px,2vw,42px)!important}
  .boang-header #logo img{display:block!important;width:auto!important;max-width:clamp(190px,18vw,280px)!important;height:auto!important;max-height:74px!important}
  .boang-header .nav_r{flex:1 1 auto!important;min-width:0!important;display:flex!important;justify-content:flex-end!important}
  .boang-header .header-navigation,.boang-header .main-navigation,.boang-header .main-navigation-inner{min-width:0!important}
  .boang-header .main-menu{white-space:nowrap!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;min-width:0!important}
  .boang-header .main-menu>li{flex:0 0 auto!important;margin-left:clamp(10px,1.1vw,28px)!important}
  .boang-header .main-menu>li:first-child{margin-left:0!important}
}
@media(min-width:992px) and (max-width:1250px){
  .boang-header #logo{margin-right:18px!important}
  .boang-header #logo img{max-width:190px!important;max-height:60px!important}
  .boang-header .main-menu>li{margin-left:10px!important}
  .boang-header .main-menu>li>a{font-size:14px!important}
}

/* 3) Legacy back-to-top location, moved 45px upward from 3.4.2. */
.progress-wrap{bottom:125px!important}
@media(max-width:768px){.progress-wrap{bottom:105px!important}}

/* 4) Homepage product/news images: constrain the desktop visual area like the legacy medium-sized cards. */
@media(min-width:769px){
  .home-page .news_section .img,
  .news_section .img{height:235px!important;overflow:hidden!important}
  .news_section .img img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important}
}
@media(max-width:768px){
  .news_section .img{height:auto!important;aspect-ratio:1.22!important;overflow:hidden!important}
  .news_section .img img{width:100%!important;height:100%!important;object-fit:cover!important}
}

/* 5) Remove the old blue Company Profile image tint and use the current yellow theme gradient. */
.about_section .about_text .about_title{background-image:linear-gradient(120deg,#D9A000 0%,#F5B800 55%,#FFD966 100%)!important;background-color:#F5B800!important}

/* 6) Homepage product-category tabs: equal width based on the widest label, centered when they fit. */
.cate_section .ah-tab{display:flex!important;align-items:stretch!important;justify-content:center!important;letter-spacing:normal!important}
.cate_section .ah-tab>.ah-tab-item{float:none!important;flex:0 0 var(--boang-tab-width,auto)!important;width:var(--boang-tab-width,auto)!important;min-width:var(--boang-tab-width,auto)!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;box-sizing:border-box!important}
.cate_section .ah-tab.boang-tabs-overflow{justify-content:flex-start!important}
.cate_section .ah-tab-item{white-space:nowrap!important}
@media(max-width:992px){
  .cate_section .ah-tab{padding-right:120px!important;justify-content:flex-start!important;overflow:hidden!important}
  .cate_section .ah-tab>.ah-tab-item{font-size:14px!important;padding:12px 15px!important}
}

/* 7) Read More hover: yellow background with readable text, never yellow-on-yellow. */
.pro_section .li .more,.news_section .more{color:#333!important}
.pro_section .li:hover .more,.pro_section .li .more:hover,.pro_section .li .more:focus,.pro_section .li .more:active,
.news_section .more:hover,.news_section .more:focus,.news_section .more:active{background:var(--boang-accent)!important;color:#fff!important;text-decoration:none!important}

/* 8) The social-share block stays inside the legacy footer contact column. */
#footer .footer_con .footer_sns{margin-top:14px!important}
#footer .footer_con .footer_sns a{display:inline-flex!important;align-items:center!important;justify-content:center!important;background:var(--boang-accent)!important;color:#fff!important;width:30px!important;height:30px!important;overflow:hidden!important;margin:0 10px 0 0!important;border-radius:5px!important;text-decoration:none!important}
#footer .footer_con .footer_sns a img{display:block!important;max-width:100%!important;max-height:100%!important;width:auto!important;height:auto!important}

/* ===== 3.4.3 — desktop page rail, pagination order, sidebar controls ===== */
@media (min-width:992px){
  /* Only containers that actually contain the sidebar use the two-column flex rail.
     Standalone page content (About/Contact and similar templates) remains a normal block. */
  .n_main>.container{display:block!important;}
  .n_main>.container:has(> .n_left){display:flex!important;gap:28px!important;align-items:flex-start;}
  .n_main>.container:has(> .n_left)>.n_left{flex:0 0 270px!important;width:270px!important;float:none!important;}
  .n_main>.container:has(> .n_left)>.n_right,
  .n_main>.container:has(> .n_left)>.n_right2{flex:1 1 auto!important;width:auto!important;min-width:0!important;float:none!important;}

  /* The breadcrumb and main content share the same .container rail. */
  .mbx_section>.container,
  .n_main>.container,
  .single_page>.container,
  .pro_page>.container{box-sizing:border-box!important;}

  /* WordPress outputs pagination items in document order. Use flex instead of legacy floats
     so 1, 2, 3, 4, 5 stay in that exact visual order on every desktop page. */
  .n_right .nav-links,
  .n_right2 .nav-links,
  .n_main>.container>.nav-links,
  .page_num .nav-links{display:flex!important;align-items:center!important;justify-content:flex-start!important;flex-wrap:wrap!important;gap:5px!important;}
  .n_right .nav-links .page-numbers,
  .n_right2 .nav-links .page-numbers,
  .n_main>.container>.nav-links .page-numbers,
  .page_num .nav-links .page-numbers{float:none!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;margin:0!important;min-width:40px!important;height:40px!important;padding:0 10px!important;box-sizing:border-box!important;}
  .n_right .nav-links .page-numbers.current,
  .n_right2 .nav-links .page-numbers.current,
  .page_num .nav-links .page-numbers.current{background:var(--boang-accent)!important;color:#111!important;}
}

/* Product Categories uses the same theme yellow as the rest of the rebuilt site. */
.n_left .nav_h4{background:var(--boang-accent)!important;color:#111!important;}

/* ==========================================================
   BOANG 3.5.6 — legacy-structure alignment fixes
   ========================================================== */
/* Content rail: .container's clearfix ::before/::after became flex items (and got the 28px gap),
   which pushed the sidebar and the right column 28px inside the breadcrumb/header rail. */
@media (min-width:992px){
  .n_main>.container:has(> .n_left)::before,
  .n_main>.container:has(> .n_left)::after{content:none!important;display:none!important}
}
/* Old pagination structure: .page_num > a + current <span>, same on every list page. */
.page_num{display:flex;flex-wrap:wrap;align-items:center;width:100%;margin:.3rem 0 0}
.page_num a,.page_num>span{float:none!important;margin:0 5px 5px 0!important;display:inline-flex!important;align-items:center;justify-content:center}
.page_num a.page_dots{pointer-events:none;background:transparent}
.page_num a i{line-height:1}
/* Product list: grid/list switch and Read More button are always visible (desktop and mobile). */
.cbp-vm-options{display:flex!important;justify-content:flex-start}
.cbp-vm-options a{display:flex!important}
.cbp-vm-options a i{font-size:18px;line-height:1;color:inherit}
.products .cbp-vm-view-grid ul li .my_more1{display:inline-flex!important;opacity:1!important;visibility:visible!important}
@media(max-width:768px){.products .cbp-vm-view-grid ul li .my_more1{display:inline-flex!important}.cbp-vm-options{display:flex!important}}
/* Sidebar tree: legacy <span> toggle. */
ul.mtree li>span{cursor:pointer}
/* Previous / next post (legacy .navigation). */
.page_detail .navigation{margin-top:.3rem}
/* Mobile: the legacy bottom bar leaves a 20% gap in the middle for the message button. */
@media(max-width:768px){
  .boang-leave-message-trigger{display:flex!important;visibility:visible!important;position:fixed!important;left:50%!important;right:auto!important;bottom:calc(14px + env(safe-area-inset-bottom,0px))!important;transform:translateX(-50%);width:52px;height:52px;padding:0!important;border-radius:50%!important;align-items:center;justify-content:center;z-index:77778!important}
  .boang-leave-message-trigger b{display:none!important}
  .boang-leave-message-trigger span{font-size:22px;line-height:1}
  .boang-leave-message:not([hidden]){display:block!important;visibility:visible!important;left:8px!important;right:8px!important;width:auto!important;bottom:84px!important;z-index:77779!important}
}

/* ==========================================================
   BOANG 3.5.7 — bug fixes: case hover colour, contact Send
   button, social icons, product tab container sizing
   ========================================================== */

/* 1. (4.1.2) Product Categories cards: widths come from Swiper itself — see the 4.1.2 block at the end of this file. */

/* 2. Project Cases hover: change back panel from blue to light theme yellow */
.case_section .back{
  background:rgba(245,184,0,.92)!important;
}
.case_section .back .inner,
.case_section ul li .title,
.case_section ul li p,
.case_section ul li .more{
  color:#111!important;
}
.case_section ul li .more{
  border-color:#111!important;
}
.case_section ul li .more:hover{
  background:#111!important;
  color:#F5B800!important;
}

/* 3. Contact page Send button: fix the span.ms_btn > button layout */
.mes_section .ms_btn,
.pro_inq .ms_btn,
.inquiry .ms_btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 28px!important;
  height:46px!important;
  line-height:46px!important;
  border-radius:30px!important;
  background:var(--boang-accent)!important;
  color:#111!important;
  cursor:pointer!important;
  border:0!important;
  font-size:16px!important;
  font-family:"GreycliffCF-Bold",sans-serif!important;
  text-transform:uppercase!important;
  overflow:hidden!important;
  position:relative!important;
}
.mes_section .ms_btn button,
.pro_inq .ms_btn button,
.inquiry .ms_btn button{
  background:transparent!important;
  border:0!important;
  color:#111!important;
  font-size:16px!important;
  font-family:"GreycliffCF-Bold",sans-serif!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
  padding:0!important;
  line-height:1!important;
}

/* 4. Footer social icons: hide broken legacy img; one FontAwesome glyph per link */
#footer .footer_con .footer_sns a{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  background:var(--boang-accent)!important;
  color:#fff!important;
  width:34px!important;
  height:34px!important;
  border-radius:6px!important;
  margin:0 10px 0 0!important;
  overflow:hidden!important;
  text-decoration:none!important;
  font-size:0!important; /* hide text name */
  position:relative!important;
}
#footer .footer_con .footer_sns a:last-child{margin-right:0!important}
/* Hide the broken legacy <img> inside sns links */
#footer .footer_con .footer_sns a img{
  display:none!important;
}
/* 4.1.2: the social glyph is printed once by PHP (<i>); the CSS ::before copies were removed (they drew a second icon on top). */

/* 5. Product-detail "Leave A Message" inquiry: give the panel a tinted
   background so the white input fields stand out, instead of white-on-white */
.pro_inq{
  background:#eef0f3!important;
  padding:28px!important;
  border-radius:10px!important;
}
.pro_inq .section_title{
  font-size:20px!important;
  font-weight:700!important;
  margin-bottom:6px!important;
  color:#171717!important;
}
.pro_inq .text{
  background:transparent!important;
  border-bottom:0!important;
  color:#666!important;
  margin-bottom:16px!important;
}
.pro_inq .inquiry{
  background:transparent!important;
}
.pro_inq .boang-inquiry-form input,
.pro_inq .boang-inquiry-form textarea{
  background:#fff!important;
  border:1px solid #d8dbe0!important;
  border-radius:8px!important;
  padding:14px 16px!important;
  font-size:14px!important;
  color:#333!important;
  box-shadow:0 1px 2px rgba(0,0,0,.04)!important;
  margin-bottom:14px!important;
}
.pro_inq .boang-inquiry-form textarea{
  min-height:120px!important;
  resize:vertical!important;
}
.pro_inq .boang-inquiry-form input:focus,
.pro_inq .boang-inquiry-form textarea:focus{
  border-color:#F5B800!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(245,184,0,.18)!important;
}
.pro_inq .ms_btn{
  margin-top:4px!important;
}

/* 6. Product inquiry: the form auto-attaches the current product name (sent
   as a hidden field with the submission). Instead of leaving that as a bare
   unstyled link/underline, show it as a small clickable light-yellow "Subject"
   chip above the form, linking to the product page. */
.pro-inq-subject{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  max-width:100%!important;
  background:#fdf3d2!important;
  border:1px solid #F5B800!important;
  border-radius:20px!important;
  padding:8px 16px!important;
  margin-bottom:14px!important;
  font-size:13px!important;
  line-height:1.4!important;
  color:#5a4600!important;
  text-decoration:none!important;
  white-space:normal!important;
  word-break:break-word!important;
  transition:background .2s ease,box-shadow .2s ease!important;
}
.pro-inq-subject span{
  font-weight:700!important;
  color:#171717!important;
  flex:0 0 auto!important;
}
.pro-inq-subject:hover,
.pro-inq-subject:focus{
  background:#F5B800!important;
  color:#171717!important;
  box-shadow:0 2px 8px rgba(245,184,0,.35)!important;
}
.pro-inq-subject:active{
  background:#D9A000!important;
}

/* 7. Floating "Leave A Message" popup (desktop bottom-right button and the
   mobile bottom-nav center button) — redesigned to match the reference:
   icon + title header, description, boxed input fields with trailing icons,
   full-width yellow submit button. Fields get a light background/border so
   they're clearly distinct from the white popup body. */
.boang-leave-message{
  border-radius:14px!important;
  overflow:hidden!important;
  border:0!important;
  box-shadow:0 12px 40px rgba(0,0,0,.18)!important;
}
.boang-popup-head{
  background:var(--boang-accent)!important;
  color:#171717!important;
  padding:16px 18px!important;
  gap:10px!important;
}
.boang-popup-head strong{
  font-size:15px!important;
  letter-spacing:.3px!important;
  text-transform:uppercase!important;
  flex:1!important;
}
.boang-popup-icon{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:28px!important;
  height:28px!important;
  border-radius:50%!important;
  background:rgba(255,255,255,.55)!important;
  font-size:14px!important;
  flex:0 0 auto!important;
}
.boang-popup-close{
  color:#171717!important;
  font-size:22px!important;
}
.boang-popup-body{
  background:#fff!important;
  padding:18px!important;
}
.boang-popup-desc{
  font-size:12.5px!important;
  line-height:1.6!important;
  color:#777!important;
  margin:0 0 14px!important;
}
.boang-float-form{padding:0!important;}
.boang-float-form label{display:none!important;}
.boang-float-field{
  position:relative!important;
  margin-bottom:12px!important;
}
.boang-float-field input,
.boang-float-field textarea{
  width:100%!important;
  background:#f7f8f9!important;
  border:1px solid #e3e5e8!important;
  border-radius:6px!important;
  padding:12px 36px 12px 12px!important;
  font-size:13px!important;
  color:#333!important;
  margin:0!important;
  box-sizing:border-box!important;
}
.boang-float-field textarea{
  min-height:90px!important;
  resize:vertical!important;
}
.boang-float-field input:focus,
.boang-float-field textarea:focus{
  background:#fff!important;
  border-color:#F5B800!important;
  outline:none!important;
  box-shadow:0 0 0 3px rgba(245,184,0,.15)!important;
}
.boang-field-icon{
  position:absolute!important;
  right:12px!important;
  top:14px!important;
  font-style:normal!important;
  font-size:14px!important;
  color:#b7bcc2!important;
  pointer-events:none!important;
}
.boang-float-field--textarea .boang-field-icon{
  top:14px!important;
}
.boang-float-form .boang-yellow-button,
.boang-float-form button[type="submit"]{
  width:100%!important;
  border:0!important;
  border-radius:30px!important;
  padding:13px!important;
  font-size:14px!important;
  font-weight:700!important;
  text-transform:uppercase!important;
  letter-spacing:.3px!important;
  background:var(--boang-accent)!important;
  color:#171717!important;
  cursor:pointer!important;
  margin-top:2px!important;
}
.boang-float-form .boang-yellow-button:hover,
.boang-float-form button[type="submit"]:hover{
  background:var(--boang-accent-dark)!important;
}
.boang-float-form .form-result{
  margin-top:8px!important;
  font-size:12px!important;
  color:#666!important;
}

/* 8. Footer Privacy Policy link: match the copyright text color beside it */
#footer .footer_bottom .cop a.boang-privacy-link{
  color:inherit!important;
  text-decoration:underline!important;
}
#footer .footer_bottom .cop a.boang-privacy-link:hover{
  color:var(--boang-accent)!important;
}

/* ==========================================================
   BOANG 3.6.0 — language switch (flags), inquiry pop-up,
   server-verified captcha, E-CATALOGUE empty download state
   ========================================================== */
:root{--bq-y:#F5B800;--bq-yd:#D9A000;--bq-ink:#1b1b1b;--bq-soft:#FFF8E1}

/* --- language switch: two links, flag + language name, no dropdown --- */
.lang-switch{display:inline-flex;align-items:center;gap:6px;position:relative;z-index:1001}
.lang-switch .lang-item{display:inline-flex;align-items:center;gap:7px;padding:5px 11px;border-radius:999px;color:inherit;text-decoration:none;font-size:14px;line-height:1;border:1px solid transparent;white-space:nowrap;transition:background .15s,border-color .15s}
.lang-switch .lang-item:hover{background:rgba(245,184,0,.18)}
.lang-switch .lang-item.current{background:var(--bq-y);color:#111;border-color:var(--bq-yd);font-weight:600}
.lang-switch .lang-flag{display:block;width:26px;height:18px;border-radius:3px;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.lang-switch.lang-mobile{display:flex;width:100%;gap:8px;margin:6px 0}
.lang-switch.lang-mobile .lang-item{flex:1;justify-content:center;padding:10px 8px;border-color:rgba(0,0,0,.12);background:#fff;color:#222}
.lang-switch.lang-mobile .lang-item.current{background:var(--bq-y);border-color:var(--bq-yd)}
.nav_con .lang-switch.lang-mobile{margin:10px 0 0}

/* --- inquiry trigger: bottom-right on desktop --- */
.bq-trigger{position:fixed;right:24px;bottom:24px;z-index:10019;display:inline-flex;align-items:center;gap:10px;height:58px;padding:0 24px 0 18px;border:0;border-radius:999px;background:var(--bq-y);color:var(--bq-ink);font:600 15px/1 inherit;font-family:inherit;cursor:pointer;box-shadow:0 8px 24px rgba(217,160,0,.45);transition:transform .15s,background .15s,box-shadow .15s}
.bq-trigger:hover{background:var(--bq-yd);transform:translateY(-2px);box-shadow:0 12px 28px rgba(217,160,0,.55)}
.bq-trigger-icon{display:inline-flex}
.bq-trigger b{font-weight:600;letter-spacing:.2px}

/* --- modal --- */
.bq-modal[hidden]{display:none!important}
.bq-modal{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:16px}
.bq-backdrop{position:absolute;inset:0;background:rgba(20,16,0,.55);backdrop-filter:blur(2px)}
.bq-dialog{position:relative;width:min(640px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;background:#fff;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.35);animation:bqIn .22s ease-out}
@keyframes bqIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.bq-head{display:flex;align-items:center;gap:14px;padding:22px 28px;background:var(--bq-y);color:var(--bq-ink);position:sticky;top:0;z-index:2;border-radius:18px 18px 0 0}
.bq-head strong{flex:1;font-size:24px;line-height:1.2;letter-spacing:.5px;text-transform:uppercase;font-weight:800}
.bq-head-icon{display:inline-flex}
.bq-head-icon svg{width:34px;height:34px}
.bq-close{width:42px;height:42px;border:0;border-radius:50%;background:rgba(0,0,0,.12);color:var(--bq-ink);font-size:30px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;transition:background .15s}
.bq-close:hover{background:rgba(0,0,0,.25)}
.bq-body{padding:28px 32px 34px}
.bq-desc{margin:0 0 22px;font-size:17px;line-height:1.7;color:#555}
.bq-form{display:flex;flex-direction:column;gap:18px}

/* fields: required ones are visibly different (yellow bar + tint + star), optional stay plain */
.bq-field{position:relative;border:1px solid #d9d9d9;border-radius:10px;background:#fff;transition:border-color .15s,box-shadow .15s}
.bq-field--req{border-color:#e6c34d;border-left:5px solid var(--bq-yd);background:var(--bq-soft)}
.bq-field input,.bq-field textarea{width:100%;border:0;outline:0;background:transparent;font:400 17px/1.5 inherit;font-family:inherit;color:#222;padding:0 56px 0 20px;height:64px;box-sizing:border-box;border-radius:10px}
.bq-field textarea{height:auto;min-height:150px;padding:20px 56px 20px 20px;resize:vertical;display:block}
.bq-field input::placeholder,.bq-field textarea::placeholder{color:#8a8a8a}
.bq-field:focus-within{border-color:var(--bq-y);box-shadow:0 0 0 4px rgba(245,184,0,.28)}
.bq-field.is-bad{border-color:#d93025;box-shadow:0 0 0 3px rgba(217,48,37,.16)}
.bq-fi{position:absolute;right:18px;top:20px;font-style:normal;font-size:22px;line-height:1;color:#b7b7b7;pointer-events:none}
.bq-field--req .bq-fi{color:var(--bq-yd)}

/* captcha row */
.bq-captcha-row{display:flex;align-items:center;gap:14px;background:var(--bq-soft);padding-right:10px;max-width:100%}
.bq-captcha-row .bq-captcha-input{flex:1 1 auto;min-width:0;padding:0 8px 0 20px;letter-spacing:6px;font-weight:700;font-size:20px}
.bq-captcha-row .bq-captcha-input::placeholder{letter-spacing:0;font-weight:400;font-size:17px}
.bq-captcha-img{position:relative;flex:0 0 auto;width:132px;height:48px;padding:0;border:1px solid #e6c34d;border-radius:8px;background:#FFF6D6;cursor:pointer;overflow:hidden}
.bq-captcha-img img{display:block;width:132px;height:48px}
.bq-captcha-refresh{position:absolute;right:2px;bottom:1px;font-size:13px;line-height:1;color:#7a5d00;background:rgba(255,255,255,.7);border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center}
.bq-captcha-row.is-loading .bq-captcha-img{opacity:.5}

.bq-submit{align-self:flex-start;min-width:200px;height:60px;padding:0 44px;border:0;border-radius:999px;background:var(--bq-y);color:var(--bq-ink);font:800 18px/1 inherit;font-family:inherit;letter-spacing:1px;cursor:pointer;box-shadow:0 8px 20px rgba(217,160,0,.35);transition:background .15s,transform .15s}
.bq-submit:hover{background:var(--bq-yd);transform:translateY(-1px)}
.bq-submit:disabled{opacity:.6;cursor:wait;transform:none}
.bq-result{min-height:22px;font-size:15px;line-height:1.5}
.bq-result.is-ok{color:#1e7d32}.bq-result.is-err{color:#d93025}
body.bq-lock{overflow:hidden}

/* contact page form captcha reuses the same pieces */
.con_mes .bq-captcha-row{margin:0 0 16px}
.con_mes .bq-captcha-row .bq-captcha-input{height:50px;font-size:16px}

/* --- mobile: trigger sits in the gap in the middle of the bottom bar --- */
@media(max-width:768px){
  .bq-trigger{left:50%;right:auto;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);width:56px;height:56px;padding:0;justify-content:center;z-index:77778}
  .bq-trigger:hover{transform:translateX(-50%)}
  .bq-trigger b{display:none}
  .bq-modal{align-items:flex-end;padding:0}
  .bq-dialog{width:100%;max-height:94vh;max-height:94dvh;border-radius:20px 20px 0 0}
  .bq-head{padding:18px 20px;border-radius:20px 20px 0 0}.bq-head strong{font-size:20px}
  .bq-body{padding:20px 18px calc(26px + env(safe-area-inset-bottom,0px))}
  .bq-desc{font-size:15px}
  .bq-field input{height:58px;font-size:16px}
  .bq-field textarea{font-size:16px;min-height:130px}
  .bq-submit{width:100%;align-self:stretch}
  .bq-captcha-img,.bq-captcha-img img{width:112px}
}

/* --- Arabic (rtl) --- */
.boang-lang-ar .bq-dialog,.boang-lang-ar .bq-trigger{direction:rtl}
.boang-lang-ar .bq-field input,.boang-lang-ar .bq-field textarea{padding:0 20px 0 56px;text-align:right}
.boang-lang-ar .bq-field textarea{padding:20px 20px 20px 56px}
.boang-lang-ar .bq-fi{right:auto;left:18px}
.boang-lang-ar .bq-field--req{border-left:1px solid #e6c34d;border-right:5px solid var(--bq-yd)}
.boang-lang-ar .bq-captcha-row{padding-right:0;padding-left:10px}
.boang-lang-ar .bq-captcha-row .bq-captcha-input{padding:0 20px 0 8px}
.boang-lang-ar .bq-submit{align-self:flex-end}

/* --- E-CATALOGUE: button always visible, greyed out until a file is attached --- */
.down_load .my_more1{display:inline-flex!important;visibility:visible!important;opacity:1!important}
.down_load .my_more1.is-empty{background:#d4d4d4!important;border-color:#d4d4d4!important;color:#8a8a8a!important;cursor:not-allowed;pointer-events:none}

/* --- 3.6.1: top bar – one horizontal line, compact language switch that never covers "Request A Quote" --- */
@media(min-width:769px){
  .header_section .header_right{display:flex!important;align-items:center;flex-wrap:nowrap;height:48px;float:right}
  .header_section .header_right>*{float:none!important;flex:0 0 auto}
  .header_section .header_right .search_web{margin:0 22px 0 0!important}
  .header_section .header_right .top_quote{display:inline-flex!important;align-items:center;line-height:1!important;height:48px;white-space:nowrap;margin:0 22px 0 0!important}
  .header_section .header_right .top_quote .iconfont{margin-right:6px!important}
  .lang-switch.lang-desktop{gap:4px;margin:0!important;align-items:center}
  .lang-switch.lang-desktop .lang-item{gap:5px;padding:4px 9px;font-size:13px;line-height:1;height:28px;box-sizing:border-box}
  .lang-switch.lang-desktop .lang-flag{width:20px;height:14px}
}

/* ==========================================================
   BOANG 4.1.2
   ========================================================== */

/* --- Footer "Contact Us": address / tel / e-mail / WhatsApp on one icon column + one text column --- */
#footer .footer_con ul.footer-contact-list{margin:0 0 .25rem!important;padding:0!important;list-style:none!important}
#footer .footer_con ul.footer-contact-list>li.fc-row{position:static!important;display:block!important;padding:0!important;margin:0 0 12px!important;line-height:26px!important}
#footer .footer_con ul.footer-contact-list>li.fc-row:after{content:none!important;display:none!important}
#footer .footer_con .fc-link{display:flex!important;align-items:flex-start!important;gap:10px!important;line-height:26px!important;text-transform:none!important;text-decoration:none}
#footer .footer_con .fc-link .iconfont{flex:0 0 24px!important;width:24px!important;margin:0!important;text-align:center!important;line-height:26px!important;font-size:18px}
#footer .footer_con .fc-link .fc-text{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}

/* --- Home "Product Categories" cards: exactly 4 visible, one card per click, arrows outside the cards --- */
.cate_section .pro_section .button_outside{position:relative!important;padding:0 64px!important}
.cate_section .pro_section .button_outside>.swiper-container.pro_scrollbar{width:100%!important;max-width:100%!important;margin:0 auto!important;padding:8px 0 26px!important;overflow:hidden!important}
.cate_section .pro_section .button_outside .swiper-wrapper{gap:0!important}
.cate_section .pro_section .button_outside .swiper-slide{padding:0!important;box-sizing:border-box!important}
.cate_section .pro_section .button_outside>.swiper-button-prev,
.cate_section .pro_section .button_outside>.swiper-button-next{position:absolute!important;top:50%!important;margin-top:-24px!important;width:48px!important;height:48px!important;z-index:5!important;display:flex!important;cursor:pointer}
.cate_section .pro_section .button_outside>.swiper-button-prev{left:0!important;right:auto!important}
.cate_section .pro_section .button_outside>.swiper-button-next{right:0!important;left:auto!important}
.cate_section .pro_section .button_outside>.swiper-button-disabled{opacity:.35!important;cursor:default!important}
.cate_section .pro_section .button_outside>.swiper-button-lock{display:none!important}
@media(max-width:991px){
  .cate_section .pro_section .button_outside{padding:0 52px!important}
  .cate_section .pro_section .button_outside>.swiper-button-prev,
  .cate_section .pro_section .button_outside>.swiper-button-next{width:40px!important;height:40px!important;margin-top:-20px!important}
}
@media(max-width:575px){
  .cate_section .pro_section .button_outside{padding:0 44px!important}
  .cate_section .pro_section .button_outside>.swiper-button-prev,
  .cate_section .pro_section .button_outside>.swiper-button-next{width:36px!important;height:36px!important;margin-top:-18px!important}
}

/* --- Blog sidebar (legacy blogleft, .n_left2) uses the same yellow header as the product sidebar --- */
.n_left2 .nav_h4{background:var(--boang-accent)!important;color:#111!important}
.n_left2 ul.mtree{opacity:1!important;visibility:visible!important;margin:0!important}
.n_left2 ul.mtree>li>a{color:#333!important}
.n_left2 ul.mtree>li>a:hover{color:var(--boang-accent-dark,#D9A000)!important}

/* ==========================================================
   BOANG 4.1.3
   ========================================================== */

/* --- 1. Home category tabs: font shrinks (see rebuild.js) until all four labels are fully visible on one line --- */
@media(min-width:993px){
  .cate_section .ah-tab>.ah-tab-item{font-size:var(--boang-tab-fs,.2rem)!important;padding-left:12px!important;padding-right:12px!important}
  .cate_section .ah-tab>.ah-tab-item img{max-width:.4rem!important;margin-right:8px!important;flex:0 0 auto}
}

/* --- 2. Home factory slider: arrows sit outside the pictures (left of the first, right of the last) --- */
.fac_section .button_outside{position:relative!important;padding:0 64px!important}
.fac_section .button_outside>.boang-factory-slider{width:100%!important;max-width:100%!important;margin:0 auto!important}
.fac_section .button_outside>.swiper-button-prev,
.fac_section .button_outside>.swiper-button-next{position:absolute!important;top:50%!important;margin-top:-24px!important;width:48px!important;height:48px!important;z-index:5!important;display:flex!important;cursor:pointer}
.fac_section .button_outside>.swiper-button-prev{left:0!important;right:auto!important}
.fac_section .button_outside>.swiper-button-next{right:0!important;left:auto!important}
.fac_section .button_outside>.swiper-button-disabled{opacity:.35!important;cursor:default!important}
@media(max-width:991px){
  .fac_section .button_outside{padding:0 52px!important}
  .fac_section .button_outside>.swiper-button-prev,.fac_section .button_outside>.swiper-button-next{width:40px!important;height:40px!important;margin-top:-20px!important}
}
@media(max-width:575px){
  .fac_section .button_outside{padding:0 44px!important}
  .fac_section .button_outside>.swiper-button-prev,.fac_section .button_outside>.swiper-button-next{width:36px!important;height:36px!important;margin-top:-18px!important}
}

/* --- 3. Home "Project Cases" hover panel: text is white --- */
.case_section .back .inner,
.case_section ul li .title,
.case_section ul li p,
.case_section ul li .more{color:#fff!important}
.case_section ul li .more{border:2px solid #fff!important;background-color:transparent!important}
.case_section ul li .more:hover{background-color:#fff!important;border-color:#fff!important;color:#F5B800!important}

/* --- 4. Bottom-right "Leave A Message" button: smaller, so it hides less content --- */
.bq-trigger{right:16px!important;bottom:16px!important;height:40px!important;padding:0 14px 0 11px!important;gap:6px!important;font-size:13px!important;line-height:1!important;box-shadow:0 4px 14px rgba(217,160,0,.4)!important}
.bq-trigger-icon svg{width:18px!important;height:18px!important}
.bq-trigger:hover{transform:none!important}

/* --- 5. Project Cases page: cards fill the grid strictly left-to-right, row by row (no float stacking) --- */
.case ul{display:flex!important;flex-wrap:wrap!important;align-items:stretch!important}
.case ul::before,.case ul::after{content:none!important;display:none!important}
.case ul li{float:none!important;box-sizing:border-box!important;display:flex!important}
.case ul li .li{width:100%!important;display:flex!important;flex-direction:column!important}
.case ul li .li .img{flex:0 0 auto!important;aspect-ratio:4/3!important}
.case ul li .li .img img{width:100%!important;height:100%!important;object-fit:cover!important;display:block}
.case ul li .li .text{flex:1 1 auto!important}

/* --- 7. Top bar above the logo (tel, e-mail, search, quote, language): bold --- */
.header_section,
.header_section a,
.header_section .top_con,
.header_section .top_quote,
.header_section .search_btn,
.header_section .form-control,
.header_section .lang-switch .lang-item,
.header_section .lang-switch .lang-item span{font-weight:700!important}
.header_section .form-control::placeholder{font-weight:700}

/* --- 8. Phones: product-grid "Read More" stays on one line --- */
@media(max-width:768px){
  .products .cbp-vm-view-grid ul li .my_more1,
  .cbp-vm-view-grid ul li .my_more1{white-space:nowrap!important;width:100%!important;box-sizing:border-box!important;padding:0 38px 0 8px!important;font-size:13px!important;letter-spacing:0!important;line-height:1!important;min-width:0!important}
  .cbp-vm-view-grid ul li .my_more1:after{width:34px!important}
}

/* --- 9. Sidebar accordion on phones/tablets: header tap collapses / expands (arrow flips) --- */
@media(max-width:992px){
  .modules .block .unfold{cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
  .modules .block .unfold::after{transition:transform .2s ease}
  .modules .block .unfold.is-collapsed::after{transform:rotate(180deg)}
}

/* ==========================================================
   BOANG 4.1.4
   ========================================================== */
#logo img{height:auto}

/* --- Sidebars (product pages, product detail, news, downloads, sitemap, blog): 270px wide and they follow the page while scrolling.
       --boang-sticky-top is kept in sync with the real header height by rebuild.js. --- */
@media(min-width:992px){
  .n_main .n_left,.n_main>.container>#main.n_left{
    position:sticky!important;top:var(--boang-sticky-top,150px)!important;align-self:flex-start!important;height:max-content!important;
    float:none!important;flex:0 0 270px!important;width:270px!important;max-width:270px!important;z-index:2}
  .n_main .n_left .theiaStickySidebar,.n_main .n_left2 .theiaStickySidebar{position:static!important;top:auto!important}
  /* blog: the sidebar sits on the right (legacy), 15px wider than the old 25% */
  .n_main--blog>.container{display:flex!important;flex-direction:row-reverse!important;align-items:flex-start!important;gap:28px!important}
  .n_main--blog>.container>.n_left2{
    position:sticky!important;top:var(--boang-sticky-top,150px)!important;align-self:flex-start!important;height:max-content!important;
    float:none!important;flex:0 0 calc(25% + 15px)!important;width:calc(25% + 15px)!important;max-width:calc(25% + 15px)!important;z-index:2}
  .n_main--blog>.container>.n_right2{float:none!important;flex:1 1 auto!important;width:auto!important;min-width:0!important;padding-right:0!important}
}
@media(max-width:991px){
  .n_main .n_left,.n_main .n_left2{position:static!important;width:100%!important;max-width:100%!important;height:auto!important}
}
.n_left.is-scrollable,.n_left2.is-scrollable{scrollbar-width:thin;scrollbar-color:#d9a000 transparent;overscroll-behavior:contain}
.n_left.is-scrollable::-webkit-scrollbar,.n_left2.is-scrollable::-webkit-scrollbar{width:5px}
.n_left.is-scrollable::-webkit-scrollbar-thumb,.n_left2.is-scrollable::-webkit-scrollbar-thumb{background:#d9a000;border-radius:3px}

/* 4.1.7 — desktop home category tabs: 4 per view + arrows (<=992px unchanged) */
@media(min-width:993px){
  .cate_section .ah-tab-wrapper{position:relative}
  .cate_section .ah-tab-wrapper.boang-tabs-many{padding:0 62px}
  .cate_section .ah-tab-wrapper .ah-tab{display:flex!important;justify-content:flex-start!important;overflow:hidden!important;padding-right:0!important;white-space:nowrap!important;letter-spacing:normal!important}
  .cate_section .ah-tab-wrapper .ah-tab::before,.cate_section .ah-tab-wrapper .ah-tab::after{display:none!important}
  .cate_section .ah-tab-wrapper .ah-tab-overflow-wrapper{display:none!important}
  .cate_section .ah-tab-wrapper .ah-tab>.ah-tab-item{flex:1 1 0!important;width:auto!important;min-width:0!important;margin:0!important;padding:12px 10px!important;white-space:normal!important;line-height:1.25!important;text-align:center!important;font-size:clamp(13px,1.05vw,17px)!important;justify-content:center!important;align-items:center!important;box-sizing:border-box!important}
  .cate_section .ah-tab-wrapper.boang-tabs-many .ah-tab>.ah-tab-item{flex:0 0 25%!important;width:25%!important;min-width:25%!important}
  .cate_section .ah-tab-wrapper .ah-tab>.ah-tab-item img{max-width:.4rem!important;margin-right:8px!important;flex:0 0 auto}
  .cate_section .ah-tab-wrapper .boang-tab-prev,.cate_section .ah-tab-wrapper .boang-tab-next{display:none!important}
  .cate_section .ah-tab-wrapper.boang-tabs-many .boang-tab-prev,.cate_section .ah-tab-wrapper.boang-tabs-many .boang-tab-next{display:flex!important;position:absolute!important;top:50%!important;margin:-24px 0 0!important;width:48px!important;height:48px!important;float:none!important;z-index:5!important;cursor:pointer;border:0;padding:0}
  .cate_section .ah-tab-wrapper.boang-tabs-many .boang-tab-prev{left:0!important;right:auto!important}
  .cate_section .ah-tab-wrapper.boang-tabs-many .boang-tab-next{right:0!important;left:auto!important}
  .cate_section .ah-tab-wrapper .boang-tab-prev.swiper-button-disabled,.cate_section .ah-tab-wrapper .boang-tab-next.swiper-button-disabled{opacity:.35!important;cursor:default!important}
}
@media(max-width:992px){.cate_section .ah-tab-wrapper .boang-tab-prev,.cate_section .ah-tab-wrapper .boang-tab-next{display:none!important}}