/* Header */
.site-header{position:sticky;top:0;z-index:100;height:var(--header);background:#fff;border-bottom:1px solid var(--line)}
.site-header__row{display:flex;align-items:center;justify-content:space-between;height:100%;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px}
.brand__mark{width:38px;height:38px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-size:13px}
.menu{display:flex;gap:2px}
.menu__item{position:relative}
.menu__link{display:block;padding:9px 14px;font-size:14px;font-weight:500;color:var(--muted);border-radius:var(--r)}
.menu__link:hover,.menu__link.active{color:var(--primary);background:var(--bg)}
.menu__sub{position:absolute;top:calc(100% + 6px);left:0;min-width:210px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(6px);transition:.2s}
.menu__item:hover .menu__sub{opacity:1;visibility:visible;transform:none}
.menu__sub a{display:block;padding:9px 12px;font-size:14px;color:var(--muted);border-radius:var(--r)}
.menu__sub a:hover{background:var(--bg);color:var(--primary)}
.header-tools{display:flex;align-items:center;gap:10px}
.lang-btn{border:none;background:none;font-size:13px;color:var(--muted);cursor:pointer;padding:6px 10px;border-radius:var(--r)}
.lang-btn:hover{background:var(--bg)}
.nav-toggle{display:none;width:42px;height:42px;border:none;background:var(--bg);border-radius:var(--r);cursor:pointer}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--text);margin:4px auto}

/* Hero */
.hero{position:relative;min-height:560px;display:grid;align-items:center;color:#fff;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero__shade{position:absolute;inset:0;background:linear-gradient(100deg,rgba(26,61,46,.93),rgba(26,61,46,.45))}
.hero__inner{position:relative;padding:90px 0}
.hero__title{font-family:var(--serif);font-size:clamp(2rem,4.5vw,3.4rem);line-height:1.12;max-width:12ch;margin-bottom:18px}
.hero__desc{max-width:480px;opacity:.92;margin-bottom:28px;font-size:16px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px}

/* Page banner */
.banner{padding:56px 0 48px;background:var(--white);border-bottom:1px solid var(--line)}
.banner--dark{background:var(--primary-dark);color:#fff;border:none}
.banner--dark .breadcrumb,.banner--dark .breadcrumb a,.banner--dark .lead{color:rgba(255,255,255,.7)}
.banner--dark .lead{opacity:1}

/* Category nav (flexihoo style) */
.cat-nav{background:var(--white);border-bottom:1px solid var(--line);padding:18px 0}
.cat-nav__grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.cat-nav__item{text-align:center;padding:16px 8px;border-radius:var(--r);border:1px solid transparent;transition:.2s}
.cat-nav__item:hover{border-color:var(--line);background:var(--bg)}
.cat-nav__icon{font-size:26px;margin-bottom:6px}
.cat-nav__name{font-size:12px;color:var(--muted);line-height:1.35}

/* Cards */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .2s}
.card:hover{box-shadow:var(--shadow)}
.card__thumb{aspect-ratio:4/3;background:var(--bg);overflow:hidden}
.card__thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .card__thumb img{transform:scale(1.04)}
.card__body{padding:18px}
.card__cat{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--primary);margin-bottom:6px;font-weight:600}
.card__name{font-size:15px;font-weight:600;margin-bottom:6px}
.card__desc{font-size:13px;color:var(--muted)}

/* Product hub (kasentex style big tiles) */
.hub-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.hub-tile{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;color:#fff}
.hub-tile img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
.hub-tile:hover img{transform:scale(1.06)}
.hub-tile__mask{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72),transparent 55%);display:flex;flex-direction:column;justify-content:flex-end;padding:22px}
.hub-tile__title{font-size:18px;font-weight:600}

/* List layout */
.with-sidebar{display:grid;grid-template-columns:220px 1fr;gap:36px;align-items:start}
.filter-box{position:sticky;top:calc(var(--header) + 20px);padding:20px;background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.filter-box__title{font-size:14px;font-weight:700;margin-bottom:14px}
.filter-box a{display:block;padding:9px 10px;font-size:14px;color:var(--muted);border-radius:var(--r)}
.filter-box a:hover,.filter-box a.active{background:var(--bg);color:var(--primary);font-weight:600}
.list-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--line);font-size:14px;color:var(--muted)}

