/* =========================================================================
   أرومة — AROMAH
   الملف المصحّح  ·  CSS
   المنصة: سلة  |  الثيم: رائد

   التركيب:
   لوحة التحكم ← تصميم المتجر ← تخصيص النسخة ← تخصيص الثيم ← CSS
   امسح كل ما في الحقل، الصق هذا الملف كاملًا، احفظ، افحص من الجوال.

   ⚠️ لا تلصق معه أي ملف قديم.
   ========================================================================= */


/* ⚡ الأداء: قُلّصت الأوزان من ٧ إلى ٤. كل وزن ملف عربي كامل الحجم.
   ⚠️ الأفضل من هذا: انقل هذين السطرين إلى رأس الثيم (Header Code) —
   @import داخل CSS سلسلة متتابعة تعطّل العرض، والـ<link> يوازي التحميل:
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;600;700&family=Amiri:wght@700&display=swap">
   ثم احذف سطر @import التالي. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;600;700&family=Amiri:wght@700&display=swap');


/* =========================================================================
   ٠. الرموز التصميمية
   ========================================================================= */

:root {
    --aromah-dark:        #2D3B32;
    --aromah-green:       #4A5A4E;
    --aromah-green-deep:  #1F2A23;

    --aromah-brass:       #A98B54;
    --aromah-brass-soft:  #C8AE7E;

    --aromah-sand:        #F3EEE6;
    --aromah-linen:       #FAF7F2;
    --aromah-stone:       #E7E0D5;

    --aromah-text:        #24302A;
    --aromah-text-soft:   #5C6862;
    --aromah-line:        #E3DDD2;
    --aromah-white:       #FFFFFF;

    /* سلّم أنصاف أقطار — أربع قيم فقط.
       تعدّد الأنصاف هو أسرع ما يكشف التصميم الهاوي. */
    --r-sm:  8px;
    --r-md:  14px;
    --r-lg:  24px;
    --r-pill: 999px;

    /* سلّم مسافات — كل الهوامش تشتق منه */
    --sp-1: .5rem;
    --sp-2: 1rem;
    --sp-3: 1.75rem;
    --sp-4: 3rem;
    --sp-5: 4.5rem;

    --shadow-soft: 0 2px 10px rgba(36, 48, 42, .05);
    --shadow-lift: 0 16px 40px -20px rgba(36, 48, 42, .28);

    --sticky-bar-h: 76px;
    --ease: cubic-bezier(.22, .61, .36, 1);
}


/* =========================================================================
   ١. الأساس
   -------------------------------------------------------------------------
   ⚠️ تصحيح مهم:
   overflow-x: hidden على html يمنع الانزلاق الأفقي، لكنه ينشئ
   حاوية تمرير جديدة فيعطّل position:sticky (الشريط الثابت).
   الحل الصحيح: clip — يقصّ الفائض الأفقي ولا ينشئ حاوية تمرير،
   فنكسب الاثنين معًا. ومعه بديل hidden للمتصفحات القديمة.
   ========================================================================= */

html {
    overflow-x: clip;
    scroll-behavior: smooth;
}

@supports not (overflow-x: clip) {
    html, body { overflow-x: hidden; }
}

/* حارس إضافي: أي عنصر أعرض من الشاشة لا يجرّ الصفحة معه */
body > *,
#app > *,
main > * {
    max-width: 100vw;
}

body {
    margin: 0;
    background-color: var(--aromah-white) !important;
    color: var(--aromah-text);
    font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;

    /* ١٦px بدل ١٥ — العربي يحتاج جسمًا أكبر ليتنفّس،
       وارتفاع السطر ١.٨ لأن الحرف العربي ذو صواعد ونوازل طويلة. */
    font-size: 16px;
    line-height: 1.8;

    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

img { max-width: 100%; }

body > div[class*="popup"],
body > div[class*="modal"],
body > div[id*="popup"] {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--aromah-brass);
    outline-offset: 3px;
    border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}


/* =========================================================================
   ٢. الطباعة
   -------------------------------------------------------------------------
   ✅ إصلاح جوهري: أزلت letter-spacing من كل النصوص العربية.
   الحرف العربي متّصل — والتباعد يفكّ الكلمة ويجعلها تبدو معطوبة.
   القاعدة اللاتينية (تباعد الحروف = فخامة) لا تنطبق على العربية أبدًا.
   البديل الصحيح: word-spacing وارتفاع سطر أوسع.

   ✅ إصلاح: ارتفاع سطر Amiri رُفع من ١.٣٥ إلى ١.٦ — كان يقصّ
   نوازل الحروف والتشكيل في العناوين الكبيرة.
   ========================================================================= */

.s-block__title h2,
.s-slider-block__title h2,
.section-title,
.s-reviews-header,
.store-features-symmetrical h2,
.product-single .main-content h1 {
    font-family: "Amiri", "IBM Plex Sans Arabic", serif;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: normal;
}

.s-block__title h2,
.s-slider-block__title h2,
.section-title,
.s-reviews-header {
    font-size: clamp(1.7rem, 3.2vw + .7rem, 2.5rem);
    color: var(--aromah-dark);
    margin: 0;
}

/* السطر التمهيدي — يعتمد المسافة بين الكلمات لا بين الحروف */
.aromah-eyebrow,
.aromah-ba__eyebrow,
.aromah-design-cta .eyebrow {
    display: block;
    font-family: "IBM Plex Sans Arabic", sans-serif;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: normal;
    word-spacing: .35em;
    color: var(--aromah-brass);
    margin-bottom: var(--sp-1);
}

.aromah-section-sub-text,
.section-sub {
    color: var(--aromah-text-soft);
    font-size: .97rem;
    margin-top: .4rem;
    margin-bottom: var(--sp-3);
    text-align: center;
    max-width: 46ch;
    margin-inline: auto;
}


/* =========================================================================
   ٣. الشريط العلوي — البحث ومبدّل اللغة
   -------------------------------------------------------------------------
   ✅ إصلاح: وحّدت ارتفاع حقل البحث مع القسم ٥ (كانا ٢.٤ و٢.٦
   فيظهر الحقل بحجمين مختلفين حسب الصفحة).
   ========================================================================= */

.top-navbar {
    display: block !important;
    background: var(--aromah-linen) !important;
    max-height: none !important;
    overflow: visible !important;
    padding: .55rem var(--sp-2) !important;
    border-bottom: 1px solid var(--aromah-line) !important;
}

.top-navbar p,
.top-navbar span,
.top-navbar a {
    color: var(--aromah-text) !important;
    font-size: .85rem !important;
}

.top-navbar input[type="text"],
.top-navbar input[type="search"],
.top-navbar .s-search-input input {
    background: #fff !important;
    border: 1px solid var(--aromah-line) !important;
    border-radius: var(--r-pill) !important;
    height: 2.6rem !important;
    padding-inline: var(--sp-2) !important;
    color: var(--aromah-text) !important;
    font-family: inherit !important;
    font-size: .9rem !important;
}

.top-navbar input::placeholder { color: var(--aromah-text-soft) !important; }

