/*
Theme Name: Iropars
Theme URI: https://iropars.com
Author: Iropars Team
Author URI: https://iropars.com
Description: قالب اختصاصی و مدرن آیروپارس - تأمین لوله و تجهیزات صنایع نفت، گاز و پتروشیمی با سیستم محصولات مستقل بدون ووکامرس
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: iropars
*/

/* ========================================================
   Vazirmatn / Vazir Local Webfont
   ======================================================== */
/* 1. Arabic (Persian, Arabic, Farsi digits) */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/vazirmatn-dxxo8j6pp2d_ku2muijlgmwwmmk.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* 2. Latin-ext */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/vazirmatn-dxxo8j6pp2d_ku2muijle8wwmmk.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 3. Latin */
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/vazirmatn-dxxo8j6pp2d_ku2muijlhcww.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Fallback & Aliases for 'Vazir' */
@font-face {
  font-family: 'Vazir';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/vazirmatn-dxxo8j6pp2d_ku2muijlgmwwmmk.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Vazir';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/vazirmatn-dxxo8j6pp2d_ku2muijle8wwmmk.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Vazir';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/vazirmatn-dxxo8j6pp2d_ku2muijlhcww.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --navy:#22307F;
  --navy-deep:#141C4F;
  --red:#D8353B;
  --red-dark:#B82A30;
  --ink:#14183A;
  --muted:#5A5F85;
  --line:#DDE1F0;
  --tint:#F1F3FA;
  --white:#fff;
  --radius:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html, body, *, *::before, *::after {
  font-family: 'Vazirmatn', 'Vazir', Tahoma, system-ui, -apple-system, sans-serif;
}
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  display: block;
  margin: 0;
  font-family: 'Vazirmatn', 'Vazir', Tahoma, system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: #fff;
  line-height: 1.8;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea, optgroup, table, th, td {
  font-family: 'Vazirmatn', 'Vazir', Tahoma, system-ui, -apple-system, sans-serif !important;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--red);outline-offset:2px}
