/* ==========================================================================
   AraShop — COMPONENTS
   پایه‌های سیستم طراحی: سطوح شیشه‌ای، دکمه‌ها، فرم‌ها، برچسب‌ها،
   اسلایدر، صفحه‌بندی، تب، آکاردئون و ابزارهای کمکی.
   ========================================================================== */

/* =========================================================
   1) GLASS SURFACES — هسته‌ی سیستم
   ---------------------------------------------------------
   .ara-glass      سطح شیشه‌ای کامل (با بلور). برای «کروم» رابط: هدر، پنل‌ها،
                   مودال‌ها، کارت‌های شاخص. پرهزینه است — با احتیاط استفاده شود.
   .ara-frost      نسخه‌ی سبک بدون backdrop-filter. برای عناصر تکرارشونده
                   (کارت محصول، آیتم لیست) تا اسکرول روی موبایل روان بماند.
   هر دو ظاهر یکسانی دارند؛ تفاوت فقط در هزینه‌ی رندر است.
   ========================================================= */
.ara-glass,
.ara-frost{
  position:relative;
  border-radius:var(--ara-r-lg);
  border:1px solid var(--ara-glass-line-soft);
  background:var(--ara-glass-bg);
  box-shadow:
    var(--ara-e2),
    inset 0 1px 0 var(--ara-glass-inner),
    inset 0 -1px 0 var(--ara-glass-line-soft);
}
.ara-glass{
  -webkit-backdrop-filter:blur(var(--ara-blur)) saturate(var(--ara-saturate));
  backdrop-filter:blur(var(--ara-blur)) saturate(var(--ara-saturate));
}
.ara-frost{
  background:color-mix(in srgb, var(--ara-glass-bg) 100%, #fff 12%);
}
[data-ara-theme="dark"] .ara-frost{
  background:color-mix(in srgb, var(--ara-glass-bg) 100%, #fff 3%);
}

/* بازتاب نور (specular highlight) — همان چیزی که «شیشه» را از «سطح نیمه‌شفاف» جدا می‌کند */
.ara-glass::before,
.ara-frost::before{
  content:"";
  position:absolute; inset:0; z-index:0;
  border-radius:inherit; pointer-events:none;
  background:linear-gradient(150deg, var(--ara-glass-glare) 0%, transparent 38%, transparent 100%);
  opacity:.7;
}
.ara-glass > *,
.ara-frost > *{ position:relative; z-index:1; }

.ara-glass-soft{ background:var(--ara-glass-bg-soft); }
.ara-glass-strong{ background:var(--ara-glass-bg-strong); }
.ara-glass-sm{ border-radius:var(--ara-r-md); }
.ara-glass-xl{ border-radius:var(--ara-r-xl); }
.ara-glass-flush::before{ display:none; }

/* حالت لیکویید: لبه‌ی ضخیم‌تر و درخشش داخلی قوی‌تر، شبیه شیشه‌ی حجیم */
.ara-liquid{
  border:1px solid var(--ara-glass-line);
  box-shadow:
    var(--ara-e3),
    inset 0 2px 1px var(--ara-glass-inner),
    inset 0 -2px 2px var(--ara-glass-line-soft),
    inset 0 0 40px color-mix(in srgb, var(--ara-primary) 6%, transparent);
}

/* اگر مرورگر backdrop-filter ندارد، شفافیت را کم می‌کنیم تا متن خوانا بماند */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .ara-glass{ background:var(--ara-glass-bg-strong); }
  [data-ara-theme="dark"] .ara-glass{ background:rgba(20,17,42,.94); }
}

/* روی موبایل، بلور را سبک‌تر می‌کنیم (هزینه‌ی GPU پایین‌تر، اسکرول روان‌تر) */
@media (max-width:767px){
  .ara-glass{
    -webkit-backdrop-filter:blur(var(--ara-blur-sm)) saturate(140%);
    backdrop-filter:blur(var(--ara-blur-sm)) saturate(140%);
  }
}

/* =========================================================
   2) CARDS
   ========================================================= */
.ara-card{
  position:relative;
  border-radius:var(--ara-r-lg);
  background:var(--ara-glass-bg);
  border:1px solid var(--ara-glass-line-soft);
  box-shadow:var(--ara-e1), inset 0 1px 0 var(--ara-glass-inner);
  overflow:hidden;
  transition:transform var(--ara-t) var(--ara-ease-out),
             box-shadow var(--ara-t) var(--ara-ease-out),
             border-color var(--ara-t) var(--ara-ease);
}
.ara-card-hover:hover,
.ara-card-hover:focus-within{
  transform:translateY(-4px);
  box-shadow:var(--ara-e3);
  border-color:color-mix(in srgb, var(--ara-primary) 30%, transparent);
}
.ara-card-body{ padding:var(--ara-s5); }
.ara-card-pad{ padding:var(--ara-s6); }

/* پنل شیشه‌ای بزرگ (بخش‌های کامل صفحه) */
.ara-panel{
  border-radius:var(--ara-r-xl);
  padding:var(--ara-s7);
}
@media (max-width:640px){
  .ara-panel{ padding:var(--ara-s5); border-radius:var(--ara-r-lg); }
}

/* =========================================================
   3) BUTTONS — دکمه‌ی شیشه‌ای با درخشش لیکویید
   ========================================================= */
.ara-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--ara-s2);
  min-height:46px; padding:0 var(--ara-s6);
  border-radius:var(--ara-r-pill);
  font-size:var(--ara-fs-sm); font-weight:700; line-height:1;
  white-space:nowrap; text-align:center;
  border:1px solid transparent;
  overflow:hidden; isolation:isolate;
  transition:transform var(--ara-t-fast) var(--ara-ease),
             box-shadow var(--ara-t) var(--ara-ease),
             background-color var(--ara-t) var(--ara-ease),
             color var(--ara-t) var(--ara-ease),
             border-color var(--ara-t) var(--ara-ease);
}
.ara-btn svg{ width:18px; height:18px; flex:0 0 auto; }
.ara-btn:active{ transform:scale(.97); }
.ara-btn[disabled],.ara-btn.is-disabled{ opacity:.5; pointer-events:none; }

