:root{
  --navy:#0A2742;
  --blue:#075BA6;
  --orange:#F47B20;
  --grey:#F5F7F9;
  --text:#1F2937;
  --muted:#5B6772;
  --line:#E3E8EC;
  --white:#fff;
  --radius:6px;
  --wrap:1240px;
  --font:'IBM Plex Sans Thai','IBM Plex Sans',system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--font);color:var(--text);background:var(--white);line-height:1.55;font-size:15px}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
button{font-family:inherit;cursor:pointer;border:0}

/* ---------- Top bar ---------- */
.topbar{background:var(--navy);color:#cdd9e5;font-size:12.5px}
.topbar .wrap{display:flex;gap:22px;align-items:center;height:34px;overflow-x:auto;white-space:nowrap}
.topbar span{display:inline-flex;align-items:center;gap:6px}
.topbar .dot{width:5px;height:5px;border-radius:50%;background:var(--orange)}

/* ---------- Header ---------- */
.header{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--white);z-index:40}
.header .wrap{display:flex;align-items:center;gap:20px;height:70px}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0}
.logo .mark{width:36px;height:36px;border-radius:8px;background:var(--navy);display:grid;place-items:center;color:#fff;font-weight:700;letter-spacing:-.5px;position:relative;overflow:hidden}
.logo .mark::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:10px;background:var(--orange)}
.logo .mark span{position:relative;z-index:1;font-size:15px}
.logo b{font-weight:700;font-size:19px;color:var(--navy);letter-spacing:-.3px}
.logo b i{color:var(--blue);font-style:normal}
.searchbar{flex:1;display:flex;align-items:center;border:2px solid var(--navy);border-radius:var(--radius);overflow:hidden;max-width:640px}
.searchbar input{flex:1;border:0;padding:11px 14px;font-size:14px;font-family:inherit;outline:none;min-width:0}
.searchbar button{background:var(--navy);color:#fff;padding:0 20px;align-self:stretch;font-weight:600;font-size:14px;display:flex;align-items:center;gap:6px}
.searchbar button:hover{background:var(--blue)}
.head-actions{display:flex;align-items:center;gap:6px;flex-shrink:0}
.icon-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 10px;color:var(--text);font-size:11.5px;border-radius:var(--radius)}
.icon-btn:hover{background:var(--grey)}
.icon-btn svg{width:22px;height:22px}
.cart-btn{position:relative}
.cart-badge{position:absolute;top:2px;right:6px;background:var(--orange);color:#fff;font-size:10px;font-weight:700;width:16px;height:16px;border-radius:50%;display:grid;place-items:center}
.burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius);background:var(--grey)}
.burger svg{width:22px;height:22px}
.drawer-overlay{position:fixed;inset:0;background:rgba(6,22,38,.5);opacity:0;visibility:hidden;transition:opacity .25s;z-index:60}
.drawer-overlay.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:340px;background:#fff;transform:translateX(-100%);transition:transform .28s ease;z-index:70;display:flex;flex-direction:column;overflow-y:auto;box-shadow:2px 0 24px rgba(0,0,0,.18)}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.drawer-head .logo b{font-size:18px}
.drawer-close{width:36px;height:36px;border-radius:var(--radius);background:var(--grey);display:grid;place-items:center;color:var(--navy)}
.drawer-close svg{width:20px;height:20px}
.drawer-search{padding:14px 18px;border-bottom:1px solid var(--line)}
.drawer-search form{display:flex;border:2px solid var(--navy);border-radius:var(--radius);overflow:hidden}
.drawer-search input{flex:1;border:0;padding:10px 12px;font-size:14px;font-family:inherit;outline:none;min-width:0}
.drawer-search button{background:var(--navy);color:#fff;padding:0 16px}
.drawer-search button svg{width:18px;height:18px}
.drawer-nav{padding:8px 0;flex:1}
.drawer-nav a{display:flex;align-items:center;gap:12px;padding:14px 18px;font-size:15.5px;color:var(--text);border-bottom:1px solid #f0f3f5}
.drawer-nav a:hover{background:var(--grey);color:var(--blue)}
.drawer-nav a .di{width:22px;height:22px;color:var(--blue);flex-shrink:0}
.drawer-nav a .di svg{width:22px;height:22px}
.drawer-nav a.q{color:var(--orange);font-weight:600}
.drawer-foot{padding:16px 18px;border-top:1px solid var(--line);display:grid;gap:10px}
.drawer-foot a{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:var(--radius);font-weight:600;font-size:14.5px}
.drawer-foot a.primary{background:var(--orange);color:#fff}
.drawer-foot a.line{background:#06C755;color:#fff}
.drawer-foot a.tel{background:var(--navy);color:#fff}
.drawer-foot a svg{width:18px;height:18px}

/* ---------- Nav row ---------- */
.navrow{border-bottom:1px solid var(--line);background:var(--white)}
.navrow .wrap{display:flex;align-items:center;gap:4px;height:48px;overflow-x:auto}
.navrow a{padding:8px 14px;font-size:14px;font-weight:500;color:var(--text);border-radius:var(--radius);white-space:nowrap;display:flex;align-items:center;gap:7px}
.navrow a:hover{background:var(--grey);color:var(--blue)}
.navrow a.all{background:var(--navy);color:#fff}
.navrow a.all:hover{background:var(--blue)}
.navrow .quote{margin-left:auto;color:var(--orange);font-weight:600}

/* ---------- Hero ---------- */
.hero{background:var(--grey);border-bottom:1px solid var(--line)}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center;padding:52px 20px}
.hero h1{font-size:40px;line-height:1.15;color:var(--navy);font-weight:700;letter-spacing:-.5px}
.hero p.sub{margin-top:16px;font-size:16px;color:var(--muted);max-width:46ch}
.hero-search{margin-top:26px;display:flex;background:#fff;border:2px solid var(--navy);border-radius:var(--radius);overflow:hidden;box-shadow:0 4px 18px rgba(10,39,66,.08)}
.hero-search input{flex:1;border:0;padding:15px 16px;font-size:15px;font-family:inherit;outline:none;min-width:0}
.hero-search button{background:var(--orange);color:#fff;padding:0 26px;font-weight:700;font-size:15px}
.hero-search button:hover{background:#e06a10}
.hero-cta{margin-top:16px;display:flex;gap:12px;flex-wrap:wrap}
.btn-line{padding:11px 22px;border-radius:var(--radius);font-weight:600;font-size:14px;border:1.5px solid var(--navy);color:var(--navy);background:#fff}
.btn-line:hover{background:var(--navy);color:#fff}
.hero-tag{margin-top:24px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
.hero-tag b{color:var(--navy)}
.hero-visual{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px}
.hero-visual .row{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.hero-visual .row:last-child{border-bottom:0}
.hero-visual .row span{font-size:13.5px;color:var(--text);display:flex;align-items:center;gap:10px}
.hero-visual .ic{width:34px;height:34px;border-radius:8px;background:var(--grey);display:grid;place-items:center;color:var(--blue)}
.hero-visual .ic svg{width:19px;height:19px}
.hero-visual .stat{font-weight:700;color:var(--navy)}
.hero-visual .head{font-size:12px;letter-spacing:.5px;color:var(--muted);margin-bottom:6px}

/* ---------- Section shells ---------- */
section.block{padding:48px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.sec-head h2{font-size:26px;color:var(--navy);font-weight:700;letter-spacing:-.3px}
.sec-head p{font-size:14px;color:var(--muted);margin-top:4px}
.sec-head a.more{font-size:14px;font-weight:600;color:var(--blue);white-space:nowrap}
.sec-head a.more:hover{text-decoration:underline}

/* ---------- Category grid ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.cat-card{border:1px solid var(--line);border-radius:8px;padding:20px 16px;text-align:center;background:#fff;transition:border-color .15s,box-shadow .15s}
.cat-card:hover{border-color:var(--blue);box-shadow:0 6px 18px rgba(7,91,166,.09)}
.cat-card .ci{width:52px;height:52px;margin:0 auto 12px;border-radius:12px;background:var(--grey);display:grid;place-items:center;color:var(--blue)}
.cat-card:hover .ci{background:var(--blue);color:#fff}
.cat-card .ci svg{width:28px;height:28px}
.cat-card h3{font-size:14.5px;color:var(--navy);font-weight:600}
.cat-card p{font-size:12px;color:var(--muted);margin-top:3px}

/* ---------- Trust strip ---------- */
.trust{background:var(--navy);color:#fff}
.trust .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;padding:26px 20px}
.trust .item{display:flex;gap:12px;align-items:flex-start}
.trust .item .ti{width:40px;height:40px;border-radius:9px;background:rgba(255,255,255,.09);display:grid;place-items:center;color:var(--orange);flex-shrink:0}
.trust .item .ti svg{width:22px;height:22px}
.trust .item h4{font-size:14.5px;font-weight:600}
.trust .item p{font-size:12.5px;color:#a9bccd;margin-top:2px}

/* ---------- Product cards ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.pcard{border:1px solid var(--line);border-radius:8px;background:#fff;overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .15s,border-color .15s}
.pcard:hover{box-shadow:0 8px 22px rgba(10,39,66,.10);border-color:#cdd9e5}
.pcard .pimg{aspect-ratio:4/3;background:var(--grey);position:relative;display:grid;place-items:center;color:#b3c1cc}
.pcard .pimg svg{width:64px;height:64px}
.pcard .pbadge{position:absolute;top:10px;left:10px;background:#e8f5ec;color:#1a7a3c;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px}
.pcard .pbadge.quote{background:#fdeede;color:#b85c0a}
.pcard .pbody{padding:14px;display:flex;flex-direction:column;flex:1}
.pcard .pmeta{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.pcard h3{font-size:15px;color:var(--navy);font-weight:600;margin:5px 0;line-height:1.35}
.pcard .pspec{font-size:12.5px;color:var(--muted);margin-bottom:8px}
.pcard .prate{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--muted);margin-bottom:10px}
.stars{color:var(--orange);letter-spacing:1px;font-size:13px}
.pcard .pfoot{margin-top:auto}
.pcard .pprice{font-size:17px;font-weight:700;color:var(--navy)}
.pcard .pprice small{font-size:12px;color:var(--muted);font-weight:400}
.pcard .pprice.req{color:var(--blue);font-size:15px}
.pcard .pstock{font-size:12px;color:#1a7a3c;margin:4px 0 10px;display:flex;align-items:center;gap:5px}
.pcard .pbtn{width:100%;padding:10px;border-radius:var(--radius);background:var(--navy);color:#fff;font-weight:600;font-size:13.5px}
.pcard .pbtn:hover{background:var(--blue)}
.pcard .pbtn.alt{background:#fff;color:var(--navy);border:1.5px solid var(--navy)}
.pcard .pbtn.alt:hover{background:var(--grey)}

/* ---------- Application ---------- */
.app-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.app-card{border:1px solid var(--line);border-radius:8px;padding:16px 12px;text-align:center;background:#fff}
.app-card:hover{border-color:var(--orange);background:#fffaf5}
.app-card .ai{width:40px;height:40px;margin:0 auto 8px;color:var(--orange)}
.app-card .ai svg{width:40px;height:40px}
.app-card span{font-size:13px;font-weight:500;color:var(--navy)}

/* ---------- Project quote CTA ---------- */
.quote-band{background:linear-gradient(100deg,var(--navy),#0d3557);color:#fff;border-radius:12px;overflow:hidden}
.quote-band .inner{display:grid;grid-template-columns:1.2fr .8fr;gap:30px;align-items:center;padding:38px}
.quote-band h2{font-size:26px;font-weight:700;letter-spacing:-.3px}
.quote-band p{color:#b7c8d8;margin-top:10px;font-size:15px;max-width:44ch}
.quote-band .qbtn{margin-top:20px;display:inline-flex;background:var(--orange);color:#fff;padding:13px 26px;border-radius:var(--radius);font-weight:700;font-size:15px}
.quote-band .qbtn:hover{background:#e06a10}
.quote-band ul{list-style:none;display:grid;gap:12px}
.quote-band ul li{display:flex;gap:10px;align-items:center;font-size:14px;color:#dce6ef}
.quote-band ul li svg{width:20px;height:20px;color:var(--orange);flex-shrink:0}

/* ---------- Articles ---------- */
.art-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.acard{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.acard:hover{box-shadow:0 6px 18px rgba(10,39,66,.08)}
.acard .aimg{aspect-ratio:16/9;background:var(--grey);display:grid;place-items:center;color:#b3c1cc}
.acard .aimg svg{width:46px;height:46px}
.acard .abody{padding:16px}
.acard .atag{font-size:11.5px;color:var(--blue);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.acard h3{font-size:16px;color:var(--navy);font-weight:600;margin:6px 0 6px;line-height:1.4}
.acard p{font-size:13px;color:var(--muted)}

/* ---------- Footer ---------- */
.footer{background:var(--navy);color:#c3d2e0;margin-top:20px}
.footer .wrap{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:30px;padding:44px 20px 30px}
.footer h4{color:#fff;font-size:14px;font-weight:600;margin-bottom:14px}
.footer ul{list-style:none;display:grid;gap:9px}
.footer a{font-size:13px;color:#a9bccd}
.footer a:hover{color:#fff}
.footer .fabout .logo b{color:#fff}
.footer .fabout .logo b i{color:#5aa9e6}
.footer .fabout p{font-size:13px;color:#a9bccd;margin-top:14px;line-height:1.6}
.footer .fabout .reg{font-size:12px;color:#8ba3ba;margin-top:12px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1)}
.footer-bottom .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px 20px;flex-wrap:wrap;font-size:12.5px;color:#8ba3ba}
.footer-bottom a{color:#a9bccd}
.footer-bottom .links{display:flex;gap:18px;flex-wrap:wrap}

/* ---------- Sticky mobile CTA ---------- */
.sticky-cta{display:none;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);z-index:50;box-shadow:0 -4px 16px rgba(0,0,0,.06)}
.sticky-cta a{flex:1;text-align:center;padding:11px 4px;font-size:12px;font-weight:600;color:var(--navy);display:flex;flex-direction:column;align-items:center;gap:3px}
.sticky-cta a svg{width:20px;height:20px}
.sticky-cta a.q{color:#fff;background:var(--orange)}

/* ---------- Hero slider (image slides) ---------- */
.hero-slider{position:relative;background:var(--navy)}
.slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;min-width:0;position:relative;height:440px}
.slide .simg{position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,255,255,.25)}
.slide .simg svg{width:130px;height:130px}
.slide.sl1 .simg{background:linear-gradient(120deg,#0a2742 0%,#0d3557 60%,#116094 100%)}
.slide.sl2 .simg{background:linear-gradient(120deg,#075BA6 0%,#0a4d8c 55%,#0a2742 100%)}
.slide.sl3 .simg{background:linear-gradient(120deg,#c65a12 0%,#e06a10 40%,#0a2742 100%)}
.slide .simg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,22,38,.82) 0%,rgba(6,22,38,.55) 42%,rgba(6,22,38,.15) 75%)}
.slide .scontent{position:relative;z-index:2;max-width:var(--wrap);margin:0 auto;padding:0 20px;height:100%;display:flex;flex-direction:column;justify-content:center;color:#fff}
.slide .scontent .stag{display:inline-flex;align-self:flex-start;background:var(--orange);color:#fff;font-size:12.5px;font-weight:700;padding:5px 14px;border-radius:20px;margin-bottom:16px}
.slide .scontent h2{font-size:40px;font-weight:700;line-height:1.15;letter-spacing:-.5px;max-width:18ch}
.slide .scontent p{font-size:17px;color:#d6e2ee;margin-top:14px;max-width:44ch}
.slide .scontent .sbtns{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.sbtn{display:inline-flex;align-items:center;gap:8px;padding:13px 26px;border-radius:var(--radius);font-weight:700;font-size:15px}
.sbtn.primary{background:var(--orange);color:#fff}
.sbtn.primary:hover{background:#e06a10}
.sbtn.ghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.4)}
.sbtn.ghost:hover{background:#fff;color:var(--navy)}
/* dots + arrows */
.slider-dots{display:flex;gap:8px;justify-content:center;position:absolute;bottom:18px;left:0;right:0;z-index:4}
.slider-dots button{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.5);padding:0;border:0}
.slider-dots button.active{background:#fff;width:26px;border-radius:20px}
.slider-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center;color:#fff;z-index:4;backdrop-filter:blur(4px)}
.slider-arrow:hover{background:#fff;color:var(--navy)}
.slider-arrow.prev{left:16px}
.slider-arrow.next{right:16px}
.slider-arrow svg{width:20px;height:20px}

/* ---------- License strip (logos) ---------- */
.license{border-bottom:1px solid var(--line);background:#fff}
.license .wrap{padding:26px 20px}
.license .lhead{text-align:center;font-size:14px;color:var(--navy);font-weight:600;margin-bottom:18px}
.license .lhead small{display:block;color:var(--muted);font-weight:400;font-size:12.5px;margin-top:3px}
.license .logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:24px}
.license .logos figure{display:flex;flex-direction:column;align-items:center;gap:8px;max-width:140px}
.license .logos img{height:66px;width:auto;object-fit:contain}
.license .logos figcaption{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.3}

/* ---------- Customers / partners ---------- */
.partners{padding:48px 0;background:var(--grey)}
.partners .plogos{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:6px}
.plogo{background:#fff;border:1px solid var(--line);border-radius:8px;height:96px;display:grid;place-items:center;padding:14px;transition:box-shadow .15s}
.plogo:hover{box-shadow:0 4px 14px rgba(10,39,66,.08)}
.plogo img{max-height:100%;max-width:100%;object-fit:contain}
.plogo.ph{color:#9fb0bd;font-size:12.5px;font-weight:600;text-align:center;line-height:1.3;background:repeating-linear-gradient(45deg,#fff,#fff 12px,#eef2f5 12px,#eef2f5 24px)}
.partners .pnote{font-size:12.5px;color:var(--muted);margin-top:16px;text-align:center}

/* ---------- AEO Q&A ---------- */
.aeo{padding:52px 0}
.aeo .lead{max-width:66ch;color:var(--muted);font-size:15px;margin-top:6px}
.faq{margin-top:24px;display:grid;gap:14px;max-width:920px}
.faq details{border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden}
.faq details[open]{border-color:#cdd9e5;box-shadow:0 4px 16px rgba(10,39,66,.06)}
.faq summary{list-style:none;cursor:pointer;padding:18px 22px;font-size:16px;font-weight:600;color:var(--navy);display:flex;justify-content:space-between;align-items:center;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .plus{flex-shrink:0;width:22px;height:22px;position:relative}
.faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;background:var(--blue);border-radius:2px}
.faq summary .plus::before{top:10px;left:2px;right:2px;height:2px}
.faq summary .plus::after{left:10px;top:2px;bottom:2px;width:2px;transition:opacity .2s}
.faq details[open] summary .plus::after{opacity:0}
.faq .ans{padding:0 22px 20px;color:var(--text);font-size:14.5px;line-height:1.78}
.faq .ans p{margin-bottom:10px}
.faq .ans p:last-child{margin-bottom:0}
.faq .ans a{color:var(--blue);font-weight:600}
.faq .ans a:hover{text-decoration:underline}
.faq .ans ul{margin:8px 0 12px;padding-left:20px;display:grid;gap:6px}
.faq .ans strong{color:var(--navy)}

/* ---------- Client logos ---------- */
.client-group h3{font-size:13px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;text-align:center;margin:22px 0 16px;display:flex;align-items:center;gap:12px;justify-content:center}
.client-group h3::before,.client-group h3::after{content:"";height:1px;background:var(--line);flex:1;max-width:90px}
.client-row{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.client-logo{border:1px solid var(--line);border-radius:8px;background:#fff;aspect-ratio:3/2;display:grid;place-items:center;padding:14px;color:var(--muted);transition:border-color .15s,box-shadow .15s}
.client-logo:hover{border-color:#cdd9e5;box-shadow:0 4px 14px rgba(10,39,66,.06)}
.client-logo img{max-height:100%;max-width:100%;object-fit:contain;filter:grayscale(1);opacity:.72;transition:filter .15s,opacity .15s}
.client-logo:hover img{filter:grayscale(0);opacity:1}
.client-logo.placeholder{font-size:12px;font-weight:600;color:#aeb9c3;background:var(--grey);border-style:dashed;text-align:center}

/* ---------- AEO block ---------- */
.aeo{background:var(--grey);border-top:1px solid var(--line)}
.aeo .sec-head p{max-width:62ch}
.aeo-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.faq{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;align-self:start}
.faq summary{list-style:none;cursor:pointer;padding:18px 20px;font-size:15.5px;font-weight:600;color:var(--navy);display:flex;align-items:center;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .q{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.faq summary .q .qm{color:var(--orange);font-weight:700;flex-shrink:0}
.faq summary .chev{flex-shrink:0;width:22px;height:22px;color:var(--blue);transition:transform .2s}
.faq[open] summary .chev{transform:rotate(180deg)}
.faq .a{padding:0 20px 18px;color:var(--text);font-size:14.5px;line-height:1.7}
.faq .a p{margin-bottom:10px}
.faq .a ul{margin:0 0 10px 20px;display:grid;gap:5px}
.faq .a a{color:var(--blue);font-weight:600}
.faq .a a:hover{text-decoration:underline}

/* ---------- Factory band ---------- */
.factory{position:relative;background:var(--navy);color:#fff;overflow:hidden}
.factory .bg{position:absolute;inset:0;background:linear-gradient(135deg,#0a2742 0%,#0d3557 55%,#0f3d63 100%)}
.factory .bg::before{content:"";position:absolute;inset:0;opacity:.14;background-image:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 68px),repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 68px)}
.factory .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;padding:0}
.factory .photo{min-height:340px;background:linear-gradient(160deg,#123a5e,#0a2742);display:grid;place-items:center;color:#3a5f82;position:relative;border-right:1px solid rgba(255,255,255,.08)}
.factory .photo svg{width:120px;height:120px;opacity:.7}
.factory .photo .plabel{position:absolute;bottom:16px;left:16px;font-size:12px;color:#8ba9c6;background:rgba(0,0,0,.3);padding:6px 12px;border-radius:6px}
.factory .content{padding:48px 44px;display:flex;flex-direction:column;justify-content:center}
.factory .eyebrow{color:var(--orange);font-weight:600;font-size:14px}
.factory h2{font-size:28px;font-weight:700;margin-top:10px;letter-spacing:-.3px;line-height:1.3}
.factory p.cap{color:#c3d2e0;margin-top:14px;font-size:15.5px;line-height:1.65;max-width:52ch}
.factory .regions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.factory .regions span{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);padding:6px 14px;border-radius:20px;font-size:13px;color:#dce6ef}
.factory .daily{margin-top:18px;display:inline-flex;align-items:center;gap:8px;color:var(--orange);font-weight:600;font-size:14.5px}
.factory .daily svg{width:20px;height:20px}

/* ---------- About + TikTok ---------- */
.about .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.about .eyebrow{color:var(--blue);font-weight:600;font-size:14px}
.about h2{font-size:28px;color:var(--navy);font-weight:700;margin-top:8px;letter-spacing:-.3px;line-height:1.3}
.about p{color:var(--muted);font-size:15px;margin-top:14px;line-height:1.7;max-width:56ch}
.about .why{list-style:none;display:grid;gap:12px;margin-top:20px}
.about .why li{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--text)}
.about .why li .wi{width:30px;height:30px;border-radius:8px;background:var(--grey);color:var(--blue);display:grid;place-items:center;flex-shrink:0}
.about .why li .wi svg{width:17px;height:17px}
.about .why li b{color:var(--navy)}
.about .abtn{margin-top:22px;display:inline-flex;background:var(--navy);color:#fff;padding:12px 24px;border-radius:var(--radius);font-weight:600;font-size:14.5px}
.about .abtn:hover{background:var(--blue)}
.tiktok{position:relative;background:#000;border-radius:14px;overflow:hidden;aspect-ratio:9/16;max-width:340px;margin:0 auto;width:100%;border:1px solid var(--line)}
.tiktok .tphold{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#fff;background:linear-gradient(160deg,#111,#25252b)}
.tiktok .play{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center;backdrop-filter:blur(4px)}
.tiktok .play svg{width:28px;height:28px;color:#fff;margin-left:3px}
.tiktok .tlabel{font-size:13.5px;color:#c9c9d0;text-align:center;padding:0 24px;line-height:1.5}
.tiktok .tbrand{position:absolute;top:14px;left:14px;display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;color:#fff}
.tiktok .tbrand .tlogo{width:26px;height:26px;border-radius:7px;background:#fff;display:grid;place-items:center;color:#000;font-weight:800;font-size:12px}
.about .tcap{text-align:center;font-size:12.5px;color:var(--muted);margin-top:12px}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .app-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:820px){
  .hero .wrap{grid-template-columns:1fr;padding:36px 20px}
  .hero-visual{display:none}
  .hero h1{font-size:30px}
  .slide{height:400px}
  .slide .scontent h2{font-size:30px}
  .slide .simg::after{background:linear-gradient(180deg,rgba(6,22,38,.35) 0%,rgba(6,22,38,.82) 100%)}
  .about .wrap{grid-template-columns:1fr;gap:32px}
  .about h2{font-size:24px}
  .license .logos{gap:20px}
  .license .logos img{height:54px}
  .partners .plogos{grid-template-columns:repeat(3,1fr)}
  .factory .wrap{grid-template-columns:1fr}
  .factory .photo{min-height:200px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}
  .factory .content{padding:32px 24px}
  .trust .wrap{grid-template-columns:repeat(2,1fr)}
  .quote-band .inner{grid-template-columns:1fr}
  .art-grid{grid-template-columns:1fr}
  .footer .wrap{grid-template-columns:1fr 1fr}
  .footer .fabout{grid-column:1/-1}
}
@media(max-width:680px){
  body{padding-bottom:64px}
  .searchbar,.navrow{display:none}
  .burger{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--radius);background:var(--grey)}
  .burger svg{width:22px;height:22px}
  .header .wrap{gap:12px;height:60px}
  .head-actions .icon-btn.hide-m{display:none}
  .cat-grid{grid-template-columns:repeat(2,1fr)}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .app-grid{grid-template-columns:repeat(3,1fr)}
  .sticky-cta{display:flex}
  .sec-head h2{font-size:21px}
  .hero h1{font-size:26px}
  .quote-band .inner{padding:26px}
  .pcard h3{font-size:14px}
  .slide{height:360px}
  .slide .scontent h2{font-size:25px}
  .slide .scontent p{font-size:15px}
  .slider-arrow{display:none}
  .sbtn{padding:12px 20px;font-size:14px}
  .license .logos{gap:16px 20px}
  .license .logos img{height:46px}
  .license .logos figcaption{display:none}
  .partners .plogos{grid-template-columns:repeat(2,1fr)}
  .faq summary{font-size:15px;padding:16px 18px}
  .faq .ans{padding:0 18px 18px}
  .factory h2{font-size:23px}
}

/* ============================================================
   ADDED FOR PHP PAGES: drawer, breadcrumb, buttons, product detail,
   tabs, image cards, gallery, map, pagination, article detail
   ============================================================ */

/* ---------- Page hero + prose (from php) ---------- */
.page-hero{background:var(--grey);border-bottom:1px solid var(--line);padding:38px 0}
.page-hero h1{font-size:34px;color:var(--navy);font-weight:700;letter-spacing:-.4px;line-height:1.2}
.page-hero p{font-size:16px;color:var(--muted);margin-top:12px;max-width:70ch}
.prose{max-width:760px}
.prose h2{font-size:24px;color:var(--navy);font-weight:700;margin:28px 0 10px;letter-spacing:-.3px}
.prose h3{font-size:18px;color:var(--navy);font-weight:600;margin:20px 0 8px}
.prose p{margin-bottom:14px;line-height:1.75;color:var(--text)}
.prose ul{margin:0 0 16px;padding-left:22px;display:grid;gap:8px}
.prose li{line-height:1.7}
.prose a{color:var(--blue);font-weight:600}
.prose a:hover{text-decoration:underline}
.prose strong{color:var(--navy)}
.prose table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:14px}
.prose th,.prose td{border:1px solid var(--line);padding:10px 12px;text-align:left}
.prose th{background:var(--grey);color:var(--navy);font-weight:600}
/* ---------- Mobile drawer ---------- */
.drawer-overlay{position:fixed;inset:0;background:rgba(6,22,38,.5);opacity:0;visibility:hidden;transition:opacity .25s;z-index:60}
.drawer-overlay.open{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;left:0;bottom:0;width:82%;max-width:340px;background:#fff;transform:translateX(-100%);transition:transform .28s ease;z-index:70;display:flex;flex-direction:column;overflow-y:auto;box-shadow:2px 0 24px rgba(0,0,0,.18)}
.drawer.open{transform:translateX(0)}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#fff}
.drawer-head .logo b{font-size:18px}
.drawer-close{width:36px;height:36px;border-radius:var(--radius);background:var(--grey);display:grid;place-items:center;color:var(--navy)}
.drawer-close svg{width:20px;height:20px}
.drawer-search{padding:14px 18px;border-bottom:1px solid var(--line)}
.drawer-search form{display:flex;border:2px solid var(--navy);border-radius:var(--radius);overflow:hidden}
.drawer-search input{flex:1;border:0;padding:10px 12px;font-size:14px;font-family:inherit;outline:none;min-width:0}
.drawer-search button{background:var(--navy);color:#fff;padding:0 16px}
.drawer-search button svg{width:18px;height:18px}
.drawer-nav{padding:8px 0;flex:1}
.drawer-nav a{display:flex;align-items:center;gap:12px;padding:14px 18px;font-size:15.5px;color:var(--text);border-bottom:1px solid #f0f3f5}
.drawer-nav a:hover,.drawer-nav a.active{background:var(--grey);color:var(--blue)}
.drawer-nav a .di{width:22px;height:22px;color:var(--blue);flex-shrink:0}
.drawer-nav a .di svg{width:22px;height:22px}
.drawer-nav a.q{color:var(--orange);font-weight:600}
.drawer-foot{padding:16px 18px;border-top:1px solid var(--line);display:grid;gap:10px}
.drawer-foot a{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:var(--radius);font-weight:600;font-size:14.5px}
.drawer-foot a.primary{background:var(--orange);color:#fff}
.drawer-foot a.line{background:#06C755;color:#fff}
.drawer-foot a.tel{background:var(--navy);color:#fff}
.drawer-foot a svg{width:18px;height:18px}

/* ---------- Breadcrumb ---------- */
.crumb{background:var(--grey);border-bottom:1px solid var(--line);font-size:13px}
.crumb .wrap{display:flex;align-items:center;gap:8px;padding:12px 20px;flex-wrap:wrap;color:var(--muted)}
.crumb a:hover{color:var(--blue)}
.crumb .sep{color:#b3c1cc}
.crumb .cur{color:var(--navy);font-weight:500}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border-radius:var(--radius);font-weight:600;font-size:14.5px}
.btn.primary{background:var(--orange);color:#fff}
.btn.primary:hover{background:#e06a10}
.btn.navy{background:var(--navy);color:#fff}
.btn.navy:hover{background:var(--blue)}
.btn.line{border:1.5px solid var(--navy);color:var(--navy);background:#fff}
.btn.line:hover{background:var(--navy);color:#fff}

/* ---------- Image placeholder (swap with real <img> later) ---------- */
.imgph{position:relative;background:linear-gradient(135deg,#eef2f5,#e0e7ec);display:grid;place-items:center;color:#9fb0bd;overflow:hidden;border-radius:8px}
.imgph svg{width:56px;height:56px;opacity:.7}
.imgph .phcap{position:absolute;left:0;right:0;bottom:0;font-size:11.5px;color:#6f8093;background:rgba(255,255,255,.75);padding:6px 10px;text-align:center;line-height:1.35}
.imgph.navy{background:linear-gradient(135deg,#123a5e,#0a2742);color:#3a5f82}
.imgph.navy .phcap{color:#8ba9c6;background:rgba(6,22,38,.45)}

/* ---------- Product detail ---------- */
.pd{padding:28px 0 8px}
.pd-top{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.pd-gallery .main{aspect-ratio:4/3;width:100%}
.pd-gallery .thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.pd-gallery .thumbs .imgph{aspect-ratio:1;cursor:pointer;border:1px solid var(--line)}
.pd-gallery .thumbs .imgph.active{border:2px solid var(--blue)}
.pd-info h1{font-size:26px;color:var(--navy);font-weight:700;line-height:1.25;letter-spacing:-.3px}
.pd-brand{font-size:13px;color:var(--muted);margin-top:6px}
.pd-brand b{color:var(--navy)}
.pd-rate{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin:10px 0}
.pd-price{font-size:28px;font-weight:700;color:var(--navy);margin:14px 0 2px}
.pd-price small{font-size:14px;color:var(--muted);font-weight:400}
.pd-price.req{color:var(--blue);font-size:22px}
.pd-avail{font-size:13px;color:#1a7a3c;display:flex;align-items:center;gap:6px;margin-bottom:16px}
.pd-opt{margin:14px 0}
.pd-opt label{display:block;font-size:13px;font-weight:600;color:var(--navy);margin-bottom:7px}
.pd-opt .chips{display:flex;flex-wrap:wrap;gap:8px}
.pd-opt .chips button{border:1.5px solid var(--line);background:#fff;color:var(--text);padding:8px 14px;border-radius:var(--radius);font-size:13.5px;font-weight:500}
.pd-opt .chips button:hover{border-color:var(--blue);color:var(--blue)}
.pd-opt .chips button.sel{border-color:var(--navy);background:var(--navy);color:#fff}
.pd-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.pd-cta .btn{flex:1;justify-content:center;min-width:150px}
.pd-meta{margin-top:18px;border-top:1px solid var(--line);padding-top:14px;display:grid;gap:8px;font-size:13px;color:var(--muted)}
.pd-meta div{display:flex;gap:8px}
.pd-meta b{color:var(--navy);min-width:80px;display:inline-block}

/* ---------- Tabs ---------- */
.tabs{margin-top:36px;border-bottom:1px solid var(--line);display:flex;gap:2px;overflow-x:auto}
.tabs button{background:none;padding:12px 18px;font-size:14.5px;font-weight:600;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.tabs button:hover{color:var(--navy)}
.tabs button.active{color:var(--navy);border-bottom-color:var(--orange)}
.tabpane{display:none;padding:24px 0}
.tabpane.active{display:block}
.ship-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:6px}
.ship-step{text-align:center}
.ship-step .imgph{aspect-ratio:4/3;margin-bottom:10px}
.ship-step h4{font-size:14px;color:var(--navy);font-weight:600}
.ship-step p{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.5}
.dl-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.dl-btn{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:12px 16px;background:#fff;font-size:14px;font-weight:600;color:var(--navy)}
.dl-btn:hover{border-color:var(--blue);box-shadow:0 4px 12px rgba(10,39,66,.07)}
.dl-btn svg{width:22px;height:22px;color:var(--blue)}

/* ---------- Image cards (articles / about) ---------- */
.imgcard{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;display:block}
.imgcard:hover{box-shadow:0 6px 18px rgba(10,39,66,.08)}
.imgcard .imgph{aspect-ratio:16/9;border-radius:0}
.imgcard .ic-body{padding:16px}
.imgcard .ic-tag{font-size:11.5px;color:var(--blue);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.imgcard h3{font-size:16px;color:var(--navy);font-weight:600;margin:6px 0;line-height:1.4}
.imgcard p{font-size:13px;color:var(--muted)}
.imgcard .ic-date{font-size:12px;color:#9fb0bd;margin-top:8px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.gallery-grid .imgph{aspect-ratio:4/3}

/* ---------- Map ---------- */
.mapbox{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:8px}
.mapbox .imgph{aspect-ratio:21/9}
.mapbox .maprow{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;background:var(--grey);flex-wrap:wrap;gap:10px}
.mapbox .maprow b{color:var(--navy);font-size:14px}
.mapbox .maprow span{font-size:13px;color:var(--muted)}

/* ---------- Article detail ---------- */
.art-detail{padding:8px 0 0}
.art-detail .art-hero{aspect-ratio:16/9;width:100%;margin:16px 0 8px}
.art-detail .art-tag{font-size:12px;color:var(--blue);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
.art-detail h1{font-size:32px;color:var(--navy);font-weight:700;line-height:1.2;letter-spacing:-.4px;margin:8px 0}
.art-detail .art-meta{font-size:13px;color:var(--muted);margin-bottom:8px;display:flex;gap:14px;flex-wrap:wrap}
.art-detail .art-meta span{display:inline-flex;align-items:center;gap:5px}
.related-prod{margin-top:44px;padding-top:32px;border-top:1px solid var(--line)}

/* ---------- Pagination ---------- */
.pagination{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:36px;flex-wrap:wrap}
.pagination a,.pagination span{min-width:40px;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;color:var(--navy);background:#fff}
.pagination a:hover{border-color:var(--blue);color:var(--blue)}
.pagination .cur{background:var(--navy);color:#fff;border-color:var(--navy)}
.pagination .disabled{color:#c3d0da;background:var(--grey);cursor:not-allowed}
.pagination .nav svg{width:16px;height:16px}
.page-info{text-align:center;font-size:13px;color:var(--muted);margin-top:12px}

/* ---------- Responsive additions for PHP pages ---------- */
@media(max-width:1080px){
  .cat-grid{grid-template-columns:repeat(3,1fr)}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .page-hero h1{font-size:28px}
  .pd-top{grid-template-columns:1fr;gap:22px}
  .ship-steps{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .articles-list{grid-template-columns:1fr !important}
  .footer .wrap{grid-template-columns:1fr 1fr}
  .footer .fabout{grid-column:1/-1}
}
@media(max-width:680px){
  body{padding-bottom:64px}
  .searchbar,.navrow{display:none}
  .burger{display:flex}
  .header .wrap{gap:12px;height:60px}
  .head-actions .icon-btn.hide-m{display:none}
  .cat-grid{grid-template-columns:repeat(3,1fr);gap:8px}
  .cat-card{padding:14px 8px;text-align:center}
  .cat-card .ci{margin:0 auto 8px;width:40px;height:40px}
  .cat-card .ci svg{width:22px;height:22px}
  .cat-card h3{font-size:12.5px;line-height:1.3}
  .cat-card p{display:none}
  .cat-card .cnt{font-size:10.5px}
  .prod-grid{grid-template-columns:repeat(2,1fr)}
  .sticky-cta{display:flex}
  .sec-head h2{font-size:21px}
  .page-hero h1{font-size:24px}
  .pcard h3{font-size:14px}
  .faq summary{font-size:15px;padding:16px 18px}
  .faq .ans{padding:0 18px 18px}
  .pd-info h1{font-size:22px}
  .ship-steps{grid-template-columns:repeat(2,1fr)}
  .gallery-grid{grid-template-columns:1fr}
  .articles-list{grid-template-columns:1fr !important}
  .pd-cta .btn{min-width:0}
  .art-detail h1{font-size:24px}
  .pcard .pbtns{grid-template-columns:1fr 1fr}
}

/* ---------- Pager (article pagination) ---------- */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:32px;flex-wrap:wrap}
.pager a,.pager span{min-width:40px;height:40px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--radius);font-size:14px;font-weight:600;color:var(--navy);background:#fff}
.pager a:hover{border-color:var(--blue);color:var(--blue)}
.pager .cur{background:var(--navy);color:#fff;border-color:var(--navy)}
.pager .dis{color:#b3c1cc;pointer-events:none}
.pager .nav-lbl{gap:6px}

/* ---------- Uploaded images fit their containers ---------- */
.pcard .pimg img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.pd-gallery .main img,.pd-gallery .thumbs .imgph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.imgcard .imgph img,.article-hero .imgph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.pcard .pimg,.imgcard .imgph,.article-hero .imgph,.pd-gallery .main,.pd-gallery .thumbs .imgph{position:relative;overflow:hidden}

/* ---------- Home article card images ---------- */
.acard .aimg{position:relative;overflow:hidden}
.acard .aimg img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}

/* ============================================================
   v9 components
   ============================================================ */
/* ---------- Products page: filter layout ---------- */
.shop-layout{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start}
.filter-side{border:1px solid var(--line);border-radius:10px;padding:16px 18px;position:sticky;top:88px}
.filter-side h3{font-size:14px;color:var(--navy);font-weight:700;margin:14px 0 8px}
.filter-side h3:first-child{margin-top:0}
.filter-side a{display:flex;justify-content:space-between;padding:7px 0;font-size:13.5px;color:var(--text);border-bottom:1px solid #f0f3f5}
.filter-side a:hover{color:var(--blue)}
.filter-side a.active{color:var(--blue);font-weight:600}
.filter-side a .n{color:var(--muted);font-size:12px}
.shop-search{margin-bottom:16px;display:flex;border:2px solid var(--navy);border-radius:var(--radius);overflow:hidden}
.shop-search input{flex:1;border:0;padding:11px 14px;font-size:14px;font-family:inherit;outline:none;min-width:0}
.shop-search button{background:var(--navy);color:#fff;padding:0 18px}
.shop-search button svg{width:18px;height:18px}
.filter-toggle{display:none;width:100%;padding:11px;border:1.5px solid var(--navy);border-radius:var(--radius);background:#fff;color:var(--navy);font-weight:600;font-size:14px;margin-bottom:14px;align-items:center;justify-content:center;gap:8px}
.filter-toggle svg{width:18px;height:18px}

/* ---------- Recently viewed ---------- */
.recent-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

/* ---------- Category cards with image ---------- */
.catimg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.catimg-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;display:block;transition:box-shadow .15s,border-color .15s}
.catimg-card:hover{box-shadow:0 8px 22px rgba(10,39,66,.1);border-color:#cdd9e5}
.catimg-card .cimg{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--grey);display:grid;place-items:center;color:#b3c1cc}
.catimg-card .cimg img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.catimg-card .cimg svg{width:54px;height:54px}
.catimg-card .cbody{padding:16px}
.catimg-card h3{font-size:17px;color:var(--navy);font-weight:600}
.catimg-card p{font-size:13px;color:var(--muted);margin-top:5px}
.catimg-card .cnt{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--blue);font-weight:600}

/* ---------- Catalog cards with image ---------- */
.cat-dl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.dl-card{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff;display:flex;flex-direction:column}
.dl-card:hover{box-shadow:0 6px 18px rgba(10,39,66,.08)}
.dl-card .dimg{aspect-ratio:4/3;position:relative;overflow:hidden;background:var(--grey);display:grid;place-items:center;color:#b3c1cc}
.dl-card .dimg img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.dl-card .dimg svg{width:56px;height:56px}
.dl-card .dbody{padding:16px;display:flex;flex-direction:column;flex:1}
.dl-card h3{font-size:16px;color:var(--navy);font-weight:600}
.dl-card p{font-size:13px;color:var(--muted);margin:6px 0 12px;flex:1}
.dl-card .dmeta{font-size:12px;color:var(--muted);margin-bottom:10px}
.dl-card .dbtn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:var(--radius);background:var(--navy);color:#fff;font-weight:600;font-size:13.5px}
.dl-card .dbtn:hover{background:var(--blue)}
.dl-card .dbtn svg{width:18px;height:18px}

/* ---------- Article page with sidebar ---------- */
.article-layout{display:grid;grid-template-columns:1fr 300px;gap:32px;align-items:start}
.news-side{border:1px solid var(--line);border-radius:10px;padding:18px;position:sticky;top:88px}
.news-side h3{font-size:15px;color:var(--navy);font-weight:700;margin-bottom:12px}
.news-side a{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid #f0f3f5}
.news-side a:last-child{border-bottom:0}
.news-side a:hover h4{color:var(--blue)}
.news-side .nthumb{width:56px;height:56px;flex-shrink:0;border-radius:6px;overflow:hidden;background:var(--grey);display:grid;place-items:center;color:#b3c1cc;position:relative}
.news-side .nthumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.news-side .nthumb svg{width:22px;height:22px}
.news-side h4{font-size:13px;color:var(--navy);font-weight:600;line-height:1.4}
.news-side .ndate{font-size:11.5px;color:var(--muted);margin-top:3px}
.article-search{margin-top:28px;border-top:1px solid var(--line);padding-top:22px}
.article-search h3{font-size:16px;color:var(--navy);margin-bottom:10px}
.article-search form{display:flex;border:2px solid var(--navy);border-radius:var(--radius);overflow:hidden;max-width:480px}
.article-search input{flex:1;border:0;padding:11px 14px;font-family:inherit;font-size:14px;outline:none;min-width:0}
.article-search button{background:var(--navy);color:#fff;padding:0 20px;font-weight:600}

/* ---------- Header logo-cart (DIN ISO) ---------- */
.logo-cart img{height:30px;width:auto;display:block}
.icon-btn.logo-cart{padding:6px 8px}

/* ---------- Contact page ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.contact-card{border:1px solid var(--line);border-radius:10px;padding:20px;margin-bottom:16px}
.contact-card h3{font-size:16px;color:var(--navy);margin-bottom:12px;font-weight:700}
.dept{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #f0f3f5;font-size:14px}
.dept:last-child{border-bottom:0}
.dept b{color:var(--navy)}
.dept a{color:var(--blue);font-weight:600}
.contact-form label{display:block;font-weight:600;color:var(--navy);margin:12px 0 5px;font-size:13.5px}
.contact-form input,.contact-form textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:6px;font-family:inherit;font-size:14px}
.line-btn{display:inline-flex;align-items:center;gap:8px;background:#06C755;color:#fff;padding:12px 22px;border-radius:var(--radius);font-weight:600;font-size:15px;margin-top:8px}
.line-btn svg{width:20px;height:20px}

/* ---------- Responsive v9 ---------- */
@media(max-width:900px){
  .shop-layout{grid-template-columns:1fr}
  .filter-side{position:static;display:none}
  .filter-side.open{display:block;margin-bottom:16px}
  .filter-toggle{display:flex}
  .article-layout{grid-template-columns:1fr}
  .news-side{position:static;order:2;margin-top:24px}
  .contact-grid{grid-template-columns:1fr}
  .catimg-grid{grid-template-columns:repeat(2,1fr)}
  .cat-dl-grid{grid-template-columns:repeat(2,1fr)}
  .recent-row{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .catimg-grid{grid-template-columns:1fr}
  .cat-dl-grid{grid-template-columns:1fr}
  .recent-row{grid-template-columns:repeat(2,1fr)}
}

/* ============================================================
   v11
   ============================================================ */
/* pcard extra bottom padding */
.pcard .pbody{padding-bottom:14px}
.pcard{padding-bottom:10px}

/* filter fields (PN/SDR/size/material) */
.filter-side select{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:6px;font-family:inherit;font-size:13.5px;margin-bottom:6px;background:#fff}
.filter-side .fclear{display:inline-block;margin-top:10px;font-size:12.5px;color:var(--muted)}
.filter-side .fclear:hover{color:var(--blue)}

/* pagination compact (ellipsis) */
.pager .gap{border:0;background:none;min-width:auto;padding:0 4px;color:var(--muted)}

/* product SME-GP trust box */
.pd-trust{border-top:1px solid var(--line);margin-top:16px;padding-top:16px;display:grid;gap:12px}
.pd-trust .badges{display:flex;gap:10px;flex-wrap:wrap}
.pd-trust .badges img{height:46px;width:auto;border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:#fff}
.pd-trust .seller{display:flex;gap:10px;align-items:flex-start}
.pd-trust .seller .si{width:38px;height:38px;border-radius:8px;background:var(--grey);color:var(--blue);display:grid;place-items:center;flex-shrink:0}
.pd-trust .seller .si svg{width:20px;height:20px}
.pd-trust .seller b{color:var(--navy);font-size:14.5px}
.pd-trust .seller p{font-size:12.5px;color:var(--muted);margin-top:2px}

/* doc/manual selector + downloads */
.doc-select{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.doc-select select{padding:9px 12px;border:1px solid var(--line);border-radius:6px;font-family:inherit;font-size:14px}
.img-dl-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}
.img-dl{border:1px solid var(--line);border-radius:8px;overflow:hidden;text-align:center;background:#fff}
.img-dl .thumb{aspect-ratio:1;position:relative;overflow:hidden;background:var(--grey);display:grid;place-items:center;color:#b3c1cc}
.img-dl .thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.img-dl .thumb svg{width:34px;height:34px}
.img-dl a{display:flex;align-items:center;justify-content:center;gap:5px;padding:8px;font-size:12px;font-weight:600;color:var(--navy)}
.img-dl a:hover{background:var(--grey);color:var(--blue)}
.img-dl a svg{width:14px;height:14px}

/* article share buttons */
.share-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:20px 0;padding:16px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.share-row .lbl{font-weight:600;color:var(--navy);font-size:14px;margin-right:4px}
.share-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:var(--radius);font-size:13.5px;font-weight:600;color:#fff}
.share-btn svg{width:17px;height:17px}
.share-btn.fb{background:#1877F2}
.share-btn.line{background:#06C755}
.share-btn.tw{background:#000}
.share-btn.copy{background:var(--navy)}
.share-btn:hover{opacity:.9}

@media(max-width:680px){
  .img-dl-row{grid-template-columns:repeat(2,1fr)}
  .pd-trust .badges img{height:40px}
}