/* ═══════════════════════════════════════════════════════════════════
   home-redesign.css — سكين "PRIME الملكي" للصفحة الرئيسية.
   الهوية: أسود دافي + دهبي (من تجارب crown/prime) — تاج + Cinzel + خطوط شعر.
   يتحمّل بعد styles.css وعلى index.html بس، وبيحافظ على كل هوكات الـJS
   (theme.js / intro.js / hero.js / home-fx.js / index.js) زي ما هي.
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Amiri:ital,wght@0,700;1,700&display=swap');

/* أكسنت دهبي في الثيمين — على الفاتح دهبي غامق شوية عشان التباين */
:root           { --ph-gold:#a8862a; --ph-gold2:#c9a63e; --ph-hair:rgba(168,134,42,.28); }
html.theme-dark { --ph-gold:#d4af37; --ph-gold2:#e9c44c; --ph-hair:rgba(212,175,55,.26); }

@keyframes phGlow  { 0%,100%{ opacity:.4; transform:translateX(-50%) scale(1); } 50%{ opacity:.65; transform:translateX(-50%) scale(1.05); } }
@keyframes phFloat { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }

/* ═══════════════ عرض كامل: حواف المتصفح هي الحواف — مفيش كونتينر وهمي ═══════════════ */
main.container{ width:100%; max-width:100%; }
.topbar .container{
  width:100%; max-width:100%;
  padding-inline:clamp(12px, 2.5vw, 24px);
}

/* ═══════════════ TOPBAR: زجاج أسود + خط شعر دهبي ═══════════════ */
.topbar{
  background:color-mix(in srgb, var(--bg) 78%, transparent) !important;
  -webkit-backdrop-filter:blur(14px) saturate(1.2); backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--ph-hair) !important;
}
.topbar-inner{ padding:9px 0 !important; }
.logo{ font-size:28px !important; letter-spacing:.06em; }

/* الأزرار: دايرة أيقونة بس */
.icon-btn{
  width:40px; height:40px; padding:0 !important; border-radius:12px !important;
  display:inline-flex; align-items:center; justify-content:center; font-size:16px;
  background:var(--card) !important; color:var(--text) !important; border:1px solid var(--border) !important;
}
.icon-btn .icon-btn-label{ display:none !important; }
.icon-btn:hover{ border-color:var(--ph-gold) !important; box-shadow:0 0 16px -7px var(--ph-gold) !important; transform:translateY(-1px); }
.icon-btn:active{ transform:scale(.94); }

/* ═══════════════ HERO ═══════════════ */
.phx-hero-track{ position:relative; z-index:1; height:185vh; }
.phx-hero{
  position:sticky; top:var(--ph-top,56px); overflow:hidden; z-index:1;
  height:calc(100svh - var(--ph-top,56px));
  background:var(--bg);
}
/* توهّج دهبي واحد هادي ورا المحتوى — من غير شبكة نقط ولا نجوم */
.phx-hero::after{
  content:""; position:absolute; left:50%; top:30%; width:min(760px,88%); height:58%;
  transform:translateX(-50%); z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--ph-gold) 13%, transparent), transparent 72%);
}

