@charset "utf-8";
/* ==========================================================================
   المشغل الماسي — HKJ Gold
   نظام الواجهة الأمامية — مشتق حرفيًا من ملف Figma «FInal Website»
   لا تُعدّل القيم هنا إلا بعد تعديل التصميم في Figma.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) التوكنز
   -------------------------------------------------------------------------- */
:root {
  /* الأسطح */
  --c-grad-start: #FFFCF6;
  --c-grad-end:   #F1F6FF;
  --c-ice:        #F1F6FF;
  --c-card:       #FFFFFF;
  --c-card-warm:  #FFFCF7;   /* بطاقة بوابة التجار */
  --c-card-soft:  #FFFEFC;   /* بطاقات المجموعات + بطاقة التحقق */
  --c-navy:       #16264A;
  --c-navy-deep:  #0E1B33;
  --c-navy-ink:   #031D40;

  /* النص */
  --c-text:        #16264A;
  --c-nav:         #031D40;
  --c-muted:       #5C6272;
  --c-on-dark:     #F2EEE7;
  --c-on-dark-2:   #FFFEFC;
  --c-on-dark-mut: #9AA3B5;

  /* الحدود */
  --c-line:        #DDE4F0;
  --c-line-dark:   #2A3A5C;

  /* الحالات */
  --c-verified:    #1E6B52;
  --c-mismatch:    #A9761F;
  --c-unavailable: #8C3A2E;

  /* الشبكة */
  --page:     1440px;
  --gutter:   100px;
  --content:  1240px;
  --col-gap:  29px;

  /* الأنصاف */
  --r-card:  32px;
  --r-tile:  24px;
  --r-well:  16px;
  --r-btn:   999px;
  --r-input: 14px;
  --r-pill:  999px;

  /* الحركة */
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .45s;

  --header-h: 162px;
  --grad-stop: 715px;   /* عمق انتهاء التدرج — يُعاد ضبطه في الصفحة الرئيسية */

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2) الأساس
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: "Alexandria", "Segoe UI", "Noto Kufi Arabic", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: var(--c-text);
  background-color: var(--c-grad-end);
  background-image: linear-gradient(180deg, var(--c-grad-start) 0, var(--c-grad-end) var(--grad-stop));
  background-repeat: no-repeat;
  background-size: 100% var(--grad-stop);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* ممنوع letter-spacing على أي نص عربي */
body, h1, h2, h3, h4, p, a, li, button, input, textarea, label, span { letter-spacing: 0; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }

:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3) التخطيط
   -------------------------------------------------------------------------- */
.container { width: 100%; max-width: calc(var(--content) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.page { position: relative; z-index: 1; }

/* --------------------------------------------------------------------------
   4) التايبوغرافي — أسماء الستايلات كما في Figma
   -------------------------------------------------------------------------- */
.t-display   { font-weight: 600; font-size: 37px; line-height: 1.35; color: var(--c-text); }
.t-display-l { font-weight: 200; font-size: 37px; line-height: 1.35; color: var(--c-text); }
.t-h1        { font-weight: 600; font-size: 31px; line-height: 1.355; color: var(--c-text); }
.t-h1-l      { font-weight: 200; font-size: 31px; line-height: 1.355; color: var(--c-text); }
.t-h2        { font-weight: 600; font-size: 24px; line-height: 1.458; color: var(--c-text); }
.t-h3        { font-weight: 500; font-size: 18px; line-height: 1.555; color: var(--c-text); }
.t-h4        { font-weight: 500; font-size: 15px; line-height: 1.6;  color: var(--c-text); }
.t-body-l    { font-weight: 300; font-size: 15px; line-height: 1.8;  color: var(--c-muted); }
.t-body      { font-weight: 500; font-size: 13px; line-height: 1.8;  color: var(--c-muted); }
.t-small     { font-weight: 300; font-size: 12px; line-height: 1.75; color: var(--c-muted); }
.t-micro     { font-weight: 300; font-size: 13px; line-height: 1.4;  color: var(--c-muted); }
.t-label     { font-weight: 500; font-size: 13px; line-height: 1.3;  color: var(--c-text); }
.t-data      { font-weight: 500; font-size: 15px; line-height: 1.4;  color: var(--c-text); }

/* قاعدة الأرقام: Bold وكبيرة وظاهرة بالكامل — بدون أي شفافية */
.t-number { font-weight: 700; font-size: 44px; line-height: 1.1; color: var(--c-text); opacity: 1; font-variant-numeric: lining-nums tabular-nums; }
.t-number--dark { color: var(--c-navy-ink); }

.u-ink   { color: var(--c-navy-ink); }
.u-text  { color: var(--c-text); }
.u-muted { color: var(--c-muted); }
.u-ondark      { color: var(--c-on-dark); }
.u-ondark-2    { color: var(--c-on-dark-2); }
.u-ondark-mut  { color: var(--c-on-dark-mut); }
.u-verified    { color: var(--c-verified); }
.u-mismatch    { color: var(--c-mismatch); }
.u-unavailable { color: var(--c-unavailable); }
.u-center { text-align: center; }
.u-latin  { font-variant-numeric: lining-nums; }

/* --------------------------------------------------------------------------
   5) الأزرار — ارتفاع 40، دائرية كاملة (pill)، padding 20
   (blade.css يعيد ضبط هذه القيم على صفحات Blade؛ هذه قيم احتياطية متّسقة معها)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 0; height: 40px; padding-inline: 20px;
  border-radius: var(--r-btn); border: 1px solid transparent;
  font-weight: 500; font-size: 13px; line-height: 1.3;
  cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--c-navy); color: #FFFFFF; }
.btn--primary:hover { background: #1D3159; }

.btn--ink { background: var(--c-navy-ink); color: #FAF8F4; }
.btn--ink:hover { background: #0A2B57; }

.btn--ghost { background: transparent; color: var(--c-text); border-color: var(--c-navy); }
.btn--ghost:hover { background: rgba(22,38,74,.06); }

.btn--ghost-ink { background: transparent; color: var(--c-navy-ink); border-color: var(--c-navy-ink); font-weight: 300; }
.btn--ghost-ink:hover { background: rgba(3,29,64,.06); }

.btn--on-dark { background: var(--c-on-dark-2); color: var(--c-navy); }
.btn--on-dark:hover { background: #FFFFFF; }

.btn--on-dark-2 { background: var(--c-on-dark); color: var(--c-navy); }
.btn--on-dark-2:hover { background: #FFFFFF; }

.btn-row { display: flex; gap: 14px; }
.btn-row--end { justify-content: flex-start; }

/* رابط نصي داخل البطاقات */
.link-inline { font-weight: 500; font-size: 13px; line-height: 1.3; color: var(--c-text); position: relative; }
.link-inline::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: -4px; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: inline-end;
  transition: transform .3s var(--ease);
}
.link-inline:hover::after { transform: scaleX(1); transform-origin: inline-start; }

/* --------------------------------------------------------------------------
   6) البطاقات والأسطح
   -------------------------------------------------------------------------- */
.card       { border-radius: var(--r-card); background: var(--c-card); border: 1px solid var(--c-line); }
.card--warm { background: var(--c-card-warm); }
.card--soft { background: var(--c-card-soft); }
.card--navy { background: var(--c-navy); border-color: transparent; color: var(--c-on-dark); }
.card--plain{ border-color: transparent; }
.tile       { border-radius: var(--r-tile); background: var(--c-card); border: 1px solid var(--c-line); }

/* بطاقة هي رابط بكاملها: النقر في أي موضع منها يفتح وجهتها، وتمرير المؤشر
   فوقها يُظهر خط الرابط الداخلي كأنه هو الممرَّر عليه */
.card--link { display: block; color: inherit; text-decoration: none; cursor: pointer; }
.card--link:hover .link-inline::after,
.card--link:focus-visible .link-inline::after { transform: scaleX(1); transform-origin: inline-start; }
.card--link:focus-visible { outline-offset: 4px; border-radius: var(--r-card); }

.well {
  border-radius: var(--r-well); background: var(--c-ice); overflow: hidden;
  background-size: cover; background-position: center;
}
.well img { width: 100%; height: 100%; object-fit: cover; }

/* شرائح */
.chip {
  display: inline-flex; align-items: center; justify-content: center;
  height: 40px; padding-inline: 18px; border-radius: var(--r-pill);
  background: var(--c-card); border: 1px solid var(--c-line);
  font-weight: 500; font-size: 13px; line-height: 1.3; color: var(--c-text);
  cursor: pointer; white-space: nowrap;
  transition: background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.chip:hover { border-color: var(--c-navy); }
.chip[aria-pressed="true"], .chip--active { background: var(--c-navy); border-color: var(--c-navy); color: #FFFFFF; }
.chip--static { cursor: default; background: transparent; }
.chip--verified    { border-color: var(--c-verified);    color: var(--c-verified);    background: transparent; cursor: default; }
.chip--mismatch    { border-color: var(--c-mismatch);    color: var(--c-mismatch);    background: transparent; cursor: default; }
.chip--unavailable { border-color: var(--c-unavailable); color: var(--c-unavailable); background: transparent; cursor: default; }

/* ملاحظات ذات حد جانبي */
.notice { border-inline-start: 3px solid var(--c-line); padding-inline-start: 20px; }
.notice--warn { border-inline-start-color: var(--c-mismatch); }

/* --------------------------------------------------------------------------
   7) الهيدر
   -------------------------------------------------------------------------- */
.site-header { position: relative; z-index: 40; }
.site-header__inner { position: relative; display: flex; align-items: center; height: var(--header-h); }
.site-header__logo {
  position: absolute; inset-inline-start: 50%; transform: translateX(50%);
  width: 84px; color: var(--c-navy-ink);
}
html[dir="ltr"] .site-header__logo { transform: translateX(-50%); }
.site-header__logo svg { width: 84px; height: auto; }

.nav { display: flex; align-items: center; gap: 32px; }
.nav--secondary { margin-inline-start: auto; }
.nav a:not(.btn) { font-weight: 400; font-size: 15px; line-height: 1.4; color: var(--c-nav); position: relative; padding-block: 4px; }
.nav a:not(.btn)::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform: scaleX(0); transform-origin: inline-end;
  transition: transform .3s var(--ease);
}
.nav a:not(.btn):hover::after, .nav a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); transform-origin: inline-start; }
.nav__trade { font-weight: 500; font-size: 13px; line-height: 1.3; color: var(--c-muted); }

