/* کاتالوگ (فاز ۴الف نقشه‌راه کاتالوگ): صفحه‌ی تمام‌صفحه‌ی شیشه‌ای. توکن‌های شیشه فقط این‌جا (روی .cat)؛ رنگ‌های برند از app.css می‌آید.
   سرعت: بلور فقط روی اجزای کوچک (پنل حساب، کارت خلاصه)؛ پس‌زمینه ثابت و بدون انیمیشن؛ حرکت‌ها فقط transform/opacity (به‌جز حلقه‌ی ریزِ خروج). */
.cat {
  --glass-bg: rgb(255 255 255 / .58); --glass-panel: rgb(255 255 255 / .82); --glass-solid: #f4faf6; --glass-border: rgb(255 255 255 / .75); --glass-hi: rgb(255 255 255 / .9);
  --glass-shadow: 0 8px 28px rgb(16 60 40 / .14); --glass-blur: 16px; --glass-r: 22px;
  --cat-a: #e3f4ea; --cat-b: #c9e8d8; --cat-blob: rgb(0 152 101 / .18); --cat-blob2: rgb(26 115 232 / .12);
  --cat-ring: var(--brand-ink); --cat-logo-bg: #fff;
}
:root[data-theme=dark] .cat {
  --glass-bg: rgb(255 255 255 / .06); --glass-panel: rgb(20 30 25 / .84); --glass-solid: #1a2620; --glass-border: rgb(255 255 255 / .16); --glass-hi: rgb(255 255 255 / .22);
  --glass-shadow: 0 8px 28px rgb(0 0 0 / .4);
  --cat-a: #0b1a13; --cat-b: #0e1511; --cat-blob: rgb(31 197 139 / .08); --cat-blob2: rgb(77 163 240 / .1);
}
[hidden] { display: none !important; }

/* حالت تمام‌صفحه: بدون هدر و نوار پایین، به‌پهنای کامل (تبلت افقی)؛ main.js کلاس immersive را روی #app می‌گذارد */
#app.immersive { max-width: none; }
#app.immersive .header-slot, #app.immersive .hp-host, #app.immersive .nav { display: none; }
#app.immersive .screen { padding: 0; overflow: hidden; overscroll-behavior: none; }
#app.immersive .screen.enter { animation: none; }

#app.immersive .screen > .cat-host { height: 100%; min-height: 0; }
.cat { position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column; touch-action: manipulation; overscroll-behavior: none; }
.cat-bg { position: absolute; inset: 0; background:
  radial-gradient(60% 45% at 85% 6%, var(--cat-blob), transparent 70%),
  radial-gradient(55% 42% at 8% 94%, var(--cat-blob2), transparent 70%),
  linear-gradient(170deg, var(--cat-a), var(--cat-b)); }

.cat-glass { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--glass-r);
  box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.4); backdrop-filter: blur(var(--glass-blur)) saturate(1.4); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .cat-glass { background: var(--glass-solid); } }

/* لوگو: وسط بالا؛ لمس = پنهان‌شدن و پنل. حلقه‌ی پیشرفتِ خروج فقط تبلت */
.cat-top { position: relative; flex: none; display: grid; place-items: center; padding: calc(env(safe-area-inset-top) + 16px) 16px 8px; }
.cat-logo { position: relative; width: 96px; height: 96px; border-radius: 28px; display: grid; place-items: center; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
  transition: transform .22s var(--ease), opacity .2s; }
.cat-logo img { width: 80px; height: 80px; border-radius: 22px; background: var(--cat-logo-bg); object-fit: contain; box-shadow: 0 4px 16px rgb(0 0 0 / .18); pointer-events: none; }
.cat-logo:active { transform: scale(.94); }
.cat-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); pointer-events: none; }
.cat-ring circle { fill: none; stroke: var(--cat-ring); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 289; stroke-dashoffset: 289; opacity: 0; transition: opacity .15s; }
.cat-logo.holding .cat-ring circle { opacity: 1; stroke-dashoffset: 0; transition: stroke-dashoffset var(--hold-ms, 1.2s) linear, opacity .1s; }
.panel-open .cat-logo { opacity: 0; transform: scale(.5) translateY(-12px); pointer-events: none; }

.cat-body { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; padding: 6px 16px calc(env(safe-area-inset-bottom) + 24px); }
.cat-sum { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 22px 26px; max-width: 420px; margin: 8vh auto 0; }
.cat-sum h2 { font-size: 20px; } .cat-sum p { font-weight: 600; } .cat-sum small { color: var(--muted); }