.top-navbar .language-toggle-button,
.top-navbar [class*="language"],
.top-navbar [class*="currency"] {
    background: #fff !important;
    border: 1px solid var(--aromah-line) !important;
    border-radius: var(--r-pill) !important;
    color: var(--aromah-text) !important;
    font-size: .8rem !important;
}


/* =========================================================================
   ٤. الهيدر — الشعار في المنتصف
   ========================================================================= */

.main-nav-container,
.main-nav-container .inner {
    background-color: var(--aromah-white) !important;
    border-bottom: 1px solid rgba(227, 221, 210, .7) !important;
}

#mainnav {
    height: auto !important;
    min-height: auto !important;
}

header .btn--rounded-gray {
    padding: 0;
    background: transparent;
    color: var(--aromah-dark) !important;
}

header .sicon-menu { color: var(--aromah-dark) !important; }

header .header-buttons {
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: .3rem !important;
}

@media (max-width: 1023px) {

    header .flex.items-stretch.justify-between.relative,
    #mainnav .flex.items-stretch.justify-between.relative {
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 78px !important;
        padding-inline: var(--sp-1) !important;
    }

    header .navbar-brand,
    header .header-logo,
    header .site-header__logo,
    header .logo {
        position: absolute !important;
        left: 50% !important;
        right: auto !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        width: auto !important;
        max-width: min(38vw, 150px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 3 !important;
    }

    header .navbar-brand img,
    header .header-logo img,
    header .site-header__logo img,
    header img[alt*="أرومة"],
    header .logo img {
        max-height: 62px !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 auto !important;
    }

    header .header-buttons,
    header .header-buttons > *,
    header .btn--rounded-gray,
    header .sicon-menu {
        position: relative !important;
        z-index: 9 !important;
    }

    header salla-cart-summary[data-testid="store-header-cart"] > .header-btn__icon,
    header .s-user-menu-trigger {
        width: 2.1rem !important;
        height: 2.1rem !important;
        min-width: 2.1rem !important;
    }
}

@media (max-width: 360px) {
    header .navbar-brand,
    header .header-logo,
    header .logo { max-width: min(34vw, 124px) !important; }

    header .navbar-brand img { max-height: 52px !important; }
}


/* --- السلة ---
   ✅ إصلاح: استبدلت مرشّح sepia/hue-rotate بقناع SVG.
   المرشّح كان يعطي لونًا لا يمكن التنبؤ به ويختلف بين المتصفحات،
   والقناع يعطي لون العلامة بدقّة ولا يعتمد على ملف خارجي. */

header salla-cart-summary[data-testid="store-header-cart"] {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 9rem !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    color: var(--aromah-dark) !important;
}

header salla-cart-summary[data-testid="store-header-cart"] > .header-btn__icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 2.6rem !important;
    height: 2.6rem !important;
    border: 1px solid var(--aromah-line) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    background: var(--aromah-linen) !important;
    color: transparent !important;
    font-size: 0 !important;
    transition: background .25s var(--ease), border-color .25s var(--ease);
}

header salla-cart-summary[data-testid="store-header-cart"]:hover > .header-btn__icon {
    background: var(--aromah-sand) !important;
    border-color: var(--aromah-brass-soft) !important;
}

header salla-cart-summary[data-testid="store-header-cart"] > .header-btn__icon.sicon-shopping-bag::after {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background: var(--aromah-dark) !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 7h12l1 13H5L6 7zm3 0a3 3 0 016 0' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 7h12l1 13H5L6 7zm3 0a3 3 0 016 0' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}

header salla-cart-summary[data-testid="store-header-cart"] .s-cart-summary-total,
header salla-cart-summary[data-testid="store-header-cart"] .s-cart-summary-content {
    max-width: 6rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: .84rem !important;
    font-weight: 600 !important;
    color: var(--aromah-dark) !important;
}

@media (max-width: 768px) {
    header salla-cart-summary[data-testid="store-header-cart"] .s-cart-summary-total,
    header salla-cart-summary[data-testid="store-header-cart"] .s-cart-summary-content {
        display: none !important;
    }
}

header salla-cart-summary[data-testid="store-header-cart"] .s-cart-summary-count {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    z-index: 20 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 19px !important;
    height: 19px !important;
    padding: 2px 5px !important;
    background: var(--aromah-brass) !important;
    color: #fff !important;
    border: 2px solid #fff !important;
    border-radius: 10px !important;
    font-size: .66rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}


/* --- قائمة المستخدم --- */

header .s-user-menu-trigger {
    position: relative !important;
    background: var(--aromah-linen) !important;
    border: 1px solid var(--aromah-line) !important;
    border-radius: 50% !important;
    width: 2.6rem !important;
    height: 2.6rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
}

header .s-user-menu-trigger img { opacity: 0 !important; }

header .s-user-menu-trigger::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 17px;
    height: 17px;
    background: var(--aromah-dark);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 12a5 5 0 100-10 5 5 0 000 10zm0 2c-4 0-8 2-8 5v1h16v-1c0-3-4-5-8-5z'/></svg>") no-repeat center / contain;
}


/* =========================================================================
   ٥. البحث
   ========================================================================= */

.search { display: block !important; }

.s-search-input input,
.search input[type="text"],
.search input[type="search"] {
    border: 1px solid var(--aromah-line) !important;
    border-radius: var(--r-pill) !important;
    background: var(--aromah-linen) !important;
    padding-inline: var(--sp-2) !important;
    height: 2.6rem !important;
    font-family: inherit !important;
    font-size: .92rem !important;
    color: var(--aromah-text) !important;
    transition: border-color .25s var(--ease), background .25s var(--ease);
}

.s-search-input input:focus,
.search input:focus {
    border-color: var(--aromah-brass-soft) !important;
    background: #fff !important;
}


/* =========================================================================
   ٦. الإخفاءات
   ========================================================================= */

.story-section,
.s-block--story,
[class*="story-section"] { display: none !important; }

.cart-shipping-bar,
.cart-progress,
.free-shipping-bar,
.s-cart-summary-progress,
.s-cart-summary-shipping { display: none !important; }

/* عدّاد الزوار — الأرقام المتقافزة تُقرأ كعدّاد ملفّق فتهدم الثقة.
   ⚠️ إخفاء بصري فقط — أوقف التطبيق من لوحة سلة. */
[class*="live-visitor"], [class*="visitors"], [class*="visitor-count"],
[class*="active-visitor"], [id*="live-visitor"], [id*="visitors"] {
    display: none !important;
}

#btn-show-more {
    display: inline-flex !important;
    align-items: center;
    gap: var(--sp-1);
    margin: var(--sp-3) auto;
    padding: .85rem 2.4rem !important;
    background: transparent !important;
    border: 1px solid var(--aromah-dark) !important;
    border-radius: var(--r-pill) !important;
    color: var(--aromah-dark) !important;
    font-weight: 600;
    font-size: .94rem;
    transition: background .25s var(--ease), color .25s var(--ease);
}

#btn-show-more:hover {
    background: var(--aromah-dark) !important;
    color: #fff !important;
}

.s-slider-block__title-left { display: inline-flex !important; align-items: center; }

