/* ---------- الكتالوج: قرصُ الإضافة داخل البطاقة وجدولُ المواصفات بعرضٍ كامل ---------- */
/* ملفٌّ مستقلٌّ عن app.css: كلُّ ما تحتاجه بطاقةُ الماركت وصفحةُ المنتج من هذه الجولة هنا. */

/* ظلُّ البطاقة: واضحٌ في الحالة العادية وأعمقُ عند التمرير — بالرموز لا بقيمةٍ مكتوبة.
   والبطاقةُ كلُّها هدفُ لمسٍ واحد: رابطُ الاسم يمتدُّ بـ::after فوقها والأزرارُ فوقه (المرجع §7). */
.product-card {
    position: relative;
    box-shadow: var(--shadow-level1);
}

.product-card .product-name a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: var(--radius-card);
}

@media (hover: hover) {
    .product-card:hover {
        box-shadow: var(--shadow-level2);
    }
}

/* صفُّ السعر يحمل قرصاً بارتفاع 46px، فالمحاذاةُ وسطٌ لا خطُّ أساس. */
.product-card .product-foot {
    align-items: center;
}

/* قرصُ الإضافة: **الزرُّ هو هدفُ اللمسِ لا القرص.** الزرُّ نفسُه `--min-touch` (48px) شفّافٌ
   بلا حدودٍ ولا ظلّ، والقرصُ المرئيُّ طبقةُ `::before` داخلَه بمقاسِه المعتمد (46px حاسوباً ·
   36px هاتفاً) — فالمقيسُ بـ`getBoundingClientRect` والمضغوطُ بالإصبعِ شيءٌ واحد.
   (الطبقةُ الشفّافةُ حولَ الزرِّ جُرِّبت قبلاً فلم تكن هدفَ لمسٍ أصلاً: القياسُ الحيُّ ظلّ يقرأ
   صندوقَ الزرِّ وحدَه، واختبارُ النقرِ عند حافّتها كان يصيب ما تحتَها لا الزرّ.) */
.card-add {
    position: relative;
    z-index: 2;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--min-touch);
    block-size: var(--min-touch);
    margin-inline-start: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-on-color);
    cursor: pointer;
    transition: transform var(--dur-control) var(--ease);
}

/* «الفرقُ من كلِّ جهة» = (48 − قطرُ القرص) ÷ 2 — قيمةٌ واحدةٌ في `inset` تمركز القرصَ تماماً. */
.card-add::before {
    content: "";
    position: absolute;
    inset: 1px;
    border-radius: var(--radius-full);
    background: var(--gradient-horizontal);
    box-shadow: var(--shadow-gradient-card);
}

/* الرمزُ موضَّعٌ فيُرسم **فوق** القرصِ المطلقِ الذي يسبقه في الشجرة. */
.card-add svg {
    position: relative;
    inline-size: 22px;
    block-size: 22px;
}

.card-add:active {
    transform: scale(0.94);
}

.card-add.is-added::before {
    background: var(--color-green);
    box-shadow: var(--shadow-level1);
}

/* غيرُ المتوفّر: قرصٌ معطّلٌ يُرى ولا يُنقر. */
.card-add[disabled] { cursor: not-allowed; }

.card-add[disabled]::before {
    background: var(--color-border);
    box-shadow: none;
}

/* مؤشّرُ «أُضيف» ورسالةُ الخطأ فوق الرابط الممتد، وإلا صار رابطُ السلة غيرَ قابلٍ للنقر. */
.card-note {
    position: relative;
    z-index: 2;
    margin: 0;
}

/* الهاتف: قرصٌ أصغرُ يناسب البطاقةَ المضغوطة — **وهدفُ اللمسِ لا يصغر معه**: الزرُّ يبقى
   48px والقرصُ وحدَه ينزل إلى 36px، فالفرقُ من كلِّ جهةٍ ستّةٌ. */
@media (max-width: 40rem) {
    .card-add::before { inset: 6px; }

    .card-add svg {
        inline-size: 18px;
        block-size: 18px;
    }
}