.nav-toggle { display: none; }
.nav-drawer { display: none; }

/* --------------------------------------------------------------------------
   8) الفوتر
   -------------------------------------------------------------------------- */
.site-footer { padding-bottom: 100px; }
.footer-card { background: var(--c-navy-ink); border-radius: var(--r-card); padding: 64px; color: var(--c-on-dark-2); }

.footer-verify { display: flex; align-items: center; justify-content: space-between; padding-bottom: 48px; }
.footer-verify__text { font-weight: 500; font-size: 18px; line-height: 1.555; color: var(--c-on-dark-2); }

.footer-cols {
  display: flex; justify-content: space-between; gap: 40px;
  padding-block: 48px;
  border-top: 1px solid var(--c-line-dark);
  border-bottom: 1px solid var(--c-line-dark);
}
.footer-col__title { font-weight: 300; font-size: 13px; line-height: 1.4; color: var(--c-on-dark-mut); margin-bottom: 14px; }
.footer-col li + li { margin-top: 10px; }
.footer-col a, .footer-col span { font-weight: 300; font-size: 12px; line-height: 1.75; color: var(--c-on-dark-2); }
.footer-col a { transition: color .25s var(--ease); }
.footer-col a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }
.footer-brand { max-width: 360px; }
.footer-brand__logo { width: 84px; color: var(--c-on-dark); margin-bottom: 21px; }
.footer-brand p { font-weight: 300; font-size: 12px; line-height: 1.75; color: var(--c-on-dark-mut); }

.footer-legal { display: flex; justify-content: space-between; gap: 24px; padding-top: 28px; }
.footer-legal p { font-weight: 300; font-size: 12px; line-height: 1.75; color: var(--c-on-dark-mut); }

/* --------------------------------------------------------------------------
   9) الهيرو — الصفحة الرئيسية
   -------------------------------------------------------------------------- */
/* الخلفية تُطبَّق على <body class="home"> في النسخة الثابتة، أو على حاوية الصفحة في Next.js */
.home {
  --grad-stop: 966px;
  background-color: var(--c-grad-end);
  background-image: linear-gradient(180deg, var(--c-grad-start) 0, var(--c-grad-start) 365px, var(--c-grad-end) 966px);
  background-repeat: no-repeat;
  background-size: 100% 966px;
}

.rays { position: absolute; top: 0; left: 0; right: 0; height: 1085px; z-index: 0; pointer-events: none; overflow: hidden; }
.rays svg { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1440px; height: 1085px; max-width: none; }
/* الأشعة طبقة absolute — لازم كل الأقسام تكون فوقها */
.page > section, .page > .container, .site-footer { position: relative; z-index: 1; }

.hero { position: relative; z-index: 1; }
.hero__grid { display: flex; align-items: flex-start; }
.hero__title { width: 367px; margin-top: 196px; text-align: start; }
.hero__eyebrow { font-weight: 300; font-size: 13px; line-height: 1.4; color: var(--c-navy-ink); }
.hero__h1 { font-weight: 600; font-size: 31px; line-height: 1.355; color: var(--c-navy-ink); margin-top: 10px; }
.hero__h1 em { display: block; font-style: normal; font-weight: 200; font-size: 37px; line-height: 1.35; }
.hero__coin { width: 451px; margin-top: 58px; margin-inline-start: 17px; margin-inline-end: 23px; flex: none; }
.hero__coin picture { display: block; }
.hero__coin img { width: 451px; height: 394px; object-fit: contain; }
.hero__action { width: 382px; margin-top: 191px; }
.hero__action p { font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--c-navy-ink); }
.hero__action .btn-row { margin-top: 36px; }
.hero__note { font-weight: 300; font-size: 12px; line-height: 1.75; color: var(--c-muted); width: 382px; margin-inline-start: auto; margin-top: 12px; }

/* --------------------------------------------------------------------------
   حركة العملة — لفة بطيئة دائمة تقف تحت المؤشر
   --------------------------------------------------------------------------
   العملة تُبنى كجسم ثلاثي الأبعاد حقيقي:
     • الوجه الأمامي  = صورة العملة (‎<img>‎) عند +نصف السُمك
     • الوجه الخلفي   = نفس الصورة معكوسة (picture::before) عند -نصف السُمك
     • الحافة المسننة = أسطوانة من 48 قطعة حول المحيط (.coin-anim__rim i)
       يبنيها site.js، فيصحّ ظلّ الحافة وسَمْتها عند كل زاوية

   القياسات نسبة مئوية من صندوق الصورة، فتظل مضبوطة على أي مقاس.
   الصورة 1000×875 ودائرة العملة بداخلها: المركز (496, 405) والقطر 800px،
   أي المركز عند 49.6% × 46.3% والقطر 80% من عرض الصندوق.
   -------------------------------------------------------------------------- */

.coin-anim {
  /* مسار صورة الوجه الخلفي — يُعاد تعريفه في نسخة Next لاختلاف مسار الأصول */
  --coin-img: url(/assets/img/coin-back-v5.webp);
  --coin-cx: 49.6%;                 /* مركز الدائرة أفقيًا داخل الصورة */
  --coin-cy: 46.3%;                 /* مركز الدائرة رأسيًا */
  --coin-dia-h: 91.6%;              /* القطر كنسبة من ارتفاع الصندوق (800/875 × نسبة الأبعاد) */
  --coin-thick: 23px;               /* سُمك العملة الحقيقي */
  --coin-lift: 14px;                /* ارتفاع القذفة */
  --coin-dur: 9s;                   /* زمن اللفة الكاملة — بطيئة عمدًا */

  position: relative;
  display: block;
  /* صندوق العملة = صورة العملة بالضبط. شرط أساسي لأن هندسة الحافة والظل
     محسوبة كنسبة من هذا الصندوق. */
  width: 451px;
  max-width: 100%;
  margin-inline: auto;
  perspective: 1400px;
  perspective-origin: var(--coin-cx) var(--coin-cy);
  will-change: transform;
}

/* الجسم الدوّار */
.coin-anim picture {
  display: block;
  position: relative;
  width: 100%;
  transform-style: preserve-3d;
  transform-origin: var(--coin-cx) var(--coin-cy);
  will-change: transform;
}

.coin-anim img {
  display: block;
  width: 100%;
  height: auto;
  backface-visibility: hidden;
  /* الوجهان على نصف السُمك من كل جهة، والحافة أسطوانة بينهما. لو وُضع وجه
     عند z=0 وحافةٌ عند مركز آخر لظهرا متجاورين عند الميلان — وهو ما كان
     يفضح أنها صورة مسطّحة لا قطعة لها سُمك. */
  transform: translateZ(calc(var(--coin-thick) / 2));
}

/* الوجه الخلفي */
.coin-anim picture::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--coin-img) center / 100% 100% no-repeat;
  transform: rotateY(180deg) translateZ(calc(var(--coin-thick) / 2));
  transform-origin: var(--coin-cx) var(--coin-cy);
  backface-visibility: hidden;
  pointer-events: none;
}

/* الحافة المسننة: أسطوانة حقيقية من قطع صغيرة موزّعة حول المحيط، كل قطعة
   مستطيل ارتفاعه سُمك العملة وعرضه وترُ القوس، منصوب عموديًا على نصف القطر.
   المستطيل المسطّح الواحد الذي كان هنا يظهر لوحًا يعبر الوجه عند الميلان،
   والأسطوانة تعطي الظلّ الصحيح لكل زاوية. عدد القطع وأنصاف الأقطار تُضبط
   من site.js لأن translateZ لا يقبل النسب المئوية. */
.coin-anim__rim {
  position: absolute;
  top: var(--coin-cy);
  left: var(--coin-cx);
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  pointer-events: none;
}

.coin-anim__rim i {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: var(--seg-w, 24px);
  height: var(--coin-thick);
  margin-left: calc(var(--seg-w, 24px) / -2);
  margin-top: calc(var(--coin-thick) / -2);
  transform: rotateZ(calc(var(--a, 0deg) + 90deg)) rotateX(90deg) translateZ(var(--coin-r, 180px));
  backface-visibility: hidden;
  background-image:
    /* التسنين (الحزوز): خطوط موازية لمحور العملة. ثلاثة حزوز في كل قطعة،
       أي 144 حزًّا حول المحيط — قريبة من عدد حزوز العملة الحقيقية. مقاسها
       كسر من عرض القطعة لا قيمة ثابتة، فتلتقي عند حدود القطع بلا كسر. */
    linear-gradient(to right,
      rgba(86,54,8,.62)   0 10%,
      rgba(255,238,190,.60) 10% 30%,
      rgba(214,168,74,.18) 30% 62%,
      rgba(86,54,8,.50)   62% 100%),
    /* حافتا السُمك: الانحناء نحو الوجهين يبتلع الضوء */
    linear-gradient(to bottom,
      rgba(58,36,4,.80) 0%, rgba(58,36,4,0) 16%,
      rgba(58,36,4,0) 84%, rgba(58,36,4,.80) 100%),
    /* لون الذهب عبر السُمك */
    linear-gradient(to bottom,
      #7a5518 0%, #c9a044 18%, #f4e2a8 46%,
      #dcb458 62%, #8a6420 88%, #5f4211 100%);
  background-size: calc(100% / 3) 100%, 100% 100%, 100% 100%;
  filter: brightness(var(--l, 1));
}

/* الظل الأرضي */
.coin-anim::before {
  content: "";
  position: absolute;
  top: calc(var(--coin-cy) + var(--coin-dia-h) / 2 - 2%);
  left: var(--coin-cx);
  width: 46%;
  height: 5%;
  transform: translate(-50%, 0) scale(1);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(26,42,74,.30), rgba(26,42,74,0) 70%);
  opacity: .55;
  pointer-events: none;
}