.s-slider-block__title-left a {
    font-size: .88rem !important;
    font-weight: 600 !important;
    color: var(--aromah-brass) !important;
    border-bottom: 1px solid transparent;
    transition: border-color .25s var(--ease);
}

.s-slider-block__title-left a:hover { border-bottom-color: var(--aromah-brass); }


/* =========================================================================
   ٧. الهيدر التسويقي  (يعمل مع ملف الجافاسكربت)
   -------------------------------------------------------------------------
   ✅ إصلاح: كانت كل الشرائح display:none إلى أن يشغّلها الجافاسكربت.
   لو تعطّل السكربت أو تأخّر تحميله يظهر شريط أسود فارغ بارتفاع ٤٠px.
   الآن الشريحة الأولى ظاهرة افتراضيًا.
   ========================================================================= */

.aromah-topbar {
    position: relative;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: .45rem var(--sp-2);
    background: linear-gradient(90deg, #1F2A23 0%, #2D3B32 50%, #1F2A23 100%);
    overflow: hidden;
    text-align: center;
}

.aromah-topbar::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--aromah-brass) 20%,
                var(--aromah-brass-soft) 50%, var(--aromah-brass) 80%, transparent);
}

.aromah-topbar__slide {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    font-size: .84rem;
    font-weight: 600;
    color: #F1EDE5;
    animation: aromahFade .6s var(--ease);
}

/* الحارس: الشريحة الأولى ظاهرة حتى لو لم يعمل الجافاسكربت */
.aromah-topbar__slide:first-child,
.aromah-topbar__slide.is-on { display: flex; }

.aromah-topbar__slide b { color: var(--aromah-brass-soft); font-weight: 700; }
.aromah-topbar__slide i { font-style: normal; font-size: .95rem; line-height: 1; }

@keyframes aromahFade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.aromah-ship {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: var(--sp-1) var(--sp-2);
    background: var(--aromah-sand);
    border-bottom: 1px solid var(--aromah-line);
    font-size: .82rem;
    font-weight: 600;
    color: var(--aromah-dark);
}

.aromah-ship.is-on { display: flex; }

.aromah-ship__track {
    position: relative;
    width: min(150px, 32vw);
    height: 4px;
    background: rgba(45, 59, 50, .14);
    border-radius: var(--r-pill);
    overflow: hidden;
}

.aromah-ship__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: var(--ship-pct, 0%);
    background: linear-gradient(90deg, var(--aromah-green), var(--aromah-brass));
    border-radius: var(--r-pill);
    transition: width .6s var(--ease);
}

.aromah-ship b { color: var(--aromah-brass); }
.aromah-ship.is-done { background: #EDF3EE; color: var(--aromah-green-deep); }

/* شريط الثقة
   ✅ إصلاح: كان .68rem ≈ ١١px — تحت حد القراءة على الجوال. */
.aromah-trust {
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: #fff;
    border-bottom: 1px solid var(--aromah-line);
}

.aromah-trust span {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    padding: .6rem .3rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--aromah-text-soft);
    text-align: center;
    line-height: 1.4;
}

.aromah-trust span + span { border-inline-start: 1px solid var(--aromah-line); }

.aromah-trust span::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--aromah-brass);
    flex: 0 0 auto;
}

@media (min-width: 768px) {
    .aromah-topbar__slide { font-size: .9rem; }
    .aromah-trust span    { font-size: .84rem; padding: .75rem .5rem; }
    .aromah-ship          { font-size: .88rem; }
}


/* =========================================================================
   ٨. البانرات الثابتة
   ========================================================================= */

body.index .s-block.s-block--fixed-banner:first-of-type,
body.index .s-block--fixed-banner + .s-block--fixed-banner:nth-of-type(2) {
    margin-top: 0;
}

body.index section.s-block.s-block--fixed-banner .container { padding: 0; }

body.index section.s-block.s-block--fixed-banner .banner--fixed img {
    border-radius: 0;
    background: transparent;
}

body.index section.s-block.s-block--banners .s-block__title {
    justify-content: center;
    padding-top: var(--sp-4);
}

body.index .s-block__title .right-side { padding-left: 0 !important; }


/* =========================================================================
   ٩. إيقاع الأقسام
   -------------------------------------------------------------------------
   ✅ إصلاح مهم: القواعد السابقة كانت مربوطة بأرقام ثابتة
   (#best-offers-6-slider ... #best-offers-19). هذه الأرقام تتغيّر
   كلما أضفت أو رتّبت أقسام الصفحة الرئيسية من لوحة سلة —
   فتُفقد الخلفيات فجأة بلا سبب ظاهر.

   البديل: تناوب تلقائي بـ nth-of-type. لا يعتمد على أي رقم،
   ويعمل مهما غيّرت الترتيب.
   ========================================================================= */

body.index .s-block.s-block--best-offers {
    margin-top: 0;
    padding-block: var(--sp-3);
}

/* القسم الثاني والرابع: كتّان دافئ */
body.index .s-block--best-offers:nth-of-type(even) {
    background: var(--aromah-linen);
}

/* قسم داكن واحد فقط في الصفحة — الندرة هي ما يجعله يبدو ثمينًا.
   يستهدف آخر قسم عروض. */
body.index .s-block--best-offers:last-of-type {
    background: radial-gradient(120% 90% at 50% 0%,
                #3A4A40 0%, var(--aromah-dark) 55%, #1B241E 100%);
}

body.index .s-block--best-offers:last-of-type .s-product-card-price,
body.index .s-block--best-offers:last-of-type .s-product-card-content-title a,
body.index .s-block--best-offers:last-of-type .s-slider-block__title h2,
body.index .s-block--best-offers:last-of-type .s-product-card-content-sub {
    color: #F5F1EA !important;
}

body.index .s-block--best-offers:last-of-type .s-product-card-image {
    background: rgba(255, 255, 255, .04) !important;
}

body.index .s-block--best-offers:last-of-type .s-product-card-content-footer .s-button-primary-outline {
    background: var(--aromah-brass) !important;
    color: #fff !important;
}


/* =========================================================================
   ١٠. بطاقات المنتجات
   -------------------------------------------------------------------------
   ⭐ أهم إصلاح في الملف كله ⭐

   كان: aspect-ratio 1/1  +  object-fit: cover
   أنت تبيع أشجارًا بارتفاع ١٦٠–٢٠٠ سم — أي صورًا طولية.
   الإطار المربّع مع cover يقصّ الصورة من الأعلى والأسفل،
   فيبتر تاج الشجرة أو الحوض. المشتري لا يرى المنتج كاملًا،
   وهذا يضرب مباشرة العائق الأول في قطاعك: تعذّر تقدير الحجم.

   صار: 4/5 طولي — يحترم شكل المنتج ويعرض الشجرة من الجذر للتاج.
   وهو أيضًا النسبة التي تستخدمها العلامات الفاخرة في الأثاث.

   ✅ وأزلت الإطار حول الصورة: الحدّ حول صورة المنتج مظهر كتالوج،
   والفخامة صورة بلا إطار وفراغ سخي حولها.
   ========================================================================= */

/* ⚠️ حُذف من هنا: .s-products-list > div
   كانت تحوّل شبكة صفحة القسم إلى صفّ مرن بلا التفاف، فتمتد أفقيًا.
   محاذاة الارتفاع تخصّ شرائح السلايدر فقط — لا حاويات الشبكات. */

.swiper-slide,
.s-block--best-offers .swiper-slide,
.s-block--best-offers .s-block__content > div {
    height: auto !important;
    display: flex !important;
}

.s-product-card-entry {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    background-color: transparent;
    border-radius: var(--r-md);
    transition: transform .4s var(--ease);
}

/* الفخامة حركة صغيرة مضبوطة، لا قفزة بظلّ ضخم.
   الرفع الكبير + الظل الثقيل هو توقيع المتاجر العامة. */
@media (hover: hover) {
    .s-product-card-entry:hover { transform: translateY(-2px); }
    .s-product-card-entry:hover .s-product-card-image img { transform: scale(1.03); }
    .s-product-card-entry:hover .s-product-card-image::after { opacity: 1; }
}

.s-product-card-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    padding-top: var(--sp-2) !important;
}