/* پنل حساب: از بالا می‌افتد؛ بستن = اسوایپ بالا / نوار پایین / لمس بیرون / بازگشت. هدف لمس ≥ ۴۴px */
.cat-scrim { position: absolute; inset: 0; display: none; }
.panel-open .cat-scrim { display: block; }
.cat-panel { background: var(--glass-panel); position: absolute; top: calc(env(safe-area-inset-top) + 12px); inset-inline: 12px; margin-inline: auto; max-width: 520px; display: grid; gap: 10px; padding: 14px 16px 4px;
  opacity: 0; transform: translateY(-16px) scale(.97); visibility: hidden; pointer-events: none;
  transition: transform .26s var(--ease), opacity .2s, visibility 0s .26s; }
.panel-open .cat-panel { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition: transform .28s var(--ease), opacity .2s, visibility 0s; }
.cat-row { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.cat-ico { flex: none; width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-ink); }
.cat-prog, .cat-err { font-size: 13px; } .cat-prog { color: var(--muted); } .cat-err { color: var(--bad-ink); }
.cat-panel .btn { min-height: 48px; width: 100%; }
.cat-grip { width: 100%; height: 44px; display: grid; place-items: center; }
.cat-grip::before { content: ''; width: 40px; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 28%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .cat-logo, .cat-panel, .panel-open .cat-panel { transition: opacity .15s, visibility 0s; transform: none; }
  .panel-open .cat-logo { transform: none; }
  .cat-logo.holding .cat-ring circle { transition: opacity .1s; stroke-dashoffset: 0; } /* حلقه بدون حرکت: پر نمایش داده می‌شود؛ خروجِ واقعی همچنان ۱٫۲ث نگه‌داشتن است */
}

/* مشتری فعال (فاز ۴ب): ردیف/کادر جستجو داخل پنل حساب؛ فهرست اسکرول مستقل دارد (ارتفاعِ پنل ثابت می‌ماند) */
.cat-cust { min-height: 56px; }
.cat-cust .row-item { border-bottom-color: color-mix(in srgb, var(--text) 12%, transparent); }
.cat-cust .search { background: color-mix(in srgb, var(--card) 70%, transparent); }
.cat-cust .list { max-height: min(34vh, 260px); overflow-y: auto; overscroll-behavior: contain; }
.cat-cust .list .row-item:last-child { border-bottom: 0; }
.cat-cust .hint { padding: 6px 4px; font-size: 13px; color: var(--muted); }

/* فاز ۵: روی عکس‌ها (هر دو تم یکی) — متنِ سفید روی پوششِ تیره؛ مقادیر در scripts/contrast.mjs سنجیده می‌شود */
.cat { --cat-on-img: rgb(255 255 255); --cat-img-chip: rgb(0 0 0 / .62); --cat-img-grad: rgb(0 0 0 / .72); --cat-out-bg: rgb(127 29 29 / .88); }

/* دو ردیف چیپ (فقط ظاهر): بلور روی خودِ ردیف، نه هر چیپ؛ افقی‌قابل‌اسکرول. هدفِ لمس ۴۴px با ::after */
.cat-chips { position: relative; flex: none; display: grid; gap: 8px; padding: 4px 16px 10px; }
.cat-chiprow { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; touch-action: pan-x; scrollbar-width: none; padding: 7px 8px; border-radius: 26px; }
.cat-chiprow::-webkit-scrollbar { display: none; }
.cat-chip { position: relative; flex: none; height: 38px; padding: 0 16px; border-radius: 19px; font-size: 14px; font-weight: 600; color: var(--text); background: transparent;
  border: 1px solid color-mix(in srgb, var(--text) 16%, transparent); transition: transform .15s var(--ease), background-color .15s, color .15s, border-color .15s; }
.cat-chip::after { content: ''; position: absolute; inset: -3px -2px; }
.cat-chip:active { transform: scale(.96); }
.cat-chip.on { background: var(--brand-strong); color: var(--on-brand); border-color: transparent; }

/* شبکه‌ی کالاها: ۴–۶ ستون در تبلت؛ بدون بلور؛ content-visibility تا کارت‌های بیرون از دید هزینه نداشته باشند */
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 12px; }
.cat-card { position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; overflow: hidden; border-radius: 18px; text-align: start;
  background: color-mix(in srgb, var(--text) 8%, var(--glass-solid)); box-shadow: var(--glass-shadow); touch-action: manipulation;
  content-visibility: auto; contain-intrinsic-size: auto 168px; transition: transform .15s var(--ease); }
