/*! katibenevis-reveal.css — توکن‌ها، پایه سکشن‌ها، Reveal Engine، دکمه و Toast مشترک
 *  این فایل یک‌بار برای کل سایت لود می‌شود (توسط katibenevis-core). در سکشن‌ها تکرار نکنید.
 */
:root{
  --kn-red:#AF1616;
  --kn-red-d:#8C1010;
  --kn-red-t:rgba(175,22,22,.08);
  --kn-green:#087B6B;
  --kn-green-t:rgba(8,123,107,.09);
  --kn-white:#FFFFFF;
  --kn-ink:#1C1515;
  --kn-muted:#6F6463;
  --kn-line:#ECE3E1;
  --kn-paper:#FBF8F6;
  --kn-night:#140E0E;
  --kn-ease:cubic-bezier(.22,1,.36,1);
  --kn-radius:18px;
  --kn-font:inherit;
  --kn-box:1180px;      /* عرض باکس سکشن‌ها — هماهنگ با کانتینر قالب */
  --kn-page:#F4F2F1;    /* پس‌زمینه صفحه پشت باکس‌ها */
}

/* ---------- پایه مشترک سکشن‌ها ---------- */
.kn-sec{direction:rtl;font-family:var(--kn-font);color:var(--kn-ink);position:relative;line-height:1.9;-webkit-font-smoothing:antialiased;
  /* حالت باکس — مثل سکشن‌های فروشگاه: کارت گرد وسط صفحه */
  width:calc(100% - 32px);max-width:var(--kn-box);margin:24px auto;border-radius:22px;border:1px solid var(--kn-line);overflow:clip;isolation:isolate}
.kn-sec [hidden]{display:none!important}
.kn-sec.kn-sec--flat{border-color:transparent;background:transparent;overflow:visible}
.kn-sec.kn-sec--flat .kn-wrap{padding-inline:0}
.kn-sec .kn-wrap{padding-inline:clamp(18px,4vw,48px)}
@media (max-width:600px){.kn-sec{width:calc(100% - 20px);margin:14px auto;border-radius:18px}}

