/* ===== قالب «العرض» (Showcase) — 4 نوفمبر =====
   كل القواعد تحت html[data-template="showcase"] (بيحطه applyTheme) — قالب classic ماليهوش علاقة بالملف ده أبداً.
   الأسلوب: خلفية فيها شبكة خفيفة وتدرّجات من لون الثيم · لون التمييز القوي (--primary → --accent) تحت العناوين وعلى الحدود وقت الـhover · كروت مدوّرة أكتر · رفعة وقت المرور.
   ألوان الثيم بس (متغيّرات): بيشتغل مع أي preset غامق أو فاتح. الحركة (الرفعة) مقفولة على html[data-motion="full"]. ملف polish.css بعده دايماً. */
html[data-template="showcase"] {
  --sc-line: color-mix(in srgb, var(--text) 11%, transparent);
  --sc-bar: linear-gradient(90deg, var(--primary), var(--accent));
  --sc-r: calc(var(--radius, 16px) * 1.25);
}
html[data-template="showcase"][data-scheme="light"] { --sc-line: color-mix(in srgb, var(--text) 9%, transparent); }

/* خلفية: توهّج خفيف من لون الثيم بس. الخلفية المتحركة (شبكة · جسيمات · …) من «الحركة ← الخلفية» — مفيش رسم ثابت هنا عشان الموزّع يقدر يشيله */
html[data-template="showcase"] body::before {
  background:
    radial-gradient(900px 520px at 85% -8%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 70%),
    radial-gradient(760px 440px at 5% 6%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, black, transparent 78%);
  mask-image: linear-gradient(180deg, black, transparent 78%);
}
html[data-template="showcase"][data-scheme="light"] body::before {
  background:
    radial-gradient(900px 520px at 85% -8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
    radial-gradient(760px 440px at 5% 6%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 70%);
}

/* الهيدر: خط تمييز رفيع تحته، وروابط التنقل مربعات مدوّرة بخط تحت للحالي */
html[data-template="showcase"] .site-header { background: color-mix(in srgb, var(--bg) 72%, transparent); border-block-end-color: var(--sc-line); }
html[data-template="showcase"] .site-header::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: -1px; block-size: 1px; background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); opacity: .55; pointer-events: none; }
html[data-template="showcase"] .nav-link { border-radius: calc(var(--sc-r) * .7); }
html[data-template="showcase"] .nav-link[aria-current="page"] { background: var(--pri-bg); box-shadow: inset 0 -2px 0 var(--accent); }
html[data-template="showcase"] .site-footer { border-block-start-color: transparent; position: relative; }
html[data-template="showcase"] .site-footer::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 1px; background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent); opacity: .5; }

/* الهيرو الافتراضي كلوحة مدوّرة فيها توهّج + هيرو الوسائط بنفس الحدّ */
html[data-template="showcase"] .hero { position: relative; isolation: isolate; margin-block-start: 10px; padding-inline: clamp(16px, 3.4vw, 40px); border: 1px solid var(--sc-line); border-radius: calc(var(--sc-r) * 1.3); background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 78%, transparent), color-mix(in srgb, var(--surface) 30%, transparent)); overflow: hidden; }
html[data-template="showcase"] .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 90% at 78% 12%, color-mix(in srgb, var(--primary) 26%, transparent), transparent 70%), radial-gradient(46% 70% at 8% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); pointer-events: none; }
html[data-template="showcase"] .hero-title { font-weight: 800; }
html[data-template="showcase"] .eyebrow { border-radius: calc(var(--sc-r) * .6); }
html[data-template="showcase"] .hero-media { border-radius: calc(var(--sc-r) * 1.3); border-color: var(--sc-line); box-shadow: var(--shadow-2); }

/* عناوين الأقسام: شريط تمييز قصير تحت العنوان */
html[data-template="showcase"] .sf-title,
html[data-template="showcase"] .cat-head h2 { position: relative; padding-block-end: 9px; font-weight: 800; }
html[data-template="showcase"] .sf-title::after,
html[data-template="showcase"] .cat-head h2::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: 38px; block-size: 3px; border-radius: 3px; background: var(--sc-bar); }
html[data-template="showcase"] .sf-title { font-size: 22px; }
html[data-template="showcase"] .cat-head { align-items: flex-end; }
html[data-template="showcase"] .cat-head .line { margin-block-end: 8px; }
html[data-template="showcase"] .contact-head h2 { font-weight: 800; }

/* كروت المنتجات: أكبر تدويراً، حدّ هادي، وقت المرور حدّ تمييز + رفعة */
html[data-template="showcase"] .pcard { border-radius: var(--sc-r); border-color: var(--sc-line); background: color-mix(in srgb, var(--surface) 86%, transparent); box-shadow: var(--shadow-1); }
html[data-template="showcase"] .pcard:hover, html[data-template="showcase"] .pcard:focus-visible { border-color: color-mix(in srgb, var(--primary) 70%, var(--sc-line)); box-shadow: 0 18px 40px -22px var(--primary); }
html[data-template="showcase"][data-motion="full"] .pcard:hover { transform: translateY(-4px); }
html[data-template="showcase"] .pcard-name { font-weight: 700; }
html[data-template="showcase"] .price-from b { color: var(--text); }
html[data-template="showcase"] .filter-chip { border-radius: calc(var(--sc-r) * .7); }
html[data-template="showcase"] .toolbar .input { border-radius: calc(var(--sc-r) * .8); }
html[data-template="showcase"] .contact-sec { border-radius: calc(var(--sc-r) * 1.2); border-color: var(--sc-line); }
html[data-template="showcase"] .contact-card { border-radius: var(--sc-r); }

/* أقسام الصفحة بالأسلوب ده */
html[data-template="showcase"] .sf-pay { border-radius: calc(var(--sc-r) * 1.1); border-color: var(--sc-line); background: color-mix(in srgb, var(--surface) 70%, transparent); }
html[data-template="showcase"] .sf-pay .sf-title { padding: 0; font-size: 13.5px; font-weight: 700; }
html[data-template="showcase"] .sf-pay .sf-title::after { display: none; }
html[data-template="showcase"] .sf-pay-chip { border-radius: calc(var(--sc-r) * .65); }
html[data-template="showcase"] .sf-cat { border-radius: var(--sc-r); border-color: var(--sc-line); }
html[data-template="showcase"] .sf-why-card { border-radius: var(--sc-r); border-color: var(--sc-line); background: color-mix(in srgb, var(--surface) 82%, transparent); position: relative; overflow: hidden; }
html[data-template="showcase"] .sf-why-card::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 2px; background: var(--sc-bar); opacity: .7; }
html[data-template="showcase"] .sf-why-ic { border-radius: calc(var(--sc-r) * .7); }
html[data-template="showcase"][data-motion="full"] .sf-why-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary) 60%, var(--sc-line)); }
html[data-template="showcase"] .sf-why-card { transition: transform var(--t), border-color var(--t); }
html[data-template="showcase"] .sf-promo { border-radius: calc(var(--sc-r) * 1.1); border-color: var(--sc-line); }

@media (max-width: 520px) {
  html[data-template="showcase"] { --sc-r: calc(var(--radius, 16px) * 1.1); }
  html[data-template="showcase"] .hero { padding-inline: 14px; }
  html[data-template="showcase"] .sf-title { font-size: 19px; }
}