/* ---------- جدولُ المواصفات: عرضُ المساحة كاملاً، نصٌّ أكبرُ وصفوفٌ مريحة ---------- */
/* التمريرُ الأفقيُّ داخل الغلاف وحده، فلا يكسر الجدولُ عرضَ الصفحة على الهاتف. */
.spec-wrap {
    inline-size: 100%;
    overflow-x: auto;
}

.spec-table {
    inline-size: 100%;
    min-inline-size: 18rem;
    border-collapse: collapse;
    font-size: var(--text-body-size);
    text-align: start;
}

.spec-table th,
.spec-table td {
    padding-block: var(--space-card-gap);
    padding-inline: var(--space-card-gap);
    border-block-end: 1px solid var(--color-divider);
    line-height: 1.7;
    text-align: start;
    vertical-align: middle;
}

.spec-table th {
    inline-size: 34%;
    color: var(--color-text-secondary);
    font-size: var(--text-text-size);
    font-weight: var(--text-chip-weight);
    white-space: nowrap;
}

.spec-table td {
    color: var(--color-text-primary);
    font-weight: var(--text-chip-weight);
}

/* تظليلٌ متبادلٌ خفيفٌ يفصل الصفوفَ بلا خطوطٍ ثقيلة. */
.spec-table tbody tr:nth-child(even) {
    background: var(--color-surface-soft);
}

.spec-table tbody tr:last-child th,
.spec-table tbody tr:last-child td {
    border-block-end: 0;
}

/* ---------- قلبُ المفضّلة: زرُّ تحكّمٍ صغيرٌ فوق صورةِ البطاقة ---------- */
/* في زاويةِ النهاية فلا يزاحم شريحةَ التوفر في زاويةِ البداية، وفوق الرابطِ الممتدِّ
   (z-index) فالضغطةُ عليه لا تفتح صفحةَ المنتج. قرصٌ بحجمِ لمسٍ مريح. */
/* **مساحةُ اللمس لا حجمُ القرص** (قرارُ المالك 2026-09-18) — **والزرُّ هو الذي يكبر**:
   القياسُ الحيُّ (Playwright · 2026-09-19) أثبت أن الطبقةَ الشفّافةَ التي كانت تتمدّد **خارجَ**
   الزرِّ (<c>::after</c> بـ<c>inset: -8px</c>) لم تكن هدفَ لمسٍ أصلاً: الصندوقُ المقيسُ بقي
   32×32، والنقرُ عند حافّتها يصيب ما تحتَها لا الزرّ. فالبنيةُ انقلبت: الزرُّ 48px
   (<c>--min-touch</c>) شفّافٌ، والقرصُ المرئيُّ طبقةُ <c>::before</c> داخلَه بمقاسِه القديمِ
   نفسِه — فلا شيءَ تغيّر في المنظر، وتغيّر كلُّ شيءٍ في اللمس. */
.card-heart {
    /* الفرقُ من كلِّ جهة = (48 − قطرُ القرص) ÷ 2؛ ويُطرح من إزاحةِ الزاويةِ كي يبقى القرصُ
       في موضعِه المعتمَدِ بالضبطِ رغم كِبَرِ الزرِّ حوله. */
    --heart-bleed: 6px;

    position: absolute;
    z-index: 2;
    inset-block-start: calc(var(--space-field-gap) * 2 - var(--heart-bleed));
    inset-inline-end: calc(var(--space-field-gap) * 2 - var(--heart-bleed));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--min-touch);
    block-size: var(--min-touch);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: color var(--dur-control) var(--ease), transform var(--dur-control) var(--ease);
}

.card-heart::before {
    content: "";
    position: absolute;
    inset: var(--heart-bleed);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    box-shadow: var(--shadow-level1);
}

/* الرمزُ موضَّعٌ فيُرسم **فوق** القرصِ المطلقِ الذي يسبقه في الشجرة. */
.card-heart svg {
    position: relative;
    inline-size: 20px;
    block-size: 20px;
}

