/* مارديل — ثيم «الاستوديو»: أبيض وأسود بسيط، خط Geist للاتيني والأرقام وخط الهوية للعربي.
   يُحمَّل بعد store.css وبعد ألوان الإعدادات ليغلب عليها. للرجوع للتصميم السابق: احذف سطر studio.css من includes/header.php */
:root{
  --primary:#171717;--dark:#171717;--accent:#171717;--soft:#f5f5f5;--text:#171717;--radius:16px;
  --muted:#737373;--line:#e5e5e5;--line-2:#d4d4d4;--cream:#fff;--navy-2:#262626;
  --shadow:0 1px 2px rgba(0,0,0,.04);--shadow-sm:none;
  --ease:cubic-bezier(.16,1,.3,1);
  --st-font:'Geist','The Year of Handicrafts','Segoe UI',Tahoma,sans-serif;
}
body{background:#fff;color:#171717;font-family:var(--st-font)}
h1,h2,h3,h4{color:#171717}
::selection{background:#171717;color:#fff}

/* ===== أزرار ===== */
.btn,.btn-primary{background:#171717;color:#fff;font-weight:500;box-shadow:none}
.btn:hover,.btn-primary:hover{background:#262626;color:#fff;transform:none;box-shadow:none}
.btn:disabled{background:#171717}
.btn-accent{background:#fff;color:#171717;box-shadow:inset 0 0 0 1.5px #171717}
.btn-accent:hover{background:#171717;color:#fff}
.btn-outline{background:transparent;color:#171717;box-shadow:inset 0 0 0 1.5px #171717}
.btn-outline:hover{background:#171717;color:#fff}
.pill{display:inline-flex;align-items:center;justify-content:center;font-size:.875rem;font-weight:500;color:#fff;background:#171717;border-radius:999px;padding:10px 20px;line-height:1.4;white-space:nowrap;transition:background-color .2s}
.pill:hover{background:#262626}
.icon-btn{color:#171717}
.icon-btn:hover{background:#f5f5f5;color:#171717}
.count{background:#171717;box-shadow:0 0 0 2px #fff}
.user-btn.is-in{color:#171717}

/* ===== الشريط العلوي والهيدر ===== */
.topbar{background:#171717;color:#fff;font-weight:400}
.site-header{position:sticky;top:0;z-index:50;background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid transparent;transition:border-color .3s}
.site-header.scrolled{border-bottom-color:#e5e5e5}
.site-header:has(.main-nav.open){z-index:120}
.site-header > .container{width:100%;padding-inline:16px}
/* التخطيط: زر القائمة يمين · الشعار في المنتصف · الأيقونات وزر التسوق يسار */
.header-inner{position:relative;height:68px;gap:12px;justify-content:flex-end}
.header-actions{display:flex;align-items:center;gap:2px;margin:0;margin-inline-start:auto}
.header-pill{margin-inline-start:10px}

/* زر القائمة: خطان على اليمين */
.site-header .menu-toggle{display:flex!important;position:absolute;right:4px;left:auto;top:50%;transform:translateY(-50%);flex-direction:column;align-items:flex-start;gap:5px;padding:12px;background:none;border:0;cursor:pointer;z-index:3}
.menu-toggle i{display:block;width:24px;height:1.5px;background:#171717;border-radius:99px;transition:all .3s}
.menu-toggle:hover i{width:20px}

/* الشعار في المنتصف */
.site-header .logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;z-index:2;display:block}
.site-header .logo img{height:48px;width:auto;transition:height .5s var(--ease)}
.logo:hover img{transform:none}

@media (min-width:640px){
  .site-header > .container{padding-inline:24px}
  .header-inner{height:84px}
  .site-header .menu-toggle{right:12px}
  .site-header .logo img{height:60px}
}
@media (min-width:768px){.site-header > .container{padding-inline:40px}.site-header .menu-toggle{right:28px}}

@media (max-width:639px){
  .header-pill{display:none}
  /* على الجوال: البحث والسلة فقط، والباقي داخل القائمة */
  .header-actions .icon-btn:not([data-open]){display:none}
  /* الشعار أكبر داخل مربع أبيض ينزل تحت الهيدر، ويعود لمكانه بنعومة بعد التمرير */
  .site-header .logo{top:0;transform:translateX(-50%);background:#fff;padding:8px 16px 12px;border-radius:0 0 22px 22px;box-shadow:0 14px 24px -14px rgba(18,21,36,.35);
    transition:padding .5s var(--ease),box-shadow .5s var(--ease),border-radius .5s var(--ease)}
  .site-header .logo img{height:64px}
  .site-header.scrolled .logo{padding:12px 16px;box-shadow:0 0 0 0 rgba(18,21,36,0);border-radius:0}
  .site-header.scrolled .logo img{height:44px}
}

/* ===== القائمة: ملء الشاشة على الجوال، درج جانبي على الشاشات الأكبر ===== */
.site-header .main-nav{position:fixed!important;inset:0;width:100%;max-width:none;height:100%;margin:0;padding:16px;gap:0;display:flex!important;flex-direction:column;background:#fff;z-index:130;overflow-y:auto;box-shadow:none;font-size:1rem;
  opacity:0;visibility:hidden;transform:translateY(100%);transition:transform .5s var(--ease),opacity .5s var(--ease),visibility 0s linear .5s}
.site-header .main-nav.open{opacity:1;visibility:visible;transform:none;transition:transform .5s var(--ease),opacity .5s var(--ease)}
@media (min-width:640px){
  .site-header .main-nav{inset:0 auto 0 0;max-width:384px;padding:20px 24px;transform:translateX(-100%)}
  .site-header .main-nav.open{transform:none}
}
.main-nav .nav-head{display:flex!important;align-items:center;justify-content:space-between;padding:0;border:0;position:static;background:none}
.main-nav .nav-head img{height:40px;width:auto}
.main-nav .nav-close{display:grid!important;place-items:center;position:relative;width:40px;height:40px;border-radius:50%;border:0;background:transparent;cursor:pointer;transition:background-color .2s}
.main-nav .nav-close:hover{background:#f5f5f5}
.nav-close i{position:absolute;width:20px;height:1.5px;background:#171717;border-radius:99px;transition:all .5s var(--ease)}
.nav-close i:first-child{transform:translateY(-3px)}
.nav-close i:last-child{transform:translateY(3px)}
.main-nav.open .nav-close i:first-child{transform:rotate(45deg)}
.main-nav.open .nav-close i:last-child{transform:rotate(-45deg)}

.site-header .main-nav .nav-links{display:flex!important;flex-direction:column;padding:40px 0 0;margin:0}
.main-nav .nav-title{display:none!important}
.site-header .main-nav .nav-links > a,.site-header .main-nav .nav-links > a.nav-more{display:block!important;padding:10px 0;margin:0;border-radius:0;background:none!important;box-shadow:none!important;font-size:1.875rem;font-weight:500;line-height:1.3;color:#171717;text-align:start;white-space:normal;
  opacity:0;transform:translateX(-2rem);transition:opacity .5s var(--ease),transform .5s var(--ease),color .2s;transition-delay:0s}
.site-header .main-nav.open .nav-links > a{opacity:1;transform:none;transition-delay:var(--d,150ms),var(--d,150ms),0s}
.site-header .main-nav .nav-links > a:hover{color:#737373}
.main-nav .nav-txt,.main-nav .nav-sale .nav-txt{display:inline;color:inherit}
.main-nav .nav-thumb,.main-nav .nav-ic,.main-nav .nav-chev,.main-nav .nav-count{display:none!important}

.nav-cta{padding-top:40px;opacity:0;transform:translateY(1rem);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.main-nav.open .nav-cta{opacity:1;transform:none;transition-delay:.4s}
.nav-cta .pill{padding:12px 24px}

.site-header .main-nav .nav-extra{display:block!important;margin-top:auto;padding:36px 0 4px;background:none;border:0;opacity:0;transition:opacity .5s var(--ease)}
.main-nav.open .nav-extra{opacity:1;transition-delay:.45s}
.main-nav .nav-quick{display:flex;flex-wrap:wrap;gap:10px 22px}
.main-nav .nav-quick a{display:inline!important;padding:0;background:none;border:0;border-radius:0;font-size:.95rem;color:#525252;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#d4d4d4;transition:text-decoration-color .2s,color .2s}
.main-nav .nav-quick a:hover{color:#171717;text-decoration-color:#171717}
.main-nav .nav-quick svg{display:none}
.main-nav .nav-social{display:flex;justify-content:flex-start;gap:8px;margin-top:18px}
.main-nav .nav-social a{width:38px;height:38px;border-radius:50%;background:#f5f5f5;color:#171717}

/* الخلفية المعتمة خلف القائمة والسلة */
.overlay{background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:95;transition:opacity .5s var(--ease),visibility .5s}

/* البحث */
.search-box{background:#fff;border-top:1px solid #e5e5e5}
.search-box input{border:1px solid #d4d4d4}
.search-box input:focus{border-color:#171717}

/* درج السلة */
.drawer{box-shadow:none;transition:transform .5s var(--ease);border-radius:0}
.drawer-head,.drawer-foot{border-color:#e5e5e5}
.free-ship .bar i{background:#171717}
.free-ship b{color:#171717}

/* ===== الواجهة الرئيسية (الاستوديو) ===== */
.st-hero{padding:40px 16px 4px;text-align:center}
.st-hero h1{margin:0 auto;max-width:48rem;font-size:2.25rem;font-weight:600;line-height:1.2;color:#171717}
.st-hero p{margin:16px auto 0;max-width:36rem;font-size:1rem;line-height:1.625;color:#171717}
@media (min-width:640px){.st-hero{padding:48px 24px 4px}.st-hero h1{font-size:3rem}.st-hero p{margin-top:24px;font-size:1.125rem}}
@media (min-width:768px){.st-hero h1{font-size:4.5rem}.st-hero p{font-size:1.25rem}}
@media (min-width:1024px){.st-hero h1{font-size:5.5rem}}
/* الكمبيوتر: العنوان في سطر واحد والواجهة أعلى قليلاً */
@media (min-width:768px){
  .st-br{display:none}
  .st-hero{padding-top:18px}
  .st-hero h1{max-width:none;white-space:nowrap;font-size:clamp(3rem,6.2vw,5.5rem)}
  .st-hero p{margin-top:10px}
  .st-hero .st-ribbon{width:64px;margin-bottom:12px}
  .st-marquee{margin-top:-8px}
}

.st-marquee{position:relative;padding:16px 0;overflow:hidden;direction:ltr}
.st-mask{position:absolute;left:0;right:0;height:80px;z-index:10;pointer-events:none}
.st-mask svg{display:block;width:100%;height:100%}
.st-mask-top{top:0}
.st-mask-bottom{bottom:0}
.st-track{display:flex;width:max-content;gap:12px;padding:16px 0;-webkit-user-select:none;user-select:none;cursor:grab;will-change:transform;touch-action:pan-y}
.st-track.grabbing{cursor:grabbing}
.st-slide{width:240px;height:320px;flex-shrink:0;border-radius:16px;overflow:hidden;background:#f5f5f5}
.st-slide img{width:100%;height:100%;object-fit:cover;pointer-events:none}
@media (min-width:640px){.st-mask{height:100px}.st-track{gap:16px}.st-slide{width:320px;height:512px}}

.st-bottom{text-align:center;padding:8px 16px 48px;max-width:50rem;margin:0 auto}
.st-bottom p{margin:0 auto;max-width:42rem;font-size:1rem;line-height:1.625;color:#171717}
@media (min-width:640px){.st-bottom{padding:8px 24px 72px}.st-bottom p{font-size:1.125rem}}
@media (min-width:768px){.st-bottom p{font-size:1.25rem}}

/* ===== هوية مارديل في الواجهة: خلفية كريمية دافئة + الشريطة + ألوان الشعار ===== */
.st-brand{--st-bg:#fff7f0;--m-navy:#121524;--m-coral:#f0415a;--m-gold:#ffc05c;background:var(--st-bg);border-bottom:1px solid #f3e6da}
.st-hero{background:radial-gradient(520px 300px at 12% 30%,rgba(240,65,90,.09),transparent 70%),radial-gradient(520px 300px at 88% 20%,rgba(255,192,92,.18),transparent 70%)}
.st-ribbon{display:block;width:84px;height:auto;margin:0 auto 14px}
.st-hero h1{color:var(--m-navy);position:relative;isolation:isolate}
.st-hero h1 em{font-style:normal;color:var(--m-coral);position:relative;white-space:nowrap}
.st-hero h1 em:after{content:"";position:absolute;inset-inline:0;bottom:-.02em;height:.12em;background:var(--m-gold);border-radius:99px;z-index:-1}
.st-hero p,.st-bottom p{color:var(--m-navy)}
.st-mask{color:var(--st-bg)}
.st-marquee{background:var(--st-bg)}
.st-slide{display:block;position:relative;cursor:inherit;-webkit-user-drag:none}
.st-slide:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 0 var(--m-coral);transition:box-shadow .3s}
.st-slide:hover:after{box-shadow:inset 0 0 0 3px var(--m-coral)}
.st-slide img{transition:transform .6s var(--ease)}
.st-slide:hover img{transform:scale(1.04)}
.st-bottom{background:radial-gradient(600px 260px at 50% 100%,rgba(240,65,90,.07),transparent 70%)}

/* بطاقتا «تسوّق الهدايا» و«كل المنتجات» */
.st-cards{display:grid;grid-template-columns:1fr;gap:14px;margin:28px auto 0;max-width:760px}
@media (min-width:640px){.st-cards{grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}}
.st-card{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;gap:14px;padding:20px 20px;border-radius:22px;text-align:start;color:#fff;text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.st-card:hover{transform:translateY(-4px)}
.st-card-navy{background:var(--m-navy);box-shadow:0 14px 30px -18px rgba(18,21,36,.7)}
.st-card-navy:hover{box-shadow:0 20px 36px -16px rgba(18,21,36,.75)}
.st-card-coral{background:var(--m-coral);box-shadow:0 14px 30px -18px rgba(240,65,90,.8)}
.st-card-coral:hover{box-shadow:0 20px 36px -16px rgba(240,65,90,.85)}
.st-card-ic{flex:0 0 auto;width:52px;height:52px;border-radius:16px;display:grid;place-items:center;transform:rotate(-6deg);transition:transform .35s var(--ease)}
.st-card:hover .st-card-ic{transform:rotate(0)}
.st-card-navy .st-card-ic{background:var(--m-gold);color:var(--m-navy)}
.st-card-coral .st-card-ic{background:#fff;color:var(--m-coral)}
.st-card-txt{display:flex;flex-direction:column;gap:2px;min-width:0}
.st-card-txt b{font-size:1.15rem;font-weight:700;line-height:1.35;color:#fff}
.st-card-txt small{font-size:.84rem;line-height:1.5;opacity:.82}
.st-card-navy .st-card-txt small{color:#ffe2b3;opacity:1}
.st-card-go{flex:0 0 auto;margin-inline-start:auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:1.1rem;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4);transition:transform .35s var(--ease),background-color .35s,color .35s}
.st-card-navy .st-card-go{color:var(--m-gold);box-shadow:inset 0 0 0 1.5px rgba(255,192,92,.55)}
.st-card-navy:hover .st-card-go{background:var(--m-gold);color:var(--m-navy);transform:translateX(-4px)}
.st-card-coral:hover .st-card-go{background:#fff;color:var(--m-coral);transform:translateX(-4px)}
.st-card-rb{position:absolute;z-index:-1;width:150px;height:auto;left:-34px;bottom:-26px;transform:rotate(-12deg);pointer-events:none}
.st-card-navy .st-card-rb{opacity:.35}
.st-card-coral .st-card-rb{opacity:.22;filter:brightness(0) invert(1)}

/* ===== الأقسام ===== */
.section{padding:72px 0}
.section.soft{background:#fff;border-top:1px solid #f0f0f0}
.sec-head h2{font-weight:600}
.sec-head h2:before{display:none}
.sec-head p{color:#737373}
.link-more{background:none;box-shadow:none;padding:0;text-decoration:underline;text-underline-offset:6px;text-decoration-color:#a3a3a3;border-radius:0}
.link-more:hover{background:none;color:#171717;text-decoration-color:#171717}

/* التصنيفات */
.cat-card{background:#fff;border-radius:16px;padding:0;box-shadow:none}
.cat-card:hover{transform:none;box-shadow:none}
.cat-card img{border-radius:16px;background:#f5f5f5}
.cat-card .c-info{padding:12px 2px 0}
.cat-card .c-go{background:none;box-shadow:inset 0 0 0 1px #e5e5e5;color:#171717}
.cat-card:hover .c-go{background:#171717;color:#fff;transform:none}

/* بطاقة المنتج */
.p-card{background:#fff;border-radius:16px;box-shadow:none}
.p-card:hover{box-shadow:none;transform:none}
.p-img{margin:0;border-radius:16px;background:#f5f5f5}
.p-body{padding:12px 2px 4px}
.p-cat{color:#737373;font-weight:500}
.p-name{font-weight:500}
.p-name a:hover{color:#737373}
.p-price strong{color:#171717;font-weight:600}
.p-price del{color:#a3a3a3}
.tag,.tag-sale{background:#171717;color:#fff;font-weight:500}
.tag-out{background:#737373}
.wish-btn{box-shadow:none;border:1px solid #e5e5e5;color:#171717}
.wish-btn:hover,.wish-btn.active{background:#171717;border-color:#171717;color:#fff}

/* البنر */
.banner{background:#f5f5f5;color:#171717;border-radius:24px}
.banner:before{display:none}
.banner-text h2{font-weight:600}
.banner .btn:hover{background:#262626}

/* المميزات */
.feature{background:#fff;border-radius:16px;box-shadow:inset 0 0 0 1px #e5e5e5}
.feature:hover{transform:none;box-shadow:inset 0 0 0 1px #171717}
.feature .ic,.feature:nth-child(2) .ic,.feature:nth-child(3) .ic{background:#171717;color:#fff;border-radius:50%;transform:none}

/* آراء العملاء */
.testi{border-radius:16px;box-shadow:inset 0 0 0 1px #e5e5e5}
.testi:hover{transform:none;box-shadow:inset 0 0 0 1px #171717}
.testi-q{color:#171717;opacity:.1}
.stars{color:#171717}

/* الأسئلة */
.faq-side{background:#171717;border-radius:24px}
.faq-side:after{display:none}
.faq-side h2{font-weight:600}
.faq-side p{color:#a3a3a3}
.faq-side .btn{background:#fff;color:#171717}
.faq-side .btn:hover{background:#e5e5e5;color:#171717}
.faq details{border-radius:16px;box-shadow:inset 0 0 0 1px #e5e5e5}
.faq details[open]{box-shadow:inset 0 0 0 1.5px #171717}
.faq summary:after{background:#f5f5f5;color:#171717}
.faq details[open] summary:after{background:#171717;color:#fff}
.faq details p{color:#525252}

/* النشرة */
.news-box{background:#171717;border-radius:24px}
.news-box:before{display:none}
.news-box h2{font-weight:600}
.news-box .btn:hover{background:#404040;color:#fff}

/* الشرائح القديمة (إن ظهرت في مكان آخر) */
.slider{border-radius:16px;box-shadow:none}
.slide-text small{color:#fff}

/* ===== رأس الصفحات الداخلية (التصنيفات، البحث، الصفحات) ===== */
.page-hero{background:#fff;color:#171717;padding:48px 0 24px;border-radius:0;margin-bottom:24px;text-align:center}
.page-hero:after{display:none}
.page-hero h1{color:#171717;font-weight:600;font-size:clamp(2.25rem,6vw,4.5rem);line-height:1.2}
.page-hero p,.page-hero .muted{color:#525252;font-size:1.05rem}
.pills a{background:#fff;color:#171717;box-shadow:inset 0 0 0 1px #e5e5e5;font-weight:500}
.page-hero .pills a{background:#fff;color:#171717;box-shadow:inset 0 0 0 1px #e5e5e5}
.pills a:hover,.pills a.active,.page-hero .pills a:hover,.page-hero .pills a.active{background:#171717;color:#fff;box-shadow:none}
.breadcrumb a:hover{color:#171717}
.arrow{background:#171717}

/* ===== الفوتر ===== */
.site-footer{background:#fff;color:#525252;margin-top:80px;padding-top:64px;border-radius:0;border-top:1px solid #e5e5e5}
.site-footer:before{display:none}
.site-footer h4{color:#171717;font-weight:600}
.site-footer h4:before{display:none}
.site-footer a:hover{color:#171717;text-decoration:underline;text-underline-offset:4px}
.f-logo{height:72px}
.socials .soc{border:1px solid #e5e5e5;color:#171717}
.socials .soc:hover{background:#171717;border-color:#171717;color:#fff;transform:none}
.f-news{background:#f5f5f5}
.f-news input{color:#171717}
.f-news input::placeholder{color:#a3a3a3}
.f-news .btn{background:#171717;color:#fff}
.f-news .btn:hover{background:#262626}
.footer-bottom{border-top-color:#e5e5e5}
.footer-bottom .muted{color:#a3a3a3}

/* واتساب العائم بالأسود */
.wa-float{background:#171717;box-shadow:0 10px 24px -8px rgba(0,0,0,.35)}
.wa-ring{background:#171717;opacity:.5}
.wa-label{color:#171717}

/* تنبيهات ونوافذ */
.toast{background:#171717}
.toast-act{background:#fff;color:#171717}
.popup-card{border-radius:24px}
.phone-in:focus-within{border-color:#171717}
/* شارات المنتجات: ألوانها من لوحة التحكم، نوحّدها بالأسود */
.pb{background:#171717!important;color:#fff!important;font-weight:500}

@media (prefers-reduced-motion:reduce){
  .site-header .main-nav,.main-nav .nav-links > a,.nav-cta,.nav-extra,.overlay{transition-duration:.01s!important}
}