/* ==========================================================================
   Seya Store — واجهة المتجر
   تُحمَّل بعد store.css وتعيد رسم: الألوان، الهيرو، شريط الفلترة، شبكة البطاقات.
   السلة والنوافذ وصفحة الدفع تبقى من store.css / checkout-*.css بنفس السلوك.
   ========================================================================== */

body.store-v2 {
  --sx-bg: #120d0b;
  --sx-surface: #211813;
  --sx-surface-2: #2b1f18;
  --sx-surface-3: #34261d;
  --sx-line: rgba(217, 182, 147, .14);
  --sx-line-2: rgba(217, 182, 147, .24);
  --sx-line-3: rgba(217, 182, 147, .42);
  --sx-ink: #f6eee5;
  --sx-ink-2: #ecd3b8;
  --sx-mute: #bba68f;
  --sx-gold: #d9b693;
  --sx-gold-2: #b8997c;
  --sx-gold-fill: linear-gradient(150deg, #ecd3b8 0%, #d9b693 55%, #b8997c 100%);
  --sx-on-gold: #1a110c;
  --sx-cut: 28px;
  font-family: "IBM Plex Sans Arabic", "Tajawal", "Cairo", system-ui, sans-serif;
}
body.store-v2 button, body.store-v2 input, body.store-v2 select { font-family: inherit; }

body.store-v2::before {
  background:
    radial-gradient(900px 520px at 50% -6%, rgba(217, 182, 147, .17), transparent 68%),
    radial-gradient(700px 480px at 6% 60%, rgba(130, 103, 79, .15), transparent 70%),
    radial-gradient(800px 560px at 96% 96%, rgba(217, 182, 147, .09), transparent 70%),
    #120d0b;
}
body.store-v2::after { background-image: linear-gradient(rgba(217, 182, 147, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(217, 182, 147, .035) 1px, transparent 1px); animation: none; }
.sx-orb { display: none; }

body.store-v2 .sx-main { max-width: 1240px; gap: 30px; }

/* ───────────── الهيرو ───────────── */
body.store-v2 .sx-hero.sy-shero {
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 44px; align-items: center;
  text-align: start; padding: 30px 0 18px;
}
.sy-shero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
body.store-v2 .sx-eyebrow {
  display: inline-flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; border-radius: 0;
  font-family: var(--sx-font); font-size: .82rem; font-weight: 700; letter-spacing: .08em; color: var(--sx-gold);
}
body.store-v2 .sx-eyebrow i { width: 26px; height: 10px; border-radius: 0; background: var(--sx-gold); clip-path: polygon(35% 0, 100% 0, 65% 100%, 0 100%); }
body.store-v2 .sx-title {
  margin: 0; font-size: clamp(2.6rem, 5.6vw, 4.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; color: var(--sx-ink);
}
body.store-v2 .sx-title em {
  font-style: normal; background: linear-gradient(180deg, #f7e8d6, #d9b693 60%, #b8997c);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
}
body.store-v2 .sx-lead { max-width: 52ch; margin: 0; font-size: 1.08rem; line-height: 2; color: var(--sx-mute); text-wrap: pretty; }
body.store-v2 .sx-stats { justify-content: flex-start; margin-top: 6px; gap: 12px; }
body.store-v2 .sx-stat {
  display: flex; align-items: baseline; gap: 10px; padding: 11px 24px; border: 1px solid var(--sx-line-2); border-radius: 4px;
  background: rgba(33, 24, 19, .7); transform: skewX(-10deg);
}
body.store-v2 .sx-stat b, body.store-v2 .sx-stat span { display: inline-block; transform: skewX(10deg); }
body.store-v2 .sx-stat b { font-family: var(--sx-mono, "JetBrains Mono", ui-monospace, monospace); font-size: 1.3rem; color: var(--sx-ink-2); }
body.store-v2 .sx-stat span { color: var(--sx-mute); font-size: .88rem; }

.sy-shero-card {
  position: relative; isolation: isolate; padding: 32px 30px; min-height: 280px;
  background: var(--sx-line-2); clip-path: polygon(var(--sx-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--sx-cut));
}
.sy-shero-card::before {
  content: ""; position: absolute; inset: 1px; z-index: -2;
  background: radial-gradient(360px 260px at 0% 100%, rgba(217, 182, 147, .2), transparent 70%), linear-gradient(160deg, var(--sx-surface-2), var(--sx-surface));
  clip-path: polygon(calc(var(--sx-cut) - 1px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--sx-cut) - 1px));
}
.sy-shero-mark { position: absolute; z-index: -1; width: 190px; height: auto; inset-inline-end: -26px; bottom: -34px; fill: rgba(217, 182, 147, .07); stroke: rgba(217, 182, 147, .3); stroke-width: .8; transform: rotate(10deg); pointer-events: none; }
.sy-shero-card h3 { margin: 0 0 20px; font-size: 1.35rem; font-weight: 800; color: var(--sx-ink); }
.sy-shero-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 15px; }
.sy-shero-card li { display: flex; align-items: center; gap: 12px; font-size: 1rem; color: var(--sx-ink); }
.sy-shero-card li svg { width: 22px; height: 22px; padding: 4px; flex: 0 0 auto; border-radius: 6px; background: rgba(217, 182, 147, .14); fill: none; stroke: var(--sx-gold); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* ───────────── شريط الفلترة ───────────── */
body.store-v2 .sx-toolbar {
  padding: 12px; gap: 14px; border: 1px solid var(--sx-line-2); border-radius: 14px;
  background: rgba(24, 17, 14, .86); backdrop-filter: blur(16px);
  box-shadow: 0 26px 50px -28px rgba(0, 0, 0, .85);
}
body.store-v2 .sx-search input {
  height: 48px; border-radius: 10px; border: 1px solid var(--sx-line-2); background: rgba(18, 13, 11, .7); color: var(--sx-ink);
}
body.store-v2 .sx-search input:focus { border-color: var(--sx-gold); box-shadow: 0 0 0 3px rgba(217, 182, 147, .14); }
body.store-v2 .sx-chips { gap: 6px; }
body.store-v2 .sx-chip-btn {
  position: relative; height: 44px; padding: 0 24px; border: 0; border-radius: 0; cursor: pointer; white-space: nowrap;
  font-size: .93rem; font-weight: 700; color: var(--sx-mute); background: rgba(217, 182, 147, .07);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%);
  transition: background .2s ease, color .2s ease;
}
body.store-v2 .sx-chip-btn:hover { background: rgba(217, 182, 147, .15); color: var(--sx-ink); border: 0; }
body.store-v2 .sx-chip-btn.is-active { background: var(--sx-gold-fill); color: var(--sx-on-gold); border: 0; }
body.store-v2 .sx-currency { border-radius: 10px; border: 1px solid var(--sx-line-2); background: rgba(18, 13, 11, .7); }
body.store-v2 .sx-currency button.active { color: var(--sx-on-gold); }
body.store-v2 .sx-currency::before { background: var(--sx-gold-fill); border-radius: 8px; }
body.store-v2 .sx-activate {
  height: 44px; border-radius: 4px; border: 1px solid var(--sx-line-2); background: rgba(217, 182, 147, .06); color: var(--sx-ink); transform: skewX(-10deg);
}
body.store-v2 .sx-activate > * { transform: skewX(10deg); }
body.store-v2 .sx-activate:hover { border-color: var(--sx-gold); background: rgba(217, 182, 147, .14); }

/* ───────────── الشبكة والبطاقات ───────────── */
body.store-v2 .sx-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 20px; }
body.store-v2 .sx-card {
  overflow: visible; border: 0; border-radius: 0; box-shadow: none; padding: 22px 22px 20px; gap: 14px;
  background: var(--sx-line-2); clip-path: polygon(var(--sx-cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--sx-cut));
  transition: transform .28s var(--sx-ease), background .28s ease;
}
body.store-v2 .sx-card::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; pointer-events: none;
  background: radial-gradient(300px 200px at 100% 0%, color-mix(in srgb, var(--tone, #6d503c) 38%, transparent), transparent 70%), linear-gradient(165deg, var(--sx-surface-2), var(--sx-surface) 72%);
  clip-path: polygon(calc(var(--sx-cut) - 1px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(var(--sx-cut) - 1px));
}
body.store-v2 .sx-card:hover { transform: translateY(-5px); background: var(--sx-line-3); border: 0; box-shadow: none; }

.sy-card-top { display: flex; align-items: center; justify-content: space-between; }
.sy-card-idx { font-family: var(--sx-mono, "JetBrains Mono", ui-monospace, monospace); font-size: .82rem; letter-spacing: .12em; color: var(--sx-gold-2); }
body.store-v2 .sx-card-cat {
  position: static; padding: 4px 14px; border: 0; border-radius: 0; font-size: .74rem; font-weight: 700; color: var(--sx-ink-2);
  background: rgba(217, 182, 147, .13); clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
}

body.store-v2 .sx-card-art {
  display: flex; align-items: center; justify-content: flex-start; aspect-ratio: auto; height: 96px; margin: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible;
}
body.store-v2 .sx-card-art::before {
  inset: auto; position: absolute; inset-inline-start: 0; top: 50%; width: 118px; height: 84px; margin-top: -42px;
  background: linear-gradient(145deg, rgba(217, 182, 147, .24), rgba(130, 103, 79, .1)); border: 1px solid rgba(217, 182, 147, .28); border-radius: 6px; transform: skewX(-10deg);
}
body.store-v2 .sx-card-art::after { display: none; }
body.store-v2 .sx-glyph { width: 58px; height: 58px; margin-inline-start: 30px; background: linear-gradient(180deg, #f7e8d6 0%, #d9b693 100%); filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .45)); }

body.store-v2 .sx-card-body { padding: 0; gap: 10px; }
body.store-v2 .sx-card-name { font-size: 1.4rem; font-weight: 800; letter-spacing: -.01em; }
.sy-card-desc {
  margin: 0; color: var(--sx-mute); font-size: .92rem; line-height: 1.8;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.store-v2 .sx-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--sx-line); }
body.store-v2 .sx-price { flex-wrap: wrap; align-items: baseline; gap: 2px 6px; min-height: 0; }
body.store-v2 .sx-price strong { font-size: 1.7rem; color: var(--sx-ink-2); font-family: var(--sx-mono, "JetBrains Mono", ui-monospace, monospace); letter-spacing: -.03em; }
body.store-v2 .sx-price small { font-size: .85rem; }
body.store-v2 .sx-price em { margin: 0; flex-basis: 100%; font-size: .76rem; }
body.store-v2 .sx-plans { color: var(--sx-ink-2); }
body.store-v2 .sx-card-add {
  flex: 0 0 auto; height: 46px; padding: 0 20px; border: 0; border-radius: 0; font-size: .92rem; color: var(--sx-ink); background: rgba(217, 182, 147, .14);
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); transition: background .2s ease, color .2s ease;
}
body.store-v2 .sx-card:hover .sx-card-add, body.store-v2 .sx-card-add:hover { background: var(--sx-gold-fill); color: var(--sx-on-gold); border: 0; }

/* ───────────── السلة العائمة ───────────── */
body.store-v2 .sx-fab { border-radius: 4px; transform: skewX(-8deg); background: var(--sx-gold-fill); color: var(--sx-on-gold); border: 0; }
body.store-v2 .sx-fab > * { transform: skewX(8deg); }

/* ───────────── جوال ───────────── */
@media (max-width: 960px) {
  body.store-v2 .sx-hero.sy-shero { grid-template-columns: 1fr; gap: 28px; }
  .sy-shero-card { min-height: 0; }
}
@media (max-width: 640px) {
  body.store-v2 .sx-main { padding: 108px 16px 80px; }
  body.store-v2 .sx-toolbar { grid-template-columns: 1fr; }
  body.store-v2 .sx-grid { grid-template-columns: 1fr; }
  body.store-v2 .sx-card { padding: 20px 18px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  body.store-v2 .sx-card, body.store-v2 .sx-card-add, body.store-v2 .sx-chip-btn { transition: none; }
}