/* نوار هدر قرمز — همان امضای سکشن‌های فروشگاه، با جزئیات بیشتر */
.kn-bar{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px clamp(18px,3vw,28px);background:var(--kn-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='11' cy='11' r='1.4' fill='%23fff' fill-opacity='.18'/%3E%3C/svg%3E");color:#fff}
.kn-bar::after{content:"";position:absolute;inset-inline:0;bottom:-6px;height:6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='6'%3E%3Cpath d='M0 0h16L8 6z' fill='%23AF1616'/%3E%3C/svg%3E") repeat-x;z-index:1}
.kn-bar h2,.kn-bar h3{font-size:clamp(17px,2vw,21px);font-weight:900;color:#fff;display:flex;align-items:center;gap:10px}
.kn-bar h2::before,.kn-bar h3::before{content:"";width:10px;height:10px;background:#fff;transform:rotate(45deg);border-radius:2px;flex:none}
.kn-bar small{display:block;font-size:12.5px;font-weight:600;opacity:.8}
.kn-bar h2,.kn-bar h3{min-width:0}
@media (max-width:600px){.kn-bar small{display:none}}
.kn-bar__btn{flex:none;padding:7px 16px;border-radius:10px;background:#fff;color:var(--kn-red);font-size:13px;font-weight:800;text-decoration:none;transition:transform .2s var(--kn-ease)}
.kn-bar__btn:hover{transform:translateY(-2px)}
.kn-sec *,.kn-sec *::before,.kn-sec *::after{box-sizing:border-box}
.kn-sec :where(h1,h2,h3,h4,p,ul,ol,dl,dd,figure){margin:0;padding:0}
.kn-sec :where(ul,ol){list-style:none}
.kn-sec img{max-width:100%;display:block}
.kn-wrap{width:100%;max-width:1200px;margin-inline:auto;padding-inline:20px}
.kn-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;color:var(--kn-red);letter-spacing:0}
.kn-eyebrow::before{content:"";width:22px;height:2px;background:currentColor;border-radius:2px}
.kn-h2{font-size:clamp(26px,3.4vw,40px);font-weight:900;line-height:1.35;color:var(--kn-ink)}
.kn-lead{font-size:clamp(15px,1.4vw,17px);color:var(--kn-muted)}
.kn-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* فوکوس کیبورد — هرگز حذف نشود */
.kn-sec :focus-visible{outline:2px solid var(--kn-red);outline-offset:3px;border-radius:6px}

/* ---------- دکمه پایه ---------- */
.kn-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:50px;padding:0 26px;border-radius:12px;font:inherit;font-size:15px;font-weight:800;text-decoration:none;cursor:pointer;border:1.5px solid transparent;transition:background-color .25s,color .25s,border-color .25s,transform .25s var(--kn-ease)}
.kn-btn svg{width:18px;height:18px;flex:none;transition:transform .3s var(--kn-ease)}
.kn-btn--red{background:var(--kn-red);color:#fff}
.kn-btn--red:hover{background:var(--kn-red-d)}
.kn-btn--white{background:#fff;color:var(--kn-red)}
.kn-btn--ghost{background:transparent;color:inherit;border-color:currentColor}
.kn-btn:hover svg{transform:translateX(-4px)}

/* ---------- Reveal Engine ----------
 *  data-reveal = up | left | right | fade | zoom | draw | pop | trigger
 *  data-delay  = میلی‌ثانیه
 *  کلاس kn-reveal-on فقط وقتی JS فعال است روی <html> قرار می‌گیرد،
 *  پس بدون JS همه محتوا کاملاً دیده می‌شود.
 */
.kn-reveal-on [data-reveal]{opacity:0;transition:opacity var(--kn-dur,650ms) var(--kn-ease),transform var(--kn-dur,650ms) var(--kn-ease);transition-delay:var(--kn-delay,0ms)}
.kn-reveal-on [data-reveal="up"]{transform:translate3d(0,26px,0)}
.kn-reveal-on [data-reveal="left"]{transform:translate3d(-30px,0,0)}   /* از چپ وارد می‌شود */
.kn-reveal-on [data-reveal="right"]{transform:translate3d(30px,0,0)}   /* از راست وارد می‌شود */
.kn-reveal-on [data-reveal="zoom"]{transform:scale(.97)}
.kn-reveal-on [data-reveal="draw"]{opacity:1;transform:scaleX(0);transform-origin:right center}
.kn-reveal-on [data-reveal="pop"]{--kn-dur:380ms;transform:scale(.97)}
.kn-reveal-on [data-reveal="trigger"]{opacity:1;transition:none}
.kn-reveal-on [data-reveal].is-visible{opacity:1;transform:none}

/* ---------- Mini Toast ---------- */
.kn-toast-host{position:fixed;inset-inline:0;bottom:22px;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:99999;pointer-events:none;direction:rtl}
.kn-toast{pointer-events:auto;display:flex;align-items:center;gap:10px;max-width:min(92vw,420px);padding:12px 18px;border-radius:14px;background:var(--kn-ink);color:#fff;font:inherit;font-size:14px;font-weight:600;box-shadow:0 10px 30px rgba(20,14,14,.18);opacity:0;transform:translate3d(0,12px,0);transition:opacity .3s var(--kn-ease),transform .3s var(--kn-ease)}
.kn-toast.is-in{opacity:1;transform:none}
.kn-toast::before{content:"";width:8px;height:8px;border-radius:50%;background:#2fd3b8;flex:none}
.kn-toast--error::before{background:#ff6b6b}

/* ---------- دسترس‌پذیری: کاهش حرکت ---------- */
@media (prefers-reduced-motion:reduce){
  .kn-reveal-on [data-reveal]{opacity:1!important;transform:none!important;transition:none!important}
  .kn-sec *,.kn-sec *::before,.kn-sec *::after,.kn-toast{animation:none!important;transition-duration:1ms!important;transition-delay:0ms!important;scroll-behavior:auto!important}
}

/* ---------- ردیف محصولات (کاروسل سبک با scroll-snap) — مشترک همه ردیف‌ها ---------- */
.kn-prow{background:#fff}
.kn-prow__wrap{position:relative;padding:clamp(22px,3vw,30px) clamp(14px,3vw,28px) clamp(18px,2.4vw,26px)}
.kn-prow__track{--n:5;display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - (var(--n) - 1)*14px)/var(--n));gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:6px 2px 10px;margin:-6px -2px -10px}
.kn-prow__track::-webkit-scrollbar{display:none}
.kn-prow__nav{position:absolute;top:44%;z-index:2;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--kn-line);border-radius:50%;background:#fff;color:var(--kn-ink);cursor:pointer;box-shadow:0 8px 20px -10px rgba(28,21,21,.4);transition:background-color .2s,color .2s,opacity .2s,transform .2s var(--kn-ease)}
.kn-prow__nav svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.kn-prow__nav:hover{background:var(--kn-red);border-color:var(--kn-red);color:#fff}
.kn-prow__nav[disabled]{opacity:0;pointer-events:none}
.kn-prow__nav--prev{right:6px}
.kn-prow__nav--next{left:6px}

/* کارت محصول — هم‌سبک آرشیو فروشگاه: قاب تصویر مشکی، متن وسط‌چین، دکمه سبز کپسولی */
.kn-pc{scroll-snap-align:start;display:flex;flex-direction:column;padding:10px;background:#fff;border:1px solid var(--kn-line);border-radius:14px;text-align:center;transition:transform .3s var(--kn-ease),border-color .3s,box-shadow .3s}
.kn-pc:hover{transform:translateY(-4px);border-color:rgba(8,123,107,.35);box-shadow:0 18px 34px -24px rgba(8,123,107,.55)}
.kn-pc__img{position:relative;display:block;aspect-ratio:1/1;border-radius:10px;overflow:hidden;background:#000}
.kn-pc__img img{width:100%;height:100%;object-fit:contain;transition:transform .6s var(--kn-ease)}
.kn-pc:hover .kn-pc__img img{transform:scale(1.04)}
.kn-pc__ph{position:absolute;inset:0;display:grid;place-items:center;background:#000}
.kn-pc__ph svg{height:84%;width:auto}
.kn-pc__tag{position:absolute;top:8px;right:8px;padding:3px 10px;border-radius:999px;background:var(--kn-red);color:#fff;font-size:11px;font-weight:800}
.kn-pc__tag--green{background:var(--kn-green)}
.kn-pc__body{display:flex;flex-direction:column;align-items:center;gap:6px;flex:1;padding:10px 4px 2px}
.kn-pc__body h3{font-size:14px;font-weight:800;line-height:1.7}
.kn-pc__body h3 a{color:var(--kn-ink);text-decoration:none}
.kn-pc__body h3 a:hover{color:var(--kn-green)}
.kn-pc__stars{--r:0;position:relative;display:inline-block;font-size:13px;letter-spacing:2px;color:#D9D2D0;line-height:1}
.kn-pc__stars::before{content:"★★★★★";position:absolute;inset:0 0 0 auto;width:calc(var(--r)/5*100%);overflow:hidden;color:#F2A93B;white-space:nowrap}
.kn-pc__price{margin-top:auto;display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:4px;font-size:13px;font-weight:800;color:var(--kn-green)}
.kn-pc__price b{font-size:15px;font-weight:900}
.kn-pc__price del{font-size:12px;font-weight:600;color:#B3A9A7}
.kn-pc__btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 18px;margin-top:2px;border-radius:999px;background:var(--kn-green);color:#fff;font-size:12.5px;font-weight:800;text-decoration:none;transition:background-color .2s,transform .2s var(--kn-ease)}
.kn-pc__btn:hover{background:#06604F;transform:translateY(-1px)}
.kn-pc__btn.loading{opacity:.7;pointer-events:none}
.kn-pc__btn.added::after{content:"✓"}
@media (max-width:1100px){.kn-prow__track{--n:4}}
@media (max-width:860px){.kn-prow__track{--n:3}}
@media (max-width:600px){.kn-prow__track{--n:2.15}.kn-prow__nav{display:none}.kn-pc__btn{padding:0 10px;font-size:11.5px;height:34px}}

/* ---------- جفت بنر ---------- */
.kn-bpair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.kn-bpair a{position:relative;display:block;border-radius:18px;overflow:hidden;background:var(--kn-night);box-shadow:0 14px 30px -22px rgba(28,21,21,.6)}
.kn-bpair img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--kn-ease)}
.kn-bpair a:hover img{transform:scale(1.035)}
@media (max-width:700px){.kn-bpair{grid-template-columns:1fr;gap:12px}}
/* قیمت ووکامرس داخل کارت */
.kn-pc__price .amount{font-size:15px;font-weight:900;color:var(--kn-green)}
.kn-pc__price del .amount{font-size:12px;font-weight:600;color:#B3A9A7}
.kn-pc__price ins{text-decoration:none}

/* پیام راهنمای مدیر (فقط برای مدیر) */
.kn-admin-note{direction:rtl;width:calc(100% - 32px);max-width:var(--kn-box);margin:16px auto -8px;padding:10px 16px;border:1.5px dashed #E8C67A;border-radius:12px;background:#FFF8E8;color:#6B4E10;font-size:13px;line-height:1.9}
.kn-admin-note a{color:var(--kn-red);font-weight:800}