/* درخشش عبوری هنگام هاور — امضای بصری «لیکویید» */
.ara-btn::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.42) 45%, transparent 70%);
  transform:translateX(-120%);
  transition:transform var(--ara-t-slow) var(--ara-ease-out);
}
.ara-btn:hover::after{ transform:translateX(120%); }

.ara-btn-primary{
  background:var(--ara-primary); color:var(--ara-on-primary);
  box-shadow:var(--ara-e-primary), inset 0 1px 0 rgba(255,255,255,.32);
}
.ara-btn-primary:hover{ background:var(--ara-primary-600); box-shadow:0 14px 34px var(--ara-primary-glow); }

.ara-btn-accent{
  background:var(--ara-accent); color:var(--ara-on-accent);
  box-shadow:var(--ara-e-accent), inset 0 1px 0 rgba(255,255,255,.4);
}
.ara-btn-accent:hover{ background:var(--ara-accent-700); color:#fff; }

.ara-btn-dark{
  background:var(--ara-ink); color:var(--ara-bg);
  box-shadow:var(--ara-e2), inset 0 1px 0 rgba(255,255,255,.18);
}

/* دکمه‌ی شیشه‌ای — روی پس‌زمینه‌های رنگی/تصویری */
.ara-btn-glass{
  background:var(--ara-glass-bg);
  -webkit-backdrop-filter:blur(var(--ara-blur-sm)) saturate(150%);
  backdrop-filter:blur(var(--ara-blur-sm)) saturate(150%);
  border-color:var(--ara-glass-line);
  color:var(--ara-ink);
  box-shadow:var(--ara-e1), inset 0 1px 0 var(--ara-glass-inner);
}
.ara-btn-glass:hover{ background:var(--ara-glass-bg-strong); }

.ara-btn-outline{
  background:transparent; color:var(--ara-primary);
  border-color:color-mix(in srgb, var(--ara-primary) 40%, transparent);
}
.ara-btn-outline:hover{ background:var(--ara-primary-tint); border-color:var(--ara-primary); }

.ara-btn-ghost{ background:transparent; color:var(--ara-ink-soft); }
.ara-btn-ghost:hover{ background:var(--ara-primary-tint); color:var(--ara-primary); }

.ara-btn-danger{ background:var(--ara-danger); color:#fff; }

.ara-btn-sm{ min-height:38px; padding:0 var(--ara-s4); font-size:var(--ara-fs-xs); }
.ara-btn-sm svg{ width:15px; height:15px; }
.ara-btn-lg{ min-height:56px; padding:0 var(--ara-s8); font-size:var(--ara-fs-md); }
.ara-btn-block{ display:flex; width:100%; }

/* دکمه‌ی آیکونی گرد */
.ara-icon-btn{
  position:relative;
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; flex:0 0 auto;
  border-radius:var(--ara-r-pill);
  color:var(--ara-ink);
  background:var(--ara-glass-bg-soft);
  border:1px solid var(--ara-glass-line-soft);
  box-shadow:inset 0 1px 0 var(--ara-glass-inner);
  transition:background-color var(--ara-t) var(--ara-ease),
             color var(--ara-t) var(--ara-ease),
             transform var(--ara-t-fast) var(--ara-ease);
}
.ara-icon-btn svg{ width:20px; height:20px; }
.ara-icon-btn:hover{ background:var(--ara-primary-tint); color:var(--ara-primary); }
.ara-icon-btn:active{ transform:scale(.93); }
.ara-icon-btn-sm{ width:34px; height:34px; }
.ara-icon-btn-sm svg{ width:16px; height:16px; }
.ara-icon-btn.is-active{ background:var(--ara-primary); color:var(--ara-on-primary); border-color:transparent; }

/* نشان شمارنده روی دکمه (سبد خرید) */
.ara-count{
  position:absolute; top:-3px; inset-inline-start:-3px;
  min-width:19px; height:19px; padding:0 5px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--ara-r-pill);
  background:var(--ara-accent); color:var(--ara-on-accent);
  font-size:10.5px; font-weight:800; line-height:1;
  border:2px solid var(--ara-bg);
}

/* =========================================================
   4) BADGES / CHIPS / TAGS
   ========================================================= */
.ara-badge{
  display:inline-flex; align-items:center; gap:5px;
  padding:5px 11px; border-radius:var(--ara-r-pill);
  font-size:var(--ara-fs-xs); font-weight:700; line-height:1.5;
  background:var(--ara-primary-tint); color:var(--ara-primary);
  border:1px solid color-mix(in srgb, var(--ara-primary) 18%, transparent);
}
.ara-badge svg{ width:13px; height:13px; }
.ara-badge-accent{ background:var(--ara-accent-tint); color:var(--ara-accent-700); border-color:color-mix(in srgb, var(--ara-accent) 22%, transparent); }
.ara-badge-success{ background:var(--ara-success-tint); color:var(--ara-success); border-color:color-mix(in srgb, var(--ara-success) 20%, transparent); }
.ara-badge-warning{ background:var(--ara-warning-tint); color:var(--ara-warning); border-color:color-mix(in srgb, var(--ara-warning) 22%, transparent); }
.ara-badge-danger{ background:var(--ara-danger-tint); color:var(--ara-danger); border-color:color-mix(in srgb, var(--ara-danger) 20%, transparent); }
.ara-badge-solid{ background:var(--ara-primary); color:var(--ara-on-primary); border-color:transparent; }
.ara-badge-glass{
  background:rgba(255,255,255,.22); color:#fff; border-color:rgba(255,255,255,.34);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}

/* چیپ قابل انتخاب (فیلتر، ساعت، دسته) */
.ara-chip{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  min-height:40px; padding:0 var(--ara-s4);
  border-radius:var(--ara-r-pill);
  font-size:var(--ara-fs-sm); font-weight:600;
  color:var(--ara-ink-soft);
  background:var(--ara-glass-bg-soft);
  border:1px solid var(--ara-glass-line-soft);
  white-space:nowrap;
  transition:all var(--ara-t) var(--ara-ease);
}
.ara-chip:hover{ border-color:color-mix(in srgb, var(--ara-primary) 40%, transparent); color:var(--ara-primary); }
.ara-chip.is-active,
.ara-chip[aria-pressed="true"]{
  background:var(--ara-primary); color:var(--ara-on-primary);
  border-color:transparent; box-shadow:var(--ara-e-primary);
}
.ara-chip[disabled],.ara-chip.is-disabled{ opacity:.4; pointer-events:none; text-decoration:line-through; }

/* =========================================================
   5) FORMS
   ========================================================= */
.ara-field{ margin-bottom:var(--ara-s4); }
.ara-field > label,
.ara-label{
  display:block; margin-bottom:var(--ara-s2);
  font-size:var(--ara-fs-sm); font-weight:700; color:var(--ara-ink);
}
.ara-label .ara-req{ color:var(--ara-danger); }

.ara-input,
.ara-field input[type="text"],
.ara-field input[type="email"],
.ara-field input[type="tel"],
.ara-field input[type="url"],
.ara-field input[type="number"],
.ara-field input[type="password"],
.ara-field input[type="search"],
.ara-field input[type="date"],
.ara-field select,
.ara-field textarea{
  width:100%; min-height:50px;
  padding:13px var(--ara-s4);
  border-radius:var(--ara-r-sm);
  background:var(--ara-glass-bg-soft);
  border:1px solid var(--ara-glass-line-soft);
  color:var(--ara-ink);
  font-size:var(--ara-fs-base);
  box-shadow:inset 0 1px 2px rgba(23,18,51,.04);
  transition:border-color var(--ara-t) var(--ara-ease),
             background-color var(--ara-t) var(--ara-ease),
             box-shadow var(--ara-t) var(--ara-ease);
}
.ara-field textarea{ min-height:120px; resize:vertical; line-height:1.8; }
.ara-field select{
  appearance:none; -webkit-appearance:none;
  padding-inline-end:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237C7797' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:left var(--ara-s4) center;
  background-size:16px;
}
[data-ara-theme="dark"] .ara-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A85A8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}
.ara-input::placeholder,
.ara-field input::placeholder,
.ara-field textarea::placeholder{ color:var(--ara-ink-mute); }

.ara-input:focus,
.ara-field input:focus,
.ara-field select:focus,
.ara-field textarea:focus{
  outline:none;
  border-color:var(--ara-primary);
  background:var(--ara-glass-bg-strong);
  box-shadow:0 0 0 4px var(--ara-primary-tint);
}
.ara-field.has-error input,
.ara-field.has-error select,
.ara-field.has-error textarea{ border-color:var(--ara-danger); }
.ara-field-hint{ margin:6px 0 0; font-size:var(--ara-fs-xs); color:var(--ara-ink-mute); }
.ara-field-error{ margin:6px 0 0; font-size:var(--ara-fs-xs); color:var(--ara-danger); font-weight:600; }

/* گروه فیلد (کنار هم روی دسکتاپ) */
.ara-field-row{ display:grid; grid-template-columns:1fr; gap:0 var(--ara-s4); }
@media (min-width:640px){
  .ara-field-row{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ara-field-row-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* چک‌باکس و رادیوی سفارشی */
.ara-check{
  display:flex; align-items:flex-start; gap:var(--ara-s3);
  font-size:var(--ara-fs-sm); color:var(--ara-ink-soft); cursor:pointer;
  line-height:1.7;
}
.ara-check input[type="checkbox"],
.ara-check input[type="radio"]{
  appearance:none; -webkit-appearance:none;
  width:22px; height:22px; flex:0 0 auto; margin-top:2px;
  border-radius:7px; border:1.5px solid var(--ara-line-strong);
  background:var(--ara-glass-bg-soft);
  transition:all var(--ara-t) var(--ara-ease);
  position:relative; cursor:pointer;
}
.ara-check input[type="radio"]{ border-radius:50%; }
.ara-check input:checked{ background:var(--ara-primary); border-color:var(--ara-primary); }
.ara-check input[type="checkbox"]:checked::after{
  content:""; position:absolute; inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat;
}
.ara-check input[type="radio"]:checked::after{
  content:""; position:absolute; inset:5px; border-radius:50%; background:#fff;
}
.ara-check input:focus-visible{ box-shadow:0 0 0 4px var(--ara-primary-tint); }

/* کلید روشن/خاموش */
.ara-switch{ display:inline-flex; align-items:center; gap:var(--ara-s3); cursor:pointer; }
.ara-switch input{ appearance:none; -webkit-appearance:none; width:48px; height:28px; border-radius:999px; background:var(--ara-line-strong); position:relative; transition:background-color var(--ara-t) var(--ara-ease); cursor:pointer; }
.ara-switch input::after{
  content:""; position:absolute; top:3px; inset-inline-start:3px;
  width:22px; height:22px; border-radius:50%; background:#fff;
  box-shadow:0 2px 5px rgba(0,0,0,.22);
  transition:transform var(--ara-t) var(--ara-spring);
}
.ara-switch input:checked{ background:var(--ara-primary); }
.ara-switch input:checked::after{ transform:translateX(-20px); }

/* فیلد جستجوی درون‌خطی */
.ara-search-field{
  display:flex; align-items:center; gap:var(--ara-s2);
  padding:5px 5px 5px var(--ara-s4);
  border-radius:var(--ara-r-pill);
  background:var(--ara-glass-bg-soft);
  border:1px solid var(--ara-glass-line-soft);
  transition:border-color var(--ara-t) var(--ara-ease), box-shadow var(--ara-t) var(--ara-ease);
}
.ara-search-field:focus-within{ border-color:var(--ara-primary); box-shadow:0 0 0 4px var(--ara-primary-tint); }
.ara-search-field input{
  flex:1 1 auto; min-width:0; border:0; background:transparent; outline:none;
  padding:9px 0; font-size:var(--ara-fs-sm); color:var(--ara-ink);
}
.ara-search-field button{
  flex:0 0 auto; width:38px; height:38px; border-radius:50%;
  background:var(--ara-primary); color:var(--ara-on-primary);
  display:flex; align-items:center; justify-content:center;
  transition:background-color var(--ara-t) var(--ara-ease);
}
.ara-search-field button:hover{ background:var(--ara-primary-600); }
.ara-search-field button svg{ width:17px; height:17px; }

/* استپر تعداد */
.ara-stepper{
  display:inline-flex; align-items:center;
  border-radius:var(--ara-r-pill);
  background:var(--ara-glass-bg-soft);
  border:1px solid var(--ara-glass-line-soft);
  overflow:hidden;
}
.ara-stepper button{
  width:38px; height:42px; display:flex; align-items:center; justify-content:center;
  color:var(--ara-ink-soft); font-size:17px; font-weight:700;
  transition:background-color var(--ara-t) var(--ara-ease), color var(--ara-t) var(--ara-ease);
}
.ara-stepper button:hover{ background:var(--ara-primary-tint); color:var(--ara-primary); }
.ara-stepper input{
  width:44px; height:42px; text-align:center; border:0; background:transparent;
  font-weight:700; font-size:var(--ara-fs-sm); color:var(--ara-ink);
  -moz-appearance:textfield; appearance:textfield;
}
.ara-stepper input::-webkit-outer-spin-button,
.ara-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }

/* =========================================================
   6) ALERTS / NOTICES
   ========================================================= */
.ara-alert{
  display:flex; align-items:flex-start; gap:var(--ara-s3);
  padding:var(--ara-s4) var(--ara-s5);
  border-radius:var(--ara-r-md);
  border:1px solid var(--ara-glass-line-soft);
  background:var(--ara-glass-bg);
  font-size:var(--ara-fs-sm); line-height:1.75;
  margin-bottom:var(--ara-s5);
  box-shadow:var(--ara-e1);
  border-inline-start:4px solid var(--ara-primary);
}
.ara-alert svg{ width:20px; height:20px; flex:0 0 auto; margin-top:2px; color:var(--ara-primary); }
.ara-alert p{ margin:0; }
.ara-alert-success{ border-inline-start-color:var(--ara-success); background:var(--ara-success-tint); }
.ara-alert-success svg{ color:var(--ara-success); }
.ara-alert-danger{ border-inline-start-color:var(--ara-danger); background:var(--ara-danger-tint); }
.ara-alert-danger svg{ color:var(--ara-danger); }
.ara-alert-warning{ border-inline-start-color:var(--ara-warning); background:var(--ara-warning-tint); }
.ara-alert-warning svg{ color:var(--ara-warning); }
.ara-alert-info{ border-inline-start-color:var(--ara-info); background:var(--ara-info-tint); }
.ara-alert-info svg{ color:var(--ara-info); }

/* =========================================================
   7) SECTION HEADINGS
   ========================================================= */
.ara-shead{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--ara-s4); margin-bottom:var(--ara-s6); flex-wrap:wrap;
}
.ara-shead-text{ min-width:0; }
.ara-eyebrow{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--ara-fs-xs); font-weight:700; letter-spacing:.02em;
  color:var(--ara-primary); margin-bottom:var(--ara-s2);
}
.ara-eyebrow::before{
  content:""; width:22px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--ara-primary), var(--ara-accent));
}
.ara-shead h2,
.ara-shead h3{ margin:0; }
.ara-shead p{ margin:6px 0 0; color:var(--ara-ink-soft); font-size:var(--ara-fs-sm); max-width:62ch; }
.ara-shead-link{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  font-size:var(--ara-fs-sm); font-weight:700; color:var(--ara-primary);
  transition:gap var(--ara-t) var(--ara-ease);
}
.ara-shead-link svg{ width:16px; height:16px; }
.ara-shead-link:hover{ gap:10px; }
.ara-shead-center{ flex-direction:column; align-items:center; text-align:center; }
.ara-shead-center p{ margin-inline:auto; }

