/*!
 * محصولات پتروشیمی بندر امام — استایل صفحات محصول
 * همه قواعد زیر .bipc-scope محدود شده‌اند تا با استایل قالب تداخل نکنند.
 * منبع: طراحی فیگما، نسخه استاتیک شهریور ۱۴۰۴.
 */
.bipc-scope{--bipc-header:0px;--blue:#2e3191;--red:#ed1d24;--ink:#222345;--muted:#70728a}
.bipc-scope *{box-sizing:border-box}
.bipc-scope{color:var(--ink);font-size:15px;line-height:1.9;font-family:var(--bipc-font,inherit)}
.bipc-scope a{color:inherit;text-decoration:none}
.bipc-scope button,.bipc-scope input,.bipc-scope select{font:inherit}
.bipc-scope button,.bipc-scope a,.bipc-scope input,.bipc-scope select{-webkit-tap-highlight-color:transparent}
.bipc-scope button{cursor:pointer}
.bipc-scope img{display:block;max-width:100%}
.bipc-scope h1,.bipc-scope h2,.bipc-scope h3,.bipc-scope p{margin:0}
.bipc-scope button:focus-visible,.bipc-scope a:focus-visible,.bipc-scope input:focus-visible,.bipc-scope select:focus-visible{outline:3px solid #0095da;outline-offset:5px}
.bipc-scope [hidden]{display:none!important}
.bipc-scope .wrap{max-width:1296px;width:calc(100% - 96px);margin:auto}
.bipc-scope .btn{display:inline-flex;align-items:center;gap:20px;padding:10px 16px;background:var(--red);border-radius:9px;color:white;font-size:13px;border:0}
.bipc-scope .btn span{display:grid;place-items:center;background:white;color:var(--red);width:27px;height:27px;border-radius:5px}
.bipc-scope .btn.white{background:white;color:var(--blue)}
.bipc-scope .eyebrow{font-size:12px;display:flex;align-items:center;gap:12px;letter-spacing:.5px}
.bipc-scope .eyebrow:before{content:'';width:24px;height:3px;background:var(--red)}
.bipc-scope .hero{margin:32px auto 58px;min-height:490px;border-radius:28px;position:relative;overflow:hidden;background:#1e225d;color:white;display:flex;align-items:center;padding:56px}
.bipc-scope .hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
.bipc-scope .hero:after{content:'';position:absolute;inset:0;background:linear-gradient(270deg,#202365fa 0%,#202365db 43%,#20236508 100%)}
.bipc-scope .hero-copy{position:relative;z-index:1;max-width:600px}
.bipc-scope .hero h1{font-size:48px;line-height:1.65;margin:18px 0}
.bipc-scope .hero p{color:#e5e5f6;max-width:470px}
.bipc-scope .actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.bipc-scope .section-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:26px}
.bipc-scope .section-head h2{font-size:28px;color:var(--blue)}
.bipc-scope .section-head p{font-size:13px;color:var(--muted)}
.bipc-scope .families{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:18px;margin-bottom:64px}
.bipc-scope .family{position:relative;min-height:290px;border-radius:18px;overflow:hidden;background:var(--blue);color:white}
.bipc-scope .family img{width:100%;height:100%;position:absolute;object-fit:cover;transition:transform .4s}
.bipc-scope .family:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#151952f2,transparent)}
.bipc-scope .family:hover img{transform:scale(1.04)}
.bipc-scope .family div{position:absolute;z-index:1;bottom:24px;right:24px;left:24px}
.bipc-scope .family small{font:10px Arial;letter-spacing:1px;color:#c8cae5}
.bipc-scope .family h3{font-size:23px;margin:8px 0}
.bipc-scope .family p{font-size:12px;color:#d9daea}
.bipc-scope .family b{position:absolute;top:20px;left:20px;background:white;color:var(--red);border-radius:8px;width:32px;height:32px;text-align:center;z-index:2}
.bipc-scope .catalog-layout{display:grid;grid-template-columns:218px minmax(0,1fr);gap:36px;align-items:start}
.bipc-scope .side{position:sticky;top:calc(var(--bipc-header) + 24px);padding:22px 14px;border:1px solid #e8e8ef;border-radius:16px}
.bipc-scope .side h2{font-size:17px;padding:0 12px 16px;color:var(--blue)}
.bipc-scope .side button{display:flex;justify-content:space-between;align-items:center;width:100%;border:0;border-right:3px solid transparent;background:none;color:var(--muted);padding:12px;text-align:right;font-size:13px;border-radius:8px}
.bipc-scope .side button.active{background:#edeef9;color:var(--blue);border-right-color:var(--red);font-weight:bold}
.bipc-scope .side small{font-size:10px}
.bipc-scope .side>a{font-size:12px;display:block;margin:24px 12px 0;color:var(--blue)}
.bipc-scope .catalog-content{min-width:0}
.bipc-scope .tools{display:flex;gap:12px;margin-bottom:12px}
.bipc-scope .search{flex:1;min-width:0}
.bipc-scope .search label,.bipc-scope .select label{display:block;font-size:12px;color:var(--muted);margin-bottom:7px}
.bipc-scope .tools input,.bipc-scope .tools select{width:100%;border:1px solid #dedee9;padding:13px 15px;border-radius:10px;background:#fafafd;color:var(--ink)}
.bipc-scope .select{width:180px}
.bipc-scope .count{font-size:12px;color:var(--muted);margin-bottom:28px}
.bipc-scope .group{scroll-margin-top:calc(var(--bipc-header) + 24px);margin-bottom:46px}
.bipc-scope .group-title{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #e5e5ee;padding-bottom:16px;margin-bottom:20px}
.bipc-scope .group-title h2{font-size:23px;color:var(--blue)}
.bipc-scope .group-title small{font:10px Arial;letter-spacing:1px;color:var(--muted)}
.bipc-scope .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.bipc-scope .card{padding:24px;border:1px solid #e7e7ef;border-radius:14px;background:#f7f7fa;display:flex;flex-direction:column;min-height:235px;transition:background .2s,border-color .2s}
.bipc-scope .card:hover{background:white;border-color:#2e319166}
.bipc-scope .card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.bipc-scope .code{font:bold 21px Arial;letter-spacing:1px;color:var(--blue)}
.bipc-scope .badge{font-size:10px;color:#70728a;background:white;padding:3px 9px;border-radius:5px}
.bipc-scope .card h3{font-size:20px;color:var(--blue)}
.bipc-scope .card p{font-size:12px;color:var(--muted);margin-top:8px}
.bipc-scope .chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:15px}
.bipc-scope .chips span{font:10px Arial;background:#eaeaf4;padding:5px 7px;border-radius:4px;color:var(--blue)}
.bipc-scope .card-link{border-top:1px solid #e1e1ec;display:flex;justify-content:space-between;padding-top:14px;margin-top:22px;font-size:12px;color:var(--blue)}
.bipc-scope .card-link b{color:var(--red)}
.bipc-scope .empty{background:#f5f5fa;padding:40px;border-radius:18px;text-align:center}
.bipc-scope .reset{background:var(--blue);color:white;border:0;border-radius:8px;padding:8px 20px;margin-top:16px}
.bipc-scope .cta{margin:35px auto 50px;padding:36px 42px;border-radius:22px;background:var(--blue);color:white;display:flex;justify-content:space-between;align-items:center;gap:24px}
.bipc-scope .cta h2{font-size:25px}
.bipc-scope .cta p{font-size:13px;color:#d9daf2}
.bipc-scope .bread{font-size:12px;color:var(--muted);padding:28px 0}
.bipc-scope .detail-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:42px;align-items:center;margin-bottom:42px}
.bipc-scope .detail-hero h1{font-size:40px;color:var(--blue);margin:14px 0}
.bipc-scope .detail-hero .en{font:14px Arial;letter-spacing:2px;color:var(--muted)}
.bipc-scope .detail-hero img{width:100%;height:330px;object-fit:cover;border-radius:24px}
.bipc-scope .detail-hero p{color:var(--muted);margin-top:18px}
.bipc-scope .detail-section{padding:32px 0;border-top:1px solid #e5e5ef}
.bipc-scope .detail-section h2{color:var(--blue);font-size:24px;margin-bottom:18px}
.bipc-scope .table-wrap{overflow:auto;border:1px solid #e1e1eb;border-radius:12px}
.bipc-scope table{border-collapse:collapse;width:100%;min-width:520px;text-align:right;font-size:13px}
.bipc-scope th{background:#edeef9;color:var(--blue)}
.bipc-scope th,.bipc-scope td{padding:16px 20px;border-bottom:1px solid #e5e5ee}
.bipc-scope tr:last-child td{border:0}
.bipc-scope td:first-child{font-family:Arial,sans-serif;color:var(--blue)}
.bipc-scope .note{color:var(--muted);font-size:12px;line-height:2;margin-top:16px}
.bipc-scope .spec-link{display:block;border:1px solid #e5e5ee;border-radius:16px;overflow:hidden}
.bipc-scope .spec-link img{width:100%}
.bipc-scope .detail-nav{display:flex;gap:24px;padding:16px 0;border-block:1px solid #e5e5ee;color:var(--blue);font-size:13px}
@media(max-width:1050px){
.bipc-scope .wrap{width:calc(100% - 48px)}
.bipc-scope .families{grid-template-columns:repeat(2,1fr)}
.bipc-scope .family{min-height:250px}
.bipc-scope .catalog-layout{grid-template-columns:190px minmax(0,1fr);gap:24px}
.bipc-scope .hero h1{font-size:40px}
.bipc-scope .card-top{gap:8px;flex-wrap:wrap}
.bipc-scope .code{font-size:17px}
}
@media(max-width:800px){
.bipc-scope .catalog-layout{display:block}
.bipc-scope .side{top:0;z-index:10;background:white;margin-bottom:24px;padding:10px;box-shadow:0 4px 16px #26276308}
.bipc-scope .side h2,.bipc-scope .side>a{display:none}
.bipc-scope .side nav{display:flex;overflow:auto;gap:6px}
.bipc-scope .side button{width:auto;flex:none;gap:12px;white-space:nowrap;padding:10px}
.bipc-scope .hero{padding:36px;min-height:440px}
.bipc-scope .hero h1{font-size:36px}
.bipc-scope .detail-hero{grid-template-columns:1fr}
.bipc-scope .detail-hero img{height:260px}
.bipc-scope .cta{flex-direction:column;align-items:flex-start}
}
@media(max-width:540px){
.bipc-scope .wrap{width:calc(100% - 32px)}
.bipc-scope .hero{padding:28px 24px;margin-top:20px;margin-bottom:36px;border-radius:20px}
.bipc-scope .hero h1{font-size:30px}
.bipc-scope .hero p{font-size:13px}
.bipc-scope .section-head{display:block}
.bipc-scope .section-head h2{font-size:24px}
.bipc-scope .section-head p{margin-top:10px}
.bipc-scope .families{gap:12px;margin-bottom:38px}
.bipc-scope .family{min-height:235px}
.bipc-scope .family div{right:16px;left:16px;bottom:18px}
.bipc-scope .family h3{font-size:18px}
.bipc-scope .family p{font-size:10px}
.bipc-scope .family small{font-size:8px}
.bipc-scope .cards{grid-template-columns:1fr}
.bipc-scope .tools{flex-direction:column}
.bipc-scope .select{width:100%}
.bipc-scope .side button{font-size:11px}
.bipc-scope .card{min-height:220px}
.bipc-scope .group-title h2{font-size:20px}
.bipc-scope .group-title small{font-size:8px}
.bipc-scope .cta{padding:28px 24px}
.bipc-scope .cta h2{font-size:22px}
.bipc-scope .detail-hero h1{font-size:31px}
.bipc-scope .detail-nav{gap:16px;font-size:12px}
}
@media(prefers-reduced-motion:reduce){
.bipc-scope *{scroll-behavior:auto!important;transition:none!important}
}
.bipc-scope .product-icon{width:24px;height:24px;flex:none;vertical-align:middle}
.bipc-scope .side button{gap:9px;justify-content:flex-start}
.bipc-scope .side button .product-icon{width:21px;height:21px}
.bipc-scope .side button small{margin-inline-start:auto;opacity:.65}
.bipc-scope .family-icon{position:absolute;top:20px;right:20px;z-index:2;background:#ffffffef;color:var(--blue);width:49px;height:49px;border-radius:13px;display:grid;place-items:center}
.bipc-scope .family-icon .product-icon{width:30px;height:30px}
.bipc-scope .group-title h2{display:flex;align-items:center;gap:12px}
.bipc-scope .group-title h2 .product-icon{width:38px;height:38px;padding:7px;background:#edeef9;border-radius:10px}
.bipc-scope .card{background:white;overflow:hidden}
.bipc-scope .product-visual{height:128px;position:relative;display:grid;place-items:center;margin:-24px -24px 22px;background:linear-gradient(135deg,#f3f4fc,#e6e8f6);color:var(--blue);isolation:isolate}
.bipc-scope .product-visual:before,.bipc-scope .product-visual:after{content:'';position:absolute;width:105px;height:105px;border:1px solid #2e319112;border-radius:50%;z-index:-1}
.bipc-scope .product-visual:before{transform:translate(38px,-10px)}
.bipc-scope .product-visual:after{transform:translate(-38px,10px)}
.bipc-scope .product-visual>.product-icon{width:64px;height:64px;stroke-width:1.15;transition:transform .2s}
.bipc-scope .card:hover .product-visual>.product-icon{transform:translateY(-3px)}
.bipc-scope .visual-aroma{background:linear-gradient(135deg,#f0f4fa,#e1eaf1)}
.bipc-scope .visual-feed{background:linear-gradient(135deg,#f5f2eb,#eeeadf)}
.bipc-scope .visual-chem{background:linear-gradient(135deg,#f0f5f6,#e0edef)}
.bipc-scope .detail-hero .eyebrow:before{display:none}
.bipc-scope .detail-hero .eyebrow .product-icon{width:50px;height:50px;padding:10px;background:#edeef9;color:var(--blue);border-radius:13px}
.bipc-scope .detail-nav a{display:inline-flex;align-items:center;gap:8px}
.bipc-scope .detail-nav .product-icon{width:21px;height:21px}
.bipc-scope .detail-section h2{display:flex;align-items:center;gap:12px}
.bipc-scope .detail-section h2>.product-icon{width:38px;height:38px;padding:7px;background:#edeef9;border-radius:10px}
@media(max-width:540px){
.bipc-scope .product-visual{height:125px}
.bipc-scope .family-icon{width:40px;height:40px;right:16px;top:16px}
.bipc-scope .family-icon .product-icon{width:25px;height:25px}
.bipc-scope .detail-nav{gap:12px;flex-wrap:wrap}
.bipc-scope .detail-nav a{gap:6px}
.bipc-scope .side button .product-icon{width:18px;height:18px}
}

/* ——— افزوده‌های نسخه وردپرس ——— */
.bipc-scope{direction:rtl;text-align:right}
.bipc-scope .bread a:hover{color:var(--blue)}
.bipc-scope .bread span[aria-current]{color:var(--ink)}
.bipc-scope .side-catalog{font-size:12px;display:block;margin:24px 12px 0;color:var(--blue)}
.bipc-scope .tools{align-items:flex-end}
.bipc-scope .tools .reset{margin-top:0;flex:none;padding:13px 20px}
.bipc-scope .bipc-foot-note{font-size:11px;color:var(--muted);border-top:1px solid #e5e5ef;padding:20px 0;margin-top:10px}
.bipc-scope .bipc-prose p{margin-bottom:14px}
.bipc-scope .bipc-prose ul{padding-inline-start:20px;margin:0 0 14px}
.bipc-scope .detail-hero img{width:100%;height:330px;object-fit:cover;border-radius:24px}
.bipc-scope .family img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover}
.bipc-scope .hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bipc-scope .card{text-decoration:none}
@media(max-width:540px){
.bipc-scope .tools .reset{width:100%}
}

/* ——— فاصله از هدر قالب ———
   مقدار --bipc-header از «تنظیمات ← فاصله از هدر قالب» می‌آید و سه کار می‌کند:
   ۱) محتوا را از زیر هدرِ شناور بیرون می‌آورد (padding-top)،
   ۲) پرش به لنگرها را زیر هدر نمی‌اندازد (scroll-margin-top)،
   ۳) ستون فیلتر چسبان را پایین‌تر می‌چسباند.
   --bipc-shift برای عدد منفی است: محتوا را عمداً بالا می‌کشد. */
.bipc-scope{padding-top:var(--bipc-header);margin-top:var(--bipc-shift,0px)}
.bipc-scope [id],
.bipc-scope .detail-section,
.bipc-scope .cta{scroll-margin-top:calc(var(--bipc-header) + 24px)}
.bipc-scope .detail-nav{position:relative;z-index:1}
@media(max-width:800px){
.bipc-scope .side{top:calc(var(--bipc-header) + 0px)}
}

/* ——— بازگرداندن رنگ تیترها ———
   قالب برای h1..h3 رنگ خودش را تعریف می‌کند و چون استایل قالب بعد از افزونه
   بارگذاری می‌شود، با ویژگی برابر برنده می‌شد. کلاس دوبار تکرار شده و important گذاشته شده،
   چون بعضی پیکربندی‌های قالب رنگ تیتر را با important اعمال می‌کنند. تیترهای روی زمینه تیره هم صریح سفید شده‌اند، چون قبلاً رنگ را
   از والد ارث می‌بردند و قاعده قالب آن ارث را قطع می‌کرد. */
.bipc-scope.bipc-scope h1,
.bipc-scope.bipc-scope h2,
.bipc-scope.bipc-scope h3{color:var(--blue) !important}

.bipc-scope.bipc-scope .section-head h2,
.bipc-scope.bipc-scope .side h2,
.bipc-scope.bipc-scope .group-title h2,
.bipc-scope.bipc-scope .card h3,
.bipc-scope.bipc-scope .detail-hero h1,
.bipc-scope.bipc-scope .detail-section h2{color:var(--blue) !important}

.bipc-scope.bipc-scope .hero h1,
.bipc-scope.bipc-scope .family h3,
.bipc-scope.bipc-scope .cta h2{color:#fff !important}

.bipc-scope.bipc-scope .hero p{color:#e5e5f6 !important}
.bipc-scope.bipc-scope .cta p{color:#d9daf2 !important}
.bipc-scope.bipc-scope .family p{color:#d9daea !important}
.bipc-scope.bipc-scope .family small{color:#c8cae5 !important}
.bipc-scope.bipc-scope .card p,
.bipc-scope.bipc-scope .section-head p,
.bipc-scope.bipc-scope .group-title small,
.bipc-scope.bipc-scope .note,
.bipc-scope.bipc-scope .count,
.bipc-scope.bipc-scope .bread{color:var(--muted) !important}
.bipc-scope.bipc-scope .code,
.bipc-scope.bipc-scope .card-link,
.bipc-scope.bipc-scope .detail-nav{color:var(--blue) !important}
.bipc-scope.bipc-scope .btn{color:#fff !important}
.bipc-scope.bipc-scope .btn.white{color:var(--blue) !important}
.bipc-scope.bipc-scope th{color:var(--blue) !important}


/* ——— بازگرداندن کنترل‌های فیلتر ———
   قالب برای input، select و button اندازه، حاشیه و پس‌زمینه خودش را اعمال می‌کند
   و ردیف ابزار صفحه فهرست را به‌هم می‌ریزد: کادر جست‌وجو نامرئی می‌شود و دکمه
   پاک‌کردن بیش از حد بزرگ. اینجا اندازه‌های طرح برگردانده می‌شود. */
.bipc-scope.bipc-scope .tools{display:flex !important;gap:12px !important;align-items:flex-end !important;flex-wrap:wrap}
.bipc-scope.bipc-scope .tools .search{flex:1 1 220px !important;min-width:0 !important}
.bipc-scope.bipc-scope .tools .select{flex:0 0 180px !important;width:180px !important}

.bipc-scope.bipc-scope .tools label{display:block !important;font-size:12px !important;color:var(--muted) !important;margin:0 0 7px !important;font-weight:400 !important;line-height:1.6 !important}

.bipc-scope.bipc-scope .tools input,
.bipc-scope.bipc-scope .tools select{width:100% !important;max-width:none !important;height:auto !important;min-height:48px !important;margin:0 !important;padding:12px 15px !important;border:1px solid #dedee9 !important;border-radius:10px !important;background-color:#fafafd !important;background-image:none !important;color:var(--ink) !important;font-family:inherit !important;font-size:14px !important;line-height:1.6 !important;box-shadow:none !important;text-align:start !important;text-transform:none !important;letter-spacing:normal !important}

.bipc-scope.bipc-scope .tools select{appearance:auto !important;-webkit-appearance:auto !important;padding-inline-end:10px !important}
.bipc-scope.bipc-scope .tools input::placeholder{color:var(--muted) !important;opacity:1 !important}

.bipc-scope.bipc-scope .tools .reset{flex:0 0 auto !important;width:auto !important;height:auto !important;min-height:48px !important;margin:0 !important;padding:12px 22px !important;border:0 !important;border-radius:8px !important;background:var(--blue) !important;color:#fff !important;font-family:inherit !important;font-size:13px !important;font-weight:400 !important;line-height:1.6 !important;letter-spacing:normal !important;text-transform:none !important;box-shadow:none !important}
.bipc-scope.bipc-scope .tools .reset:hover{background:#262a7d !important}

@media(max-width:540px){
.bipc-scope.bipc-scope .tools{flex-direction:column !important}
.bipc-scope.bipc-scope .tools .search,
.bipc-scope.bipc-scope .tools .select,
.bipc-scope.bipc-scope .tools .reset{flex:1 1 auto !important;width:100% !important}
}