/* ═══════════════════════════════════════════════════
   XAVIA Product Card — 10 states + interactions
   RTL · Mobile-first · Vazirmatn · brand #0d9488
═══════════════════════════════════════════════════ */
:root{
  --xc-brand:#0d9488;
  --xc-brand-dark:#0f766e;
  --xc-brand-soft:#ecfdf5;
  --xc-radius:20px;
  --xc-shadow:0 4px 20px rgba(15,23,42,.06);
  --xc-shadow-hover:0 12px 32px rgba(15,23,42,.12);
  --xc-pad:14px;
  --xc-trans:.25s ease;
  --xc-text:#0f172a;
  --xc-muted:#64748b;
  --xc-border:#eef2f7;
  --xc-danger:#ef4444;
  --xc-warn:#f59e0b;
  --xc-purple:#8b5cf6;
  --xc-blue:#3b82f6;
  --xc-black:#0f172a;
}
@media(prefers-color-scheme:dark){
  :root{
    --xc-text:#f1f5f9;
    --xc-muted:#94a3b8;
    --xc-border:#1e293b;
    --xc-shadow:0 4px 20px rgba(0,0,0,.35);
    --xc-shadow-hover:0 12px 32px rgba(0,0,0,.5);
  }
  .xc-card{background:#1e293b}
  .xc-card .xc-img{background:#0f172a}
  .xc-card .xc-btn-cart{background:var(--xc-brand)}
}

/* ── Card shell ── */
.xc-card{
  background:#fff;border:1px solid var(--xc-border);border-radius:var(--xc-radius);
  box-shadow:var(--xc-shadow);overflow:hidden;display:flex;flex-direction:column;
  height:100%;position:relative;transition:transform var(--xc-trans),box-shadow var(--xc-trans);
  direction:rtl;font-family:Vazirmatn,Tahoma,sans-serif;
  max-width:280px;width:100%;margin-inline:auto;
}
.xc-card:hover{transform:translateY(-3px) scale(1.015);box-shadow:var(--xc-shadow-hover)}
.xc-card.xc-oos .xc-img img{filter:grayscale(.55);opacity:.75}
.xc-card.xc-black{background:#0f172a;border-color:#1e293b;color:#f8fafc}
.xc-card.xc-black .xc-title{color:#f8fafc}
.xc-card.xc-black .xc-meta,.xc-card.xc-black .xc-sold{color:#94a3b8}
.xc-card.xc-black .xc-price-now{color:#5eead4}
.xc-card.xc-black .xc-price-old{color:#64748b}
.xc-card.xc-black .xc-btn-cart{background:var(--xc-brand);color:#fff}
.xc-card.xc-black .xc-wish,.xc-card.xc-black .xc-cmp{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:#e2e8f0
}

/* ── Image ── */
.xc-img{
  display:block;position:relative;aspect-ratio:1/1;background:#f8fafc;
  overflow:hidden;text-decoration:none;
}
.xc-img img{
  width:100%;height:100%;object-fit:contain;padding:12px;
  transition:transform var(--xc-trans);display:block;
}
.xc-card:hover .xc-img img{transform:scale(1.04)}

/* ── Badges ── */
.xc-badges{position:absolute;top:10px;right:10px;z-index:3;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.xc-badge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:800;border-radius:999px;
  padding:3px 9px;line-height:1.3;white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.08);
}
.xc-badge-new{background:#dcfce7;color:#15803d}
.xc-badge-sale{background:#fef2f2;color:#dc2626}
.xc-badge-best{background:#fff7ed;color:#c2410c}
.xc-badge-low{background:#f5f3ff;color:#7c3aed}
.xc-badge-wow{background:#ecfdf5;color:#047857;animation:xcPulse 2s ease infinite}
.xc-badge-oos{background:#f1f5f9;color:#64748b}
.xc-badge-wholesale{background:#ecfdf5;color:#0f766e}
.xc-badge-fast{background:#eff6ff;color:#1d4ed8}
.xc-badge-black{background:#000;color:#fff}
.xc-badge-off{
  position:absolute;top:10px;left:10px;z-index:3;
  background:var(--xc-danger);color:#fff;font-size:11px;font-weight:800;
  border-radius:10px;padding:3px 8px;box-shadow:0 2px 8px rgba(239,68,68,.3);
}
.xc-card.xc-black .xc-badge-off{background:#fbbf24;color:#000}

@keyframes xcPulse{
  0%,100%{transform:scale(1)} 50%{transform:scale(1.05)}
}

/* ── Float actions (wishlist / compare) ── */
.xc-float{
  position:absolute;top:10px;left:10px;z-index:4;
  display:flex;flex-direction:column;gap:6px;
  opacity:0;transform:translateX(-6px);transition:opacity var(--xc-trans),transform var(--xc-trans);
}
.xc-card:hover .xc-float,.xc-card:focus-within .xc-float{opacity:1;transform:none}
@media(max-width:767.98px){
  .xc-float{opacity:1;transform:none}
}
.xc-wish,.xc-cmp{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--xc-border);
  background:#fff;color:#94a3b8;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all var(--xc-trans);font-size:15px;padding:0;
}
.xc-wish:hover,.xc-cmp:hover{color:var(--xc-brand);border-color:var(--xc-brand)}
.xc-wish.active,.xc-wish .bi-heart-fill{color:#ef4444}

/* ── Timer blocks ── */
.xc-timer-row{
  display:flex;gap:4px;justify-content:center;padding:0 10px 6px;direction:ltr;
}
.xc-timer-unit{
  flex:1;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;
  text-align:center;padding:4px 2px;min-width:0;
}
.xc-timer-unit b{
  display:block;font-size:13px;font-weight:800;color:#dc2626;
  font-variant-numeric:tabular-nums;line-height:1.2;
}
.xc-timer-unit span{font-size:9px;color:#9ca3af;font-weight:600}
.xc-card.xc-black .xc-timer-unit{background:#1e293b;border-color:#334155}
.xc-card.xc-black .xc-timer-unit b{color:#5eead4}
.xc-card.xc-black .xc-timer-unit span{color:#64748b}

/* stock bar */
.xc-stock-bar{padding:0 12px 4px}
.xc-stock-bar .bar{height:5px;background:#fee2e2;border-radius:99px;overflow:hidden}
.xc-stock-bar .bar > i{display:block;height:100%;background:linear-gradient(90deg,#ef4444,#f97316);border-radius:99px;transition:width .4s}
.xc-stock-txt{font-size:11px;color:#dc2626;font-weight:700;padding:2px 12px 0;text-align:center}

/* ── Body ── */
.xc-body{padding:var(--xc-pad);display:flex;flex-direction:column;gap:6px;flex:1}
.xc-title{
  font-size:.84rem;font-weight:700;line-height:1.45;color:var(--xc-text);
  text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;min-height:2.5em;
}
.xc-title:hover{color:var(--xc-brand)}
.xc-rating{display:flex;align-items:center;gap:4px;font-size:12px;color:#f59e0b}
.xc-rating .cnt{color:var(--xc-muted);font-weight:600;font-size:11px}
.xc-sold{font-size:11px;color:var(--xc-muted)}
.xc-price-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;margin-top:auto;padding-top:4px}
.xc-price-now{font-size:1rem;font-weight:800;color:var(--xc-brand-dark)}
.xc-price-old{font-size:.78rem;color:#94a3b8;text-decoration:line-through}
.xc-wholesale-box{
  background:var(--xc-brand-soft);border-radius:10px;padding:6px 8px;
  font-size:11px;display:flex;justify-content:space-between;gap:6px;margin-top:2px;
}
.xc-wholesale-box span{color:var(--xc-muted)}
.xc-wholesale-box b{color:var(--xc-brand-dark);font-weight:800}

/* ── Actions ── */
.xc-actions{display:flex;gap:6px;margin-top:8px;align-items:center}
.xc-btn-cart{
  flex:1;border:0;border-radius:12px;background:var(--xc-brand);color:#fff;
  font-size:.78rem;font-weight:700;padding:.55rem .6rem;
  display:flex;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;transition:background var(--xc-trans),transform .15s;
}
.xc-btn-cart:hover{background:var(--xc-brand-dark)}
.xc-btn-cart:active{transform:scale(.97)}
.xc-btn-cart.xc-added{background:#16a34a}
.xc-btn-cart:disabled,.xc-btn-oos{
  background:#e2e8f0;color:#94a3b8;cursor:not-allowed;
}
.xc-btn-notify{
  flex:1;border:1px solid #e2e8f0;border-radius:12px;background:#fff;color:var(--xc-muted);
  font-size:.75rem;font-weight:700;padding:.55rem;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:4px;
}
.xc-btn-notify:hover{border-color:var(--xc-brand);color:var(--xc-brand)}

/* qty stepper after add */
.xc-qty{
  display:none;flex:1;align-items:center;justify-content:space-between;
  border:1px solid var(--xc-border);border-radius:12px;background:#fff;overflow:hidden;
}
.xc-qty.show{display:flex}
.xc-qty button{
  width:36px;height:38px;border:0;background:#f8fafc;font-size:1rem;font-weight:700;
  color:var(--xc-text);cursor:pointer;
}
.xc-qty span{font-weight:800;font-size:.9rem;min-width:28px;text-align:center}

/* toast mini */
.xc-toast{
  position:absolute;inset:auto 12px 12px 12px;z-index:10;
  background:#16a34a;color:#fff;border-radius:12px;padding:8px 12px;
  font-size:12px;font-weight:700;text-align:center;
  opacity:0;transform:translateY(8px);pointer-events:none;
  transition:opacity .25s,transform .25s;
}
.xc-toast.show{opacity:1;transform:none}

/* grid helper */
.xc-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;justify-content:center;
}
@media(min-width:576px){.xc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:992px){.xc-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}}
@media(min-width:1200px){.xc-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.xc-grid > .xc-card{max-width:100%}