/* =========================================================
   8) SLIDER (scroll-snap + dots + arrows)
   ========================================================= */
.ara-slider{ position:relative; }
.ara-slider-track{
  display:flex; gap:var(--ara-s4);
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  -webkit-overflow-scrolling:touch;
  padding:4px 4px var(--ara-s3);
  margin:-4px -4px 0;
  scroll-padding-inline:4px;
}
.ara-slider-track::-webkit-scrollbar{ display:none; }
.ara-slider-track > *{ scroll-snap-align:start; flex:0 0 auto; }

.ara-slider-dots{
  display:flex; align-items:center; justify-content:center; gap:7px;
  margin-top:var(--ara-s4);
}
.ara-slider-dots:empty{ display:none; }
.ara-slider-dots button{
  width:8px; height:8px; border-radius:var(--ara-r-pill);
  background:color-mix(in srgb, var(--ara-ink) 20%, transparent);
  transition:width var(--ara-t) var(--ara-spring), background-color var(--ara-t) var(--ara-ease);
}
.ara-slider-dots button.is-active{ width:26px; background:var(--ara-primary); }

.ara-slider-nav{
  position:absolute; top:calc(50% - 34px); z-index:3;
  width:44px; height:44px; border-radius:50%;
  display:none; align-items:center; justify-content:center;
  background:var(--ara-glass-bg-strong);
  -webkit-backdrop-filter:blur(var(--ara-blur-sm)); backdrop-filter:blur(var(--ara-blur-sm));
  border:1px solid var(--ara-glass-line);
  box-shadow:var(--ara-e2);
  color:var(--ara-ink);
  transition:background-color var(--ara-t) var(--ara-ease), transform var(--ara-t) var(--ara-ease), opacity var(--ara-t) var(--ara-ease);
}
.ara-slider-nav svg{ width:19px; height:19px; }
.ara-slider-nav:hover{ background:var(--ara-primary); color:var(--ara-on-primary); }
.ara-slider-nav[disabled]{ opacity:.3; pointer-events:none; }
.ara-slider-prev{ inset-inline-end:-8px; }
.ara-slider-next{ inset-inline-start:-8px; }
@media (min-width:1024px){
  .ara-slider-nav{ display:flex; }
  .ara-slider:hover .ara-slider-nav{ opacity:1; }
}

