/* ==========================================================
   نقش‌دست — بازطراحی مدرن
   ۱) اسکرولر مشترک   ۲) دیوار گالری   ۳) پیشنهادهای ویژه
   ۴) فلش‌های اسلایدر   ۵) هدر و منوی موبایل
   این فایل آخرین استایل بارگذاری‌شده است و روی قبلی‌ها غلبه می‌کند.
   ========================================================== */

/* ---------- ۱) اسکرولر مشترک ---------- */
.mscroll{position:relative;--ms-fade:#fff}
.mscroll [data-track]{
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;scroll-snap-type:x proximity;scroll-behavior:smooth;cursor:grab}
.mscroll [data-track]::-webkit-scrollbar{display:none}
.mscroll.ms-drag [data-track]{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
.mscroll.ms-drag [data-track] a{pointer-events:none}
.mscroll:not(.ms-scrollable) [data-track]{cursor:auto}
@media (prefers-reduced-motion:reduce){.mscroll [data-track]{scroll-behavior:auto}}

.ms-btn{
  position:absolute;top:50%;z-index:6;width:46px;height:46px;margin-top:-23px;padding:0;
  display:none;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.82);color:var(--ink);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  box-shadow:0 8px 24px -6px rgba(64,48,58,.35);
  transition:transform .2s,opacity .2s,background .2s,color .2s}
.ms-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(1.07)}
.ms-btn:active:not(:disabled){transform:scale(.94)}
.ms-btn:disabled{opacity:0;pointer-events:none}
.ms-prev{inset-inline-start:14px}.ms-next{inset-inline-end:14px}
/* آیکن پایه به راست اشاره می‌کند؛ در RTL «قبلی» سمت راست است و «بعدی» باید به چپ اشاره کند */
[dir=rtl] .ms-next svg{transform:scaleX(-1)}
[dir=ltr] .ms-prev svg{transform:scaleX(-1)}
@media (hover:hover) and (pointer:fine){.ms-scrollable>.ms-btn{display:flex}}

.ms-fade{position:absolute;top:0;bottom:0;width:56px;z-index:4;pointer-events:none;opacity:0;transition:opacity .25s}
.ms-fade-start{inset-inline-start:0;background:linear-gradient(to var(--ms-dir-start,right),var(--ms-fade),transparent)}
.ms-fade-end{inset-inline-end:0;background:linear-gradient(to var(--ms-dir-end,left),var(--ms-fade),transparent)}
[dir=ltr] .mscroll{--ms-dir-start:left;--ms-dir-end:right}
.ms-scrollable:not(.ms-at-start)>.ms-fade-start,.ms-scrollable:not(.ms-at-end)>.ms-fade-end{opacity:1}

.ms-bar{position:absolute;z-index:5;height:4px;border-radius:99px;background:rgba(64,48,58,.1);overflow:hidden;
  pointer-events:none;opacity:0;transition:opacity .25s}
.ms-scrollable>.ms-bar{opacity:1}
.ms-bar i{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--accent);transition:width .2s}

/* ---------- ۲) دیوار گالری ---------- */
.gallery-sec{margin-top:var(--sp-5,56px)}
.gsec-head{display:block;margin-bottom:18px}
.gsec-head h2{font-size:clamp(22px,2.8vw,30px);font-weight:800;margin:0 0 4px}
.gsec-head .gsub{margin:0;max-width:620px}

