/* ==========================================================================
   Zelight — واجهة تصفّح الأقسام والأقسام الفرعية
   --------------------------------------------------------------------------
   ملف مستقل تماماً عن Tailwind/Vite: يُحمَّل مباشرة من public/ فلا يحتاج
   إلى خطوة بناء. كل الأصناف مسبوقة بـ zl- لتفادي أي تعارض.
   الاتجاه (RTL/LTR) مُدار بالكامل عبر الخصائص المنطقية inline-start/end.
   ========================================================================== */

:root {
    --zl-black: #000000;
    --zl-red: #c4311e;
    --zl-brown: #773f2c;
    --zl-crimson: #df1216;

    --zl-ink: #1f2937;
    --zl-ink-soft: #6b7280;
    --zl-line: #e5e7eb;
    --zl-surface: #ffffff;
    --zl-surface-alt: #f7f7f8;

    --zl-radius: 14px;
    --zl-radius-sm: 999px;
    --zl-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px -12px rgba(16, 24, 40, .18);
    --zl-shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, .22);
    --zl-ease: cubic-bezier(.22, .61, .36, 1);
}

/* حلقة تركيز موحّدة لكل عناصر التصفّح — أساسية لمستخدمي لوحة المفاتيح */
.zl-nav-trigger:focus-visible,
.zl-mega a:focus-visible,
.zl-macc__trigger:focus-visible,
.zl-macc__panel a:focus-visible,
.zl-cat-card__main:focus-visible,
.zl-cat-card__subs a:focus-visible,
.zl-chip:focus-visible,
.zl-rail__btn:focus-visible,
.zl-rail__track:focus-visible,
.zl-crumbs a:focus-visible {
    outline: 2px solid var(--zl-crimson);
    outline-offset: 3px;
    border-radius: 6px;
}


/* ==========================================================================
   1) قائمة الأقسام المنسدلة في الهيدر (Mega menu) — سطح المكتب
   ========================================================================== */

/* اللوحة تُثبَّت على شريط الهيدر لا على الزر، فتأخذ عرض الحاوية
   ولا تخرج عن الشاشة مهما كان موضع الزر */
.zl-navbar {
    position: relative;
}

.zl-nav-item {
    position: static;
}

.zl-nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font: inherit;
    cursor: pointer;
    transition: color .2s var(--zl-ease);
}

.zl-nav-trigger:hover,
.zl-nav-item[data-open="true"] .zl-nav-trigger {
    color: var(--zl-red);
}

.zl-nav-trigger__caret {
    width: 14px;
    height: 14px;
    transition: transform .25s var(--zl-ease);
}

.zl-nav-item[data-open="true"] .zl-nav-trigger__caret {
    transform: rotate(180deg);
}

.zl-mega {
    position: absolute;
    inset-block-start: calc(100% + 8px);
    inset-inline: 0;
    max-height: min(72vh, 620px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--zl-surface);
    color: var(--zl-ink);
    border-radius: var(--zl-radius);
    box-shadow: var(--zl-shadow-lg);
    padding: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s var(--zl-ease), transform .2s var(--zl-ease), visibility .2s;
    z-index: 60;
}

.zl-nav-item[data-open="true"] .zl-mega {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.zl-mega__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 1.5rem 1.25rem;
}

.zl-mega__col {
    min-width: 0;
}

.zl-mega__head {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    color: var(--zl-ink);
    font-weight: 700;
    font-size: .95rem;
    padding-block-end: .6rem;
    margin-block-end: .6rem;
    border-block-end: 1px solid var(--zl-line);
    transition: color .18s var(--zl-ease);
}

.zl-mega__head:hover {
    color: var(--zl-red);
}

.zl-mega__thumb {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    object-fit: cover;
    background: var(--zl-surface-alt);
}

.zl-mega__thumb--empty {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--zl-red), var(--zl-brown));
    color: #fff;
}

.zl-mega__thumb--empty svg {
    width: 18px;
    height: 18px;
}

.zl-mega__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zl-mega__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: .1rem;
}