/* كلمة PRIME الشبح (Outline — تصميم 7 من المرجع) */
.phx-decor{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.phx-ghost{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  font-family:"Cinzel",serif; font-weight:900; font-size:clamp(120px,24vw,380px);
  line-height:.9; letter-spacing:.04em; white-space:nowrap; margin:0;
  color:transparent; -webkit-text-stroke:1.3px var(--ph-hair); opacity:.8;
  transition:transform .25s cubic-bezier(.2,.9,.2,1), opacity .25s linear; will-change:transform,opacity;
}

/* الماركيه: شريط دهبي غامق حافة لحافة */
.phx-marquee{
  border-radius:0 !important; margin:0 !important; position:relative; z-index:2; will-change:transform,opacity;
  background:var(--ph-gold) !important; color:#171105 !important;
}
.phx-marquee-track{ animation-duration:36s !important; }
.phx-marquee-track span{ font-weight:800; }
.phx-marquee-track i{ color:#171105 !important; opacity:.55 !important; }

/* المحتوى جوّه الهيرو: متوسّط بحد أقصى 1200 وبـpadding من حواف المتصفح */
.phx-hero-inner{
  grid-template-columns:1.15fr .85fr !important; gap:34px !important;
  position:relative; z-index:2;
  width:min(1200px, 100%); margin-inline:auto;
  padding:16px clamp(16px, 3vw, 40px) !important;
}

/* ── عمود الكلام ── */
.phx-hero-text{ transition:transform .25s cubic-bezier(.2,.9,.2,1); will-change:transform; }

.phx-kicker{
  font-family:"Cinzel",serif; font-weight:700; color:var(--ph-gold);
  font-size:12px; letter-spacing:.34em; margin-bottom:12px;
}
.phx-h1{
  font-family:"Amiri",serif !important; font-weight:700 !important;
  font-size:clamp(44px,6.6vw,86px) !important; line-height:1.28 !important; letter-spacing:0 !important;
}
.phx-h1 em{ font-style:italic; -webkit-text-stroke:0 !important; color:var(--ph-gold2) !important; }

/* الخط الفاصل: شعرة دهبي بنجمة في الأول (زي rule بتاع تصميم 8) */
.phx-rule{
  max-width:340px; height:1px !important; background:linear-gradient(90deg, var(--ph-gold), transparent) !important;
  position:relative; margin:18px 0 16px;
}
.phx-rule::before{
  content:"✦"; position:absolute; inset-inline-start:0; top:50%; transform:translateY(-50%);
  color:var(--ph-gold); font-size:11px; background:var(--bg); padding-inline-end:8px;
}
.phx-sub{ max-width:44ch; line-height:1.9; font-size:clamp(14px,1.6vw,16.5px) !important; }

/* CTA: دهبي مصمت + رابط شعري */
.phx-cta-primary{
  background:linear-gradient(180deg, var(--ph-gold2), var(--ph-gold)) !important; color:#171105 !important;
  font-weight:900 !important; letter-spacing:.02em;
  box-shadow:0 10px 26px -12px var(--ph-gold);
  transition:transform .18s cubic-bezier(.2,.9,.2,1), box-shadow .2s !important;
}
.phx-cta-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -12px var(--ph-gold); }
.phx-cta-ghost{ color:var(--ph-gold) !important; border-bottom:1px solid var(--ph-hair) !important; font-weight:700; }
.phx-cta-ghost:hover{ border-bottom-color:var(--ph-gold) !important; }

.phx-trust{ gap:14px !important; }
.phx-trust b{ color:var(--ph-gold); font-weight:900; margin-inline-end:2px; }

/* ── العمود البصري: التيشرت عايم فوق قاعدة نور دهبي ── */
.phx-hero-visual{ position:relative; z-index:2; display:flex; align-items:center; justify-content:center; }
.phx-arrow, .phx-gal{ display:none !important; }
.phx-stage{ position:relative; background:none !important; padding:0 !important; border:none !important; box-shadow:none !important; transition:transform .25s cubic-bezier(.2,.9,.2,1); will-change:transform; }
.phx-stage::before{
  content:""; position:absolute; left:50%; bottom:-5%; width:80%; height:18%;
  transform:translateX(-50%); z-index:0; pointer-events:none;
  background:radial-gradient(ellipse at center, var(--ph-gold2), transparent 70%);
  filter:blur(26px); animation:phGlow 4s ease-in-out infinite;
}
.phx-shirt-slot{ position:relative; z-index:1; }
.phx-slides{
  position:relative !important; z-index:1;
  width:clamp(230px,27vw,330px) !important; height:auto !important; aspect-ratio:3/4;
  border-radius:0; overflow:visible; background:none !important;
  border:none !important; box-shadow:none !important;
  animation:phFloat 6s ease-in-out infinite;
}
.phx-slide{ object-fit:contain !important; padding:0; filter:drop-shadow(0 26px 34px rgba(0,0,0,.3)); }
html.theme-dark .phx-slide{ filter:drop-shadow(0 26px 38px rgba(0,0,0,.65)); }
.phx-fallback{ width:66% !important; filter:drop-shadow(0 26px 34px rgba(0,0,0,.3)); }
.phx-live{
  top:2px !important; inset-inline-end:2px !important; z-index:3;
  background:var(--ph-gold) !important; color:#171105 !important;
  font-weight:900; font-size:10.5px; border-radius:999px; padding:5px 11px;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.4);
}

