/* ═══════════════════════════════════════════════════════════════════
   OPALIA — تصميم مخصّص لقالب «رائد» في سلة
   (لا يحتوي صورًا ولا منتجات — هو ينسّق ما تضيفه من لوحة سلة)
   الصق هذا الملف كاملًا في لوحة سلة:
   المتجر وقنوات البيع ← تصميم المتجر ← تخصيص النسخة ← تخصيص متقدم ←
   تخصيص باستخدام CSS

   كل المحدِّدات هنا مأخوذة من عناصر قالب رائد الفعلية
   (store-header، main-nav-container، s-block، s-product-card-entry،
   s-button-element، product-single، store-footer).
   الخطوط اللاتينية: Cormorant Garamond و Jost.
   الحروف العربية تبقى بخط متجرك المختار من إعدادات الثيم.
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300&family=Jost:wght@300;400;500&display=swap');

/* ───────────── 1. ألوان العلامة ───────────── */
html:root{
  --op-ivory:#faf7f2;
  --op-cream:#f3ece1;
  --op-sand:#e7dccb;
  --op-gold:#c2a26b;       /* على الخلفيات الداكنة فقط */
  --op-gold-deep:#85652e;  /* نص ذهبي على الخلفيات الفاتحة — 4.5:1 */
  --op-taupe:#76695a;      /* تسميات صغيرة — 4.5:1 */
  --op-ink:#251f19;
  --op-ink-2:#3a322a;
  --op-muted:#6f6455;
  --op-line:rgba(37,31,25,.12);
  --op-line-soft:rgba(37,31,25,.07);

  /* اللاتيني بخط العلامة، والعربي يسقط تلقائيًا إلى خط المتجر */
  --op-serif:"Cormorant Garamond", var(--font-main), Georgia, serif;
  --op-sans:"Jost", var(--font-main), "Segoe UI", sans-serif;
  --op-ease:cubic-bezier(.22,.61,.36,1);
  --op-ease-out:cubic-bezier(.16,1,.3,1);

  /* لون رائد الأساسي يصبح لون العلامة، فتتبعه كل مكوّنات سلة */
  --color-primary:#251f19;
  --color-primary-dark:#120f0c;
  --color-primary-d:#120f0c;
  --color-primary-light:#3a322a;
  --color-primary-l:#3a322a;
  --color-primary-reverse:#faf7f2;
  --main-text-color:#251f19;
}