.zl-mega__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    text-decoration: none;
    color: var(--zl-ink-soft);
    font-size: .875rem;
    padding: .4rem .5rem;
    border-radius: 8px;
    transition: background .16s var(--zl-ease), color .16s var(--zl-ease);
}

.zl-mega__list a:hover {
    background: var(--zl-surface-alt);
    color: var(--zl-red);
}

.zl-mega__list .zl-count {
    flex: 0 0 auto;
}

.zl-mega__empty {
    font-size: .8125rem;
    color: #9ca3af;
    padding: .4rem .5rem;
}

.zl-mega__all {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin-block-start: .35rem;
    padding: .4rem .5rem;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--zl-red);
    text-decoration: none;
    border-radius: 8px;
}

.zl-mega__all:hover {
    background: rgba(196, 49, 30, .07);
}

/* شارة عدد المنتجات */
.zl-count {
    display: inline-block;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
    padding: .28rem .5rem;
    border-radius: var(--zl-radius-sm);
    background: var(--zl-surface-alt);
    color: var(--zl-ink-soft);
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   2) أقسام قائمة الموبايل (Accordion)
   ========================================================================== */

.zl-macc {
    border-block-start: 1px solid rgba(255, 255, 255, .12);
    margin-block-start: .5rem;
    padding-block-start: .5rem;
}

.zl-macc__row {
    border-block-end: 1px solid rgba(255, 255, 255, .08);
}

.zl-macc__row:last-child {
    border-block-end: 0;
}

.zl-macc__head {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.zl-macc__link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .7rem .25rem;
    color: #fff;
    text-decoration: none;
    font-size: .9375rem;
    min-width: 0;
}

.zl-macc__link:hover {
    color: var(--zl-red);
}

/* الاسم يملأ المساحة فتُدفع شارة العدد إلى الحافة */
.zl-macc__link .zl-mega__label {
    flex: 1 1 auto;
}

.zl-macc__thumb {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    object-fit: cover;
}

.zl-macc__thumb--empty {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--zl-red), var(--zl-brown));
}

.zl-macc__thumb--empty svg {
    width: 15px;
    height: 15px;
}

/* زر الطي منفصل عن الرابط: النقر على الاسم يفتح القسم، وعلى السهم يوسّع الفروع */
.zl-macc__trigger {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    background: rgba(255, 255, 255, .07);
    border: 0;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    transition: background .18s var(--zl-ease);
}

.zl-macc__trigger:hover {
    background: rgba(255, 255, 255, .16);
}

.zl-macc__trigger svg {
    width: 16px;
    height: 16px;
    transition: transform .25s var(--zl-ease);
}

.zl-macc__row[data-open="true"] .zl-macc__trigger svg {
    transform: rotate(180deg);
}

.zl-macc__panel {
    display: none;
    padding: 0 0 .6rem;
    margin-inline-start: 2.6rem;
}

.zl-macc__row[data-open="true"] .zl-macc__panel {
    display: block;
}

.zl-macc__panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.zl-macc__panel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .5rem;
    color: rgba(255, 255, 255, .72);
    text-decoration: none;
    font-size: .8125rem;
    border-radius: 8px;
}

.zl-macc__panel a:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.zl-macc__panel .zl-count {
    background: rgba(255, 255, 255, .12);
    color: rgba(255, 255, 255, .8);
}


/* ==========================================================================
   3) شبكة بطاقات الأقسام — الصفحة الرئيسية
   ========================================================================== */

.zl-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-block-end: 1.75rem;
}

.zl-section-head__title {
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
    font-weight: 800;
    color: var(--zl-ink);
    margin: 0 0 .35rem;
}

.zl-section-head__sub {
    color: var(--zl-ink-soft);
    font-size: .9375rem;
    margin: 0;
}

.zl-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.25rem;
}

/* =====================================================================
   شبكة الأقسام الدائرية في الصفحة الرئيسية
   ===================================================================== */

.zl-circle-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.zl-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.zl-circle-img {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #f3f4f6;
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    flex-shrink: 0;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}