h1,h2,h3,h4,h5,h6,p,ul{margin:0}
ul{padding:0;list-style:none}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
.ico{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:12px;font:inherit;font-weight:700;font-size:15px;border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.btn-red{background:var(--red);color:#fff}
.btn-red:hover{background:var(--red-dark);color:#fff}
.btn-outline{border-color:var(--navy);color:var(--navy);background:transparent}
.btn-outline:hover{background:var(--navy);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.btn-ghost:hover{background:#fff;color:var(--navy)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--tint);color:var(--navy-deep)}
.btn-sm{min-height:40px;padding:0 16px;font-size:13.5px}
.btn-block{width:100%}

/* Topbar */
.topbar{background:var(--navy-deep);color:#D5DBFF;font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:40px}
.topbar ul{display:flex;gap:22px}
.topbar a:hover{color:#fff}

/* Header */
.header{background:#fff;border-bottom:1px solid var(--line);position:relative;z-index:60}
.header-main{display:flex;align-items:center;gap:28px;padding:16px 0}
.logo img{height:54px;width:auto}
.logo-text{display:flex;flex-direction:column}
.logo-title{font-size:26px;font-weight:900;color:var(--navy);line-height:1.2;letter-spacing:-.5px}
.logo-sub{font-size:11px;font-weight:700;color:var(--red);letter-spacing:1px}
form.search{flex:1;display:flex;align-items:center;gap:10px;background:var(--tint);border:1px solid var(--line);border-radius:12px;padding:0 16px;min-height:48px;color:var(--muted)}
form.search input{flex:1;border:0;background:transparent;font:inherit;font-size:14px;color:var(--ink);min-height:44px}
.search input::placeholder{color:var(--muted)}
.search input:focus-visible{outline:none}
form.search:focus-within{border-color:var(--navy);background:#fff}
.search-btn{border:0;background:transparent;cursor:pointer;color:var(--muted);display:grid;place-items:center;padding:0}
.search-btn:hover{color:var(--red)}
.call{display:flex;align-items:center;gap:12px;white-space:nowrap}
.call-ico{width:48px;height:48px;border-radius:12px;background:var(--red);color:#fff;display:grid;place-items:center}
.call small{display:block;font-size:12px;color:var(--muted);line-height:1.4}
.call strong{display:block;font-size:17px;color:var(--navy);line-height:1.4}

/* Navigation */
.nav{border-top:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:16px}
.nav ul.main-menu{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.nav ul.main-menu::-webkit-scrollbar{display:none}
.nav a{display:flex;align-items:center;gap:4px;min-height:52px;padding:0 14px;font-size:14.5px;font-weight:500;white-space:nowrap;color:var(--ink);border-bottom:3px solid transparent}
.nav a:hover{color:var(--red);border-bottom-color:var(--red)}
.nav .ico{width:14px;height:14px;stroke-width:2}
.nav a.nav-cta{flex:none;min-height:42px;padding:0 22px;color:#fff;border:2px solid transparent;font-size:14.5px;font-weight:700}
.nav a.nav-cta:hover{color:#fff;border-color:transparent;background:var(--red-dark)}
.nav .hot{color:var(--red);font-weight:700}
.nav a.active,.nav a.is-active{color:var(--red);border-bottom-color:var(--red);font-weight:700}

/* Nav Area & Mega Menu */
.navarea{position:relative}
.nav .nav-trigger{display:inline-flex;align-items:center;gap:10px;flex:none;min-height:44px;margin:4px 0;padding:0 18px;border:0;border-radius:10px;background:var(--navy);color:#fff;font:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:background .15s}
.nav .nav-trigger:hover,.navarea.is-open .nav-trigger{background:var(--navy-deep)}
.nav .nav-trigger .ico{width:20px;height:20px;stroke-width:1.8}
.nav .nav-trigger .chev{width:14px;height:14px;stroke-width:2.2;transition:transform .2s}
.navarea.is-open .nav-trigger .chev{transform:rotate(180deg)}
.m-menu{display:none}

.mega-overlay{position:absolute;top:100%;inset-inline:0;height:100vh;background:rgba(20,28,79,.5);opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;z-index:1}
.mega-on .mega-overlay{opacity:1;visibility:visible}
.mega{position:absolute;top:100%;inset-inline:0;z-index:70;background:#fff;border-top:1px solid var(--line);box-shadow:0 34px 60px rgba(20,28,79,.28);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .18s,transform .18s,visibility .18s}
.navarea.is-open .mega{opacity:1;visibility:visible;transform:none}
.mega-grid{display:grid;grid-template-columns:250px minmax(0,1fr) 290px;gap:0;padding-top:28px;padding-bottom:28px;min-height:430px}
.mtabs{display:flex;flex-direction:column;gap:4px;padding-inline-end:22px;border-inline-end:1px solid var(--line)}
.mtab{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:0 10px;border:0;border-radius:12px;background:transparent;font:inherit;font-size:15px;font-weight:500;color:var(--ink);text-align:start;cursor:pointer;transition:background .15s,color .15s}
.mtab:hover{background:var(--tint)}
.mtab-ico{width:38px;height:38px;border-radius:10px;background:var(--tint);color:var(--navy);display:grid;place-items:center;flex:none;transition:background .15s,color .15s}
.mtab-ico .ico{width:22px;height:22px}
.mtab-name{flex:1}
.mtab-go{opacity:0;transform:translateX(6px);transition:opacity .15s,transform .15s;color:var(--red)}
.mtab-go .ico{width:16px;height:16px;stroke-width:2}
.mtab[aria-selected="true"]{background:var(--tint);color:var(--navy-deep);font-weight:700}
.mtab[aria-selected="true"] .mtab-ico{background:var(--navy);color:#fff}
.mtab[aria-selected="true"] .mtab-go{opacity:1;transform:none}

.mpanels{padding:0 34px;min-width:0}
.mpanel[hidden]{display:none}
.mpanel{animation:mfade .22s ease}
@keyframes mfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mpanel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.mpanel-head h3{font-size:24px;font-weight:800;color:var(--navy-deep);line-height:1.5}
.mpanel-head p{font-size:14px;color:var(--muted);max-width:480px}
.mall{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:42px;padding:0 16px;border:1.5px solid var(--navy);border-radius:10px;font-size:14px;font-weight:700;color:var(--navy);transition:background .15s,color .15s}
.mall:hover{background:var(--navy);color:#fff}
.mall .ico{width:16px;height:16px;stroke-width:2}
.mcols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px 30px}
.mgroup h4{margin:0 0 10px;font-size:13.5px;font-weight:800;color:#A82229}
.mgroup ul{margin:0;padding:0;list-style:none}
.mgroup a{display:flex;align-items:center;min-height:36px;font-size:14.5px;color:var(--ink);transition:color .15s,transform .15s}
.mgroup a::before{content:"";width:5px;height:5px;border-radius:50%;background:#C5CAE3;margin-inline-end:10px;flex:none;transition:background .15s}
.mgroup a:hover{color:var(--red);transform:translateX(-4px)}
.mgroup a:hover::before{background:var(--red)}

.mfeature{background:var(--navy);color:#fff;border-radius:18px;padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;align-self:start}
.mfeature h4{margin:0;font-size:18px;font-weight:800;line-height:1.7}
.mfeature p{font-size:13.5px;color:#C9D1FF;line-height:1.9}
.mfeature .btn{width:100%}
.mf-link{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#fff;border-bottom:1px solid rgba(255,255,255,.4)}
.mf-link:hover{border-bottom-color:#fff}
.mf-link .ico{width:18px;height:18px}

.mega-foot{background:var(--tint);border-top:1px solid var(--line)}
.mega-foot-in{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;min-height:60px}
.mstd{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:13.5px;font-weight:700;color:var(--navy-deep)}
.mstd ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.mstd a{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:500;font-size:13px;color:var(--ink)}
.mstd a:hover{border-color:var(--navy);color:var(--navy)}
.mcall{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted)}
.mcall .ico{width:18px;height:18px;color:var(--red)}
.mcall b{color:var(--navy-deep);font-size:15px}

/* Mobile Drawer */
.drawer{position:fixed;inset:0;z-index:100}
.drawer[hidden]{display:none}
.drawer-bg{position:absolute;inset:0;background:rgba(20,28,79,.55);opacity:0;transition:opacity .22s}
.drawer-panel{position:absolute;inset-block:0;inset-inline-start:0;width:min(88vw,380px);background:#fff;display:flex;flex-direction:column;transform:translateX(100%);transition:transform .22s ease}
.drawer.open .drawer-bg{opacity:1}
.drawer.open .drawer-panel{transform:none}
.dviewport{flex:1;position:relative;overflow:hidden;min-height:0}
.dscreen{position:absolute;inset:0;display:flex;flex-direction:column;background:#fff;transition:transform .26s ease,opacity .26s ease;transform:translateX(-100%);visibility:hidden}
.dscreen.is-on{transform:none;visibility:visible}
.dscreen-root{transform:none;visibility:visible}
.dviewport.is-sub .dscreen-root{transform:translateX(28%);opacity:.0;visibility:hidden;transition:transform .26s ease,opacity .26s ease,visibility 0s .26s}
.dscreen-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--navy-deep);font-size:17px;min-height:73px}
.dscreen-top strong{flex:1}
.drawer-x{width:44px;height:44px;border:0;border-radius:10px;background:var(--tint);color:var(--navy);display:grid;place-items:center;cursor:pointer}
.d-back{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 14px 0 10px;border:0;border-radius:10px;background:var(--tint);color:var(--navy);font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.d-back .ico{width:18px;height:18px;stroke-width:2;transform:scaleX(-1)}
.dscreen-top .d-back+strong{text-align:center;flex:1}
.dscreen-body{flex:1;overflow-y:auto;padding:8px 18px 18px;overscroll-behavior:contain}
.dlink{display:flex;align-items:center;min-height:52px;font-weight:700;font-size:15.5px;border-bottom:1px solid var(--line)}
.dlink.hot{color:var(--red)}
.drow{display:flex;align-items:center;gap:12px;width:100%;min-height:60px;padding:0;border:0;border-bottom:1px solid var(--line);background:transparent;font:inherit;font-weight:700;font-size:15.5px;color:var(--navy-deep);text-align:start;cursor:pointer}
.drow:active{background:var(--tint)}
.d-ico{width:36px;height:36px;border-radius:10px;background:var(--tint);color:var(--navy);display:grid;place-items:center;flex:none}
.d-ico .ico{width:20px;height:20px}
.d-name{flex:1}
.d-go{color:var(--muted);display:grid;place-items:center}
.d-go .ico{width:18px;height:18px;stroke-width:2}
.d-desc{margin:8px 0 4px;font-size:13.5px;color:var(--muted);line-height:1.9}
.dgroup h4{margin:16px 0 4px;font-size:13px;font-weight:800;color:#A82229}
.dgroup ul{margin:0;padding:0;list-style:none}
.dgroup a{display:flex;align-items:center;min-height:46px;font-size:15px;color:var(--ink);border-bottom:1px solid var(--line)}
.dall{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;min-height:50px;padding:0 16px;border-radius:12px;background:var(--navy);color:#fff;font-size:14.5px;font-weight:700}
.dall .ico{width:18px;height:18px;stroke-width:2}
.drawer-foot{padding:14px 18px 18px;border-top:1px solid var(--line);display:grid;gap:10px}
.dphone{display:flex;align-items:center;justify-content:center;gap:10px;min-height:46px;font-weight:700;color:var(--navy)}
.dphone .ico{width:20px;height:20px;color:var(--red)}
html.drawer-on{overflow:hidden}

/* Hero Carousel */
.hero{background:var(--navy);color:#fff;position:relative;overflow:hidden;padding:56px 0 120px}
.hviewport{position:relative;overflow:hidden}
.htrack{display:flex;transition:transform .45s cubic-bezier(.2,.8,.2,1);direction:ltr}
.hslide{flex:0 0 100%;direction:rtl}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:32px;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:#C9D1FF;font-weight:500}
.eyebrow::before{content:"";width:36px;height:2px;background:#C9D1FF}
.hero h1{font-size:44px;line-height:1.5;font-weight:800;margin:14px 0 18px}
.hero p.lead{font-size:17px;color:#DCE1FF;max-width:560px}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-points{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:28px;font-size:14px;color:#DCE1FF}
.hero-points li{display:flex;align-items:center;gap:8px}
.hero-points .ico{width:20px;height:20px;color:#fff;stroke-width:2}
.hero-art{position:relative;display:flex;align-items:center;justify-content:center}
.hero-img{width:100%;max-width:540px;height:auto;display:block;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(0,0,0,0.3));position:relative;z-index:2}
.hero-disc{display:none}
.hero-art svg{position:relative;width:100%;max-width:440px;height:auto}

.hnav{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:32px}
.harrow{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s}
.harrow:hover{background:rgba(255,255,255,.25)}
.harrow .ico{width:18px;height:18px}
.hdots{display:flex;align-items:center;gap:8px}
.hdot{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.35);cursor:pointer;padding:0;transition:all .2s}
.hdot[aria-current="true"]{width:28px;border-radius:999px;background:var(--red)}
.htoggle{width:36px;height:36px;border-radius:50%;border:0;background:transparent;color:#C9D1FF;cursor:pointer;display:grid;place-items:center}
.htoggle:hover{color:#fff}

/* Filter Card */
.filter-wrap{margin-top:-64px;position:relative;z-index:10}
.filter{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 18px 40px rgba(20,28,79,.14);padding:22px;display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:16px;align-items:end}
.filter label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px}
.filter select,.filter input{width:100%;min-height:50px;border:1px solid var(--line);border-radius:10px;background:var(--tint);font:inherit;font-size:14.5px;color:var(--ink);padding:0 14px}
.filter select:hover,.filter input:hover{border-color:var(--navy)}
.filter .btn{min-height:50px;min-width:150px}

/* Sections */
section.block{padding:88px 0 0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:32px}
.kicker{display:flex;align-items:center;gap:10px;font-size:13.5px;font-weight:700;color:var(--red)}
.kicker::before{content:"";width:28px;height:2px;background:var(--red)}
.head h2{font-size:32px;line-height:1.5;font-weight:800;color:var(--navy-deep)}

/* Categories Grid */
.cats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;width:100%}
.cat{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 18px 18px;transition:border-color .15s,box-shadow .15s,transform .15s;height:100%}
.cat:hover{border-color:var(--navy);box-shadow:0 10px 24px rgba(34,48,127,.12);transform:translateY(-2px)}
.cat-ico{width:52px;height:52px;border-radius:12px;background:var(--tint);color:var(--navy);display:grid;place-items:center}
.cat:hover .cat-ico{background:var(--navy);color:#fff}
.cat h3{font-size:15.5px;font-weight:700;line-height:1.6}
.cat-subcats{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 16px;width:100%}
.cat-sub-chip{font-size:11.5px;background:#f8fafc;color:#334155;padding:4px 10px;border-radius:14px;text-decoration:none;border:1px solid #e2e8f0;transition:all .18s ease;line-height:1.4;display:inline-flex;align-items:center}
.cat-sub-chip:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-1px);box-shadow:0 3px 8px rgba(34,48,127,.18)}
.cat span.more{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin-top:auto}
.cat span.more .ico{width:14px;height:14px;stroke-width:2}
.cat:hover span.more{color:var(--red)}

/* About */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}
.about h2{font-size:32px;line-height:1.55;font-weight:800;color:var(--navy-deep);margin:10px 0 18px}
.about p{color:var(--muted);font-size:16px;max-width:600px}
.about .btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.std{background:var(--navy);color:#fff;border-radius:22px;padding:36px}
.std h3{font-size:18px;font-weight:700;margin-bottom:6px}
.std p{color:#C9D1FF;font-size:14px;margin-bottom:22px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips li{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:6px 16px;font-size:14px;font-weight:500;direction:ltr;unicode-bidi:isolate}
.std-foot{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:22px;border-top:1px solid rgba(255,255,255,.2);font-size:14px;color:#DCE1FF}
.std-foot .ico{color:#fff}

/* Features */
.features{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.feat{text-align:center;padding:8px 6px}
.feat-ico{width:64px;height:64px;border-radius:50%;background:var(--tint);color:var(--red);display:grid;place-items:center;margin:0 auto 14px}
.feat-ico .ico{width:28px;height:28px}
.feat h3{font-size:15px;font-weight:700;line-height:1.7;margin-bottom:4px}
.feat p{font-size:13px;color:var(--muted);line-height:1.8}

/* Articles */
.articles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.post{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .15s,border-color .15s}
.post:hover{border-color:var(--navy);box-shadow:0 10px 24px rgba(34,48,127,.12)}
.thumb{aspect-ratio:16/10;background:var(--tint);color:var(--navy);display:grid;place-items:center;position:relative}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .ico{width:56px;height:56px;stroke-width:1.3;opacity:.85}
.thumb em{position:absolute;top:12px;right:12px;font-style:normal;font-size:12px;font-weight:700;background:var(--navy);color:#fff;border-radius:8px;padding:2px 10px}
.post-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.post h3{font-size:15.5px;line-height:1.8;font-weight:700;color:var(--navy-deep)}
.post p{font-size:13.5px;color:var(--muted);line-height:1.9}
.post .more{margin-top:auto;font-size:13px;font-weight:700;color:var(--red);display:flex;align-items:center;gap:6px}
.post .more .ico{width:14px;height:14px;stroke-width:2}

/* Banner */
.banner{background:var(--navy-deep);color:#fff;border-radius:24px;padding:44px 48px;display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}
.banner h2{font-size:30px;font-weight:800;line-height:1.5;margin-bottom:10px}
.banner p{color:#C9D1FF;max-width:560px;font-size:15.5px;margin-bottom:24px}
.banner svg{width:230px;height:auto}

/* Manufacturers / Brands */
.brands{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.brand{aspect-ratio:3/2;border:1px dashed #B9C0DD;border-radius:var(--radius);display:grid;place-items:center;text-align:center;color:var(--navy-deep);font-weight:700;font-size:14px;padding:10px;background:#fff;transition:border-color .15s}
.brand:hover{border-color:var(--navy);border-style:solid}

/* Stats */
.stats{background:var(--tint);border-radius:22px;padding:36px 28px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stat{display:flex;align-items:center;justify-content:center;gap:16px}
.stat .ico{width:44px;height:44px;color:var(--red);stroke-width:1.4}
.stat b{display:block;font-size:30px;font-weight:800;color:var(--navy-deep);line-height:1.3}
.stat span{font-size:14px;color:var(--muted)}

/* CTA */
.cta{background:var(--red);color:#fff;border-radius:24px;padding:40px 48px;display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap}
.cta h2{font-size:28px;font-weight:800;line-height:1.5}
.cta p{font-size:15.5px;opacity:.95}
.cta .btn-white{color:var(--red-dark)}

/* Footer */
.footer{background:var(--navy-deep);color:#C9D1FF;margin-top:88px;padding:64px 0 0}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.chip-logo{display:inline-block;background:#fff;border-radius:12px;padding:10px 16px;margin-bottom:16px}
.chip-logo img{height:44px;width:auto}
.footer p{font-size:14px;line-height:2;max-width:340px}
.footer h4{margin:0 0 14px;color:#fff;font-size:16px;font-weight:700}
.footer li{margin-bottom:6px;font-size:14px}
.footer a:hover{color:#fff;text-decoration:underline}
.contact li{display:flex;gap:10px;align-items:flex-start}
.contact .ico{width:18px;height:18px;margin-top:6px;color:#fff}
.copy{margin-top:48px;border-top:1px solid rgba(255,255,255,.14);padding:20px 0;font-size:13px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* Breadcrumbs */
.crumbs{display:flex;flex-wrap:wrap;gap:6px;font-size:13.5px;color:var(--muted);margin:0 0 18px;padding:0;list-style:none}
.crumbs li+li::before{content:"/";margin-inline-end:6px;color:#9AA0C4}
.crumbs a:hover{color:var(--red)}
.crumbs [aria-current]{color:var(--ink);font-weight:700}

/* Product Category Page */
.pagehead{background:var(--tint);padding:24px 0 36px;border-bottom:1px solid var(--line)}
.pagehead-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:40px;align-items:end}
.pagehead h1{font-size:36px;line-height:1.5;font-weight:800;color:var(--navy-deep)}
.pagehead .sub{font-size:15px;font-weight:700;color:var(--red);margin:2px 0 12px}
.pagehead .intro{color:var(--muted);max-width:700px}
.pagehead-side{display:flex;flex-direction:column;gap:16px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.facts li{background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 10px;text-align:center}
.facts b{display:block;font-size:20px;font-weight:800;color:var(--navy-deep);line-height:1.5}
.facts span{font-size:12.5px;color:var(--muted)}

.tools{padding:28px 0 0}
.tfilter{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:14px;align-items:end;background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px}
.tfilter label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px}
.tfilter select{width:100%;min-height:48px;border:1px solid var(--line);border-radius:10px;background:var(--tint);font:inherit;font-size:14.5px;color:var(--ink);padding:0 14px}
.tfilter select:hover{border-color:var(--navy)}
.tfilter .btn{min-height:48px}
.jump{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin-top:16px;font-size:14px;font-weight:700;color:var(--navy-deep)}
.jump ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.jump a{display:inline-flex;align-items:center;min-height:38px;padding:0 16px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:500;color:var(--ink)}
.jump a:hover{border-color:var(--navy);color:var(--navy)}

.tables{padding:28px 0 40px}
.mfr{border:1px solid var(--line);border-radius:18px;background:#fff;margin-bottom:28px;overflow:hidden;scroll-margin-top:16px}
.mfr-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 24px;border-bottom:1px solid var(--line)}
.mfr-logo{width:64px;height:64px;border:1px dashed #B9C0DD;border-radius:12px;display:grid;place-items:center;font-size:12px;color:var(--muted);flex:none;background:#fff}
.mfr-title{flex:1;min-width:200px}
.mfr-title h2{font-size:21px;font-weight:800;color:var(--navy-deep);line-height:1.6}
.mfr-title p{font-size:13.5px;color:var(--muted)}
.mfr-tags{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.mfr-tags li{background:var(--tint);color:var(--navy);border-radius:8px;padding:2px 12px;font-size:13px;font-weight:700}
.mfr-count{font-size:13.5px;color:var(--muted);white-space:nowrap}

.tscroll{overflow-x:auto}
.ptable{width:100%;border-collapse:collapse;font-size:14.5px}
.ptable th{background:var(--tint);color:var(--navy-deep);font-size:13px;font-weight:700;text-align:right;padding:12px 16px;white-space:nowrap}
.ptable td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:middle}
.ptable tbody tr:hover{background:#F8F9FD}
.pname strong{display:block;font-weight:700;color:var(--navy-deep);line-height:1.7}
.pname strong a:hover{color:var(--red)}
.upd{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.upd .ico{width:13px;height:13px;stroke-width:2}
.price{white-space:nowrap}
.price b{font-size:16px;font-weight:800;color:var(--navy-deep)}
.price small{font-size:12px;color:var(--muted)}
.callme{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:8px;background:#FCE9EA;color:#A82229;font-size:13.5px;font-weight:700;white-space:nowrap}
.callme:hover{background:var(--red);color:#fff}
.rq{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border:1.5px solid var(--navy);border-radius:10px;color:var(--navy);font-size:13.5px;font-weight:700;white-space:nowrap}
.rq:hover{background:var(--navy);color:#fff}

.faq-list{display:grid;gap:12px;max-width:900px}
.faq-list details{border:1px solid var(--line);border-radius:14px;background:#fff;padding:0 22px}
.faq-list summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;font-weight:700;color:var(--navy-deep)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:24px;font-weight:500;color:var(--red);line-height:1}
.faq-list details[open] summary::after{content:"\2212"}
.faq-list details[open]{border-color:var(--navy)}
.faq-list details p{padding:0 0 20px;color:var(--muted);font-size:15px}

.rel-list{display:flex;flex-wrap:wrap;gap:12px;margin:0;padding:0;list-style:none}
.rel-list a{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 20px;border:1px solid var(--line);border-radius:12px;font-weight:700;color:var(--navy-deep);background:#fff}
.rel-list a:hover{border-color:var(--navy);box-shadow:0 8px 20px rgba(34,48,127,.1)}
.rel-list .ico{color:var(--red)}

/* Single Product Page */
.page{padding-top:0;padding-bottom:0;padding:0}
.pdp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;padding:6px 0 40px}
.g-main{position:relative;aspect-ratio:4/3;border:1px solid var(--line);border-radius:20px;background:#F6F7FC;display:grid;place-items:center;padding:20px;overflow:hidden}
.g-main img{max-width:100%;max-height:100%;object-fit:contain}
.g-main svg{width:100%;height:100%}
.g-note{position:absolute;bottom:14px;inset-inline-start:16px;font-size:12px;color:var(--muted)}
.g-thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:12px}
.g-thumb{aspect-ratio:1;border:1.5px solid var(--line);border-radius:14px;background:#fff;color:var(--navy);display:grid;place-items:center;cursor:pointer;padding:0}
.g-thumb .ico{width:30px;height:30px}
.g-thumb:hover{border-color:var(--navy)}
.g-thumb.is-on{border-color:var(--red);box-shadow:0 0 0 2px #FCE9EA}
.chips-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.chip{display:inline-flex;align-items:center;gap:6px;background:var(--tint);color:var(--navy);border-radius:8px;padding:2px 12px;font-size:13px;font-weight:700}
.chip.red{background:#FCE9EA;color:#A82229}
.buy h1{font-size:30px;font-weight:800;line-height:1.6;color:var(--navy-deep)}
.short{color:var(--muted);margin:8px 0 18px}
.keyspecs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 20px;padding:0;list-style:none}
.keyspecs li{background:var(--tint);border-radius:12px;padding:10px 14px;display:flex;flex-direction:column;line-height:1.7}
.keyspecs span{font-size:12.5px;color:var(--muted)}
.keyspecs b{font-size:14.5px;color:var(--navy-deep);font-weight:700}
.pricebox{border:1px solid var(--line);border-radius:18px;padding:20px;background:#fff;box-shadow:0 10px 26px rgba(20,28,79,.06)}
.pb-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.pb-top small{font-size:13px;color:var(--muted)}
.pb-price{display:flex;align-items:baseline;gap:8px}
.pb-price b{font-size:30px;font-weight:800;color:var(--navy-deep);line-height:1.4}
.pb-price span{font-size:14px;color:var(--muted)}
.pb-note{font-size:13px;color:var(--muted);margin:6px 0 16px}
.qform{display:grid;grid-template-columns:1fr 130px;gap:12px;align-items:end}
.qform .btn{grid-column:1 / -1;min-height:52px}
.qf label{display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px}
.qf input,.qf select{width:100%;min-height:50px;border:1px solid var(--line);border-radius:10px;background:var(--tint);font:inherit;font-size:15px;color:var(--ink);padding:0 14px}
.qf input:hover,.qf select:hover{border-color:var(--navy)}
.pb-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.pb-links .btn{flex:1 1 180px}
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 0;padding:0;list-style:none}
.trust li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--navy-deep)}
.trust .ico{width:26px;height:26px;color:var(--red);stroke-width:1.5}

.subnav{position:sticky;top:0;z-index:30;background:#fff;border-bottom:1px solid var(--line);margin-top:8px}
.subnav ul{display:flex;gap:6px;overflow-x:auto;margin:0;padding:0;list-style:none;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:flex;align-items:center;min-height:52px;padding:0 18px;font-weight:700;font-size:14.5px;color:var(--muted);border-bottom:3px solid transparent;white-space:nowrap}
.subnav a:hover{color:var(--red);border-bottom-color:var(--red)}
.psec{padding-top:44px;scroll-margin-top:60px}
.sec-title{font-size:24px;font-weight:800;color:var(--navy-deep);line-height:1.6;margin:0 0 20px}
.prose-sm p{color:var(--muted);max-width:820px;margin:0 0 14px}
.spec{width:100%;max-width:820px;border-collapse:collapse;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.spec th{width:34%;background:var(--tint);text-align:right;font-weight:700;color:var(--navy-deep);padding:12px 18px;font-size:14px;border-bottom:1px solid var(--line)}
.spec td{padding:12px 18px;font-size:14.5px;border-bottom:1px solid var(--line)}
.spec tr:last-child th,.spec tr:last-child td{border-bottom:0}
.mfr-box{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.rel-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.postcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:box-shadow .15s,border-color .15s}
.postcard:hover{border-color:var(--navy);box-shadow:0 10px 24px rgba(34,48,127,.12)}
.postcard .thumb-ph{aspect-ratio:16/10;position:relative;background:var(--tint);display:grid;place-items:center}
.postcard .thumb-ph img{width:100%;height:100%;object-fit:cover}
.postcard-body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.postcard h3{font-size:15.5px;line-height:1.8;font-weight:700;color:var(--navy-deep)}
.postcard p{font-size:13.5px;color:var(--muted);line-height:1.9}
.postcard .meta{margin-top:auto;padding-top:6px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
.rel-price{margin-top:auto;font-size:13.5px;font-weight:800;color:var(--red)}
.sticky-bar{display:none}

/* Blog / Category Page */
.bhead{background:var(--tint);padding:24px 0 28px;border-bottom:1px solid var(--line)}
.bhead-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:40px;align-items:end}
.bhead h1{font-size:34px;line-height:1.5;font-weight:800;color:var(--navy-deep)}
.bhead .intro{color:var(--muted);max-width:720px;margin-top:8px}
.bsearch{display:flex;align-items:center;gap:10px;min-height:52px;padding:0 16px;background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--muted)}
.bsearch input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:14.5px;color:var(--ink);min-height:48px}
.bsearch input:focus-visible{outline:none}
.bsearch:focus-within{border-color:var(--navy)}
.bchips{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none}
.bchips a{display:inline-flex;align-items:center;min-height:42px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:14px;font-weight:500;color:var(--ink);transition:background .15s,color .15s,border-color .15s}
.bchips a:hover{border-color:var(--navy);color:var(--navy)}
.bchips a.on,.bchips a[aria-current]{background:var(--navy);border-color:var(--navy);color:#fff;font-weight:700}

.blog-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start}
.featured{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:#fff;transition:box-shadow .15s,border-color .15s}
.featured:hover{border-color:var(--navy);box-shadow:0 12px 28px rgba(34,48,127,.12)}
.feat-img{min-height:280px;background:var(--tint);display:grid;place-items:center}
.feat-img img{width:100%;height:100%;object-fit:cover}
.feat-img .ico{width:84px;height:84px;color:var(--navy)}
.feat-body{padding:28px;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.feat-body h2{font-size:24px;font-weight:800;line-height:1.7;color:var(--navy-deep)}
.feat-body p{color:var(--muted);font-size:15px}
.read{display:inline-flex;align-items:center;gap:8px;margin-top:auto;font-weight:700;font-size:14px;color:var(--red)}
.read .ico{width:16px;height:16px;stroke-width:2}
.list-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:40px 0 20px}
.post-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}

.pager{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:36px}
.pg,.page-numbers{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-weight:700;font-size:14px;color:var(--ink)}
a.pg:hover,a.page-numbers:hover{border-color:var(--navy);color:var(--navy)}
.pg.on,.page-numbers.current{background:var(--navy);border-color:var(--navy);color:#fff}
.pg.dots,.page-numbers.dots{border-color:transparent;background:transparent}

/* Sidebar */
.side{display:flex;flex-direction:column;gap:20px;position:sticky;top:16px}
.wd{padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.wd h3{font-size:16px;font-weight:800;color:var(--navy-deep);margin:0 0 12px}
.catlist,.poplist{margin:0;padding:0;list-style:none}
.catlist a{display:flex;align-items:center;justify-content:space-between;min-height:44px;font-size:14.5px;border-bottom:1px solid var(--line)}
.catlist li:last-child a{border-bottom:0}
.catlist a:hover{color:var(--red)}
.catlist b{font-size:12.5px;font-weight:700;color:var(--muted);background:var(--tint);border-radius:8px;padding:0 10px}
.poplist a{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--line)}
.poplist li:last-child a{border-bottom:0}
.pop-n{flex:none;width:30px;height:30px;border-radius:8px;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:13px;font-weight:700}
.pop-t{font-size:14px;line-height:1.8;color:var(--navy-deep);font-weight:500}
.poplist a:hover .pop-t{color:var(--red)}
.cta-card{background:var(--navy);color:#fff;border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:12px}
.cta-card h3{font-size:18px;font-weight:800;line-height:1.7}
.cta-card p{font-size:13.5px;color:#C9D1FF;line-height:1.9}
.side-call{display:flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:14px;color:#fff}
.side-call .ico{width:18px;height:18px}

/* Single Article */
.read-progress{position:fixed;top:0;inset-inline:0;height:4px;z-index:120;background:transparent}
.read-progress span{display:block;height:100%;width:0;background:var(--red);transition:width .08s linear}
.art-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
.art{min-width:0}
.art-head h1{font-size:36px;line-height:1.6;font-weight:800;color:var(--navy-deep);margin:12px 0}
.art-head .lead{font-size:17px;color:var(--muted);line-height:2;margin-bottom:16px}
.art-meta{display:flex;flex-wrap:wrap;gap:16px;color:var(--muted);font-size:13.5px;margin-bottom:20px}
.art-meta span{display:inline-flex;align-items:center;gap:6px}
.art-meta .ico{width:16px;height:16px}
.cover{aspect-ratio:16/8;border-radius:20px;margin:24px 0;position:relative;background:var(--tint);display:grid;place-items:center;overflow:hidden}
.cover img{width:100%;height:100%;object-fit:cover}
.cover .ico{width:96px;height:96px;color:var(--navy)}
.cover figcaption{position:absolute;bottom:12px;inset-inline-start:16px;font-size:12px;color:var(--muted);background:rgba(255,255,255,.9);padding:4px 10px;border-radius:6px}

.toc-inline{background:var(--tint);border-radius:14px;padding:18px 22px;margin-bottom:28px}
.toc-inline strong{display:block;color:var(--navy-deep);margin-bottom:8px;font-size:15.5px}
.toc-inline ol{margin:0;padding:0 18px 0 0;display:grid;gap:4px}
.toc-inline a{display:block;padding:4px 0;font-size:14.5px;color:var(--ink)}
.toc-inline a:hover{color:var(--red)}

.prose{font-size:16.5px;line-height:2.1;color:#2A2F55}
.prose h2{font-size:25px;font-weight:800;color:var(--navy-deep);line-height:1.7;margin:38px 0 10px;scroll-margin-top:20px}
.prose h3{font-size:20px;font-weight:800;color:var(--navy-deep);line-height:1.7;margin:24px 0 10px}
.prose p{margin:0 0 16px}
.prose ul{margin:0 0 18px;padding:0 22px 0 0;list-style:disc}
.prose ol{margin:0 0 18px;padding:0 22px 0 0}
.prose li{margin-bottom:6px}
.prose li::marker{color:var(--red)}
.prose img{border-radius:14px;margin:20px 0}
.cmp{width:100%;border-collapse:collapse;border:1px solid var(--line);font-size:15px;min-width:520px;margin:20px 0}
.cmp th,.cmp td{padding:12px 16px;border:1px solid var(--line);text-align:right;line-height:1.9}
.cmp thead th{background:var(--navy);color:#fff;border-color:var(--navy);font-weight:700}
.cmp tbody th{background:var(--tint);color:var(--navy-deep);font-weight:700;white-space:nowrap}
.callout{background:#FFF4F4;border-inline-start:4px solid var(--red);border-radius:12px;padding:16px 20px;margin:20px 0}
.callout strong{color:#A82229;display:block;font-size:15.5px}
.callout p{margin:4px 0 0;font-size:15px}
.inline-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;background:var(--navy);color:#fff;border-radius:18px;padding:22px 26px;margin:30px 0}
.inline-cta strong{display:block;font-size:18px;line-height:1.7}
.inline-cta span{font-size:14px;color:#C9D1FF}

.tags{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:28px 0 20px;font-size:13.5px;color:var(--muted)}
.tags a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink)}
.tags a:hover{border-color:var(--navy);color:var(--navy)}
.share{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding:16px 20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:20px}
.share-btns{display:flex;gap:10px;flex-wrap:wrap}
.share-btn{display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 14px;border-radius:8px;background:var(--tint);font-size:13px;font-weight:700;color:var(--navy)}
.share-btn:hover{background:var(--navy);color:#fff}
.author{display:flex;gap:16px;align-items:flex-start;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.author .av{flex:none;width:64px;height:64px;border-radius:50%;background:var(--tint);color:var(--navy);display:grid;place-items:center;overflow:hidden}
.author strong{display:block;color:var(--navy-deep);font-size:16px}
.author span{font-size:13px;color:var(--red);font-weight:700}
.author p{font-size:14px;color:var(--muted);margin-top:6px}
.related{padding-top:56px}
.rel3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}

/* Quote / Proforma Page */
.qhead{background:var(--tint);padding:24px 0 28px;border-bottom:1px solid var(--line)}
.qhead h1{font-size:34px;line-height:1.5;font-weight:800;color:var(--navy-deep)}
.qhead .intro{color:var(--muted);max-width:720px;margin-top:6px}
.qpage{padding-top:32px;padding-bottom:40px}
.quote-layout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:36px;align-items:start}
.qmain{min-width:0}
.qsec{background:#fff;border:1px solid var(--line);border-radius:20px;padding:28px;margin-bottom:20px}
.qsec h2{display:flex;align-items:center;gap:12px;font-size:21px;font-weight:800;color:var(--navy-deep);line-height:1.6;margin:0 0 18px}
.qsec h2 .n{width:36px;height:36px;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-size:16px;flex:none}
.sec-sub{color:var(--muted);font-size:14.5px;margin:-8px 0 18px}

.alert{background:#FFF4F4;border:1px solid #F2B8BB;border-inline-start:4px solid var(--red);border-radius:12px;padding:14px 18px;margin-bottom:20px;color:#8E1D23;font-weight:700;font-size:14.5px}
.alert ul{margin:6px 0 0;padding:0 18px 0 0;font-weight:500;list-style:disc}
.alert[hidden]{display:none}

.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.fld{min-width:0}
.fld label{display:block;font-size:13.5px;font-weight:700;color:var(--navy);margin-bottom:6px}
.fld[hidden]{display:none}
.req{color:var(--red);margin-inline-start:2px}
.opt-t{font-weight:400;color:var(--muted);font-size:12.5px}
.fld input[type=text],.fld input[type=tel],.fld input[type=email],.fld select,.fld textarea{width:100%;min-height:50px;border:1px solid var(--line);border-radius:10px;background:var(--tint);font:inherit;font-size:15px;color:var(--ink);padding:0 14px;transition:border-color .15s,background .15s}
.fld textarea{min-height:110px;padding:12px 14px;resize:vertical;line-height:1.9}
.fld select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235A5F85' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 14px center;padding-left:40px}
.fld input:hover,.fld select:hover,.fld textarea:hover{border-color:var(--navy)}
.fld input:focus,.fld select:focus,.fld textarea:focus{background:#fff;border-color:var(--navy);outline:3px solid rgba(34,48,127,.18);outline-offset:0}
.ltr-in{text-align:left}
.ltr-in::placeholder{text-align:left}
.hint{font-size:12.5px;color:var(--muted);margin:6px 0 0}
.err{font-size:13px;font-weight:700;color:#B3262D;margin:6px 0 0;display:flex;align-items:center;gap:6px}
.err[hidden]{display:none}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--red);background:#FFF8F8}
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}

fieldset{border:0;margin:0 0 18px;padding:0;min-width:0}
fieldset legend{font-size:13.5px;font-weight:700;color:var(--navy);padding:0;margin-bottom:8px}
.seg,.chk{display:flex;flex-wrap:wrap;gap:10px}
.seg legend,.chk legend{width:100%}
.opt{position:relative;display:inline-flex;cursor:pointer}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border:1.5px solid var(--line);border-radius:12px;background:#fff;font-size:14.5px;font-weight:500;color:var(--ink);transition:border-color .15s,background .15s,color .15s}
.opt:hover span{border-color:var(--navy)}
.opt input:checked+span{border-color:var(--navy);background:var(--navy);color:#fff;font-weight:700}
.opt input:focus-visible+span{outline:3px solid var(--red);outline-offset:2px}

.rows-head{display:grid;grid-template-columns:36px 1.2fr 1.8fr 1.2fr .8fr .9fr 44px;gap:10px;font-size:12.5px;font-weight:700;color:var(--muted);padding:0 0 8px}
.rows{display:grid;gap:12px}
.qrow{display:grid;grid-template-columns:36px 1.2fr 1.8fr 1.2fr .8fr .9fr 44px;gap:10px;align-items:start;padding:0}
.qrow .rn{width:36px;height:50px;display:grid;place-items:center;font-weight:800;color:var(--navy);font-size:15px}
.lbl-r{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.qrow .fld input,.qrow .fld select{padding-inline:12px}
.qrow .fld select{padding-left:34px;background-position:left 10px center}
.rm{width:44px;height:50px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--muted);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.rm:hover{background:#FCE9EA;color:#A82229;border-color:#F2B8BB}
.rm .ico{width:19px;height:19px;stroke-width:1.8}
.rm[hidden]{display:none}
.add-row{display:inline-flex;align-items:center;gap:8px;min-height:46px;margin-top:14px;padding:0 20px;border:1.5px dashed var(--navy);border-radius:12px;background:transparent;color:var(--navy);font:inherit;font-weight:700;font-size:14.5px;cursor:pointer;transition:background .15s,color .15s}
.add-row:hover{background:var(--navy);color:#fff;border-style:solid}
.add-row .ico{width:18px;height:18px;stroke-width:2.2}

.upload{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.up-head{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.up-head strong{color:var(--navy-deep);font-size:15.5px}
.up-head span{font-size:13px;color:var(--muted)}
.drop{display:flex;align-items:center;justify-content:center;gap:12px;min-height:96px;border:2px dashed #B9C0DD;border-radius:14px;background:var(--tint);color:var(--muted);font-size:14.5px;cursor:pointer;padding:16px;text-align:center;transition:border-color .15s,background .15s}
.drop b{color:var(--navy)}
.drop:hover,.drop.over{border-color:var(--navy);background:#fff}
.drop .ico{width:30px;height:30px;color:var(--navy);flex:none}
#f-files{position:absolute;opacity:0;width:1px;height:1px}
.files{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.files li{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fff;font-size:14px}
.files li .ico{width:20px;height:20px;color:var(--navy);flex:none}
.files li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files li small{color:var(--muted);font-size:12.5px}
.files button{width:34px;height:34px;border:0;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer;display:grid;place-items:center}
.files button:hover{background:#FCE9EA;color:#A82229}
.files button .ico{width:17px;height:17px;color:inherit}

.submit-box{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px 28px;display:grid;gap:16px}
.cb{display:flex}
.cb span{display:flex;align-items:flex-start;gap:12px;min-height:0;padding:0;border:0;background:transparent;font-weight:500;line-height:1.9}
.cb input:checked+span{background:transparent;color:var(--ink);font-weight:500}
.cb .box{flex:none;width:24px;height:24px;margin-top:2px;border:1.5px solid #9AA0C4;border-radius:7px;display:grid;place-items:center;background:#fff;color:transparent;transition:background .15s,border-color .15s}
.cb .box .ico{width:15px;height:15px;stroke-width:3}
.cb input:checked+span .box{background:var(--navy);border-color:var(--navy);color:#fff}
.cb input:focus-visible+span .box{outline:3px solid var(--red);outline-offset:2px}
.submit{min-height:56px;font-size:16px;width:100%}
.fine{font-size:12.5px;color:var(--muted);text-align:center}

.done{background:#fff;border:1px solid var(--line);border-radius:20px;padding:48px 28px;text-align:center}
.done[hidden]{display:none}
.done-ico{width:76px;height:76px;margin:0 auto 18px;border-radius:50%;background:#E8F6EE;color:#1E7B46;display:grid;place-items:center}
.done-ico .ico{width:38px;height:38px;stroke-width:2.4}
.done h2{font-size:26px;font-weight:800;color:var(--navy-deep);margin:0 0 8px}
.done-lead{color:var(--muted);max-width:520px;margin:0 auto 14px}
.done-ref{font-size:16px;margin-bottom:14px;color:var(--red);font-weight:700}
.done-ref[hidden]{display:none}
.done-sum{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;max-width:460px;margin:20px auto;padding:18px 22px;background:var(--tint);border-radius:14px;text-align:right;font-size:14.5px}
.done-sum dt{color:var(--muted)}
.done-sum dd{margin:0;font-weight:700;color:var(--navy-deep)}
.done-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}

.qside{display:flex;flex-direction:column;gap:20px;position:sticky;top:16px}
.steps{margin:0;padding:0;list-style:none;display:grid;gap:14px}
.steps li{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:1.9}
.steps b{flex:none;width:28px;height:28px;border-radius:50%;background:var(--tint);color:var(--navy);display:grid;place-items:center;font-size:13px}
.sla{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.trust2{margin:0;list-style:none;display:grid;gap:12px}
.trust2 li{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:var(--navy-deep)}
.trust2 .ico{width:24px;height:24px;color:var(--red);stroke-width:1.5}

/* Responsive Media Queries */
@media (max-width:1100px){
  .hero h1{font-size:38px}
  .cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .features{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 16px}
  .articles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brands{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1fr 1fr}
  .filter{grid-template-columns:1fr 1fr}
  .filter .btn{width:100%}
  .pagehead-grid{grid-template-columns:1fr;gap:24px}
  .tfilter{grid-template-columns:1fr 1fr}
  .tfilter .btn{width:100%}
  .mega-grid{grid-template-columns:230px minmax(0,1fr)}
  .mfeature{display:none}
  .blog-layout{grid-template-columns:minmax(0,1fr)}
  .side{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .side .cta-card{grid-column:1 / -1}
  .bhead-grid{grid-template-columns:1fr;gap:20px}
  .art-layout{grid-template-columns:minmax(0,1fr);gap:32px}
  .quote-layout{grid-template-columns:minmax(0,1fr)}
  .qside{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .qside .trust2{grid-column:1 / -1}
}
@media (max-width:820px){
  .topbar{display:none}
  .header-main{flex-wrap:wrap;gap:14px}
  .logo{order:1}
  .call{order:2;margin-inline-start:auto}
  .call small{display:none}
  form.search{order:3;flex-basis:100%}
  .nav .wrap{flex-wrap:nowrap;gap:10px;padding-top:8px;padding-bottom:8px}
  .nav ul.main-menu,.mega,.mega-overlay,.nav .nav-trigger{display:none}
  .m-menu{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:44px;padding:0 18px;border:0;border-radius:10px;background:var(--navy);color:#fff;font:inherit;font-weight:700;font-size:14.5px;cursor:pointer}
  .m-menu .ico{width:20px;height:20px;stroke-width:1.8}
  .nav a.nav-cta{flex:1 1 auto;margin:0;min-height:44px;padding:0 14px}
  .hero{padding:44px 0 100px}
  .hero-grid{grid-template-columns:1fr}
  .hero-art{order:-1}
  .hero-img{max-width:320px;margin:0 auto}
  .hero-art svg{max-width:280px}
  .hero-disc{display:none}
  .hero h1{font-size:32px}
  .about{grid-template-columns:1fr;gap:32px}
  .banner{grid-template-columns:1fr;padding:32px 24px}
  .banner svg{width:170px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .head h2,.about h2{font-size:26px}
  .cta{padding:32px 24px}
  .pagehead h1{font-size:28px}
  .mfr-head{padding:18px 16px}
  .tscroll{overflow:visible}
  .ptable,.ptable tbody,.ptable tr,.ptable td{display:block;width:100%}
  .ptable thead{display:none}
  .ptable tbody{padding:14px 14px 4px}
  .ptable tr{border:1px solid var(--line);border-radius:12px;margin:0 0 12px;padding:6px 14px}
  .ptable tr:hover{background:#fff}
  .ptable td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:9px 0;border:0;border-bottom:1px dashed var(--line);font-size:14px}
  .ptable td::before{content:attr(data-label);color:var(--muted);font-size:13px}
  .ptable td.pname{display:block;padding:10px 0}
  .ptable td.pname::before{content:none}
  .ptable td.act{border-bottom:0;padding:12px 0 8px}
  .ptable td.act .rq{width:100%;justify-content:center}
  .pdp{grid-template-columns:minmax(0,1fr);gap:28px}
  .rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .buy h1{font-size:24px}
  .sticky-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;position:fixed;inset-inline:0;bottom:0;z-index:50;background:#fff;border-top:1px solid var(--line);padding:10px 16px;box-shadow:0 -8px 24px rgba(20,28,79,.12)}
  .sb-price small{display:block;font-size:11.5px;color:var(--muted);line-height:1.4}
  .sb-price b{font-size:15px;color:var(--navy-deep);line-height:1.5}
  .sticky-bar .btn{min-height:46px;padding:0 18px}
  .footer{padding-bottom:70px}
  .rows-head{display:none}
  .qrow{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;border:1px solid var(--line);border-radius:16px;padding:14px;background:#FAFBFE;position:relative}
  .qrow .rn{position:absolute;top:8px;inset-inline-start:12px;width:auto;height:auto;font-size:13px;color:var(--muted)}
  .qrow .rn::before{content:"ردیف "}
  .qrow .c-cat,.qrow .c-desc,.qrow .c-std{grid-column:1 / -1}
  .qrow .c-cat{margin-top:22px}
  .qrow .rm{position:absolute;top:6px;inset-inline-end:8px;width:38px;height:38px;border:0;background:transparent}
  .lbl-r{position:static;width:auto;height:auto;overflow:visible;clip:auto;white-space:normal;display:block;font-size:13px;font-weight:700;color:var(--navy);margin-bottom:6px}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .cats{grid-template-columns:1fr;gap:14px}
  .features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .articles{grid-template-columns:1fr}
  .filter{grid-template-columns:1fr;padding:18px}
  .head{flex-direction:column;align-items:flex-start}
  .footer-grid{grid-template-columns:1fr}
  .stat{justify-content:flex-start}
  .std{padding:26px 22px}
  section.block{padding-top:64px}
  .logo img{height:46px}
  .tfilter{grid-template-columns:1fr}
  .facts b{font-size:17px}
  .keyspecs{grid-template-columns:1fr 1fr}
  .trust{grid-template-columns:1fr}
  .rel-grid{grid-template-columns:1fr 1fr;gap:12px}
  .qform{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr}
  .featured{grid-template-columns:1fr}
  .feat-img{min-height:200px}
  .side{grid-template-columns:1fr}
  .art-head h1{font-size:26px}
  .rel3{grid-template-columns:1fr}
  .qsec{padding:20px 16px}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .qside{grid-template-columns:minmax(0,1fr)}
  .submit-box{padding:20px 16px}
}

/* ========================================================
   OFFCANVAS CART & QUOTE SYSTEM (سبد استعلام قیمت)
   ======================================================== */
.header-actions{display:flex;align-items:center;gap:12px}
.cart-trigger-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 16px;
  border-radius:10px;
  background:var(--tint);
  border:1.5px solid var(--line);
  color:var(--navy);
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:all .18s;
  white-space:nowrap;
}
.cart-trigger-btn:hover{background:#fff;border-color:var(--navy)}
.cart-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  font-size:12px;
  font-weight:800;
}

/* Floating Action Cart Button */
.fab-cart{
  position:fixed;
  bottom:28px;
  left:28px;
  z-index:90;
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:0 20px;
  border-radius:999px;
  background:var(--red);
  color:#fff;
  border:0;
  font-weight:700;
  font-size:14.5px;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(216,53,59,.38);
  transition:all .2s ease;
}
.fab-cart:hover{background:var(--red-dark);transform:scale(1.04)}
.fab-cart .cart-badge{background:#fff;color:var(--red)}

/* Add to Quote Button */
.btn-add-quote{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:36px;
  padding:0 14px;
  border-radius:8px;
  background:var(--navy);
  color:#fff;
  border:0;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  transition:all .18s;
  white-space:nowrap;
}
.btn-add-quote:hover{background:var(--red);transform:translateY(-1px);box-shadow:0 4px 12px rgba(216,53,59,.25)}
.btn-add-quote .ico{width:16px;height:16px}
td.act .btn-add-quote{width:100%;justify-content:center}

/* Toast Message */
.toast-msg{
  position:fixed;
  bottom:28px;
  right:28px;
  z-index:1100;
  background:var(--navy-deep);
  color:#fff;
  border-radius:12px;
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 12px 30px rgba(20,28,79,.3);
  transform:translateY(100px);
  opacity:0;
  visibility:hidden;
  transition:all .26s cubic-bezier(.16,1,.3,1);
}
.toast-msg.show{transform:none;opacity:1;visibility:visible}
.toast-ico{width:28px;height:28px;border-radius:50%;background:#10B981;color:#fff;display:grid;place-items:center;flex:none}

/* Offcanvas Overlay & Panel */
.cart-offcanvas{
  position:fixed;
  inset:0;
  z-index:1000;
  visibility:hidden;
  pointer-events:none;
  transition:visibility .28s;
}
.cart-offcanvas.is-open{
  visibility:visible;
  pointer-events:auto;
}
.cart-backdrop{
  position:absolute;
  inset:0;
  background:rgba(20,28,79,.55);
  backdrop-filter:blur(3px);
  opacity:0;
  transition:opacity .28s ease;
}
.cart-offcanvas.is-open .cart-backdrop{
  opacity:1;
}
.cart-panel{
  position:absolute;
  inset-block:0;
  left:0;
  width:min(92vw,440px);
  background:#fff;
  box-shadow:20px 0 60px rgba(20,28,79,.3);
  display:flex;
  flex-direction:column;
  transform:translateX(-100%);
  transition:transform .28s cubic-bezier(.16,1,.3,1);
}
.cart-offcanvas.is-open .cart-panel{
  transform:translateX(0);
}

.cart-header{
  padding:18px 22px;
  background:var(--navy-deep);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex:none;
}
.cart-header-title{display:flex;align-items:center;gap:10px}
.cart-header-title strong{font-size:16.5px;font-weight:800}
.cart-header-count{
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:12px;
  font-weight:700;
  padding:2px 10px;
  border-radius:999px;
}
.cart-close-btn{
  width:36px;
  height:36px;
  border-radius:9px;
  border:0;
  background:rgba(255,255,255,.12);
  color:#fff;
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:background .15s;
}
.cart-close-btn:hover{background:var(--red)}

.cart-tip{
  background:#EFF6FF;
  border-bottom:1px solid #DBEAFE;
  padding:12px 20px;
  font-size:12.5px;
  color:#1E40AF;
  line-height:1.6;
  display:flex;
  align-items:flex-start;
  gap:10px;
  flex:none;
}
.cart-tip .ico{color:#2563EB;margin-top:2px}

.cart-body{
  flex:1;
  overflow-y:auto;
  padding:18px 20px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cart-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
  transition:border-color .15s,box-shadow .15s,transform .2s;
  position:relative;
}
.cart-item:hover{border-color:#C5CAE3;box-shadow:0 4px 14px rgba(20,28,79,.06)}
.cart-item.removing{opacity:0;transform:scale(.92)}

.ci-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.ci-info{flex:1;min-width:0}
.ci-cat{font-size:11px;font-weight:700;color:var(--red);margin-bottom:2px;display:inline-block}
.ci-title{font-size:14.5px;font-weight:700;color:var(--navy-deep);margin:0 0 4px;line-height:1.5}
.ci-specs{font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:4px 10px}

.ci-del-btn{
  border:0;
  background:transparent;
  color:#94A3B8;
  cursor:pointer;
  padding:6px;
  border-radius:8px;
  transition:all .15s;
}
.ci-del-btn:hover{color:var(--red);background:#FDE8E9}

.ci-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-top:10px;
  border-top:1px dashed var(--line);
  margin-top:4px;
}

.qty-stepper{
  display:inline-flex;
  align-items:center;
  background:var(--tint);
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
}
.qty-btn{
  width:32px;
  height:32px;
  border:0;
  background:transparent;
  color:var(--navy);
  font-weight:700;
  font-size:16px;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:background .15s;
}
.qty-btn:hover{background:var(--line)}
.qty-input{
  width:54px;
  height:32px;
  border:0;
  background:transparent;
  text-align:center;
  font-family:inherit;
  font-weight:700;
  font-size:13.5px;
  color:var(--navy-deep);
}
.qty-input:focus{outline:none}

.unit-select{
  border:1px solid var(--line);
  background:var(--tint);
  border-radius:8px;
  height:32px;
  padding:0 8px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  cursor:pointer;
}

.ci-status{
  font-size:11.5px;
  font-weight:600;
  color:#10B981;
  display:flex;
  align-items:center;
  gap:4px;
}
.ci-status::before{content:"";width:6px;height:6px;border-radius:50%;background:#10B981}

.cart-empty{
  text-align:center;
  padding:48px 20px;
  display:none;
  flex-direction:column;
  align-items:center;
  gap:14px;
  margin:auto 0;
}
.cart-empty.show{display:flex}
.cart-empty-ico{
  width:72px;
  height:72px;
  border-radius:50%;
  background:var(--tint);
  color:var(--muted);
  display:grid;
  place-items:center;
}
.cart-empty-ico svg{width:36px;height:36px}
.cart-empty h3{font-size:18px;font-weight:800;color:var(--navy-deep);margin:0}
.cart-empty p{font-size:13px;color:var(--muted);margin:0;max-width:280px;line-height:1.7}

.cart-footer{
  background:#fff;
  border-top:1px solid var(--line);
  padding:18px 22px;
  display:flex;
  flex-direction:column;
  gap:14px;
  flex:none;
  box-shadow:0 -6px 20px rgba(20,28,79,.04);
}
.cf-summary{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13.5px;
  color:var(--muted);
}
.cf-summary strong{font-size:16px;color:var(--navy-deep);font-weight:800}

.btn-quote-proceed{
  width:100%;
  min-height:50px;
  border-radius:12px;
  background:var(--red);
  color:#fff;
  font-size:15px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:0;
  cursor:pointer;
  transition:all .18s ease;
  box-shadow:0 8px 20px rgba(216,53,59,.28);
}
.btn-quote-proceed:hover{
  background:var(--red-dark);
  transform:translateY(-1px);
  box-shadow:0 12px 26px rgba(216,53,59,.35);
}
.btn-quote-proceed .ico{width:20px;height:20px}

.cf-secondary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:12.5px;
}
.cf-continue{color:var(--navy);font-weight:700;cursor:pointer;background:none;border:0;padding:0}
.cf-continue:hover{text-decoration:underline}
.cf-clear{color:#94A3B8;cursor:pointer;background:none;border:0;padding:0}
.cf-clear:hover{color:var(--red)}

@media (max-width:768px){
  .header-actions .cart-trigger-btn span:not(.cart-badge){display:none}
  .header-actions .call{display:none}
  .fab-cart{bottom:20px;left:20px;min-height:46px;padding:0 16px;font-size:13.5px}
}

/* ========================================================
   404 Page Template
   ======================================================== */
.error-404-section {
  padding: 50px 0 80px;
  background: linear-gradient(180deg, var(--tint) 0%, #ffffff 100%);
  min-height: calc(100vh - 420px);
}
.error-404-card {
  max-width: 820px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 56px 36px 44px;
  text-align: center;
  box-shadow: 0 15px 35px rgba(20, 28, 79, 0.04);
}
.error-404-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(216, 53, 59, 0.08);
  color: var(--red);
  margin-bottom: 18px;
}
.error-404-num {
  font-size: clamp(64px, 10vw, 96px);
  font-weight: 900;
  line-height: 1;
  color: var(--navy-deep);
  letter-spacing: -2px;
  margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.error-404-title {
  font-size: clamp(20px, 3.5vw, 26px);
  font-weight: 800;
  color: var(--ink);
  margin-bottom: 14px;
}
.error-404-desc {
  font-size: 15px;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 28px;
  line-height: 1.8;
}
.error-404-search {
  max-width: 520px;
  margin: 0 auto 32px;
}
.error-404-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: 38px;
}
.error-404-footer {
  padding-top: 32px;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  text-align: right;
}
@media (max-width: 680px) {
  .error-404-card {
    padding: 36px 20px 28px;
  }
  .error-404-footer {
    grid-template-columns: 1fr;
    text-align: center;
  }
}


/* ==========================================================================
   LIVE SEARCH DROPDOWN & SEARCH PAGE STYLES
   ========================================================================== */

.live-search-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.06);
  z-index: 1000;
  max-height: 420px;
  overflow-y: auto;
  font-family: inherit;
  direction: rtl;
  text-align: right;
  animation: lsFadeDown 0.18s ease-out;
}

@keyframes lsFadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.live-search-list {
  list-style: none;
  margin: 0;
  padding: 6px 0;
}

.live-search-item {
  transition: background 0.15s ease;
  border-bottom: 1px solid #f1f5f9;
}

.live-search-item:last-child {
  border-bottom: none;
}

.live-search-item:hover,
.live-search-item.is-active {
  background: #f8fafc;
}

.live-search-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  text-decoration: none;
  color: #1e293b;
  gap: 12px;
}

.live-search-info {
  flex: 1;
  min-width: 0;
}

.live-search-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}

.live-search-title {
  font-weight: 700;
  font-size: 0.92rem;
  color: #0f172a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-search-title mark {
  background: #fef08a;
  color: #854d0e;
  padding: 0 2px;
  border-radius: 2px;
}

.live-search-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 6px;
  white-space: nowrap;
}

.badge-product {
  background: #e0f2fe;
  color: #0369a1;
}

.badge-category {
  background: #fef3c7;
  color: #b45309;
}

.badge-article {
  background: #f1f5f9;
  color: #475569;
}

.live-search-meta {
  display: block;
  font-size: 0.8rem;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.live-search-price {
  font-weight: 700;
  font-size: 0.85rem;
  color: #0284c7;
  white-space: nowrap;
}

.live-search-loading,
.live-search-empty {
  padding: 18px 16px;
  text-align: center;
  font-size: 0.88rem;
  color: #64748b;
}

.live-search-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #cbd5e1;
  border-top-color: #0284c7;
  border-radius: 50%;
  animation: lsSpin 0.6s linear infinite;
  vertical-align: middle;
  margin-left: 6px;
}

@keyframes lsSpin {
  to { transform: rotate(360deg); }
}

.live-search-footer {
  padding: 10px 14px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  text-align: center;
}

.live-search-view-all {
  color: #0284c7;
  font-size: 0.86rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.live-search-view-all:hover {
  color: #0369a1;
  text-decoration: underline;
}

/* Dedicated Search Page Styles */
.search-page {
  padding: 30px 0 60px;
}

.search-hero {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 32px 24px;
  margin-bottom: 30px;
  text-align: center;
}

.search-hero h1 {
  font-size: 1.6rem;
  color: #0f172a;
  margin: 0 0 16px;
  font-weight: 800;
}

.search-hero-form {
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.search-hero-form input[type="search"] {
  width: 100%;
  height: 52px;
  padding: 0 54px 0 20px;
  border: 2px solid #cbd5e1;
  border-radius: 12px;
  font-size: 1rem;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-hero-form input[type="search"]:focus {
  outline: none;
  border-color: #0284c7;
  box-shadow: 0 0 0 4px rgba(2, 132, 199, 0.15);
}

.search-hero-form button {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  background: #0284c7;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-hero-form button:hover {
  background: #0369a1;
}

.search-summary-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 20px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  margin-bottom: 28px;
  font-size: 0.95rem;
  color: #1e40af;
}

.search-section {
  margin-bottom: 36px;
}

.search-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-section-title .count {
  font-size: 0.85rem;
  background: #e2e8f0;
  color: #475569;
  padding: 2px 8px;
  border-radius: 12px;
  font-weight: 600;
}

.search-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.search-cat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  text-decoration: none;
  color: #1e293b;
  transition: all 0.2s ease;
}

.search-cat-card:hover {
  border-color: #0284c7;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.1);
  transform: translateY(-2px);
}

.search-cat-card h3 {
  margin: 0 0 4px;
  font-size: 0.98rem;
  font-weight: 700;
  color: #0f172a;
}

.search-cat-card p {
  margin: 0;
  font-size: 0.8rem;
  color: #64748b;
}

.search-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.search-article-card {
  padding: 16px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  text-decoration: none;
  color: #1e293b;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
}

.search-article-card:hover {
  border-color: #0284c7;
  transform: translateY(-2px);
}

.search-article-card h3 {
  font-size: 1rem;
  margin: 0 0 8px;
  color: #0f172a;
  font-weight: 700;
}

.search-article-card p {
  font-size: 0.84rem;
  color: #64748b;
  margin: 0 0 12px;
  flex: 1;
  line-height: 1.6;
}

.search-empty-box {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 48px 24px;
  text-align: center;
  max-width: 600px;
  margin: 40px auto;
}

.search-empty-box .icon {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
  color: #94a3b8;
}

.search-empty-box h2 {
  font-size: 1.3rem;
  color: #0f172a;
  margin: 0 0 10px;
}

.search-empty-box p {
  color: #64748b;
  font-size: 0.95rem;
  margin: 0 0 24px;
  line-height: 1.7;
}

.search-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #0284c7;
  color: #fff;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease;
}

.search-cta-btn:hover {
  background: #0369a1;
}

/* ==========================================================================
   COMPACT CASCADING DROPDOWN MENU (منوی آبشاری واقعی و شکیل)
   ========================================================================== */

.main-menu > li.menu-item-dropdown {
  position: relative;
}

.main-menu > li.menu-item-dropdown > a.nav-item-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 14px;
  color: var(--navy-deep);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  border-radius: 8px;
  transition: all 0.18s ease;
}

.main-menu > li.menu-item-dropdown > a.nav-item-link .chev {
  width: 11px;
  height: 11px;
  transition: transform 0.2s ease;
}

.main-menu > li.menu-item-dropdown:hover > a.nav-item-link {
  color: var(--blue-primary);
  background: rgba(2, 132, 199, 0.06);
}

.main-menu > li.menu-item-dropdown:hover > a.nav-item-link .chev {
  transform: rotate(180deg);
}

/* The Compact Dropdown Card directly anchored under the menu item */
.menu-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.12), 0 4px 12px rgba(15, 23, 42, 0.04);
  min-width: 270px;
  max-width: 320px;
  padding: 8px 0 0;
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  direction: rtl;
  text-align: right;
}

/* For multi-column categories like Flange */
.menu-dropdown.dropdown-2col {
  min-width: 440px;
  max-width: 480px;
}

.dropdown-cols-wrap {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 8px 16px 10px;
}

.dropdown-col .dropdown-header {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: var(--navy-deep);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 2px solid #e0f2fe;
}

.dropdown-col .dropdown-header a {
  color: var(--navy-deep);
  text-decoration: none;
  transition: color 0.15s ease;
}

.dropdown-col .dropdown-header a:hover {
  color: var(--blue-primary);
}

.main-menu > li.menu-item-dropdown:hover .menu-dropdown,
.main-menu > li.menu-item-dropdown:focus-within .menu-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.dropdown-list {
  list-style: none;
  margin: 0;
  padding: 4px 0;
}

.dropdown-cols-wrap .dropdown-list {
  padding: 0;
}

.dropdown-list li {
  margin: 0;
}

.dropdown-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 18px;
  color: #334155;
  font-size: 13.5px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.dropdown-cols-wrap .dropdown-list li a {
  padding: 7px 8px;
  font-size: 13px;
  border-radius: 6px;
}

.dropdown-list li a .arr {
  width: 12px;
  height: 12px;
  color: #94a3b8;
  opacity: 0;
  transform: translateX(4px);
  transition: all 0.15s ease;
}

.dropdown-list li a:hover {
  background: #f8fafc;
  color: var(--blue-primary);
  font-weight: 700;
}

.dropdown-list li a:hover .arr {
  opacity: 1;
  color: var(--blue-primary);
  transform: translateX(0);
}

.dropdown-foot {
  background: #f8fafc;
  border-top: 1px solid #f1f5f9;
  border-radius: 0 0 14px 14px;
  padding: 10px 18px;
  text-align: center;
}

.dropdown-foot a {
  color: var(--blue-primary);
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.15s ease;
}

.dropdown-foot a .ico {
  width: 13px;
  height: 13px;
}

.dropdown-foot a:hover {
  gap: 10px;
  color: #0369a1;
}

@media (max-width: 820px) {
  .menu-dropdown {
    display: none !important;
  }
}