/* ============================================================================
   قالب محرم — اپ سفارش
   ============================================================================
   این قالب چیز تازه‌ای نمی‌سازد: همان ظاهری است که محرم امروز دارد.

   چرا اصلاً وجود دارد؟ چون تا حالا ظاهر محرم «همان پیش‌فرضِ styles.css» بود.
   یعنی هر تغییری در قالب پایه — که مشترک همهٔ مشتری‌هاست — ظاهر محرم را هم
   عوض می‌کرد. با ثبت صریح امضاهای بصری محرم اینجا، پایه می‌تواند آزادانه
   خنثی‌تر شود بی‌آنکه سایتِ در حال کارِ محرم تکان بخورد.

   پس اینجا فقط چیزهایی نوشته می‌شود که «محرم را محرم می‌کنند»، نه کپی کل
   استایل. اگر مقداری با پایه یکی است و اهمیت هویتی ندارد، عمداً نیامده.

   ⚠️ مثل هر قالب دیگر، رنگ اینجا نوشته نمی‌شود — از تنظیمات پنل می‌آید.
   ============================================================================ */

/* ── هدر: نوار گرادیانتِ باریک با خط تزئینی ───────────────────────────────
   امضای اصلی محرم. برخلاف کشاورز که عکس رستوران را محو می‌کند، محرم یک نوار
   رنگی کم‌ارتفاع دارد که لوگو رویش می‌نشیند و زیرش یک خط طلایی محو می‌شود. */
.header-background {
    height: 45px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.header-background::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.header-background::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--secondary) 50%, transparent 100%);
}

/* عکس هدر در این قالب استفاده نمی‌شود؛ جایش را گرادیان گرفته */
.header-bg-image {
    display: none;
}

/* ── کارت‌ها: قاب‌دار و سایه‌دار ──────────────────────────────────────────
   محرم بر خلاف قالب مینیمال، محصولات را داخل کارت جدا نشان می‌دهد.        */
.product-card {
    background: var(--bg-main);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
    padding: 0.35rem;
    margin-bottom: 0.5rem;
    border-bottom: none;
}

.product-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.product-image {
    width: 90px;
    height: 90px;
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
}

/* ── دکمه‌ها: گوشهٔ کم، سایهٔ ملایم ───────────────────────────────────────── */
.add-btn {
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-sm);
    width: 90px;
    height: 30px;
}

.add-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.floating-cart {
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-xl);
}

.floating-cart:hover {
    transform: translateX(-50%) translateY(-4px) scale(1.05);
}

/* ── نوار دسته‌بندی: با سایهٔ جداکننده ────────────────────────────────────── */
.categories-wrapper {
    background: var(--bg-card);
    box-shadow: var(--shadow-sm);
}