.zl-circle-item:hover .zl-circle-img {
    border-color: var(--zl-red);
    box-shadow: 0 6px 18px rgba(0,0,0,.15);
    transform: translateY(-5px);
}

.zl-circle-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--zl-ease);
}

.zl-circle-item:hover .zl-circle-img img {
    transform: scale(1.08);
}

.zl-circle-img--empty {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--zl-red) 0%, var(--zl-brown) 100%);
    color: rgba(255,255,255,.85);
}

.zl-circle-img--empty svg {
    width: 38px;
    height: 38px;
}

.zl-circle-info {
    margin-top: .75rem;
    padding: 0 .25rem;
}

.zl-circle-name {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--zl-ink);
    margin: 0 0 .2rem;
    transition: color .2s var(--zl-ease);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.zl-circle-item:hover .zl-circle-name {
    color: var(--zl-red);
}

.zl-circle-count {
    font-size: .75rem;
    color: var(--zl-ink-soft);
}

/* الحالة النشطة — القسم الحالي في صفحة التصنيف */
.zl-circle-item--active .zl-circle-img {
    border-color: var(--zl-red);
    box-shadow: 0 0 0 3px rgba(196, 49, 30, .18);
}

.zl-circle-item--active .zl-circle-name {
    color: var(--zl-red);
}

@media (max-width: 767px) {
    .zl-circle-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .zl-circle-img {
        width: 80px;
        height: 80px;
    }

    .zl-circle-name {
        font-size: .8125rem;
    }
}

.zl-cat-card {
    display: flex;
    flex-direction: column;
    background: var(--zl-surface);
    border: 1px solid var(--zl-line);
    border-radius: var(--zl-radius);
    overflow: hidden;
    transition: transform .28s var(--zl-ease), box-shadow .28s var(--zl-ease), border-color .28s var(--zl-ease);
}

.zl-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--zl-shadow-lg);
    border-color: transparent;
}

.zl-cat-card__main {
    display: block;
    text-decoration: none;
    color: inherit;
}

.zl-cat-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--zl-surface-alt);
}

.zl-cat-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s var(--zl-ease);
}

.zl-cat-card:hover .zl-cat-card__media img {
    transform: scale(1.06);
}

/* بديل الصورة: تدرّج بألوان العلامة بدل مربع رمادي فارغ */
.zl-cat-card__media--empty {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--zl-red) 0%, var(--zl-brown) 100%);
    color: rgba(255, 255, 255, .85);
}

.zl-cat-card__media--empty svg {
    width: 52px;
    height: 52px;
}

.zl-cat-card__badge {
    position: absolute;
    inset-block-start: .75rem;
    inset-inline-start: .75rem;
    background: rgba(0, 0, 0, .62);
    color: #fff;
    font-size: .6875rem;
    font-weight: 700;
    padding: .3rem .6rem;
    border-radius: var(--zl-radius-sm);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    font-variant-numeric: tabular-nums;
}

.zl-cat-card__body {
    padding: .9rem 1rem;
}

.zl-cat-card__title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--zl-ink);
    margin: 0;
    transition: color .2s var(--zl-ease);
}

.zl-cat-card:hover .zl-cat-card__title {
    color: var(--zl-red);
}

.zl-cat-card__subs {
    list-style: none;
    margin: 0;
    padding: 0 1rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-block-start: auto;
}

.zl-cat-card__subs a {
    display: inline-block;
    font-size: .75rem;
    color: var(--zl-ink-soft);
    text-decoration: none;
    padding: .3rem .6rem;
    border: 1px solid var(--zl-line);
    border-radius: var(--zl-radius-sm);
    transition: all .18s var(--zl-ease);
}

.zl-cat-card__subs a:hover {
    border-color: var(--zl-red);
    color: var(--zl-red);
    background: rgba(196, 49, 30, .05);
}

.zl-cat-card__subs .zl-cat-card__more {
    color: var(--zl-red);
    font-weight: 600;
    border-color: rgba(196, 49, 30, .35);
}