/* =========================================================
   9) PAGINATION
   ========================================================= */
.ara-pagination{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:var(--ara-s2); margin-top:var(--ara-s8);
}
.ara-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:44px; padding:0 var(--ara-s3);
  border-radius:var(--ara-r-sm);
  font-size:var(--ara-fs-sm); font-weight:700; color:var(--ara-ink-soft);
  background:var(--ara-glass-bg-soft);
  border:1px solid var(--ara-glass-line-soft);
  transition:all var(--ara-t) var(--ara-ease);
}
.ara-pagination .page-numbers:hover{ color:var(--ara-primary); border-color:color-mix(in srgb, var(--ara-primary) 40%, transparent); transform:translateY(-2px); }
.ara-pagination .page-numbers.current{
  background:var(--ara-primary); color:var(--ara-on-primary);
  border-color:transparent; box-shadow:var(--ara-e-primary);
}
.ara-pagination .page-numbers.dots{ background:transparent; border-color:transparent; }
.ara-pagination .page-numbers.prev,
.ara-pagination .page-numbers.next{ gap:6px; padding-inline:var(--ara-s4); }
.ara-pagination svg{ width:16px; height:16px; }

/* =========================================================
   10) STAR RATING (بدون وابستگی به فونت آیکون ووکامرس)
   ========================================================= */