/* ممتلئٌ = في المفضّلة. اللونُ من الرموز، والامتلاءُ من سمةِ fill في الترميز — فالحالةُ
   تُقرأ بالشكل كما تُقرأ باللون، ولا تضيع على من لا يميّز الألوان. */
.card-heart.is-on { color: var(--color-crimson); }

.card-heart:active { transform: scale(0.9); }

.card-heart[disabled] { opacity: var(--opacity-disabled); cursor: default; }

/* القرصُ أصغرُ على الهاتف وهدفُ اللمسِ **لا يصغر**: الزرُّ يبقى 48px والقرصُ ينزل إلى
   32px، فالفرقُ ثمانيةٌ من كلِّ جهة — وهي الشاشةُ التي يُضغط فيها بالإبهام لا بالفأرة. */
@media (max-width: 40rem) {
    .card-heart {
        --heart-bleed: 8px;

        inset-block-start: calc(var(--space-field-gap) - var(--heart-bleed));
        inset-inline-end: calc(var(--space-field-gap) - var(--heart-bleed));
    }

    .card-heart svg {
        inline-size: 18px;
        block-size: 18px;
    }
}

/* ==========================================================================
   الماركت: ترويسةٌ مضغوطةٌ وشريطُ أدواتٍ ولوحةُ فلاترَ وبطاقةٌ أفقيةٌ على الهاتف
   ==========================================================================
   المشكلةُ التي تُحلّ هنا: الشاشةُ الأساسيةُ كانت تعرض خمسةَ حقولٍ عموديةً كاملةً قبل أولِ
   منتج، فلا يرى مستخدمُ الهاتفِ بضاعةً إلا بعد تمريرةٍ ونصف. الحقولُ نزلت إلى لوحةٍ،
   والشريطُ بقي بزرَّين. ولا مكتبةَ ولا رسمَ جديدَين: الأيقوناتُ من السجلّ والقيمُ من الرموز. */

/* ---------- الترويسة ---------- */
/* `.page-head` توزّع بـspace-between؛ هنا الرجوعُ والعنوانُ متجاوران في جهةِ البداية. */
.market-head {
    justify-content: flex-start;
    gap: var(--space-card-gap);
    margin-block-end: 2px;
}

.market-head .headline { margin: 0; }

.market-sub {
    margin-block: 0 var(--space-card-gap);
    color: var(--color-text-secondary);
}

/* ---------- شريطُ الأدوات ---------- */
.market-tools {
    display: flex;
    flex-direction: column;
    gap: var(--space-field-gap);
    margin-block-end: var(--space-card-gap);
}

/* حقلُ البحث: الأيقونةُ داخلَ الإطارِ لا خارجَه، فلا صندوقان فوق بعضهما. */
.market-search {
    display: flex;
    align-items: center;
    gap: var(--space-field-gap);
}

.market-search-icon { flex-shrink: 0; color: var(--color-text-secondary); }

/* الحقلُ الداخليُّ يرث الإطارَ من غلافه: لا حدَّ ولا حشوةَ رأسيةً مضاعفة. */
.market-search .input { padding: 0; }

.market-bar {
    display: flex;
    align-items: center;
    gap: var(--space-card-gap);
}

/* زرّان يقتسمان السطرَ بالتساوي على الهاتف، فلا يُقصّ أحدُهما ولا يفيض. */
.market-filter-open,
.market-sort { flex: 1 1 0; min-inline-size: 0; }

.market-filter-open { gap: var(--space-field-gap); justify-content: center; }

.market-sort { min-height: var(--min-touch); }

/* عدّادُ المرشّحاتِ الفاعلةِ على الزرّ: رقمٌ لا نقطةٌ — يُقرأ ولو لم يُميَّز لونُه. */
.filter-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 20px;
    block-size: 20px;
    padding-inline: 5px;
    border-radius: var(--radius-full);
    background: var(--color-crimson);
    color: var(--color-text-on-color);
    font-size: var(--text-chip-size);
    line-height: 1;
}