.s-product-card-content-title a {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    min-height: 3em !important;
    line-height: 1.5 !important;
    font-size: clamp(.97rem, 1.1vw + .6rem, 1.1rem) !important;
    font-weight: 600 !important;
    text-align: center;
    color: var(--aromah-text);
}

.s-product-card-content-sub,
.s-product-card-content-subtitle {
    min-height: 1.6em !important;
    margin-bottom: .5rem !important;
    font-size: .82rem !important;
    line-height: 1.6 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 1 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    justify-content: center;
    text-align: center;
    color: var(--aromah-text-soft);
}

.s-product-card-content-footer {
    margin-top: auto !important;
    padding-top: .6rem !important;
}

/* --- الصورة: طولية ٤:٥ --- */

.s-product-card-image,
.s-block--best-offers .s-product-card-image {
    position: relative;
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: var(--aromah-linen) !important;
    border: 0 !important;
    border-radius: var(--r-md) !important;
}

/* خيط نحاسي رفيع يظهر عند اللمس — بديل الإطار الدائم */
.s-product-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 1px solid var(--aromah-brass-soft);
    border-radius: var(--r-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s var(--ease);
}

.s-product-card-image img,
.s-product-card-image a img,
.s-product-card-image picture img,
.s-block--best-offers .s-product-card-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: auto !important;
    transition: transform .7s var(--ease);
    backface-visibility: hidden;
}

/* --- شارة الخصم --- */

.s-product-card-badge {
    display: inline-flex !important;
    align-items: center;
    position: absolute !important;
    top: .75rem !important;
    inset-inline-end: .75rem !important;
    z-index: 3 !important;
    padding: .28rem .75rem !important;
    background: var(--aromah-brass) !important;
    color: #fff !important;
    border-radius: var(--r-pill) !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* --- المفضلة --- */

.s-product-card-image salla-button[shape="icon"],
.s-product-card-image .s-button-element[shape="icon"] {
    background: transparent !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
}

.s-product-card-wishlist-btn {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    top: .65rem !important;
    inset-inline-start: .65rem !important;
    background: rgba(255, 255, 255, .94) !important;
    border: 1px solid rgba(255, 255, 255, .7) !important;
    border-radius: 50% !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .07) !important;
    color: var(--aromah-dark) !important;
}

/* --- السعر --- */

.s-product-card-price {
    display: flex !important;
    align-items: baseline;
    justify-content: center;
    gap: .45rem;
    color: var(--aromah-dark) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

.s-product-card-price del,
.s-product-card-sale-price {
    color: #A8B0AA !important;
    font-weight: 400 !important;
    font-size: .82rem !important;
    text-decoration-thickness: 1px !important;
}

.s-product-card-price small {
    font-size: .7rem !important;
    font-weight: 400 !important;
    color: var(--aromah-text-soft) !important;
}

.aromah-save {
    display: inline-flex;
    align-items: center;
    margin-inline-start: .35rem;
    padding: .12rem .5rem;
    background: rgba(169, 139, 84, .12);
    border: 1px solid rgba(169, 139, 84, .35);
    border-radius: var(--r-sm);
    color: var(--aromah-brass);
    font-size: .72rem;
    font-weight: 700;
}

/* --- زر الإضافة ---
   ✅ إصلاح: أزلت أيقونة الزر الخارجية. كانت تُحمَّل من نطاق
   متجر آخر (media.zid.store) — رابط خارج سيطرتك قد يسقط في
   أي لحظة فتظهر مساحة فارغة. البديل قناع داخلي لا يحتاج شبكة. */

.s-product-card-content-footer .s-button-primary-outline {
    background: var(--aromah-dark) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    padding: .6rem var(--sp-2) !important;
    font-size: .9rem !important;
    border-radius: var(--r-sm) !important;
    min-height: 46px !important;
    height: auto !important;
    width: 100%;
    position: relative;
    overflow: hidden;
    transition: background .28s var(--ease), border-color .28s var(--ease);
}

.s-product-card-content-footer .s-button-primary-outline:hover {
    background: var(--aromah-green-deep) !important;
    border-color: var(--aromah-brass) !important;
}

.s-product-card-content-footer .s-button-primary-outline:active { transform: translateY(1px); }

.s-product-card-content-footer .s-button-primary-outline .s-button-text i { display: none; }

.s-product-card-content-footer .s-button-primary-outline::before {
    content: "";
    display: inline-block;
    width: 16px !important;
    height: 16px !important;
    margin-inline: 5px;
    background: #fff !important;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 7h12l1 13H5L6 7zm3 0a3 3 0 016 0' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
    mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 7h12l1 13H5L6 7zm3 0a3 3 0 016 0' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat center / contain;
}


/* =========================================================================
   ١١. مقياس المساحة  (يعمل مع ملف الجافاسكربت)
   ========================================================================= */

.aromah-scale {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-1);
    margin: .5rem auto .1rem;
    font-size: .8rem;
    font-weight: 500;
    color: var(--aromah-text-soft);
}

.aromah-scale::before,
.aromah-scale::after {
    content: "";
    height: 1px;
    width: 18px;
    background: linear-gradient(90deg, transparent, var(--aromah-line));
}

.aromah-scale::after { transform: scaleX(-1); }
.aromah-scale b { font-weight: 700; color: var(--aromah-brass); }

.aromah-scale-panel {
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: var(--sp-2);
    margin: var(--sp-3) 0;
    padding: var(--sp-2);
    background: var(--aromah-linen);
    border: 1px solid var(--aromah-line);
    border-radius: var(--r-md);
}

.aromah-ruler {
    position: relative;
    border-inline-end: 1px solid var(--aromah-line);
    min-height: 132px;
}

.aromah-ruler::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(to top,
        var(--aromah-line) 0 1px, transparent 1px 25%);
    opacity: .8;
}