/* ───────────── 2. الأساس ───────────── */
body.theme-raed{
  background:var(--op-ivory) !important;
  color:var(--op-ink);
  font-family:var(--op-sans) !important;
  -webkit-font-smoothing:antialiased;
}
body.theme-raed ::selection{ background:#e3d2b0; color:var(--op-ink); }

/* حبيبات ورقية خفيفة — تعطي ملمس المطبوعات الفاخرة */
body.theme-raed::after{
  content:""; position:fixed; inset:0; z-index:9990; pointer-events:none;
  opacity:.045; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

body.theme-raed :focus-visible{ outline:1.5px solid var(--op-gold-deep); outline-offset:3px; }

/* ───────────── 3. الشريط العلوي ───────────── */
.theme-raed .top-navbar{
  background:var(--op-ink) !important;
  color:var(--op-cream) !important;
  border:0 !important;
}
.theme-raed .top-navbar a,
.theme-raed .top-navbar button,
.theme-raed .top-navbar span{ color:inherit; }
.theme-raed .top-navbar .s-search-input{
  background:rgba(250,247,242,.08) !important;
  border-color:rgba(250,247,242,.14) !important;
  color:var(--op-ivory) !important;
}

/* ───────────── 4. الهيدر ───────────── */
.theme-raed .main-nav-container,
.theme-raed .main-nav-container .inner{
  background:rgba(250,247,242,.92) !important;
  box-shadow:none !important;
}
.theme-raed .main-nav-container{
  border-bottom:1px solid var(--op-line-soft);
}
.theme-raed .main-nav-container .inner{
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  transition:background-color .4s var(--op-ease);
}
.theme-raed .main-nav-container.fixed-pinned .inner{
  border-bottom:1px solid var(--op-line);
  box-shadow:0 1px 28px -14px rgba(37,31,25,.28) !important;
}
.theme-raed .navbar-brand img{ max-height:46px; width:auto; }

/* روابط القائمة: أحرف متباعدة صغيرة مع خط ذهبي ينساب عند المرور */
.theme-raed custom-main-menu .root-level > a{
  position:relative;
  font-family:var(--op-sans);
  font-size:.8rem !important;
  font-weight:400 !important;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--op-ink-2) !important;
}
.theme-raed custom-main-menu .root-level > a::after{
  content:""; position:absolute; inset-inline:12px; bottom:14px; height:1px;
  background:var(--op-gold-deep);
  transform:scaleX(0); transition:transform .45s var(--op-ease);
}
.theme-raed custom-main-menu .root-level > a:hover::after{ transform:scaleX(1); }
.theme-raed custom-main-menu .root-level > a:hover{ color:var(--op-gold-deep) !important; }

.theme-raed .header-btn__icon,
.theme-raed #mainnav .sicon-menu{ color:var(--op-ink) !important; }

/* ───────────── 5. أقسام الصفحة الرئيسية ───────────── */
.theme-raed .s-block{ margin-top:clamp(3rem,7vw,6rem); }

.theme-raed .s-block__title{
  align-items:flex-end;
  margin-bottom:clamp(1.4rem,3vw,2.4rem);
  padding-bottom:1rem;
  border-bottom:1px solid var(--op-line);
}
.theme-raed .s-block__title h2{
  font-family:var(--op-serif) !important;
  font-weight:400 !important;
  font-size:clamp(1.9rem,3.6vw,3rem) !important;
  line-height:1.1;
  letter-spacing:-.01em;
  color:var(--op-ink);
}
.theme-raed .s-block__display-all{
  font-size:.72rem !important;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--op-gold-deep) !important;
}

/* سلايدر الصور والبانرات: زوايا حادة وظل ناعم */
.theme-raed .s-block--photos-slider img,
.theme-raed .s-block--banners img,
.theme-raed .s-block--fixed-banner img{
  border-radius:2px !important;
}
.theme-raed .s-block--hero-slider .swiper-slide::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(37,31,25,.05),rgba(37,31,25,.45));
}
.theme-raed .s-block--hero-slider .home-slider__content{ position:relative; z-index:2; }
.theme-raed .s-block--hero-slider h2,
.theme-raed .s-block--hero-slider h3{
  font-family:var(--op-serif) !important;
  font-weight:300 !important;
  letter-spacing:-.01em;
}

/* مميزات المتجر: خطوط رفيعة بدل البطاقات الممتلئة */
.theme-raed .s-block--features__item{
  background:transparent !important;
  border:1px solid var(--op-line) !important;
  border-radius:2px !important;
  box-shadow:none !important;
  transition:background-color .4s var(--op-ease), border-color .4s var(--op-ease);
}
.theme-raed .s-block--features__item:hover{ background:var(--op-cream) !important; border-color:var(--op-sand) !important; }
.theme-raed .s-block--features__item .feature-icon,
.theme-raed .s-block--features__item i{ color:var(--op-gold-deep) !important; background:transparent !important; }

/* تبويبات المنتجات وخلفياتها الرمادية */
.theme-raed .s-block--full-bg.bg-gray-100,
.theme-raed .s-block--tabs-produtcs{ background:var(--op-cream) !important; }

/* ───────────── 6. بطاقة المنتج ───────────── */
.theme-raed .s-product-card-entry{
  background:transparent !important;
  border-radius:2px !important;
  box-shadow:none !important;
  transition:transform .55s var(--op-ease);
}
.theme-raed .s-product-card-entry:hover{ transform:translateY(-4px); }