.cat-card:active { transform: scale(.97); }
.cat-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .25s; -webkit-user-drag: none; user-select: none; }
.cat-card img.ready { opacity: 1; }
.cat-card.noimg { background: linear-gradient(150deg, color-mix(in srgb, var(--brand) 22%, var(--glass-solid)), var(--glass-solid)); }
.cat-card.soldout img { filter: grayscale(.85); } .cat-card.soldout { opacity: .6; }
.cat-name { position: absolute; inset-inline: 0; bottom: 0; padding: 26px 10px 8px; font-size: 13px; font-weight: 600; line-height: 1.5; color: var(--cat-on-img);
  background: linear-gradient(to top, var(--cat-img-grad), transparent); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cat-pack, .cat-out { position: absolute; top: 8px; inset-inline-end: 8px; max-width: calc(100% - 16px); padding: 3px 9px; border-radius: 12px; font-size: 12px; font-weight: 600; line-height: 1.5; color: var(--cat-on-img);
  background: var(--cat-img-chip); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cat-out { top: auto; bottom: 40px; background: var(--cat-out-bg); }
.cat-qty { position: absolute; top: 8px; inset-inline-start: 8px; min-width: 28px; height: 28px; padding: 0 7px; border-radius: 14px; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: var(--on-brand); background: var(--brand-strong); box-shadow: 0 2px 8px rgb(0 0 0 / .3); }
.cat-more { grid-column: 1 / -1; }
.cat-card.skel { animation: cat-pulse 1.2s ease-in-out infinite; }
@keyframes cat-pulse { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .cat-card.skel { animation: none; } .cat-card, .cat-chip, .cat-card img { transition: none; } }

/* فاز ۶الف: نمایشگر تمام‌صفحه — لایه‌ی درونِ همین صفحه (نه مودال)، روی همه‌چیز. پس‌زمینه = همان عکسِ محو (فیلترِ ایستا، نه backdrop-filter؛ هرگز انیمیت نمی‌شود)
   زیرِ پوششِ تیره تا هیچ نوار خالی نماند؛ خودِ عکس contain تا بریده نشود. حرکت‌ها فقط transform/opacity (Web Animations در catalog-viewer.js؛ FLIP از کارت). بدونِ دکمه: بستن = بازگشتِ سیستم */
.cat { --cat-vw-dim: rgb(0 0 0 / .55); --cat-vw-base: #0b0f0d; --cat-vw-panel-bg: rgb(12 18 15 / .62); --cat-vw-label: rgb(255 255 255 / .78);
  --cat-vw-tilt: 22deg; --cat-vw-shift: 20%; --cat-vw-scale: .74; } /* زاویه/جابه‌جایی/مقیاسِ حالتِ جزئیات: برای تنظیم روی تبلت فقط همین‌ها */
.cat-vw { position: absolute; inset: 0; z-index: 30; overflow: hidden; touch-action: none; overscroll-behavior: none; outline: none; -webkit-tap-highlight-color: transparent; }
.cat-vw.closing { pointer-events: none; }
.cat-vw-bg { position: absolute; inset: 0; overflow: hidden; background: var(--cat-vw-base); }
.cat-vw-bg::after { content: ''; position: absolute; inset: 0; background: var(--cat-vw-dim); }
.cat-vw-bgimg { position: absolute; inset: -8%; width: 116%; height: 116%; object-fit: cover; filter: blur(28px) saturate(1.3); opacity: .9; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.cat-vw-stage { position: absolute; inset: 0; perspective: 1200px; }
.cat-vw-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform-origin: 50% 50%; opacity: 0; transition: transform .3s var(--ease), opacity .15s; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.cat-vw-img.ready { opacity: 1; }
.cat-vw-ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; font-size: clamp(22px, 4vw, 34px); font-weight: 700; line-height: 1.6; color: var(--cat-on-img); }
.cat-vw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* فاز ۶ب: حالتِ جزئیات — عکس به راست می‌رود، کوچک می‌شود و کج می‌شود؛ پنلِ شیشه‌ایِ تیره از چپ می‌آید (بلور فقط روی همین پنل؛ جمعِ لایه‌های بلور ≤ ۳) */
.cat-vw.details .cat-vw-img { transform: translateX(var(--cat-vw-shift)) scale(var(--cat-vw-scale)) rotateY(var(--cat-vw-tilt)); }
.cat-vw-panel { position: absolute; top: 50%; left: max(16px, env(safe-area-inset-left)); width: min(340px, 44vw); max-height: calc(100% - 32px); overflow-y: auto; overscroll-behavior: contain; display: grid; gap: 12px; padding: 18px 18px 14px;
  border-radius: var(--glass-r); border: 1px solid var(--glass-border); color: var(--cat-on-img); background: var(--cat-vw-panel-bg); box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-hi);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.3); backdrop-filter: blur(var(--glass-blur)) saturate(1.3);
  opacity: 0; transform: translate(-28px, -50%); visibility: hidden; pointer-events: none; transition: transform .28s var(--ease), opacity .2s, visibility 0s .28s; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .cat-vw-panel { background: rgb(12 18 15 / .94); } }