/* ==========================================================================
   4) الشريط الأفقي القابل للتمرير (Rail) — بأسهم وتدرّج عند الحواف
   ========================================================================== */

.zl-rail__viewport {
    position: relative;
}

.zl-rail__track {
    display: flex;
    gap: .625rem;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-block: .25rem;
}

.zl-rail__track::-webkit-scrollbar {
    display: none;
}

.zl-rail__track > * {
    scroll-snap-align: start;
    flex: 0 0 auto;
}

/* تدرّج يوضّح أن هناك محتوى مخفياً خلف الحافة — يظهر فقط عند وجود فائض */
.zl-rail__viewport::before,
.zl-rail__viewport::after {
    content: "";
    position: absolute;
    inset-block: 0;
    width: 48px;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s var(--zl-ease);
    z-index: 2;
}

.zl-rail__viewport::before {
    inset-inline-start: 0;
}

.zl-rail__viewport::after {
    inset-inline-end: 0;
}

/* اتجاه التلاشي يتبع اتجاه الصفحة: دائماً من الشفاف في الداخل إلى لون الخلفية عند الحافة */
[dir="ltr"] .zl-rail__viewport::before {
    background: linear-gradient(to left, var(--zl-rail-bg-0, rgba(255, 255, 255, 0)), var(--zl-rail-bg, #fff));
}

[dir="ltr"] .zl-rail__viewport::after {
    background: linear-gradient(to right, var(--zl-rail-bg-0, rgba(255, 255, 255, 0)), var(--zl-rail-bg, #fff));
}

[dir="rtl"] .zl-rail__viewport::before {
    background: linear-gradient(to right, var(--zl-rail-bg-0, rgba(255, 255, 255, 0)), var(--zl-rail-bg, #fff));
}

[dir="rtl"] .zl-rail__viewport::after {
    background: linear-gradient(to left, var(--zl-rail-bg-0, rgba(255, 255, 255, 0)), var(--zl-rail-bg, #fff));
}

.zl-rail[data-overflow-start="true"] .zl-rail__viewport::before,
.zl-rail[data-overflow-end="true"] .zl-rail__viewport::after {
    opacity: 1;
}

/* الأسهم في ترويسة الشريط لا فوق محتواه: لا تحجب أي شريحة ولا تُزيح التخطيط */
.zl-rail__nav {
    display: none;
    gap: .375rem;
}

.zl-rail__btn {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--zl-line);
    border-radius: 50%;
    background: var(--zl-surface);
    color: var(--zl-ink);
    cursor: pointer;
    transition: background .18s var(--zl-ease), color .18s var(--zl-ease), opacity .18s var(--zl-ease);
}

.zl-rail__btn svg {
    width: 15px;
    height: 15px;
}

.zl-rail__btn:hover {
    background: var(--zl-red);
    border-color: var(--zl-red);
    color: #fff;
}

/* الطرف الذي لا يمكن التمرير نحوه يبقى مكانه معطّلاً، فلا يقفز الشريط */
.zl-rail[data-overflow-start="false"] .zl-rail__btn--prev,
.zl-rail[data-overflow-end="false"] .zl-rail__btn--next {
    opacity: .3;
    pointer-events: none;
}

/* الأسهم لسطح المكتب فقط — على اللمس السحب هو الإيماءة الطبيعية */
@media (hover: hover) and (min-width: 768px) {

    .zl-rail[data-overflow-start="true"] .zl-rail__nav,
    .zl-rail[data-overflow-end="true"] .zl-rail__nav {
        display: flex;
    }
}


/* ==========================================================================
   5) شرائح الأقسام الفرعية (Chips)
   ========================================================================== */

.zl-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .85rem .4rem .4rem;
    background: var(--zl-surface);
    border: 1px solid var(--zl-line);
    border-radius: var(--zl-radius-sm);
    text-decoration: none;
    color: var(--zl-ink);
    font-size: .875rem;
    font-weight: 500;
    white-space: nowrap;
    transition: all .2s var(--zl-ease);
}

[dir="rtl"] .zl-chip {
    padding: .4rem .4rem .4rem .85rem;
}

.zl-chip:hover {
    border-color: var(--zl-red);
    color: var(--zl-red);
    transform: translateY(-1px);
}

.zl-chip__img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--zl-surface-alt);
}

.zl-chip__img--empty {
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--zl-red), var(--zl-brown));
    color: #fff;
}

.zl-chip__img--empty svg {
    width: 15px;
    height: 15px;
}

/* الشريحة النشطة: "أنت هنا" */
.zl-chip.is-active {
    background: var(--zl-red);
    border-color: var(--zl-red);
    color: #fff;
    font-weight: 700;
}

.zl-chip.is-active .zl-count {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.zl-chip.is-active:hover {
    background: var(--zl-crimson);
    border-color: var(--zl-crimson);
    color: #fff;
}

.zl-chip--plain {
    padding-inline: .95rem;
}


/* ==========================================================================
   6) مسار التنقل (Breadcrumb)
   ========================================================================== */

.zl-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .35rem;
    font-size: .8125rem;
    color: var(--zl-ink-soft);
    list-style: none;
    margin: 0;
    padding: 0;
}

.zl-crumbs li {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-width: 0;
}

.zl-crumbs a {
    color: var(--zl-ink-soft);
    text-decoration: none;
    transition: color .18s var(--zl-ease);
}

.zl-crumbs a:hover {
    color: var(--zl-red);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.zl-crumbs__sep {
    color: #cbd5e1;
    flex: 0 0 auto;
}

/* الفاصل يشير لاتجاه القراءة */
[dir="rtl"] .zl-crumbs__sep {
    transform: scaleX(-1);
}

.zl-crumbs__current {
    color: var(--zl-ink);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22ch;
}


/* ==========================================================================
   7) ترويسة صفحة القسم
   ========================================================================== */

.zl-cathero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    background: linear-gradient(120deg, var(--zl-red) 0%, var(--zl-brown) 100%);
    border-radius: var(--zl-radius);
    padding: 1.5rem;
    color: #fff;
    margin-block-end: 1.5rem;
}

.zl-cathero__thumb {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 12px;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, .35);
}

.zl-cathero__body {
    min-width: 0;
}

.zl-cathero__title {
    font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
    font-weight: 800;
    margin: 0 0 .35rem;
    line-height: 1.25;
}

.zl-cathero__meta {
    margin: 0;
    font-size: .875rem;
    color: rgba(255, 255, 255, .88);
}

.zl-cathero__meta strong {
    font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
    .zl-cathero {
        padding: 1.15rem;
        gap: .9rem;
    }

    .zl-cathero__thumb {
        width: 56px;
        height: 56px;
    }
}


/* ==========================================================================
   8) شريط الأقسام الفرعية + مبدّل نطاق العرض
   ========================================================================== */

.zl-subnav {
    background: var(--zl-surface);
    border: 1px solid var(--zl-line);
    border-radius: var(--zl-radius);
    padding: 1rem 1.15rem;
    margin-block-end: 1.5rem;
}

.zl-subnav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-block-end: .85rem;
}

