/* =========================================================================
   المتجر — «كتالوج المواصفات»
   الفكرة: هذا ليس متجرًا استهلاكيًا بل كتالوج أصناف بأكواد ومساحات ومدد
   تسليم. الهيرو مخطط أرضية معرض يعمل كفهرس تصنيفات، والشبكة تُقرأ كأجنحة
   بمساحات مختلفة. كل عنصر ترقيمي يحمل معلومة (تصنيف + موضع) لا زخرفة.
   ========================================================================= */

/* =======================================================================
   الهيرو — مخطط الأرضية
   ======================================================================= */
.st-hero{
  position:relative;
  padding-block:56px 44px;
  border-block-end:1px solid var(--line);
  overflow:hidden;
}
.st-hero::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background-image:
    linear-gradient(rgba(21,24,27,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,24,27,.055) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(ellipse 76% 82% at 68% 40%,#000,transparent 74%);
          mask-image:radial-gradient(ellipse 76% 82% at 68% 40%,#000,transparent 74%);
}
html[dir="rtl"] .st-hero::before{
  -webkit-mask-image:radial-gradient(ellipse 76% 82% at 32% 40%,#000,transparent 74%);
          mask-image:radial-gradient(ellipse 76% 82% at 32% 40%,#000,transparent 74%);
}

.st-hero-inner{
  display:grid;
  grid-template-columns:1fr 1.02fr;
  gap:60px;
  align-items:center;
}

/* ---------- النص ---------- */
.st-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11.5px;
  color:var(--green-dark);
  margin-block-end:22px;
}
html[dir="rtl"] .st-eyebrow{font-size:12.5px;}
.st-eyebrow .rule{width:38px;height:1px;background:var(--green);opacity:.55;}

.st-hero h1{
  font-size:clamp(34px,4.6vw,56px);
  line-height:1.04;
  margin-block-end:20px;
}
html[dir="rtl"] .st-hero h1{line-height:1.26;}
.st-hero h1 em{
  font-style:normal;
  color:var(--violet);
}

.st-lead{
  font-size:16px;line-height:1.8;color:var(--muted);
  max-width:44ch;margin-block-end:30px;
}

/* شريط بيانات الكتالوج — يقرأ كترويسة مستند */
.st-meta{
  display:flex;flex-wrap:wrap;
  border:1px solid var(--line);
  border-radius:12px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(6px);
  overflow:hidden;
}
.st-meta div{
  flex:1;min-width:112px;
  padding:14px 18px;
  border-inline-end:1px solid var(--line);
}
.st-meta div:last-child{border-inline-end:none;}
.st-meta dt{
  font-family:var(--font-mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.08em;
  color:var(--faint);margin:0 0 6px;
}
html[dir="rtl"] .st-meta dt{font-size:11px;text-transform:none;letter-spacing:0;}
.st-meta dd{
  margin:0;font-family:var(--font-display);font-weight:800;
  font-size:17px;direction:ltr;
}
html[dir="rtl"] .st-meta dd{text-align:start;}

/* ---------- مخطط الأرضية ---------- */
.st-plan{
  position:relative;
  border:1px solid rgba(21,24,27,.16);
  border-radius:14px;
  background:#fff;
  padding:14px;
  box-shadow:0 30px 60px -38px rgba(21,24,27,.45);
}
.st-plan-head{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:10px;
  color:var(--faint);
  padding:0 4px 12px;
  border-block-end:1px dashed var(--line);
  margin-block-end:14px;
}
html[dir="rtl"] .st-plan-head{font-size:11.5px;}

.st-plan-grid{display:flex;flex-direction:column;gap:10px;}
.st-plan-row{display:flex;gap:10px;}

/* كل كتلة = تصنيف، وعرضها يتناسب مع عدد أصنافه */
.st-block{
  position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:96px;padding:14px;
  border:1px solid rgba(21,24,27,.14);
  border-radius:9px;
  background:var(--green-soft);
  text-decoration:none;color:var(--ink);
  overflow:hidden;
  transition:background .25s, border-color .25s, transform .25s cubic-bezier(.16,1,.3,1);
}
.st-block::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(47,143,94,.16),transparent 62%);
  opacity:0;transition:opacity .25s;
}
.st-block:hover,
.st-block.is-linked{
  border-color:var(--green-dark);
  transform:translateY(-2px);
}
.st-block:hover::after,.st-block.is-linked::after{opacity:1;}
.st-block:focus-visible{outline:2px solid var(--green-dark);outline-offset:2px;}

.st-block.is-active{
  background:var(--ink);color:var(--paper);border-color:var(--ink);
}
.st-block.is-active .st-block-n,
.st-block.is-active .st-block-from{color:rgba(251,250,247,.62);}

.st-block-code{
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.1em;color:var(--green-dark);
  position:relative;
}
.st-block.is-active .st-block-code{color:#7fd3a5;}
.st-block-name{
  font-family:var(--font-display);font-weight:700;
  font-size:14px;line-height:1.35;margin-block:8px 0;position:relative;
}
.st-block-n{
  font-family:var(--font-mono);font-size:10.5px;color:var(--muted);
  margin-block-start:6px;position:relative;direction:ltr;
}
html[dir="rtl"] .st-block-n,
html[dir="rtl"] .st-block-code{font-size:11.5px;letter-spacing:0;}

/* الكتلة الأولى تحمل «كل الأصناف» */
.st-block-all{background:#fff;}

/* رسم الحدود الخارجية كأنها حدود صالة */
.st-plan-frame{
  position:absolute;inset:6px;
  border:1px dashed rgba(21,24,27,.14);
  border-radius:10px;
  pointer-events:none;
}

/* =======================================================================
   شريط الترشيح
   ======================================================================= */
.st-bar{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  padding-block:22px;
  border-block-end:1px solid var(--line);
  margin-block-end:34px;
}
.st-kinds{display:flex;gap:8px;flex-wrap:wrap;}
.st-kind{
  font-family:var(--font-mono);font-size:11.5px;
  padding:9px 15px;border-radius:100px;
  border:1px solid var(--line);background:#fff;
  color:var(--muted);text-decoration:none;
  transition:border-color .2s,color .2s,background .2s;
}
html[dir="rtl"] .st-kind{font-size:12.5px;}
.st-kind:hover{border-color:var(--ink);color:var(--ink);}
.st-kind.is-on{background:var(--ink);border-color:var(--ink);color:#fff;}
.st-count{font-family:var(--font-mono);font-size:11.5px;color:var(--faint);direction:ltr;}
html[dir="rtl"] .st-count{font-size:12.5px;}

/* =======================================================================
   الشبكة — أجنحة بمساحات مختلفة
   ======================================================================= */
.st-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:20px;
}
.st-item{grid-column:span 2;}          /* المقاس القياسي */
.st-item.is-wide{grid-column:span 3;}  /* جناح مضاعف */
.st-item.is-hero{grid-column:span 4;}  /* الجناح الرئيسي */

/* ---------- بطاقة الصنف ---------- */
.st-card{
  position:relative;
  display:flex;flex-direction:column;height:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .3s, box-shadow .3s, transform .3s cubic-bezier(.16,1,.3,1);
}
.st-card:hover{
  border-color:rgba(21,24,27,.26);
  box-shadow:0 30px 54px -32px rgba(21,24,27,.4);
  transform:translateY(-4px);
}

/* الغلاف */
.st-cover{position:relative;aspect-ratio:5/2;overflow:hidden;background:var(--ink);}
.is-hero .st-cover{aspect-ratio:24/9;}
.st-cover img,.st-cover .gen-cover{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.st-card:hover .st-cover img,
.st-card:hover .st-cover .gen-cover{transform:scale(1.05);}

/* رمز الصنف — أعلى الغلاف */
.st-code{
  position:absolute;z-index:2;
  inset-block-start:12px;inset-inline-start:12px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  padding:6px 11px;border-radius:6px;
  background:rgba(251,250,247,.94);color:var(--ink);
  direction:ltr;
}
.st-flag{
  position:absolute;z-index:2;
  inset-block-start:12px;inset-inline-end:12px;
  font-family:var(--font-mono);font-size:10.5px;
  padding:6px 11px;border-radius:6px;
  background:var(--coral);color:#fff;direction:ltr;
}
html[dir="rtl"] .st-code,html[dir="rtl"] .st-flag{font-size:11.5px;letter-spacing:0;}

/* شريط المواصفة أسفل الغلاف */
.st-spec{
  position:absolute;z-index:2;inset-block-end:0;inset-inline:0;
  display:flex;justify-content:space-between;gap:10px;
  padding:10px 14px;
  font-family:var(--font-mono);font-size:10.5px;
  color:#fff;
  background:linear-gradient(to top,rgba(10,12,14,.72),transparent);
}
html[dir="rtl"] .st-spec{font-size:11.5px;}

/* الجسم */
.st-body{padding:20px;display:flex;flex-direction:column;flex:1;}
.is-hero .st-body{padding:26px 26px 24px;}

.st-cat{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--faint);margin-block-end:10px;
}
html[dir="rtl"] .st-cat{font-size:11.5px;letter-spacing:0;text-transform:none;}

.st-card h3{font-size:16.5px;line-height:1.42;margin-block-end:9px;}
.is-hero .st-card h3{font-size:23px;}
.st-card h3 a{text-decoration:none;}
.st-card h3 a::after{content:"";position:absolute;inset:0;}  /* البطاقة كلها قابلة للنقر */
.st-card h3 a:hover{color:var(--green-dark);}

.st-card p{
  font-size:13.5px;line-height:1.68;color:var(--muted);margin:0 0 16px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.is-hero .st-card p{font-size:14.5px;-webkit-line-clamp:3;}

/* نقاط ما تشمله — للجناح الرئيسي فقط */
.st-incl{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:7px;}
.st-incl li{
  font-size:12.5px;color:var(--muted);line-height:1.5;
  display:flex;gap:9px;align-items:flex-start;
}
.st-incl li::before{
  content:"";flex-shrink:0;width:12px;height:1px;
  background:var(--green);margin-block-start:9px;
}

/* تذييل السعر */
.st-foot{
  margin-block-start:auto;padding-block-start:16px;
  border-block-start:1px solid var(--line);
  display:flex;align-items:flex-end;justify-content:space-between;gap:14px;
}
.st-price .lbl{
  display:block;font-family:var(--font-mono);font-size:9.5px;
  text-transform:uppercase;letter-spacing:.07em;color:var(--faint);margin-block-end:5px;
}
html[dir="rtl"] .st-price .lbl{font-size:11px;letter-spacing:0;text-transform:none;}
.st-price .amt{
  font-family:var(--font-mono);font-weight:500;font-size:19px;
  direction:ltr;display:block;letter-spacing:-.02em;
}
.is-hero .st-price .amt{font-size:25px;}
.st-price .was{
  font-family:var(--font-mono);font-size:12px;color:var(--faint);
  text-decoration:line-through;direction:ltr;margin-inline-start:8px;
}

/* زر الإضافة — أيقونة تتمدّد عند المرور */
.st-add{
  position:relative;z-index:3;
  display:inline-flex;align-items:center;gap:0;
  background:var(--ink);color:#fff;border:none;cursor:pointer;
  font-family:var(--font-body);font-size:13px;font-weight:600;
  padding:12px 14px;border-radius:9px;
  white-space:nowrap;overflow:hidden;
  transition:gap .3s cubic-bezier(.16,1,.3,1), background .25s;
}
.st-add .txt{
  max-width:0;opacity:0;overflow:hidden;
  transition:max-width .35s cubic-bezier(.16,1,.3,1), opacity .25s;
}
.st-card:hover .st-add{gap:8px;background:var(--green);}
.st-card:hover .st-add .txt{max-width:140px;opacity:1;}
.st-add:focus-visible{outline:2px solid var(--green-dark);outline-offset:2px;}
.st-add .ico{font-size:15px;line-height:1;}

/* الجناح الرئيسي داكن ليقود الصفحة */
.st-item.is-hero .st-card{background:var(--ink);border-color:transparent;}
.st-item.is-hero .st-card h3{color:#fff;}
.st-item.is-hero .st-card p,
.st-item.is-hero .st-incl li{color:rgba(251,250,247,.66);}
.st-item.is-hero .st-cat{color:rgba(251,250,247,.42);}
.st-item.is-hero .st-foot{border-block-start-color:rgba(251,250,247,.16);}
.st-item.is-hero .st-price .lbl{color:rgba(251,250,247,.45);}
.st-item.is-hero .st-price .amt{color:#fff;}
.st-item.is-hero .st-add{background:var(--paper);color:var(--ink);}
.st-item.is-hero .st-card:hover .st-add{background:#fff;}

/* =======================================================================
   صفحة الصنف
   ======================================================================= */
.st-detail-cover{
  position:relative;
  border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line);margin-block-end:30px;
}
.st-detail-cover img,.st-detail-cover .gen-cover{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
}

/* =======================================================================
   ظهور متدرّج عند التحميل
   ======================================================================= */
html.js .st-block,
html.js .st-item{
  opacity:0;transform:translateY(14px);
  animation:stIn .7s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes stIn{to{opacity:1;transform:translateY(0);}}

/* =======================================================================
   الاستجابة
   ======================================================================= */
@media(max-width:1060px){
  .st-hero-inner{grid-template-columns:1fr;gap:40px;}
  .st-plan{max-width:560px;}
  .st-grid{grid-template-columns:repeat(4,1fr);}
  .st-item.is-hero,.st-item.is-wide{grid-column:span 4;}
  .st-item{grid-column:span 2;}
  .is-hero .st-cover{aspect-ratio:12/5;}
}
@media(max-width:760px){
  .st-hero{padding-block:34px 30px;}
  .st-lead{font-size:15px;}
  .st-meta div{min-width:50%;border-block-end:1px solid var(--line);}
  .st-plan-row{flex-wrap:wrap;}
  .st-block{min-width:calc(50% - 5px);}
  .st-grid{grid-template-columns:1fr;gap:16px;}
  .st-item,.st-item.is-wide,.st-item.is-hero{grid-column:span 1;}
  .is-hero .st-cover{aspect-ratio:2/1;}
  .is-hero .st-card h3{font-size:19px;}
  .st-bar{padding-block:18px;margin-block-end:24px;}
  /* على اللمس لا يوجد مرور، فيظهر نص الزر دائمًا */
  .st-add{gap:8px;}
  .st-add .txt{max-width:140px;opacity:1;}
}

@media(prefers-reduced-motion:reduce){
  html.js .st-block,html.js .st-item{animation:none;opacity:1;transform:none;}
  .st-card,.st-cover img,.st-cover .gen-cover,.st-add,.st-add .txt,.st-block{transition:none;}
}