/* ===== عنوان المنتج الجديد ===== */
.shp-title-stack{
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--shp-text);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;      /* ⭐ توسيط العناصر داخل الـ flex */
    text-align: center;           /* ⭐ توسيط النص داخل السطر */
    gap: 4px;
    line-height: 1.4;
}

/* اسم الماركة */
.shp-title-stack .shp-brand{
    color: var(--shp-primary);
    font-weight: 800;
}

/* الفاصل • */
.shp-title-stack .shp-sep{
    font-size: 12px;
    color: var(--shp-muted);
}

/* التصنيف/الفئة */
.shp-title-stack .shp-cat{
    font-weight: 700;
    color: #111;
}

/* اللون */
.shp-title-stack .shp-color{
    background: var(--shp-soft);
    color: var(--shp-primary-700);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    border:1px solid var(--shp-border);
}

/* ========== Theme Vars ========== */
.shp-root{
  --shp-primary:#9f1f63; --shp-primary-700:#7d174e;
  --shp-text:#111827; --shp-muted:#6b7280;
  --shp-bg:#fff; --shp-soft:#f8f8fa; --shp-border:#e5e7eb; --shp-ok:#10b981;
  --shp-shadow:0 2px 8px rgba(0,0,0,.08); --shp-shadow-hover:0 4px 12px rgba(0,0,0,.12);
  --glass-tint: rgba(159,31,99,.25); --glass-tint-strong: rgba(159,31,99,.45);
}

/* Layout */
.shp-root{ padding:0 10px; max-width:1400px; margin:0 auto; }
.shp-root *{ box-sizing:border-box; }
.shp-title{ margin:15px 0 20px; font-weight:700; color:var(--shp-primary); font-size:22px; text-align:center; }
.shp-sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.shp-card{ background:var(--shp-bg); border:1px solid var(--shp-border); border-radius:10px; padding:14px; box-shadow:var(--shp-shadow); transition:all .2s; }
.shp-card:hover{ box-shadow:var(--shp-shadow-hover); }
.shp-filter-section{ background:#f9fafb; border-left:3px solid var(--shp-primary); margin-bottom:20px; }
.shp-section{ margin-top:20px; }
.shp-form{ width:100%; }
.shp-filter-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.shp-field{ display:flex; flex-direction:column; gap:6px; }
.shp-label{ font-weight:600; color:#4b5563; font-size:13px; }
.shp-input{ border:1px solid var(--shp-border); border-radius:8px; padding:10px 12px; background:#fff; font-size:14px; transition:all .2s; }
.shp-input:focus{ outline:none; border-color:var(--shp-primary); box-shadow:0 0 0 3px rgba(159,31,99,.1); }
/* 🔥 شبكة المنتجات — توسيط البطاقات مهما كان عددها */
.shp-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 300px));
    gap: 16px;

    /* ⭐ أهم سطر: يوسّط الشبكة بالكامل */
    justify-content: center;
}

/* بطاقات */
.shp-product-card{ perspective:1000px; min-height:420px; }
.shp-card-inner{ position:relative; width:100%; height:100%; transition:transform .6s; transform-style:preserve-3d; }
.shp-product-card.flipped .shp-card-inner{ transform:rotateY(180deg); }
.shp-card-face{ position:absolute; width:100%; height:100%; backface-visibility:hidden; top:0; left:0; display:flex; flex-direction:column; }
.shp-card-back{ transform:rotateY(180deg); padding:16px; }