/* ---------- شرائحُ المرشّحاتِ الفاعلة ---------- */
.market-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-field-gap);
    margin-block-end: var(--space-card-gap);
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-field-gap);
    /* حشوةُ البدايةِ وحدَها: النهايةُ يملؤها زرُّ الإزالةِ بهدفِ لمسِه. */
    padding-inline-start: var(--space-card-gap);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    font-size: var(--text-chip-size);
    font-weight: var(--text-chip-weight);
}

.filter-chip > .rk-icon { color: var(--color-crimson); }

/* زرُّ الإزالة: هدفُ لمسٍ حقيقيٌّ بالصندوقِ نفسِه لا بطبقةٍ شفّافةٍ حولَه — طبقةُ
   `::after` تُرضي الإصبعَ ولا تُرضي أداةَ القياسِ ولا مفتّشَ المتصفّح، والشريحةُ هنا
   تحتمل الارتفاعَ (صفٌّ من أربعٍ على الأكثر) خلافاً لقرصِ البطاقةِ المحشور. */
.chip-x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    inline-size: var(--min-touch);
    block-size: var(--min-touch);
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
}

.chip-x:hover { background: var(--color-surface-soft); color: var(--color-navy); }
.chip-x svg { inline-size: 18px; block-size: 18px; color: inherit; }

/* السياقُ القديمُ صار شريحةً بين الشرائح: لا صندوقَ منفصلاً فوق الصفحة. */
.filter-context { border-color: var(--color-crimson); }

/* ---------- لوحةُ الفلاتر ---------- */
/* بنمطِ الدرجِ نفسِه: حاجبٌ زرٌّ ثم لوحةٌ منزاحة. وvisibility هي ما يُخرجها من ترتيبِ
   التنقّلِ حين تُطوى — الإزاحةُ وحدَها تُبقي الحقولَ قابلةً للوصولِ بـTab خارجَ الشاشة. */
.sheet-scrim {
    position: fixed;
    inset: 0;
    z-index: 69;
    border: 0;
    padding: 0;
    background: color-mix(in srgb, var(--color-night-navy) 45%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms var(--ease), visibility 0s linear 250ms;
}

.market-sheet {
    position: fixed;
    z-index: 70;
    inset-inline: 0;
    inset-block-end: 0;
    max-block-size: 85svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-section);
    padding-block-end: max(var(--space-section), env(safe-area-inset-bottom));
    border-start-start-radius: var(--radius-sheet);
    border-start-end-radius: var(--radius-sheet);
    background: var(--color-surface);
    box-shadow: var(--shadow-level3);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 280ms var(--ease), visibility 0s linear 280ms;
}

.market-sheet-wrap.is-open .market-sheet {
    transform: none;
    visibility: visible;
    transition: transform 280ms var(--ease);
}

.market-sheet-wrap.is-open .sheet-scrim {
    opacity: 1;
    visibility: visible;
    transition: opacity 250ms var(--ease);
}

/* مقبضُ السحبِ فوق العنوان: يقول «تُطوى من هنا» بلا نصّ. */
.market-sheet-head { margin-block-end: var(--space-card-gap); }

.market-sheet-head::before {
    content: "";
    display: block;
    inline-size: 40px;
    block-size: 4px;
    margin: 0 auto var(--space-card-gap);
    border-radius: var(--radius-full);
    background: var(--color-divider);
}

.market-sheet-head .title { margin: 0; }

/* داخلَ اللوحةِ الحقولُ عمودٌ واحدٌ بعرضٍ كامل: ورقةٌ ضيّقةٌ لا صفٌّ ملتفّ. */
.market-sheet .filters {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-card-gap);
    margin-block-end: var(--space-section);
}

/* **‎min-inline-size: 0‎ على كلِّ حقلٍ في اللوحة**: عنصرُ الشبكةِ الافتراضيُّ ‎min-width: auto‎،
   فقائمةُ اختيارٍ بأطولِ اسمِ قسمٍ تفرض عرضَها الجوهريَّ على العمودِ فيخرج نصفُ الحقلِ من
   حافّةِ اللوحة. القيمةُ تسمح للعمودِ بأن يضيق فعلاً إلى ‎1fr‎. */