.theme-raed .s-product-card-image{
  position:relative;
  overflow:hidden;
  background:var(--op-cream) !important;
  border-radius:2px !important;
}
.theme-raed .s-product-card-image img{
  transition:transform 1.1s var(--op-ease) !important;
}
.theme-raed .s-product-card-entry:hover .s-product-card-image img{ transform:scale(1.05); }
/* إطار داخلي رفيع يظهر عند المرور */
.theme-raed .s-product-card-image::after{
  content:""; position:absolute; inset:10px; pointer-events:none;
  border:1px solid rgba(250,247,242,.7);
  opacity:0; transition:opacity .5s var(--op-ease);
}
.theme-raed .s-product-card-entry:hover .s-product-card-image::after{ opacity:1; }

.theme-raed .s-product-card-content{ padding-inline:.25rem !important; }
.theme-raed .s-product-card-content-title,
.theme-raed .s-product-card-content-title a{
  font-family:var(--op-serif) !important;
  font-weight:500 !important;
  font-size:1.15rem !important;
  line-height:1.35 !important;
  color:var(--op-ink) !important;
}
.theme-raed .s-product-card-content-subtitle{ color:var(--op-muted) !important; font-size:.8rem; }
.theme-raed .s-product-card-price{
  font-family:var(--op-sans) !important;
  font-weight:400 !important;
  letter-spacing:.06em;
  color:var(--op-gold-deep) !important;
}
/* رائد يلوّن سعر التخفيض بالأحمر على h4 الداخلي لا على الحاوية */
.theme-raed .s-product-card-sale-price h4,
.theme-raed .s-product-card-sale-price h4 i{
  color:var(--op-ink) !important;
  font-weight:500 !important;
}
.theme-raed .s-product-card-sale-price span,
.theme-raed .s-product-card-sale-price span i{
  color:var(--op-taupe) !important;
  text-decoration:line-through;
  text-decoration-color:rgba(118,105,90,.6);
}
.theme-raed .s-product-card-rating i{ color:var(--op-gold) !important; }
.theme-raed .s-product-card-promotion-title{
  background:var(--op-ink) !important; color:var(--op-ivory) !important;
  border-radius:20px !important; font-size:.66rem; letter-spacing:.12em;
}
.theme-raed .s-product-card-out-badge{
  background:rgba(250,247,242,.9) !important; color:var(--op-taupe) !important;
  letter-spacing:.14em; font-size:.66rem; text-transform:uppercase;
}
.theme-raed .s-product-card-wishlist-btn button{
  background:rgba(250,247,242,.92) !important;
  border-color:transparent !important;
  color:var(--op-ink) !important;
}

/* ───────────── 7. الأزرار ───────────── */
.theme-raed .s-button-element.s-button-btn{
  border-radius:2px !important;
  font-family:var(--op-sans) !important;
  font-weight:400 !important;
  font-size:.74rem !important;
  letter-spacing:.16em;
  text-transform:uppercase;
  min-height:46px;
  transition:background-color .4s var(--op-ease), color .4s var(--op-ease), border-color .4s var(--op-ease) !important;
}
/* ممتلئ: حبر داكن ← ذهبي عند المرور */
.theme-raed .s-button-element.s-button-solid.s-button-primary{
  background:var(--op-ink) !important;
  border-color:var(--op-ink) !important;
  color:var(--op-ivory) !important;
}
.theme-raed .s-button-element.s-button-solid.s-button-primary:hover{
  background:var(--op-gold-deep) !important;
  border-color:var(--op-gold-deep) !important;
}
/* محدَّد: إطار رفيع يمتلئ عند المرور */
.theme-raed .s-button-element.s-button-outline[class*="s-button-primary"]{
  background:transparent !important;
  border:1px solid rgba(37,31,25,.32) !important;
  color:var(--op-ink) !important;
}
.theme-raed .s-button-element.s-button-outline[class*="s-button-primary"]:hover{
  background:var(--op-ink) !important;
  border-color:var(--op-ink) !important;
  color:var(--op-ivory) !important;
}