.aromah-ruler i {
    position: absolute;
    inset-inline-start: 12px;
    bottom: 0;
    width: 6px;
    height: var(--tree-fill, 70%);
    background: linear-gradient(to top, var(--aromah-green), var(--aromah-brass));
    border-radius: 3px 3px 0 0;
}

.aromah-ruler i::after {
    content: "";
    position: absolute;
    top: -9px;
    inset-inline-start: -5px;
    width: 16px;
    height: 16px;
    border-radius: 50% 0 50% 50%;
    background: var(--aromah-brass);
    transform: rotate(45deg);
}

.aromah-scale-panel h4 {
    margin: 0 0 .4rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--aromah-dark);
}

.aromah-scale-panel p {
    margin: 0 0 .6rem;
    font-size: .89rem;
    line-height: 1.8;
    color: var(--aromah-text-soft);
}

.aromah-scale-panel .aromah-scale-h {
    display: inline-block;
    padding: .2rem .7rem;
    background: var(--aromah-dark);
    color: #fff;
    border-radius: var(--r-pill);
    font-size: .8rem;
    font-weight: 700;
}


/* =========================================================================
   ١٢. السلايدر والعناوين
   ========================================================================= */

body.index .s-block--best-offers .carousel-slider .swiper {
    padding-block: var(--sp-2);
    padding-inline: var(--sp-2);
}

body.index .s-block--best-offers .swiper,
body.index .s-block--best-offers .swiper-container { overflow: hidden; }

body.index .s-block--best-offers .swiper-wrapper { margin: 0; }

.s-slider-block__title {
    margin-bottom: var(--sp-2);
    margin-top: var(--sp-3);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--aromah-dark);
    gap: .3rem;
}

.s-slider-block__title h2,
.s-slider-block__title-right,
.s-block__title .right-side { padding-left: 0 !important; }

.s-block__title,
.s-slider-block__title,
.section-title,
.section-sub,
.s-slider-block__title h2,
.s-block__title h2,
.s-reviews-header,
.product-single h1,
.product-single .main-content h1,
.product-single .main-content > h2 {
    text-align: center !important;
    justify-content: center !important;
}

.s-slider-block__title h2::after,
.s-block__title h2::after {
    content: "";
    display: block;
    width: 46px;
    height: 1px;
    margin: .75rem auto 0;
    background: linear-gradient(90deg, transparent, var(--aromah-brass), transparent);
}


/* =========================================================================
   ١٣. الأسئلة الشائعة
   ========================================================================= */

body.index .accordion-section {
    margin: var(--sp-4) auto;
    padding: 10px 15px;
    max-width: 56rem;
}

.accordion {
    direction: rtl;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.accordion-button {
    cursor: pointer;
    width: 100%;
    border: 0;
    text-align: start;
    color: var(--aromah-dark);
    background: transparent;
    font-size: .93rem;
    font-family: inherit;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    font-weight: 600;
    min-height: 54px;
}

body.index .accordion-button {
    padding: .9rem 1.15rem;
    background: var(--aromah-linen);
    border: 1px solid var(--aromah-line);
    margin-bottom: .6rem;
    border-radius: var(--r-md);
    color: var(--aromah-dark);
    transition: background .25s var(--ease), border-color .25s var(--ease);
}

body.index .accordion-button:hover { border-color: var(--aromah-brass-soft); }

.accordion-button.active {
    background: var(--aromah-dark) !important;
    border-color: var(--aromah-dark) !important;
    color: #fff !important;
}

.accordion-button .icon {
    font-size: 19px;
    color: var(--aromah-brass);
    transition: transform .3s var(--ease);
}

.accordion-button.active .icon { color: var(--aromah-brass-soft); transform: rotate(180deg); }

.accordion-content {
    background: transparent;
    overflow: hidden;
    max-height: 0;
    padding-inline: 1.15rem;
    transition: max-height .35s var(--ease);
}

.accordion-content p {
    margin: .4rem 0 1.2rem;
    color: var(--aromah-text-soft);
    line-height: 1.9;
    font-size: .92rem;
}

.product-single .accordion-button {
    border-bottom: 1px solid var(--aromah-line);
    padding: .7rem var(--sp-2);
    color: var(--aromah-dark);
    font-weight: 500;
}

.product-single .accordion-section { margin-bottom: var(--sp-2); }


/* =========================================================================
   ١٤. قسم "لماذا أرومة"
   ========================================================================= */

.store-features-symmetrical {
    padding: var(--sp-5) var(--sp-2);
    text-align: center;
    background: var(--aromah-white);
}

.store-features-symmetrical h2 {
    font-size: clamp(1.7rem, 3vw + .7rem, 2.3rem);
    font-weight: 700;
    margin-bottom: .5rem;
    color: var(--aromah-dark);
}

.store-features-symmetrical .subtitle {
    font-size: 1rem;
    color: var(--aromah-text-soft);
    margin-bottom: var(--sp-4);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-2);
    max-width: 900px;
    margin: 0 auto;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: var(--sp-3) var(--sp-2);
    background: var(--aromah-linen);
    border: 1px solid var(--aromah-line);
    border-radius: var(--r-lg);
    transition: border-color .3s var(--ease), transform .3s var(--ease);
}

.feature-item:hover {
    border-color: var(--aromah-brass-soft);
    transform: translateY(-3px);
}

.feature-item img {
    width: 40px;
    height: 40px;
    margin-bottom: .9rem;
    object-fit: contain;
    filter: sepia(40%) saturate(320%) hue-rotate(5deg) brightness(72%) contrast(88%);
}

.feature-item h3 {
    font-size: 1.02rem;
    font-weight: 700;
    margin: 0 0 .35rem;
    color: var(--aromah-dark);
}

.feature-item p {
    font-size: .86rem;
    color: var(--aromah-text-soft);
    margin: 0;
    line-height: 1.7;
}


/* =========================================================================
   ١٥. التقييمات
   ========================================================================= */

.s-reviews-header-wrapper { justify-content: center; }

.s-reviews-testimonial__icon,
.s-reviews-testimonial__avatar { display: none; }

.s-reviews-testimonial {
    background: var(--aromah-linen) !important;
    border: 1px solid var(--aromah-line);
    border-radius: var(--r-lg);
    padding: var(--sp-3) var(--sp-2);
}

.s-reviews-testimonial__text p {
    text-align: center;
    color: var(--aromah-text);
    font-size: .95rem;
    line-height: 1.9;
}

.s-reviews-testimonial__text { flex-direction: column-reverse; }

.s-reviews-testimonial__rating {
    margin-left: 0;
    order: -1;
    justify-content: center;
    color: var(--aromah-brass) !important;
}


/* =========================================================================
   ١٦. صفحة المنتج
   ========================================================================= */