.cat-vw.details .cat-vw-panel { opacity: 1; transform: translate(0, -50%); visibility: visible; pointer-events: auto; transition: transform .28s var(--ease), opacity .2s, visibility 0s; }
.cat-vw-title { font-size: 18px; line-height: 1.6; font-weight: 700; }
.cat-vw-rows { display: grid; gap: 8px; margin: 0; }
.cat-vw-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid rgb(255 255 255 / .14); }
.cat-vw-row:last-child { border-bottom: 0; padding-bottom: 0; }
.cat-vw-row dt { font-size: 13px; color: var(--cat-vw-label); } .cat-vw-row dd { margin: 0; font-size: 15px; font-weight: 600; text-align: end; }
.cat-vw-row.profit dd { font-weight: 700; }
/* گوشیِ عمودی: پنل روی عکس می‌نشیند (پایین)، عکس فقط کمی بالا می‌رود و کوچک می‌شود */
@media (max-width: 640px), (max-aspect-ratio: 1/1) {
  .cat-vw-panel { top: auto; bottom: max(12px, env(safe-area-inset-bottom)); left: 12px; right: 12px; width: auto; max-height: 52%; transform: translateY(28px); }
  .cat-vw.details .cat-vw-panel { transform: none; }
  .cat-vw.details .cat-vw-img { transform: translateY(-14%) scale(.7) rotateY(calc(var(--cat-vw-tilt) * .5)); }
}
@media (prefers-reduced-motion: reduce) { /* بدونِ پرواز/کج‌شدن: فقط محو */
  .cat-vw-img, .cat-vw-panel, .cat-vw.details .cat-vw-panel { transition: opacity .15s, visibility 0s; }
  .cat-vw-panel { transform: translateY(-50%); }
  .cat-vw.details .cat-vw-img { transform: none; opacity: .35; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 640px), (prefers-reduced-motion: reduce) and (max-aspect-ratio: 1/1) { .cat-vw-panel { transform: none; } }

/* فاز ۷: حبابِ +۱/−۱، نشانِ تعدادِ سبد، پیامِ رد و راهنمای ژست — چیپ‌های تیره‌ی تقریباً مات (بدونِ بلورِ تازه)؛ وسط‌چین بی‌transform تا انیمیشن‌ها (WAAPI) خرابش نکنند */
.cat { --cat-vw-chip-bg: rgb(12 18 15 / .82); }
.cat-vw-bubble, .cat-vw-qty, .cat-vw-msg, .cat-vw-hint { position: absolute; pointer-events: none; user-select: none; -webkit-user-select: none; }
.cat-vw-bubble { top: 40%; left: 0; right: 0; margin: 0 auto; width: max-content; min-width: 64px; padding: 6px 18px; border-radius: 22px; text-align: center; font-size: 26px; font-weight: 700; line-height: 1.5; color: var(--on-brand); background: var(--brand-strong); box-shadow: 0 4px 16px rgb(0 0 0 / .35); }
.cat-vw-qty { top: max(16px, env(safe-area-inset-top)); inset-inline-start: 16px; padding: 4px 14px; border-radius: 18px; font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--on-brand); background: var(--brand-strong); box-shadow: 0 2px 8px rgb(0 0 0 / .3); }
.cat-vw-msg, .cat-vw-hint { left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); padding: 8px 18px; border-radius: 20px; text-align: center; font-size: 14px; font-weight: 600; line-height: 1.6; color: var(--cat-on-img); background: var(--cat-vw-chip-bg); box-shadow: 0 2px 10px rgb(0 0 0 / .3); }
.cat-vw-msg { top: max(16px, env(safe-area-inset-top)); opacity: 0; }
.cat-vw-hint { bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px)); font-size: 13px; font-weight: 500; }
.cat-vw.details .cat-vw-hint { display: none; } /* روی پنلِ جزئیات نیفتد؛ تا اولین ژست دوباره می‌آید */