.phx-scroll-hint{ position:relative; z-index:2; will-change:transform,opacity; color:var(--ph-gold) !important; }

/* ═══════ المنتجات: شيت بيطلع فوق الهيرو بحافة دهبي ═══════ */
.phx-products{
  position:relative; z-index:2;
  margin-top:-26px;
  /* الخلفية عرض المتصفح كله، والمحتوى جوّاها متوسّط لحد 1200 */
  padding:38px max(16px, calc((100vw - 1200px) / 2)) 8px !important;
  background:var(--bg) !important;
  border-top:1px solid var(--ph-hair);
  border-radius:26px 26px 0 0;
  box-shadow:0 -30px 60px -22px rgba(0,0,0,.3);
}
html.theme-dark .phx-products{ box-shadow:0 -30px 60px -22px rgba(0,0,0,.55); }
.phx-products-head{ margin-bottom:18px; align-items:flex-end; }
.phx-products-title{ font-size:clamp(26px,3.4vw,38px) !important; letter-spacing:-.01em; }
.phx-products-title::before{
  content:"The Collection"; display:block;
  font-family:"Cinzel",serif; font-weight:700; font-size:11px;
  letter-spacing:.34em; text-transform:uppercase; color:var(--ph-gold); margin-bottom:8px;
}

/* زر التصفية */
.cat-filter-btn:hover{ border-color:var(--ph-gold) !important; color:var(--ph-gold) !important; }

/* ═══════ الكروت: بوتيك — صورة + اسم + سعر، من غير زرار ═══════ */
.grid .card{ border:1px solid var(--border); }
.grid .card:hover{ border-color:var(--ph-hair); box-shadow:0 18px 40px -18px rgba(0,0,0,.4), 0 0 0 1px var(--ph-hair); }
html.theme-dark .grid .card:hover{ box-shadow:0 18px 40px -14px rgba(0,0,0,.7), 0 0 0 1px var(--ph-hair); }
.grid .card .btn{ display:none !important; }
.grid .card .card-title{ font-weight:800; }
.grid .card .price{ color:var(--ph-gold); font-weight:900; }
.grid .card .price.was{ color:var(--muted); }
.grid .card .chip{ background:var(--ph-gold) !important; color:#171105 !important; font-weight:900; }

/* إخفاء/كشف الديكور مع الإنترو */
html.intro-playing .phx-decor{ opacity:0 !important; }
html.intro-reveal  .phx-decor{ animation:pageRiseIn .8s cubic-bezier(.2,.9,.2,1) both .5s; }

/* ═══════════════ ريسبونسيف ═══════════════ */
@media (max-width: 980px){
  .phx-hero-inner{ grid-template-columns:1.06fr .94fr !important; gap:24px !important; }
  .phx-ghost{ font-size:30vw; }
}
@media (max-width: 860px){
  /* موبايل: الشريط المتحرك والتيشرت يختفوا — الكلام لوحده في نص الشاشة بالظبط */
  .phx-marquee{ display:none !important; }
  .phx-hero-visual{ display:none !important; }
  .phx-hero-inner{
    grid-template-columns:1fr !important; gap:0 !important; text-align:center;
    align-content:center; justify-items:center;
  }
  .phx-rule{ margin-inline:auto; }
  .phx-rule::before{ inset-inline-start:50%; transform:translate(50%,-50%); padding-inline:8px; }
  .phx-sub{ margin-inline:auto; }
  .phx-cta{ justify-content:center; }
  .phx-trust{ justify-content:center; flex-wrap:wrap; }
  .phx-hero-visual{ order:2; }
  .phx-slides{ width:min(290px,64vw) !important; }
}
@media (max-width: 560px){
  .phx-slides{ width:min(240px,58vw) !important; }
  .phx-h1{ font-size:clamp(34px,9.4vw,48px) !important; }
  .phx-ghost{ font-size:44vw; opacity:.5; -webkit-text-stroke-width:1px; }
  .phx-sub{ font-size:14px; }
  .phx-products{ margin-top:-22px; border-radius:20px 20px 0 0; padding-top:30px !important; }
}

@media (prefers-reduced-motion: reduce){
  .phx-slides, .phx-stage::before, .phx-marquee-track{ animation:none !important; }
  .phx-ghost, .phx-hero-text, .phx-stage{ transition:none !important; }
}