.ara-rating{ display:inline-flex; align-items:center; gap:6px; }
.ara-stars{
  --ara-star-fill:0%;
  --ara-star-img:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.6l2.7 5.9 6.4.7-4.8 4.4 1.3 6.3L12 16.7 6.4 19.9l1.3-6.3L2.9 9.2l6.4-.7z'/%3E%3C/svg%3E");
  position:relative; display:inline-block;
  width:90px; height:16px; flex:0 0 auto;
}
.ara-stars::before,
.ara-stars::after{
  content:""; position:absolute; inset-block:0; inset-inline-start:0; height:100%;
  -webkit-mask-image:var(--ara-star-img); mask-image:var(--ara-star-img);
  -webkit-mask-size:18px 16px; mask-size:18px 16px;
  -webkit-mask-repeat:repeat-x; mask-repeat:repeat-x;
}
.ara-stars::before{ width:100%; background:color-mix(in srgb, var(--ara-ink) 16%, transparent); }
/* در RTL، inset-inline-start برابر «راست» است؛ پس پرشدن ستاره‌ها از راست شروع می‌شود. */
.ara-stars::after{ width:var(--ara-star-fill); background:#F5A524; }
.ara-stars-sm{ width:75px; height:13px; }
.ara-stars-sm::before,.ara-stars-sm::after{ -webkit-mask-size:15px 13px; mask-size:15px 13px; }
.ara-rating-value{ font-size:var(--ara-fs-xs); font-weight:700; color:var(--ara-ink-soft); }

/* =========================================================
   11) TABS
   ========================================================= */
.ara-tabs{
  display:flex; gap:var(--ara-s2); overflow-x:auto;
  scrollbar-width:none; padding:5px;
  border-radius:var(--ara-r-pill);
  background:var(--ara-glass-bg-soft);
  border:1px solid var(--ara-glass-line-soft);
  margin-bottom:var(--ara-s6);
}
.ara-tabs::-webkit-scrollbar{ display:none; }
.ara-tabs button{
  flex:1 0 auto; min-height:42px; padding:0 var(--ara-s5);
  border-radius:var(--ara-r-pill);
  border:1px solid transparent; /* روی همه‌ی حالت‌ها، تا انتخاب‌شدن باعث جابه‌جایی چیدمان نشود */
  font-size:var(--ara-fs-sm); font-weight:700; color:var(--ara-ink-soft);
  white-space:nowrap;
  transition:all var(--ara-t) var(--ara-ease);
}
.ara-tabs button:hover{ color:var(--ara-primary); }
.ara-tabs button.is-active{
  background:var(--ara-glass-bg-strong); color:var(--ara-primary);
  box-shadow:var(--ara-e1); border-color:var(--ara-glass-line-soft);
}
.ara-tabpanel{ display:none; }
.ara-tabpanel.is-active{ display:block; animation:ara-fade-up .35s var(--ara-ease-out); }

/* =========================================================
   12) ACCORDION
   ========================================================= */
.ara-accordion{ display:flex; flex-direction:column; gap:var(--ara-s3); }
.ara-acc-item{
  border-radius:var(--ara-r-md);
  background:var(--ara-glass-bg-soft);
  border:1px solid var(--ara-glass-line-soft);
  overflow:hidden;
  transition:border-color var(--ara-t) var(--ara-ease), box-shadow var(--ara-t) var(--ara-ease);
}
.ara-acc-item.is-open{ border-color:color-mix(in srgb, var(--ara-primary) 32%, transparent); box-shadow:var(--ara-e1); }
.ara-acc-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--ara-s3);
  width:100%; padding:var(--ara-s4) var(--ara-s5);
  font-size:var(--ara-fs-base); font-weight:700; text-align:start; color:var(--ara-ink);
}
.ara-acc-head svg{ width:18px; height:18px; flex:0 0 auto; color:var(--ara-primary); transition:transform var(--ara-t) var(--ara-ease); }
.ara-acc-item.is-open .ara-acc-head svg{ transform:rotate(180deg); }
.ara-acc-body{ display:none; padding:0 var(--ara-s5) var(--ara-s5); color:var(--ara-ink-soft); font-size:var(--ara-fs-sm); }
.ara-acc-item.is-open .ara-acc-body{ display:block; animation:ara-fade-up .3s var(--ara-ease-out); }