.product-single .main-content {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.product-single .main-content h1 {
    font-size: clamp(1.35rem, 1.6vw + .85rem, 1.8rem) !important;
    line-height: 1.6;
    margin-bottom: .4rem;
    color: var(--aromah-dark);
}

.product-single .description-div { padding-bottom: 20px; }
.product-single .product__description { padding: 0; }

.product-single .product__description ul,
.product-single .product__description ol { padding-inline-start: 1.2rem; }

.product-single .product__description li { margin-bottom: .5rem; line-height: 1.9; }

.product-single .btn--add-to-cart,
salla-add-product-button button.btn--add-to-cart {
    min-height: 54px !important;
    background: var(--aromah-dark) !important;
    color: #fff !important;
    border: none !important;
    font-size: 1.04rem !important;
    border-radius: var(--r-sm) !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 18px -6px rgba(45, 59, 50, .45) !important;
}

.product-single .btn--add-to-cart:hover { background: var(--aromah-green-deep) !important; }

.product-single tamara-widget,
.product-single .tabby-promo-snippet {
    font-size: .84rem !important;
    margin-block: var(--sp-1) !important;
}

.aromah-assure {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--sp-1) .9rem;
    margin: .9rem 0 var(--sp-2);
    padding-top: .9rem;
    border-top: 1px solid var(--aromah-line);
}

.aromah-assure span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 500;
    color: var(--aromah-text-soft);
}

.aromah-assure span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--aromah-brass);
    flex: 0 0 auto;
}

.s-comments-product { background: var(--aromah-white); }

.s-comments-item {
    background: var(--aromah-linen);
    border: 1px solid var(--aromah-line);
    padding: var(--sp-2) !important;
    border-radius: var(--r-md);
}

.click { font-weight: 600; color: var(--aromah-dark); }

.product-color-preview {
    display: flex;
    gap: 7px;
    margin-top: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.color-dot {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    border: 1px solid var(--aromah-line);
}


/* =========================================================================
   ١٧. الأزرار العائمة
   ========================================================================= */

.whatsapp-btn,
[class*="whatsapp-float"],
[id*="whatsapp"],
.s-floating-button,
[class*="floating-btn"],
[class*="float-button"] {
    bottom: calc(var(--sticky-bar-h) + 16px) !important;
    z-index: 40 !important;
}

salla-sticky-add-to-cart,
.sticky-product-bar,
.cart-submit-bar,
[class*="sticky"][class*="bar"] {
    z-index: 60 !important;
    background: #fff !important;
    border-top: 1px solid var(--aromah-line) !important;
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
}

@media (max-width: 768px) {
    body.product-single { padding-bottom: var(--sticky-bar-h); }
}


/* =========================================================================
   ١٨. بطاقات الأقسام
   ========================================================================= */

body.index .s-block.s-block--banners .grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 14px !important;
    max-width: 55rem;
    margin: 0 auto;
    padding: 8px var(--sp-2) 18px !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

body.index .s-block.s-block--banners .grid::-webkit-scrollbar { display: none; }

body.index .s-block.s-block--banners .banner-entry {
    flex: 0 0 min(46vw, 190px) !important;
    width: min(46vw, 190px) !important;
    min-width: min(46vw, 190px) !important;
    max-width: min(46vw, 190px) !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    border-radius: var(--r-lg) !important;
    border: 1px solid var(--aromah-line) !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    position: relative;
    scroll-snap-align: start;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    box-shadow: var(--shadow-soft);
    transition: transform .35s var(--ease);
}

body.index .s-block.s-block--banners .banner-entry:hover { transform: translateY(-4px); }

body.index .s-block.s-block--banners .banner-entry__text {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 14px 10px;
    text-align: center;
}

body.index .s-block.s-block--banners .banner__title {
    font-size: 16px !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

body.index .s-block.s-block--banners .banner__description { display: none !important; }


/* =========================================================================
   ١٩. إنستغرام
   ========================================================================= */

[class*="instagram"] [class*="feed"],
[class*="instagram-gallery"],
.eapps-instagram-feed-posts-grid {
    max-height: 300px;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}


/* =========================================================================
   ٢٠. الفوتر
   ========================================================================= */

.footer-is-light .store-footer,
.footer-is-light .store-footer .store-footer__inner {
    background-color: transparent !important;
}

.store-footer .store-footer__inner::before {
    display: none !important;
    content: none !important;
}

.store-footer__inner {
    position: relative;
    background: linear-gradient(180deg, #2D3B32 0%, #1B241E 100%) !important;
    color: #fff !important;
    border-radius: 40px 40px 0 0;
    text-align: center;
    padding: var(--sp-4) var(--sp-3) var(--sp-3);
    overflow: hidden;
}

/* ✅ إصلاح: كان inset box-shadow لخيط نحاسي علوي — وهو لا يتبع
   انحناء الزوايا فيظهر مقطوعًا. البديل عنصر يحترم border-radius. */
.store-footer__inner::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--aromah-brass), transparent);
    pointer-events: none;
}

.store-footer__inner > div {
    justify-items: center;
    align-items: start;
    text-align: center;
}

.store-footer__inner > div > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

.store-footer h3 {
    width: 100%;
    padding: .5rem 0;
    background: rgba(255, 255, 255, .07);
    color: #fff !important;
    border-radius: var(--r-sm);
    font-weight: 700;
    font-size: .97rem;
    text-align: center;
}

.store-footer a,
.store-footer p,
.store-footer li,
.store-footer span {
    color: #DCE2DC !important;
    text-align: center;
    font-size: .9rem;
}

.store-footer a { transition: color .25s var(--ease); }
.store-footer a:hover { color: var(--aromah-brass-soft) !important; }

.s-apps-icons-list,
.s-contacts-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .55rem;
    flex-wrap: wrap;
}

span.s-contacts-icon,
li.s-social-link {
    background: #fff;
    color: var(--aromah-dark);
    border-radius: 50%;
    transition: background .25s var(--ease);
}

span.s-contacts-icon:hover,
li.s-social-link:hover { background: var(--aromah-brass-soft); }

span.s-contacts-icon svg,
li.s-social-link svg { fill: var(--aromah-dark) !important; }


/* =========================================================================
   ٢١. قسم "قبل وبعد"  (يعمل مع ملف الجافاسكربت)
   ========================================================================= */

.aromah-ba {
    max-width: 60rem;
    margin: var(--sp-4) auto;
    padding-inline: var(--sp-2);
    text-align: center;
}

.aromah-ba__title {
    font-family: "Amiri", "IBM Plex Sans Arabic", serif;
    font-size: clamp(1.6rem, 4.2vw + .6rem, 2.6rem);
    font-weight: 700;
    line-height: 1.6;
    color: var(--aromah-dark);
    margin: 0 0 .6rem;
}

.aromah-ba__title em { font-style: normal; color: var(--aromah-brass); }

.aromah-ba__sub {
    font-size: .95rem;
    color: var(--aromah-text-soft);
    margin: 0 auto var(--sp-3);
    max-width: 40ch;
    line-height: 1.85;
}

.aromah-ba__tabs {
    display: flex;
    justify-content: center;
    gap: .4rem;
    margin-bottom: var(--sp-2);
    flex-wrap: wrap;
}

.aromah-ba__tab {
    padding: .45rem 1.15rem;
    background: transparent;
    border: 1px solid var(--aromah-line);
    border-radius: var(--r-pill);
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--aromah-text-soft);
    cursor: pointer;
    min-height: 40px;
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