/* Product detail */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.pd__zoom{position:relative}
.pd__gallery-main{position:relative;aspect-ratio:1;border-radius:var(--r);overflow:hidden;background:var(--bg);cursor:crosshair}
.pd__gallery-main img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.pd__zoom-lens{position:absolute;top:0;left:0;width:66.666%;height:66.666%;border:2px solid rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,0,0,.12),0 4px 16px rgba(0,0,0,.12);background:rgba(255,255,255,.2);pointer-events:none;opacity:0;transition:opacity .15s;z-index:2}
.pd__zoom.is-zooming .pd__zoom-lens{opacity:1}
.pd__zoom-pane{position:absolute;top:0;left:calc(100% + 16px);border:1px solid var(--line);border-radius:var(--r);background:#fff no-repeat center;box-shadow:var(--shadow);opacity:0;visibility:hidden;transition:opacity .15s,visibility .15s;z-index:5;pointer-events:none}
.pd__zoom.is-zooming .pd__zoom-pane{opacity:1;visibility:visible}
.pd__zoom-hint{position:absolute;right:12px;bottom:12px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(0,0,0,.12);display:flex;align-items:center;justify-content:center;font-size:16px;pointer-events:none;z-index:1}
.pd__lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:200;align-items:center;justify-content:center;padding:20px}
.pd__lightbox.open{display:flex}
.pd__lightbox img{max-width:100%;max-height:90vh;border-radius:var(--r)}
.pd__lightbox-close{position:absolute;top:18px;right:22px;width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:28px;line-height:1;cursor:pointer}
.pd__thumbs{display:flex;gap:8px;margin-top:10px}
.pd__thumb{width:68px;height:68px;border-radius:var(--r);overflow:hidden;border:2px solid transparent;padding:0;cursor:pointer;background:none}
.pd__thumb.on{border-color:var(--primary)}
.pd__thumb img{width:100%;height:100%;object-fit:cover}
.pd__name{font-family:var(--serif);font-size:1.85rem;margin-bottom:14px}
.pd__intro{color:var(--muted);margin-bottom:24px}
.spec{width:100%;border-collapse:collapse;margin-bottom:28px;font-size:14px}
.spec th,.spec td{padding:11px 0;border-bottom:1px solid var(--line);text-align:left}
.spec th{width:36%;color:var(--muted);font-weight:500}
.pd__btns{display:flex;gap:12px;flex-wrap:wrap}

/* Split block */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split__media{border-radius:var(--r);overflow:hidden;aspect-ratio:4/3}
.split__media img{width:100%;height:100%;object-fit:cover}

