/* ===== Mint Edge — Light/Dark RTL ===== */
:root{
  --bg:#0e1116; --surface:#131823; --card:#161c29; --text:#ff0000a1; --muted:#9eb0c6;
  --mint:#d33434; --mint-2:#960505; --accent:#60a5fa; --accent-2:#7c3aed;
  --border:rgba(255,255,255,.10); --radius:16px; --shadow:0 12px 28px rgba(0,0,0,.28);
}

/* Light override */
[data-theme="light"] body{ background:#f7f9fc; color:#0e1424 }
[data-theme="light"] .navbar, [data-theme="light"] .footer{ background:#ffffff; border-color:#e8edf5; box-shadow:0 6px 18px rgba(28,53,90,.08) }
[data-theme="light"] .hero.mint{ background:linear-gradient(180deg,#f1f6ff, #ffffff) }
[data-theme="light"] .hero-card, [data-theme="light"] .product-card, [data-theme="light"] .band-item { background:#ffffff; border-color:#e8edf5; box-shadow:0 10px 22px rgba(28,53,90,.10) }
[data-theme="light"] .btn{ background:#fff; color:#0e1424; border-color:#e8edf5 }
[data-theme="light"] .btn.primary{ background:linear-gradient(135deg,var(--mint),var(--mint-2)); color:#fff; border:0 }
[data-theme="light"] .nav a{ color:#4a5b74 }
[data-theme="light"] .nav a:hover{ color:#0e1424 }
[data-theme="light"] .sidebar{ background:#fff; border-color:#e8edf5 }
[data-theme="light"] .side-item, [data-theme="light"] .side-subitem{ background:#fff; border-color:#e8edf5; color:#0e1424 }
[data-theme="light"] .side-user{ background:#f3f6fb }
[data-theme="light"] .sidebar-fab{ background:#fff; color:#0e1424; border-color:#e8edf5; box-shadow:0 10px 20px rgba(28,53,90,.18) }
[data-theme="light"] .notification{ background:#0f172a; color:#fff }

/* Base */
html[dir="rtl"] body{ font-family:'Cairo', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif }
body{ background: radial-gradient(1200px 700px at 90% -20%, #12182a 0%, transparent 35%), var(--bg); color:var(--text); line-height:1.7 }
a{ color:inherit; text-decoration:none }
.container{ width:min(1160px,92%); margin-inline:auto }

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:30; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04));
  border-bottom:1px solid var(--border); backdrop-filter: blur(10px);
}
.navbar .container{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px }
.logo{ font-weight:800; letter-spacing:.5px }
.nav{ display:flex; align-items:center; gap:16px }
.nav a{ color:var(--muted) }
.nav a:hover{ color:#fff }
.hamburger{ display:none; font-size:26px; background:none; border:0; color:#fff; cursor:pointer }
.user-menu{ display:flex; align-items:center; gap:10px }
.cart-count{ background:#ef4444; color:#fff; border-radius:999px; padding:0 .4rem; font-size:.8rem }

/* Buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.7rem 1rem; border-radius:12px; border:1px solid var(--border); background:#1b2231; color:#fff; cursor:pointer; transition:transform .15s, opacity .15s, box-shadow .15s }
.btn:hover{ transform: translateY(-1px); opacity:.96; box-shadow: var(--shadow) }
.btn.primary{ background: linear-gradient(135deg, var(--mint), var(--mint-2)); border:0 }
.btn.outline{ background:transparent; border:1px dashed var(--border) }

/* Hero */
.hero.mint{ background: radial-gradient(950px 500px at 15% -10%, rgba(5,150,105,.25), transparent 40%), radial-gradient(700px 400px at 85% -10%, rgba(96,165,250,.25), transparent 50%), linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)); padding:40px 0 70px }
.hero-wrap{ display:grid; grid-template-columns:1.05fr .95fr; gap:24px }
.hero-copy .badge{ display:inline-block; font-size:.85rem; padding:.35rem .6rem; border-radius:999px; background:rgba(52,211,153,.12); color:#a7f3d0; border:1px solid rgba(52,211,153,.35); margin-bottom:8px }
.hero-copy h1{ font-size: clamp(26px,4.3vw,46px); margin:4px 0 10px }
.hero-copy h1 span{ background: linear-gradient(135deg, var(--mint), var(--accent)); -webkit-background-clip:text; background-clip:text; color:transparent }
.hero-copy p{ color:var(--muted); margin-bottom:16px }
.cta-row{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px }
.points{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; padding:0; margin:14px 0 0 }
.points li{ background: rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px; padding:.6rem .75rem; text-align:center }

/* Card */
.hero-card{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow: var(--shadow); display:flex; flex-direction:column; gap:12px }
.quick-search .qs-grid{ display:grid; grid-template-columns:1fr 180px 180px auto; gap:10px }
.quick-search input, .quick-search select{ background:#0f1523; color:#eaeef2; border:1px solid #223049; padding:.7rem .8rem; border-radius:12px }
.fact-strip{ display:flex; justify-content:space-between; align-items:center; gap:10px; color:#cfe6ff }
.fact-strip strong{ font-size:20px }
.fact-strip span{ display:block; color:#9fb0c6; font-size:12px }

/* Ad carousel (inside the same card) */
.ad-carousel{
  position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--border);
  min-height: 160px; background: linear-gradient(135deg, rgba(2,6,23,.40), rgba(2,6,23,.22));
}
.ad-track{ display: grid; grid-auto-flow: column; grid-auto-columns: 100%; transition: transform .35s ease; width: 100%; }
.ad-slide{ position: relative; display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; align-items: center; padding: 14px; min-height: 160px; }
.ad-bg{ position:absolute; inset:0; background: radial-gradient(600px 300px at 10% -10%, rgba(59,130,246,.25), transparent 40%), radial-gradient(600px 300px at 90% -10%, rgba(16,185,129,.25), transparent 45%); z-index: 0; pointer-events:none; }
.ad-content{ position:relative; z-index:1 }
.ad-content h4{ margin:0 0 6px; font-size: 1.05rem }
.ad-content p{ margin:0 0 10px; color: var(--muted) }
.ad-content .btn{ padding:.5rem .8rem }
.ad-visual{ position:relative; z-index:1; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px dashed var(--border); min-height: 110px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.ad-visual img{ max-width:100%; max-height:110px; object-fit:cover; display:block; opacity:.95 }
.ad-nav{ position:absolute; top:50%; transform:translateY(-50%); background: rgba(255,255,255,.08); border:1px solid var(--border); width:30px; height:30px; border-radius:999px; color:#fff; cursor:pointer; z-index: 3; }
.ad-nav:hover{ background: rgba(255,255,255,.14) }
.ad-nav.prev{ inset-inline-start:8px }
.ad-nav.next{ inset-inline-end:8px }
.ad-dots{ position:absolute; inset-inline:0; bottom:6px; display:flex; justify-content:center; gap:6px; z-index:3; }
.ad-dot{ width:8px; height:8px; border-radius:999px; background:rgba(255,255,255,.28); border:1px solid var(--border); cursor:pointer }
.ad-dot.active{ background: var(--accent) }

/* Sections & grid */
.categories{ padding:34px 0 }
.section-head{ display:flex; align-items:end; justify-content:space-between; margin:24px 0 14px }
.section-head h2{ font-size:22px }
.section-head p{ color:var(--muted); font-size:14px }
.grid{ display:grid; gap:16px }
.products{ grid-template-columns: repeat(4, 1fr) }
.product-card{ background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border); border-radius:14px; padding:14px; transition: transform .12s, box-shadow .12s }
.product-card:hover{ transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.35) }
.product-card img{ width:100%; height:180px; object-fit:cover; border-radius:12px }
.product-card h3{ margin:.5rem 0 .35rem 0; font-size:1rem }
.product-card p{ color:var(--muted); font-size:.95rem; margin:.25rem 0 }

/* Value band + footer */
.band{ padding: 14px 0 }
.band-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:12px }
.band-item{ text-align:center; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--border); border-radius:12px; padding:.8rem }
.footer{ margin: 36px 0 26px; background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border-top:1px solid var(--border) }
.footer .container{ padding:14px 18px }
.footer-links{ display:flex; gap:10px; justify-content:center; color: var(--muted) }

/* Notification */
.notification{ display:none; position:fixed; inset-inline-start:50%; transform:translateX(-50%); top:80px; background:#0b1424; color:#fff; padding:.8rem 1rem; border-radius:12px; z-index:80; border:1px solid var(--border) }
.notification.success{ background: linear-gradient(135deg, #16a34a, #1f7a3c) }
.notification.error{ background: linear-gradient(135deg, #c62828, #8b2020) }
.notification.info{ background: linear-gradient(135deg, #2563eb, #1e3a8a) }

/* Sidebar */
.sidebar{ position:fixed; inset-block:0; right:0; inset-inline-end:0; width:320px; background: linear-gradient(180deg, rgba(17,24,39,.85), rgba(17,24,39,.6)); border:1px solid var(--border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color:#fff; padding:14px; display:flex; flex-direction:column; gap:12px; transform:translateX(100%); transition:transform .25s ease; z-index:90; border-radius:16px 0 0 16px; box-shadow:0 24px 60px rgba(0,0,0,.35) }
.sidebar.active{ transform:translateX(0) }
.sidebar-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.48); opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:85 }
.sidebar-overlay.active{ opacity:1; pointer-events:auto }
.side-user{ display:flex; gap:10px; align-items:center; padding:10px; border-radius:12px; background: rgba(255,255,255,.05) }
.side-user .avatar{ width:44px; height:44px; border-radius:50%; display:grid; place-items:center; background:#0f1523 }
.side-user .avatar.placeholder{ color:#aab; font-size:20px }
.side-user .meta strong{ display:block }
.side-user .meta span{ color:var(--muted); font-size:12px }
.side-group{ display:flex; flex-direction:column; gap:8px; margin-top:6px }
.side-item{ text-align:start; width:100%; border:1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.04); color:#fff; padding:.7rem .9rem; border-radius:12px; cursor:pointer; transition: transform .12s ease, background .12s ease; display:flex; align-items:center; justify-content:space-between; gap:.5rem; text-decoration:none }
.side-item:hover{ transform: translateX(-3px); background: rgba(255,255,255,.07) }
.side-item.danger{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color: #fecaca; }
.side-item.danger:hover{ background: rgba(239,68,68,.22); }
.side-sublist{ display:block; overflow:hidden; max-height:0; opacity:0; transition:max-height .22s ease, opacity .22s ease; margin-inline-start:8px; border-inline-start:2px dashed rgba(255,255,255,.12) }
.side-sublist.open{ max-height:500px; opacity:1 }
.side-subitem{ display:block; margin:6px 8px 0 0; padding:.5rem .75rem; border-radius:10px; color:#fff; text-decoration:none; background: rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); font-size:.95rem }
.side-subitem:hover{ background: rgba(255,255,255,.08) }

/* ألوان مخصصة */
.side-item.green{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color: #86efac; }
.side-item.green:hover{ background: rgba(34,197,94,.22); }
.side-item.blue{ background: rgba(37,99,235,.12); border-color: rgba(37,99,235,.35); color: #bfdbfe; }
.side-item.blue:hover{ background: rgba(37,99,235,.22); }

/* ضمان بقاء أزرار تسجيل الخروج وإغلاق في الأسفل */
.side-actions{ margin-top: auto; display:flex; flex-direction:column; gap:8px }

/* FAB زر فتح السايد بار */
.sidebar-fab {
  position:fixed; bottom:18px; inset-inline-end:18px; width:46px; height:46px; border-radius:50%;
  border:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  color:#fff; display:grid; place-items:center; font-size:20px; cursor:pointer; z-index:100;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--shadow);
  transition:transform .12s ease, opacity .12s ease;
}
.sidebar-fab:hover { transform: translateY(-2px); opacity:.95 }

/* أنيميشن الاهتزاز */
@keyframes shakeX { 0%,100% { transform: translateX(0) } 20% { transform: translateX(-4px) } 40% { transform: translateX(4px) } 60% { transform: translateX(-3px) } 80% { transform: translateX(3px) } }
.shake{ animation: shakeX .42s ease }

/* Responsive */
@media (max-width: 1100px){ .products{ grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 920px){
  .hero-wrap{ grid-template-columns:1fr }
  .points{ grid-template-columns:1fr }
  .ad-slide{ grid-template-columns: 1fr; min-height: 150px }
  .ad-visual{ display:none }
}
@media (max-width: 768px){
  .nav{ display:none; position:absolute; inset-inline:0; top:64px; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); padding:12px; gap:8px; flex-direction:column }
  .nav.active{ display:flex }
  .products{ grid-template-columns: repeat(2, 1fr) }
  .band-grid{ grid-template-columns:1fr }
}
@media (max-width: 520px){ .products{ grid-template-columns: 1fr } }

/* ====== PLAN CARD ====== */
.product-card.plan{
  --blue:#ff1d1d; --blue-2:#e61111; --bg:#0b121d;
  position:relative; display:flex; flex-direction:column; gap:12px;
  padding:50px 18px 20px; border-radius:28px; background:var(--bg); color:#e8f2ff;
  border:2px solid rgba(255, 29, 29, 0.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 24px rgba(0,0,0,.45);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; overflow:hidden;
}
.product-card.plan:hover{
  transform: translateY(-6px);
  border-color: rgba(255, 29, 29, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 29, 29, 0.25), 0 20px 50px rgba(230, 17, 17, 0.35);
}
.plan-head{ display:flex; align-items:center; justify-content:space-between; gap:10px }
.plan-price.v{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.plan-price.v .old{ color:#9fb0c6; text-decoration:line-through; font-weight:700 }
.plan-price.v .new{ color:#eaf6ff; font-size:28px; font-weight:900; line-height:1.1 }
.plan-title h3{ margin:0; font-size:20px; font-weight:900 }
.spark{ width:36px; height:36px; border-radius:12px; display:grid; place-items:center; color:#fff; font-size:20px; background: radial-gradient(90% 90% at 30% 30%, #36c3ff, #0c7bd9); box-shadow: 0 6px 18px rgba(29,161,255,.45) }
.plan-divider{ height:1px; width:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.10),transparent); margin:4px 0 6px }
.plan-discount{ position:absolute; top:12px; inset-inline-start:12px; border:2px solid #ff2748; color:#ff2748; background:rgba(255,39,72,.12); padding:3px 8px; border-radius:10px; font-weight:800; font-size:.85rem; box-shadow:0 0 0 0 rgba(255,39,72,.45); animation:discPulse 1.6s infinite; }
@keyframes discPulse{ 0%{box-shadow:0 0 0 0 rgba(255,39,72,.45)} 100%{box-shadow:0 0 0 14px rgba(255,39,72,0)} }
.btn.sweep{ position:relative; overflow:hidden; border-radius:18px; background:#0e1829; border:2px solid rgba(255,255,255,.12); color:#fff; font-weight:900; padding:.9rem 1.1rem; cursor:pointer; transition:transform .2s ease; user-select:none }
.btn.sweep:hover{ transform:translateY(-2px) }
.btn.sweep::before{ content:""; position:absolute; inset:0; background:linear-gradient(to left,#ff1d1d,#ff3737,#e90e0e); background-size:200% 100%; transform:translateX(110%); transition:transform .55s ease; mix-blend-mode:screen; opacity:.85; border-radius:inherit }
.btn.sweep:hover::before{ transform:translateX(-110%) }
.btn.primary.sky{ border-color:transparent; background:linear-gradient(90deg,#ff1d1d,#e90e0e) }
.btn.ghost{ background:transparent; border:2px dashed rgba(255, 29, 29, 0.35); color:#8fd1ff }

/* ===== المودال الاحترافي ===== */
.details-overlay#modalOverlay{ position:fixed; inset:0; background:rgba(0,0,0,.82); display:none; z-index:90 }

.product-details-panel#modalPanel{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.94);
  width:92%; max-width:1100px; color:#fff; border-radius:22px; padding:14px; display:none; z-index:100;
  background:linear-gradient(180deg, rgba(11,18,29,.96), rgba(11,18,29,.92));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 24px 65px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03);
  animation:panelIn .28s ease forwards;
  max-height:min(88vh, 920px);
  display:grid; grid-template-rows:auto 1fr auto; gap:8px; overflow:hidden;
}
@keyframes panelIn{ from{opacity:0; transform:translate(-50%,-56%) scale(.9)} to{opacity:1; transform:translate(-50%,-50%) scale(1)} }

/* الرأس */
#modalHeader{
  display:flex; align-items:center; justify-content:center; padding:6px 8px 4px; position:relative;
  border-bottom:1px solid rgba(255,255,255,.08);
}
#modalTitle{ font-size:1.05rem; font-weight:800; letter-spacing:.2px; text-align:center; color:#eaf2ff; }
#modalX{
  position:absolute; top:8px; inset-inline-start:8px;
  width:40px; height:40px; border-radius:12px; border:1px solid rgba(255,39,72,.28);
  background:rgba(255,255,255,.06); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:grid; place-items:center; color:#fff; cursor:pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, filter .15s ease;
}
#modalX:hover{ transform:rotate(90deg) scale(1.06); background:rgba(255,39,72,.16); box-shadow:0 6px 18px rgba(255,39,72,.35) }
#modalX:active{ transform:rotate(90deg) scale(.98) }

/* المحتوى */
#modalContent{ overflow:auto; padding:10px 4px 2px; }
#modalGrid{ display:grid; grid-template-columns: 1.1fr .9fr; gap:26px; align-items:start; }
#modalMedia.slot-1{ width:100% }
#modalVideo,#modalImage{ width:100%; height:auto; border-radius:14px; display:block; box-shadow:0 10px 22px rgba(0,0,0,.35) }

/* العمود الجانبي */
#modalSide{ display:flex; flex-direction:column; gap:14px }

/* الوصف + قصّ ذكي + زر قراءة المزيد — ثابت ويدعم متصفحات أكثر */
#modalDescWrap.slot-2{
  --desc-lines: 6;   /* عدّلها من يمّك */
  --lh: 1.85;
  position:relative; display:flex; flex-direction:column; gap:10px;
}
#modalDesc{
  color:#cbd5e1; line-height: calc(var(--lh) * 1em); font-size:.98rem;
  overflow:hidden; display:block; word-break: break-word; overflow-wrap:anywhere;
  max-height: calc(var(--desc-lines) * 1em * var(--lh)); /* fallback */
}
@supports (-webkit-line-clamp: 2) {
  #modalDesc{ display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; max-height: unset; }
}
#modalDescWrap:not(.expanded)::after{
  content:""; position:absolute; inset-inline:0; bottom:38px; height:48px;
  background:linear-gradient(180deg, rgba(11,18,29,0), rgba(11,18,29,1)); pointer-events:none;
}
#modalDescWrap.expanded #modalDesc{ max-height:none; -webkit-line-clamp:unset; display:block }
#modalDescWrap.expanded::after{ display:none }
#modalMoreBtn{
  align-self:flex-start; border:none; background:transparent; color:#9bd2ff; cursor:pointer;
  padding:.25rem .4rem; border-radius:8px; font-weight:700; letter-spacing:.2px; transition:opacity .15s ease;
}
#modalMoreBtn:hover{ opacity:.9 }

/* الأسعار */
#modalPriceBox.slot-3{ min-width:240px; display:flex; flex-direction:column; gap:8px }
#modalDiscount{ align-self:flex-start; background:rgba(255,39,72,.12); border:1px solid #ff2748; color:#ff9aa7; font-weight:800; padding:6px 10px; border-radius:8px; line-height:1; font-size:.95rem; user-select:none }
#modalOriginal{ color:#a8b3c7; text-decoration:line-through; user-select:none }
#modalFinal{ color:#ffd3d8; font-size:1.5rem; font-weight:900; user-select:none }

/* الذيل + زر الإغلاق (أحمر نيون + اهتزاز) */
#modalFooter{ border-top:1px solid rgba(255,255,255,.08); padding:8px 0 4px; display:flex; gap:10px; justify-content:space-between; align-items:center }
#modalClose.slot-4{
  margin:0; width:100%; border:none; border-radius:14px; padding:1rem; font-weight:900; color:#fff; cursor:pointer; user-select:none;
  background:linear-gradient(135deg, #ff0033, #ff2747);
  box-shadow:0 0 10px rgba(255,39,71,.55), 0 8px 20px rgba(255,39,71,.28), inset 0 -2px 0 rgba(255,255,255,.08);
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease; text-shadow:0 0 6px rgba(255,255,255,.25);
}
#modalClose:hover{ filter:brightness(1.08) }
#modalClose:active{ transform:scale(.985) }

/* اهتزاز عند الضغط */
@keyframes shakeXBtn { 0%,100% { transform: translateX(0) } 20% { transform: translateX(-4px) } 40% { transform: translateX(4px) } 60% { transform: translateX(-3px) } 80% { transform: translateX(3px) } }
#modalClose.shake, #modalX.shake { animation: shakeXBtn .42s ease }

/* ترتيب داخلي قابل للتغيير من يمّك بالأرقام */
#modalSide .slot-2{ order: var(--modal-slot-2-order, 1) }
#modalSide .slot-3{ order: var(--modal-slot-3-order, 2) }

/* Scrollbar لطيف داخل المحتوى */
#modalContent::-webkit-scrollbar{ width:10px }
#modalContent::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.12); border-radius:8px; border:2px solid transparent; background-clip:padding-box }
#modalContent{ scrollbar-width:thin; scrollbar-color: rgba(255,255,255,.12) transparent }

/* موبايل */
@media (max-width:900px){
  .product-details-panel#modalPanel{ width:94% }
  #modalContent{ padding:10px 2px }
  #modalGrid{ grid-template-columns:1fr; gap:16px }
}

/* منع النسخ/السحب */
.nocopy{ user-select:none; -webkit-user-select:none }
.nodrag{ -webkit-user-drag:none; user-select:none }