/* ==== خط كايرو لكامل المتجر ==== */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800&display=swap');
html,body{font-family:'Cairo',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif!important}
body *:not(i):not(svg):not([class*=sicon]):not([class*=icon]){font-family:inherit!important}
h1,h2,h3,h4,h5,h6,p,span,a,li,button,input,select,textarea,label,td,th,small,strong{font-family:'Cairo',system-ui,'Segoe UI',Tahoma,sans-serif!important}
:root{--rx-dark:#152A1F;--rx-darker:#0F1F17;--rx-gold:#C9A24B;--rx-gold-dark:#B8860B;--rx-cream:#F8F6F1}
/* ===================== HEADER ===================== */
.store-header .top-navbar{background:var(--rx-dark)!important;color:rgba(248,246,241,.85)!important;min-height:44px;padding-block:8px!important}
.topnav-is-dark .top-navbar .s-search-input{background:rgba(255,255,255,.12)!important;color:#fff!important;border:none!important}
.topnav-is-dark .top-navbar .s-search-input::placeholder{color:rgba(248,246,241,.6)!important}
.store-header .top-navbar .btn--rounded-gray,.store-header .top-navbar .btn--circle-gray{background:rgba(255,255,255,.12)!important;color:rgba(248,246,241,.85)!important;border:none!important}
.store-header .top-navbar .topnav-link-item{color:rgba(248,246,241,.8)!important}
.store-header salla-contacts a,.store-header salla-contacts span{color:rgba(248,246,241,.85)!important}
.store-header .main-nav-container{background:#fff!important;box-shadow:0 1px 0 #EAE7E1!important}
.navbar-brand img{max-height:56px!important;max-width:190px!important}
.header-btn__icon{border-color:#EAE7E1!important;color:#1A1A1A!important}
.s-cart-summary-count{background:var(--rx-gold)!important;color:var(--rx-dark)!important;font-weight:800!important}
#nav-cart .s-cart-summary-total{color:#1A1A1A!important}
/* ===================== FOOTER — roshay.sa ===================== */
.store-footer{background:var(--rx-darker)!important;margin-top:56px;font-family:Cairo,system-ui,sans-serif}
.store-footer a{transition:color .25s,opacity .2s}
.store-footer__inner{background:var(--rx-dark)!important;border-bottom:1px solid rgba(248,246,241,.12)!important;padding:52px 0 40px!important}
/* العناوين: ذهبية + خط متدرج قصير (مثل الموقع القديم) */
.store-footer h3{color:var(--rx-gold)!important;font-size:14px!important;font-weight:800!important;letter-spacing:.08em!important;display:inline-block!important;position:relative!important;padding-bottom:8px!important;margin:0 0 16px!important}
.store-footer h3::after{content:""!important;position:absolute!important;bottom:0!important;right:0!important;width:28px!important;height:2px!important;background:linear-gradient(90deg,var(--rx-gold),transparent)!important;border-radius:2px!important}
/* عمود البراند: الاسم أبيض كبير بدون خط */
.store-footer .store-footer__inner .container>div:first-child h3,
.store-footer .store-footer__inner div[class*="col-span-2"] h3{color:var(--rx-cream)!important;font-size:17px!important}
.store-footer .store-footer__inner .container>div:first-child h3::after,
.store-footer .store-footer__inner div[class*="col-span-2"] h3::after{display:none!important}
.store-footer .max-w-sm{color:rgba(248,246,241,.75)!important;font-size:14px!important;line-height:1.85!important}
/* 4 أعمدة (براند | روابط هامة | منتجات/تطبيقات | تواصل) */
.store-footer__inner .container{grid-template-columns:1.5fr 1fr 1fr 1.2fr!important;gap:clamp(28px,4vw,52px)!important}
.store-footer__inner .container>div:first-child{grid-column:span 1!important}
/* ===== RX REV LAYOUT v1 — صف 3/2/1 بطاقات + أسهم بجانب العنوان ===== */
body .s-block--custom-testimonials salla-slider{position:relative !important;display:block !important}
body .s-block--custom-testimonials .s-slider-block__title{position:absolute !important;top:0 !important;left:0 !important;right:0 !important;margin:0 !important;padding:0 !important;height:0 !important;transform:translateY(calc(-1 * var(--rxrevUp,72px))) !important;display:block !important;pointer-events:none !important;z-index:7 !important}
body .s-block--custom-testimonials .s-slider-block__title-left{display:block !important;width:100% !important;height:0 !important}
body .s-block--custom-testimonials .s-slider-block__title-nav{position:absolute !important;top:0 !important;left:50% !important;right:auto !important;transform:translate(-50%,-50%) !important;display:flex !important;align-items:center !important;justify-content:space-between !important;width:min(480px,calc(100% - 8px)) !important;height:auto !important;margin:0 !important;padding:0 !important;gap:0 !important}
body .s-block--custom-testimonials .s-slider-block__title-nav .s-slider-nav-arrow{pointer-events:auto !important}
/* الأسهم مفعّلة دائمًا مع وضع اللف — لا نخفتها */
body .s-block--custom-testimonials .s-slider-nav-arrow[aria-disabled="true"]{opacity:1 !important;cursor:pointer !important;box-shadow:0 6px 18px rgba(21,42,31,.09) !important}
/* بطاقات متكافئة: إلغاء تمييز "النشطة" عند تعدد البطاقات (بدون لمس التصميم الأساسي) */
@media(min-width:640px){
body .s-block--custom-testimonials .swiper-slide-active:not(:hover) .s-reviews-testimonial{transform:none !important;border-color:rgba(31,59,44,.10) !important;box-shadow:0 10px 30px rgba(21,42,31,.07) !important}
body .s-block--custom-testimonials .swiper-slide-active .s-reviews-testimonial::before{opacity:.85 !important;height:3px !important}
body .s-block--custom-testimonials .swiper-slide:not(.swiper-slide-active):not(:hover) .s-reviews-testimonial{background:#fff !important;opacity:1 !important;border-color:rgba(31,59,44,.10) !important;box-shadow:0 10px 30px rgba(21,42,31,.07) !important}
}
/* شريحتان بين 640–900 (يغلب قاعدة العرض الكامل للموبايل) */
@media(min-width:640px) and (max-width:900px){
body .s-block--custom-testimonials .swiper-slide{width:calc((100% - 28px)/2) !important;flex:0 0 calc((100% - 28px)/2) !important}
}
/* ===== /RX REV LAYOUT ===== */
/* ===== RX FOOTER MOBILE ===== */
/* الجوال: القاعدة المفروضة 1.5fr 1fr 1fr 1.2fr كسرت الفوتر على الشاشات الصغيرة.
الحل: براند كامل العرض ← روابط مهمة + منتجاتنا بعمودين ← تواصل معنا كامل العرض. */
@media(max-width:1023px){
.store-footer .store-footer__inner .container{grid-template-columns:1fr 1fr!important;gap:30px 18px!important}
.store-footer .store-footer__inner .container>div:first-child{grid-column:1/-1!important}
.store-footer .store-footer__inner .container>div:nth-child(4){grid-column:1/-1!important}
}
/* الروابط */
.store-footer salla-menu{display:block!important}
.store-footer salla-menu a{color:rgba(248,246,241,.75)!important;font-size:14px!important;text-decoration:none!important;transition:color .25s!important}
.store-footer salla-menu a:hover{color:var(--rx-gold)!important}
/* السوشيال — دوائر الموقع القديم 42px */
.store-footer .social-link{width:42px!important;height:42px!important;border-radius:50%!important;display:grid!important;place-items:center!important;border:1px solid rgba(248,246,241,.22)!important;color:var(--rx-cream)!important;background:transparent!important;transition:all .3s ease!important}
.store-footer .social-link:hover{background:linear-gradient(135deg,var(--rx-gold),var(--rx-gold-dark))!important;border-color:var(--rx-gold)!important;color:#fff!important;transform:translateY(-3px)!important;box-shadow:0 10px 24px rgba(184,134,11,.4)!important}
.store-footer .contact-social{border-top:1px solid rgba(248,246,241,.1)!important;margin-top:18px!important;padding-top:16px!important}
/* نصوص + الاتصالات */
.store-footer p,.store-footer li{color:rgba(248,246,241,.75)!important}
.store-footer salla-contacts a,.store-footer salla-contacts span{color:rgba(248,246,241,.85)!important}
.store-footer salla-contacts svg{color:var(--rx-gold)!important}
/* الشريط السفلي — أغمق + تباين مقروء */
.store-footer>div.py-4, .store-footer div[class*="justify-between"]{background:var(--rx-darker)!important;border-top:1px solid rgba(248,246,241,.12)!important}
.store-footer .copyright-text, .store-footer .copyright-text *{color:rgba(248,246,241,.85)!important}
.store-footer salla-payments img{opacity:.92}
salla-apps-icons{display:none!important}
#rx-css-host{display:none!important}
/* ============ HERO SLIDER ============ */
/* الحاوية والشريحة */
.home-slider, .s-slider, .sDONTCARE-slider, [class*="slider-wrap"], section[id*="slider"]{
border-radius:0!important;
}
/* ارتفاع السلايدر — الهيرو الكبير زي الموقع القديم */
.s-slider .swiper, .s-slider .swiper-container, .s-slider{
height:520px!important;
}
@media(max-width:1023px){.s-slider .swiper, .s-slider .swiper-container, .s-slider{height:420px!important}}
@media(max-width:640px){.s-slider .swiper, .s-slider .swiper-container, .s-slider{height:320px!important}}
/* خلفية الهيرو: أخضر غامق روشاي مع تدرج */
.s-slider .swiper-slide, .s-slider .swiper-container .swiper-slide{
background:linear-gradient(135deg,#0F1F17 0%,#152A1F 45%,#1F3B2C 100%)!important;
}
/* محاذاة المحتوى داخل الشريحة يمين (RTL) */
.s-slider .swiper-slide .s-slider-content,
.s-slider .swiper-slide [class*="slider-content"]{
text-align:right;align-items:flex-start;margin-inline-start:4%;
max-width:560px;direction:rtl;
}
.s-slider .swiper-slide img.s-slider-image{
object-fit:cover;opacity:.55;
-webkit-mask-image:linear-gradient(to left,transparent 0%,#000 55%);
mask-image:linear-gradient(to left,transparent 0%,#000 55%);
}
/* نص العنوان الرئيسي — كريمي كبير بخط عريض */
.s-slider .s-slider-content h2, .s-slider .s-slider-content .s-slider-title{
color:#F8F6F1!important;font-family:Cairo,system-ui,sans-serif!important;
font-size:44px!important;font-weight:800!important;line-height:1.25!important;
text-shadow:0 2px 18px rgba(0,0,0,.45)!important;
}
@media(max-width:1023px){.s-slider .s-slider-content h2, .s-slider .s-slider-content .s-slider-title{font-size:30px!important}}
@media(max-width:640px){.s-slider .s-slider-content h2, .s-slider .s-slider-content .s-slider-title{font-size:24px!important}}
/* النص الفرعي */
.s-slider .s-slider-content p, .s-slider .s-slider-content .s-slider-subtitle{
color:rgba(248,246,241,.85)!important;font-size:17px!important;line-height:1.7!important;
text-shadow:0 1px 10px rgba(0,0,0,.4)!important;
}
/* زر CTA — ذهبي بتدرج الموقع القديم */
.s-slider .s-slider-content a, .s-slider .s-slider-content button,
.s-slider .s-slider-content .btn{
display:inline-block!important;background:linear-gradient(135deg,#C9A24B,#B8860B)!important;
color:#152A1F!important;font-weight:800!important;border:none!important;border-radius:24px!important;
padding:12px 34px!important;font-size:15px!important;text-decoration:none!important;
box-shadow:0 8px 22px rgba(184,134,11,.35)!important;transition:all .25s ease!important;
}
.s-slider .s-slider-content a:hover,.s-slider .s-slider-content button:hover{
transform:translateY(-2px)!important;box-shadow:0 12px 28px rgba(184,134,11,.5)!important;
}
/* أسهم التنقل — دوائر كريمية شفافة بحدود، تتحول ذهبي */
.s-slider .swiper-button-next,.s-slider .swiper-button-prev,
.s-slider .slider-nav-btn,[class*="slider"] .swiper-arrow{
width:46px!important;height:46px!important;border-radius:50%!important;
background:rgba(21,42,31,.45)!important;border:1px solid rgba(248,246,241,.35)!important;
color:#F8F6F1!important;backdrop-filter:blur(4px);transition:all .25s ease!important;
}
.s-slider .swiper-button-next:hover,.s-slider .swiper-button-prev:hover{
background:linear-gradient(135deg,#C9A24B,#B8860B)!important;border-color:var(--rx-gold)!important;color:#152A1F!important;
}
.s-slider .swiper-button-next::after,.s-slider .swiper-button-prev::after{
font-size:18px!important;font-weight:800!important;
}
/* النقاط (pagination) — ذهبية النشطة، كريمية شفافة الساكنة */
.s-slider .swiper-pagination-bullet{
width:26px!important;height:6px!important;border-radius:3px!important;
background:rgba(248,246,241,.35)!important;opacity:1!important;transition:all .3s ease!important;
}
.s-slider .swiper-pagination-bullet-active{
background:linear-gradient(90deg,#C9A24B,#B8860B)!important;width:40px!important;
}
/*RXCSSTEST2*/
/* ===== روشاي — إصلاح تفيض قائمة الجوال (mmenu) أفقيًا ===== */
.mm-ocd{width:100vw !important;max-width:100vw !important;left:0 !important;right:auto !important}
.mm-ocd__content{width:100vw !important;max-width:100vw !important}
html,body{overflow-x:hidden !important}
/* ===== روشاي — مطابقة الهيرو على المرجعي (قياسات دقيقة) ===== */
.s-block--photos-slider .swiper{height:826px !important;min-height:826px !important;background:#152A1F !important}
.s-block--photos-slider .swiper-slide{height:826px !important}
.s-block--photos-slider .swiper-slide img{height:826px !important}
.s-block--photos-slider .rx-grid{height:826px !important;max-width:1280px !important;margin-inline:auto !important;padding-inline:24px !important}
.s-block--photos-slider .rx-text{align-items:flex-start !important;justify-content:center !important}
.s-block--photos-slider .rx-text h1,.s-block--photos-slider .rx-text h2{font-weight:800 !important;max-width:560px !important}
.s-block--photos-slider .rx-media{width:386px !important;height:492px !important;align-self:center !important}
.s-block--photos-slider .rx-media img{width:386px !important;height:492px !important;object-fit:cover !important;border-radius:999px 999px 24px 24px !important}
@media(max-width:900px){
.s-block--photos-slider .swiper,.s-block--photos-slider .swiper-slide,.s-block--photos-slider .swiper-slide img{height:auto !important;min-height:640px !important}
.s-block--photos-slider .rx-media{width:280px !important;height:340px !important}
.s-block--photos-slider .rx-media img{width:280px !important;height:340px !important}
}
/* ===== روشاي — جوال: القوس/صورة المنتج ظاهرة زي المرجعي ===== */
@media(max-width:900px){
.s-block--photos-slider .swiper{min-height:700px !important;background:#152A1F !important}
.s-block--photos-slider .rx-grid{grid-template-columns:1fr !important;padding:48px 20px 56px !important;gap:24px !important}
.s-block--photos-slider .rx-media{display:block !important;width:284px !important;height:326px !important;margin:0 auto !important;order:2 !important}
.s-block--photos-slider .rx-media img{width:284px !important;height:326px !important;object-fit:cover !important;border-radius:999px 999px 24px 24px !important}
.s-block--photos-slider .rx-text{order:1 !important;text-align:center !important;align-items:center !important}
.s-block--photos-slider .rx-text h1,.s-block--photos-slider .rx-text h2{font-size:40px !important;line-height:1.25 !important}
}
/* ===== RX STAR LIFT v1 — رفع النجوم فوق نص الرأي ===== */
.s-block--custom-testimonials .s-reviews-testimonial__inner .s-reviews-testimonial__rating{
top:2px !important;
}
/* ===== /RX STAR LIFT ===== */
/* ===== RX HIDE SHAY ROSHAY v1 ===== */
ul.main-menu > li[id="35031422"],
ul.main-menu li[id="35031422"]{display:none!important}
/* ===== RX HIDE SHAY ROSHAY v1 END ===== */
/* ===== RX SLIDER v1 — سلايدر خاص بالكامل ===== */
.s-block--photos-slider .swiper{display:none!important}
/* أسهم الثيم المكررة (s-slider-prev/next) جوه بلوك السلايدر — نُبقي أسهمنا .rx-ar فقط */
.s-block--photos-slider .s-slider-prev,
.s-block--photos-slider .s-slider-next{display:none!important}
#rx-hero{position:relative;width:100%;height:620px;overflow:hidden;direction:rtl;
touch-action:pan-y; /* الجوال: نحن نملك الإيماءة الأفقية (سحب السلايدر) والمتصفح يملك الرأسية (تمرير الصفحة) */
font-family:inherit;background:#0d1f16}
#rx-hero *{box-sizing:border-box}
#rx-hero .rx-slide{position:absolute;inset:0;opacity:0;visibility:hidden;
transition:opacity .7s ease;display:grid;height:100%}
#rx-hero .rx-slide.on{opacity:1;visibility:visible;z-index:2}
#rx-hero .rx-bg{position:absolute;inset:0;z-index:0}
#rx-hero .rx-bg img{width:100%;height:100%;object-fit:cover;display:block}
#rx-hero .rx-in{position:relative;z-index:3;height:100%;min-height:0;max-width:1440px;margin:0 auto;
display:grid;grid-template-columns:386px 1fr;gap:48px;align-items:center;
padding:64px 86px;direction:ltr}
/* النص — يمين (العمود 2) */
#rx-hero .rx-txt{grid-column:2;grid-row:1;align-self:center;display:flex;flex-direction:column;gap:18px;align-items:flex-start;text-align:right;direction:rtl}
#rx-hero .rx-kick{font-size:13px;letter-spacing:.22em;font-weight:700;color:#d9b168;
text-transform:uppercase;display:inline-flex;align-items:center;gap:12px}
#rx-hero .rx-kick::before{content:"";width:44px;height:1px;background:#d9b168;display:block}
#rx-hero h2{margin:0;font-size:46px;line-height:1.24;font-weight:800;color:#fff}
#rx-hero h2 .ac{color:#d9b168}
#rx-hero .rx-sub{margin:0;font-size:16px;line-height:1.85;color:rgba(255,255,255,.82);max-width:520px}
#rx-hero .rx-cta{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
gap:14px!important;align-items:center!important;justify-content:flex-start!important;margin-top:8px}
#rx-hero .rx-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;
height:52px;padding:0 30px;border-radius:10px;font-size:15px;font-weight:700;
text-decoration:none;white-space:nowrap;transition:.25s}
#rx-hero .rx-b.gold{background:#d9b168;color:#152A1F}
#rx-hero .rx-b.gold:hover{background:#e6c483}
#rx-hero .rx-b.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.55)}
#rx-hero .rx-b.ghost:hover{border-color:#fff;background:rgba(255,255,255,.08)}
/* الصورة — شمال */
#rx-hero .rx-med{grid-column:1;grid-row:1;align-self:center;position:relative;width:386px;height:492px;justify-self:center;direction:rtl}
#rx-hero .rx-arch{position:relative;width:386px;height:492px;border-radius:193px 193px 22px 22px;
overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);border:1px solid rgba(217,177,104,.35)}
#rx-hero .rx-arch img{width:100%;height:100%;object-fit:cover;display:block}
#rx-hero .rx-chip{position:absolute;bottom:-16px;right:50%;transform:translateX(50%);
background:#fff;color:#152A1F;font-size:13px;font-weight:700;padding:9px 20px;
border-radius:999px;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.25);
display:inline-flex;align-items:center;gap:8px}
#rx-hero .rx-chip i{width:7px;height:7px;border-radius:50%;background:#d9b168;display:block}
/* أسهم */
#rx-hero .rx-ar{position:absolute;top:50%;transform:translateY(-50%);z-index:9;
width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.4);
background:rgba(0,0,0,.28);color:#fff;cursor:pointer;display:flex;
align-items:center;justify-content:center;transition:.25s;backdrop-filter:blur(6px)}
#rx-hero .rx-ar:hover{background:#d9b168;color:#152A1F;border-color:#d9b168}
#rx-hero .rx-ar.pv{right:24px}
#rx-hero .rx-ar.nx{left:24px}
/* نقاط */
#rx-hero .rx-dots{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
z-index:9;display:flex;gap:9px}
#rx-hero .rx-dots b{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);
cursor:pointer;display:block;transition:.25s;position:relative}
/* منطقة لمس 44×44 مع الحفاظ على الحجم البصري الصغير (مطلوب للجوال) */
#rx-hero .rx-dots b::after{content:'';position:absolute;left:50%;top:50%;
width:44px;height:44px;transform:translate(-50%,-50%)}
#rx-hero .rx-dots b.on{background:#d9b168;width:26px;border-radius:999px}
/* ===== قسم المميزات — مطابق للمرجع (roshay-store.html) ===== */
.rx-features{background:#F8F6F1;padding-block:54px;
border-top:1px solid rgba(26,26,26,.08);border-bottom:1px solid rgba(26,26,26,.08);
direction:rtl;font-family:inherit}
.rx-features-grid{display:grid;grid-template-columns:repeat(4,1fr);
max-width:1440px;margin:0 auto;padding-inline:clamp(20px,4vw,48px)}
.rx-feature{display:flex;align-items:center;gap:14px;padding:18px 22px}
.rx-feature + .rx-feature{border-right:1px solid rgba(26,26,26,.08)}
.rx-feature svg{flex:none;color:#B8860B}
.rx-feature h3{font-size:15px;font-weight:800;color:#1F3B2C;margin:0 0 4px;line-height:1.4}
.rx-feature p{font-size:12.5px;color:#4A453C;line-height:1.5;margin:0}
/* ===== الجوال: عمود واحد + شرائح غير متراكبة (السبب الجذري للتجاوب) =====
كانت .rx-slide position:absolute ⇒ الارتفاع ينهار، و .rx-in يحتفظ بعمودَي
«386px 1fr» من الديسكتوب ⇒ min-content يفرض عرض 643px داخل شاشة 390px
فيخرج كل شيء عن الشاشة (left:-253px). الإصلاح: نُلغي التموضع المطلق على الجوال
(نُظهر الشريحة النشطة فقط) ونجبر الشبكة على عمود واحد بعرض كامل. */
@media(max-width:900px){
#rx-hero{height:auto !important;min-height:0 !important;overflow:hidden}
#rx-hero .rx-slide{display:none !important;position:static !important;inset:auto !important;height:auto !important;min-height:0 !important;opacity:1 !important;visibility:visible !important;transition:none !important}
#rx-hero .rx-slide.on{display:block !important;animation:rxSlideMob .5s cubic-bezier(.22,.61,.36,1)}
#rx-hero .rx-bg{position:absolute !important;inset:0 !important}
#rx-hero .rx-in{grid-template-columns:1fr !important;width:100% !important;max-width:100% !important;box-sizing:border-box;
gap:24px;padding:40px 20px 64px;text-align:center;justify-items:center;
height:auto !important;min-height:0 !important;position:relative !important}
#rx-hero .rx-txt{grid-column:1 !important;grid-row:auto !important;align-items:center;text-align:center;width:100%;min-width:0}
#rx-hero h2{font-size:clamp(26px,7.6vw,32px) !important;line-height:1.3}
#rx-hero .rx-kick{justify-content:center;font-size:12px}
#rx-hero .rx-sub{font-size:14px;max-width:100%}
#rx-hero .rx-cta{justify-content:center;width:100%;flex-wrap:wrap}
#rx-hero .rx-b{min-height:46px;padding:0 22px;font-size:14px}
#rx-hero .rx-med{grid-column:1 !important;grid-row:auto !important;width:100% !important;max-width:270px !important;height:auto !important;justify-self:center;order:-1}
#rx-hero .rx-arch{width:100% !important;max-width:270px !important;height:auto !important;aspect-ratio:270/312;border-radius:135px 135px 18px 18px !important}
#rx-hero .rx-arch img{width:100% !important;height:100% !important}
#rx-hero .rx-chip{font-size:12px;padding:7px 15px}
#rx-hero .rx-ar{display:none !important}
#rx-hero .rx-dots{bottom:16px}
#rx-hero .rx-dots b{width:8px;height:8px}
}
@keyframes rxSlideMob{from{opacity:0}to{opacity:1}}
@media(max-width:900px){
.rx-features{padding-block:30px}
.rx-features-grid{grid-template-columns:1fr 1fr;gap:4px}
.rx-feature{padding:14px 10px;flex-direction:column;align-items:flex-start;gap:10px;text-align:right}
.rx-feature + .rx-feature{border-right:none}
.rx-feature:nth-child(even){border-right:1px solid rgba(26,26,26,.08)}
}
@media(max-width:380px){
#rx-hero .rx-in{padding:34px 16px 58px;gap:20px}
#rx-hero .rx-med,#rx-hero .rx-arch{max-width:236px !important}
#rx-hero .rx-arch{aspect-ratio:236/274;border-radius:118px 118px 16px 16px !important}
#rx-hero .rx-b{padding:0 16px;font-size:13.5px}
.rx-features-grid{grid-template-columns:1fr}
}
/* ===== مناطق لمس مريحة على الجوال =====
أيقونات الثيم (الهامبرغر/القائمة) صغيرة بصريًا (16×24) وقياس اللمس الموصى به 44×44،
فنوسّع منطقة اللمس بعنصر وهمي شفاف دون تغيير الشكل النهائي للهيدر. */
@media(max-width:900px){
.mburger{position:relative}
.mburger::after{content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:44px;height:44px;border-radius:10px}
}
/* ===== قسم المميزات ===== */
.rx-features{background:#F8F6F1;padding-block:54px;
border-top:1px solid rgba(26,26,26,.08);border-bottom:1px solid rgba(26,26,26,.08);
direction:rtl;font-family:inherit}
.rx-features-grid{display:grid;grid-template-columns:repeat(4,1fr);
max-width:1440px;margin:0 auto;padding-inline:clamp(20px,4vw,48px)}
.rx-feature{display:flex;align-items:center;gap:14px;padding:18px 22px}
.rx-feature + .rx-feature{border-right:1px solid rgba(26,26,26,.08)}
.rx-feature svg{flex:none;color:#B8860B}
.rx-feature h3{font-size:15px;font-weight:800;color:#1F3B2C;margin:0 0 4px;line-height:1.4}
.rx-feature p{font-size:12.5px;color:#4A453C;line-height:1.5;margin:0}
@media(max-width:900px){
#rx-hero{height:auto;min-height:520px}
#rx-hero .rx-in{grid-template-columns:1fr;gap:26px;padding:44px 22px 72px;text-align:center;justify-items:center}
#rx-hero .rx-txt{align-items:center;text-align:center}
#rx-hero h2{font-size:29px}
#rx-hero .rx-sub{font-size:14px}
#rx-hero .rx-med,#rx-hero .rx-arch{width:284px;height:362px}
#rx-hero .rx-arch{border-radius:142px 142px 18px 18px}
#rx-hero .rx-ar.pv{right:10px}#rx-hero .rx-ar.nx{left:10px}
#rx-hero .rx-ar{width:38px;height:38px}
.rx-features{padding-block:30px}
.rx-features-grid{grid-template-columns:1fr 1fr;gap:4px}
.rx-feature{padding:14px 10px;flex-direction:column;align-items:flex-start;gap:10px;text-align:right}
.rx-feature + .rx-feature{border-right:none}
.rx-feature:nth-child(even){border-right:1px solid rgba(26,26,26,.08)}
}
/* ===== RX PRODUCTS ===== */
/* --- 1) العنوان «مجموعة روشاي» + «عرض الكل» (مطابق للمرجع) --- */
.rx-prod-headwrap{position:relative;display:block;width:100%}
.rx-prod-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;
margin-bottom:clamp(24px,3.4vw,40px);width:100%}
.rx-prod-title{
font-family:'Cairo',sans-serif;font-size:clamp(30px,4vw,46px) !important;font-weight:800 !important;
color:#1F3B2C !important;line-height:1.25 !important;margin:0 !important;
}
.rx-prod-title .accent{color:#B8860B !important}
.rx-prod-link{
display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:800;color:#8B1E23 !important;
border-bottom:1.5px solid #8B1E23;padding-bottom:4px;transition:gap .3s ease;
text-decoration:none !important;flex:none;
}
.rx-prod-link:hover{gap:14px}
.rx-prod-link svg{flex:none}
/* --- 2) الشبكة: 3 أعمدة كما في المرجع --- */
section[data-testid="store-home-fixed-products"] .s-products-list-wrapper,
section[component-id="764205087"] .s-products-list-wrapper,
section[data-rx-products="1"] .s-products-list-wrapper,
section[data-testid="store-home-fixed-products"] .s-products-list-horizontal-cards,
section[component-id="764205087"] .s-products-list-horizontal-cards,
section[data-rx-products="1"] .s-products-list-horizontal-cards{
display:grid !important;grid-template-columns:repeat(3,1fr) !important;
gap:clamp(18px,2.6vw,32px) !important;overflow:visible !important;
}
section[data-rx-products="1"] custom-salla-product-card,
section[component-id="764205087"] custom-salla-product-card,
section[data-testid="store-home-fixed-products"] custom-salla-product-card{
width:auto !important;max-width:none !important;height:auto !important;min-height:0 !important;
display:flex !important;flex-direction:column !important;
}
/* --- 3) البطاقة: رفع + ظل + انتقال (مع احترام تقليل الحركة) --- */
.rx-pcard{
transition:transform .4s cubic-bezier(.22,.61,.36,1);
will-change:transform;
}
.rx-pcard .s-product-card-image{
position:relative !important;width:100% !important;height:auto !important;max-height:none !important;
aspect-ratio:4/5 !important;border-radius:18px !important;overflow:hidden !important;
background:#F1EDE3 !important;box-shadow:0 10px 30px rgba(21,42,31,.10);
transition:box-shadow .4s ease;
}
@media(hover:hover) and (pointer:fine){
.rx-pcard:hover{transform:translateY(-6px)}
.rx-pcard:hover .s-product-card-image{box-shadow:0 22px 48px rgba(21,42,31,.20)}
.rx-pcard:hover .s-product-card-image img{transform:scale(1.06)}
}
/* --- 4) الصورة: 4:5 كاملة بلا قص أو تمدد --- */
section[data-rx-products="1"] .s-product-card-image img,
section[component-id="764205087"] .s-product-card-image img,
section[data-testid="store-home-fixed-products"] .s-product-card-image img{
display:block !important;width:100% !important;height:100% !important;
max-height:none !important;min-height:0 !important;object-fit:cover !important;
transition:transform .8s cubic-bezier(.22,.61,.36,1);
}
/* --- 5) محتوى البطاقة أسفل الصورة (عناوين/سعر/مسار) --- */
section[data-rx-products="1"] .s-product-card-content,
section[component-id="764205087"] .s-product-card-content,
section[data-testid="store-home-fixed-products"] .s-product-card-content{
padding:18px 6px 0 !important;display:flex !important;flex-direction:column !important;gap:0 !important;
}
section[data-rx-products="1"] .s-product-card-content-title,
section[data-rx-products="1"] .s-product-card-content-title a,
section[component-id="764205087"] .s-product-card-content-title,
section[component-id="764205087"] .s-product-card-content-title a,
section[data-testid="store-home-fixed-products"] .s-product-card-content-title,
section[data-testid="store-home-fixed-products"] .s-product-card-content-title a{
font-family:'Cairo',sans-serif !important;font-size:21px !important;font-weight:700 !important;
color:#1A1A1A !important;line-height:1.45 !important;margin:0 0 4px !important;text-decoration:none !important;
}
section[data-rx-products="1"] .s-product-card-content-subtitle,
section[component-id="764205087"] .s-product-card-content-subtitle,
section[data-testid="store-home-fixed-products"] .s-product-card-content-subtitle{
font-size:13px !important;color:#4A453C !important;margin:0 0 14px !important;opacity:1 !important;
}
section[data-rx-products="1"] .s-product-card-price,
section[component-id="764205087"] .s-product-card-price,
section[data-testid="store-home-fixed-products"] .s-product-card-price{
font-size:17px !important;font-weight:800 !important;color:#1F3B2C !important;margin:0 0 14px !important;
}
section[data-rx-products="1"] .s-product-card-price *,
section[component-id="764205087"] .s-product-card-price *,
section[data-testid="store-home-fixed-products"] .s-product-card-price *{color:#1F3B2C !important}
/* --- 6) الشارات (مطابقة للمرجع) --- */
.rx-badge{
position:absolute;top:14px;right:14px;z-index:3;
background:rgba(31,59,44,.92);color:#C9A24B;font-size:11.5px;font-weight:800;letter-spacing:.06em;
padding:7px 14px;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
pointer-events:none;line-height:1;
}
.rx-badge.maroon{background:rgba(139,30,35,.92);color:#fff}
/* --- 7) زر «أضف إلى السلة»: خلفية روشاي + حواف + حالات --- */
section[data-rx-products="1"] .s-product-card-content-footer,
section[component-id="764205087"] .s-product-card-content-footer,
section[data-testid="store-home-fixed-products"] .s-product-card-content-footer{
margin-top:auto !important;padding-top:0 !important;
}
section[data-rx-products="1"] salla-add-product-button salla-button,
section[data-rx-products="1"] salla-add-product-button button,
section[component-id="764205087"] salla-add-product-button salla-button,
section[component-id="764205087"] salla-add-product-button button,
section[data-testid="store-home-fixed-products"] salla-add-product-button salla-button,
section[data-testid="store-home-fixed-products"] salla-add-product-button button{
width:100% !important;min-height:46px !important;height:auto !important;
display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
border-radius:999px !important;border:0 !important;cursor:pointer !important;
background:linear-gradient(135deg,#C9A24B,#B8860B) !important;
color:#fff !important;font-size:15px !important;font-weight:800 !important;
box-shadow:0 8px 22px rgba(184,134,11,.28) !important;
transition:transform .3s ease,box-shadow .3s ease,filter .3s ease !important;
}
section[data-rx-products="1"] salla-add-product-button salla-button *,
section[component-id="764205087"] salla-add-product-button salla-button *,
section[data-testid="store-home-fixed-products"] salla-add-product-button salla-button *{
color:#fff !important;font-weight:800 !important;
}
@media(hover:hover) and (pointer:fine){
section[data-rx-products="1"] salla-add-product-button salla-button:hover,
section[component-id="764205087"] salla-add-product-button salla-button:hover,
section[data-testid="store-home-fixed-products"] salla-add-product-button salla-button:hover{
transform:translateY(-2px) !important;box-shadow:0 14px 32px rgba(184,134,11,.42) !important;
}
}
section[data-rx-products="1"] salla-add-product-button salla-button:focus-visible,
section[component-id="764205087"] salla-add-product-button salla-button:focus-visible,
section[data-testid="store-home-fixed-products"] salla-add-product-button salla-button:focus-visible{
outline:2px solid #1F3B2C !important;outline-offset:3px !important;
}
/* حالات التحميل/النجاح التي يضيفها المتجر */
section[data-rx-products="1"] salla-add-product-button salla-button[loading],
section[data-rx-products="1"] salla-add-product-button button[disabled],
section[component-id="764205087"] salla-add-product-button salla-button[loading],
section[component-id="764205087"] salla-add-product-button button[disabled],
section[data-testid="store-home-fixed-products"] salla-add-product-button salla-button[loading],
section[data-testid="store-home-fixed-products"] salla-add-product-button button[disabled]{
filter:saturate(.75) brightness(.96) !important;cursor:progress !important;
}
section[data-rx-products="1"] salla-add-product-button salla-button[success],
section[component-id="764205087"] salla-add-product-button salla-button[success],
section[data-testid="store-home-fixed-products"] salla-add-product-button salla-button[success]{
background:#1F3B2C !important;box-shadow:0 8px 22px rgba(31,59,44,.32) !important;
}
/* --- 8) الجوال: سلايدر snap مثل المرجع --- */
@media(max-width:900px){
.rx-prod-head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:22px}
section[data-rx-products="1"] .s-products-list-wrapper,
section[component-id="764205087"] .s-products-list-wrapper,
section[data-testid="store-home-fixed-products"] .s-products-list-wrapper,
section[data-rx-products="1"] .s-products-list-horizontal-cards,
section[component-id="764205087"] .s-products-list-horizontal-cards,
section[data-testid="store-home-fixed-products"] .s-products-list-horizontal-cards{
display:flex !important;gap:16px !important;overflow-x:auto !important;
scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
scrollbar-width:none;padding-bottom:14px;
}
section[data-rx-products="1"] .s-products-list-wrapper::-webkit-scrollbar,
section[component-id="764205087"] .s-products-list-wrapper::-webkit-scrollbar,
section[data-testid="store-home-fixed-products"] .s-products-list-wrapper::-webkit-scrollbar{display:none}
section[data-rx-products="1"] custom-salla-product-card,
section[component-id="764205087"] custom-salla-product-card,
section[data-testid="store-home-fixed-products"] custom-salla-product-card{
flex:0 0 76vw !important;max-width:340px !important;scroll-snap-align:center;
}
section[data-rx-products="1"] .s-product-card-content-title,
section[data-rx-products="1"] .s-product-card-content-title a,
section[component-id="764205087"] .s-product-card-content-title,
section[component-id="764205087"] .s-product-card-content-title a,
section[data-testid="store-home-fixed-products"] .s-product-card-content-title,
section[data-testid="store-home-fixed-products"] .s-product-card-content-title a{font-size:18px !important}
}
/* --- 9) احترام تقليل الحركة --- */
@media(prefers-reduced-motion:reduce){
.rx-pcard,.rx-pcard *,.rx-badge,.rx-prod-link{
transition:none !important;animation:none !important;
}
.rx-pcard:hover{transform:none !important}
.rx-pcard:hover .s-product-card-image img{transform:none !important}
}
/* ===== RX PRODUCTS FINAL ===== */
/* ===== 1) صورة المنتج: 4:5 طولية بلا أي ارتفاع مفروض من الثيم ===== */
body section#rx-products custom-salla-product-card .s-product-card-image,
body section[data-rx-products="1"] custom-salla-product-card .s-product-card-image,
body section[data-testid="store-home-fixed-products"] custom-salla-product-card .s-product-card-image,
body section[component-id="764205087"] custom-salla-product-card .s-product-card-image,
body section#rx-products .s-product-card-entry .s-product-card-image,
body section[data-rx-products="1"] .s-product-card-entry .s-product-card-image{
display:block !important;
position:relative !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
aspect-ratio:4 / 5 !important;
border-radius:18px !important;
overflow:hidden !important;
background:#F1EDE3 !important;
box-shadow:0 10px 30px rgba(21,42,31,.10) !important;
transition:box-shadow .4s ease !important;
}
/* الصورة نفسها + اللينك المغلف */
body section#rx-products custom-salla-product-card .s-product-card-image > a,
body section[data-rx-products="1"] custom-salla-product-card .s-product-card-image > a,
body section[data-testid="store-home-fixed-products"] custom-salla-product-card .s-product-card-image > a,
body section[component-id="764205087"] custom-salla-product-card .s-product-card-image > a{
display:block !important;width:100% !important;height:100% !important;
min-height:0 !important;max-height:none !important;border-radius:18px !important;overflow:hidden !important;
}
body section#rx-products custom-salla-product-card .s-product-card-image img,
body section[data-rx-products="1"] custom-salla-product-card .s-product-card-image img,
body section[data-testid="store-home-fixed-products"] custom-salla-product-card .s-product-card-image img,
body section[component-id="764205087"] custom-salla-product-card .s-product-card-image img,
body section#rx-products .s-product-card-image img.s-product-card-image-cover,
body section[data-rx-products="1"] .s-product-card-image img.s-product-card-image-cover,
body section[data-testid="store-home-fixed-products"] .s-product-card-image img.s-product-card-image-cover{
display:block !important;
width:100% !important;
height:100% !important;
min-height:0 !important;
max-height:none !important;
object-fit:cover !important;
border-radius:18px !important;
transform:scale(1.001);
transition:transform .8s cubic-bezier(.22,.61,.36,1) !important;
}
/* ===== 2) البطاقة: عمودية، ظل، رفع عند المرور ===== */
body section#rx-products custom-salla-product-card,
body section[data-rx-products="1"] custom-salla-product-card,
body section[data-testid="store-home-fixed-products"] custom-salla-product-card,
body section[component-id="764205087"] custom-salla-product-card{
display:flex !important;
flex-direction:column !important;
width:auto !important;
max-width:none !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
background:transparent !important;
border:0 !important;
box-shadow:none !important;
transition:transform .4s cubic-bezier(.22,.61,.36,1) !important;
}
@media(hover:hover) and (pointer:fine){
body section#rx-products custom-salla-product-card:hover,
body section[data-rx-products="1"] custom-salla-product-card:hover,
body section[data-testid="store-home-fixed-products"] custom-salla-product-card:hover,
body section[component-id="764205087"] custom-salla-product-card:hover{
transform:translateY(-6px) !important;
}
body section#rx-products custom-salla-product-card:hover .s-product-card-image,
body section[data-rx-products="1"] custom-salla-product-card:hover .s-product-card-image,
body section[data-testid="store-home-fixed-products"] custom-salla-product-card:hover .s-product-card-image,
body section[component-id="764205087"] custom-salla-product-card:hover .s-product-card-image{
box-shadow:0 22px 48px rgba(21,42,31,.20) !important;
}
body section#rx-products custom-salla-product-card:hover .s-product-card-image img,
body section[data-rx-products="1"] custom-salla-product-card:hover .s-product-card-image img,
body section[data-testid="store-home-fixed-products"] custom-salla-product-card:hover .s-product-card-image img,
body section[component-id="764205087"] custom-salla-product-card:hover .s-product-card-image img{
transform:scale(1.06) !important;
}
}
/* ===== 3) الشبكة 3 أعمدة (كمبيوتر) / سلايدر (جوال) ===== */
body section#rx-products .s-products-list-wrapper,
body section[data-rx-products="1"] .s-products-list-wrapper,
body section[data-testid="store-home-fixed-products"] .s-products-list-wrapper,
body section[component-id="764205087"] .s-products-list-wrapper,
body section#rx-products .s-products-list-horizontal-cards,
body section[data-rx-products="1"] .s-products-list-horizontal-cards,
body section[data-testid="store-home-fixed-products"] .s-products-list-horizontal-cards,
body section[component-id="764205087"] .s-products-list-horizontal-cards{
display:grid !important;
grid-template-columns:repeat(3,1fr) !important;
gap:clamp(18px,2.6vw,32px) !important;
overflow:visible !important;
}
/* ===== 4) المحتوى أسفل الصورة ===== */
body section#rx-products .s-product-card-content,
body section[data-rx-products="1"] .s-product-card-content,
body section[data-testid="store-home-fixed-products"] .s-product-card-content,
body section[component-id="764205087"] .s-product-card-content{
padding:18px 6px 0 !important;
display:flex !important;flex-direction:column !important;
height:auto !important;min-height:0 !important;
}
body section#rx-products .s-product-card-content-title,
body section#rx-products .s-product-card-content-title a,
body section[data-rx-products="1"] .s-product-card-content-title,
body section[data-rx-products="1"] .s-product-card-content-title a,
body section[data-testid="store-home-fixed-products"] .s-product-card-content-title,
body section[data-testid="store-home-fixed-products"] .s-product-card-content-title a,
body section[component-id="764205087"] .s-product-card-content-title,
body section[component-id="764205087"] .s-product-card-content-title a{
font-family:'Cairo',sans-serif !important;font-size:21px !important;font-weight:700 !important;
color:#1A1A1A !important;line-height:1.45 !important;margin:0 0 4px !important;
text-decoration:none !important;
}
body section#rx-products .s-product-card-content-subtitle,
body section[data-rx-products="1"] .s-product-card-content-subtitle,
body section[data-testid="store-home-fixed-products"] .s-product-card-content-subtitle,
body section[component-id="764205087"] .s-product-card-content-subtitle{
font-size:13px !important;color:#4A453C !important;margin:0 0 14px !important;opacity:1 !important;
}
body section#rx-products .s-product-card-price,
body section[data-rx-products="1"] .s-product-card-price,
body section[data-testid="store-home-fixed-products"] .s-product-card-price,
body section[component-id="764205087"] .s-product-card-price,
body section#rx-products .s-product-card-price *,
body section[data-rx-products="1"] .s-product-card-price *,
body section[data-testid="store-home-fixed-products"] .s-product-card-price *,
body section[component-id="764205087"] .s-product-card-price *{
font-size:17px !important;font-weight:800 !important;color:#1F3B2C !important;margin:0 0 14px !important;
}
/* ===== 5) زر «أضف إلى السلة» ===== */
body section#rx-products .s-product-card-content-footer,
body section[data-rx-products="1"] .s-product-card-content-footer,
body section[data-testid="store-home-fixed-products"] .s-product-card-content-footer,
body section[component-id="764205087"] .s-product-card-content-footer{
margin-top:auto !important;padding-top:0 !important;
}
body section#rx-products salla-add-product-button button,
body section[data-rx-products="1"] salla-add-product-button button,
body section[data-testid="store-home-fixed-products"] salla-add-product-button button,
body section[component-id="764205087"] salla-add-product-button button{
width:100% !important;min-height:46px !important;height:auto !important;
display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
border-radius:999px !important;border:0 !important;cursor:pointer !important;
background:linear-gradient(135deg,#C9A24B,#B8860B) !important;
color:#fff !important;font-size:15px !important;font-weight:800 !important;
box-shadow:0 8px 22px rgba(184,134,11,.28) !important;
transition:transform .3s ease,box-shadow .3s ease,filter .3s ease !important;
}
body section#rx-products salla-add-product-button button *,
body section[data-rx-products="1"] salla-add-product-button button *,
body section[data-testid="store-home-fixed-products"] salla-add-product-button button *,
body section[component-id="764205087"] salla-add-product-button button *{
color:#fff !important;font-weight:800 !important;
}
@media(hover:hover) and (pointer:fine){
body section#rx-products salla-add-product-button button:hover,
body section[data-rx-products="1"] salla-add-product-button button:hover,
body section[data-testid="store-home-fixed-products"] salla-add-product-button button:hover,
body section[component-id="764205087"] salla-add-product-button button:hover{
transform:translateY(-2px) !important;box-shadow:0 14px 32px rgba(184,134,11,.42) !important;
}
}
body section#rx-products salla-add-product-button button:focus-visible,
body section[data-rx-products="1"] salla-add-product-button button:focus-visible,
body section[data-testid="store-home-fixed-products"] salla-add-product-button button:focus-visible,
body section[component-id="764205087"] salla-add-product-button button:focus-visible{
outline:2px solid #1F3B2C !important;outline-offset:3px !important;
}
body section#rx-products salla-add-product-button button[disabled],
body section[data-rx-products="1"] salla-add-product-button button[disabled],
body section[data-testid="store-home-fixed-products"] salla-add-product-button button[disabled],
body section[component-id="764205087"] salla-add-product-button button[disabled]{
filter:saturate(.75) brightness(.96) !important;cursor:progress !important;
}
/* ===== 6) الجوال: سلايدر snap + صورة 4:5 ===== */
@media(max-width:900px){
body section#rx-products .s-products-list-wrapper,
body section[data-rx-products="1"] .s-products-list-wrapper,
body section[data-testid="store-home-fixed-products"] .s-products-list-wrapper,
body section[component-id="764205087"] .s-products-list-wrapper,
body section#rx-products .s-products-list-horizontal-cards,
body section[data-rx-products="1"] .s-products-list-horizontal-cards,
body section[data-testid="store-home-fixed-products"] .s-products-list-horizontal-cards,
body section[component-id="764205087"] .s-products-list-horizontal-cards{
display:flex !important;
flex-wrap:nowrap !important;
gap:16px !important;
grid-template-columns:none !important;
overflow-x:auto !important;
scroll-snap-type:x mandatory;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
padding-bottom:14px;
}
body section#rx-products .s-products-list-wrapper::-webkit-scrollbar,
body section[data-rx-products="1"] .s-products-list-wrapper::-webkit-scrollbar,
body section[data-testid="store-home-fixed-products"] .s-products-list-wrapper::-webkit-scrollbar{display:none}
body section#rx-products custom-salla-product-card,
body section[data-rx-products="1"] custom-salla-product-card,
body section[data-testid="store-home-fixed-products"] custom-salla-product-card,
body section[component-id="764205087"] custom-salla-product-card{
flex:0 0 76vw !important;max-width:340px !important;scroll-snap-align:center;
}
body section#rx-products .s-product-card-content-title,
body section#rx-products .s-product-card-content-title a,
body section[data-rx-products="1"] .s-product-card-content-title,
body section[data-rx-products="1"] .s-product-card-content-title a,
body section[data-testid="store-home-fixed-products"] .s-product-card-content-title,
body section[data-testid="store-home-fixed-products"] .s-product-card-content-title a,
body section[component-id="764205087"] .s-product-card-content-title,
body section[component-id="764205087"] .s-product-card-content-title a{font-size:18px !important}
}
/* ===== 7) احترام تقليل الحركة ===== */
@media(prefers-reduced-motion:reduce){
body section#rx-products custom-salla-product-card,
body section#rx-products custom-salla-product-card *,
body section[data-rx-products="1"] custom-salla-product-card,
body section[data-rx-products="1"] custom-salla-product-card *{
transition:none !important;animation:none !important;
}
}
/* ===== RX STORY ===== */
.rx-story{
background:#152A1F;color:#F8F6F1;position:relative;overflow:hidden;
padding:clamp(56px,7vw,110px) clamp(20px,4vw,48px) 110px;
}
.rx-story::before{
content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;
background:radial-gradient(ellipse 60% 50% at 15% 20%, rgba(201,162,75,.14), transparent 60%);
}
.rx-story-in{
max-width:1200px;margin:0 auto;position:relative;
display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,5vw,80px);align-items:center;
}
/* الصورة على اليسار (العمود 1)، النص على اليمين (العمود 2) */
.rx-story-media{position:relative;grid-column:1;grid-row:1;direction:ltr}
.rx-story-txt{grid-column:2;grid-row:1;direction:rtl;text-align:right}
.rx-story-arch{
width:min(420px,100%);aspect-ratio:4/5.1;
border-radius:999px 999px 22px 22px;overflow:hidden;
border:1px solid rgba(201,162,75,.45);box-shadow:0 24px 60px rgba(0,0,0,.35);position:relative;
}
.rx-story-arch::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 60px rgba(21,42,31,.25);border-radius:inherit;pointer-events:none}
.rx-story-arch img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02)}
.rx-story-quote{
position:absolute;bottom:-18px;left:8%;background:#F8F6F1;color:#6E1B22;border-radius:14px;
padding:14px 24px;font-family:'Cormorant Garamond',serif;letter-spacing:.1em;font-size:14px;font-weight:600;
box-shadow:0 18px 40px rgba(21,42,31,.16);white-space:nowrap;
}
.rx-story-kicker{
display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.14em;
color:#C9A24B;margin-bottom:18px;
}
.rx-story-kicker::before{content:"";width:38px;height:1px;background:#C9A24B}
.rx-story-title{
font-family:'Cairo',sans-serif;font-size:clamp(30px,4vw,48px);line-height:1.28;
color:#F8F6F1;margin:0 0 20px;font-weight:800;
}
.rx-story-title .accent{color:#C9A24B}
.rx-story p{color:rgba(248,246,241,.85);margin:0 0 18px;max-width:56ch;font-size:15.5px;line-height:1.9}
.rx-story-points{margin:26px 0 34px;display:grid;gap:14px}
.rx-story-point{display:flex;gap:14px;align-items:flex-start}
.rx-story-point svg{flex:none;margin-top:5px;color:#C9A24B}
.rx-story-point strong{color:#F8F6F1;font-weight:800}
.rx-story-point span{color:rgba(248,246,241,.75);font-size:14.5px}
.rx-story-btn{
display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 34px;
border-radius:999px;font-size:15px;font-weight:800;text-decoration:none;
background:linear-gradient(135deg,#C9A24B,#B8860B);color:#fff;
box-shadow:0 10px 26px rgba(184,134,11,.35);transition:all .3s ease;
}
.rx-story-btn:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(184,134,11,.45)}
/* ===== بطاقة الثقة البيضاء المتداخلة أسفل القسم ===== */
/* ===== منطقة «نهاية القصة → البطاقة → الشريط الفاتح → الفوتر» =====
المرجع (roshay-store.html): .story خلفية خضراء تنتهي عند حدها، ثم .trust بلا خلفية
والبطاقة البيضاء تتداخل -64px على الجسم الكريمي، ثم الفوتر الأخضر مباشرة.
عندنا جسم الصفحة من الثيم رمادي (#F9FAFB) ⇒ الشريط «الكريمي» ما كانش يظهر أصلاً.
الحل: نرسم الشريط الكريمي على .rx-trust نفسه (هو الحاوية قبل الفوتر) ونمنع أي فراغ. */
.rx-trust{
background:var(--rx-cream, #F8F6F1);
padding:0 clamp(20px,4vw,48px) clamp(28px,4vw,56px);
margin:0;
}
.rx-trust-card{
position:relative;z-index:5;
margin-top:-64px; /* التداخل مع نهاية الخلفية الخضراء للقصة */
max-width:1200px;margin-left:auto;margin-right:auto;
background:#fff;border:1px solid rgba(26,26,26,.08);border-radius:22px;
box-shadow:0 18px 40px rgba(21,42,31,.16);
display:grid;grid-template-columns:repeat(3,1fr);overflow:hidden;
}
.rx-trust-item{padding:30px 26px;display:flex;align-items:center;gap:16px}
.rx-trust-item + .rx-trust-item{border-right:1px solid rgba(26,26,26,.08)}
.rx-trust-item svg{color:#B8860B;flex:none}
.rx-trust-item h4{font-size:15px;font-weight:800;color:#1F3B2C;margin:0 0 2px}
.rx-trust-item p{font-size:12.5px;color:#4A453C;margin:0}
/* ===== إزالة الفراغ بين قسم المميزات والفوتر (المرجع: margin-top:0) ===== */
/* الثيم بيحط margin-top:56px على الفوتر؛ المرجع عنده 0 صريحًا ⇒ ده مصدر الفراغ الزائد الوحيد.
.rx-trust هو آخر قسم قبل الفوتر، فنصفّر الهامش في الحالة دي فقط — بدون لمس أي حاجة تانية. */
.rx-trust + footer.store-footer,
.rx-trust + footer,
.rx-trust ~ footer.store-footer,
.rx-trust ~ footer,
body main + footer.store-footer{
margin-top:0 !important;
}
/* ===== الجوال ===== */
@media(max-width:900px){
.rx-story{padding:48px 20px 40px}
.rx-story-in{grid-template-columns:1fr;gap:34px;text-align:center;justify-items:center}
.rx-story-media{grid-column:1;grid-row:1;justify-self:center;width:100%;max-width:420px}
.rx-story-txt{grid-column:1;grid-row:2;text-align:center}
.rx-story p{margin-left:auto;margin-right:auto}
.rx-story-kicker{justify-content:center}
.rx-story-points{text-align:right;justify-self:stretch}
.rx-story-quote{left:50%;transform:translateX(-50%);bottom:-16px}
.rx-trust{padding:0 20px 28px}
.rx-trust-card{grid-template-columns:1fr;margin-top:-30px}
.rx-trust-item + .rx-trust-item{border-right:none;border-top:1px solid rgba(26,26,26,.08)}
}
/* ===== RX TESTIMONIALS ===== */
/* ===== 1) القسم: خلفية كريمية + مسافات متوازنة ===== */
.s-block--custom-testimonials{
background:#F8F6F1 !important;
margin:clamp(44px,5vw,64px) 0 0 !important;
padding:clamp(52px,6vw,84px) clamp(18px,4vw,64px) clamp(48px,5vw,72px) !important;
max-width:none !important;
width:100% !important;
position:relative;
overflow:hidden !important;
}
.s-reviews-container{max-width:1200px;margin-inline:auto;width:100%}
/* ===== 2) العنوان: كيكر ذهبي + «آراء العملاء» + شرطة ذهبية ===== */
.s-reviews-header-wrapper{
display:flex;flex-direction:column;align-items:center;text-align:center;
margin:0 0 clamp(26px,3vw,40px) !important;position:static;
}
.s-reviews-container > .s-reviews-header-wrapper::before{
content:"شهادات حقيقية";display:block;
font-size:12px;font-weight:800;letter-spacing:.18em;color:#B8860B;
text-transform:uppercase;margin-bottom:12px;
}
.s-reviews-header{
font-family:'Tajawal','Cairo',system-ui,sans-serif !important;
font-size:clamp(30px,4vw,46px) !important;
font-weight:800 !important;line-height:1.15 !important;
color:#1F3B2C !important;margin:0 !important;padding:0 !important;
letter-spacing:-.01em;
}
.s-reviews-header::after{
content:"";display:block;width:64px;height:3px;border-radius:2px;
background:linear-gradient(90deg,#B8860B,rgba(184,134,11,.25));
margin:18px auto 0;
}
/* ===== 3) أزرار التنقل: دائرية أنيقة (كانت بيضاء بظل رمادي باهت) ===== */
.s-block--custom-testimonials .s-slider-block__title{
display:flex !important;justify-content:center !important;
padding:0 !important;margin:0 0 22px !important;min-height:0 !important;
}
.s-block--custom-testimonials .s-slider-block__title-left{
display:flex !important;align-items:center;justify-content:center !important;width:100% !important;
}
.s-block--custom-testimonials .s-slider-block__title-nav{
display:flex !important;align-items:center;gap:12px !important;
width:auto !important;position:static !important;
}
.s-block--custom-testimonials .s-slider-nav-arrow{
width:48px !important;height:48px !important;min-width:48px;
border-radius:999px !important;
background:#fff !important;
border:1.5px solid rgba(31,59,44,.16) !important;
box-shadow:0 6px 18px rgba(21,42,31,.09) !important;
color:#1F3B2C !important;
display:inline-flex !important;align-items:center !important;justify-content:center !important;
transition:background .28s ease,color .28s ease,border-color .28s ease,transform .28s ease,box-shadow .28s ease;
cursor:pointer;
}
.s-block--custom-testimonials .s-slider-nav-arrow svg{
width:20px !important;height:20px !important;fill:currentColor !important;transition:transform .28s ease;
}
.s-block--custom-testimonials .s-slider-nav-arrow:hover:not([disabled]){
background:#1F3B2C !important;color:#B8860B !important;border-color:#1F3B2C !important;
transform:translateY(-2px);box-shadow:0 12px 26px rgba(21,42,31,.22) !important;
}
.s-block--custom-testimonials .s-slider-nav-arrow:focus-visible{outline:2px solid #B8860B;outline-offset:3px}
.s-block--custom-testimonials .s-slider-nav-arrow[disabled],
.s-block--custom-testimonials .s-slider-nav-arrow[aria-disabled="true"]{
opacity:.34;cursor:not-allowed;box-shadow:none !important;
}
/* ===== 4) البطاقة ===== */
.s-block--custom-testimonials .swiper{padding:6px 0 10px !important;overflow:visible !important}
.s-block--custom-testimonials .swiper-wrapper{align-items:stretch !important}
.s-block--custom-testimonials .swiper-slide{
height:auto !important;display:flex !important;
transition:opacity .45s ease,transform .45s ease;
}
.s-reviews-testimonial{
width:100% !important;height:100% !important;
display:flex !important;flex-direction:column !important;
background:#fff !important;
border:1px solid rgba(31,59,44,.10) !important;
border-radius:20px !important;
padding:clamp(24px,2.6vw,34px) !important;
box-shadow:0 10px 30px rgba(21,42,31,.07) !important;
position:relative;overflow:hidden;
transition:box-shadow .45s ease,border-color .45s ease,transform .45s ease,background .45s ease;
}
/* شريط ذهبي رقيق أعلى البطاقة */
.s-reviews-testimonial::before{
content:"";position:absolute;top:0;right:0;left:0;height:3px;
background:linear-gradient(90deg,#B8860B,rgba(184,134,11,.18));
opacity:.85;
}
/* علامة اقتباس زخرفية كبيرة */
.s-reviews-testimonial::after{
content:"\201C";
position:absolute;top:8px;inset-inline-start:22px;
font-family:'Cormorant Garamond',Georgia,serif;
font-size:104px;line-height:1;color:rgba(184,134,11,.13);
pointer-events:none;user-select:none;
}
/* ===== 5) التسلسل البصري داخل البطاقة =====
المستوى 1: __inner عمودي. نرفع النص ونجعل الصورة+الاسم أسفل.
علامة الاقتباس (.s-reviews-testimonial__icon) زخرفة مطلقة ⇒ خارج الترتيب. */
.s-reviews-testimonial__icon{
position:absolute !important;
top:0;inset-inline-start:0;
width:0 !important;height:0 !important;
overflow:hidden !important;
pointer-events:none;
}
.s-reviews-testimonial__inner{
display:flex !important;flex-direction:column !important;
gap:0 !important;width:100% !important;height:100% !important;
position:relative;z-index:1;
}
/* المستوى 2: النص أولًا (order 1)، ثم الصورة+الاسم (order 2) */
.s-reviews-testimonial__inner > .s-reviews-testimonial__text{order:1;width:100%;flex:1 1 auto;display:flex !important;flex-direction:column !important}
.s-reviews-testimonial__inner > .s-reviews-testimonial__avatar{order:2;margin:0 !important}
/* المستوى 3 داخل __text: النجوم (1) ← النص (2) ← سطر الصورة+الاسم (3) */
.s-reviews-testimonial__text > .s-reviews-testimonial__name_wrapper{order:3;display:flex !important;flex-direction:row !important;align-items:center !important;gap:14px !important;margin:0 !important;padding-top:clamp(16px,1.8vw,20px) !important;border-top:1px solid rgba(31,59,44,.09)}
.s-reviews-testimonial__text > p{order:2}
/* النجوم: نُخرجها من الـname_wrapper ونرفعها لأعلى البطاقة عبر order سالب على حاويتها */
.s-reviews-testimonial__name_wrapper > .s-reviews-testimonial__rating{
order:3;display:flex !important;align-items:center !important;margin:0 !important;flex:none;
}
.s-reviews-testimonial__name_wrapper > .s-reviews-testimonial__info{order:1;flex:1 1 auto;min-width:0}
/* النجوم: تُرفع بصريًا لأعلى البطاقة (فوق النص) */
.s-reviews-testimonial__rating{
position:absolute !important;
top:clamp(24px,2.6vw,34px);
inset-inline-end:clamp(24px,2.6vw,34px);
z-index:2;
}
.s-reviews-testimonial__rating svg{width:17px !important;height:17px !important;fill:#B8860B !important}
.s-reviews-testimonial__rating .s-rating-stars-btn-star{color:#B8860B !important}
.s-reviews-testimonial__rating .s-rating-stars-wrapper{gap:2px !important;display:inline-flex}
/* النص */
.s-reviews-testimonial p{
display:block !important;
font-family:'Tajawal','Cairo',system-ui,sans-serif !important;
font-size:clamp(15px,1.25vw,16.5px) !important;
line-height:1.95 !important;
color:#4A453C !important;
margin:0 0 clamp(18px,2vw,24px) !important;
padding-top:26px;
text-align:start;
}
/* الصورة */
.s-reviews-testimonial__avatar{
width:52px !important;height:52px !important;
border-radius:999px !important;
overflow:hidden;
border:2px solid rgba(184,134,11,.5);
background:#F8F6F1;
flex:none;
box-shadow:0 4px 12px rgba(21,42,31,.10);
}
.s-reviews-testimonial__avatar img{
width:100% !important;height:100% !important;object-fit:cover !important;display:block;
}
/* سطر الاسم: الصورة + الاسم في صف واحد أسفل البطاقة */
.s-reviews-testimonial__name_wrapper{flex-direction:row-reverse !important;justify-content:flex-end !important}
.s-reviews-testimonial__name_wrapper > .s-reviews-testimonial__info{text-align:start}
.s-reviews-testimonial h2{
font-family:'Tajawal','Cairo',system-ui,sans-serif !important;
font-size:16px !important;font-weight:800 !important;
color:#1F3B2C !important;margin:0 !important;line-height:1.4;
}
.s-reviews-testimonial__info::after{
content:"عميل روشاي";display:block;
font-size:12px;font-weight:600;color:#8A8578;margin-top:2px;
}
.s-reviews-testimonial__quote{display:none !important}
/* ===== 6) البطاقة النشطة أبرز، والمجاورة أقل بروزًا ===== */
.s-block--custom-testimonials .swiper-slide-active .s-reviews-testimonial{
transform:translateY(-6px) scale(1.015);
border-color:rgba(184,134,11,.38) !important;
box-shadow:0 20px 48px rgba(21,42,31,.14) !important;
}
.s-block--custom-testimonials .swiper-slide-active .s-reviews-testimonial::before{opacity:1;height:4px}
.s-block--custom-testimonials .swiper-slide:not(.swiper-slide-active) .s-reviews-testimonial{
background:#FDFCF9 !important;
opacity:.9;
box-shadow:0 6px 18px rgba(21,42,31,.05) !important;
}
@media(hover:hover){
.s-block--custom-testimonials .swiper-slide:hover .s-reviews-testimonial{
border-color:rgba(184,134,11,.34) !important;
box-shadow:0 18px 42px rgba(21,42,31,.13) !important;
}
}
/* ===== 7) مؤشرات الشرائح (نقاط) ===== */
.s-block--custom-testimonials .swiper-pagination{
position:static !important;margin-top:clamp(20px,2.4vw,28px) !important;
display:flex !important;align-items:center !important;justify-content:center !important;gap:9px !important;
}
.s-block--custom-testimonials .swiper-pagination-bullet{
position:relative;
width:9px !important;height:9px !important;
background:rgba(31,59,44,.22) !important;
opacity:1 !important;margin:0 !important;border-radius:999px !important;
transition:width .3s ease,background .3s ease;
cursor:pointer;border:0;padding:0;
}
/* النقطة نفسها 9px لكن منطقة اللمس 44×44 (معيار الجوال) عبر عنصر وهمي شفاف.
لازم background شفاف صريح (مش none) + z-index حتى يشارك في اصطياد اللمس. */
.s-block--custom-testimonials .swiper-pagination-bullet::after{
content:'';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
width:44px;height:44px;border-radius:999px;background:transparent;z-index:1;
}
.s-block--custom-testimonials .swiper-pagination-bullet-active{width:30px !important;background:#B8860B !important}
.s-block--custom-testimonials .swiper-pagination-bullet:focus-visible{outline:2px solid #B8860B;outline-offset:2px}
/* ===== 8) الجوال والتابلت ===== */
@media(max-width:900px){
.s-block--custom-testimonials{margin:36px 0 0 !important;padding:44px 16px 40px !important}
/* الشرائح كانت بعرض الديسكتوب (810px) ⇒ القص خارج الشاشة.
نسيب swiper يحسب العرض، وبس نضمن إن الشريحة الواحدة = عرض الحاوية. */
.s-block--custom-testimonials .swiper-slide{
width:100% !important;max-width:100% !important;flex:0 0 100% !important;
box-sizing:border-box !important;
}
.s-block--custom-testimonials .s-reviews-testimonial{
width:100% !important;max-width:100% !important;box-sizing:border-box !important;
}
.s-reviews-header{font-size:clamp(26px,7.5vw,34px) !important}
.s-reviews-header-wrapper{margin-bottom:22px !important}
.s-block--custom-testimonials .s-slider-nav-arrow{width:44px !important;height:44px !important;min-width:44px}
.s-reviews-testimonial{padding:20px 18px !important;border-radius:16px !important}
.s-reviews-testimonial::after{font-size:68px;top:0;inset-inline-start:12px}
.s-reviews-testimonial p{font-size:15.5px !important;line-height:1.9 !important;margin-bottom:16px !important;padding-top:22px !important}
.s-reviews-testimonial__avatar{width:46px !important;height:46px !important}
.s-reviews-testimonial__name_wrapper{gap:12px !important;padding-top:14px !important}
.s-reviews-testimonial h2{font-size:15px !important}
.s-reviews-testimonial__rating{top:20px !important;inset-inline-end:18px !important}
.s-block--custom-testimonials .swiper{overflow:hidden !important;padding:4px 0 8px !important}
.s-block--custom-testimonials .swiper-slide-active .s-reviews-testimonial{transform:none}
}
@media(max-width:400px){
.s-reviews-testimonial p{font-size:15px !important;line-height:1.85 !important}
.s-reviews-testimonial{padding:18px 15px !important}
}
/* ===== 9) احترام تقليل الحركة ===== */
@media(prefers-reduced-motion:reduce){
.s-block--custom-testimonials .swiper-slide,
.s-reviews-testimonial,
.s-block--custom-testimonials .s-slider-nav-arrow,
.s-block--custom-testimonials .swiper-pagination-bullet{transition:none !important}
.s-block--custom-testimonials .swiper-slide-active .s-reviews-testimonial{transform:none}
.s-block--custom-testimonials .s-slider-nav-arrow:hover:not([disabled]){transform:none}
}
/* ===== RX ABOUT ===== */
body.page-about-rx .rx-about{font-family:inherit;color:var(--rx-ink,#1A1A1A)}
.rx-about *{box-sizing:border-box}
/* عرض بطاقات «من نحن» و«دليل الشاي» — نفس الهوية */
.rx-about-origin-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
/* خطوات دليل الشاي: رقم دائري ذهبي + قائمة التخزين */
.rx-guide-n{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:999px;background:var(--rx-gold,#C9A24B);color:#fff;font-weight:800;font-size:13px;margin-inline-end:10px;vertical-align:middle;transform:translateY(-2px)}
.rx-guide-list{margin:14px 0 0;padding:0;list-style:none}
.rx-guide-list li{position:relative;padding-inline-start:22px;margin-bottom:9px;line-height:1.9}
.rx-guide-list li::before{content:"";position:absolute;inset-inline-start:2px;top:.8em;width:7px;height:7px;border-radius:999px;background:var(--rx-gold,#B8860B);opacity:.85}
/* ---------- 1) Hero ---------- */
.rx-about-hero{
position:relative;background:var(--rx-green-deep,#152A1F);color:var(--rx-cream,#F8F6F1);
overflow:hidden;isolation:isolate;
}
.rx-about-hero::after{
content:"";position:absolute;inset:0;z-index:0;
background:radial-gradient(120% 90% at 82% 12%,rgba(201,162,75,.20),transparent 60%);
pointer-events:none;
}
.rx-about-hero-in{
position:relative;z-index:1;max-width:1240px;margin:0 auto;
padding:clamp(56px,8vw,104px) clamp(20px,4vw,40px);
display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
gap:clamp(28px,5vw,64px);align-items:center;
}
.rx-about-kick{
display:inline-flex;align-items:center;gap:9px;margin:0 0 18px;
font-size:12px;letter-spacing:.16em;text-transform:uppercase;
color:var(--rx-gold,#C9A24B);font-weight:600;
}
.rx-about-kick::before{content:"";width:34px;height:1px;background:var(--rx-gold,#C9A24B);opacity:.8}
.rx-about-h1{
margin:0 0 18px;font-size:clamp(30px,5.2vw,54px);line-height:1.22;font-weight:800;
letter-spacing:-.01em;color:var(--rx-cream,#F8F6F1);
}
.rx-about-h1 em{font-style:normal;color:var(--rx-gold,#C9A24B);display:block}
.rx-about-lead{
margin:0;font-size:clamp(15px,1.5vw,17.5px);line-height:1.95;
color:rgba(248,246,241,.82);max-width:56ch;
}
.rx-about-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.rx-about-hero-media{
position:relative;border-radius:160px 160px 18px 18px;overflow:hidden;
box-shadow:0 30px 70px rgba(0,0,0,.34);border:1px solid rgba(201,162,75,.30);
aspect-ratio:4/4.6;background:#0f2017;
}
.rx-about-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.rx-about-badge{
position:absolute;inset-inline-start:-14px;bottom:22px;z-index:2;
background:var(--rx-cream,#F8F6F1);color:var(--rx-green-deep,#152A1F);
border-radius:14px;padding:12px 18px;box-shadow:0 16px 36px rgba(0,0,0,.28);
border:1px solid rgba(201,162,75,.35);
}
.rx-about-badge b{display:block;font-size:17px;letter-spacing:.02em;color:var(--rx-green-deep,#152A1F)}
.rx-about-badge span{display:block;font-size:11.5px;color:#6b6558;margin-top:2px}
/* ---------- أزرار ---------- */
.rx-abtn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
min-height:50px;padding:0 26px;border-radius:999px;font-size:15px;font-weight:700;
text-decoration:none;cursor:pointer;border:1.5px solid transparent;
transition:transform .2s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.rx-abtn-gold{background:var(--rx-gold,#C9A24B);color:#22180a}
.rx-abtn-gold:hover{background:#d9b365;transform:translateY(-2px);color:#22180a}
.rx-abtn-ghost{border-color:rgba(248,246,241,.42);color:var(--rx-cream,#F8F6F1)}
.rx-abtn-ghost:hover{background:var(--rx-cream,#F8F6F1);color:var(--rx-green-deep,#152A1F);transform:translateY(-2px)}
.rx-abtn-green{background:var(--rx-green-deep,#152A1F);color:var(--rx-cream,#F8F6F1)}
.rx-abtn-green:hover{background:#1F3B2C;transform:translateY(-2px);color:var(--rx-cream,#F8F6F1)}
/* ---------- 2) القصة ---------- */
.rx-about-story{
background:var(--rx-cream,#F8F6F1);
padding:clamp(52px,7vw,94px) clamp(20px,4vw,40px);
}
.rx-about-wrap{max-width:1240px;margin:0 auto}
.rx-about-grid2{
display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
gap:clamp(26px,5vw,64px);align-items:center;
}
.rx-about-media-arch{
border-radius:200px 200px 16px 16px;overflow:hidden;aspect-ratio:3/3.7;
box-shadow:0 24px 56px rgba(21,42,31,.16);background:#e8e2d4;
}
.rx-about-media-arch img{width:100%;height:100%;object-fit:cover;display:block}
.rx-about-eyebrow{
display:inline-block;margin:0 0 12px;font-size:12px;font-weight:700;
letter-spacing:.15em;text-transform:uppercase;color:var(--rx-gold-dark,#B8860B);
}
.rx-about-h2{
margin:0 0 16px;font-size:clamp(24px,3.4vw,38px);line-height:1.3;
font-weight:800;color:var(--rx-green-deep,#152A1F);letter-spacing:-.01em;
}
.rx-about-h2 em{font-style:normal;color:var(--rx-gold-dark,#B8860B)}
.rx-about-p{margin:0 0 15px;font-size:16px;line-height:2;color:#4A453C;max-width:60ch}
.rx-about-p:last-child{margin-bottom:0}
/* ---------- 3) المنشأ والجودة ---------- */
.rx-about-origin{
background:var(--rx-green-deep,#152A1F);color:var(--rx-cream,#F8F6F1);
padding:clamp(52px,7vw,94px) clamp(20px,4vw,40px);
}
.rx-about-origin .rx-about-h2{color:var(--rx-cream,#F8F6F1)}
.rx-about-origin .rx-about-eyebrow{color:var(--rx-gold,#C9A24B)}
.rx-about-origin .rx-about-p{color:rgba(248,246,241,.80)}
.rx-about-origin-head{max-width:760px;margin:0 auto clamp(30px,4vw,52px);text-align:center}
.rx-about-origin-head .rx-about-p{margin-inline:auto}
.rx-about-origin-grid{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(14px,2.2vw,24px);
}
.rx-about-ocard{
background:rgba(248,246,241,.055);border:1px solid rgba(201,162,75,.26);
border-radius:16px;padding:clamp(20px,2.6vw,30px);
transition:transform .24s ease,border-color .24s ease,background .24s ease;
}
.rx-about-ocard:hover{transform:translateY(-4px);border-color:rgba(201,162,75,.55);background:rgba(248,246,241,.09)}
.rx-about-ocard svg{width:30px;height:30px;color:var(--rx-gold,#C9A24B);margin-bottom:14px;display:block}
.rx-about-ocard h3{margin:0 0 8px;font-size:17.5px;font-weight:700;color:var(--rx-cream,#F8F6F1)}
.rx-about-ocard p{margin:0;font-size:14.5px;line-height:1.85;color:rgba(248,246,241,.72)}
/* ---------- 4) ما يميز روشاي ---------- */
.rx-about-why{background:var(--rx-cream-soft,#F1EDE3);padding:clamp(52px,7vw,94px) clamp(20px,4vw,40px)}
.rx-about-why-head{max-width:720px;margin:0 auto clamp(28px,4vw,48px);text-align:center}
.rx-about-why-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,2.2vw,22px)}
.rx-about-wcard{
background:#fff;border:1px solid rgba(26,26,26,.07);border-radius:16px;
padding:clamp(20px,2.6vw,30px);box-shadow:0 8px 26px rgba(21,42,31,.06);
transition:transform .24s ease,box-shadow .24s ease;
}
.rx-about-wcard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(21,42,31,.12)}
.rx-about-wico{
width:50px;height:50px;border-radius:50%;display:grid;place-items:center;margin-bottom:15px;
background:rgba(201,162,75,.13);border:1px solid rgba(201,162,75,.34);
}
.rx-about-wico svg{width:24px;height:24px;color:var(--rx-gold-dark,#B8860B)}
.rx-about-wcard h3{margin:0 0 7px;font-size:16.5px;font-weight:700;color:var(--rx-green-deep,#152A1F)}
.rx-about-wcard p{margin:0;font-size:14px;line-height:1.8;color:#6b6558}
/* ---------- 5) CTA ---------- */
.rx-about-cta{
background:var(--rx-cream,#F8F6F1);
padding:clamp(48px,6vw,80px) clamp(20px,4vw,40px) clamp(56px,7vw,94px);
}
.rx-about-cta-box{
max-width:1240px;margin:0 auto;text-align:center;
background:linear-gradient(135deg,#1F3B2C 0%,#152A1F 100%);
border-radius:22px;padding:clamp(38px,5vw,66px) clamp(22px,4vw,48px);
border:1px solid rgba(201,162,75,.28);
box-shadow:0 26px 60px rgba(21,42,31,.20);
}
.rx-about-cta-box h2{
margin:0 0 12px;font-size:clamp(24px,3.4vw,38px);font-weight:800;
color:var(--rx-cream,#F8F6F1);line-height:1.32;
}
.rx-about-cta-box p{
margin:0 auto 26px;max-width:56ch;font-size:16px;line-height:1.95;
color:rgba(248,246,241,.80);
}
.rx-about-cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* ---------- الجوال ---------- */
@media (max-width:900px){
.rx-about-hero-in{grid-template-columns:1fr;gap:30px;text-align:start}
.rx-about-hero-media{aspect-ratio:16/11;border-radius:120px 120px 16px 16px;max-width:520px;margin:0 auto}
.rx-about-badge{inset-inline-start:12px;bottom:12px}
.rx-about-grid2{grid-template-columns:1fr}
.rx-about-media-arch{aspect-ratio:4/3.4;border-radius:120px 120px 14px 14px;max-width:460px;margin:0 auto}
.rx-about-origin-grid{grid-template-columns:1fr}
.rx-about-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.rx-about-hero-cta,.rx-about-cta-actions{gap:10px}
.rx-abtn{flex:1 1 auto;min-width:150px}
}
@media (max-width:520px){
.rx-about-why-grid{grid-template-columns:1fr}
.rx-about-h1{font-size:28px}
.rx-about-hero-media{aspect-ratio:4/3.2}
}
/* ===== RX PRODUCT PAGE ===== */
:root{
--rxp-green:#152A1F;
--rxp-green-2:#1F3B2C;
--rxp-gold:#B8860B;
--rxp-gold-2:#C9A24B;
--rxp-cream:#F8F6F1;
--rxp-sand:#F1EDE3;
--rxp-line:#E7E1D5;
--rxp-ink:#2A2620;
--rxp-mute:#6B6558;
--rxp-radius:18px;
--rxp-shadow:0 10px 34px rgba(21,42,31,.07);
--rxp-shadow-sm:0 2px 10px rgba(21,42,31,.05);
}
/* =====================================================================
1) الصفحة والعمودان: مساحة أوسع للصور + عمود معلومات مريح
===================================================================== */
body:has(.container--product-details){
background:var(--rxp-cream);
}
body:has(.container--product-details) .container--product-details{
max-width:1400px !important;
padding-inline:clamp(14px,2.4vw,28px) !important;
padding-top:clamp(18px,2vw,30px) !important;
}
body:has(.container--product-details) .container--product-details > div{
align-items:flex-start !important;
gap:clamp(20px,2.4vw,36px) !important;
}
/* عمود الصور: يأخذ المساحة الأكبر + يلاحق القارئ
⚠️ الثيم يضع overflow:hidden على الـ sidebar نفسه ⇒ يقتل position:sticky.
وbody عليه overflow-x:hidden (يصبح hidden auto) ⇒ يكسر sticky أيضًا.
الحل: overflow:visible على الـ sidebar، وclip على body بدل hidden. */
body:has(.container--product-details){
overflow-x:clip !important;
overflow-y:visible !important;
}
body:has(.container--product-details) .sidebar,
body:has(.container--product-details) .md\:\!w-2\/4{
align-self:flex-start !important;
height:auto !important;
flex:0 0 auto !important;
width:min(50%,600px) !important;
position:sticky !important;
top:16px !important;
overflow:visible !important;
}
/* عمود المعلومات: الارتفاع يتبع المحتوى — لا flex-grow ولا overflow مفتوح
(flex:1 1 0 + overflow:visible جعل الحاوية تنهار إلى 34px على الجوال)
width محسوب صريحًا لأن الحاوية ليست flex-wrap بل flex-row وأحد الأعمدة fixed. */
body:has(.container--product-details) .main-content{
align-self:flex-start !important;
height:auto !important;
flex:0 0 auto !important;
width:calc(100% - min(50%,600px) - clamp(20px,2.4vw,36px)) !important;
min-width:0 !important;
box-sizing:border-box;
position:static !important;
background:#fff;
border:1px solid var(--rxp-line);
border-radius:var(--rxp-radius);
box-shadow:var(--rxp-shadow);
padding:clamp(18px,2vw,30px) !important;
overflow:visible !important;
}
/* =====================================================================
2) معرض الصور: صورة كبيرة نظيفة + احتواء بلا قصّ
===================================================================== */
body:has(.container--product-details) .details-slider{
border-radius:var(--rxp-radius) !important;
overflow:hidden;
background:#fff;
border:1px solid var(--rxp-line);
box-shadow:var(--rxp-shadow);
}
body:has(.container--product-details) .details-slider .swiper-slide{
height:auto !important;
width:auto !important;
flex:0 0 100% !important;
}
body:has(.container--product-details) .details-slider img{
width:100% !important;
height:auto !important;
aspect-ratio:4/3;
max-height:560px;
object-fit:contain !important;
background:#fff;
padding:clamp(10px,1.6vw,22px);
display:block;
margin:0 auto;
}
/* =====================================================================
3) العنوان والسعر: تسلسل بصري واضح
===================================================================== */
body:has(.container--product-details) .main-content h1{
color:var(--rxp-green) !important;
font-size:clamp(22px,2.2vw,31px) !important;
line-height:1.45 !important;
font-weight:800 !important;
letter-spacing:-.01em;
margin-bottom:10px !important;
}
body:has(.container--product-details) .product-entry__sub-title{
color:var(--rxp-mute) !important;
font-size:14.5px !important;
line-height:1.7 !important;
margin-bottom:14px !important;
}
/* شارة «شحن مجاني» وغيرها كنص ذهبي هادئ */
body:has(.container--product-details) .main-content .product-entry__sub-title + div,
body:has(.container--product-details) .main-content > div.flex.whitespace-nowrap{
border-radius:12px;
background:var(--rxp-sand);
padding:10px 14px !important;
margin-bottom:16px !important;
color:var(--rxp-green) !important;
font-weight:800 !important;
font-size:clamp(19px,1.9vw,25px) !important;
border:1px solid var(--rxp-line);
}
/* =====================================================================
4) الوصف: كارت مستقل داخل عمود المعلومات (عمود واحد — بلا تقطيع أعمدة)
===================================================================== */
@media (min-width:901px){
body:has(.container--product-details) .container--product-details > div{
display:grid !important;
grid-template-columns:minmax(0,1.02fr) minmax(0,0.98fr) !important;
align-items:start !important;
}
body:has(.container--product-details) .sidebar,
body:has(.container--product-details) .md\:\!w-2\/4{
grid-column:1 !important;
grid-row:1 !important;
width:100% !important;
max-width:640px !important;
justify-self:start !important;
}
body:has(.container--product-details) .main-content{
grid-column:2 !important;
grid-row:1 !important;
width:100% !important;
}
}
/* الوصف يبقى داخل تدفق .main-content ككارت مستقل تحته. */
/* =====================================================================
4b) ترتيب العمود: العنوان → السعر → الشراء → الوصف أخيرًا
سبب جوهري (مقاس حيًّا): الفورم كان يبدأ عند 1817px في شاشة 900px ⇒
الزائر لا يرى زر «أضف إلى السلة» إطلاقًا. الترتيب بـ order يصلح ذلك
دون أي تغيير في منطق السلة أو الأسعار (CSS ترتيب بصري فقط).
===================================================================== */
body:has(.container--product-details) .main-content{
display:flex !important;
flex-direction:column !important;
}
body:has(.container--product-details) .main-content > h1{ order:1; }
body:has(.container--product-details) .main-content > h2.product-entry__sub-title{ order:2; }
body:has(.container--product-details) .main-content > div.flex.whitespace-nowrap{ order:3; }
body:has(.container--product-details) .main-content > .product-sku-wrapper{ order:4; }
body:has(.container--product-details) .main-content > .product-form{ order:5; }
body:has(.container--product-details) .main-content > .product__description{ order:6; }
/* أزرار المشاركة بعد زر «اقرأ المزيد» (7) — لا تعطّل مسار الشراء */
body:has(.container--product-details) .main-content > div.flex.rtl\:space-x-reverse{ order:8; }
/* عناصر الثيم الفارغة (ارتفاع 0) لا تأخذ مساحة ولا تُنتج فراغًا */
body:has(.container--product-details) .main-content > salla-hook,
body:has(.container--product-details) .main-content > salla-free-shipping-tag,
body:has(.container--product-details) .main-content > salla-cashback-banner,
body:has(.container--product-details) .main-content > salla-installment,
body:has(.container--product-details) .main-content > salla-bought-together,
body:has(.container--product-details) .main-content > salla-verified-review,
body:has(.container--product-details) .main-content > salla-quick-order,
body:has(.container--product-details) .main-content > .s-block{
order:9;
margin:0 !important;
}
/* إلغاء الهوامش الكبيرة بين العناصر (الثيم يضع mb-6/mb-4 ⇒ فراغ غير مبرَّر) */
@media (min-width:901px){
body:has(.container--product-details) .main-content > h1{ margin-bottom:6px !important; }
body:has(.container--product-details) .main-content > .product-sku-wrapper{ margin-bottom:10px !important; }
body:has(.container--product-details) .main-content > div.flex.whitespace-nowrap{ margin-bottom:4px !important; }
}
/* السعر داخل الفورم مكرّر بصريًا (سعر الثيم أعلى العمود) ⇒ نُخفيه هنا فقط،
لأن السعر الحقيقي يبقى معروضًا في صدر الصفحة وفي ملخص السلة.
ملاحظة: هذا إخفاء بصري لنسخة مكرّرة، ولا يمسّ أي حساب أو منطق. */
body:has(.container--product-details) .product-form .product-price-wrapper,
/* =====================================================================
4c) تبسيط الوصف: ملخص قصير ظاهر + الباقي قابل للفتح
— الوصف 1194–1324px كان يهيمن على الصفحة. المستخدم: «ضخم جدًا».
الحل: قصر الارتفاع على ~3 أسطر مع تلاشي، وزر «اقرأ المزيد» بـ JS صغير
داخل نفس الملف (لا مكتبة جديدة)، والمحتوى كله من لوحة سلة كما هو.
===================================================================== */
body:has(.container--product-details) .product__description{
background:#fff !important;
border:1px solid var(--rxp-line) !important;
border-radius:var(--rxp-radius) !important;
padding:clamp(20px,2.2vw,34px) clamp(20px,2.4vw,40px) !important;
margin:clamp(20px,2.2vw,32px) 0 4px !important;
font-size:15.5px !important;
line-height:2.05 !important;
color:#463F35 !important;
box-shadow:var(--rxp-shadow-sm);
overflow-wrap:break-word;
position:relative;
overflow:hidden;
max-height:230px;
transition:max-height .35s ease;
}
body:has(.container--product-details) .product__description.rxp-open{
max-height:none;
}
/* تلاشي سفلي يوحي بوجود محتوى إضافي */
body:has(.container--product-details) .product__description::after{
content:"";
position:absolute;
inset-inline:0; bottom:0;
height:90px;
background:linear-gradient(180deg,rgba(255,255,255,0),#fff 78%);
pointer-events:none;
transition:opacity .25s ease;
}
body:has(.container--product-details) .product__description.rxp-open::after{
opacity:0;
}
/* زر «اقرأ المزيد» — يُضاف بـ JS مباشرة بعد .product__description */
.rxp-more{
display:flex; align-items:center; justify-content:center; gap:8px;
width:100%;
margin:14px 0 2px;
padding:12px 16px;
font-family:inherit; font-size:15px; font-weight:800;
color:var(--rxp-green);
background:var(--rxp-sand);
border:1px solid var(--rxp-line);
border-radius:12px;
cursor:pointer;
transition:background .16s ease, border-color .16s ease;
/* الترتيب: الوصف = 6، فالزر بعده = 7 (والعناصر التالية أُزيحت) */
order:7;
}
.rxp-more:hover{
background:#EAE4D8;
border-color:rgba(21,42,31,.22);
}
.rxp-more svg{ width:16px; height:16px; transition:transform .25s ease; }
.rxp-more.rxp-on svg{ transform:rotate(180deg); }
/* عنوان القسم (H3 داخل الوصف) */
body:has(.container--product-details) .product__description h3{
display:flex; align-items:center; gap:10px;
color:var(--rxp-green) !important;
font-size:clamp(16px,1.5vw,18.5px) !important;
font-weight:800 !important;
line-height:1.5 !important;
margin:26px 0 12px !important;
padding-top:20px;
border-top:1px solid var(--rxp-line);
}
body:has(.container--product-details) .product__description h3:first-of-type{
margin-top:18px !important;
}
/* علامة ذهبية قبل كل عنوان */
body:has(.container--product-details) .product__description h3::before{
content:"";
flex:0 0 auto;
width:4px; height:19px;
border-radius:99px;
background:linear-gradient(180deg,var(--rxp-gold-2),var(--rxp-gold));
}
/* H2 الكبير في أول الوصف: عنوان ترحيبي */
body:has(.container--product-details) .product__description h2{
color:var(--rxp-green) !important;
font-size:clamp(16px,1.55vw,19px) !important;
font-weight:800 !important;
line-height:1.7 !important;
margin:0 0 14px !important;
}
body:has(.container--product-details) .product__description p{
margin:0 0 13px !important;
}
/* القوائم: مسافات مريحة ونقاط ذهبية */
body:has(.container--product-details) .product__description ul,
body:has(.container--product-details) .product__description ol{
margin:0 0 16px !important;
padding:0 !important;
padding-inline-start:6px !important;
list-style:none !important;
}
body:has(.container--product-details) .product__description li{
position:relative;
padding-inline-start:20px;
margin-bottom:9px !important;
line-height:1.95 !important;
}
body:has(.container--product-details) .product__description li::before{
content:"";
position:absolute;
inset-inline-start:2px;
top:.85em;
width:7px; height:7px;
border-radius:99px;
background:var(--rxp-gold);
opacity:.85;
}
body:has(.container--product-details) .product__description strong,
body:has(.container--product-details) .product__description b{
color:var(--rxp-green) !important;
font-weight:800 !important;
}
/* =====================================================================
5) صندوق الشراء: بارز ومنظّم
===================================================================== */
body:has(.container--product-details) .sticky-product-bar{
background:var(--rxp-cream) !important;
border:1px solid var(--rxp-line) !important;
border-top:3px solid var(--rxp-gold) !important;
border-radius:14px !important;
padding:16px 18px !important;
margin-top:18px !important;
}
body:has(.container--product-details) .sticky-product-bar b.block,
body:has(.container--product-details) .form-label{
color:var(--rxp-green) !important;
font-weight:800 !important;
font-size:14.5px !important;
letter-spacing:.01em;
}
body:has(.container--product-details) .total-price{
color:var(--rxp-green) !important;
font-size:clamp(21px,2.1vw,27px) !important;
font-weight:800 !important;
}
/* عدّاد الكمية */
body:has(.container--product-details) .s-quantity-input{
border-radius:11px !important;
border-color:rgba(21,42,31,.16) !important;
background:#fff !important;
}
body:has(.container--product-details) .s-quantity-input-button{
min-width:46px !important;
min-height:46px !important;
border-radius:10px !important;
color:var(--rxp-green) !important;
border-color:rgba(21,42,31,.14) !important;
font-size:19px !important;
font-weight:700 !important;
transition:background .18s ease,color .18s ease,border-color .18s ease;
}
body:has(.container--product-details) .s-quantity-input-button:hover{
background:var(--rxp-green) !important;
color:#fff !important;
border-color:var(--rxp-green) !important;
}
body:has(.container--product-details) .s-quantity-input input{
font-weight:800 !important;
color:var(--rxp-green) !important;
font-size:16.5px !important;
min-height:46px !important;
}
/* =====================================================================
6) زر «أضف إلى السلة»: ذهبي رئيسي — حالات حقيقية فقط
⚠️ الكلاس الحقيقي من الثيم: .s-button-element.s-button-btn.s-button-solid
.s-button-wide.s-button-primary (الثيم يضبطه أخضر #152A1F).
===================================================================== */
body:has(.container--product-details) .product-form .s-button-element.s-button-primary,
body:has(.container--product-details) salla-add-product-button .s-button-element{
min-height:54px !important;
font-size:16.5px !important;
font-weight:800 !important;
border-radius:13px !important;
letter-spacing:.01em;
background:linear-gradient(180deg,var(--rxp-gold-2),var(--rxp-gold)) !important;
color:#fff !important;
border:0 !important;
box-shadow:0 6px 18px rgba(184,134,11,.28) !important;
transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
body:has(.container--product-details) .product-form .s-button-element.s-button-primary:hover{
transform:translateY(-1px);
box-shadow:0 10px 24px rgba(184,134,11,.32) !important;
filter:brightness(1.04);
}
body:has(.container--product-details) .product-form .s-button-element.s-button-primary:active{
transform:translateY(0);
box-shadow:0 4px 12px rgba(184,134,11,.2) !important;
}
/* حالة التحميل التي يضيفها سلة نفسه — لا نخترعها */
body:has(.container--product-details) .s-button-element.s-button-loader-center .s-button-loader{
filter:none;
}
/* زر «اشترِ الآن» — ثانوي أنيق (يُبقى كما هو وظيفيًا) */
body:has(.container--product-details) .product-form .s-button-outline,
body:has(.container--product-details) .product-form .s-button-light{
min-height:54px !important;
border-radius:13px !important;
font-weight:800 !important;
border-color:rgba(21,42,31,.2) !important;
color:var(--rxp-green) !important;
}
/* =====================================================================
7) رقم الموديل + بلوكات سلة الأخرى
===================================================================== */
body:has(.container--product-details) .product-sku-wrapper{
color:var(--rxp-mute) !important;
font-size:13px !important;
background:var(--rxp-sand);
border:1px solid var(--rxp-line);
border-radius:10px;
padding:9px 13px !important;
display:inline-block;
margin-top:14px !important;
}
/* =====================================================================
8) «مجموعة روشاي» + «منتجات قد تعجبك» (المنتجات المشابهة/ذات الصلة)
— محذوفة بطلب العميل من صفحة المنتج فقط
===================================================================== */
body:has(.container--product-details) section.s-block.container:has(.similar-products__header),
body:has(.container--product-details) main > div.container.mb-5,
/* بقايا الأغلفة: تعليقات فارغة + غلاف related الفاضي */
body:has(.container--product-details) salla-comments,
body:has(.container--product-details) .s-before-related{
display:none !important;
}
/* =====================================================================
9) الجوال: عمود واحد مريح + شريط شراء لاصق
===================================================================== */
@media (max-width:900px){
body:has(.container--product-details) .sidebar,
body:has(.container--product-details) .md\:\!w-2\/4{
position:static !important;
width:100% !important;
top:auto !important;
}
body:has(.container--product-details) .container--product-details > div{
gap:16px !important;
}
body:has(.container--product-details) .details-slider img{
aspect-ratio:4/3;
padding:8px;
}
body:has(.container--product-details) .main-content{
border-radius:15px;
padding:16px 15px !important;
width:100% !important;
}
body:has(.container--product-details) .product__description{
font-size:15px !important;
line-height:2 !important;
}
/* شريط الشراء اللاصق على الجوال */
body:has(.container--product-details) .sticky-product-bar{
position:fixed !important;
inset-inline:0 !important;
bottom:0 !important;
top:auto !important;
z-index:60 !important;
margin:0 !important;
border-radius:16px 16px 0 0 !important;
border-inline:0 !important;
border-bottom:0 !important;
border-top:3px solid var(--rxp-gold) !important;
padding:11px 14px calc(11px + env(safe-area-inset-bottom)) !important;
background:rgba(248,246,241,.985) !important;
backdrop-filter:blur(12px);
box-shadow:0 -10px 30px rgba(21,42,31,.15) !important;
}
body:has(.container--product-details) .sticky-product-bar__quantity{
margin-bottom:8px !important;
}
body:has(.container--product-details) .sticky-product-bar .s-quantity-input-button{
min-width:42px !important;
min-height:42px !important;
}
body:has(.container--product-details) .sticky-product-bar .s-quantity-input input{
min-height:42px !important;
}
body:has(.container--product-details) .product-form .s-button-element.s-button-primary{
min-height:50px !important;
font-size:15.5px !important;
}
/* مساحة تحت الصفحة حتى لا يغطي الشريط المحتوى */
body:has(.container--product-details) .container--product-details{
padding-bottom:150px !important;
}
/* بطاقات ذات صلة: عمودان مريحان */
body:has(.container--product-details) .s-before-related{
padding-bottom:170px !important;
}
}
@media (max-width:420px){
body:has(.container--product-details) .main-content h1{
font-size:21px !important;
}
body:has(.container--product-details) .product__description h3{
font-size:16px !important;
}
}
/* ===== RX CONTACT ===== */
body.page-contact-rx .rxc{
--ink:#1A1A1A; --green:#152A1F; --green2:#1F3B2C; --gold:#B8860B;
--gold-l:#C9A24B; --cream:#F8F6F1; --cream2:#F1EDE3;
--line:rgba(26,26,26,.10); --muted:#6B6558; --r:18px;
font-family:inherit; color:var(--ink); direction:rtl;
}
body.page-contact-rx .rxc *{box-sizing:border-box}
/* ---------- Hero ---------- */
.rxc-hero{
position:relative; overflow:hidden;
background:linear-gradient(160deg,#152A1F 0%,#1F3B2C 58%,#24402F 100%);
padding:clamp(46px,7vw,92px) clamp(18px,5vw,64px);
text-align:center;
}
.rxc-hero::before{
content:""; position:absolute; inset:0;
background:
radial-gradient(circle at 12% 18%, rgba(184,134,11,.20), transparent 46%),
radial-gradient(circle at 88% 82%, rgba(201,162,75,.14), transparent 44%);
pointer-events:none;
}
.rxc-hero-in{position:relative; max-width:760px; margin:0 auto}
.rxc-kick{
display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.22em;
color:var(--gold-l); text-transform:uppercase; margin-bottom:16px;
}
.rxc-h1{
margin:0 0 16px; color:#fff; font-weight:800;
font-size:clamp(27px,4.6vw,46px); line-height:1.28; letter-spacing:-.015em;
}
.rxc-h1 em{color:var(--gold-l); font-style:normal}
.rxc-lead{
margin:0 auto; max-width:580px; color:rgba(255,255,255,.82);
font-size:clamp(14.5px,1.6vw,17px); line-height:1.95;
}
/* ---------- الحاوية ---------- */
.rxc-wrap{
background:var(--cream);
padding:clamp(34px,5vw,68px) clamp(16px,4vw,56px) clamp(44px,6vw,86px);
}
.rxc-grid{
max-width:1180px; margin:0 auto;
display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(20px,3vw,38px);
align-items:start;
}
/* ---------- بطاقات ---------- */
.rxc-card{
background:#fff; border:1px solid var(--line); border-radius:var(--r);
padding:clamp(22px,2.6vw,32px); box-shadow:0 10px 34px rgba(21,42,31,.07);
}
.rxc-card + .rxc-card{margin-top:clamp(16px,2vw,24px)}
.rxc-title{
margin:0 0 6px; color:var(--green); font-weight:800;
font-size:clamp(17px,2vw,21px);
}
.rxc-sub{margin:0 0 20px; color:var(--muted); font-size:14px; line-height:1.85}
/* ---------- طرق التواصل ---------- */
.rxc-methods{display:grid; gap:12px; margin:0; padding:0; list-style:none}
.rxc-method{
display:flex; align-items:center; gap:14px;
padding:14px 16px; border-radius:14px;
background:var(--cream); border:1px solid var(--line);
text-decoration:none; color:inherit;
transition:transform .2s ease, border-color .2s ease, background .2s ease;
}
.rxc-method:hover{transform:translateY(-3px); border-color:rgba(184,134,11,.45); background:#fff}
.rxc-ico{
flex:0 0 46px; width:46px; height:46px; border-radius:12px;
display:grid; place-items:center;
background:linear-gradient(150deg,#152A1F,#1F3B2C); color:var(--gold-l);
}
.rxc-ico svg{width:22px;height:22px;fill:currentColor}
.rxc-m-label{display:block; font-size:12px; color:var(--muted); margin-bottom:3px; font-weight:600}
.rxc-m-val{
display:block; color:var(--green); font-weight:800;
font-size:clamp(14px,1.5vw,15.5px); direction:ltr; text-align:right;
word-break:break-all;
}
body.page-contact-rx .rxc-m-val.ar{direction:rtl; text-align:right; letter-spacing:0}
/* ---------- السوشيال ---------- */
/* v2: أيقونات دائرية بألوان المنصة + اسم واضح — أوضح من الحبات الموحدة */
.rxc-social{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; padding:0; list-style:none}
.rxc-soc{
display:inline-flex; align-items:center; gap:11px;
padding:10px 14px 10px 10px; border-radius:15px;
background:#fff; border:1px solid var(--line);
color:var(--green); text-decoration:none; font-weight:800; font-size:13.5px;
transition:transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
min-height:56px; box-shadow:0 2px 8px rgba(21,42,31,.05);
}
/* القرص الدائري: لون المنصة الأصلي، الأيقونة بيضاء */
.rxc-soc .rxc-soc-disc{
flex:0 0 auto; width:38px; height:38px; border-radius:999px;
display:inline-flex; align-items:center; justify-content:center;
color:#fff; transition:transform .2s ease;
}
.rxc-soc .rxc-soc-disc svg{width:18px;height:18px;fill:currentColor}
.rxc-soc .rxc-soc-disc.ig{background:radial-gradient(135% 135% at 20% 110%,#FFD600 0%,#FF7A00 45%,#FF0069 65%,#D300C5 90%)}
.rxc-soc .rxc-soc-disc.tt{background:#111}
.rxc-soc .rxc-soc-disc.sc{background:#FFFC00}
.rxc-soc .rxc-soc-disc.sc svg{fill:#111}
.rxc-soc .rxc-soc-disc.x{background:#111}
.rxc-soc small{display:block;font-weight:600;font-size:11px;color:#8A8578;line-height:1.3;direction:ltr;unicode-bidi:isolate;text-align:start}
.rxc-soc:hover{transform:translateY(-3px); border-color:var(--gold); box-shadow:0 10px 22px rgba(21,42,31,.12)}
.rxc-soc:hover .rxc-soc-disc{transform:scale(1.08)}
/* ---------- النموذج ---------- */
.rxc-form{display:grid; gap:15px}
.rxc-row{display:grid; grid-template-columns:1fr 1fr; gap:15px}
.rxc-f{display:flex; flex-direction:column; gap:7px}
.rxc-f label{font-size:13.5px; font-weight:700; color:var(--green)}
.rxc-f label .rxc-req{color:var(--gold); margin-inline-start:3px}
.rxc-f input,
.rxc-f select,
.rxc-f textarea{
width:100%; font:inherit; font-size:15px; color:var(--ink);
padding:13px 15px; min-height:48px;
background:var(--cream); border:1.5px solid var(--line); border-radius:12px;
transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.rxc-f textarea{min-height:132px; resize:vertical; line-height:1.85}
.rxc-f select{appearance:none; cursor:pointer;
background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23152A1F'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:left 14px center; background-size:20px;
padding-inline-start:14px; padding-inline-end:42px;
}
.rxc-f input:focus,
.rxc-f select:focus,
.rxc-f textarea:focus{
outline:none; background:#fff; border-color:var(--gold);
box-shadow:0 0 0 4px rgba(184,134,11,.13);
}
.rxc-f input::placeholder,.rxc-f textarea::placeholder{color:#A49E90}
/* التحقق */
.rxc-f.bad input,.rxc-f.bad select,.rxc-f.bad textarea{
border-color:#C0392B; background:#FDF4F3;
}
.rxc-err{display:none; font-size:12.5px; color:#C0392B; font-weight:700}
.rxc-f.bad .rxc-err{display:block}
/* ---------- زر الإرسال: ذهبي ---------- */
.rxc-submit{
margin-top:6px; width:100%; min-height:54px;
display:inline-flex; align-items:center; justify-content:center; gap:10px;
font:inherit; font-weight:800; font-size:16.5px;
color:#fff; cursor:pointer; border:0; border-radius:999px;
background:linear-gradient(150deg,#B8860B,#C9A24B);
box-shadow:0 10px 26px rgba(184,134,11,.34);
transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.rxc-submit:hover{transform:translateY(-2px); box-shadow:0 15px 34px rgba(184,134,11,.42); filter:brightness(1.05)}
.rxc-submit:active{transform:translateY(0)}
.rxc-submit svg{width:19px;height:19px;fill:currentColor}
.rxc-submit[disabled]{opacity:.65; cursor:progress; transform:none}
/* ---------- رسائل النتيجة (حقيقية فقط) ---------- */
.rxc-note{
display:flex; gap:11px; align-items:flex-start;
padding:14px 16px; border-radius:13px; font-size:13.8px; line-height:1.85;
border:1px solid transparent;
}
.rxc-note svg{width:19px;height:19px;flex:0 0 auto;margin-top:2px;fill:currentColor}
.rxc-note.info{background:rgba(21,42,31,.055); border-color:rgba(21,42,31,.14); color:var(--green)}
.rxc-note.err{background:#FDF4F3; border-color:rgba(192,57,43,.28); color:#9A2E22}
.rxc-note.ok{background:rgba(31,59,44,.09); border-color:rgba(31,59,44,.25); color:var(--green)}
/* زر نسخ نص الرسالة داخل النوت */
.rxc-note .rxc-copy{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:7px 13px;border-radius:9px;border:1px solid rgba(31,59,44,.25);background:#fff;color:var(--green);font-weight:700;font-size:12.5px;cursor:pointer;transition:background .2s ease}
.rxc-note .rxc-copy:hover{background:var(--green);color:#F8F6F1}
.rxc-note .rxc-copy svg{width:14px;height:14px;fill:currentColor;flex:0 0 auto}
/* ---------- FAQ ---------- */
.rxc-faq{max-width:1180px; margin:clamp(30px,4vw,50px) auto 0}
.rxc-faq h2{
margin:0 0 16px; color:var(--green); font-weight:800;
font-size:clamp(18px,2.3vw,24px); text-align:center;
}
.rxc-acc{display:grid; gap:11px}
.rxc-acc details{
background:#fff; border:1px solid var(--line); border-radius:14px;
padding:0; overflow:hidden; transition:border-color .2s ease;
}
.rxc-acc details[open]{border-color:rgba(184,134,11,.42)}
.rxc-acc summary{
cursor:pointer; list-style:none; padding:16px 18px;
font-weight:700; color:var(--green); font-size:15px;
display:flex; align-items:center; justify-content:space-between; gap:12px;
min-height:52px;
}
.rxc-acc summary::-webkit-details-marker{display:none}
.rxc-acc summary::after{
content:"+"; flex:0 0 auto; width:26px; height:26px; border-radius:50%;
display:grid; place-items:center; font-weight:800; font-size:17px;
background:var(--cream); color:var(--gold); border:1px solid var(--line);
transition:transform .25s ease;
}
.rxc-acc details[open] summary::after{content:"−"; transform:rotate(180deg)}
.rxc-acc .rxc-a{
padding:0 18px 17px; color:var(--muted); font-size:14.2px; line-height:1.95;
border-top:1px solid var(--line); padding-top:14px;
}
/* ---------- استجابة ---------- */
@media (max-width:900px){
.rxc-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
.rxc-row{grid-template-columns:1fr}
.rxc-hero{padding:38px 18px 44px}
.rxc-wrap{padding:26px 14px 52px}
.rxc-m-val{font-size:14px}
}
@media (max-width:380px){
.rxc-social{grid-template-columns:1fr}
}
/* ===== RX TOPBAR ===== */
@media (min-width:1024px){
/* 1) ارتفاع أقل وتوازن أفقي */
.store-header .top-navbar{min-height:40px !important;padding-block:5px !important}
.store-header .top-navbar .container{min-height:30px !important;gap:20px !important}
/* 2) حقل البحث: مدمج ومتوازن — مش ممطوط على عرض البار كله */
.store-header .top-navbar .header-search{flex:0 1 clamp(320px,30vw,470px) !important;min-width:260px !important}
.store-header .top-navbar .s-search-input-wrapper{width:100% !important}
.store-header .top-navbar .s-search-input{
background:rgba(248,246,241,.14) !important;
color:#fff !important;
border:1px solid rgba(255,255,255,.10) !important;
border-radius:999px !important;
min-height:30px !important;
padding-block:4px !important;
font-size:13px !important;
transition:background .2s ease,border-color .2s ease,box-shadow .2s ease !important;
}
.store-header .top-navbar .s-search-input::placeholder{color:rgba(248,246,241,.55) !important}
.store-header .top-navbar .s-search-input:hover{background:rgba(248,246,241,.16) !important}
.store-header .top-navbar .s-search-input:focus{
background:rgba(248,246,241,.18) !important;
border-color:rgba(201,162,75,.55) !important;
box-shadow:0 0 0 3px rgba(201,162,75,.16) !important;
outline:none !important;
}
/* أيقونة البحث ذهبية واضحة */
.store-header .top-navbar .s-search-icon{width:15px !important;height:15px !important}
.store-header .top-navbar .s-search-icon svg{fill:#C9A24B !important}
/* 3) بيانات التواصل: مختصرة بأيقونات ذهبية + فواصل خفيفة */
.store-header salla-contacts{display:inline-flex !important;align-items:center !important}
.store-header salla-contacts a{
display:inline-flex !important;align-items:center !important;gap:7px !important;
color:rgba(248,246,241,.92) !important;
font-size:13px !important;font-weight:600 !important;line-height:1 !important;
padding:4px 2px !important;
transition:color .2s ease !important;
}
.store-header salla-contacts a:hover{color:#C9A24B !important}
/* حذف عبارة «تواصل معنا:» — يبقى الرقم فقط */
.store-header salla-contacts a[href^="tel"] span:not(.unicode){display:none !important}
.store-header salla-contacts .unicode{
direction:ltr;unicode-bidi:isolate;
font-weight:700 !important;letter-spacing:.03em;
}
/* فاصل خفيف بين الهاتف والبريد */
.store-header salla-contacts a + a{
border-inline-start:1px solid rgba(255,255,255,.16) !important;
padding-inline-start:12px !important;
margin-inline-start:12px !important;
}
.store-header salla-contacts a[href^="tel"]{padding-inline-end:0 !important}
/* الأيقونات */
.store-header salla-contacts a::before{
content:"";flex:0 0 auto;width:14px;height:14px;
background:center/contain no-repeat;opacity:.95;
}
.store-header salla-contacts a[href^="tel"]::before{
background-image:url("data:image/svg+xml,");
}
.store-header salla-contacts a[href^="mailto"]::before{
background-image:url("data:image/svg+xml,");
}
}
/* ===== RX NAV ALIGN ===== */
ul.main-menu{
align-items:center !important;
}
ul.main-menu > li{
display:flex !important;
align-items:center !important;
height:48px !important;
min-height:48px !important;
max-height:48px !important;
margin-top:0 !important;
margin-bottom:0 !important;
}
ul.main-menu > li > a{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px;
height:48px !important;
padding-top:0 !important;
padding-bottom:0 !important;
/* حجم خط موحّد: «منتجاتنا» كان 14px والباقي 15px ⇒ مركز النص يختلف */
font-size:15px !important;
line-height:20px !important;
}
/* السهم: حجم ثابت ومحاذاة على مركز السطر — لا يزيد ارتفاع الصف */
ul.main-menu > li > a svg{
flex:0 0 auto !important;
width:11px !important;
height:11px !important;
margin:0 !important;
position:static !important;
vertical-align:middle !important;
}
/* ===== RX HIDE THEME FEATURES ===== */
body .s-block--features{display:none !important}
/* ===== RX DESKTOP PP v3 ===== */
@media (min-width:901px){
/* ---------- 1) معرض الصور: مصغرات 112 تملأ الصف بتوازن ---------- */
body.theme-raed .container--product-details .details-slider .s-slider-thumbs,
body.theme-raed .container--product-details .details-slider .s-slider-thumbs-container{
height:auto !important; max-height:none !important;
width:100% !important; max-width:100% !important;
box-sizing:border-box !important;
margin:12px 0 0 !important; /* يلغي -5px بتاعة الثيم */
padding:0 !important;
}
body.theme-raed .container--product-details .details-slider .s-slider-thumbs-container{
overflow:hidden !important;
}
body.theme-raed .container--product-details .details-slider .s-slider-thumbs-container .swiper-wrapper{
display:flex !important; gap:12px !important;
flex-wrap:nowrap !important; align-items:center !important; justify-content:center !important;
}
body.theme-raed .container--product-details .details-slider .s-slider-thumbs-container .swiper-slide{
width:112px !important; min-width:112px !important; max-width:112px !important;
height:112px !important; min-height:112px !important; max-height:112px !important;
flex:0 0 112px !important; margin:0 !important; padding:0 !important;
border-radius:12px !important; overflow:hidden !important;
border:2px solid transparent !important; background:#F4F0E6 !important;
cursor:pointer !important; transition:border-color .2s ease, box-shadow .2s ease !important;
box-sizing:border-box !important;
}
body.theme-raed .container--product-details .details-slider .s-slider-thumbs-container .swiper-slide img{
width:100% !important; height:100% !important; object-fit:cover !important;
border-radius:10px !important; display:block !important;
}
body.theme-raed .container--product-details .details-slider .s-slider-thumbs-container .swiper-slide-thumb-active,
body.theme-raed .container--product-details .details-slider .s-slider-thumbs-container .swiper-slide:hover{
border-color:#B8860B !important;
}
/* الصورة الرئيسية */
body.theme-raed .container--product-details .details-slider .s-slider-container{
border-radius:14px !important; overflow:hidden !important; background:#F4F0E6 !important;
width:100% !important; max-width:100% !important;
}
body.theme-raed .container--product-details .details-slider .s-slider-container .swiper-slide img{
width:100% !important; height:100% !important; object-fit:contain !important;
}
/* ---------- 2) السعر: صندوق واحد ---------- */
/* ---------- 3) مسافة قبل الفوتر ---------- */
body.theme-raed .container--product-details{
margin-bottom:48px !important; padding-bottom:0 !important;
}
body.theme-raed main{margin-bottom:48px !important}
}
/* ===== /RX DESKTOP PP v3 ===== */
/* ===== RX PRICE ROW v1 ===== */
body .product-form .price-wrapper{
display:flex !important; align-items:center !important; gap:6px !important;
margin:0 !important; padding:0 !important; height:auto !important;
visibility:visible !important; overflow:visible !important;
width:auto !important; opacity:1 !important;
}
body .product-form .price-wrapper .starting-or-normal-price{
display:flex !important; align-items:center !important; gap:4px !important; margin:0 !important;
}
body .product-form .price-wrapper .price_is_on_sale,
body .product-form .price-wrapper .hidden{
display:none !important;
}
body .product-form .price-wrapper .total-price{
display:inline-flex !important; align-items:center !important; gap:5px !important;
margin:0 !important; padding:0 !important; line-height:1 !important;
font-size:24px !important; font-weight:800 !important; color:#1F3B2C !important;
}
body .product-form .price-wrapper .total-price i{
font-size:15px !important; color:#1F3B2C !important; opacity:.9 !important;
}
@media (min-width:901px){
body .product-form .center-between:has(.price-wrapper){
display:flex !important; align-items:center !important; justify-content:space-between !important;
gap:12px !important; width:100% !important; box-sizing:border-box !important;
background:#F4F0E6 !important; border:1px solid #E8DFC8 !important; border-radius:12px !important;
padding:12px 18px !important; margin:0 0 12px !important; min-height:54px !important;
flex-direction:row !important;
}
body .product-form .center-between:has(.price-wrapper) .form-label{
margin:0 !important; padding:0 !important; font-size:15px !important;
line-height:1.2 !important; color:#6B6B5E !important; font-weight:700 !important;
}
body .product-form .center-between:has(.price-wrapper) .form-label b{
font-size:15px !important; font-weight:700 !important; color:#6B6B5E !important;
display:inline !important;
}
}
/* ===== /RX PRICE ROW v1 ===== */
/* ===== RX CARDS v6 — بطاقة منتج عصرية (كمبيوتر فقط) ===== */
@media (min-width:1024px){
/* 1) إطار البطاقة */
html body #main-content section#rx-products custom-salla-product-card.rx-pcard{
position:relative !important;
display:flex !important;
flex-direction:column !important;
background:#FFFFFF !important;
border:1px solid #EBE6D9 !important;
border-radius:18px !important;
overflow:hidden !important;
padding:10px 10px 0 !important;
box-shadow:0 8px 22px rgba(21,42,31,.06) !important;
transition:transform .35s ease, box-shadow .35s ease !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard:hover{
transform:translateY(-4px) !important;
box-shadow:0 20px 44px rgba(21,42,31,.14) !important;
}
/* 2) صورة مربّعة */
html body #main-content section#rx-products custom-salla-product-card.rx-pcard .s-product-card-image{
aspect-ratio:1 / 1 !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
position:relative !important;
border-radius:12px !important;
overflow:hidden !important;
background:#F4F0E6 !important;
box-shadow:none !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard .s-product-card-image > a{
display:block !important;
width:100% !important;
height:100% !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard .s-product-card-image img.s-product-card-image-cover{
display:block !important;
width:100% !important;
height:100% !important;
max-height:none !important;
object-fit:cover !important;
transition:transform .6s cubic-bezier(.22,.61,.36,1) !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard:hover .s-product-card-image img.s-product-card-image-cover{
transform:scale(1.05) !important;
}
/* 3) الشارة */
html body #main-content section#rx-products custom-salla-product-card.rx-pcard .rx-badge{
top:12px !important;
right:12px !important;
font-size:11px !important;
padding:6px 12px !important;
}
/* 4) المحتوى */
html body #main-content section#rx-products custom-salla-product-card.rx-pcard .s-product-card-content{
display:flex !important;
flex-direction:column !important;
gap:6px !important;
padding:14px 8px 14px !important;
height:auto !important;
min-height:0 !important;
flex:1 1 auto !important;
position:static !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard .s-product-card-content-main{
display:flex !important;
flex-direction:column !important;
gap:3px !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard .s-product-card-content-title,
html body #main-content section#rx-products custom-salla-product-card.rx-pcard .s-product-card-content-title a{
font-size:15px !important;
line-height:1.55 !important;
font-weight:700 !important;
color:#152A1F !important;
margin:0 !important;
min-height:0 !important;
display:block !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard .s-product-card-content-subtitle{
font-size:12.5px !important;
line-height:1.5 !important;
color:#8A8A78 !important;
margin:0 !important;
opacity:1 !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard .s-product-card-content-sub{
margin:0 !important;
padding:0 !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard .s-product-card-price{
font-size:18px !important;
font-weight:800 !important;
color:#152A1F !important;
margin:0 !important;
line-height:1.3 !important;
display:flex !important;
align-items:center !important;
gap:4px !important;
}
/* 5) الفوتر: زر عريض + قلب فوق الصورة */
html body #main-content section#rx-products custom-salla-product-card.rx-pcard .s-product-card-content-footer{
position:static !important;
margin-top:10px !important;
padding:0 !important;
display:flex !important;
flex-direction:row !important;
align-items:center !important;
gap:8px !important;
background:transparent !important;
border:0 !important;
inset:auto !important;
height:auto !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard salla-add-product-button{
flex:1 1 auto !important;
min-width:0 !important;
width:100% !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard salla-add-product-button .w-full{
width:100% !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard salla-add-product-button button.s-button-element{
width:100% !important;
height:40px !important;
min-height:40px !important;
border-radius:10px !important;
border:1px solid #152A1F !important;
background:#152A1F !important;
color:#FFFFFF !important;
font-size:13px !important;
font-weight:700 !important;
padding:0 10px !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard salla-add-product-button button.s-button-element:hover{
background:#1F3B2C !important;
border-color:#1F3B2C !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard salla-add-product-button .s-button-text{
display:flex !important;
align-items:center !important;
justify-content:center !important;
gap:6px !important;
color:#FFFFFF !important;
font-size:13px !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard salla-add-product-button .s-button-text i{
color:#C9A24B !important;
font-size:14px !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard salla-button.s-product-card-wishlist-btn{
position:absolute !important;
top:20px !important;
left:20px !important;
right:auto !important;
bottom:auto !important;
z-index:6 !important;
width:34px !important;
height:34px !important;
min-width:34px !important;
border-radius:50% !important;
background:rgba(255,255,255,.94) !important;
box-shadow:0 4px 14px rgba(21,42,31,.14) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard salla-button.s-product-card-wishlist-btn > button{
width:34px !important;
height:34px !important;
min-width:34px !important;
border-radius:50% !important;
border:0 !important;
background:transparent !important;
color:#152A1F !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
position:static !important;
inset:auto !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
margin:0 !important;
box-shadow:none !important;
transform:none !important;
}
html body #main-content section#rx-products custom-salla-product-card.rx-pcard salla-button.s-product-card-wishlist-btn > button i{
font-size:16px !important;
color:#152A1F !important;
}
/* 6) الفراغ أسفل القسم */
html body #main-content section#rx-products{
min-height:0 !important;
padding-bottom:0 !important;
}
html body #main-content section#rx-products .s-products-list-wrapper{
margin-bottom:0 !important;
padding-bottom:0 !important;
}
}
/* ===== /RX CARDS v6 ===== */
/* ===== RX CARDS MOBILE v1 — تكديس عمودي + إصلاح القلب ===== */
@media (max-width:1023px){
/* 1) المنتجات تحت بعض */
html body #main-content section#rx-products .s-products-list-wrapper.s-products-list-horizontal-cards,
html body #main-content section#rx-products .s-products-list-wrapper{
display:flex !important;
flex-direction:column !important;
flex-wrap:nowrap !important;
overflow-x:visible !important;
overflow-y:visible !important;
gap:14px !important;
width:100% !important;
height:auto !important;
padding:0 !important;
margin:0 !important;
}
html body #main-content section#rx-products .s-products-list-wrapper custom-salla-product-card,
html body #main-content section#rx-products .s-products-list-wrapper custom-salla-product-card.rx-pcard{
width:100% !important;
min-width:0 !important;
max-width:100% !important;
flex:0 0 auto !important;
margin:0 !important;
position:relative !important;
display:flex !important;
flex-direction:column !important;
background:#FFFFFF !important;
border:1px solid #EBE6D9 !important;
border-radius:16px !important;
overflow:hidden !important;
padding:8px 8px 0 !important;
box-shadow:0 6px 18px rgba(21,42,31,.06) !important;
}
/* 2) الصورة مربّعة */
html body #main-content section#rx-products custom-salla-product-card .s-product-card-image{
aspect-ratio:1 / 1 !important;
width:100% !important;
height:auto !important;
min-height:0 !important;
max-height:none !important;
position:relative !important;
border-radius:12px !important;
overflow:hidden !important;
background:#F4F0E6 !important;
}
html body #main-content section#rx-products custom-salla-product-card .s-product-card-image > a{
display:block !important; width:100% !important; height:100% !important;
}
html body #main-content section#rx-products custom-salla-product-card .s-product-card-image img.s-product-card-image-cover{
display:block !important; width:100% !important; height:100% !important;
max-height:none !important; object-fit:cover !important;
}
/* 3) القلب: دائرة أعلى يسار الصورة — لا يلمس زر السلة */
html body #main-content section#rx-products custom-salla-product-card .s-product-card-content{
position:static !important;
}
html body #main-content section#rx-products custom-salla-product-card salla-button.s-product-card-wishlist-btn{
position:absolute !important;
top:18px !important;
left:16px !important;
right:auto !important;
bottom:auto !important;
z-index:8 !important;
width:34px !important;
height:34px !important;
min-width:34px !important;
max-width:34px !important;
border-radius:50% !important;
background:rgba(255,255,255,.95) !important;
box-shadow:0 4px 12px rgba(21,42,31,.16) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
margin:0 !important;
padding:0 !important;
transform:none !important;
}
html body #main-content section#rx-products custom-salla-product-card salla-button.s-product-card-wishlist-btn > button{
width:34px !important;
height:34px !important;
min-width:34px !important;
border-radius:50% !important;
border:0 !important;
background:transparent !important;
color:#152A1F !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:0 !important;
position:static !important;
inset:auto !important;
top:auto !important;
left:auto !important;
right:auto !important;
bottom:auto !important;
margin:0 !important;
box-shadow:none !important;
transform:none !important;
}
html body #main-content section#rx-products custom-salla-product-card salla-button.s-product-card-wishlist-btn > button i{
font-size:16px !important; color:#152A1F !important;
}
/* 4) المحتوى والفوتر */
html body #main-content section#rx-products custom-salla-product-card .s-product-card-content{
display:flex !important; flex-direction:column !important; gap:4px !important;
padding:12px 8px 12px !important; height:auto !important; min-height:0 !important;
}
html body #main-content section#rx-products custom-salla-product-card .s-product-card-content-title,
html body #main-content section#rx-products custom-salla-product-card .s-product-card-content-title a{
font-size:15px !important; line-height:1.5 !important; font-weight:700 !important;
color:#152A1F !important; margin:0 !important; min-height:0 !important;
}
html body #main-content section#rx-products custom-salla-product-card .s-product-card-content-subtitle{
font-size:12.5px !important; color:#8A8A78 !important; margin:0 !important;
}
html body #main-content section#rx-products custom-salla-product-card .s-product-card-content-sub{
margin:2px 0 0 !important; padding:0 !important;
}
html body #main-content section#rx-products custom-salla-product-card .s-product-card-price{
font-size:17px !important; font-weight:800 !important; color:#152A1F !important;
margin:0 !important; display:flex !important; align-items:center !important; gap:4px !important;
}
html body #main-content section#rx-products custom-salla-product-card .s-product-card-content-footer{
position:static !important; inset:auto !important;
margin-top:10px !important; padding:0 !important;
display:flex !important; flex-direction:row !important; align-items:center !important;
gap:8px !important; background:transparent !important; border:0 !important; height:auto !important;
}
html body #main-content section#rx-products custom-salla-product-card salla-add-product-button{
flex:1 1 auto !important; min-width:0 !important; width:100% !important;
}
html body #main-content section#rx-products custom-salla-product-card salla-add-product-button button.s-button-element,
html body #main-content section#rx-products custom-salla-product-card salla-add-product-button button{
width:100% !important; height:44px !important; min-height:44px !important;
border-radius:10px !important; border:1px solid #152A1F !important;
background:#152A1F !important; color:#FFFFFF !important;
font-size:13.5px !important; font-weight:700 !important; padding:0 10px !important;
}
html body #main-content section#rx-products custom-salla-product-card salla-add-product-button .s-button-text{
display:flex !important; align-items:center !important; justify-content:center !important;
gap:6px !important; color:#FFFFFF !important; font-size:13.5px !important;
}
html body #main-content section#rx-products custom-salla-product-card salla-add-product-button .s-button-text i{
color:#C9A24B !important;
}
/* 5) القسم */
html body #main-content section#rx-products{
min-height:0 !important; height:auto !important; padding-bottom:0 !important; overflow:visible !important;
}
}
/* ===== /RX CARDS MOBILE v1 ===== */
/* ===== RX MOBILE v7 — منتجات تحت بعض + زر المفضلة ما يتداخلش مع زر الطلب ===== */
@media (max-width: 900px) {
/* 1) المنتجات تحت بعض (عمود واحد) في الرئيسية وصفحة التصنيف */
#rx-products .s-products-list-wrapper,
.s-products-list-wrapper.s-products-list-vertical-cards {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 14px !important;
overflow: visible !important;
width: 100% !important;
}
/* 2) البطاقة كمرجع للتموضع */
custom-salla-product-card {
position: relative !important;
width: 100% !important;
}
/* 3) نلغي أي تموضع داخلي كان بيحط القلب فوق زر الطلب */
custom-salla-product-card .s-product-card-content,
custom-salla-product-card .s-product-card-content-main,
custom-salla-product-card .s-product-card-content-footer,
custom-salla-product-card .s-product-card-image {
position: static !important;
}
/* 4) القلب دايمًا أعلى يسار الصورة */
custom-salla-product-card .s-product-card-wishlist-btn {
position: absolute !important;
top: 10px !important;
left: 10px !important;
right: auto !important;
bottom: auto !important;
margin: 0 !important;
z-index: 9 !important;
}
/* 5) زر الطلب عرض كامل ومساحته محفوظة */
custom-salla-product-card .s-product-card-content-footer {
z-index: 1 !important;
}
custom-salla-product-card salla-add-product-button,
custom-salla-product-card salla-add-product-button button {
width: 100% !important;
}
/* 6) صورة مربعة عشان ما تتمطش في عمود واحد */
#rx-products custom-salla-product-card .s-product-card-image,
#rx-products custom-salla-product-card .s-product-card-image img {
width: 100% !important;
aspect-ratio: 1 / 1 !important;
height: auto !important;
object-fit: cover !important;
display: block !important;
}
/* 7) صفحة التصنيف: صورة 4:5 داخل الحاوية */
.s-products-list-wrapper.s-products-list-vertical-cards custom-salla-product-card .s-product-card-image {
width: 100% !important;
height: auto !important;
aspect-ratio: 4 / 5 !important;
overflow: hidden !important;
}
.s-products-list-wrapper.s-products-list-vertical-cards custom-salla-product-card .s-product-card-image img {
width: 100% !important;
height: 100% !important;
aspect-ratio: auto !important;
object-fit: cover !important;
display: block !important;
}
}
/* ===== END RX MOBILE v7 ===== */
/* ===== RX HEADER NAV v8 (desktop only) ===== */
@media (min-width: 1024px) {
html body header.store-header .main-nav-container .container > div.flex.justify-between {
position: relative !important;
}
html body header.store-header .main-nav-container .container > div.flex.justify-between > div.flex.items-center:first-child {
flex: 1 1 0% !important;
}
html body header.store-header custom-main-menu {
position: absolute !important;
left: 50% !important;
right: auto !important;
top: 50% !important;
bottom: auto !important;
height: auto !important;
transform: translate(-50%, -50%) !important;
display: flex !important;
align-items: center !important;
}
html body header.store-header ul.main-menu {
padding: 0 !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
html body header.store-header ul.main-menu > li.rx-shop,
html body header.store-header ul.main-menu > li.rx-nav,
#mobile-menu ul.main-menu > li.rx-nav-m:first-child {
display: inline-flex !important;
align-items: center !important;
}
html body header.store-header ul.main-menu > li > a,
html body header.store-header ul.main-menu > li > button {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 44px !important;
padding: 0 18px !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1 !important;
white-space: nowrap !important;
}
}
/* ===== END RX HEADER NAV v8 ===== */
/* ===== RX FOOTER SEAM FIX v9 (desktop only) ===== */
@media (min-width: 1024px) {
html body main#main-content { margin-bottom: 0 !important; }
html body main#main-content + footer.store-footer { margin-top: 0 !important; }
}
/* ===== END RX FOOTER SEAM FIX v9 ===== */
/* ===== RX NAV DROPDOWN Z v10 (desktop only) ===== */
@media (min-width:1024px){
html body header.store-header custom-main-menu{position:absolute !important;z-index:70 !important}
html body header.store-header .rx-drop{z-index:80 !important}
html body header.store-header .main-nav-container{z-index:70 !important}
}
/* ===== END RX NAV DROPDOWN Z v10 ===== */
/* ===== RX MOBILE MENU v11 ===== */
@media (max-width: 1023px) {
/* --- kill leaked desktop nav items inside the drawer --- */
html body #mobile-menu ul.main-menu > li:not(.rx-nav-m):not(.rx-m-shop) {
display: none !important;
}
/* theme draws a per-row chevron ::before but the rows are static, so all of
them pile up at one absolute spot (the stray "<" under the list) */
html body #mobile-menu ul.main-menu > li::before {
content: none !important;
display: none !important;
}
/* second, red-bg close button from the theme sits on top of the real one
(it lives outside .mm-ocd in the theme markup, so target it globally) */
html body button.btn--close-sm.close-mobile-menu,
html body .mm-ocd .btn--close-sm,
html body .mm-ocd button.btn--close-sm {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* --- backdrop must not sit on top of the drawer rows --- */
html body .mm-ocd__backdrop {
width: 0 !important; min-width: 0 !important;
pointer-events: none !important;
}
/* --- title bar (theme pseudo-element) --- */
html body #mobile-menu.mobile-menu::after {
content: "القائمة الرئيسية" !important;
position: fixed !important;
top: 0 !important; left: 0 !important; right: 0 !important;
width: auto !important; height: 56px !important;
display: flex !important; align-items: center !important;
padding: 0 20px !important; box-sizing: border-box !important;
font-family: 'Cairo', system-ui, -apple-system, sans-serif !important;
font-size: 17px !important; font-weight: 700 !important;
color: #152A1F !important; background: #FFFFFF !important;
border-bottom: 1px solid #E9E4D8 !important;
z-index: 3 !important;
}
/* --- close button: compact, top-left, no full-width overlay --- */
html body #mobile-menu > button.btn--close.close-mobile-menu {
position: absolute !important;
top: 0 !important; left: 0 !important;
width: 56px !important; height: 56px !important;
min-width: 0 !important; padding: 0 !important; margin: 0 !important;
display: flex !important; align-items: center !important; justify-content: center !important;
background: transparent !important; border: 0 !important;
box-shadow: none !important; z-index: 4 !important;
}
/* close button glyph is a colored icon-font glyph; replace with a clean CSS X */
html body #mobile-menu > button.btn--close.close-mobile-menu::before {
content: "" !important;
display: none !important;
background: none !important;
font-size: 0 !important;
}
html body #mobile-menu > button.btn--close.close-mobile-menu::after {
content: "" !important;
width: 15px !important; height: 15px !important;
display: block !important;
background-image:
linear-gradient(45deg, transparent 45%, #152A1F 45%, #152A1F 55%, transparent 55%),
linear-gradient(-45deg, transparent 45%, #152A1F 45%, #152A1F 55%, transparent 55%) !important;
background-repeat: no-repeat !important;
background-size: 100% 100% !important;
}
/* --- list shell --- */
html body #mobile-menu.mobile-menu { padding: 0 0 24px !important; background: #FFFFFF !important; }
html body #mobile-menu ul.main-menu {
position: fixed !important;
top: 56px !important; left: 0 !important; right: 0 !important;
height: calc(100% - 56px) !important;
width: auto !important; margin: 0 !important; padding: 0 !important;
overflow-y: auto !important; overflow-x: hidden !important;
background: #FFFFFF !important; z-index: 2 !important;
}
/* --- rows: equal 56px, right-aligned text --- */
html body #mobile-menu ul.main-menu > li {
display: block !important;
height: auto !important; min-height: 56px !important; max-height: none !important;
margin: 0 !important; padding: 0 !important;
border-bottom: 1px solid #EFEAE0 !important;
background: #FFFFFF !important;
}
html body #mobile-menu ul.main-menu > li:last-child { border-bottom: 0 !important; }
html body #mobile-menu ul.main-menu > li > a {
display: flex !important; align-items: center !important;
height: 56px !important; min-height: 56px !important;
padding: 0 20px !important; margin: 0 !important; box-sizing: border-box !important;
font-size: 16px !important; font-weight: 500 !important; line-height: 1.2 !important;
color: #152A1F !important; text-decoration: none !important;
background: transparent !important;
}
html body #mobile-menu ul.main-menu > li > a:active { background: #F8F6F1 !important; }
/* --- "منتجاتنا" row --- */
html body #mobile-menu ul.main-menu > li.rx-m-shop > button {
display: flex !important; align-items: center !important; justify-content: space-between !important;
width: 100% !important; height: 56px !important; min-height: 56px !important;
padding: 0 20px !important; margin: 0 !important; box-sizing: border-box !important;
font-size: 16px !important; font-weight: 500 !important; line-height: 1.2 !important;
color: #152A1F !important; background: #FFFFFF !important;
border: 0 !important; text-align: right !important; box-shadow: none !important;
}
html body #mobile-menu ul.main-menu > li.rx-m-shop > button > span:first-child { flex: 1 1 auto !important; }
/* caret: small, inline at the left edge of the row */
html body #mobile-menu .rx-m-caret {
flex: 0 0 22px !important;
width: 22px !important; height: 22px !important; min-width: 22px !important;
display: inline-flex !important; align-items: center !important; justify-content: center !important;
margin: 0 !important; padding: 0 !important;
font-size: 9px !important; line-height: 1 !important;
color: #C9A24B !important;
transform: rotate(0deg) !important;
transition: transform .25s ease !important;
}
html body #mobile-menu ul.main-menu > li.rx-m-shop > button[aria-expanded="true"] .rx-m-caret {
transform: rotate(180deg) !important;
}
/* --- submenu: inline accordion (not a fixed off-canvas panel) --- */
html body #mobile-menu ul.main-menu > li.rx-m-shop > ul {
position: static !important;
top: auto !important; left: auto !important; right: auto !important;
width: auto !important; height: auto !important;
min-height: 0 !important; max-height: 0 !important;
margin: 0 !important; padding: 0 !important;
overflow: hidden !important; display: block !important;
background: #F8F6F1 !important;
border: 0 !important; box-shadow: none !important;
transition: max-height .28s ease !important;
}
html body #mobile-menu ul.main-menu > li.rx-m-shop > button[aria-expanded="true"] + ul {
max-height: 320px !important;
}
html body #mobile-menu ul.main-menu > li.rx-m-shop > ul > li {
display: block !important; height: auto !important; min-height: 48px !important;
margin: 0 !important; padding: 0 !important;
background: transparent !important;
border-bottom: 1px solid rgba(21, 42, 31, .06) !important;
}
html body #mobile-menu ul.main-menu > li.rx-m-shop > ul > li:last-child { border-bottom: 0 !important; }
html body #mobile-menu ul.main-menu > li.rx-m-shop > ul > li > a {
display: flex !important; align-items: center !important;
height: 48px !important; min-height: 48px !important;
padding: 0 34px !important; margin: 0 !important; box-sizing: border-box !important;
font-size: 15px !important; font-weight: 400 !important;
color: #152A1F !important; text-decoration: none !important;
background: transparent !important;
}
html body #mobile-menu ul.main-menu > li.rx-m-shop > ul > li > a.rx-m-all {
color: #C9A24B !important; font-weight: 700 !important;
}
}
/* ===== END RX MOBILE MENU v11 ===== */
/* ===== RX PRODUCT PRICE DEDUP v12 ===== */
/* السعر بيظهر مرتين: بلوك فوق تحت العنوان + صف (السعر) جوه خانة الشراء.
بنخفي اللي فوق ونسيب صف السعر جوه خانة الشراء. */
body.product-single [data-testid="store-product-price"]{display:none!important}
/* ===== RX PRODUCT DESC SECTIONS v2 ===== */
/* =====================================================================
RX PRODUCT DESC SECTIONS v2 — أقسام الوصف القابلة للطي (روشاي)
يكمّل rxproduct_page.css (لا يستبدله). الغرض:
- أقسام / أنيقة تكمّل الهوية (أخضر/ذهبي/كريمي).
- إشارة بصرية واضحة أنها قابلة للفتح — بلا كسر للشكل.
الحماية: مقصور على .product__description داخل صفحة المنتج فقط.
===================================================================== */
/* إلغاء قصّ الحاوية القديم (max-height:230px + تلاشي ::after + «اقرأ المزيد»)
كان مفيدًا قبل الأقسام المطويّة، لكنه الآن يخفيها تمامًا عن الزائر والزاحف.
المقدمة تظهر كاملة + كل قسم صندوق مطويّ بذاته ⇒ لا حاجة لأي قصّ. */
body:has(.container--product-details) .product__description{
max-height:none !important;
overflow:visible !important;
}
body:has(.container--product-details) .product__description::after{
content:none !important;
display:none !important;
}
body:has(.container--product-details) .product__description .rxp-more{
display:none !important;
}
body:has(.container--product-details) .product__description > article{
max-height:none !important;
overflow:visible !important;
}
body:has(.container--product-details) .product__description details.rxp-sec,
body:has(.container--product-details) .product__description details.rxp-native{
border:1px solid var(--rxp-line);
border-radius:14px;
background:#FDFCFA;
margin:0 0 12px !important;
overflow:hidden;
transition:border-color .18s ease, box-shadow .18s ease;
}
body:has(.container--product-details) .product__description details[open]{
border-color:rgba(184,134,11,.32);
box-shadow:0 3px 14px rgba(21,42,31,.05);
}
/* رأس القسم: يحمل الحقيقي + سهم */
body:has(.container--product-details) .product__description summary.rxp-sum,
body:has(.container--product-details) .product__description details.rxp-native > summary{
display:flex; align-items:center; gap:12px;
cursor:pointer;
list-style:none;
padding:14px 16px !important;
background:linear-gradient(180deg,#FFFEFC,#F7F4EE);
border-bottom:1px solid transparent;
transition:background .18s ease;
user-select:none;
}
/* نُلغي أي ارتفاع أقصى/قصّ قد يأتي من الثيم على الوصف — بلا لمس الأب
(main-content يحمل الشريط الجانبي). لا sticky ولا overflow-anchor هنا:
القفل التبادلي وحده هو ما يمنع انزلاق الصفحة. */
body:has(.container--product-details) .product__description,
body:has(.container--product-details) .product__description > article{
max-height:none !important;
overflow:visible !important;
}
/* الرأس: العنوان يأخذ المساحة (flex:1) والسهم يُدفع للطرف المقابل.
هذا هو التخطيط القياسي للأكورديون: صندوق بعرض كامل، عنوان يمين، سهم يسار. */
body:has(.container--product-details) .product__description summary.rxp-sum,
body:has(.container--product-details) .product__description details.rxp-native > summary{
justify-content:flex-start;
}
body:has(.container--product-details) .product__description summary > .rxp-chev{
margin-inline-start:auto;
pointer-events:none; /* الضغط على السهم يجب أن يمرّ للرأس، لا يُبتلع */
}
body:has(.container--product-details) .product__description details[open] > summary{
border-bottom-color:var(--rxp-line);
}
body:has(.container--product-details) .product__description summary::-webkit-details-marker{ display:none; }
body:has(.container--product-details) .product__description summary::marker{ content:""; }
body:has(.container--product-details) .product__description summary:hover{
background:linear-gradient(180deg,#FFFEFC,#F1EDE3);
}
body:has(.container--product-details) .product__description summary:focus-visible{
outline:2px solid var(--rxp-gold);
outline-offset:-2px;
}
/* العنوان داخل الرأس: يأخذ أعلى أولوية على قواعد h3 العامة في rxproduct_page.css
(التي تضيف border-top و margin كبيرًا — لا نريدها داخل الرأس) */
body:has(.container--product-details) .product__description summary > h3{
margin:0 !important;
padding:0 !important;
border:0 !important;
flex:1 1 auto;
min-width:0;
font-size:clamp(15px,1.4vw,17px) !important;
color:var(--rxp-green) !important;
font-weight:800 !important;
line-height:1.5 !important;
display:flex; align-items:center; gap:10px;
}
/* علامة ذهبية قبل العنوان (بديل قاعدة h3::before العامة) */
body:has(.container--product-details) .product__description summary > h3::before{
content:"";
flex:0 0 auto;
width:4px; height:18px;
border-radius:99px;
background:linear-gradient(180deg,var(--rxp-gold-2),var(--rxp-gold));
}
/* السهم */
body:has(.container--product-details) .product__description .rxp-chev{
flex:0 0 auto;
width:26px; height:26px;
display:inline-flex; align-items:center; justify-content:center;
border-radius:99px;
background:#fff;
border:1px solid var(--rxp-line);
color:var(--rxp-green);
transition:transform .25s ease, background .18s ease, border-color .18s ease;
}
body:has(.container--product-details) .product__description .rxp-chev svg{
width:14px; height:14px;
}
body:has(.container--product-details) .product__description details[open] .rxp-chev{
transform:rotate(180deg);
background:var(--rxp-sand);
border-color:rgba(184,134,11,.35);
}
/* محتوى القسم */
body:has(.container--product-details) .product__description details > *:not(summary){
padding-inline:16px;
}
body:has(.container--product-details) .product__description details > p:first-of-type{
padding-top:14px;
margin-top:0 !important;
}
body:has(.container--product-details) .product__description details > *:last-child{
padding-bottom:14px;
}
body:has(.container--product-details) .product__description details ul{
margin-bottom:10px !important;
}
/* H2 (عنوان الوصف) — يبقى ظاهرًا كعنوان تمهيدي أنيق */
body:has(.container--product-details) .product__description > article > h2:first-child,
body:has(.container--product-details) .product__description > h2:first-child{
color:var(--rxp-green) !important;
font-size:clamp(16px,1.6vw,19.5px) !important;
font-weight:800 !important;
line-height:1.7 !important;
margin:0 0 14px !important;
padding-bottom:12px;
border-bottom:1px solid var(--rxp-line);
}
/* محاذاة القسم لليمين دائمًا (الثيم قد يفرض text-align آخر داخل الوصف) */
body:has(.container--product-details) .product__description details,
body:has(.container--product-details) .product__description summary{
text-align:start !important;
}
/* الأقسام الأصلية بلا : نلفّ نصّها في span مرن ليتكرّر نفس الترتيب */
body:has(.container--product-details) .product__description details.rxp-native > summary{
font-size:clamp(15px,1.4vw,17px) !important;
color:var(--rxp-green) !important;
font-weight:800 !important;
line-height:1.5 !important;
text-align:start;
display:flex; align-items:center; gap:10px;
}
body:has(.container--product-details) .product__description details.rxp-native > summary > .rxp-label{
flex:1 1 auto; min-width:0;
}
@media (max-width:900px){
body:has(.container--product-details) .product__description summary.rxp-sum,
body:has(.container--product-details) .product__description details.rxp-native > summary{
padding:13px 13px !important;
}
body:has(.container--product-details) .product__description details > *:not(summary){
padding-inline:13px;
}
}
@media (prefers-reduced-motion:reduce){
body:has(.container--product-details) .product__description details,
body:has(.container--product-details) .product__description .rxp-chev{ transition:none; }
}
/* ===== RX OFFERS v13 — عرض روشاي الرئيسي + شارات الباقات ===== */
.rx-pcard.rx-feat{position:relative;border:1.5px solid rgba(201,162,75,.55)!important;box-shadow:0 14px 34px -18px rgba(31,59,44,.55)}
.rx-pcard.rx-feat .s-product-card-content-title a{color:#1F3B2C!important;font-weight:800!important}
.rx-pcard.rx-feat .s-product-card-sale-price{display:flex!important;align-items:baseline!important;gap:8px!important;flex-wrap:wrap}
.rx-pcard.rx-feat .s-product-card-sale-price h4{font-size:26px!important;font-weight:900!important;color:#8B1E23!important;line-height:1!important}
.rx-pcard.rx-feat .s-product-card-sale-price h4 .sicon-sar{font-size:15px!important}
.rx-pcard.rx-feat .s-product-card-sale-price span{font-size:13px!important;color:#9aa39d!important;text-decoration:line-through!important;font-weight:600!important}
.rx-badge.rx-offer{background:linear-gradient(135deg,#C9A24B,#E4C877)!important;color:#1F3B2C!important;font-size:12px!important;padding:8px 16px!important;box-shadow:0 6px 16px -6px rgba(201,162,75,.9)}
.rx-badge.rx-save{background:rgba(31,59,44,.92)!important;color:#C9A24B!important}
.rx-badge.rx-best{background:rgba(139,30,35,.94)!important;color:#fff!important}
.rx-freeship{display:inline-flex;align-items:center;gap:6px;margin-top:8px;padding:4px 10px;border-radius:999px;background:rgba(31,59,44,.07);border:1px solid rgba(31,59,44,.16);color:#1F3B2C;font-size:11.5px;font-weight:800;line-height:1}
.rx-freeship .rx-dot{width:6px;height:6px;border-radius:50%;background:#2E7D5B;display:inline-block}
.rx-pay-ship{display:inline-block;margin-top:8px;font-size:11.5px;color:#6b7770;font-weight:700;line-height:1}
.rx-pdp-ship{display:flex;align-items:center;gap:8px;margin:10px 0 4px;padding:9px 14px;border-radius:12px;background:rgba(31,59,44,.06);border:1px solid rgba(31,59,44,.14);color:#1F3B2C;font-size:13px;font-weight:800}
body.rx-offer-pdp .price-wrapper .price_is_on_sale .total-price{font-size:34px!important;font-weight:900!important;color:#8B1E23!important}
body.rx-offer-pdp .price-wrapper .before-price{font-size:16px!important;color:#9aa39d!important}
@media(max-width:767px){
.rx-pcard.rx-feat .s-product-card-sale-price h4{font-size:22px!important}
.rx-badge.rx-offer{font-size:11px!important;padding:7px 12px!important}
body.rx-offer-pdp .price-wrapper .price_is_on_sale .total-price{font-size:28px!important}
}
/* ===== END RX OFFERS v13 ===== */
/* ===== RX OFFERS v13d — 4 بطاقات + إبراز العرض الرئيسي ===== */
.rx-4up.s-products-list-horizontal-cards{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:20px!important}
@media(max-width:1199px){.rx-4up.s-products-list-horizontal-cards{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important}}
@media(max-width:575px){.rx-4up.s-products-list-horizontal-cards{grid-template-columns:1fr!important}}
.rx-pcard.rx-hero{border:2px solid #C9A24B!important;border-radius:18px!important;overflow:hidden!important;transform:translateY(-10px);box-shadow:0 20px 42px -20px rgba(139,30,35,.55),0 0 0 5px rgba(201,162,75,.16)!important}
.rx-ribbon{display:flex;flex-direction:column;align-items:center;gap:2px;background:linear-gradient(120deg,#8B1E23,#B3373C 55%,#8B1E23);color:#F8ECCF;padding:9px 10px 8px;padding-inline-end:48px;text-align:center;line-height:1.25;direction:rtl}
.rx-ribbon span{font-weight:900;font-size:14px;letter-spacing:.2px}
.rx-ribbon em{font-style:normal;font-weight:700;font-size:10.5px;color:#E9CF95}
.rx-pcard.rx-hero .s-product-card-content-title a{font-size:14.5px!important;font-weight:900!important;color:#8B1E23!important}
.rx-pcard.rx-hero .rx-freeship{background:rgba(201,162,75,.16)!important;border-color:rgba(201,162,75,.5)!important;color:#7A5A15!important}
.rx-pcard.rx-4th{border:1px solid rgba(31,59,44,.14)!important;border-radius:18px!important}
@media(max-width:575px){
.rx-pcard.rx-hero{transform:none}
.rx-ribbon span{font-size:12.5px}
.rx-ribbon em{font-size:10px}
}
/* ===== END RX OFFERS v13d ===== */
/* ===== RX OFFERS v13e — سعر ثابت لكل البطاقات (بلا قفز) ===== */
.rx-pcard .s-product-card-sale-price{display:flex!important;align-items:baseline!important;gap:8px!important;flex-wrap:wrap}
.rx-pcard .s-product-card-sale-price h4{font-size:22px!important;font-weight:900!important;color:#1F3B2C!important;line-height:1.15!important;margin:0!important}
.rx-pcard .s-product-card-sale-price h4 .sicon-sar{font-size:13px!important}
.rx-pcard .s-product-card-sale-price span{font-size:13px!important;color:#9aa39d!important;text-decoration:line-through!important;font-weight:600!important}
.rx-pcard.rx-feat .s-product-card-sale-price h4{font-size:26px!important;color:#8B1E23!important}
@media(max-width:767px){
.rx-pcard .s-product-card-sale-price h4{font-size:19px!important}
.rx-pcard.rx-feat .s-product-card-sale-price h4{font-size:22px!important}
}
/* ===== END RX OFFERS v13e ===== */
/* ===== RX TOPBAR v1 — توازن بيانات التواصل + فاصل واحد ===== */
.store-header salla-contacts a{
border:none !important;
padding:4px 0 !important;
margin:0 !important;
}
.store-header salla-contacts a + a{
border-inline-start:1px solid rgba(248,246,241,.22) !important;
padding-inline-start:14px !important;
margin-inline-start:14px !important;
}
/* ===== END RX TOPBAR v1 ===== */
/* ===== RX SHIP v13g — إخفاء «الشحن: XX» في صفحات الباقات المجانية + تلميح الكوبون ===== */
body.rx-free-pdp .product-shipping, body.rx-free-pdp [class*=shipping] .s-shipping-block, body.rx-free-pdp .s-product-shipping{display:none !important}
.rx-ship-note{display:flex;align-items:center;gap:8px;margin:10px 0 2px;padding:9px 14px;border-radius:12px;background:rgba(201,162,75,.10);border:1px dashed rgba(201,162,75,.45);color:#7A5A15;font-size:12.5px;font-weight:800;line-height:1.4}
/* ===== END RX SHIP v13g ===== */