/* اللمعة */
.coin-anim::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.42) 50%, transparent 58%);
  opacity: 0; pointer-events: none;
}

/* ——— الحركة الدائمة: لفّة بطيئة متواصلة، وتقف تحت المؤشر ———
   العملة تلفّ حول محورها كما كانت تلفّ عند الهوفر، لكن ببطء وبلا توقف،
   فيظهر وجهاها وحافتها المسننة بالتناوب. فإذا مرّ عليها المؤشر توقفت في
   مكانها كأن الزائر أمسكها. لا دخلة سقوط: تظهر في مكانها مع بقية الصفحة. */
.coin-anim picture  { animation: coin-spin var(--coin-dur) linear infinite; }
.coin-anim::before  { animation: coin-spin-shadow var(--coin-dur) ease-in-out infinite; }

/* الإيقاف بالمؤشر فقط على الأجهزة التي تملك مؤشرًا حقيقيًا: على اللمس
   يعلق :hover بعد النقر فتتجمد العملة بلا سبب. */
@media (hover: hover) {
  .coin-anim:hover picture,
  .coin-anim:hover::before { animation-play-state: paused; }
}

.coin-anim:focus-visible picture,
.coin-anim:focus-visible::before { animation-play-state: paused; }

/* اللفّة: دورة كاملة بسرعة ثابتة */
@keyframes coin-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}

/* الظل يضيق حين تصير العملة على حافتها (90° و270°) ويتسع مع وجهيها */
@keyframes coin-spin-shadow {
  0%, 50%, 100% { transform: translate(-50%, 0) scale(1, 1);    opacity: .55; }
  25%, 75%      { transform: translate(-50%, 0) scale(.42, .9); opacity: .40; }
}

/* --------------------------------------------------------------------------
   شاشة التحميل — شعار الشركة حتى تجهز الصفحة
   -------------------------------------------------------------------------- */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--c-grad-start) 0%, var(--c-grad-end) 100%);
  transition: opacity .6s var(--ease), visibility .6s var(--ease);
}

.preloader.is-done { opacity: 0; visibility: hidden; }

/* لا نعرضها إطلاقًا بدون جافاسكربت كي لا تحجب الموقع */
html:not(.js) .preloader { display: none; }
body.is-loading { overflow: hidden; }

.preloader__inner { display: flex; flex-direction: column; align-items: center; gap: 34px; }

.preloader__word {
  font-weight: 300;
  font-size: 13px;
  letter-spacing: .34em;
  color: var(--c-navy-ink);
  opacity: .78;
}

.preloader__bar {
  width: 132px;
  height: 2px;
  border-radius: 2px;
  background: rgba(3,29,64,.10);
  overflow: hidden;
}

.preloader__bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--c-navy-ink), transparent);
  animation: preloader-bar 1.35s var(--ease) infinite;
}

@keyframes preloader-bar {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(360%); }
}

/* شعار شاشة التحميل — يظهر ويختفي بتدرّج متصل حتى تجهز الصفحة */
.preloader__logo {
  width: 168px;
  color: var(--c-navy-ink);
  opacity: 0;
  animation: preloader-logo-fade 2s var(--ease-soft, ease-in-out) infinite;
}

.preloader__logo svg { width: 100%; height: auto; display: block; }

/* لون المعدن — في شاشة تحميل صفحة التحقق وحدها، حيث تُعرف القطعة. بقية
   صفحات الموقع تبقى بالشعار الكحلي العادي. الشعار مرسوم بـ currentColor
   فيكفي لون الحاوية. */
.preloader--gold   .preloader__logo { color: #B5892B; }
.preloader--silver .preloader__logo { color: #8A95A3; }

@keyframes preloader-logo-fade {
  0%   { opacity: 0; transform: translateY(6px) scale(.97); }
  45%  { opacity: 1; transform: translateY(0) scale(1); }
  55%  { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-6px) scale(.97); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader__logo { opacity: 1; animation: none; }
  .preloader__bar span { animation: none; }
}

/* --------------------------------------------------------------------------
   10) شريط الثقة
   -------------------------------------------------------------------------- */
.trust-strip {
  display: flex; align-items: center; justify-content: space-between;
  height: 70px; border-top: 1px solid var(--c-navy); border-bottom: 1px solid var(--c-navy);
}
.trust-item { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--c-navy); }
.trust-item::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--c-navy); flex: none; }

/* --------------------------------------------------------------------------
   11) الأقسام المشتركة
   -------------------------------------------------------------------------- */
.split { display: flex; align-items: center; gap: 80px; }
.split__media { width: 580px; height: 400px; flex: none; border-radius: var(--r-card); overflow: hidden; }
.home-split--2 .split__media { height: 380px; }
.split__media picture, .product-gallery picture, .story-image picture, .cert-image picture { display: block; height: 100%; }
.well picture { display: block; height: 100%; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__copy { width: 580px; flex: none; }

.sec-head__eyebrow { font-weight: 300; font-size: 13px; line-height: 1.4; color: var(--c-muted); }
.sec-head__title { margin-top: 16px; }
.sec-head__body { margin-top: 16px; }

/* بطاقة المجموعة */
.card-collection { display: flex; flex-direction: column; padding: 28px; min-height: 417px; transition: transform .35s var(--ease), border-color .35s var(--ease); }
.card-collection:hover { transform: translateY(-4px); border-color: var(--c-navy); }
.card-collection .well { height: 210px; }
.card-collection__title { margin-top: 20px; }
.card-collection__desc { margin-top: 20px; }
.card-collection__link { margin-top: auto; padding-top: 20px; text-align: start; }

/* بطاقة المنتج */
.card-product { display: flex; flex-direction: column; padding: 20px; min-height: 441px; transition: transform .35s var(--ease), border-color .35s var(--ease); }
.card-product:hover { transform: translateY(-4px); border-color: var(--c-navy); }
.card-product .well { aspect-ratio: 1 / 1; height: auto; }
.card-product__name { margin-top: 14px; }
.card-product__cat  { margin-top: 14px; }
.card-product__spec { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 7px; }
.card-product__chip { margin-top: 14px; }
.card-product__row  { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 14px; }

/* صفوف مرقّمة */
.step-row { display: flex; align-items: flex-start; gap: 28px; padding-block: 26px; }
.step-row__num { width: 72px; flex: none; text-align: start; }
.step-row__copy { flex: 1; }
.step-row__copy h4 { font-weight: 500; font-size: 15px; line-height: 1.6; color: var(--c-navy-ink); }
.step-row__copy p  { margin-top: 8px; font-weight: 300; font-size: 12px; line-height: 1.75; color: var(--c-navy-ink); }

.step-num { }
.step-num__rule { height: 1px; background: var(--c-line); margin-block: 21px; }
.step-num h4 { font-weight: 500; font-size: 15px; line-height: 1.6; }
.step-num p { margin-top: 14px; font-weight: 300; font-size: 12px; line-height: 1.75; color: var(--c-muted); }

/* حقول النماذج */
.field { display: block; }
.field__label { display: block; font-weight: 300; font-size: 12px; line-height: 1.75; color: var(--c-muted); margin-bottom: 10px; }
.field__input,
.field textarea, .field input, .field select {
  width: 100%; height: 56px; padding-inline: 20px;
  background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-input);
  font-family: inherit; font-weight: 500; font-size: 13px; line-height: 1.3; color: var(--c-text);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field textarea { height: auto; min-height: 56px; padding-block: 17px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--c-muted); font-weight: 500; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--c-navy); box-shadow: 0 0 0 3px rgba(22,38,74,.08); }
.field--full { grid-column: 1 / -1; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }

.dropzone {
  display: flex; align-items: center; justify-content: flex-start;
  height: 56px; padding-inline: 20px; border: 1px dashed var(--c-line); border-radius: var(--r-input);
  background: var(--c-card); color: var(--c-muted); font-weight: 500; font-size: 13px; cursor: pointer;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.dropzone:hover, .dropzone.is-over { border-color: var(--c-navy); background: #FAFCFF; }

.consent { display: flex; align-items: flex-start; gap: 12px; font-weight: 300; font-size: 12px; line-height: 1.75; color: var(--c-muted); }
.consent input { width: 18px; height: 18px; margin-top: 4px; accent-color: var(--c-navy); flex: none; }

/* صفوف بيانات (المواصفات / الشهادة) — ارتفاع أدنى لا ثابت، فقيمة تحتاج سطرين لا تتراكب مع تسميتها */
.spec-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 49px; padding-block: 8px; }
.spec-row__v { text-align: end; }
.spec-list .spec-row + .spec-row { border-top: 1px solid var(--c-line); }
.spec-row__k { font-weight: 300; font-size: 12px; line-height: 1.75; color: var(--c-muted); }
.spec-row__v { font-weight: 500; font-size: 15px; line-height: 1.4; color: var(--c-text); }

/* قوائم منسدلة (الأسئلة والسياسات) */
.qa { border-top: 1px solid var(--c-line); }
.qa:first-child { border-top: 0; }
.qa__q { font-weight: 500; font-size: 18px; line-height: 1.555; color: var(--c-text); }
.qa__a { margin-top: 10px; font-weight: 500; font-size: 13px; line-height: 1.8; color: var(--c-muted); }
.qa__item { padding-block: 28px; }

/* --------------------------------------------------------------------------
   12) الخريطة المصمّمة (تواصل معنا)
   -------------------------------------------------------------------------- */
.map {
  position: relative; width: 608px; height: 420px; flex: none;
  background: var(--c-ice); border: 1px solid var(--c-line); border-radius: var(--r-card);
  overflow: hidden; display: block;
}
.map__layer { position: absolute; inset: 0; direction: ltr; }
.map__layer > * { position: absolute; }
.map .st { background: #FFFFFF; }
.map .ln { background: var(--c-line); }
.map .bl { background: #FFFFFF; border-radius: 10px; }
.map .bl--ice { background: var(--c-line); }
.map__pin { width: 48px; height: 48px; border-radius: 50%; background: var(--c-navy); display: grid; place-items: center; z-index: 3; }
.map__pin::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; }
.map__pin-tail { width: 25px; height: 25px; background: var(--c-navy); border-radius: 3px; transform: rotate(45deg); z-index: 2; }
.map__label {
  display: inline-flex; align-items: center; height: 38px; padding-inline: 18px;
  background: #FFFFFF; border: 1px solid var(--c-line); border-radius: var(--r-pill);
  font-weight: 500; font-size: 12px; line-height: 1.3; color: var(--c-navy); z-index: 4; white-space: nowrap;
}
.map__sub { font-weight: 300; font-size: 12px; line-height: 1.3; color: var(--c-muted); z-index: 4; }
.map:hover .map__pin { animation: pin-bounce .6s var(--ease); }
@keyframes pin-bounce { 0%,100% { transform: translateY(0); } 40% { transform: translateY(-8px); } }

/* --------------------------------------------------------------------------
   13) بوابة التحقق
   -------------------------------------------------------------------------- */
.portal {
  --grad-stop: 343px; min-height: 100vh;
  background-color: var(--c-grad-end);
  background-image: linear-gradient(180deg, var(--c-grad-start) 0, var(--c-grad-end) 343px);
  background-repeat: no-repeat;
  background-size: 100% 343px;
}
.portal-header { height: 128px; display: flex; align-items: center; justify-content: center; }
.portal-header .logo { width: 84px; color: var(--c-navy-ink); }
.state-card { width: 720px; margin-inline: auto; padding: 56px; border-radius: var(--r-card); background: var(--c-card); border: 1px solid var(--c-line); text-align: center; }
.state-card--wide { width: 820px; }
.state-card__title { margin-top: 22px; }
.state-card__body { margin-top: 22px; font-weight: 500; font-size: 13px; line-height: 1.8; color: var(--c-muted); }
.state-card .btn-row { justify-content: center; margin-top: 48px; }

.viewfinder {
  width: 360px; height: 360px; margin: 48px auto 0; border-radius: var(--r-tile);
  background: var(--c-navy-deep); display: grid; place-items: center; position: relative; overflow: hidden;
}
.viewfinder span { font-weight: 300; font-size: 13px; line-height: 1.4; color: var(--c-on-dark-mut); }
.viewfinder::before {
  content: ""; position: absolute; inset-inline: 40px; height: 2px; top: 40px;
  background: linear-gradient(90deg, transparent, rgba(242,238,231,.75), transparent);
  animation: scanline 2.6s var(--ease) infinite;
}
@keyframes scanline { 0% { transform: translateY(0); } 50% { transform: translateY(276px); } 100% { transform: translateY(0); } }
.viewfinder__corner { position: absolute; width: 44px; height: 44px; border: 2px solid var(--c-on-dark-mut); opacity: .5; }
.viewfinder__corner:nth-child(1) { top: 28px; inset-inline-start: 28px; border-inline-end: 0; border-bottom: 0; border-start-start-radius: 8px; }
.viewfinder__corner:nth-child(2) { top: 28px; inset-inline-end: 28px; border-inline-start: 0; border-bottom: 0; border-start-end-radius: 8px; }
.viewfinder__corner:nth-child(3) { bottom: 28px; inset-inline-start: 28px; border-inline-end: 0; border-top: 0; border-end-start-radius: 8px; }
.viewfinder__corner:nth-child(4) { bottom: 28px; inset-inline-end: 28px; border-inline-start: 0; border-top: 0; border-end-end-radius: 8px; }

/* أعلى الشهادة: تاريخ الإصدار سطر صغير، وتحته «موثّق» بارزة بالأخضر */
.cert-date { display: inline-flex; align-items: baseline; gap: 8px; margin: 0; font-size: 13px; line-height: 1.4; color: var(--c-muted); }
.cert-date strong { font-weight: 600; font-size: 14px; color: var(--c-text); font-variant-numeric: lining-nums tabular-nums; }
.cert-verified {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px;
  padding: 20px 20px; border-radius: var(--r-tile);
  background: rgba(30, 107, 82, .08); border: 1.5px solid var(--c-verified); color: var(--c-verified);
}
.cert-verified__icon { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--c-verified); color: #fff; display: grid; place-items: center; }
.cert-verified__icon svg { width: 22px; height: 22px; }
.cert-verified__label { font-size: 26px; font-weight: 800; line-height: 1.2; }
@media (max-width: 600px) {
  .cert-verified { padding: 16px; gap: 10px; }
  .cert-verified__icon { width: 34px; height: 34px; }
  .cert-verified__icon svg { width: 19px; height: 19px; }
  .cert-verified__label { font-size: 22px; }
}

.qr-well {
  width: 300px; height: 300px; flex: none; border-radius: var(--r-tile);
  background: var(--c-navy-deep); border: 1px solid var(--c-line-dark);
  display: grid; place-items: center; align-content: center; gap: 14px;
  padding: 20px; text-decoration: none; transition: border-color .2s var(--ease);
}
.qr-well:hover { border-color: var(--c-gold); }
/* الرمز على أرضية بيضاء دائمًا: الماسح يحتاج تباينًا عاليًا وهامشًا حوله */
.qr-well__code { width: 178px; padding: 10px; border-radius: 14px; background: #fff; }
.qr-well__code svg { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   14) الأنيميشن — هادئ، ويحترم إعدادات تقليل الحركة
   -------------------------------------------------------------------------- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); }
.js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-reveal][data-delay="1"].is-in { transition-delay: .08s; }
.js [data-reveal][data-delay="2"].is-in { transition-delay: .16s; }
.js [data-reveal][data-delay="3"].is-in { transition-delay: .24s; }
.js [data-reveal][data-delay="4"].is-in { transition-delay: .32s; }

.fade-swap { animation: fade-swap .45s var(--ease); }
@keyframes fade-swap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .coin-anim picture, .coin-anim::before { animation: none; transform: none; }
  .coin-anim::before { transform: translate(-50%, 0); }
}

/* --------------------------------------------------------------------------
   15) الاستجابة — التصميم المرجعي 1440، وما دونه يتكيّف بدون تغيير الهوية
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
  :root { --gutter: 56px; }
  .hero__grid { flex-wrap: wrap; justify-content: space-between; }
  .hero__coin { order: -1; margin-inline: auto; margin-top: 24px; }
  .hero__title, .hero__action { margin-top: 40px; }
  .hero__title { width: 46%; }
  .hero__action { width: 46%; }
  .hero__note { width: auto; max-width: 420px; }
  .split { gap: 48px; }
  .split__media, .split__copy { width: 50%; }
  .map { width: 50%; }
}

@media (max-width: 1024px) {
  .nav--primary { display: none; }
  .footer-cols { flex-wrap: wrap; gap: 40px 64px; }
  .footer-brand { order: -1; width: 100%; max-width: 100%; }
}

@media (max-width: 860px) {
  :root { --gutter: 24px; --header-h: 96px; }
  body { font-size: 14px; }
  .t-display, .t-display-l { font-size: 28px; }
  .t-h1, .t-h1-l, .hero__h1 { font-size: 24px; }
  .hero__h1 em { font-size: 27px; }
  .t-h2 { font-size: 20px; }
  .t-number { font-size: 34px; }

  .nav--secondary a:not(.btn), .nav__trade { display: none; }
  .site-header__inner { justify-content: space-between; }
  .site-header__logo { position: static; transform: none; }
  html[dir="rtl"] .site-header__logo { transform: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 1px solid var(--c-line); border-radius: 12px;
    background: var(--c-card); cursor: pointer;
  }
  .nav-drawer {
    position: fixed; inset: 0; z-index: 60; background: var(--c-grad-end);
    padding: 24px; display: none; flex-direction: column; gap: 4px; overflow-y: auto;
  }
  .nav-drawer.is-open { display: flex; }
  .nav-drawer a { padding-block: 14px; font-size: 16px; border-bottom: 1px solid var(--c-line); }
  .nav-drawer .btn { margin-top: 16px; width: 100%; }
  .nav-drawer__close {
    align-self: flex-end; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-bottom: 8px; border: 1px solid var(--c-line); border-radius: 12px;
    background: var(--c-card); color: inherit; cursor: pointer;
  }

  .hero__grid { flex-direction: column; align-items: stretch; }
  .hero__title, .hero__action, .hero__coin { width: 100%; margin-inline: 0; }
  .coin-anim { width: min(100%, 340px); perspective: 1000px; --coin-lift: 10px; --coin-thick: 17px; }
  .hero__note { max-width: none; }

  .split { flex-direction: column; align-items: stretch; }
  .split__media, .split__copy, .map { width: 100%; }
  .split__media { height: 260px; }
  .map { height: 320px; }
  .form-grid { grid-template-columns: 1fr; gap: 18px; }
  .btn-row { flex-wrap: wrap; }
  .btn { min-width: 0; flex: 1 1 auto; }

  .footer-card { padding: 32px 24px; }
  .footer-verify { flex-direction: column; align-items: stretch; gap: 20px; text-align: start; }
  .footer-legal { flex-direction: column; gap: 8px; }
  .site-footer { padding-bottom: 24px; }

  .state-card, .state-card--wide { width: 100%; padding: 28px 20px; }
  .viewfinder { width: 100%; max-width: 320px; height: 320px; }
  .trust-strip { height: auto; flex-wrap: wrap; gap: 12px 24px; padding-block: 18px; }
}

/* ==========================================================================
   16) الشبكات وأقسام الصفحات — المقاسات مطابقة لملف Figma (1440)
   ========================================================================== */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--col-gap); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }

