/* ===== ابر باران — دسته‌بندی محصولات ===== */
.abrs-cats,.abrs-cats *{box-sizing:border-box}
.abrs-has-font :where(h2,a,span,small,i,div,button,b,strong){font-family:var(--abrs-font)}
.abrs-cats{--abrs-ca:#b8823f;--abrs-cols:6;position:relative;margin:16px 0}
.abrs-cats .abrs-cats-track{display:flex;gap:var(--c-gap,14px);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding:16px 8px 24px}
.abrs-cats .abrs-cats-track::-webkit-scrollbar{display:none}
.abrs-cats .abrs-cat{flex:0 0 auto;width:var(--abrs-iw-m,var(--abrs-iw,100px));scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none!important;color:var(--c-title,#222);transition:transform .3s ease,box-shadow .3s ease,background .3s ease,border-color .3s ease;-webkit-tap-highlight-color:transparent}
.abrs-cats .abrs-cat-img{display:block;position:relative;width:100%;flex:none}
.abrs-cats .abrs-cat-img img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;border:0;transition:transform .35s ease,box-shadow .35s ease,filter .35s ease}
.abrs-cats .abrs-cat-ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;background:var(--c-ph-bg,#f1ece4);color:var(--c-ph,var(--abrs-ca));font-weight:800;font-size:28px}
.abrs-cats .abrs-cat-body{display:block}
.abrs-cats .abrs-cat-title{display:block;font-size:var(--c-fs-title,14px);font-weight:var(--c-fw-title,700);line-height:1.6;text-align:center;color:var(--c-title,#222);transition:color .3s ease,transform .35s ease}
.abrs-cats .abrs-cat-count{display:block;font-size:var(--c-fs-count,11.5px);color:var(--c-count,#8a8a8a);text-align:center;line-height:1.5}

/* ---- ۱) دایره‌ای ---- */
.abrs-cs-circle{--abrs-iw:92px;--abrs-gmax:150px}
.abrs-cs-circle .abrs-cat-img{aspect-ratio:1}
.abrs-cs-circle .abrs-cat-img img,.abrs-cs-circle .abrs-cat-ph{border-radius:50%;box-shadow:0 4px 12px rgba(0,0,0,.12)}

/* ---- ۲) کارت ---- */
.abrs-cs-card{--abrs-iw:140px;--abrs-gmax:240px}
.abrs-cs-card .abrs-cat{background:var(--c-card-bg,#fff);border:1px solid var(--c-bd,transparent);border-radius:var(--c-rad,16px);box-shadow:0 2px 10px rgba(0,0,0,.07);overflow:hidden;gap:0;padding-bottom:12px}
.abrs-cs-card .abrs-cat-img{aspect-ratio:4/3;overflow:hidden}
.abrs-cs-card .abrs-cat-body{padding:10px 8px 0}
.abrs-cs-card .abrs-cat-title::after{content:"";display:block;height:2px;width:0;margin:6px auto 0;background:var(--abrs-ca);transition:width .3s ease}

/* ---- ۳) تمام‌تصویر با لایه ---- */
.abrs-cs-overlay{--abrs-iw:140px;--abrs-gmax:240px}
.abrs-cs-overlay .abrs-cat{position:relative;display:block;aspect-ratio:3/4;border-radius:var(--c-rad,18px);overflow:hidden;background:var(--c-card-bg,#ddd)}
.abrs-cs-overlay .abrs-cat-img{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
.abrs-cs-overlay .abrs-cat::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--abrs-ca),transparent 70%);opacity:0;transition:opacity .35s ease;pointer-events:none}
.abrs-cs-overlay .abrs-cat-body{position:absolute;inset:auto 0 0 0;z-index:2;padding:34px 10px 12px;background:linear-gradient(to top,var(--c-ov,rgba(0,0,0,.75)),transparent)}
.abrs-cs-overlay .abrs-cat-title{color:var(--c-title,#fff)}
.abrs-cs-overlay .abrs-cat-count{color:var(--c-count,rgba(255,255,255,.88));max-height:0;opacity:0;overflow:hidden;transition:max-height .35s ease,opacity .35s ease}

/* ---- ۴) حلقه رنگی ---- */
.abrs-cs-ring{--abrs-iw:96px;--abrs-gmax:140px}
.abrs-cs-ring .abrs-cat-img{aspect-ratio:1;border-radius:50%;padding:4px}
.abrs-cs-ring .abrs-cat-img::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,var(--abrs-ca),#f6dcae,var(--abrs-ca));transition:transform .8s ease}
.abrs-cs-ring .abrs-cat-img img,.abrs-cs-ring .abrs-cat-ph{position:relative;z-index:1;border-radius:50%;border:3px solid var(--c-card-bg,#fff)}

/* ---- ۵) قرصی (چیپ) ---- */
.abrs-cs-pill .abrs-cat{width:auto;flex-direction:row;gap:10px;padding:6px;padding-inline-end:18px;border:1px solid var(--c-bd,#eee);background:var(--c-card-bg,#fff);border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.05);white-space:nowrap}
.abrs-cs-pill .abrs-cat-img{width:44px;height:44px;border-radius:50%;overflow:hidden}
.abrs-cs-pill .abrs-cat-ph{font-size:18px}
.abrs-cs-pill .abrs-cat-title,.abrs-cs-pill .abrs-cat-count{text-align:start}
.abrs-cs-pill .abrs-cat-title{font-size:var(--c-fs-title,13px)}
.abrs-cs-pill .abrs-cat-count{font-size:var(--c-fs-count,10.5px)}


/* ---- ۶) مربع گرد (آیکونی) ---- */
.abrs-cs-square{--abrs-iw:92px;--abrs-gmax:150px}
.abrs-cs-square .abrs-cat-img{aspect-ratio:1}
.abrs-cs-square .abrs-cat-img img,.abrs-cs-square .abrs-cat-ph{border-radius:var(--c-rad,26%);box-shadow:0 5px 14px rgba(0,0,0,.14)}
.abrs-cs-square .abrs-cat-img{border:0}

/* ---- ۷) کاشی رنگی ---- */
.abrs-cs-tile{--abrs-iw:108px;--abrs-gmax:170px}
.abrs-cs-tile .abrs-cat{background:var(--c-card-bg,linear-gradient(rgba(255,255,255,.86),rgba(255,255,255,.86)),var(--abrs-ca));border:1px solid var(--c-bd,transparent);border-radius:var(--c-rad,22px);padding:14px 8px 12px;gap:8px}
.abrs-cs-tile .abrs-cat-img{width:78%;aspect-ratio:1}
.abrs-cs-tile .abrs-cat-img img,.abrs-cs-tile .abrs-cat-ph{border-radius:50%;border:3px solid #fff;box-shadow:0 6px 16px rgba(0,0,0,.12)}

/* ---- دسکتاپ: شبکه یا اسلایدی ---- */
@media(min-width:768px){
  .abrs-cs-circle{--abrs-iw:130px}
  .abrs-cs-ring{--abrs-iw:130px}
  .abrs-cs-square{--abrs-iw:130px}
  .abrs-cs-tile{--abrs-iw:150px}
  .abrs-cs-card,.abrs-cs-overlay{--abrs-iw:180px}
  .abrs-cats .abrs-cat{width:var(--abrs-iw-d,var(--abrs-iw,100px))}
  .abrs-cats.abrs-cs-pill .abrs-cat{width:auto}
  .abrs-cats[data-view=grid] .abrs-cats-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--c-gap,24px) var(--c-gap,18px);overflow:visible}
  .abrs-cats[data-view=grid] .abrs-cat{width:100%;max-width:var(--abrs-gmax,150px);margin-inline:auto}
  .abrs-cats.abrs-cs-pill[data-view=grid] .abrs-cats-track{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--c-gap,12px)}
  .abrs-cats.abrs-cs-pill[data-view=grid] .abrs-cat{width:auto;max-width:none;margin:0}
}
@media(min-width:1024px){
  .abrs-cats[data-view=grid] .abrs-cats-track{grid-template-columns:repeat(var(--abrs-cols),minmax(0,1fr))}
}

/* ---- فلش‌ها (حالت اسلایدی دسکتاپ) ---- */
.abrs-cats .abrs-cats-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:38px;height:38px;min-width:0;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:#fff;color:#222;box-shadow:0 2px 8px rgba(0,0,0,.25);cursor:pointer;display:none;align-items:center;justify-content:center;transition:opacity .2s ease}
.abrs-cats .abrs-cats-btn svg{width:20px;height:20px;display:block;pointer-events:none}
.abrs-cats .abrs-cats-next{inset-inline-end:-6px}
.abrs-cats .abrs-cats-prev{inset-inline-start:-6px}
.abrs-cats[dir=ltr] .abrs-cats-prev svg,.abrs-cats[dir=rtl] .abrs-cats-next svg{transform:scaleX(-1)}
.abrs-cats .abrs-cats-btn.is-off{opacity:0;pointer-events:none}
@media(min-width:768px){.abrs-cats[data-view=swipe] .abrs-cats-btn{display:flex}}

/* ---- موبایل/لمسی: ایتم کامل نمایش داده شود ---- */
@media(hover:none){
  .abrs-cs-overlay .abrs-cat-count{max-height:20px;opacity:1}
}

/* ================= هاورها (فقط دستگاه‌های دارای ماوس) ================= */
@media(hover:hover){
  .abrs-cats:not(.abrs-hv-none) .abrs-cat:hover .abrs-cat-title{color:var(--abrs-ca)}
  .abrs-cs-overlay .abrs-cat:hover .abrs-cat-title{color:#fff}
  .abrs-cs-overlay .abrs-cat:hover .abrs-cat-count{max-height:20px;opacity:1}

  /* امضای هر طرح */
  .abrs-hv-default.abrs-cs-circle .abrs-cat:hover{transform:translateY(-6px)}
  .abrs-hv-default.abrs-cs-circle .abrs-cat:hover .abrs-cat-img img{transform:scale(1.08);box-shadow:0 10px 24px rgba(0,0,0,.22)}
  .abrs-hv-default.abrs-cs-card .abrs-cat:hover{transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.14)}
  .abrs-hv-default.abrs-cs-card .abrs-cat:hover .abrs-cat-img img{transform:scale(1.08)}
  .abrs-hv-default.abrs-cs-card .abrs-cat:hover .abrs-cat-title::after{width:36px}
  .abrs-hv-default.abrs-cs-overlay .abrs-cat:hover::after{opacity:.5}
  .abrs-hv-default.abrs-cs-overlay .abrs-cat:hover .abrs-cat-img img{transform:scale(1.1)}
  .abrs-hv-default.abrs-cs-overlay .abrs-cat:hover .abrs-cat-title{transform:translateY(-3px)}
  .abrs-hv-default.abrs-cs-ring .abrs-cat:hover{transform:translateY(-4px)}
  .abrs-hv-default.abrs-cs-ring .abrs-cat:hover .abrs-cat-img::before{transform:rotate(360deg)}
  .abrs-hv-default.abrs-cs-square .abrs-cat:hover{transform:translateY(-5px)}
  .abrs-hv-default.abrs-cs-square .abrs-cat:hover .abrs-cat-img img{transform:scale(1.06) rotate(-2deg);box-shadow:0 12px 26px rgba(0,0,0,.24)}
  .abrs-hv-default.abrs-cs-tile .abrs-cat:hover{background:var(--abrs-ca);border-color:var(--abrs-ca);transform:translateY(-4px);box-shadow:0 12px 26px rgba(0,0,0,.16)}
  .abrs-hv-default.abrs-cs-tile .abrs-cat:hover .abrs-cat-title,.abrs-hv-default.abrs-cs-tile .abrs-cat:hover .abrs-cat-count{color:#fff}
  .abrs-hv-default.abrs-cs-tile .abrs-cat:hover .abrs-cat-img img{transform:scale(1.08)}
  .abrs-hv-default.abrs-cs-pill .abrs-cat:hover{background:var(--abrs-ca);border-color:var(--abrs-ca);transform:translateY(-3px);box-shadow:0 8px 18px rgba(0,0,0,.16)}
  .abrs-hv-default.abrs-cs-pill .abrs-cat:hover .abrs-cat-title,.abrs-hv-default.abrs-cs-pill .abrs-cat:hover .abrs-cat-count{color:#fff}
  .abrs-hv-default.abrs-cs-pill .abrs-cat:hover .abrs-cat-img img{transform:rotate(-8deg) scale(1.12)}

  /* بالا آمدن */
  .abrs-hv-lift .abrs-cat:hover{transform:translateY(-8px)}
  .abrs-hv-lift.abrs-cs-circle .abrs-cat:hover .abrs-cat-img img,.abrs-hv-lift.abrs-cs-square .abrs-cat:hover .abrs-cat-img img{box-shadow:0 14px 26px rgba(0,0,0,.25)}
  .abrs-hv-lift.abrs-cs-card .abrs-cat:hover,.abrs-hv-lift.abrs-cs-pill .abrs-cat:hover,.abrs-hv-lift.abrs-cs-overlay .abrs-cat:hover,.abrs-hv-lift.abrs-cs-tile .abrs-cat:hover{box-shadow:0 14px 26px rgba(0,0,0,.18)}
  /* بزرگ‌نمایی تصویر */
  .abrs-hv-zoom .abrs-cat:hover .abrs-cat-img img{transform:scale(1.14)}
  /* حاشیه درخشان */
  .abrs-hv-glow.abrs-cs-circle .abrs-cat:hover .abrs-cat-img img,.abrs-hv-glow.abrs-cs-ring .abrs-cat:hover .abrs-cat-img img,.abrs-hv-glow.abrs-cs-square .abrs-cat:hover .abrs-cat-img img{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--abrs-ca),0 10px 26px rgba(0,0,0,.2)}
  .abrs-hv-glow.abrs-cs-card .abrs-cat:hover,.abrs-hv-glow.abrs-cs-overlay .abrs-cat:hover,.abrs-hv-glow.abrs-cs-pill .abrs-cat:hover,.abrs-hv-glow.abrs-cs-tile .abrs-cat:hover{box-shadow:0 0 0 2px var(--abrs-ca),0 10px 26px rgba(0,0,0,.18)}
  /* چرخش ملایم */
  .abrs-hv-tilt .abrs-cat:hover .abrs-cat-img img{transform:rotate(-6deg) scale(1.14)}
  /* سیاه‌وسفید به رنگی */
  .abrs-hv-color .abrs-cat-img img{filter:grayscale(1) contrast(1.05)}
  .abrs-hv-color .abrs-cat:hover .abrs-cat-img img{filter:none}
}