.zl-subnav__tools {
    display: flex;
    align-items: center;
    gap: .625rem;
}

.zl-subnav__title {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--zl-ink);
    margin: 0;
}

.zl-scope {
    display: inline-flex;
    background: var(--zl-surface-alt);
    border-radius: var(--zl-radius-sm);
    padding: 3px;
    gap: 2px;
}

.zl-scope a {
    font-size: .75rem;
    font-weight: 600;
    color: var(--zl-ink-soft);
    text-decoration: none;
    padding: .35rem .75rem;
    border-radius: var(--zl-radius-sm);
    transition: all .18s var(--zl-ease);
    white-space: nowrap;
}

.zl-scope a:hover {
    color: var(--zl-ink);
}

.zl-scope a.is-active {
    background: var(--zl-surface);
    color: var(--zl-red);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .1);
}

/* التدرّج داخل هذا الصندوق يجب أن يطابق خلفيته البيضاء */
.zl-subnav .zl-rail {
    --zl-rail-bg: #fff;
    --zl-rail-bg-0: rgba(255, 255, 255, 0);
}


/* ==========================================================================
   9) معرض صور المنتج — صورة كبيرة + مصغّرات قابلة للنقر
   ========================================================================== */

.zl-gallery__stage {
    position: relative;
}

.zl-gallery__main {
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    border-radius: var(--zl-radius);
    /* التبديل بين الصور يتم بتلاشٍ قصير حتى لا تقفز الصفحة */
    transition: opacity .2s var(--zl-ease);
}