.aromah-ba__tab.is-on {
    background: var(--aromah-dark);
    border-color: var(--aromah-dark);
    color: #fff;
}

.aromah-ba__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--aromah-linen);
    box-shadow: var(--shadow-lift);
    touch-action: pan-y;
    cursor: ew-resize;
    user-select: none;
    -webkit-user-select: none;
}

@media (min-width: 768px) {
    .aromah-ba__frame { aspect-ratio: 16 / 10; }
}

.aromah-ba__frame img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.aromah-ba__before {
    position: absolute;
    inset: 0;
    clip-path: inset(0 0 0 var(--ba-pos, 50%));
}

.aromah-ba__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--ba-pos, 50%);
    width: 2px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 0 14px rgba(0, 0, 0, .3);
    z-index: 4;
    pointer-events: none;
}

.aromah-ba__grip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--aromah-brass);
    border: 2px solid #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .28);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .8rem;
}

.aromah-ba__frame:not(.is-touched) .aromah-ba__grip {
    animation: baPulse 2.2s ease-in-out 3;
}

@keyframes baPulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50%      { transform: translate(-50%, -50%) scale(1.14); }
}

.aromah-ba__tag {
    position: absolute;
    top: 14px;
    z-index: 5;
    padding: .3rem .85rem;
    border-radius: var(--r-pill);
    font-size: .76rem;
    font-weight: 700;
    pointer-events: none;
}

.aromah-ba__tag--before { right: 14px; background: rgba(30, 38, 33, .62); color: #E9E4DA; }
.aromah-ba__tag--after  { left: 14px;  background: rgba(169, 139, 84, .92); color: #fff; }

.aromah-ba__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    margin-top: var(--sp-2);
    font-size: .83rem;
    font-weight: 600;
    color: var(--aromah-text-soft);
}

.aromah-ba__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin-top: var(--sp-3);
    padding: .9rem 2.4rem;
    background: var(--aromah-dark);
    color: #fff !important;
    border-radius: var(--r-pill);
    font-size: .98rem;
    font-weight: 700;
    min-height: 50px;
    box-shadow: 0 8px 22px -8px rgba(45, 59, 50, .5);
    transition: background .3s var(--ease), transform .2s var(--ease);
}

.aromah-ba__cta:hover { background: var(--aromah-green-deep); transform: translateY(-2px); }


/* =========================================================================
   ٢٢. بطاقة "صمّم زاويتك"  (يعمل مع ملف الجافاسكربت)
   ========================================================================= */

.aromah-design-cta {
    max-width: 46rem;
    margin: var(--sp-5) auto;
    padding: var(--sp-4) var(--sp-3);
    background: radial-gradient(120% 100% at 50% 0%,
                #3A4A40 0%, #2D3B32 55%, #1B241E 100%);
    border-radius: var(--r-lg);
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.aromah-design-cta::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--aromah-brass-soft), transparent);
}

.aromah-design-cta .eyebrow { color: var(--aromah-brass-soft); }

.aromah-design-cta h3 {
    font-family: "Amiri", "IBM Plex Sans Arabic", serif;
    font-size: clamp(1.55rem, 4vw + .6rem, 2.2rem);
    font-weight: 700;
    margin: 0 0 .7rem;
    color: #fff;
    line-height: 1.6;
}

.aromah-design-cta p {
    font-size: .95rem;
    line-height: 1.9;
    color: #D6DED8;
    margin: 0 auto var(--sp-3);
    max-width: 34ch;
}

.aromah-design-cta a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: .85rem 2.2rem;
    background: var(--aromah-brass);
    color: #fff !important;
    border-radius: var(--r-pill);
    font-size: .97rem;
    font-weight: 700;
    min-height: 48px;
    transition: background .3s var(--ease), transform .2s var(--ease);
}

.aromah-design-cta a:hover { background: var(--aromah-brass-soft); transform: translateY(-2px); }

.aromah-design-cta small {
    display: block;
    margin-top: .9rem;
    font-size: .78rem;
    color: #9FAEA4;
}


/* =========================================================================
   ٢٣. قسم المزايا الافتراضي (تسوق آمن / شحن سريع / خدمة العملاء)
   -------------------------------------------------------------------------
   ✅ كانت هذه الكتلة معطّلة داخل تعليق في ملفك السابق — والتعليق
   نفسه كان يحوي علامة إغلاق تعليق في شرحه، وهذا يُنهي التعليق
   مبكرًا ويجعل بقية النص يُقرأ كـ CSS معطوب.
   أعدتها مفعّلة ومحصورة داخل .s-block--store-features فقط،
   بحيث لا تمسّ أي كتلة أخرى.
   ========================================================================= */

.s-block--store-features .s-block__content,
.s-block--store-features .grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .75rem !important;
    max-width: 920px !important;
    margin-inline: auto !important;
}

.s-block--store-features .s-block__content > *,
.s-block--store-features .grid > * {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: var(--sp-3) .6rem !important;
    background: var(--aromah-linen) !important;
    border: 1px solid var(--aromah-line) !important;
    border-radius: var(--r-lg) !important;
    margin: 0 !important;
}

.s-block--store-features h3 {
    font-size: .92rem !important;
    font-weight: 700 !important;
    margin: 0 0 .3rem !important;
    color: var(--aromah-dark) !important;
}

.s-block--store-features p {
    font-size: .8rem !important;
    line-height: 1.65 !important;
    color: var(--aromah-text-soft) !important;
    margin: 0 !important;
}


/* =========================================================================
   ٢٤. سطح المكتب
   ========================================================================= */

@media (min-width: 1024px) {

    .main-menu {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        position: relative;
    }

    .main-menu > li {
        list-style: none;
        flex: 0 1 auto;
        white-space: nowrap;
    }

    .main-menu li > a {
        font-size: 1.04rem;
        font-weight: 500;
        color: var(--aromah-dark) !important;
        position: relative;
        padding-block: .35rem;
    }

    .main-menu li > a::after {
        content: "";
        position: absolute;
        bottom: 0;
        inset-inline-start: 0;
        width: 0;
        height: 1px;
        background: var(--aromah-brass);
        transition: width .3s var(--ease);
    }

    .main-menu li > a:hover::after { width: 100%; }

    .main-menu > li.navbar-brand { flex: 0 0 auto; margin: 0 2.5rem; }
    .main-menu > li.navbar-brand img { max-height: 72px !important; }

    body.index .s-block.s-block--banners .grid {
        flex-wrap: wrap !important;
        overflow: visible !important;
        justify-content: center !important;
    }

    body.index .s-block.s-block--banners .banner-entry {
        flex: 0 0 200px !important;
        width: 200px !important;
        min-width: 200px !important;
        max-width: 200px !important;
    }

    .store-footer__inner > div {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: start;
        justify-items: center;
        text-align: center;
    }

    .aromah-scale-panel { grid-template-columns: 76px 1fr; }
}


/* =========================================================================
   ٢٥. الجوال
   ========================================================================= */

