/* =====================================================================
   Optimum Closets Identity — أقسام الصفحة الرئيسية
   كل القواعد تبدأ بـ .oc-home فلا تمسّ أي عنصر آخر في الموقع.
   ===================================================================== */

.oc-home, .oc-home *{ box-sizing:border-box; }
.oc-home{
  --oc-bg:#f7f4f0; --oc-ink:#1b1511; --oc-muted:#655a50; --oc-frame:#16110d;
  --oc-copper:#9a6528; --oc-copper-text:#86581f; --oc-copper-soft:#f6ede2; --oc-line:rgba(27,21,17,.10);
  --oc-font:"Readex Pro","Segoe UI",Tahoma,sans-serif;
  --oc-ease:cubic-bezier(.2,.7,.2,1);
  position:relative;
  direction:rtl;
  font-family:var(--oc-font);
  color:var(--oc-ink);
  line-height:1.8;
}
.oc-home img{ max-width:100%; display:block; }
.oc-home .oc-wrap{ max-width:1180px; margin-inline:auto; padding-inline:clamp(16px,4vw,40px); }

/* يمتد القسم بعرض الشاشة كاملاً حتى داخل حاوية الصفحة */
.oc-home.oc-bleed{
  /* --oc-vw = عرض الصفحة بدون شريط التمرير (يُحسب في oc-home.js) */
  width:var(--oc-vw,100vw);
  max-width:var(--oc-vw,100vw);
  margin-inline:calc(50% - var(--oc-vw,100vw) / 2);
}
.oc-home .oc-eyebrow{ font-size:.8rem; letter-spacing:.08em; color:var(--oc-copper-text); font-weight:600; }
body .oc-home .oc-h2{
  font-family:var(--oc-font); font-weight:400; color:var(--oc-ink);
  font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.35; margin:.3rem 0 0; text-wrap:balance; letter-spacing:0;
}
.oc-home .oc-head{ display:flex; justify-content:space-between; align-items:end; gap:1rem; flex-wrap:wrap; margin-bottom:2.2rem; }
.oc-home .oc-head__note{ color:var(--oc-muted); margin:0; max-width:30rem; }
.oc-home .oc-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:1rem 2.2rem; border-radius:3px; font-weight:600; font-size:1rem; text-decoration:none;
  font-family:var(--oc-font); cursor:pointer; transition:background-color .25s, color .25s, box-shadow .25s;
}
.oc-home .oc-btn--ghost{ background:transparent; color:var(--oc-ink); border:1px solid var(--oc-frame); }
.oc-home .oc-btn--ghost:hover{ background:var(--oc-frame); color:#fff; }

/* ---------- البانر: أبواب زجاجية تُفتح ---------- */
.oc-hero{
  --oc-hero-text:#f1e8dc; --oc-hero-led:#e3ad68;
  height:clamp(560px,90vh,920px);
  perspective:1400px;
  overflow:hidden;
  background:#17100b;
  color:var(--oc-hero-text);
  margin-bottom:0;
}
.oc-hero__scene{ position:absolute; inset:-4%; transform-style:preserve-3d; transition:transform .5s var(--oc-ease); }
.oc-hero__bg{
  position:absolute; inset:0; background-size:cover; background-position:40% 0%; background-repeat:no-repeat;
  transform:translateZ(-120px) scale(1.12);
}
.oc-hero__bg--m{ display:none; }
.oc-hero__shade{
  position:absolute; inset:0; transform:translateZ(-60px) scale(1.06);
  /* نفس توزيع الظل في بانر الجوال: الصورة في الأعلى، والعنوان على تدرّج داكن في الأسفل */
  background:
    linear-gradient(0deg,rgba(23,16,11,.97) 0%,rgba(23,16,11,.9) 16%,rgba(23,16,11,.62) 30%,rgba(23,16,11,.18) 44%,rgba(23,16,11,0) 56%),
    linear-gradient(180deg,rgba(23,16,11,.55) 0%,rgba(23,16,11,.2) 12%,rgba(23,16,11,0) 24%);
}
.oc-hero__doors{ position:absolute; inset:0; display:flex; direction:ltr; transform-style:preserve-3d; pointer-events:none; }
.oc-hero__door{
  flex:1; position:relative; transform-style:preserve-3d;
  transition:transform 1.8s cubic-bezier(.65,.02,.25,1);
  background:linear-gradient(120deg,rgba(255,255,255,.10),rgba(255,255,255,.02) 40%,rgba(255,255,255,.07));
  -webkit-backdrop-filter:blur(3px) brightness(.8); backdrop-filter:blur(3px) brightness(.8);
  border:10px solid #0b0806;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 60px rgba(0,0,0,.5);
}
.oc-hero__door::after{ content:""; position:absolute; top:18%; bottom:18%; width:4px; border-radius:4px; background:#2b2018; box-shadow:0 0 0 1px #000; }
.oc-hero__door--l{ transform-origin:left center; }
.oc-hero__door--l::after{ right:14px; }
.oc-hero__door--r{ transform-origin:right center; }
.oc-hero__door--r::after{ left:14px; }
.oc-hero.is-open .oc-hero__door--l{ transform:rotateY(104deg); }
.oc-hero.is-open .oc-hero__door--r{ transform:rotateY(-104deg); }
.oc-hero__led{
  position:absolute; top:0; inset-inline:0; height:3px; opacity:.9;
  background:linear-gradient(90deg,transparent,var(--oc-hero-led),transparent);
  box-shadow:0 0 24px 6px rgba(227,173,104,.45);
}
.oc-hero__copy{ position:absolute; inset:0; display:flex; align-items:flex-end; padding-bottom:84px; z-index:3; pointer-events:none; }
.oc-hero__copy .oc-wrap{ width:100%; }
body .oc-home.oc-hero .oc-hero__title{
  font-family:var(--oc-font); font-weight:200; color:var(--oc-hero-text);
  font-size:clamp(2.1rem,5.4vw,3.9rem); line-height:1.3; margin:0; max-width:40rem;
  text-shadow:0 2px 30px rgba(0,0,0,.6); letter-spacing:0; pointer-events:auto;
}
.oc-hero__pay{ position:absolute; bottom:20px; inset-inline:0; z-index:4; }
.oc-hero__pay .oc-wrap{ display:flex; justify-content:flex-end; }
.oc-pay{
  display:inline-flex; align-items:center; flex-wrap:wrap; gap:.4rem; padding:6px; border-radius:10px;
  background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.22);
}
.oc-pay .oc-pay__logo{ display:block; height:26px; width:auto; border-radius:4px; }

/* ---------- العجلة الدوّارة ---------- */
.oc-ring{
  background:var(--oc-bg);
  border-top:1px solid var(--oc-line);
  overflow:hidden;
  padding-block:clamp(40px,6vh,72px) clamp(4px,1vw,12px);
}
.oc-ring .oc-head{ margin-bottom:0; }
.oc-ring__stage{
  position:relative; width:100%;
  height:clamp(300px,40vw,620px); /* يُضبط بدقة بالجافاسكربت على ارتفاع العجلة */
  margin-top:0;
  perspective:2200px; perspective-origin:50% 40%;
  cursor:grab; touch-action:pan-y; -webkit-user-select:none; user-select:none;
}
.oc-ring__stage.is-dragging{ cursor:grabbing; }
.oc-ring__ring{
  --w:280px;
  position:absolute; top:50%; left:50%;
  width:var(--w); height:calc(var(--w) * .625);
  margin-left:calc(var(--w) / -2); margin-top:calc(var(--w) * -.3125 - 22px);
  transform-style:preserve-3d;
}
.oc-ring__item{
  position:absolute; inset:0; margin:0;
  -webkit-backface-visibility:hidden; backface-visibility:hidden;
  border:6px solid var(--oc-frame);
  box-shadow:0 26px 50px rgba(0,0,0,.22);
  background:#f6f3ef;
}
.oc-ring__item .oc-ring__link{ display:block; width:100%; height:100%; color:inherit; text-decoration:none; -webkit-user-drag:none; }
.oc-ring__item img{ width:100%; height:100%; object-fit:cover; pointer-events:none; transition:filter .3s; }
.oc-ring__item a.oc-ring__link:hover img{ filter:brightness(1.06); }
.oc-ring__item a.oc-ring__link:focus-visible{ outline:2px solid var(--oc-copper); outline-offset:4px; }
.oc-ring__item a.oc-ring__link:hover figcaption b{ color:var(--oc-copper-text); }
.oc-ring__item figcaption{ position:absolute; top:calc(100% + 14px); inset-inline:0; text-align:center; display:grid; gap:2px; }
.oc-ring__item figcaption b{ font-family:var(--oc-font); font-weight:400; font-size:clamp(1rem,1.4vw,1.35rem); color:var(--oc-ink); }
.oc-ring__item figcaption span{ font-size:clamp(.82rem,1vw,.98rem); color:var(--oc-muted); }
.oc-ring__floor{ position:absolute; bottom:0; inset-inline:0; height:40%; background:radial-gradient(ellipse at 50% 100%,rgba(168,115,50,.10),transparent 70%); pointer-events:none; }
.oc-ring__hint{ text-align:center; color:var(--oc-muted); font-size:.85rem; margin:0; }

/* ---------- أقسام المنتجات: 4 بطاقات في الصف على الكمبيوتر، 3 على التابلت، 2 على الجوال ---------- */
.oc-products{ padding-block:clamp(56px,9vw,104px); }
.oc-products + .oc-products{ padding-top:0; }
/* بطاقات المنتجات تبدأ قريبة من العجلة بلا فراغ كبير */
.oc-ring + .oc-products{ padding-top:clamp(20px,3vw,36px); }
.oc-products .oc-products__grid :is(.products, .wd-products, ul.products){
  --wd-col-lg:4 !important; --wd-col-md:3 !important; --wd-col-sm:2 !important; --wd-col:2 !important;
}
.oc-products .oc-products__grid ul.products:not(.wd-products){
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
  margin:0; padding:0;
}
.oc-products .oc-products__grid ul.products:not(.wd-products)::before,
.oc-products .oc-products__grid ul.products:not(.wd-products)::after{ display:none; }
.oc-products .oc-products__grid ul.products:not(.wd-products) li.product{
  width:auto !important; float:none !important; margin:0 !important;
}
.oc-home .oc-more{ display:flex; justify-content:center; margin-top:2.6rem; }

/* ---------- التفاصيل بعمق التمرير ---------- */
.oc-details{ padding-block:clamp(56px,9vw,104px); }
.oc-details__grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(24px,5vw,64px); align-items:center; }
.oc-details__txt{ min-width:0; }
.oc-feat{ list-style:none; padding:0; margin:1.6rem 0 0; display:grid; gap:1.1rem; }
.oc-feat li{ display:grid; grid-template-columns:auto 1fr; gap:.9rem; align-items:start; margin:0; }
.oc-feat li > i{ width:10px; height:10px; margin-top:.55rem; border-radius:50%; background:#423932; box-shadow:0 0 0 4px rgba(66,57,50,.12); }
.oc-feat b{ display:block; font-weight:500; font-size:1.1rem; }
.oc-feat span{ color:var(--oc-muted); font-size:.95rem; }
.oc-stack{ position:relative; aspect-ratio:1/1; max-width:100%; perspective:1100px; }
.oc-stack__layers{ position:absolute; inset:0; transform-style:preserve-3d; transform:rotateX(var(--rx,12deg)) rotateY(var(--ry,-18deg)); }
.oc-stack__layer{ position:absolute; width:62%; aspect-ratio:16/10; border:6px solid var(--oc-frame); box-shadow:0 24px 50px rgba(0,0,0,.22); background:#f6f3ef; }
.oc-stack__layer img{ width:100%; height:100%; object-fit:cover; }
.oc-stack__layer--a{ top:4%; right:2%; transform:translateZ(var(--za,-80px)); }
.oc-stack__layer--b{ top:33%; left:2%; transform:translateZ(var(--zb,0px)); }
.oc-stack__layer--c{ bottom:4%; right:16%; transform:translateZ(var(--zc,90px)); }

/* ---------- الجوال ---------- */
@media (max-width:1024px){
  .oc-products .oc-products__grid ul.products:not(.wd-products){ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:860px){
  .oc-details__grid{ grid-template-columns:1fr; }
}
@media (max-width:767px){
  .oc-products .oc-products__grid ul.products:not(.wd-products){ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px){
  .oc-hero{ height:clamp(500px,74vh,680px); }
  /* صورة خاصة بالجوال تُظهر الأم والفتاة والخزانة معاً */
  .oc-hero__bg--d{ display:none; }
  .oc-hero__bg--m{ display:block; background-position:center top; transform:translateZ(-120px) scale(1.02); }
  .oc-products .oc-products__grid ul.products:not(.wd-products){ gap:12px; }
}
@media (max-width:640px){
  .oc-hero__copy{ padding-bottom:84px; }
  .oc-hero__pay{ bottom:14px; }
  .oc-pay{ gap:.3rem; padding:5px; }
  .oc-pay .oc-pay__logo{ height:22px; }
}

@media (prefers-reduced-motion:reduce){
  .oc-home *, .oc-home *::before, .oc-home *::after{ transition:none !important; animation:none !important; }
}