/* طبقة "سيتوفر قريباً": شفافية محسوبة هنا لأن bg-opacity غير موجود في بناء Tailwind الحالي */
.zl-gallery__veil {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .6);
    border-radius: var(--zl-radius);
}

.zl-gallery__thumbs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

@media (max-width: 480px) {
    .zl-gallery__thumbs {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .5rem;
    }
}

.zl-gallery__thumb {
    display: block;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    background: var(--zl-surface);
    cursor: pointer;
    transition: border-color .2s var(--zl-ease), transform .2s var(--zl-ease);
}

.zl-gallery__thumb img {
    display: block;
    width: 100%;
    height: 72px;
    object-fit: cover;
}

.zl-gallery__thumb:hover {
    border-color: var(--zl-line);
    transform: translateY(-2px);
}

.zl-gallery__thumb.is-active {
    border-color: var(--zl-red);
}

.zl-gallery__thumb:focus-visible {
    outline: 2px solid var(--zl-crimson);
    outline-offset: 3px;
}


/* ==========================================================================
   10) قسم "نبذة عن الشركة" — الصفحة الرئيسية
   ========================================================================== */

.zl-about {
    background: var(--zl-surface);
    padding-block: clamp(3rem, 2rem + 4vw, 5rem);
}

/* الصورة أولاً في الـDOM: على الموبايل تظهر فوق النص بلا حيَل ترتيب */
.zl-about__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: center;
    gap: clamp(1.75rem, 1rem + 3vw, 3.25rem);
}

/* بلا صورة: عمود واحد بعرض قراءة مريح */
.zl-about__inner--solo {
    grid-template-columns: minmax(0, 1fr);
    max-width: 68ch;
    margin-inline: auto;
}

.zl-about__media {
    position: relative;
    border-radius: var(--zl-radius);
    overflow: hidden;
    box-shadow: var(--zl-shadow-lg);
}

.zl-about__media::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: inherit;
    pointer-events: none;
}

.zl-about__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 440px;
    object-fit: cover;
}

.zl-about__body {
    min-width: 0;
}

.zl-about__eyebrow {
    display: inline-block;
    font-size: .8125rem;
    font-weight: 700;
    color: var(--zl-red);
    background: rgba(196, 49, 30, .09);
    border-radius: var(--zl-radius-sm);
    padding: .35rem .85rem;
    margin-block-end: .9rem;
}

.zl-about__title {
    position: relative;
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.25rem);
    font-weight: 800;
    line-height: 1.25;
    color: var(--zl-ink);
    margin: 0 0 1.1rem;
    padding-block-end: .85rem;
}

.zl-about__title::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    width: 64px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--zl-red), var(--zl-brown));
}

.zl-about__text p {
    margin: 0 0 .9rem;
    color: var(--zl-ink-soft);
    font-size: 1.0313rem;
    line-height: 1.95;
}

.zl-about__text p:last-child {
    margin-block-end: 0;
}

.zl-about__points {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: .75rem;
}

.zl-about__points li {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--zl-surface-alt);
    border: 1px solid var(--zl-line);
    border-radius: 12px;
    padding: .7rem .9rem;
    color: var(--zl-ink);
    font-size: .9375rem;
    font-weight: 600;
}

.zl-about__points svg {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--zl-red);
}

/* التبعيد بين الحروف يفكّ اتصال الحرف العربي، فيبقى للاتينية وحدها */
[dir="ltr"] .zl-about__eyebrow {
    letter-spacing: .04em;
}