/* =========================================================
   13) BREADCRUMB
   ========================================================= */
.ara-crumbs{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  font-size:var(--ara-fs-xs); color:var(--ara-ink-mute);
}
.ara-crumbs a{ color:var(--ara-ink-soft); transition:color var(--ara-t) var(--ara-ease); }
.ara-crumbs a:hover{ color:var(--ara-primary); }
.ara-crumbs .ara-crumb-sep{ opacity:.5; }
.ara-crumbs > span:last-child{ color:var(--ara-ink); font-weight:600; }

/* =========================================================
   14) LOADING / SKELETON / EMPTY
   ========================================================= */
.ara-spinner{
  width:22px; height:22px; border-radius:50%;
  border:2.5px solid color-mix(in srgb, var(--ara-primary) 25%, transparent);
  border-top-color:var(--ara-primary);
  animation:ara-spin .7s linear infinite;
}
@keyframes ara-spin{ to{ transform:rotate(360deg); } }

.ara-skeleton{
  border-radius:var(--ara-r-sm);
  background:linear-gradient(100deg,
    color-mix(in srgb, var(--ara-ink) 7%, transparent) 30%,
    color-mix(in srgb, var(--ara-ink) 12%, transparent) 50%,
    color-mix(in srgb, var(--ara-ink) 7%, transparent) 70%);
  background-size:280% 100%;
  animation:ara-shimmer 1.4s linear infinite;
}
@keyframes ara-shimmer{ to{ background-position:-180% 0; } }

