/* ===========================================================================
   FirOn — صفحات المنتجات (products وأبناؤها وأحفادها) — 2026-09-21
   يخدم: منتجات FirOn · تطبيق شغف · شغف الطالب · شغف المعلم · حقيبة النجاة التعليمية ·
   منصة FirOb · الاشتراك في حقيبة النجاة.
   يُحمَّل بعد firon-services.css ويعيد استخدام لغتها (svc-sec/svc-shell/svc-item/svc-step/
   svc-checks/svc-feature/stats). رموز نظام تصميم FirOn فقط — لا ألوان ولا أحجام حرّة.
   =========================================================================== */
:root{--prd-media-ratio:16/9;--prd-logo-ratio:3/1}
.prd-page main,.prd-page .svc-sec{text-align:start}
/* ---------- مسار التنقل ---------- */
.prd-crumb{margin-block-end:var(--space-6)}
.prd-crumb .firon-breadcrumb__sep svg{inline-size:16px;block-size:16px}
/* ---------- رأس القسم (نمط نظام التصميم) ---------- */
.prd-head{display:flex;flex-direction:column;gap:var(--space-2);margin-block-end:var(--space-8)}
.prd-head--center{align-items:center;text-align:center}
.prd-head h2{margin:0}
.prd-head .svc-lede{max-inline-size:62ch}
.prd-head--center .svc-lede{margin-inline:auto}
.prd-head__rule{inline-size:56px;block-size:4px;border-radius:var(--radius-pill);background:var(--accent-yellow)}
/* ---------- الهيرو ---------- */
.prd-hero{padding-block:var(--space-16) var(--space-24)}
.prd-hero__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-16);align-items:center}
.prd-hero h1{font-size:var(--fs-h1);font-weight:var(--fw-bold);line-height:var(--lh-heading);color:var(--text-heading);margin:0 0 var(--space-4)}
.prd-hero__sub{font-size:var(--fs-h4);font-weight:var(--fw-medium);line-height:1.5;color:var(--brand-700);margin:0 0 var(--space-4)}
.prd-hero .svc-lede{margin-block-end:var(--space-4)}
.prd-hero .svc-actions{margin-block-start:var(--space-6)}
.prd-hero--inverse{background:var(--surface-inverse);color:var(--white)}
.prd-hero--inverse h1,.prd-hero--inverse .prd-hero__sub{color:var(--white)}
.prd-hero--inverse .svc-lede,.prd-hero--inverse .svc-body{color:var(--brand-50)}
.prd-hero--inverse .firon-breadcrumb,.prd-hero--inverse .firon-breadcrumb a{color:var(--brand-200)}
.prd-hero--inverse .firon-breadcrumb__current{color:var(--white)}
.prd-hero--inverse .firon-btn--secondary{color:var(--white);border-color:var(--brand-200)}
.prd-hero--inverse .firon-btn--secondary:hover{background:var(--brand-700);border-color:var(--white);color:var(--white)}
.prd-hero--inverse .svc-kicker{background:var(--brand-700);color:var(--accent-mint)}
/* ---------- معرض الصور (بديل السلايدشو) ---------- */
.prd-gallery{position:relative;border-radius:var(--radius-lg);overflow:hidden;background:var(--brand-50);border:var(--border-width) solid var(--brand-200)}
.prd-gallery__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.prd-gallery__track::-webkit-scrollbar{display:none}
.prd-gallery__slide{flex:0 0 100%;scroll-snap-align:start;aspect-ratio:4/3;background:var(--brand-50)}
.prd-gallery__slide img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.prd-gallery--square .prd-gallery__slide{aspect-ratio:1/1}
.prd-gallery__nav{position:absolute;inset-block-end:var(--space-3);inset-inline-end:var(--space-3);display:flex;gap:var(--space-2);align-items:center;background:color-mix(in srgb,var(--white) 88%,transparent);border-radius:var(--radius-pill);padding:var(--space-1)}
.prd-gallery__btn{inline-size:36px;block-size:36px;border-radius:50%;border:0;background:transparent;color:var(--brand-800);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.prd-gallery__btn:hover{background:var(--brand-50)}
.prd-gallery__btn svg{inline-size:18px;block-size:18px}
.prd-gallery__dots{display:flex;gap:6px;padding-inline:var(--space-2)}
.prd-gallery__dot{inline-size:8px;block-size:8px;border-radius:50%;background:var(--ink-300);border:0;padding:0;cursor:pointer}
.prd-gallery__dot[aria-current=true]{background:var(--brand-700)}
.prd-gallery[data-count="1"] .prd-gallery__nav{display:none}
/* صورة مفردة في الهيرو أو بجانب الخطوات */
.prd-figure{border-radius:var(--radius-lg);overflow:hidden;background:var(--brand-50);border:var(--border-width) solid var(--brand-200)}
.prd-figure img{inline-size:100%;block-size:auto;display:block}
/* ---------- بطاقات المنتجات (شبكة 2) ---------- */
.prd-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-8)}
.prd-card{display:flex;flex-direction:column;background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;block-size:100%}
.prd-card__media{aspect-ratio:var(--prd-media-ratio);background:var(--brand-50);overflow:hidden}
.prd-card__media img{inline-size:100%;block-size:100%;object-fit:cover;display:block}
.prd-card__media--logo{aspect-ratio:var(--prd-logo-ratio);display:flex;align-items:center;justify-content:center;padding:var(--space-6);background:var(--white);border-block-end:var(--border-width) solid var(--border-subtle)}
.prd-card__media--logo img{inline-size:auto;max-inline-size:100%;block-size:100%;object-fit:contain}
.prd-card__body{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-8);flex:1}
.prd-card__body h3{font-size:var(--fs-h3);font-weight:var(--fw-semibold);line-height:var(--lh-heading);color:var(--text-heading);margin:0}
.prd-card__tag{font-size:var(--fs-body-lg);font-weight:var(--fw-medium);line-height:1.6;color:var(--brand-700);margin:0}
.prd-card__body p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);margin:0}
.prd-card__fit{margin-block-start:var(--space-2);padding:var(--space-4);background:var(--surface-sunken);border:var(--border-width) solid var(--brand-200);border-radius:var(--radius-sm);font-size:var(--fs-small)}
.prd-card__fit strong{display:block;color:var(--brand-800);font-weight:var(--fw-semibold);margin-block-end:var(--space-1)}
.prd-card__foot{margin-block-start:auto;padding:0 var(--space-8) var(--space-8);display:flex;flex-wrap:wrap;gap:var(--space-3)}
.prd-card__foot .firon-btn{min-block-size:52px}
/* ---------- بطاقات «ما الذي تريد إنجازه؟» ---------- */
.prd-needs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.prd-need{display:flex;flex-direction:column;gap:var(--space-3);background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-6);text-decoration:none;color:inherit;block-size:100%}
.prd-need h3{font-size:var(--fs-h4);font-weight:var(--fw-semibold);line-height:1.5;color:var(--text-heading);margin:0}
.prd-need p{font-size:var(--fs-small);line-height:var(--lh-body);color:var(--text-body);margin:0}
.prd-need__logo{margin-block-start:auto;padding-block-start:var(--space-4);border-block-start:var(--border-width) solid var(--border-subtle);display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.prd-need__logo img{block-size:44px;inline-size:auto;max-inline-size:60%;object-fit:contain}
.prd-need__logo .svc-link{font-size:var(--fs-caption)}
/* ---------- الأرقام (تطبيق شغف) ---------- */
.stats--2{grid-template-columns:repeat(2,minmax(0,1fr));max-inline-size:760px;margin-inline:auto}
.prd-logo-band{display:flex;flex-direction:column;align-items:center;gap:var(--space-6);text-align:center}
.prd-logo-band img{block-size:96px;inline-size:auto;max-inline-size:100%}
/* ---------- التبويبات ---------- */
.prd-tabs{justify-content:center;border-block-end:0;gap:var(--space-2);flex-wrap:wrap;overflow:visible;margin-block-end:var(--space-8)}
.prd-tabs .firon-tab{border:var(--border-width) solid var(--border-default);border-radius:var(--radius-pill);padding-inline:var(--space-6);background:var(--surface-card)}
.prd-tabs .firon-tab[aria-selected=true]{background:var(--color-action);border-color:var(--color-action);color:var(--white)}
.prd-panel[hidden]{display:none}
/* ---------- بطاقات المناهج ---------- */
.prd-subject{position:relative}
.prd-subject .firon-badge{position:absolute;inset-block-start:var(--space-4);inset-inline-end:var(--space-4)}
.prd-subject__meta{display:flex;flex-direction:column;gap:var(--space-1);font-size:var(--fs-small);color:var(--text-body)}
.prd-subject__meta .u-num{font-family:var(--font-latin),var(--font-core)}
/* ---------- الخطوات (شبكة 2 من svc-step) ---------- */
.prd-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin-block-start:var(--space-8)}
.prd-steps--1{grid-template-columns:1fr;margin-block-start:0}
.prd-steps .svc-step{padding:var(--space-6)}
.prd-steps .svc-step h3{font-size:var(--fs-body-lg)}
.prd-steps .svc-step p{font-size:var(--fs-small);margin:var(--space-2) 0 0}
.prd-steps .svc-actions{margin-block-start:var(--space-4);gap:var(--space-2)}
.prd-steps .svc-actions>*{min-block-size:44px}
.prd-steps .svc-actions .firon-btn{font-size:var(--fs-small);padding-inline:var(--space-5,20px);min-inline-size:0}
.prd-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--space-12);align-items:start}
.prd-split .prd-figure{position:sticky;inset-block-start:120px}
/* ---------- الخطط ---------- */
.prd-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-block-start:var(--space-8);align-items:stretch}
.prd-plan{position:relative;display:flex;flex-direction:column;gap:var(--space-4);background:var(--surface-card);border:var(--border-width-strong) solid var(--brand-200);border-radius:var(--radius-md);padding:var(--space-8)}
.prd-plan--featured{background:var(--brand-50);border-color:var(--color-action)}
.prd-plan__badge{position:absolute;inset-block-start:calc(-1 * var(--space-3));inset-inline-start:var(--space-6)}
.prd-plan__name{font-size:var(--fs-h4);font-weight:var(--fw-semibold);line-height:1.4;color:var(--text-heading);margin:0}
.prd-plan .crt-amount b{font-size:var(--fs-h1)}
.prd-plan .svc-checks{margin-block:var(--space-2) var(--space-4)}
.prd-plan .svc-checks li{font-size:var(--fs-small)}
.prd-plan .svc-checks svg{inline-size:20px;block-size:20px;margin-block-start:3px}
.prd-plan .firon-btn{margin-block-start:auto;inline-size:100%}
/* ---------- شريط التقييم ---------- */
.prd-rating{background:var(--surface-inverse);color:var(--white);border-radius:var(--radius-lg);padding:var(--space-8) var(--space-12);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-6);text-align:center}
.prd-rating p{margin:0;font-size:var(--fs-h4);font-weight:var(--fw-medium);color:var(--white)}
.prd-rating__stars{display:inline-flex;gap:4px;color:var(--accent-yellow)}
.prd-rating__stars svg{inline-size:28px;block-size:28px;fill:currentColor}
.prd-rating__stars .is-empty svg{fill:none;color:var(--brand-200)}
/* ---------- الدفع ---------- */
.prd-pay{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--space-12);align-items:start}
.prd-pay__img{border-radius:var(--radius-lg);overflow:hidden;border:var(--border-width) solid var(--brand-200);background:var(--brand-50);position:sticky;inset-block-start:120px}
.prd-pay__img img{inline-size:100%;block-size:auto;display:block}
.prd-pay .svc-step{margin-block-end:var(--space-6)}
.prd-pay .svc-step:last-child{margin-block-end:0}
.prd-pay .svc-step h3{font-size:var(--fs-h4)}
.prd-pay__method{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);margin-block-start:var(--space-4);padding:var(--space-4);background:var(--surface-sunken);border:var(--border-width) solid var(--brand-200);border-radius:var(--radius-sm)}
.prd-pay__method img{block-size:56px;inline-size:auto;border-radius:var(--radius-sm);display:block}
.prd-pay__qr{margin-block-start:var(--space-4);inline-size:180px;border-radius:var(--radius-sm);border:var(--border-width) solid var(--border-subtle);display:block}
.prd-pay .crt-tel{font-size:var(--fs-h4)}
.prd-pay dl{display:grid;grid-template-columns:auto 1fr;gap:var(--space-1) var(--space-4);margin:var(--space-3) 0 0;font-size:var(--fs-small)}
.prd-pay dt{color:var(--text-muted)}
.prd-pay dd{margin:0;color:var(--text-body);font-weight:var(--fw-medium)}
/* ---------- نموذج جيتباك ---------- */
.prd-form{margin-block-start:var(--space-6)}
.prd-form .bk-form-card{margin:0}
/* ---------- الأسئلة المتكررة ---------- */
.prd-faq{display:grid;gap:var(--space-8)}
.prd-faq__group h3{font-size:var(--fs-h4);color:var(--brand-800);margin:0 0 var(--space-4)}
.prd-faq__item{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);margin-block-end:var(--space-3);transition:border-color var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}
.prd-faq__item[open]{border-color:var(--brand-200);box-shadow:var(--shadow-hover)}
.prd-faq__item summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-6);min-block-size:var(--touch-min);cursor:pointer;font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1.5;color:var(--text-heading)}
.prd-faq__item summary::-webkit-details-marker{display:none}
.prd-faq__item summary .firon-icon{flex:none;inline-size:32px;block-size:32px;border-radius:var(--radius-sm);background:var(--brand-50);color:var(--brand-700);display:inline-flex;align-items:center;justify-content:center;transition:transform var(--duration-base) var(--ease-standard)}
.prd-faq__item summary .firon-icon svg{inline-size:18px;block-size:18px}
.prd-faq__item[open] summary .firon-icon{transform:rotate(180deg)}
.prd-faq__body{padding:0 var(--space-6) var(--space-6)}
.prd-faq__body p{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--text-body);margin:0 0 var(--space-3)}
.prd-faq__body p:last-child{margin:0}
/* ---------- المقارنة (حقيبة النجاة) ---------- */
.prd-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.prd-compare__col{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-md);padding:var(--space-8)}
.prd-compare__col--with{background:var(--brand-50);border-color:var(--brand-200)}
.prd-compare__col h3{display:flex;align-items:center;gap:var(--space-3);font-size:var(--fs-h4);margin:0 0 var(--space-6)}
.prd-compare__col h3 .svc-tile{inline-size:40px;block-size:40px}
.prd-compare__col--without h3 .svc-tile{background:var(--color-error-surface);color:var(--red-600)}
/* ---------- الاستراتيجيات العشر ---------- */
.prd-strats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--space-4)}
.prd-strat{position:relative;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/3;border-radius:var(--radius-md);overflow:hidden;background:var(--brand-800) center/cover no-repeat;color:var(--white);isolation:isolate}
.prd-strat::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--brand-900) 88%,transparent) 0%,color-mix(in srgb,var(--brand-900) 35%,transparent) 55%,transparent 100%);z-index:-1}
.prd-strat h3{color:var(--white);font-size:var(--fs-body);font-weight:var(--fw-semibold);line-height:1.4;margin:0;padding:var(--space-4)}
.prd-strat .firon-badge{position:absolute;inset-block-start:var(--space-3);inset-inline-start:var(--space-3)}
/* ---------- بطاقات المزايا المصوّرة (حقيبة النجاة / FirOb) ---------- */
.prd-cards .prd-card__media--photo{aspect-ratio:4/3}
/* ---------- نص تمهيدي (FirOb) ---------- */
.prd-intro{max-inline-size:780px;margin-inline:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}
.prd-intro img{block-size:80px;inline-size:auto}
.prd-intro h2{margin:0}
.prd-intro .svc-lede{margin:0}
.prd-intro__mark{font-size:var(--fs-h4);font-weight:var(--fw-semibold);color:var(--brand-700);margin:0;padding:var(--space-3) var(--space-6);background:var(--surface-sunken);border-radius:var(--radius-pill);border:var(--border-width) solid var(--brand-200)}
/* ---------- بطاقة الطلب (عرض توضيحي) ---------- */
.prd-cta-card{background:var(--surface-card);border:var(--border-width) solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-12);max-inline-size:900px;margin-inline:auto}
.prd-cta-card__head{text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--space-3);margin-block-end:var(--space-8)}
.prd-cta-card__head img{block-size:72px;inline-size:auto}
.prd-cta-card__head h2,.prd-cta-card__head h3,.prd-cta-card__head p{margin:0}
.prd-cta-card__head h3{font-size:var(--fs-h4);color:var(--brand-700);font-weight:var(--fw-medium)}
/* ---------- قسم ترويج متقاطع ---------- */
.prd-cross .svc-feature{padding:var(--space-8)}
.prd-cross .svc-feature__media{aspect-ratio:4/3}
.prd-cross .svc-feature__media img{position:absolute;inset:0;inline-size:100%;block-size:100%;object-fit:cover}
/* ---------- استجابة ---------- */
@media (max-width:1024px){
.prd-hero__grid,.prd-split,.prd-pay{grid-template-columns:1fr;gap:var(--space-8)}
.prd-split .prd-figure,.prd-pay__img{position:static}
.prd-needs,.prd-plans,.prd-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
.prd-strats{grid-template-columns:repeat(3,minmax(0,1fr))}
.prd-cta-card{padding:var(--space-8)}
}
@media (max-width:640px){
.prd-hero{padding-block:var(--space-12) var(--space-16)}
.prd-hero h1{font-size:var(--fs-h2)}
.prd-cards,.prd-needs,.prd-plans,.prd-steps,.prd-compare{grid-template-columns:1fr}
.prd-strats{grid-template-columns:repeat(2,minmax(0,1fr))}
.prd-card__body{padding:var(--space-6)}
.prd-card__foot{padding:0 var(--space-6) var(--space-6)}
.prd-rating{padding:var(--space-6)}
.prd-cta-card{padding:var(--space-6)}
.stats--2{grid-template-columns:1fr}
.prd-tabs .firon-tab{padding-inline:var(--space-4)}
}