/* Features / steps / certs */
.box{padding:28px 22px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);text-align:center}
.box__num{width:36px;height:36px;margin:0 auto 14px;border-radius:50%;background:var(--primary);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.box__title{font-size:15px;font-weight:600;margin-bottom:6px}
.box__text{font-size:13px;color:var(--muted)}
.icon-box{text-align:left;padding:28px}
.icon-box__emoji{font-size:30px;margin-bottom:14px}

/* News */
.news-item{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.news-item__img{aspect-ratio:16/10;overflow:hidden}
.news-item__img img{width:100%;height:100%;object-fit:cover}
.news-item__body{padding:18px}
.news-item__meta{font-size:12px;color:var(--muted);margin-bottom:8px}
.news-item__tag{color:var(--primary);font-weight:600;margin-right:8px}
.news-item__title{font-size:15px;font-weight:600;line-height:1.45;margin-bottom:8px}
.news-item__excerpt{font-size:13px;color:var(--muted)}
.article{max-width:740px;margin:0 auto}
.article__hero{border-radius:var(--r);overflow:hidden;margin:28px 0;aspect-ratio:16/9}
.article__hero img{width:100%;height:100%;object-fit:cover}
.article__body p{color:var(--muted);margin-bottom:16px;line-height:1.8}

/* Forms */
.form-panel{padding:32px;background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.form{display:grid;gap:16px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.field textarea{min-height:130px;resize:vertical}
.field--captcha{margin-bottom:20px}
.captcha-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.captcha-box__img{border:1px solid var(--line);border-radius:var(--r);cursor:pointer;display:block}
.captcha-box__refresh{width:44px;height:48px;border:1px solid var(--line);border-radius:var(--r);background:#fff;font-size:20px;cursor:pointer;color:var(--muted);flex-shrink:0}
.captcha-box__refresh:hover{border-color:var(--primary);color:var(--primary)}
.captcha-box__input{flex:1;min-width:120px;max-width:160px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r);letter-spacing:.15em;text-transform:uppercase}
.contact-line{display:flex;gap:14px;margin-bottom:22px}
.contact-line__icon{width:42px;height:42px;border-radius:50%;background:rgba(45,90,68,.1);display:grid;place-items:center;flex-shrink:0}

/* Inquiry flow */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:40px}
.flow__step{padding:18px 12px;text-align:center;background:var(--white);border:1px solid var(--line);border-radius:var(--r);font-size:13px;font-weight:600}
.flow__step i{display:block;width:28px;height:28px;margin:0 auto 8px;border-radius:50%;background:var(--primary);color:#fff;font-style:normal;font-size:13px;line-height:28px}

/* CTA */
.cta{padding:64px 0;background:var(--primary-dark);color:#fff}
.cta__row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.cta__title{font-family:var(--serif);font-size:1.6rem;margin-bottom:8px}
.cta__desc{opacity:.85;font-size:15px}

/* Footer */
.footer{background:#131313;color:rgba(255,255,255,.65);font-size:14px}
.footer__main{padding:56px 0 36px}
.footer__grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:36px}
.footer__title{color:#fff;font-weight:700;margin-bottom:14px;font-size:14px}
.footer a{display:block;padding:5px 0}
.footer a:hover{color:#fff}
.footer .menu_list_follow_us{margin-top:20px}
.footer .menu_list_follow_us .footer__title{margin-bottom:12px}

/* UEESHOP share_toolbox — product detail share */
.share_toolbox{padding:0;margin-top:20px}
.share_toolbox ul{list-style:none;padding:0;margin:0}
.share_toolbox li{width:30px;margin-right:20px;display:inline-block;vertical-align:top}
.share_toolbox li a{width:inherit;height:30px;display:block;line-height:30px;white-space:nowrap;text-indent:-999px;overflow:hidden;background-image:url("https://ueeshop-static.ly200-cdn.com/static/v1/v6.0494/static/images/global/icon_follow_detail_cur.png");background-repeat:no-repeat;background-size:30px auto;transition:all .2s ease-in-out;cursor:pointer}
.share_toolbox li a:hover{background-image:url("https://ueeshop-static.ly200-cdn.com/static/v1/v6.0494/static/images/global/icon_follow_detail.png")}
.share_s_facebook{background-position:0 0}
.share_s_twitter{background-position:0 -30px}
.share_s_pinterest{background-position:0 -60px}
.share_s_linkedin{background-position:0 -90px}
.share_s_line{background-position:0 -420px}
.share_s_whatsapp{background-position:0 -450px}
.share_s_tumblr{background-position:0 -480px}

/* UEESHOP follow_us_list — footer official media */
.follow_us_list{padding:0;margin:0}
.follow_us_list ul{list-style:none;padding:0;margin:0}
.follow_us_list li{width:40px;margin-right:10px;display:inline-block}
.follow_us_list li>a{width:inherit;height:40px;display:block;line-height:40px;white-space:nowrap;text-indent:-999px;overflow:hidden;transition:all .2s ease-in-out}
.follow_us_list li>a:hover{transform:translateY(-4px)}
.follow_us_list.offical_follow_icon li>a{margin-bottom:10px;background:no-repeat center/100%}
.icon_follow_facebook{background-image:url("https://ueeshop-static.ly200-cdn.com/static/v1/v6.0494/static/images/global/facebook-official.svg")}
.icon_follow_twitter{background-image:url("https://ueeshop-static.ly200-cdn.com/static/v1/v6.0494/static/images/global/x-official.svg")}
.icon_follow_pinterest{background-image:url("https://ueeshop-static.ly200-cdn.com/static/v1/v6.0494/static/images/global/pinterest-official.svg")}
.icon_follow_linkedin{background-image:url("https://ueeshop-static.ly200-cdn.com/static/v1/v6.0494/static/images/global/linkedin-official.svg")}
.icon_follow_instagram{background-image:url("https://ueeshop-static.ly200-cdn.com/static/v1/v6.0494/static/images/global/instagram-official.svg")}

.footer__bottom{padding:18px 0;border-top:1px solid rgba(255,255,255,.08);text-align:center;font-size:13px;color:rgba(255,255,255,.4)}
.to-top{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border:none;border-radius:50%;background:var(--primary);color:#fff;cursor:pointer;opacity:0;visibility:hidden;transition:.2s;box-shadow:var(--shadow)}
.to-top.show{opacity:1;visibility:visible}

.drawer{display:none;position:fixed;inset:var(--header) 0 0 0;background:#fff;padding:20px;overflow-y:auto;z-index:99;border-top:1px solid var(--line)}
.drawer.open{display:block}
.drawer a{display:block;padding:14px 0;border-bottom:1px solid var(--line);font-weight:500}

@media(max-width:960px){
  .menu,.header-tools .hide-m{display:none}
  .nav-toggle{display:block}
  .grid-2,.grid-3,.grid-4,.hub-grid,.with-sidebar,.pd,.split,.flow{grid-template-columns:1fr}
  .pd__zoom-pane{display:none!important}
  .pd__gallery-main{cursor:zoom-in}
  .pd__zoom-lens{display:none!important}
  .filter-box{position:static}
  .cat-nav__grid{grid-template-columns:repeat(3,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .form-row,.footer__grid,.cat-nav__grid{grid-template-columns:1fr}
}

/* Demo badge - subtle */
.demo-tag{position:fixed;bottom:16px;left:16px;z-index:50;padding:6px 12px;background:rgba(26,61,46,.88);color:#fff;font-size:11px;border-radius:20px;pointer-events:none}

/* Materials row (flexihoo style) */
.mat-row{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.mat-chip{display:flex;align-items:center;gap:8px;padding:12px 22px;background:var(--white);border:1px solid var(--line);border-radius:999px;font-size:14px;font-weight:600}
.mat-chip__dot{width:8px;height:8px;border-radius:50%;background:var(--primary)}

/* Factory cards */
.factory-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:box-shadow .2s}
.factory-card:hover{box-shadow:var(--shadow)}
.factory-card__img{aspect-ratio:4/3;overflow:hidden}
.factory-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.factory-card:hover .factory-card__img img{transform:scale(1.04)}
.factory-card__body{padding:16px}
.factory-card__title{font-size:14px;font-weight:600;margin-bottom:4px}
.factory-card__desc{font-size:12px;color:var(--muted)}

/* Prototype page navigator */
.proto-nav{position:fixed;right:16px;bottom:56px;z-index:60;width:52px}
.proto-nav__toggle{width:52px;height:52px;border:none;border-radius:50%;background:var(--primary);color:#fff;font-size:20px;cursor:pointer;box-shadow:var(--shadow);transition:.2s}
.proto-nav__toggle:hover{background:var(--primary-dark)}
.proto-nav__panel{position:absolute;bottom:62px;right:0;width:280px;max-height:70vh;overflow-y:auto;padding:16px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 12px 40px rgba(0,0,0,.12);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
.proto-nav.open .proto-nav__panel{opacity:1;visibility:visible;transform:none}
.proto-nav__title{font-size:13px;font-weight:700;margin-bottom:4px;color:var(--text)}
.proto-nav__sub{font-size:11px;color:var(--muted);margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.proto-nav__item{display:block;padding:10px 12px;border-radius:var(--r);margin-bottom:4px;transition:.15s}
.proto-nav__item:hover,.proto-nav__item.active{background:var(--bg)}
.proto-nav__item strong{display:block;font-size:13px;margin-bottom:2px}
.proto-nav__item span{font-size:11px;color:var(--muted);line-height:1.4}

/* Guide page */
.guide-hero{padding:80px 0 60px;background:var(--primary-dark);color:#fff;text-align:center}
.guide-hero .title{color:#fff;margin-bottom:12px}
.guide-hero .lead{margin-inline:auto;color:rgba(255,255,255,.75)}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.guide-card{display:block;padding:24px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);transition:.2s}
.guide-card:hover{border-color:var(--primary);box-shadow:var(--shadow)}
.guide-card__num{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff;font-size:13px;font-weight:700;margin-bottom:14px}
.guide-card__title{font-size:16px;font-weight:700;margin-bottom:6px}
.guide-card__desc{font-size:13px;color:var(--muted);line-height:1.5}
.guide-note{text-align:center;margin-top:48px;padding:20px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);font-size:14px;color:var(--muted)}
.flow-diagram{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;margin:40px 0;font-size:13px;color:var(--muted)}
.flow-diagram span{padding:8px 14px;background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.flow-diagram .arrow{color:var(--primary);font-weight:700}

@media(max-width:960px){
  .guide-grid{grid-template-columns:1fr}
  .proto-nav{display:none}
}