.ara-empty{
  text-align:center; padding:var(--ara-s9) var(--ara-s5);
  color:var(--ara-ink-soft);
}
.ara-empty-icon{
  width:76px; height:76px; margin:0 auto var(--ara-s4);
  border-radius:var(--ara-r-lg);
  display:flex; align-items:center; justify-content:center;
  background:var(--ara-primary-tint); color:var(--ara-primary);
}
.ara-empty-icon svg{ width:34px; height:34px; }
.ara-empty h3{ font-size:var(--ara-fs-lg); margin-bottom:6px; }
.ara-empty p{ font-size:var(--ara-fs-sm); max-width:44ch; margin-inline:auto; }

/* =========================================================
   15) MODAL / SCRIM
   ========================================================= */
.ara-scrim{
  position:fixed; inset:0; z-index:190;
  background:color-mix(in srgb, var(--ara-ink) 42%, transparent);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  opacity:0; visibility:hidden;
  transition:opacity var(--ara-t) var(--ara-ease), visibility var(--ara-t);
}
.ara-scrim.is-open{ opacity:1; visibility:visible; }

/* =========================================================
   16) ANIMATIONS & UTILITIES
   ========================================================= */
@keyframes ara-fade-up{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:none; }
}
@keyframes ara-float{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-12px); }
}

