@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;600;700&display=swap");
html[lang="ar"]{direction:rtl}
html[lang="en"]{direction:ltr}
html[lang="ar"],html[lang="ar"] body,html[lang="ar"] .font-brand,html[lang="ar"] *{
  font-family:Tahoma,"IBM Plex Sans Arabic","Noto Naskh Arabic",sans-serif!important;
  letter-spacing:0!important;word-spacing:normal!important;
}
.font-brand{letter-spacing:0}
.text-ink{color:var(--color-text,#1c1917)}
.text-primary{color:var(--color-primary,#e11d48)}
.duration-brand,.transition-all{transition:all .2s ease}
.fixed{position:fixed}
.absolute{position:absolute}
.relative{position:relative}
.inset-0{inset:0}
.inset-x-0{left:0;right:0}
.top-0{top:0}
.z-10{z-index:10}
.z-50{z-index:50}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-3{margin-top:.75rem}
.mt-4{margin-top:1rem}
.mt-8{margin-top:2rem}
.mb-6{margin-bottom:1.5rem}
.flex{display:flex}
.grid{display:grid}
.hidden{display:none}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.justify-between{justify-content:space-between}
.gap-2{gap:.5rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.w-full{width:100%}
.w-9{width:2.25rem}
.h-9{height:2.25rem}
.min-w-0{min-width:0}
.min-h-screen{min-height:100vh}
.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-6xl{max-width:72rem}
.px-3{padding-left:.75rem;padding-right:.75rem}
.px-4{padding-left:1rem;padding-right:1rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}
.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-14{padding-top:3.5rem;padding-bottom:3.5rem}
.pb-24{padding-bottom:6rem}
.pt-32{padding-top:8rem}
.overflow-hidden{overflow:hidden}
.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.shrink-0{flex-shrink:0}
.rounded-brand{border-radius:var(--radius,12px)}
.object-contain{object-fit:contain}
.bg-cover{background-size:cover}
.bg-center{background-position:center}
.text-white{color:#fff}
.text-xs{font-size:.75rem}
.text-sm{font-size:.875rem}
.text-lg{font-size:1.125rem}
.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem;font-weight:700}
.opacity-95{opacity:.95}
.opacity-85{opacity:.85}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:768px){
.md\:flex{display:flex}
.md\:hidden{display:none}
.md\:text-2xl{font-size:1.5rem}
.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1024px){
.lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
}
section.relative.flex{min-height:100svh}
section.relative.flex>.absolute.inset-0[style]{
  background-image:linear-gradient(160deg,#3f0a1a 0%,#881337 42%,#9f1239 100%)!important;
  background-size:cover;
}
section.relative.flex>.absolute.inset-0:not([style]){
  background:rgba(12,8,10,.58)!important;
}
section.relative.flex h1{
  font-size:clamp(2.5rem,6vw,4.5rem)!important;
  font-weight:700;line-height:1.08;color:#fff;
}
header.fixed{
  backdrop-filter:blur(16px);
  background:rgba(12,8,10,.55)!important;
}
header.fixed .text-ink,header.fixed a,header.fixed .btn-ghost{
  color:#fff!important;border-color:rgba(255,255,255,.4);
}
header nav a:hover{text-decoration:underline}
.btn{background:var(--color-primary,#e11d48)!important;color:#fff!important}
.btn-ghost{background:transparent!important;color:#fff!important;border:1px solid rgba(255,255,255,.45)!important}
.stagger.grid>a,.stagger.grid>article,.stagger.grid>div{
  display:block;border-radius:var(--radius,12px);
  background:#fff;
  border:1px solid rgba(28,25,23,.1);
  box-shadow:0 10px 30px rgba(28,25,23,.08);
  overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;
}
.stagger.grid>a:hover,.stagger.grid>article:hover{
  transform:translateY(-4px);box-shadow:0 16px 36px rgba(28,25,23,.14);
}
.stagger.grid:empty{
  min-height:10rem;place-items:center;
  border:1px dashed rgba(28,25,23,.18);
  border-radius:var(--radius,12px);
}
.stagger.grid:empty:after{
  content:"أضف منتجات من لوحة التحكم — Add products in the dashboard";
  padding:1.5rem;opacity:.7;text-align:center;
}