.site-footer { margin-top: 100px; }
.home .site-footer { margin-top: 80px; }

/* ---------- الرئيسية ---------- */
.home-trust        { margin-top: 209px; }
.home-trade        { margin-top: 112px; }
.home-trade__card  { display: flex; gap: 80px; padding: 64px; align-items: flex-start; }
.home-trade__copy  { flex: 1 1 801px; }
.home-trade__title { margin-top: 16px; }
.home-trade__body  { margin-top: 16px; }
.home-trade__action{ width: 231px; flex: none; margin-top: 28px; }
.home-trade__note  { margin-top: 18px; }

.home-collections  { margin-top: 80px; }
.sec-head          { display: flex; gap: 80px; align-items: flex-start; }
.sec-head__copy    { flex: 1 1 980px; }
.sec-head__action  { width: 180px; flex: none; margin-top: 67px; }
.home-collections__grid { margin-top: 48px; }

.home-split        { margin-top: 100px; }
.split__actions    { margin-top: 18px; }

.home-verify       { margin-top: 100px; }
.home-verify__card { display: flex; gap: 80px; padding: 76px 72px; align-items: flex-start; }
.home-verify__copy { width: 516px; flex: none; }
.home-verify__steps{ width: 500px; flex: none; }
.home-verify__title{ margin-top: 18px; }
.home-verify__body { margin-top: 18px; }
.home-verify__action { margin-top: 50px; }

.home-cta          { margin-top: 120px; }
.home-cta__body    { margin-top: 24px; max-width: 640px; margin-inline: auto; }
.home-cta__action  { margin-top: 24px; display: flex; justify-content: center; }

/* ---------- افتتاحيات الصفحات الداخلية ---------- */
.sec-intro          { margin-top: 40px; }
.intro-copy         { max-width: 840px; }
.intro-copy__title  { margin-top: 18px; }
.intro-copy__body   { margin-top: 18px; }
.intro-notice       { margin-top: 20px; max-width: 800px; }
.intro-actions      { margin-top: 22px; justify-content: flex-start; }

/* ---------- المسكوكات ---------- */
.sec-categories        { margin-top: 72px; }
.sec-categories__grid  { margin-top: 32px; }
.sec-filters           { margin-top: 80px; }
.filter-bar            { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
                         min-height: 80px; padding: 20px 24px; border-radius: var(--r-tile); }
.filter-bar .chip      { flex: none; }
.sec-grid              { margin-top: 40px; }
.sec-grid__empty       { margin-top: 24px; }
/* ترقيم صفحات شبكة المنتجات: رقائق بنفس هيئة شريط التصفية */
.pagination__summary   { margin-top: 40px; text-align: center; color: var(--c-muted); }
.pagination            { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; }
.pagination .chip      { flex: none; min-width: 44px; padding-inline: 14px; }
.pagination .pagination__step { padding-inline: 22px; }
.pagination .chip:disabled { opacity: .4; cursor: default; border-color: var(--c-line); }
.pagination__gap       { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; color: var(--c-muted); user-select: none; }
.sec-trade-cta         { margin-top: 125px; }
.trade-cta             { display: flex; gap: 80px; padding: 64px; align-items: flex-start; }
.trade-cta__copy       { flex: 1 1 852px; }
.trade-cta__body       { margin-top: 16px; }
.trade-cta__action     { width: 180px; flex: none; margin-top: 17px; }
.card-collection--sm .well { height: 210px; }

/* ---------- تفاصيل المنتج ---------- */
.product-top            { margin-top: 32px; }
.product-split          { margin-top: 32px; gap: 64px; align-items: flex-start; }
.product-info           { width: 588px; flex: none; }
.product-gallery        { width: 588px; aspect-ratio: 1 / 1; flex: none; border-radius: var(--r-card); border: 1px solid var(--c-line); overflow: hidden; }
.product-gallery img    { width: 100%; height: 100%; object-fit: cover; }
/* صورة المنتج داخل معرض صفحة التفاصيل */
.product-gallery .well { height: 100%; border-radius: 0; }

.product-info__lead     { margin-top: 20px; }
.product-info__chip     { margin-top: 20px; }
.product-info__specs    { margin-top: 20px; }
.product-info__actions  { margin-top: 34px; }
.product-info__notice   { margin-top: 20px; }
.product-desc           { margin-top: 80px; }
.product-desc__body     { margin-top: 16px; max-width: 900px; }
.product-auth           { margin-top: 80px; }
.product-auth__card     { display: flex; gap: 80px; padding: 64px 72px; align-items: flex-start; }
.product-auth__copy     { flex: 1 1 836px; }
.product-auth__body     { margin-top: 14px; }
.product-auth__action   { width: 180px; flex: none; margin-top: 29px; }
.product-related        { margin-top: 80px; }
.product-related__grid  { margin-top: 28px; }
.product-crumb          { margin-bottom: 0; }

