/* ===== نژا | کارت‌های دسته‌ی صفحه‌ی اصلی + ردیف‌های «همه محصولات» ===== */

/* ---------- کارت‌های دسته (صفحه‌ی اصلی) ---------- */
.grid-4 .cat-card{
  --c1:#EF233C; --c2:#B3102A; --glow:rgba(239,35,60,.45);
  clip-path:none; border-radius:26px; border:0; padding:0 0 4px; isolation:isolate;
  background:#fff; box-shadow:0 18px 40px -22px var(--glow);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
  animation:ccIn .8s cubic-bezier(.2,.8,.2,1) both;
}
.grid-4 .cat-card:nth-child(1){ --c1:#EF233C; --c2:#B3102A; --glow:rgba(239,35,60,.5); animation-delay:.02s; }
.grid-4 .cat-card:nth-child(2){ --c1:#7c3aed; --c2:#4338ca; --glow:rgba(99,60,230,.5); animation-delay:.12s; }
.grid-4 .cat-card:nth-child(3){ --c1:#3a3a48; --c2:#0f0f16; --glow:rgba(40,40,60,.5); animation-delay:.22s; }
.grid-4 .cat-card:nth-child(4){ --c1:#29b6f6; --c2:#0277bd; --glow:rgba(3,150,230,.5); animation-delay:.32s; }
@keyframes ccIn{ from{opacity:0; transform:translateY(26px) scale(.96)} to{opacity:1; transform:none} }
/* قاب گرادیانتیِ در حال چرخش دورِ کارت */
.grid-4 .cat-card::before{
  content:""; position:absolute; inset:0; z-index:-2; border-radius:inherit;
  background:conic-gradient(from var(--ang,0deg), var(--c1), #fff 25%, var(--c2) 50%, #fff 75%, var(--c1));
  animation:ccSpin 5s linear infinite;
}
.grid-4 .cat-card::after{
  content:""; position:absolute; inset:3px; z-index:-1; border-radius:23px;
  background:linear-gradient(180deg,#fff,#fff8f8);
}
@property --ang{ syntax:'<angle>'; inherits:false; initial-value:0deg; }
@keyframes ccSpin{ to{ --ang:360deg; } }
.grid-4 .cat-card:hover{ transform:translateY(-10px) scale(1.015); box-shadow:0 30px 54px -20px var(--glow); border:0; }
.grid-4 .cat-card .cat-image{
  position:relative; height:170px; margin:3px 3px 0; border-radius:23px 23px 0 0; overflow:hidden;
  background:linear-gradient(135deg,var(--c1),var(--c2));
}
.grid-4 .cat-card .cat-image img{ transition:transform .7s cubic-bezier(.2,.8,.2,1); animation:ccFloat 7s ease-in-out infinite; }
.grid-4 .cat-card:hover .cat-image img{ transform:scale(1.12) rotate(-1.2deg); }
@keyframes ccFloat{ 0%,100%{ transform:scale(1.04) translateY(0)} 50%{ transform:scale(1.08) translateY(-4px)} }
/* برق نوری که روی عکس رد میشه */
.grid-4 .cat-card .cat-image::after{
  content:""; position:absolute; top:0; bottom:0; width:45%; left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg);
  animation:ccShine 4.6s ease-in-out infinite;
}
.grid-4 .cat-card:nth-child(2) .cat-image::after{ animation-delay:.5s; }
.grid-4 .cat-card:nth-child(3) .cat-image::after{ animation-delay:1s; }
.grid-4 .cat-card:nth-child(4) .cat-image::after{ animation-delay:1.5s; }
@keyframes ccShine{ 0%,55%{ left:-60% } 100%{ left:130% } }
.grid-4 .cat-card .cat-body{ padding:20px 22px 20px; position:relative; }
.grid-4 .cat-card h3{ background:linear-gradient(90deg,var(--c1),var(--c2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.grid-4 .cat-card .go{
  align-self:flex-start; margin-top:auto; padding:8px 16px; border-radius:99px; color:#fff; font-weight:800;
  background:linear-gradient(90deg,var(--c1),var(--c2)); box-shadow:0 10px 20px -10px var(--glow);
  transition:padding .3s, letter-spacing .3s;
}
.grid-4 .cat-card:hover .go{ padding-inline:22px; }
@media (prefers-reduced-motion:reduce){
  .grid-4 .cat-card, .grid-4 .cat-card::before, .grid-4 .cat-card .cat-image img, .grid-4 .cat-card .cat-image::after{ animation:none; }
}
@media (max-width:600px){
  .grid-4 .cat-card .cat-image{ height:150px; }
  .grid-4 .cat-card:hover{ transform:none; }
}

/* ---------- ردیف‌های دسته در «همه محصولات» ---------- */
.shop-rows{ display:flex; flex-direction:column; gap:46px; }
.sr-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 16px; }
.sr-head h2{ margin:0; font-size:clamp(1.15rem,2.2vw,1.6rem); font-weight:900; position:relative; padding-right:16px; }
.sr-head h2::before{ content:""; position:absolute; right:0; top:50%; width:6px; height:1.2em; transform:translateY(-50%); border-radius:6px; background:linear-gradient(180deg,#EF233C,#B3102A); }
.sr-head a{ display:inline-flex; align-items:center; gap:6px; color:var(--ember); font-weight:800; font-size:.95rem; white-space:nowrap; transition:gap .25s; }
.sr-head a:hover{ gap:12px; }
.sr-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; }
.sr-card{
  --tilt:0deg; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit;
  opacity:0; transform:translateY(24px) scale(.97);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.sr-card.in{ opacity:1; transform:none; }
.sr-img{
  position:relative; aspect-ratio:1/1; border-radius:24px; overflow:hidden; background:#f3eaea;
  box-shadow:0 14px 30px -18px rgba(60,10,20,.45); transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.sr-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s cubic-bezier(.2,.8,.2,1); }
.sr-img::after{
  content:""; position:absolute; top:0; bottom:0; width:40%; left:-70%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-18deg); transition:left .9s ease;
}
.sr-card.in.in-done:hover .sr-img{ transform:translateY(-8px) rotate(-1.2deg); box-shadow:0 28px 40px -20px rgba(179,16,42,.55); }
.sr-card:hover .sr-img img{ transform:scale(1.1); }
.sr-card:hover .sr-img::after{ left:130%; }
.sr-name{ margin:0; font-size:1rem; font-weight:800; line-height:1.7; text-align:center;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.sr-price{ text-align:center; color:var(--ash); font-size:.92rem; font-weight:700; }
.sr-price b{ color:var(--ember); font-weight:900; }
/* کارت چهارم (مشاهده همه) */
.sr-all .sr-img{ background:#1c1013; }
.sr-all .sr-img img{ opacity:.78; }
.sr-all .sr-img::before{
  content:"←"; position:absolute; z-index:2; left:50%; top:50%; width:60px; height:60px; margin:-30px 0 0 -30px; border-radius:50%;
  display:grid; place-items:center; background:#fff; color:var(--ember); font-size:1.7rem; font-weight:900;
  box-shadow:0 0 0 0 rgba(255,255,255,.7); animation:srPulse 2.2s infinite;
}
@keyframes srPulse{ 70%{ box-shadow:0 0 0 22px rgba(255,255,255,0) } 100%{ box-shadow:0 0 0 0 rgba(255,255,255,0) } }
.sr-all .sr-name{ color:var(--ember); }
.sr-badge{ position:absolute; z-index:2; top:10px; right:10px; padding:4px 11px; border-radius:99px; font-size:.74rem; font-weight:800; color:#fff;
  background:linear-gradient(90deg,#EF233C,#B3102A); box-shadow:0 8px 14px -8px rgba(179,16,42,.8); }
.sr-hint,.sr-bar{ display:none; }
@media (max-width:900px){
  .shop-rows{ gap:34px; }
  .sr-grid{
    display:flex; gap:12px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin:0 -28px; padding:4px 28px 10px; scroll-padding-inline:28px; scrollbar-width:none; overscroll-behavior-x:contain;
  }
  .sr-grid::-webkit-scrollbar{ display:none; }
  .sr-card{ flex:0 0 42%; max-width:200px; min-width:140px; scroll-snap-align:start; }
  .sr-row{ position:relative; }
  /* نشانه‌ی کشیدن: دست کوچک که به چپ می‌کشه + نوار پیشرفت */
  .sr-hint{
    display:flex; align-items:center; justify-content:center; gap:8px; margin:2px auto 0; width:max-content;
    padding:6px 14px; border-radius:99px; background:#fff1f2; color:var(--ember); font-size:.8rem; font-weight:800;
    transition:opacity .4s, transform .4s;
  }
  .sr-hint i{ font-style:normal; display:inline-block; font-size:1.05rem; animation:srSwipe 1.4s ease-in-out infinite; }
  @keyframes srSwipe{ 0%{ transform:translateX(6px); opacity:.2 } 50%{ transform:translateX(-8px); opacity:1 } 100%{ transform:translateX(-14px); opacity:0 } }
  .sr-row.moved .sr-hint{ opacity:0; transform:scale(.8); height:0; padding:0; margin:0; overflow:hidden; }
  .sr-bar{ display:block; height:4px; width:86px; margin:10px auto 0; border-radius:4px; background:#f3d9dc; overflow:hidden; }
  .sr-bar b{ display:block; height:100%; width:30%; border-radius:4px; background:linear-gradient(90deg,#EF233C,#B3102A); transform-origin:right; }
  /* سایه‌ی لبه‌ی چپ می‌گه ادامه داره */
  .sr-row::after{ content:""; position:absolute; left:-28px; top:44px; bottom:70px; width:34px; pointer-events:none;
    background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,0)); transition:opacity .3s; }
  .sr-row.end::after{ opacity:0; }
}
@media (max-width:420px){ .sr-card{ flex-basis:44%; } .sr-img{ border-radius:18px; } .sr-name{ font-size:.9rem; } .sr-price{ font-size:.82rem; } .sr-all .sr-img::before{ width:48px; height:48px; margin:-24px 0 0 -24px; font-size:1.4rem; } }
@media (hover:none){ .sr-card.in.in-done:hover .sr-img{ transform:none; } }
@media (prefers-reduced-motion:reduce){ .sr-card{ opacity:1; transform:none; transition:none; } .sr-all .sr-img::before{ animation:none; } }