@media (max-width: 900px) {
    .zl-about__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .zl-about__media img {
        max-height: 300px;
    }
}


/* ==========================================================================
   11) هيرو الصفحة الرئيسية الافتراضي (حين لا توجد بانرات)
   ========================================================================== */

.zl-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: clamp(340px, 44vh, 540px);
    padding-block: clamp(3rem, 2rem + 5vw, 5rem);
    text-align: center;
    color: #fff;
    background:
        radial-gradient(120% 90% at 50% -10%, rgba(223, 18, 22, .55) 0%, transparent 60%),
        linear-gradient(135deg, var(--zl-red) 0%, var(--zl-brown) 58%, #2a1610 100%);
}

.zl-hero > * {
    width: 100%;
}

/* هالة ضوء خفيفة تنزل من الأعلى — إيماءة بصرية لموضوع الإضاءة */
.zl-hero::before {
    content: "";
    position: absolute;
    inset-block-start: -35%;
    inset-inline-start: 50%;
    width: min(70vw, 720px);
    aspect-ratio: 1;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(255, 255, 255, .18) 0%, transparent 62%);
    pointer-events: none;
}

.zl-hero__inner {
    position: relative;
    max-width: 54ch;
    margin-inline: auto;
}

.zl-hero__lead {
    margin: 0;
    font-size: clamp(1.75rem, 1.15rem + 3.1vw, 3.25rem);
    font-weight: 800;
    line-height: 1.3;
    text-wrap: balance;
}

.zl-hero__sub {
    margin: .85rem 0 0;
    font-size: clamp(1.0625rem, .9rem + 1.1vw, 1.625rem);
    font-weight: 700;
    line-height: 1.5;
    color: rgba(255, 255, 255, .93);
}

.zl-hero__couplet {
    margin: 1.6rem 0 0;
    font-size: clamp(.9375rem, .85rem + .55vw, 1.125rem);
    line-height: 1.9;
    color: rgba(255, 255, 255, .82);
}

/* كل شطر في سطره: البيتان يُقرآن كما كُتبا لا كجملة واحدة */
.zl-hero__couplet span {
    display: block;
    text-wrap: balance;
}

.zl-hero__brand {
    display: inline-flex;
    align-items: center;
    gap: .85rem;
    margin-block-start: 1.85rem;
    font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
    font-weight: 800;
}

.zl-hero__brand::before,
.zl-hero__brand::after {
    content: "";
    width: 40px;
    height: 2px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
}

/* التبعيد بين الحروف يفكّ اتصال الحرف العربي، فيبقى للاتينية وحدها */
[dir="ltr"] .zl-hero__brand {
    letter-spacing: .14em;
}

/* ظهور متتالٍ هادئ للأسطر */
.zl-hero__lead,
.zl-hero__sub,
.zl-hero__couplet,
.zl-hero__brand {
    animation: zl-hero-in .85s var(--zl-ease) both;
}

.zl-hero__sub {
    animation-delay: .12s;
}

.zl-hero__couplet {
    animation-delay: .24s;
}

.zl-hero__brand {
    animation-delay: .36s;
}

@keyframes zl-hero-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (max-width: 640px) {
    .zl-hero__brand::before,
    .zl-hero__brand::after {
        width: 26px;
    }
}


/* ==========================================================================
   12) احترام تفضيل تقليل الحركة
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .zl-hero__lead,
    .zl-hero__sub,
    .zl-hero__couplet,
    .zl-hero__brand {
        animation: none !important;
    }

    .zl-cat-card,
    .zl-cat-card__media img,
    .zl-chip,
    .zl-mega,
    .zl-nav-trigger__caret,
    .zl-macc__trigger svg,
    .zl-rail__track,
    .zl-gallery__main,
    .zl-gallery__thumb {
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .zl-gallery__thumb:hover {
        transform: none;
    }

    .zl-cat-card:hover {
        transform: none;
    }

    .zl-cat-card:hover .zl-cat-card__media img {
        transform: none;
    }
}