/* ---------- التصنيع حسب الطلب ---------- */
.sec-models          { margin-top: 80px; }
.sec-models__body    { margin-top: 28px; max-width: 820px; }
.sec-models__grid    { margin-top: 28px; }
.sec-journey         { margin-top: 80px; }
.sec-journey__grid   { margin-top: 36px; }
.sec-request         { margin-top: 80px; }
.request-form        { padding: 64px; }
.request-form__label { margin-top: 28px; }
.chip-row            { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.request-form__grid  { margin-top: 28px; }
.request-form__consent { margin-top: 28px; }
.request-form__submit  { margin-top: 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.sec-note            { margin-top: 80px; }

/* ---------- الأصالة والتحقق ---------- */
.sec-single          { margin-top: 80px; }
.single-card         { display: flex; gap: 80px; padding: 72px; align-items: center; }
.single-card__copy   { flex: 1 1 716px; }
.single-card__body   { margin-top: 16px; }
.sec-steps           { margin-top: 80px; }
.steps-list          { margin-top: 32px; }
.step-row--wide .step-row__copy { flex: 1; }
.sec-fields          { margin-top: 80px; }
.cert-fields         { margin-top: 28px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 24px; }
.cert-field          { height: 59px; display: flex; align-items: center; border-bottom: 1px solid var(--c-line); }
.sec-levels          { margin-top: 80px; }
.sec-levels__grid    { margin-top: 28px; }
.level-card          { padding: 36px; border-radius: var(--r-tile); }
.level-card__title   { margin-top: 16px; }
.level-card__desc    { margin-top: 16px; }
.sec-privacy         { margin-top: 80px; }
.sec-privacy__body   { margin-top: 16px; max-width: 900px; }

/* ---------- قصتنا ---------- */
.sec-story-image     { margin-top: 56px; }
.story-image         { height: 420px; border-radius: var(--r-card); border: 1px solid var(--c-line); overflow: hidden; }
.story-image img     { width: 100%; height: 100%; object-fit: cover; }
.sec-chapters        { margin-top: 72px; }
.chapters-grid       { row-gap: 24px; }
.chapter             { padding: 40px; border-radius: var(--r-tile); }
.chapter__body       { margin-top: 14px; }
.sec-values          { margin-top: 72px; }
.values-grid         { margin-top: 32px; }
.value__title        { margin-top: 25px; }
.value__desc         { margin-top: 12px; }
.sec-story-cta       { margin-top: 72px; }
.sec-story-cta__action { margin-top: 24px; display: flex; justify-content: center; }

/* ---------- تواصل معنا ---------- */
.sec-contact          { margin-top: 64px; }
.contact-split        { gap: 24px; align-items: flex-start; }
.contact-card         { width: 608px; flex: none; padding: 40px; min-height: 400px; display: flex; flex-direction: column; }
.contact-row          { padding-block: 20px; border-bottom: 1px solid var(--c-line); }
.contact-row:first-child { padding-top: 0; }
.contact-row p + p    { margin-top: 6px; }
.contact-card__actions{ margin-top: 24px; }
.sec-contact-form     { margin-top: 72px; }

/* ---------- الأسئلة والسياسات ---------- */
.sec-intro--short + .sec-qa { margin-top: 56px; }
.sec-draft-notice     { margin-top: 56px; }
.sec-qa               { margin-top: 56px; }
.qa-list              { padding: 24px 48px; }

/* ---------- 404 ---------- */
.sec-404        { margin-top: 120px; }
.err-code       { font-weight: 700; font-size: 120px; line-height: 1.1; color: var(--c-text); text-align: center; }
.err-title      { margin-top: 22px; }
.err-body       { margin-top: 22px; max-width: 642px; margin-inline: auto; }
.err-actions    { margin-top: 22px; justify-content: center; }
.sec-err-card   { margin-top: 100px; }
.err-card       { width: 760px; max-width: 100%; margin-inline: auto; padding: 56px; text-align: center; }
.err-card__body { margin-top: 18px; }
.err-card__action { margin-top: 18px; display: flex; justify-content: center; }

/* ---------- بوابة التحقق ---------- */
.portal-body       { padding-bottom: 120px; }
.state-card__help  { margin-top: 22px; }
.state-card__hint  { margin-top: 22px; }
.serial-form       { margin-top: 22px; text-align: start; }
.serial-form .btn-row { justify-content: center; margin-top: 22px; }
.cert-image        { margin-top: 28px; height: 300px; border-radius: var(--r-tile); border: 1px solid var(--c-line); overflow: hidden; }
.cert-image img    { width: 100%; height: 100%; object-fit: cover; }
.cert-rows         { margin-top: 28px; text-align: start; }
.cert-notice       { margin-top: 28px; text-align: start; }
.cert-verified     { margin-top: 14px; }

/* ---------- طباعة الشهادة ----------
   الشهادة المطبوعة وثيقة قائمة بذاتها: تحمل الهوية ورابط التحقق،
   فمن يمسكها ورقًا يستطيع الرجوع إلى المصدر بنفسه. */
@media print {
  @page { size: A4; margin: 16mm 14mm; }

  .portal-header, .btn, .btn-row, .cert-notice,
  .serial-form, .preloader, .site-header, .site-footer,
  .viewfinder, .state-card__hint, .state-card__help { display: none !important; }

  html, body {
    background: #fff !important;
    color: #16264A !important;
  }
  body.is-loading { opacity: 1 !important; }

  .portal-body { padding: 0 !important; }

  .state-card, .state-card--wide {
    border: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    break-inside: avoid;
  }

  /* ترويسة تظهر في الورق وحده */
  .cert-print-head { display: block !important; }
  .cert-print-head__brand {
    font-size: 11pt; font-weight: 700; letter-spacing: .2em;
    color: #A8873F; direction: ltr;
  }
  .cert-print-head__title {
    font-size: 19pt; font-weight: 700; margin-top: 6px;
  }
  .cert-print-head__rule {
    height: 2px; background: #A8873F; width: 52px; margin-top: 12px;
  }

  .chip {
    border: 1px solid #1E6B52 !important;
    color: #1E6B52 !important;
    background: transparent !important;
  }

  .cert-verified { margin-top: 10px !important; padding: 14px !important; background: transparent !important; }
  .cert-verified__icon { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  .cert-image {
    height: 200px !important;
    border: 1px solid #DDE4F0 !important;
    break-inside: avoid;
  }
  .cert-image img { object-fit: contain !important; }

  .cert-rows { margin-top: 14px !important; }
  .spec-row { break-inside: avoid; padding: 7px 0 !important; }

  .cert-print-foot { display: block !important; }

  * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}

/* عناصر الورق لا تظهر على الشاشة */
.cert-print-head, .cert-print-foot { display: none; }

/* ---------- استجابة الأقسام ---------- */
@media (max-width: 1280px) {
  .home-trade__card, .trade-cta, .product-auth__card, .home-verify__card, .single-card { gap: 48px; padding: 48px; }
  .home-verify__copy, .home-verify__steps, .product-info, .product-gallery, .contact-card { width: 50%; }
  .sec-head { gap: 48px; }
  .grid-5 { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .home-trust { margin-top: 120px; }
}

@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .product-split { flex-direction: column; }
  .product-info, .product-gallery { width: 100%; }
}

@media (max-width: 860px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: 1fr; }
  .home-trust { margin-top: 64px; }
  .home-trade, .home-collections, .home-split, .home-verify, .home-cta,
  .sec-categories, .sec-filters, .sec-grid, .sec-trade-cta, .sec-models, .sec-journey,
  .sec-request, .sec-note, .sec-single, .sec-steps, .sec-fields, .sec-levels, .sec-privacy,
  .sec-chapters, .sec-values, .sec-story-cta, .sec-contact, .sec-contact-form, .sec-qa,
  .product-desc, .product-auth, .product-related, .sec-err-card { margin-top: 56px; }
  .home-trade__card, .trade-cta, .product-auth__card, .home-verify__card, .single-card,
  .request-form, .err-card, .qa-list { flex-direction: column; padding: 28px 20px; gap: 24px; }
  .home-trade__action, .sec-head__action, .trade-cta__action, .product-auth__action { width: 100%; margin-top: 0; }
  /* في الاتجاه العمودي يتحوّل flex-basis إلى ارتفاع — نلغيه */
  .home-trade__copy, .sec-head__copy, .trade-cta__copy, .product-auth__copy, .single-card__copy { flex: 0 1 auto; width: 100%; }
  .hero__coin img { margin-inline: auto; }
  .home-verify__copy, .home-verify__steps, .contact-card, .single-card__copy { width: 100%; }
  .sec-head { flex-direction: column; gap: 24px; }
  .cert-fields { grid-template-columns: 1fr; }
  .qa-list { padding: 8px 20px; }
  .err-code { font-size: 72px; }
  .sec-404 { margin-top: 56px; }
  .story-image { height: 220px; }
  .qr-well { width: 100%; max-width: 300px; margin-inline: auto; }
}

/* ---------- تأكيد إرسال الطلب ----------
   يحلّ محلّ النموذج بعد الإرسال: سطر صغير أسفل زر الإرسال يمرّ دون أن
   يلاحظه المرسِل، فيعيد المحاولة ظنًّا أن شيئًا لم يحدث. */
.request-sent {
  display: grid; justify-items: center; text-align: center;
  gap: 18px; padding: 64px 40px;
}
.request-sent__mark { color: var(--c-verified, #1E6B52); }
.request-sent__title { color: var(--c-verified, #1E6B52); }
.request-sent__body { max-width: 52ch; color: var(--c-muted); line-height: 1.85; }
.request-sent__ref {
  display: grid; gap: 6px; justify-items: center;
  background: var(--c-ice); border: 1px solid var(--c-line);
  border-radius: var(--r-tile); padding: 20px 32px; margin-top: 4px;
}
.request-sent__ref strong {
  font-size: 22px; font-weight: 700; letter-spacing: .04em;
  color: var(--c-navy-ink); font-family: ui-monospace, Consolas, monospace;
}
.request-sent__actions { margin-top: 8px; }

@media (max-width: 720px) {
  .request-sent { padding: 44px 22px; }
  .request-sent__ref { padding: 18px 22px; }
}

/* تأكيد فوري بعد نجاح التحقق (بوابة verify): شارة خضراء تنبض وعلامة صح
   ترتسم، ثم عنوان يظهر — كل ذلك قبل الانتقال تلقائيًا لصفحة الشهادة. */
.scan-ok { display: grid; justify-items: center; text-align: center; gap: 20px; padding: 72px 40px; }
/* التسلسل: الدائرة تُرسم (0–0.8ث) ← تمتلئ بالأخضر مع نبضة (0.8ث) ← علامة الصح
   تُرسم ببطء (1–1.7ث) ← العنوان ثم السطر تحته. المدة الكلية في verify.js (OK_MS). */
.scan-ok__badge { position: relative; width: 132px; height: 132px; }
.scan-ok__badge::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(30, 107, 82, .45); animation: scan-ok-pulse 1s ease-out .8s;
}
.scan-ok__badge svg { width: 100%; height: 100%; overflow: visible; }
.scan-ok__ring {
  stroke: var(--c-verified); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  transform: rotate(-90deg); transform-origin: center;
  animation: scan-ok-draw .8s cubic-bezier(.65, 0, .35, 1) forwards;
}
.scan-ok__fill {
  fill: var(--c-verified); transform: scale(0); transform-origin: center;
  animation: scan-ok-pop .45s cubic-bezier(.34, 1.56, .64, 1) .75s forwards;
}
.scan-ok__check {
  stroke: #fff; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: scan-ok-draw .7s cubic-bezier(.65, 0, .35, 1) 1s forwards;
}
.scan-ok__title, .scan-ok__body { opacity: 0; transform: translateY(8px); animation: scan-ok-title .45s ease-out forwards; }
.scan-ok__title { color: var(--c-verified); animation-delay: 1.6s; }
.scan-ok__body { color: var(--c-muted); max-width: 46ch; margin: 0; animation-delay: 1.85s; }

@keyframes scan-ok-draw { to { stroke-dashoffset: 0; } }
@keyframes scan-ok-pop { to { transform: scale(1); } }
@keyframes scan-ok-title { to { opacity: 1; transform: none; } }
@keyframes scan-ok-pulse { to { box-shadow: 0 0 0 26px rgba(30, 107, 82, 0); } }

@media (prefers-reduced-motion: reduce) {
  .scan-ok__badge::after, .scan-ok__ring, .scan-ok__fill, .scan-ok__check,
  .scan-ok__title, .scan-ok__body {
    animation: none !important; transform: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important;
  }
}

/* ---------- نماذج التصنيع: الاختيار والتعبئة ----------
   البطاقة زر: تختار النموذج وتنزل بالزائر إلى نموذج الطلب وقد تعبّأ بنوع
   المنتج والعيار والوزن، وظهرت صورة النموذج داخل الطلب. */
.model-card { position: relative; }
/* الاختيار عبر data-selected لا عبر className: انظر ModelCard في BespokeView */
.model-card[data-selected="true"] { border-color: var(--c-navy); box-shadow: 0 0 0 3px rgba(22, 38, 74, .10); }
.model-card__badge {
  position: absolute; top: 40px; inset-inline-start: 40px; z-index: 1;
  display: inline-flex; align-items: center; height: 28px; padding-inline: 12px;
  border-radius: var(--r-pill); background: var(--c-navy); color: #FFFFFF;
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
}

/* سطر توضيحي تحت أزرار نوع الطلب */
.type-hint { margin-top: 12px; color: var(--c-muted); }

/* القوائم المنسدلة: بنفس هيئة الحقول النصية وسهم في جهة النهاية */
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  padding-inline-end: 48px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2316264A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat; background-position: left 18px center; background-size: 14px;
}
.field select.is-empty { color: var(--c-muted); }
.field select option { color: var(--c-text); }

/* كتلة النموذج المختار داخل الطلب */
.model-pick__card {
  display: flex; align-items: center; gap: 20px; padding: 16px 20px;
  border: 1px solid var(--c-navy); border-radius: var(--r-input); background: var(--c-card);
}
.model-pick__img { width: 88px; height: 88px; flex: none; border-radius: var(--r-well); overflow: hidden; background: var(--c-ice); }
.model-pick__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.model-pick__img .well { height: 100%; }
.model-pick__copy { flex: 1; min-width: 0; display: grid; gap: 6px; }
.model-pick__copy strong { font-size: 15px; font-weight: 600; line-height: 1.5; }
.model-pick__copy .t-small { color: var(--c-muted); }
/* زرّا «تغيير النموذج» و«إزالة النموذج»: حبّتان متساويتان على سطر واحد
   (أحدهما رابط والآخر زر، فنوحّد الخط والارتفاع صراحةً) */
.model-pick__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; flex: none; }
.model-pick__actions .link-inline,
.model-pick__actions button.link-inline {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 16px;
  border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-card);
  font-size: 13px; font-weight: 600; line-height: 1; color: var(--c-navy);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
}
.model-pick__actions .link-inline::after { display: none; }
.model-pick__actions .link-inline:hover,
.model-pick__actions .link-inline:focus-visible { border-color: var(--c-navy); background: var(--c-ice); }
.model-pick__actions [data-rf-clear-model] { color: var(--c-muted); }
.model-pick__actions [data-rf-clear-model]:hover,
.model-pick__actions [data-rf-clear-model]:focus-visible { color: #8C3A2E; border-color: #8C3A2E; background: #FBF1EE; }
.model-pick__empty {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 56px; padding: 12px 20px; border: 1px dashed var(--c-line); border-radius: var(--r-input);
  background: var(--c-card); color: var(--c-muted); font-size: 13px; font-weight: 500; line-height: 1.6;
}
.model-pick__empty .link-inline { flex: none; }
/* الأزرار التي تبدو كروابط تأخذ خط الرابط نفسه لا خط المتصفح الافتراضي */
button.link-inline {
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--c-text); cursor: pointer;
}

/* زر إزالة الملف داخل منطقة الإفلات */
.dropzone { gap: 12px; }
.dropzone__clear {
  margin-inline-start: auto; flex: none; width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid var(--c-line); background: var(--c-card); color: var(--c-text);
  font-size: 16px; line-height: 1; cursor: pointer;
}
.dropzone__clear:hover { border-color: var(--c-navy); }

/* عند النزول إلى النموذج من البطاقة يبقى عنوانه تحت الهيدر الثابت */
.sec-request { scroll-margin-top: 96px; }

@media (max-width: 720px) {
  .model-pick__card { flex-direction: column; align-items: flex-start; }
  .model-pick__empty { flex-direction: column; align-items: flex-start; }
  .model-card__badge { top: 32px; inset-inline-start: 32px; }
}

/* --------------------------------------------------------------------------
   بوابة التحقق — الكاميرا داخل الإطار، ورسائلها، ونافذة «أين أجد الرمز؟»
   -------------------------------------------------------------------------- */

.viewfinder { overflow: hidden; }
.viewfinder__video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; background: #000;
}
.viewfinder__video[hidden] { display: none; }
.viewfinder.is-live::before { opacity: .9; }
.viewfinder__status {
  position: absolute; inset-inline: 16px; bottom: 14px; z-index: 2;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(3,29,64,.72); color: #fff; font-size: 12.5px; font-weight: 400; line-height: 1.5;
  backdrop-filter: blur(4px);
}
.viewfinder__status.is-warn { background: rgba(140,58,46,.9); }

.scan-msg {
  margin-top: 18px; padding: 14px 16px; border-radius: 12px; text-align: start;
  background: #FFFCF6; border: 1px solid #EAD9B4; color: #5A4A2A; font-size: 13.5px; line-height: 1.8;
}
.scan-msg__url { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.scan-msg__url a { color: var(--c-navy-ink); font-weight: 600; word-break: break-all; text-decoration: underline; text-underline-offset: 3px; }

.scan-msg__code { margin-top: 8px; font-size: 11.5px; color: #8A7A5A; font-family: ui-monospace, Consolas, monospace; text-align: left; }

.scan-cam { margin-top: 14px; display: flex; gap: 10px; align-items: center; justify-content: center; font-size: 13px; color: var(--c-muted); }
.scan-cam select { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--c-line); background: #fff; font: inherit; font-size: 13px; color: var(--c-navy-ink); max-width: min(320px, 70vw); }

.link-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.link-btn:hover { opacity: .8; }

/* النافذة */
.vmodal {
  box-sizing: border-box;
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(3,29,64,.55); backdrop-filter: blur(6px);
  animation: vmodal-in .25s var(--ease) both;
}
@keyframes vmodal-in { from { opacity: 0; } to { opacity: 1; } }
.vmodal__card {
  box-sizing: border-box;
  position: relative; flex: 0 1 720px; width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; max-height: calc(100dvh - 32px); overflow: auto;
  background: #fff; border-radius: 20px; padding: 34px 32px 28px; text-align: start;
  box-shadow: 0 30px 80px rgba(3,29,64,.35);
  animation: vmodal-card .32s var(--ease) both;
}
@keyframes vmodal-card { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }
.vmodal *, .vmodal *::before, .vmodal *::after { box-sizing: border-box; }
.vmodal__x {
  position: absolute; top: 14px; inset-inline-start: 14px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--c-line); background: #fff; color: var(--c-navy-ink); font-size: 22px; line-height: 1; cursor: pointer;
}
.vmodal__x:hover { background: var(--c-ice, #F1F6FF); }
.vmodal__title { margin: 0 44px 10px 0; }
.vmodal__body { color: var(--c-text-mut, #4B5563); line-height: 1.9; }

.vmodal__figure { margin: 22px 0 0; min-width: 0; }
.vmodal__stage { position: relative; border-radius: 14px; overflow: visible; border: 1px solid var(--c-line); background: #F7F9FD; }
.vmodal__stage img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 14px; }
.vmodal__pin {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: var(--c-navy-ink); color: #fff; border: 2px solid #fff; font-weight: 700; font-size: 13px; cursor: pointer;
  box-shadow: 0 0 0 6px rgba(22,38,74,.18); transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  animation: pin-pulse 2.2s ease-in-out infinite;
}
.vmodal__pin.is-active, .vmodal__pin:hover { transform: scale(1.15); box-shadow: 0 0 0 9px rgba(168,135,63,.28); background: #A8873F; animation: none; }
@keyframes pin-pulse { 0%, 100% { box-shadow: 0 0 0 6px rgba(22,38,74,.18); } 50% { box-shadow: 0 0 0 12px rgba(22,38,74,.06); } }
.vmodal__tip {
  position: absolute; z-index: 3; width: min(260px, 70%); margin-top: 20px; transform: translateX(-50%);
  background: #16264A; color: #fff; border-radius: 12px; padding: 10px 12px; font-size: 12.5px; line-height: 1.6;
  box-shadow: 0 12px 30px rgba(3,29,64,.3); pointer-events: none;
}
.vmodal__tip strong { display: block; margin-bottom: 3px; color: #F4D482; }
.vmodal__caption { margin-top: 10px; color: var(--c-text-mut, #6B7280); }

.vmodal__legend { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.vmodal__legend li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--c-line); cursor: pointer; transition: background .2s; }
.vmodal__legend li.is-active, .vmodal__legend li:hover { background: #F7F9FD; border-color: #C9D3E6; }
.vmodal__legend-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--c-navy-ink); color: #fff; font-size: 12px; font-weight: 700; }
.vmodal__legend strong { display: block; font-size: 14px; }
.vmodal__legend p { margin: 3px 0 0; font-size: 13px; line-height: 1.7; color: var(--c-text-mut, #4B5563); }

.vmodal__steps { margin-top: 24px; }
.vmodal__steps h3 { margin-bottom: 10px; }
.vmodal__steps ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.vmodal__steps li { display: flex; gap: 14px; align-items: flex-start; }
.vmodal__steps .t-number { flex: none; font-size: 18px; min-width: 34px; }
.vmodal__steps strong { display: block; font-size: 14px; }
.vmodal__steps p { margin: 3px 0 0; font-size: 13px; line-height: 1.7; color: var(--c-text-mut, #4B5563); }
.vmodal__note { margin-top: 20px; }
.vmodal__actions { margin-top: 22px; justify-content: center; }

/* على الجوال: العيار سطر والوزن سطر تحته. الفاصل «·» لا معنى له بينهما
   حين ينزل كلٌّ في سطره، فيختفي. */
@media (max-width: 640px) {
  .card-product__spec { display: block; }
  .card-product__spec > span { display: block; }
  /* أخص من القاعدة فوقها: محدِّد بصنف وعنصر يغلب محدِّدًا بصنف وحده */
  .card-product__spec > .card-product__spec-sep { display: none; }
}

@media (max-width: 640px) {
  .vmodal { padding: 0; align-items: flex-end; }
  .vmodal__card { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; padding: 26px 18px 22px; }
  .vmodal__tip { width: 80%; }
}

@media print {
  .vmodal, .scan-msg, .viewfinder__video { display: none !important; }
}

/* --------------------------------------------------------------------------
   صفحة المسكوكات — لوحة التصفية المجمّعة، بطاقات المجموعات، صفحة المجموعة
   -------------------------------------------------------------------------- */

.filter-panel { padding: 24px 28px 22px; border-radius: var(--r-tile); }
.filter-panel__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-bottom: 16px; border-bottom: 1px solid var(--c-line); }
.filter-panel__title { margin: 0; }
.filter-panel__tools { display: flex; align-items: center; gap: 14px; }
.filter-panel__count { font-size: 13px; color: var(--c-muted); }
.filter-panel__reset {
  background: none; border: 1px solid var(--c-line); border-radius: var(--r-pill); height: 34px; padding-inline: 14px;
  font: inherit; font-size: 12.5px; color: var(--c-navy-ink); cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.filter-panel__reset:hover { border-color: var(--c-navy); background: var(--c-ice); }

.filter-groups { display: grid; grid-template-columns: 1fr; gap: 16px 32px; margin-top: 18px; }
.filter-group { display: grid; grid-template-columns: 96px 1fr; align-items: start; gap: 8px 16px; }
.filter-group__label { font-size: 12.5px; font-weight: 600; color: var(--c-muted); padding-top: 11px; letter-spacing: .01em; }
.filter-group__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-group__chips .chip { height: 38px; padding-inline: 16px; }
.filter-group--select { align-items: center; }
.filter-group--select .filter-group__label { padding-top: 0; }
.filter-select {
  height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--c-line); background: var(--c-card);
  font: inherit; font-size: 13.5px; color: var(--c-text); max-width: 360px; width: 100%; cursor: pointer;
}
.filter-select:focus { outline: 2px solid var(--c-navy); outline-offset: 2px; }
.sec-grid__empty-box { margin-top: 24px; display: grid; justify-items: center; gap: 14px; }

/* بطاقات المجموعات */
.sec-groups { margin-top: 80px; }
.groups-grid { margin-top: 32px; }
.group-card { padding: 20px; }
.group-card .well { aspect-ratio: 3 / 2; height: auto; }
.group-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 18px; }
.group-card__name { margin: 0; }
.group-card__badge { height: 26px; padding-inline: 10px; font-size: 11.5px; border-color: var(--c-gold, #A8873F); color: var(--c-gold, #A8873F); }
.group-card__count { margin-top: 6px; color: var(--c-muted); }
.group-card__desc { margin-top: 10px; color: var(--c-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.group-card .card-collection__link { margin-top: 16px; }

/* صفحة المجموعة */
.collection-hero { margin-top: 24px; }
.crumbs { display: flex; gap: 10px; align-items: center; color: var(--c-muted); }
.crumbs a { color: var(--c-navy-ink); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.collection-hero__card { margin-top: 18px; display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; padding: 40px; }
.collection-hero__desc { margin-top: 16px; }
.collection-hero__count { margin-top: 14px; color: var(--c-muted); }
.collection-hero__copy .chip--static { margin-top: 14px; }
.collection-hero__actions { margin-top: 24px; }
.collection-hero__media { border-radius: var(--r-tile); overflow: hidden; background: var(--c-ice); aspect-ratio: 3 / 2; }
.collection-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collection-hero__media picture, .collection-hero__media picture img { height: 100%; }

@media (max-width: 860px) {
  .filter-group { grid-template-columns: 1fr; gap: 6px; }
  .filter-group__label { padding-top: 0; }
  .collection-hero__card { grid-template-columns: 1fr; padding: 24px; }
  .collection-hero__media { order: -1; }
}

/* --------------------------------------------------------------------------
   شريط التصفية المنسدل، ترقيم الأقسام، شرائط المجموعات، صفحات «عرض الكل»
   -------------------------------------------------------------------------- */

.fbar-card { overflow: visible; }
.fbar { position: relative; padding: 16px 22px; }
.fbar__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.fbar__title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13.5px; color: var(--c-navy-ink); }
.fbar__pills { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 auto; }
.fbar__item { position: relative; }
.fbar__pill {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 12px;
  border-radius: var(--r-pill); border: 1px solid var(--c-line); background: var(--c-card);
  font: inherit; font-size: 13px; font-weight: 500; color: var(--c-text); cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.fbar__pill:hover, .fbar__pill.is-open { border-color: var(--c-navy); }
.fbar__pill.is-active { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.fbar__badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; background: var(--c-gold, #A8873F); color: #fff; font-size: 11px; font-weight: 700; }
.fbar__caret { opacity: .7; transition: transform .2s var(--ease); }
.fbar__pill.is-open .fbar__caret { transform: rotate(180deg); }
.fbar__pop {
  position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 30; min-width: 240px; max-width: 320px;
  background: #fff; border: 1px solid var(--c-line); border-radius: 14px; box-shadow: 0 18px 50px rgba(3,29,64,.16);
  padding: 8px; animation: fbar-pop .18s var(--ease);
}
@keyframes fbar-pop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.fbar__pop-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 8px; font-size: 12px; color: var(--c-muted); border-bottom: 1px solid var(--c-line); margin-bottom: 6px; }
.fbar__opts { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow: auto; }
.fbar__opt {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 0; border-radius: 10px;
  background: none; font: inherit; font-size: 13.5px; color: var(--c-text); cursor: pointer; text-align: start;
}
.fbar__opt:hover { background: var(--c-ice); }
.fbar__check { flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #B9C4D8; background: #fff; position: relative; }
.fbar__opt.is-on .fbar__check { background: var(--c-navy); border-color: var(--c-navy); }
.fbar__opt.is-on .fbar__check::after { content: ""; position: absolute; inset: 4px 5px 6px 5px; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.fbar__opt-label { flex: 1; }
.fbar__opt-count { font-size: 12px; color: var(--c-muted); }
.fbar__count { font-size: 13px; color: var(--c-muted); white-space: nowrap; }
.fbar__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--c-line); }
.fbar__tag {
  display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: var(--r-pill);
  background: var(--c-ice); border: 1px solid transparent; font: inherit; font-size: 12.5px; color: var(--c-navy-ink); cursor: pointer;
}
.fbar__tag:hover { border-color: var(--c-navy); }
.fbar__tag span { font-size: 15px; line-height: 1; opacity: .7; }
.fbar__link { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--c-navy-ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fbar__reset { margin-inline-start: auto; }

/* ترقيم الأقسام */
.pager { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pager__arrow {
  display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px; border-radius: var(--r-pill);
  border: 1px solid var(--c-line); background: var(--c-card); font: inherit; font-size: 12.5px; color: var(--c-text); cursor: pointer;
}
.pager__arrow:hover { border-color: var(--c-navy); }
.pager__arrow:disabled { opacity: .35; cursor: default; border-color: var(--c-line); }
.pager__pages { display: flex; gap: 6px; }
.pager__page {
  min-width: 38px; height: 38px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--c-line);
  background: var(--c-card); font: inherit; font-size: 13px; color: var(--c-text); cursor: pointer;
}
.pager__page:hover { border-color: var(--c-navy); }
.pager__page.is-current { background: var(--c-navy); border-color: var(--c-navy); color: #fff; }
.pager__gap { display: inline-flex; align-items: center; color: var(--c-muted); padding: 0 2px; }
.pager--compact .pager__arrow, .pager--compact .pager__page { height: 34px; min-width: 34px; padding: 0 10px; }
.pager--compact .pager__arrow { padding: 0 9px; }

/* رأس قسم بترقيم ورابط «عرض الكل» */
.sec-head--paged { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.sec-head__tools { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sec-head__all { font-size: 13.5px; font-weight: 600; color: var(--c-navy-ink); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.sec-head__all:hover { opacity: .8; }
.sec-foot { display: flex; justify-content: center; margin-top: 28px; }

/* شرائط المجموعات — تصميم مختلف عن صناديق الفئات */
.groups-list { display: grid; gap: 18px; margin-top: 32px; }
.group-banner {
  display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center; padding: 18px;
  position: relative; overflow: hidden;
}
.group-banner__media { aspect-ratio: 3 / 2; border-radius: var(--r-tile); overflow: hidden; background: var(--c-ice); }
.group-banner__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--ease); }
.group-banner:hover .group-banner__media img { transform: scale(1.04); }
.group-banner__copy { display: grid; gap: 8px; padding-inline-end: 12px; }
.group-banner__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.group-banner__name { margin: 0; }
.group-banner__count { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 99px; background: var(--c-ice); color: var(--c-navy-ink); font-size: 12.5px; font-weight: 600; }
.group-banner__badge { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--c-gold, #A8873F); color: var(--c-gold, #A8873F); font-size: 12px; font-weight: 600; }
.group-banner__desc { color: var(--c-muted); font-size: 14px; line-height: 1.8; margin: 0; }
.group-banner__link { margin-top: 6px; }
.group-banner__num { position: absolute; top: 14px; inset-inline-end: 18px; font-size: 40px; font-weight: 200; color: var(--c-line); line-height: 1; pointer-events: none; }

/* صفحات عرض الكل */
.all-page { margin-top: 8px; }
.all-page__grid { margin-top: 36px; }

@media (max-width: 860px) {
  .fbar { padding: 14px 16px; }
  .fbar__title { width: 100%; }
  .fbar__count { width: 100%; }
  .fbar__pop { inset-inline: 0; max-width: none; }
  .group-banner { grid-template-columns: 1fr; gap: 16px; }
  .group-banner__num { display: none; }
  .sec-head--paged { align-items: flex-start; }
}