/* حقول الإدخال */
.theme-raed .s-form-control,
.theme-raed input.form-input,
.theme-raed textarea.form-input{
  border-radius:2px !important;
  border-color:var(--op-line) !important;
  background:#fffdf9 !important;
}
.theme-raed .s-form-control:focus{ border-color:var(--op-gold-deep) !important; box-shadow:0 0 0 3px rgba(194,162,107,.18) !important; }

/* ───────────── 8. صفحة المنتج ───────────── */
.product-single .breadcrumbs{ font-size:.75rem; letter-spacing:.06em; }

.product-single .sidebar salla-slider,
.product-single .sidebar .swiper-slide{ background:var(--op-cream) !important; border-radius:2px !important; }

.product-single .main-content h1{
  font-family:var(--op-serif) !important;
  font-weight:400 !important;
  font-size:clamp(2rem,3.4vw,3rem) !important;
  line-height:1.1 !important;
  letter-spacing:-.015em;
  color:var(--op-ink) !important;
  margin-bottom:1rem !important;
}
.product-single .product-entry__sub-title{ color:var(--op-muted) !important; font-size:.95rem !important; }

.product-single .total-price,
.product-single .main-content .text-red-800{
  font-family:var(--op-serif) !important;
  font-weight:500 !important;
  font-size:1.9rem !important;
  color:var(--op-ink) !important;
}
.product-single .main-content .line-through{ color:var(--op-taupe) !important; }

/* Cormorant يرسم الأرقام بالنمط القديم (الـ5 تنزل تحت السطر) — جميل في النص،
   لكنه يصعّب قراءة الأسعار. أرقام مستقيمة لكل سعر. */
.product-single .total-price,
.product-single .main-content .line-through,
.theme-raed .s-product-card-price,
.theme-raed .s-product-card-sale-price{
  font-variant-numeric:lining-nums;
  font-feature-settings:"lnum" 1;
}

.product-single .product__description{
  color:var(--op-muted);
  line-height:1.95 !important;
  font-size:.96rem;
  border-top:1px solid var(--op-line);
  padding-top:1.4rem !important;
}
.product-single .product-form{
  border-top:1px solid var(--op-line-soft);
  padding-top:1.2rem;
}
.product-single .sticky-product-bar{
  background:#fffdf9 !important;
  border:1px solid var(--op-line);
  border-radius:2px !important;
  box-shadow:none !important;
}
.product-single salla-quantity-input{ border-color:var(--op-line) !important; border-radius:2px !important; }

/* ───────────── 9. صفحة القائمة والسلة ───────────── */
.theme-raed #page-main-title{
  font-family:var(--op-serif) !important;
  font-weight:400 !important;
  font-size:clamp(1.8rem,3vw,2.6rem) !important;
}

/* ───────────── 10. الفوتر ───────────── */
.theme-raed .store-footer,
.footer-is-light .store-footer{
  background:var(--op-ink) !important;
  color:rgba(250,247,242,.72) !important;
  margin-top:clamp(4rem,9vw,8rem) !important;
}
.theme-raed .store-footer__inner,
.footer-is-light .store-footer .store-footer__inner{
  background:transparent !important;
  border-bottom:1px solid rgba(250,247,242,.12) !important;
  padding-block:clamp(3rem,6vw,5rem) !important;
}
.theme-raed .store-footer h3{
  font-family:var(--op-serif) !important;
  font-weight:400 !important;
  font-size:1.5rem !important;
  color:var(--op-ivory) !important;
  letter-spacing:.02em;
}
.theme-raed .store-footer a,
.theme-raed .store-footer p,
.theme-raed .store-footer li,
.theme-raed .store-footer span,
.theme-raed .store-footer b{ color:rgba(250,247,242,.72) !important; }
.theme-raed .store-footer a:hover{ color:var(--op-gold) !important; opacity:1 !important; }
.theme-raed .store-footer .social-link{ border-color:rgba(250,247,242,.2) !important; }
.theme-raed .store-footer .contact-social{ border-color:rgba(250,247,242,.12) !important; }
.theme-raed .copyright-text p{ color:rgba(250,247,242,.5) !important; }