/* أزرار الوجهين */
.shp-details-btn{ position:absolute; bottom:8px; left:8px; background:rgba(255,255,255,.95); border:1px solid var(--shp-border); border-radius:8px; padding:7px 11px; font-size:12px; font-weight:700; color:var(--shp-primary); display:flex; align-items:center; gap:6px; cursor:pointer; z-index:10; transition:.2s; }
.shp-details-btn:hover{ background:var(--shp-primary); color:#fff; }
.shp-back-header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--shp-border); }
.shp-back-title{ font-weight:700; color:var(--shp-primary); margin:0; font-size:18px; }
.shp-back-btn{ background:#f3f4f6; border:none; border-radius:8px; width:38px; height:38px; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; }
.shp-back-btn:hover{ background:var(--shp-primary); color:#fff; }

/* صورة المنتج */
.shp-imgbox{ position:relative; aspect-ratio:1/1; background:#f9fafb; display:flex; align-items:center; justify-content:center; border-radius:10px; overflow:hidden; cursor:zoom-in; }
.shp-main-img{ max-width:100%; max-height:100%; object-fit:contain; }
.shp-noimg{ opacity:.6; font-size:13px; color:#9ca3af; }
.shp-badge{ position:absolute; top:8px; right:8px; padding:4px 8px; border-radius:6px; font-size:11px; font-weight:600; color:#fff; background:#065f46; z-index:10; }

/* نصوص وسعر */
.shp-body{ padding:12px 0 0; }
.shp-headline{ font-weight:700; font-size:14px; margin:0 0 6px; color:#111; }
.shp-price-row{ display:flex; align-items:center; justify-content:space-between; margin:10px 0; }
.shp-price{ font-size:15px; font-weight:700; color:#111; } .shp-sar{ font-weight:600; }
.shp-meta{ text-align:left; direction:ltr; }
.available-counter{ font-size:12px; color:#6b7280; }
.in-cart-chip{ font-size:11px; color:var(--shp-ok); margin-top:2px; background:#f0fdf4; padding:2px 6px; border-radius:4px; display:inline-block; }

/* ===== Variants row ===== */
.shp-variant-row{ margin:10px 0 8px; }
.shp-variant-group{
  display:grid; grid-template-columns: 1fr 1fr auto; gap:10px; align-items:end;
}
.shp-variant-field{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.shp-variant-label{ font-weight:600; color:#4b5563; font-size:12px; }

/* Select wrapper */
.shp-select{ position:relative; display:inline-flex; align-items:center; width:100%; background:#fff; border:1px solid var(--shp-border); border-radius:10px; padding:2px 10px; box-shadow:var(--shp-shadow); transition:.2s; min-width:0; }
.shp-select:hover{ box-shadow:var(--shp-shadow-hover); }
.shp-select:focus-within{ border-color:var(--shp-primary); box-shadow:0 0 0 3px rgba(159,31,99,.1); }
.shp-select select{ -webkit-appearance:none; appearance:none; border:none; outline:none; background:transparent; width:100%; padding:9px 24px 9px 9px; font-size:13px; color:#111827; cursor:pointer; min-width:0; }
.shp-select select:disabled{ color:#9ca3af; cursor:not-allowed; }
.shp-select-chevron{ position:absolute; left:10px; pointer-events:none; color:#6b7280; font-size:12px; }

/* كمية داخل صف المتغيّرات */
.shp-qty{ display:flex; align-items:center; gap:3px; }
.shp-qty--inline{ justify-self:end; }
.shp-qty-btn{ width:30px; height:32px; border:1px solid var(--shp-border); border-radius:8px; background:#fff; cursor:pointer; font-weight:700; font-size:16px; transition:.2s; }
.shp-qty-btn:hover{ background:#f9fafb; border-color:#d1d5db; }
.shp-qty-input{ width:44px; height:32px; text-align:center; border:1px solid var(--shp-border); border-radius:8px; font-size:13px; }

/* ===== Actions (سطر: إضافة للسلة + شراء الآن) ===== */
.shp-actions{
  display:grid; grid-template-columns: 1fr 1fr; gap:8px; margin-top:12px;
}
.shp-btn, .shp-btn-outline{ height:32px; font-size:12px; border-radius:8px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; padding:6px 12px; transition:.2s; width:100%; }
.shp-btn{ background:var(--shp-primary); color:#fff; border:0; }
.shp-btn:hover{ background:var(--shp-primary-700); }
.shp-btn:disabled{ opacity:.5; cursor:not-allowed; }
.shp-btn-outline{ background:#fff; color:var(--shp-primary); border:1px solid var(--shp-primary); }
.shp-btn-outline:hover{ background:#fdf2f8; }
.buy-now-form{ display:block; width:100%; }

/* ======= أزرار زجاجية ======= */
.shp-glass-btn{
  position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px;
  border:1px solid rgba(255,255,255,.8); border-radius:999px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)) , var(--glass-tint);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color:#fff; font-size:18px; font-weight:900; line-height:1;
  display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.25);
  user-select:none; transition:all .18s ease; opacity:.0; z-index:5;
}
.shp-imgbox:hover .shp-glass-btn{ opacity:1; }
.shp-nav.prev{ left:8px; } .shp-nav.next{ right:8px; }
.shp-zoom-btn{ top:10px; left:10px; right:auto; transform:none; width:40px; height:40px; opacity:.0; z-index:6; display:flex; align-items:center; justify-content:center; color:#fff; border:1px solid rgba(255,255,255,.85); background: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.28)) , var(--glass-tint); }
.shp-imgbox:hover .shp-zoom-btn{ opacity:1; }

/* مؤشر الصور */
.shp-img-indicator{
  position:absolute; bottom:8px; right:8px; background:rgba(0,0,0,.65); color:white; padding:3px 10px;
  border-radius:999px; font-size:12px; z-index:5; backdrop-filter: blur(4px);
  border:1px solid rgba(255,255,255,.25);
}

/* Zoom Modal */
.shp-zoom-modal{ position:fixed; inset:0; background:rgba(0,0,0,.85); display:flex; align-items:center; justify-content:center; z-index:10000; opacity:0; visibility:hidden; transition:.3s; }
.shp-zoom-modal[aria-hidden="false"]{ opacity:1; visibility:visible; }
.shp-zoom-container{ position:relative; max-width:90%; max-height:90%; background:#000; border-radius:14px; overflow:hidden; box-shadow:0 10px 30px rgba(0,0,0,.35); }
.shp-zoom-header{ position:absolute; top:0; left:0; right:0; padding:14px; display:flex; justify-content:flex-end; z-index:10; }
.shp-zoom-close{ background:rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.4); border-radius:999px; width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:#fff; cursor:pointer; transition:.2s; backdrop-filter: blur(6px); }
.shp-zoom-content{ position:relative; display:flex; align-items:center; justify-content:center; padding:60px 60px 50px; }
.shp-zoom-img{ max-width:100%; max-height:75vh; object-fit:contain; }
.shp-zoom-controls{ position:absolute; top:50%; left:0; right:0; display:flex; justify-content:space-between; transform:translateY(-50%); padding:0 24px; pointer-events:none; }
.shp-zoom-nav{ pointer-events:all; width:56px; height:56px; border-radius:999px; border:1px solid rgba(255,255,255,.7); background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.25)) , var(--glass-tint); color:#fff; font-size:30px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:.2s; box-shadow:0 8px 22px rgba(0,0,0,.35); }

/* Pager & Toast */
.shp-pager{ margin-top:24px; display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.shp-page-link{ padding:6px 10px; border:1px solid var(--shp-border); border-radius:8px; text-decoration:none; color:#374151; font-weight:600; font-size:13px; transition:.2s; }
.shp-page-link:hover{ border-color:var(--shp-primary); background:#fdf2f8; }
.shp-page-link.is-active{ background:var(--shp-primary); color:#fff; border-color:var(--shp-primary); }
.shp-toast{ position:fixed; bottom:20px; right:20px; z-index:9999; background:#111827; color:#e5e7eb; padding:10px 14px; border:1px solid #1f2937; border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.15); font-weight:600; font-size:13px; }

/* ===== Responsive ===== */
@media (max-width:980px){
  .shp-filter-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .shp-grid{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
}
@media (max-width:640px){
  .shp-filter-grid{ grid-template-columns:1fr; }
  .shp-grid{ grid-template-columns:1fr; gap:14px; }
  .shp-card{ padding:12px; }
  .shp-title{ font-size:20px; }

  /* إبقاء اللون + المقاس + الكمية في سطر واحد */
  .shp-variant-group{ grid-template-columns: 1fr 1fr 92px; gap:6px; align-items:center; }
  .shp-select select{ padding:8px 22px 8px 8px; font-size:12px; }
  .shp-qty-btn{ width:26px; height:30px; font-size:14px; }
  .shp-qty-input{ width:36px; height:30px; font-size:12px; }

  /* إبقاء (إضافة للسلة + شراء الآن) في سطر واحد */
  .shp-actions{ grid-template-columns: 1fr 1fr; gap:8px; }
}
@media (max-width:380px){
  .shp-variant-group{ grid-template-columns: 1fr 1fr 84px; }
  .shp-qty-btn{ width:24px; height:28px; font-size:13px; }
  .shp-qty-input{ width:32px; height:28px; font-size:12px; }
}