@media (max-width: 768px) {

    body { font-size: 15.5px; }

    body.index .s-block--best-offers .carousel-slider .swiper {
        padding-block: var(--sp-2);
        padding-inline: .85rem;
    }

    .s-product-card-content { padding: .8rem 0; }

    .product-single .main-content small,
    .product-single .main-content h1,
    .product-single .main-content > h2 {
        text-align: center;
        justify-content: center;
        width: 100%;
        color: var(--aromah-dark) !important;
    }

    .s-product-card-content-title a,
    .s-product-card-price { font-size: 1rem !important; }

    .s-slider-block__title h2,
    .section-title,
    .s-reviews-header { font-size: 1.6rem; }

    .store-footer__inner { padding: var(--sp-3) var(--sp-2); border-radius: 28px 28px 0 0; }

    .s-contacts-list {
        flex-direction: row !important;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
    }

    .s-contacts-list .unicode { display: none; }
    .copyright-text p { padding-top: 15px; color: #DCE2DC !important; }

    .features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
    .feature-item  { padding: var(--sp-2) .6rem; border-radius: var(--r-md); }
    .feature-item img { width: 30px; height: 30px; margin-bottom: .55rem; }
    .feature-item h3  { font-size: .86rem; line-height: 1.45; }
    .feature-item p   { font-size: .78rem; line-height: 1.6; }

    .store-features-symmetrical { padding: var(--sp-4) .75rem; }

    .aromah-scale-panel { grid-template-columns: 52px 1fr; padding: var(--sp-2) .9rem; gap: .9rem; }

    .s-block--store-features .s-block__content,
    .s-block--store-features .grid { gap: .5rem !important; }

    .s-block--store-features h3 { font-size: .82rem !important; }
    .s-block--store-features p  { font-size: .74rem !important; }
}

@media (max-width: 360px) {
    .feature-item p { display: none; }
}


/* =========================================================================
   ٢٦. صفحة القسم — شبكة بدل الشريط الأفقي
   -------------------------------------------------------------------------
   مبنية على بنية ثيم رائد الرسمية:
   <salla-products-list class="flex-1 min-w-0 overflow-auto" ...>

   الإصلاح من طبقتين:
   ١. إلغاء overflow-auto  → لا حاوية تمرير أفقي أصلًا
   ٢. فرض شبكة على المحتوى الداخلي → المنتجات تلتفّ لا تمتدّ
   ========================================================================= */

/* الطبقة ١ — إبطال حاوية التمرير */
salla-products-list,
.s-products-list {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    overflow-x: visible !important;
}

/* الطبقة ٢ — الشبكة.
   المحدّدات واسعة عمدًا لأن سلة قد تسمّي الحاوية الداخلية بأكثر
   من اسم حسب إصدار الثيم. */
salla-products-list > div,
salla-products-list > .s-products-list-cards,
salla-products-list > [class*="grid"],
.s-products-list > div {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--sp-2) !important;
    width: 100% !important;
    overflow: visible !important;
    flex-wrap: wrap !important;
    scroll-snap-type: none !important;
    transform: none !important;
}

/* البطاقة داخل الشبكة: تملأ خانتها ولا تفرض عرضًا */
salla-products-list custom-salla-product-card,
salla-products-list salla-product-card,
salla-products-list .s-product-card-entry,
.s-products-list .s-product-card-entry {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 0 1 auto !important;
}

@media (min-width: 768px) {
    salla-products-list > div,
    salla-products-list > .s-products-list-cards,
    salla-products-list > [class*="grid"],
    .s-products-list > div {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: var(--sp-3) !important;
    }
}

@media (min-width: 1200px) {
    salla-products-list > div,
    salla-products-list > .s-products-list-cards,
    salla-products-list > [class*="grid"],
    .s-products-list > div {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

/* حارس: سلايدرات الصفحة الرئيسية تبقى أفقية.
   يأتي بعد الشبكة ليغلبها في التتالي. */
.s-block--best-offers .swiper-wrapper,
.carousel-slider .swiper-wrapper,
.swiper .swiper-wrapper {
    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
}


/* =========================================================================
   ٢٧. علاج الفجوة تحت السعر
   -------------------------------------------------------------------------
   في اللقطة كان بين السعر وزر "إضافة للسلة" فراغ أبيض كبير.
   السبب: margin-top:auto داخل بطاقة مشدودة لارتفاع أطول من محتواها.
   بعد إصلاح الشبكة يزول غالبًا، وهذا يضمن ألا يعود.
   ========================================================================= */

.s-product-card-entry {
    height: 100% !important;
}

.s-product-card-content {
    justify-content: flex-start !important;
}

.s-product-card-content-footer {
    margin-top: auto !important;
    padding-top: .6rem !important;
    max-height: none !important;
}


/* =========================================================================
   نهاية الملف — أرومة
   ========================================================================= */
/* ===== تكبير شارة موثوق في الفوتر ===== */
footer img[src*="maroof"],
footer img[alt*="موثوق"],
footer img[alt*="maroof"],
.store-footer img[src*="maroof"] {
  width: 170px !important;
  height: auto !important;
  max-width: 55% !important;
  display: block !important;
  margin: 28px auto !important;
  background: #fff !important;
  padding: 14px !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.12) !important;
}

/* توسيط الحاوية لو كانت داخل عنصر */
footer [class*="maroof"],
.store-footer [class*="maroof"] {
  display: flex !important;
  justify-content: center !important;
  width: 100% !important;
}

/* على الجوال */
@media (max-width: 768px) {
  footer img[src*="maroof"],
  footer img[alt*="موثوق"] {
    width: 140px !important;
    margin: 22px auto !important;
  }
}
/* تكبير شارة موثوق */
footer img[src*="maroof"],
footer img[alt*="موثوق"],
footer a[href*="maroof"] img {
  width: 160px !important;
  height: auto !important;
  display: block !important;
  margin: 24px auto !important;
  background: #fff !important;
  padding: 12px !important;
  border-radius: 14px !important;
}

/* تكبير وثيقة العمل الحر (تشتغل الآن) */
footer img[src*="freelance"],
footer img[alt*="العمل الحر"] {
  width: 130px !important;
  height: auto !important;
}
footer .copyright,
footer [class*="copyright"] {
  color: #4a4a4a !important;
  opacity: 1 !important;
}
/* تدوير حواف البانرات */
.s-block--photos-slider img,
.s-block--fixed-banner img,
.s-slider-block img,
[class*="banner"] img,
[class*="slider"] img {
  border-radius: 20px !important;
  overflow: hidden !important;
}

/* تدوير الحاوية نفسها */
.s-block--photos-slider,
.s-slider-block,
[class*="banner"] > div {
  border-radius: 28px !important;
  overflow: hidden !important;
}

/* هامش جانبي بسيط ليظهر التدوير */
@media (max-width: 768px) {
  .s-block--photos-slider,
  [class*="banner"] {
    margin-left: 12px !important;
    margin-right: 12px !important;
  }
}
/* تكبير البانر الرئيسي على الجوال بدون قص */
@media (max-width: 768px) {

  .s-block--photos-slider {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .s-block--photos-slider .swiper-slide {
    width: 100% !important;
  }

  .s-block--photos-slider .swiper-slide img {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
    display: block !important;
  }
}