/* ───────────── 11. دخول الصفحة (CSS فقط — بلا وميض) ───────────── */
@keyframes op-fade{ from{ opacity:0; } to{ opacity:1; } }
/* المحتوى يظهر تدريجيًا عند فتح الصفحة. ثلاثة قيود اكتُشفت على متجر حقيقي:
   • شفافية فقط بلا transform — الـ transform يجعل العناصر المثبّتة داخله تقفز.
   • backwards لا both — الحركة التي «تبقى» بعد انتهائها تُنشئ سياق تكديس دائمًا،
     فيُرسم محتوى الصفحة فوق الهيدر المثبّت (z-index 29) عند التمرير.
   • لا حركة على الهيدر نفسه للسبب ذاته. */
.theme-raed #main-content{ animation:op-fade 1s .1s var(--op-ease-out) backwards; }

/* الظهور عند التمرير — يُفعَّل فقط عندما يضيف ملف JS الكلاس op-js،
   فلا يختفي أي محتوى إن لم يعمل الجافاسكربت */
.op-js .op-reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity 1s var(--op-ease-out), transform 1.1s var(--op-ease-out);
  transition-delay:var(--op-delay,0ms);
}
.op-js .op-reveal.op-in{ opacity:1; transform:none; }

/* شريط تقدّم القراءة */
.op-progress{
  position:fixed; top:0; left:0; right:0; z-index:9995; height:2px;
  background:linear-gradient(90deg,#e3d2b0,var(--op-gold-deep));
  transform:scaleX(0); transform-origin:left; pointer-events:none;
}
[dir="rtl"] .op-progress{ transform-origin:right; }

/* حلقة تتبع المؤشر — إضافية، لا تُخفي مؤشر النظام */
.op-cursor{
  position:fixed; top:0; left:0; z-index:9996; pointer-events:none;
  width:34px; height:34px; margin:-17px 0 0 -17px; border-radius:50%;
  border:1px solid rgba(133,101,46,.45);
  transition:width .3s var(--op-ease), height .3s var(--op-ease), margin .3s var(--op-ease), background-color .3s var(--op-ease), opacity .3s;
  opacity:0;
}
.op-cursor.is-on{ opacity:1; }
.op-cursor.is-hover{ width:56px; height:56px; margin:-28px 0 0 -28px; background:rgba(194,162,107,.1); }

/* ───────────── 12. الأقسام التي يضيفها ملف JS ───────────── */

/* 12.1 واجهة العلامة */
.op-hero{
  position:relative; overflow:hidden;
  background:linear-gradient(100deg,var(--op-ivory) 10%,var(--op-cream) 70%,#efe5d6);
  padding:clamp(4.5rem,11vw,9rem) 0 clamp(4rem,9vw,7.5rem);
}
.op-hero__glow{
  position:absolute; border-radius:50%; filter:blur(70px); pointer-events:none;
  background:radial-gradient(circle,rgba(226,206,168,.75),transparent 68%);
  width:46vw; height:46vw; top:-14%; inset-inline-end:-8%;
  animation:op-float 20s ease-in-out infinite alternate;
}
.op-hero__sweep{
  position:absolute; inset:0; pointer-events:none; opacity:.45;
  background:linear-gradient(104deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);
  animation:op-sweep 14s ease-in-out infinite;
}
@keyframes op-float{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(-4vw,3vh,0) scale(1.1); } }
@keyframes op-sweep{ 0%{ transform:translateX(-45%); opacity:0; } 25%{ opacity:.5; } 100%{ transform:translateX(45%); opacity:0; } }

.op-hero__inner{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.op-hero__eyebrow{
  display:flex; align-items:center; justify-content:center; gap:.85rem; margin:0 0 1.6rem;
  font-size:.68rem; letter-spacing:.32em; text-transform:uppercase; color:var(--op-taupe);
}
.op-hero__eyebrow::before,
.op-hero__eyebrow::after{ content:""; width:42px; height:1px; background:var(--op-gold-deep); }
.op-hero__ar{
  margin:0 0 .3rem;
  font-size:clamp(1.8rem,4vw,3.2rem); line-height:1.4; color:var(--op-gold-deep);
}
/* الاسم بأحرف لاتينية كبيرة متباعدة — مثل الشعار المطبوع على العبوة */
.op-hero__name{
  margin:0 0 1.6rem;
  font-family:"Cormorant Garamond", Georgia, serif; font-weight:300;
  font-size:clamp(3rem,10vw,8rem); line-height:1;
  letter-spacing:.16em;
  /* التباعد يضيف فراغًا بعد آخر حرف (يمينه، لأن النص لاتيني) — حشوة مساوية
     من اليسار تعيده إلى المنتصف. فعلية لا منطقية: في الصفحة العربية
     padding-inline-start تصبح يمينًا فتضاعف الانحراف بدل أن تعوّضه */
  padding-left:.16em;
  color:var(--op-ink);
}
.op-hero__lede{
  max-width:38ch; margin:0 0 2.4rem;
  font-family:var(--op-serif); font-style:italic; font-weight:300;
  font-size:clamp(1.15rem,1.7vw,1.6rem); line-height:1.55; color:var(--op-ink-2);
}
.op-hero__cta{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:1rem 2.4rem; min-height:52px;
  background:var(--op-ink); color:var(--op-ivory) !important;
  border:1px solid var(--op-ink); border-radius:2px;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase;
  transition:background-color .45s var(--op-ease), border-color .45s var(--op-ease);
}
.op-hero__cta:hover{ background:var(--op-gold-deep); border-color:var(--op-gold-deep); }

/* 12.2 الشريط المتحرك */
.op-ribbon{
  overflow:hidden; background:var(--op-ink); color:var(--op-cream);
  padding:1.05rem 0; margin-top:0 !important;
}
.op-ribbon__track{ display:flex; width:max-content; animation:op-marquee 38s linear infinite; }
[dir="rtl"] .op-ribbon__track{ animation-name:op-marquee-rtl; }
.op-ribbon__group{ display:flex; align-items:center; gap:2.4rem; padding-inline-end:2.4rem; white-space:nowrap; }
.op-ribbon__group span{ font-family:var(--op-serif); font-size:1.12rem; letter-spacing:.1em; }
.op-ribbon__group i{ font-style:normal; color:var(--op-gold); font-size:.7rem; }
@keyframes op-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes op-marquee-rtl{ from{ transform:translateX(0); } to{ transform:translateX(50%); } }

/* ───────────── 13. الجوال ───────────── */
@media (max-width:640px){
  .theme-raed custom-main-menu .root-level > a{ letter-spacing:.06em; }
  .op-hero{ padding:3.5rem 0 3.5rem; }
  .op-hero__name{ letter-spacing:.1em; padding-left:.1em; }
  .op-hero__eyebrow::before, .op-hero__eyebrow::after{ width:24px; }
  .op-hero__cta{ width:100%; }
  .theme-raed .s-product-card-content-title,
  .theme-raed .s-product-card-content-title a{ font-size:1rem !important; }
}

/* ───────────── 14. تقليل الحركة ───────────── */
@media (prefers-reduced-motion: reduce){
  .theme-raed #main-content,
  .op-hero__glow, .op-hero__sweep, .op-ribbon__track{ animation:none !important; }
  .op-js .op-reveal{ opacity:1; transform:none; transition:none; }
  .theme-raed .s-product-card-entry:hover,
  .theme-raed .s-product-card-entry:hover .s-product-card-image img{ transform:none; }
  .op-cursor{ display:none; }
}

/* الطباعة */
@media print{ body.theme-raed::after, .op-progress, .op-cursor{ display:none !important; } }