.mood{gap:8px;margin:0 0 16px}
.mood button{min-height:38px;padding:0 15px;font-size:13.5px;border-color:transparent;background:#fff;box-shadow:0 1px 2px rgba(64,48,58,.06),0 0 0 1px var(--line)}
.mood button:hover{box-shadow:0 4px 14px -4px rgba(214,90,133,.35),0 0 0 1px var(--accent)}
.mood button.on{background:var(--ink);color:#fff;box-shadow:0 6px 16px -6px rgba(64,48,58,.55)}

.gwall.mscroll{--ms-fade:#f3e6dd;
  border:0;border-radius:32px;
  background:
    radial-gradient(70% 60% at 50% -8%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),
    linear-gradient(180deg,#f9f1ec 0%,#f3e6dd 62%,#ead8cc 100%);
  box-shadow:0 36px 70px -34px rgba(90,52,60,.45),0 0 0 1px rgba(64,48,58,.06)}
.gwall::after{opacity:.16}
.gwall-scroll{scroll-snap-type:x proximity}
.gwall-in{width:max(100%,920px)}
.gwall .gframe{scroll-snap-align:center;transition:opacity .45s,filter .45s,transform .45s cubic-bezier(.2,.8,.2,1)}
.gwall .gframe:hover{transform:translateY(calc(var(--dy) * var(--cm) - 8px))}

.glabel{margin-top:calc(var(--cm) * 2.6);padding:5px 12px 6px;border-radius:14px;
  background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 8px 20px -10px rgba(64,48,58,.35)}
.glabel b{font-size:12.5px}
.gframe:hover .glabel{background:var(--ink);border-color:var(--ink)}

/* خط‌کش: نوار کف‌پوش ملایم به‌جای نوار تیره */
.gruler{background:linear-gradient(#ecdcd0,#e0cbbc);border-top:2px solid rgba(255,255,255,.9);box-shadow:inset 0 8px 14px -10px rgba(90,52,60,.25)}
.gruler::before{background:repeating-linear-gradient(to left,rgba(110,80,66,.55) 0 1px,transparent 1px calc(100% / var(--span,220) * 10)),repeating-linear-gradient(to left,rgba(110,80,66,.3) 0 1px,transparent 1px calc(100% / var(--span,220) * 2));background-size:100% 100%,100% 5px;background-repeat:no-repeat}
.gruler i{color:#8a6c5d;text-shadow:none;font-weight:600}

.gwall>.ms-bar{top:16px;inset-inline:28px}
.gwall>.ms-fade{width:72px}
.gwall>.ms-btn{top:46%}
.gnote{margin-top:14px}
/* فضای کافی برای برچسب‌ها بالای خط‌کش */
.gwall-canvas{height:calc(var(--cm) * (var(--ch,96) + 11) + 110px);padding-top:34px;padding-bottom:calc(var(--cm) * 11 + 92px)}

@media (max-width:860px){
  .gwall.mscroll{border-radius:26px}
  .gwall-in{width:max(100%,820px)}
  .gwall>.ms-bar{inset-inline:22px;top:12px}
  .gwall>.ms-fade{width:40px}
  .gruler i{font-size:10.5px}
  .gruler i::after{display:none}
}

/* ---------- ۳) پیشنهادهای ویژه ---------- */
.offers{position:relative;margin-top:var(--sp-5,56px);border-radius:32px;overflow:hidden;
  padding:clamp(20px,3vw,34px) 0 clamp(18px,2.4vw,26px);color:var(--ink);isolation:isolate;
  background:
    radial-gradient(60% 90% at 100% 0%,rgba(255,255,255,.75),rgba(255,255,255,0) 60%),
    radial-gradient(50% 80% at 0% 100%,rgba(255,196,214,.7),rgba(255,196,214,0) 65%),
    linear-gradient(135deg,#ffe9f0,#ffd2e0);
  box-shadow:0 30px 60px -36px rgba(214,90,133,.55),0 0 0 1px rgba(255,255,255,.7) inset}
.offers-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:0 clamp(18px,3vw,34px);margin-bottom:16px}
.offers-title{min-width:0}
.offers-title h2{font-size:clamp(22px,2.8vw,30px);font-weight:800;margin:6px 0 2px}
.offers-title p{margin:0;color:var(--ink-2);font-size:14px}
.offers-pill{display:inline-flex;align-items:center;gap:8px;padding:3px 13px;border-radius:999px;background:rgba(255,255,255,.85);color:var(--accent-d);font-size:12.5px;font-weight:700;box-shadow:0 2px 8px -2px rgba(214,90,133,.35)}
.offers-pill i{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(214,90,133,.5);animation:offPulse 2s infinite}
@keyframes offPulse{70%{box-shadow:0 0 0 8px rgba(214,90,133,0)}100%{box-shadow:0 0 0 0 rgba(214,90,133,0)}}
@media (prefers-reduced-motion:reduce){.offers-pill i{animation:none}}
.offers-all{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:42px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:14px;transition:.2s}
.offers-all:hover{background:var(--accent);transform:translateY(-2px);box-shadow:0 10px 20px -8px rgba(214,90,133,.6)}
.offers-all svg{transition:transform .2s}.offers-all:hover svg{transform:translateX(-3px)}

.offers-track{--ms-fade:#ffe2ec}
.offers .hscroll{display:flex;gap:16px;padding:6px clamp(18px,3vw,34px) 26px;scroll-padding-inline:clamp(18px,3vw,34px);
  scroll-snap-type:x proximity;-webkit-mask-image:none;mask-image:none}
.offers .hscroll .pcard{flex:0 0 clamp(190px,19vw,236px);scroll-snap-align:start;background:#fff;border:0;
  box-shadow:0 10px 26px -14px rgba(214,90,133,.5);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.offers .hscroll .pcard:hover{transform:translateY(-6px);box-shadow:0 22px 36px -16px rgba(214,90,133,.6)}
.offers-track>.ms-bar{inset-inline:clamp(18px,3vw,34px);bottom:6px}
.offers-track>.ms-fade{width:64px}
.offers-track>.ms-btn{top:44%}
.offers-track>.ms-prev{inset-inline-start:clamp(10px,1.6vw,20px)}
.offers-track>.ms-next{inset-inline-end:clamp(10px,1.6vw,20px)}

@media (max-width:860px){
  .offers{border-radius:26px;padding-top:20px}
  .offers-head{align-items:center}
  .offers-title p{display:none}
  .offers-title h2{font-size:21px;white-space:nowrap}
  .offers-all{min-height:38px;padding:0 14px;font-size:13px}
  .offers .hscroll{gap:12px;padding-bottom:24px}
  .offers .hscroll .pcard{flex-basis:172px}
  .offers-track>.ms-fade{width:22px}
}
@media (max-width:560px){.oa-long{display:none}}
@media (hover:none){.offers .hscroll .pcard:hover{transform:none}}

/* ---------- ۴) فلش‌های اسلایدر ---------- */
.sl-nav{width:44px;height:44px;padding:0;font-size:0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:rgba(255,255,255,.88);
  box-shadow:0 8px 22px -8px rgba(64,48,58,.4);transition:opacity .2s,background .2s,color .2s,transform .2s}
.sl-nav svg{display:block}
.sl-nav:hover{background:var(--accent);color:#fff}
.sl-nav:active{transform:translateY(-50%) scale(.94)}
.sl-nav.prev{right:16px;left:auto}.sl-nav.next{left:16px;right:auto}
@media (hover:none){.slider .sl-nav{opacity:1}}

/* ---------- ۵) هدر و منوی موبایل ---------- */
@media (max-width:860px){
  .topstrip .wrap{padding-top:5px;padding-bottom:5px;justify-content:center}
  .topstrip span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;font-size:12px}

  .site-header{position:sticky;top:0;z-index:70;background:#fff;box-shadow:0 6px 18px -14px rgba(64,48,58,.5)}
  .header-main{
    display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"logo actions" "search search";
    align-items:center;gap:10px 8px;padding-top:10px;padding-bottom:10px}
  .logo{grid-area:logo;order:0;min-width:0;gap:8px}
  .logo svg{width:32px;height:32px;flex:none}
  .logo-text{min-width:0}
  .logo-text b{font-size:18px;white-space:nowrap}
  .logo-text small{display:none}
  .header-actions{grid-area:actions;order:0;margin:0;gap:4px;align-items:center}
  .h-link{width:44px;height:44px;min-height:44px;padding:0;justify-content:center;border-radius:50%;background:var(--blush)}
  .h-link span{display:none}
  .cart-wrap{display:flex}
  .cart-btn{width:44px;height:44px;border-radius:50%}
  .search{grid-area:search;order:0;flex:none;width:100%;max-width:none}
  .search input{height:44px;font-size:14px}

  .catnav{border-top:0;position:relative}
  .catnav-in{
    gap:8px;padding:0 14px 10px;scroll-snap-type:x proximity;scroll-padding-inline:14px;
    -webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(to left,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%);
    mask-image:linear-gradient(to left,transparent 0,#000 14px,#000 calc(100% - 22px),transparent 100%)}
  .catnav a{flex:none;scroll-snap-align:start;min-height:36px;padding:0 15px;display:inline-flex;align-items:center;
    font-size:13.5px;border-radius:999px;background:var(--blush);color:var(--ink-2)}
  .catnav a.on{background:var(--accent);color:#fff}
  .catnav a.on::after{display:none}
  .catnav .sale-link{margin:0;background:var(--accent-l);color:var(--accent-d);font-weight:700}
  .catnav .sale-link.on{background:var(--accent);color:#fff}
}
@media (max-width:360px){
  .logo-text b{font-size:16.5px}
  .h-link,.cart-btn{width:40px;height:40px;min-height:40px}
}

/* ---------- تازه‌ترین آثار ---------- */
.newest-track{--ms-fade:var(--bg);margin-inline:-6px}
.newest-track .hscroll{display:flex;gap:16px;padding:6px 6px 26px;scroll-padding-inline:6px;scroll-snap-type:x proximity;-webkit-mask-image:none;mask-image:none}
.newest-track .hscroll .pcard{flex:0 0 clamp(180px,18vw,226px);scroll-snap-align:start;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.newest-track .hscroll .pcard:hover{transform:translateY(-6px);box-shadow:0 22px 36px -18px rgba(214,90,133,.45)}
.newest-track>.ms-bar{inset-inline:6px;bottom:6px}
.newest-track>.ms-fade{width:56px}
.newest-track>.ms-btn{top:44%}
@media (max-width:860px){.newest-track .hscroll{gap:12px}.newest-track .hscroll .pcard{flex-basis:168px}.newest-track>.ms-fade{width:22px}}
@media (hover:none){.newest-track .hscroll .pcard:hover{transform:none}}

/* ---------- فقط خود تابلو: بدون سایه، قاب و حاشیه‌ی اضافه دور عکس ---------- */
.gwall .gframe .gart,
.gwall .gframe.flat .gart,
.gwall .gframe.flat.is-wood .gart,
.gwall .gframe.flat.is-canvas .gart{
  padding:0;background:none;box-shadow:none;filter:none;
  width:calc(var(--w) * var(--cm));height:calc(var(--h) * var(--cm))}
.slide-art img{border:0;box-shadow:none;border-radius:0;background:none;transform:none;object-fit:contain;aspect-ratio:auto;max-height:100%}
.story-imgs img{box-shadow:none;border-radius:0;background:none}
.story-art img{box-shadow:none}
.pdp-gallery .zoom{border:0;box-shadow:none;background:none}
.lb-img{box-shadow:none}

/* «تابلو را با دیوارت جفت کن»: بکگراند سفید عکس حذف می‌شود و فقط خود تابلو روی رنگ دیوار می‌نشیند */
.mres-art{background:none;box-shadow:none}
.mres-art img{background:none;mix-blend-mode:multiply}

/* ==========================================================
   همه‌ی عکس‌های سایت بدون پس‌زمینه
   قاب/کارتِ دور عکس شفاف می‌شود و سفیدیِ خودِ عکس با
   mix-blend-mode در رنگ صفحه حل می‌شود
   ========================================================== */
.pcard-img,.zoom,.pdp-gallery .zoom,.cr-img,.mini-list li>a:first-child,.thumbs button,
.suggest a>img,.side-card,.sum-items li,.story-art,.story-imgs,
.mres-art,.slide-art,.tr-art,.ph-stage,.ph-art,.wb-f,.wb-t,.gart,.room-stage{background:none!important}
.pcard-img img,.zoom img,.thumbs img,.cr-img img,.mini-list img,.sum-items img,.suggest img,
.side-card img,.story-imgs img,.story-art img,.slide-art img,.tr-art img,.ph-art img,
.wb-f img,.wb-t img,.gart img,.mres-art img,.cur-img{
  background:none!important;border:0!important;box-shadow:none!important;mix-blend-mode:multiply}
.pcard.is-sold .pcard-img img{mix-blend-mode:multiply}
.thumbs button{border-color:transparent}
.thumbs button.on{border-color:var(--accent)}
.lb-img{background:none!important;box-shadow:none!important}
.gframe .gart,.gframe.flat .gart,.gframe.flat.is-wood .gart,.gframe.flat.is-canvas .gart{background:none!important}
/* تصاویر داخل لایت‌باکس روی زمینه‌ی تیره‌اند؛ ترکیبِ multiply آن‌جا عکس را سیاه می‌کند */
.lb .lb-img{mix-blend-mode:normal}

/* ==========================================================
   لبه‌ی اسکرولرها: به‌جای لایه‌ی رنگی، خودِ لبه محو می‌شود (mask)
   پس هیچ هاله‌ی رنگی‌ای روی یک طرف نمی‌ماند
   ========================================================== */
.ms-fade{display:none!important}
.mscroll{--fs:0px;--fe:0px}
.mscroll.ms-scrollable:not(.ms-at-start){--fs:38px}
.mscroll.ms-scrollable:not(.ms-at-end){--fe:38px}
.mscroll.ms-scrollable [data-track]{
  -webkit-mask-image:linear-gradient(to left,transparent 0,#000 var(--fs),#000 calc(100% - var(--fe)),transparent 100%);
  mask-image:linear-gradient(to left,transparent 0,#000 var(--fs),#000 calc(100% - var(--fe)),transparent 100%)}
[dir=ltr] .mscroll.ms-scrollable [data-track]{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 var(--fs),#000 calc(100% - var(--fe)),transparent 100%);
  mask-image:linear-gradient(to right,transparent 0,#000 var(--fs),#000 calc(100% - var(--fe)),transparent 100%)}
.slider .trail{display:none}

/* ---------- شبکه‌ی ثابت به‌جای کادرهای اسکرولی (پیشنهادهای ویژه، تازه‌ها، آثار مشابه) ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:4px 0}
.pgrid .pcard{min-width:0;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.pgrid .pcard:hover{transform:translateY(-6px);box-shadow:0 22px 36px -18px rgba(214,90,133,.45)}
.offers-grid{padding:6px clamp(18px,3vw,34px) clamp(18px,3vw,30px)}
.offers-grid .pcard{background:#fff;border:0;box-shadow:0 10px 26px -14px rgba(214,90,133,.5)}
@media (max-width:860px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .offers-grid{padding-inline:14px}
}
@media (hover:none){.pgrid .pcard:hover{transform:none}}

/* ---------- لوگوی آپلودی و شبکه‌های اجتماعی ---------- */
.logo .brand-img{display:block;flex:none}
.foot-logo{margin-bottom:10px}
.foot-social{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.foot-social a{padding:5px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);font-size:13px;transition:.2s}
.foot-social a:hover{background:var(--accent);border-color:var(--accent);color:#fff}


/* ---------- لوگوی بزرگ‌تر در هدر ---------- */
.site-header .logo .brand-img{transition:height .25s ease;filter:drop-shadow(0 4px 10px rgba(214,90,133,.22))}
.site-header.is-scrolled .logo .brand-img{height:64px!important}
@media (max-width:860px){
  .site-header .logo .brand-img{max-height:68px;max-width:68vw}
  .site-header.is-scrolled .logo .brand-img{height:48px!important}
}