/* نقش‌دست — امضای فروشگاه (بخش‌های ویژه) */
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;color:var(--accent-d);background:var(--accent-l);padding:2px 14px;border-radius:999px;margin-bottom:10px;letter-spacing:.2px}

/* ---------- دسته‌بندی‌ها: قاب‌هایی که از میخ آویزان‌اند ---------- */
.cats{padding-top:30px;margin-top:6px}
.cat-chip{position:relative;transform-origin:50% -26px;animation:chipHang 7s ease-in-out infinite;animation-delay:calc(var(--k,0) * -1.4s)}
.cat-chip:nth-child(1){--k:1}.cat-chip:nth-child(2){--k:2}.cat-chip:nth-child(3){--k:3}.cat-chip:nth-child(4){--k:4}.cat-chip:nth-child(5){--k:5}.cat-chip:nth-child(n+6){--k:6}
.cat-chip::before{content:"";position:absolute;top:-26px;left:50%;width:46%;height:26px;margin-left:-23%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 26' preserveAspectRatio='none'%3E%3Cpath d='M30 0 6 26M30 0l24 26' fill='none' stroke='%23c9a9b6' stroke-width='1.4' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.cat-chip::after{content:"";position:absolute;top:-30px;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;background:#b79aa8;box-shadow:0 1px 2px rgba(64,48,58,.35);pointer-events:none}
.cat-chip:hover{animation:chipSwing 1.6s cubic-bezier(.3,.4,.4,1) both}
@keyframes chipHang{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}
@keyframes chipSwing{0%{transform:rotate(0)}18%{transform:rotate(4deg)}42%{transform:rotate(-3deg)}66%{transform:rotate(1.6deg)}100%{transform:rotate(0)}}
.cat-ico{display:inline-block;transition:transform .35s}
.cat-chip:hover .cat-ico{transform:scale(1.18) rotate(-6deg)}

/* ---------- اسلایدر: ردّ رنگ ---------- */
.slider .trail{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:multiply;z-index:2}

/* ---------- جفت‌کردن تابلو با رنگ دیوار ---------- */
.match{margin-top:var(--sp-4,40px);background:linear-gradient(180deg,#fff,var(--blush));border:1px solid var(--line);border-radius:32px;padding:34px clamp(18px,4vw,44px);box-shadow:var(--shadow)}
.m-head h2{font-size:clamp(20px,2.6vw,28px);font-weight:800;line-height:1.7}.m-head p{color:var(--ink-2);margin:6px 0 0;max-width:640px}
.m-ctl{display:grid;gap:14px;margin:22px 0}
.m-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.m-lab{font-weight:700;font-size:14px;color:var(--ink-2);min-width:130px}
.m-sw{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.m-sw button{width:38px;height:38px;border-radius:50%;background:var(--c);border:3px solid #fff;box-shadow:0 0 0 1px rgba(64,48,58,.18),0 2px 6px rgba(64,48,58,.12);transition:.2s}
.m-sw button:hover{transform:translateY(-3px) scale(1.06)}
.m-sw button.on{box-shadow:0 0 0 2px var(--accent),0 4px 10px rgba(214,90,133,.35);transform:scale(1.12)}
.m-custom{position:relative;width:38px;height:38px;border-radius:50%;border:2px dashed var(--muted);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-2);cursor:pointer;overflow:hidden}
.m-custom input{position:absolute;inset:-8px;width:60px;height:60px;opacity:0;cursor:pointer}
.m-photo{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 18px;border-radius:999px;border:1.5px dashed var(--accent);background:#fff;color:var(--accent-d);font-weight:700;transition:.2s}
.m-photo:hover{background:var(--accent-l)}
.m-priv{color:var(--muted);font-size:12.5px}
.m-seg{display:inline-flex;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px}
.m-seg button{border:0;background:transparent;padding:6px 18px;border-radius:999px;font-weight:600;color:var(--ink-2);transition:.2s}
.m-seg button.on{background:var(--ink);color:#fff}
.m-wait{color:var(--muted);text-align:center;padding:30px 0;margin:0}
.m-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mres{display:flex;flex-direction:column;background:#fff;border-radius:22px;overflow:hidden;border:1px solid var(--line);transition:transform .25s,box-shadow .25s;animation:mIn .55s both;animation-delay:calc(var(--i) * 90ms)}
.mres:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg)}
@keyframes mIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
.mres-wall{position:relative;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;transition:background .5s;overflow:hidden}
.mres-wall::after{content:"";position:absolute;inset:auto 0 0 0;height:15%;background:var(--sk);opacity:.55}
.mres-wall::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.4),transparent 70%)}
.mres-art{position:relative;z-index:1;display:block;max-height:68%;background:#fff;box-shadow:3px 8px 14px rgba(40,20,30,.32);margin-bottom:8%;transform-origin:50% 0;animation:mHang 1s .2s both}
.mres-art img{width:100%;height:100%;object-fit:contain;background:#fff}
@keyframes mHang{0%{transform:rotate(-5deg)}35%{transform:rotate(3deg)}65%{transform:rotate(-1.4deg)}100%{transform:rotate(0)}}
.mres-body{display:flex;flex-direction:column;gap:3px;padding:12px 14px 14px}
.mres-body b{font-size:14.5px;line-height:1.6}
.mres-pr{color:var(--accent-d);font-weight:700;font-size:13.5px}
.mres-sc{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:4px}.mres-sc i{display:block;height:100%;border-radius:99px;background:linear-gradient(270deg,var(--accent),#f0a07a)}
.mres-body small{color:var(--muted);font-size:12px;line-height:1.7}
.mres-dots{display:flex;gap:5px;margin-top:4px}.mres-dots i{width:14px;height:14px;border-radius:50%;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(64,48,58,.12)}
.m-foot{color:var(--muted);font-size:13px;margin:16px 0 0}
.mpick{position:fixed;inset:0;z-index:200;background:rgba(40,28,35,.66);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;padding:16px}
.mpick-box{background:#fff;border-radius:22px;padding:16px;max-width:760px;max-height:94vh;box-shadow:var(--shadow-lg)}
.mpick-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.mpick-x{border:0;background:var(--blush);width:34px;height:34px;border-radius:50%}
.mpick-stage{position:relative;display:flex;justify-content:center;touch-action:none}.mpick-stage canvas{max-width:100%;height:auto;border-radius:12px;cursor:crosshair;display:block}
.mpick-loupe{position:absolute;width:44px;height:44px;margin:-60px 0 0 -22px;border-radius:50%;border:4px solid #fff;box-shadow:0 4px 14px rgba(0,0,0,.4);opacity:0;pointer-events:none;transition:opacity .2s}
.mpick-foot{display:flex;align-items:center;gap:10px;margin-top:10px;color:var(--ink-2)}.mpick-sw{width:28px;height:28px;border-radius:50%;background:#eee;box-shadow:0 0 0 2px #fff,0 0 0 3px rgba(64,48,58,.2);flex:none}

/* ---------- ببینید این تابلو چطور جان می‌گیرد ---------- */
.proc{margin-top:var(--sp-4,40px);background:#fff;border:1px solid var(--line);border-radius:32px;padding:30px clamp(16px,4vw,40px);box-shadow:var(--shadow)}
.proc-head h2{font-size:clamp(19px,2.4vw,26px);font-weight:800}.proc-head p{color:var(--ink-2);margin:4px 0 0}
.proc-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:30px;align-items:center;margin-top:22px}
.proc-stage{display:flex;justify-content:center;background:radial-gradient(circle at 50% 40%,#fff,var(--blush-2));border-radius:24px;padding:26px 20px 30px}
.easel{position:relative;width:min(100%,340px)}
.easel::before,.easel::after{content:"";position:absolute;bottom:-20px;width:10px;height:44px;background:#b98a58;border-radius:3px;z-index:0}
.easel::before{right:14%;transform:rotate(7deg)}.easel::after{left:14%;transform:rotate(-7deg)}
.proc-cv{position:relative;z-index:1;display:block;width:100%;height:auto;background:#faf6ee;border:7px solid #fff;box-shadow:0 18px 40px rgba(64,48,58,.22),0 0 0 1px rgba(64,48,58,.08)}
.proc-brush{position:absolute;z-index:3;width:46px;height:46px;margin:-40px 0 0 -8px;opacity:0;transition:opacity .3s;pointer-events:none;filter:drop-shadow(0 4px 4px rgba(64,48,58,.25))}
.proc-sig{position:absolute;z-index:2;inset-inline-start:14px;bottom:14px;font-size:13px;font-weight:800;color:rgba(64,48,58,.0);transform:rotate(-6deg);transition:color .8s .2s}
.proc.is-final .proc-sig{color:rgba(64,48,58,.5)}
.proc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:18px}
.proc-steps button{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;border:0;background:transparent;padding:6px 2px;font-size:13px;color:var(--muted);font-weight:600}
.proc-steps i{width:38px;height:38px;border-radius:50%;background:var(--line);color:#fff;display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:800;transition:.35s}
.proc-steps li.done i{background:#e9a9be}.proc-steps li.on i{background:var(--accent);box-shadow:0 0 0 6px var(--accent-l);transform:scale(1.1)}
.proc-steps li.on button{color:var(--ink)}
.proc-range{display:flex;align-items:center;gap:12px}
.proc-play{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(214,90,133,.4);transition:.2s}
.proc-play:hover{background:var(--accent-d)}.proc-play.on svg{display:none}.proc-play.on::before{content:"";width:14px;height:14px;border-left:4px solid #fff;border-right:4px solid #fff}
.proc-range input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(270deg,var(--accent),#f6c5d6)}
.proc-range input[type=range]::-moz-range-track{height:8px;border-radius:99px;background:linear-gradient(270deg,var(--accent),#f6c5d6)}
.proc-pal{display:flex;gap:10px;margin:16px 0 6px;min-height:34px}
.proc-pal i{width:34px;height:34px;border-radius:50%;background:var(--c);box-shadow:0 0 0 3px #fff,0 0 0 4px rgba(64,48,58,.14),0 4px 10px rgba(64,48,58,.16);transform:scale(.2);opacity:0;transition:transform .5s cubic-bezier(.3,1.6,.5,1),opacity .4s}
.proc-pal i.on{transform:scale(1);opacity:1}
.proc-cap{font-weight:600;color:var(--ink);min-height:3.4em;margin:10px 0 0}
.proc-note{font-size:12px;color:var(--muted);margin:6px 0 0}

/* ---------- پیگیری: تابلوی شما کامل می‌شود ---------- */
.wip{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;margin:0 0 22px;padding:16px;border-radius:22px;background:linear-gradient(120deg,var(--blush),#fff)}
.wip-art{position:relative}
.wip-art canvas{display:block;width:100%;height:auto;background:#faf6ee;border:5px solid #fff;box-shadow:0 12px 26px rgba(64,48,58,.22)}
.wip.final .wip-art::after{content:"✓";position:absolute;top:-10px;inset-inline-start:-10px;width:34px;height:34px;border-radius:50%;background:var(--ok);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;box-shadow:0 4px 12px rgba(42,157,120,.5);animation:pop .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes pop{from{transform:scale(0)}to{transform:scale(1)}}
.wip-t{font-weight:800;font-size:15px;margin-bottom:2px}
.wip-msg{margin:0 0 10px;color:var(--ink-2)}
.wip-dots{display:flex;gap:6px}.wip-dots i{width:34px;height:7px;border-radius:99px;background:var(--line);transition:background .6s}.wip-dots i.on{background:var(--accent)}

/* ---------- جعبه‌ی ارسال رایگان ---------- */
.free-ship.has-box{display:grid;grid-template-columns:78px 1fr;gap:4px 14px;align-items:center}
.free-ship.has-box .fs-bar{grid-column:2}
.fsbox{grid-row:1 / span 2;width:78px}
.fsbox svg{width:100%;height:auto;overflow:visible;display:block}
.fsbox .fb-art{transform:translateY(var(--ty,34px));transition:transform .8s cubic-bezier(.3,1.2,.4,1)}
.fsbox .fb-flap{transition:transform .7s cubic-bezier(.3,1.4,.4,1)}
.fsbox .fb-l{transform-origin:22px 38px;transform:rotate(calc(-62deg * (1 - var(--p,0))))}
.fsbox .fb-r{transform-origin:98px 38px;transform:rotate(calc(62deg * (1 - var(--p,0))))}
.fsbox .fb-rib{opacity:0;transform:scale(.6);transform-origin:60px 40px;transition:.5s .35s cubic-bezier(.3,1.6,.5,1)}
.fsbox.full .fb-rib{opacity:1;transform:none}.fsbox.full{animation:boxHop .6s .3s}
@keyframes boxHop{40%{transform:translateY(-8px) rotate(-3deg)}70%{transform:translateY(0) rotate(2deg)}}

/* ---------- پرواز تابلو به سبد ---------- */
.flyart{position:fixed;z-index:300;pointer-events:none;background:#fff center/contain no-repeat;border:4px solid #fff;border-radius:6px;box-shadow:0 14px 30px rgba(64,48,58,.35)}
.flyart.plain{background:var(--accent);border-radius:50%}
.splat{position:fixed;z-index:301;width:7px;height:7px;border-radius:50%;pointer-events:none}
.cart-btn.hung{transform-origin:50% -4px;animation:cartHang 1s cubic-bezier(.3,.4,.4,1)}
@keyframes cartHang{0%{transform:rotate(0) scale(1.18)}20%{transform:rotate(-14deg)}45%{transform:rotate(9deg)}70%{transform:rotate(-4deg)}100%{transform:rotate(0)}}

/* ---------- واکنش‌گرا ---------- */
@media (max-width:900px){
  .m-grid{grid-template-columns:repeat(2,1fr)}
  .proc-body{grid-template-columns:1fr}
}
@media (max-width:560px){
  .match,.proc{border-radius:24px;padding:22px 16px}
  .m-lab{min-width:0;width:100%}
  .m-grid{gap:10px}.mres-body{padding:10px}
  .wip{grid-template-columns:96px 1fr;gap:14px}
  .cats{padding-top:32px}
  .cat-chip::before,.cat-chip::after{display:block}
  .free-ship.has-box{grid-template-columns:62px 1fr}.fsbox{width:62px}
}
@media (prefers-reduced-motion:reduce){
  .cat-chip,.cat-chip:hover,.mres,.mres-art,.cart-btn.hung,.fsbox.full{animation:none!important}
  .fsbox .fb-art,.fsbox .fb-flap,.fsbox .fb-rib{transition:none}
}