/* ظاهرشدن هنگام اسکرول — کلاس is-in را جاوااسکریپت اضافه می‌کند */
.ara-reveal,
[data-ara-reveal]{
  opacity:0; transform:translateY(22px);
  transition:opacity .65s var(--ara-ease-out), transform .65s var(--ara-ease-out);
  transition-delay:var(--ara-delay, 0ms);
}
.ara-reveal.is-in,
[data-ara-reveal].is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .ara-reveal,
  [data-ara-reveal]{ opacity:1; transform:none; }
}

.ara-float{ animation:ara-float 6s var(--ara-ease) infinite; }

/* گرادیان متنی برند — برای کلمه‌های کلیدی در تیترها */
.ara-grad-text{
  background:linear-gradient(100deg, var(--ara-primary), var(--ara-accent));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

.ara-muted{ color:var(--ara-ink-soft); }
.ara-mute-2{ color:var(--ara-ink-mute); }
.ara-center{ text-align:center; }
.ara-nowrap{ white-space:nowrap; }
.ara-flex{ display:flex; }
.ara-flex-center{ display:flex; align-items:center; justify-content:center; }
.ara-items-center{ align-items:center; }
.ara-between{ justify-content:space-between; }
.ara-wrap{ flex-wrap:wrap; }
.ara-gap-1{ gap:var(--ara-s1); }
.ara-gap-2{ gap:var(--ara-s2); }
.ara-gap-3{ gap:var(--ara-s3); }
.ara-gap-4{ gap:var(--ara-s4); }
.ara-gap-5{ gap:var(--ara-s5); }
.ara-grow{ flex:1 1 auto; min-width:0; }
.ara-mt-0{ margin-top:0; }
.ara-mb-0{ margin-bottom:0; }
.ara-mb-4{ margin-bottom:var(--ara-s4); }
.ara-mb-6{ margin-bottom:var(--ara-s6); }
.ara-hide{ display:none!important; }
@media (max-width:767px){ .ara-hide-mobile{ display:none!important; } }
@media (min-width:768px){ .ara-hide-desktop{ display:none!important; } }

/* شبکه‌های آماده */
.ara-grid{ display:grid; gap:var(--ara-s4); }
.ara-grid-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
.ara-grid-auto{ grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }
@media (min-width:640px){
  .ara-grid-sm-2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .ara-grid-sm-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1024px){
  .ara-grid{ gap:var(--ara-s5); }
  .ara-grid-lg-3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .ara-grid-lg-4{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}