.market-sheet .filters .field { flex: initial; min-inline-size: 0; }

.market-sheet .filters .field > .input { inline-size: 100%; }

.market-sheet-foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-card-gap);
}

.market-sheet-foot > * { flex: 1 1 10rem; justify-content: center; }

/* الشاشةُ الواسعة: اللوحةُ بطاقةٌ متمركزةٌ لا ورقةٌ ملتصقةٌ بالحافّةِ السفلى. */
@media (min-width: 40rem) {
    /* التمركزُ بـ‎margin-inline: auto‎ لا بـ‎inset-inline-start: 50%‎ مع إزاحةٍ فيزيائية:
       الأولى تنقلب مع الاتجاه والثانية لا — ‎inset-inline-start‎ في RTL هي الحافّةُ اليمنى،
       فـ‎translateX(-50%)‎ تدفع اللوحةَ إلى ربعِ الشاشةِ بدل وسطِها. الإزاحةُ هنا رأسيةٌ فقط. */
    .market-sheet {
        inset-block-end: auto;
        inset-block-start: 50%;
        inset-inline: 0;
        inline-size: min(28rem, 92vw);
        margin-inline: auto;
        max-block-size: 80svh;
        border-radius: var(--radius-sheet);
        transform: translateY(-50%) scale(0.96);
    }

    .market-sheet-wrap.is-open .market-sheet { transform: translateY(-50%); }

    .market-sheet-head::before { display: none; }
}

/* ثلاثُ بطاقاتٍ في الصفِّ الواحدِ على كلِّ عرض (طلبُ المالك 2026-09-19): الماركتُ
   والرئيسيةُ يتطابقان، ولا ينقلب التخطيطُ صفّاً أفقياً على الهاتف. */
.product-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* H-CW: دون 15rem لا يصل إليه إلا التكبير — عمودان هناك وحدَه (السببُ في app.css عند «.product-card»). */
@media (max-width: 15rem) {
    .product-grid, .product-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- العددُ والتصفّح ---------- */
.market-count { margin-block: 0 var(--space-field-gap); }

/* التصفّحُ يلتصق بآخرِ صفٍّ من المنتجات: شبكةُ المنتجاتِ تنتهي بفجوةِ قسمٍ كاملةٍ فتترك
   تحتها فراغاً لا يُقرأ إلا مسافةً بين قائمتين لا علاقةَ بينهما. */
.product-list { margin-block-end: var(--space-card-gap); }

.market-pager { margin-block: 0 var(--space-section); }


/* **ولا طبقةَ لمسٍ شفّافةٌ حول أيِّ قرصٍ هنا** (T-1141 · 2026-09-19). جُرِّبت الطبقةُ الخارجيةُ
   مرّتين فسقطت مرّتين: هي لا تكبّر الصندوقَ الذي يقرؤه المتصفّحُ ولا يصيبها النقرُ عند حافّتها،
   وحين وُضعت حولَ قرصِ الشبكةِ خرجت من الصفحةِ كلِّها على 320px. والبديلُ المعتمَدُ اليومَ
   معكوسٌ عنها تماماً: **الزرُّ يكبر إلى `--min-touch` والقرصُ المرئيُّ ينكمش داخلَه** بطبقةِ
   `::before` — فالهدفُ 48×48 قياساً حيّاً، والمنظرُ كما اعتُمد، ولا بكسلَ واحدٌ خارجَ الصفحة.

   وفيضُ الرئيسيةِ الأفقيُّ (‎+3px‎) لم يكن من القلبِ ولا من القرصِ أصلاً: كان صفَّ السعرِ
   ممنوعاً من الالتفافِ في بطاقةٍ عرضُها 77px — وموضعُ علاجِه `app.css` حيث مُنع الالتفاف. */