/* Add custom CSS styles below */


/* =========================================================
   MEROS — RAED HEADER SYSTEM
   TOP BAR OFF
   BLACK HEADER
   CENTERED LOGO
   FROSTED / LIQUID GLASS ON SCROLL
   ========================================================= */


/* =========================================================
   01 — REMOVE TOP BAR
   ========================================================= */

.top-navbar {
    display: none !important;
}


/* =========================================================
   02 — MAIN HEADER — NORMAL STATE
   ========================================================= */

#mainnav {
    position: relative !important;
    background: #000000 !important;
    overflow: visible !important;
}


/*
   مهم:
   .inner هي القطعة التي تصبح fixed عند السكرول في رائد.
   لذلك يجب أن يكون لها خلفية أيضًا.
*/

#mainnav .inner {
    position: relative;
    background: #000000 !important;

    border-bottom: 1px solid rgba(255,255,255,0.05);

    transition:
        background .45s cubic-bezier(.22,.61,.36,1),
        backdrop-filter .45s ease,
        -webkit-backdrop-filter .45s ease,
        box-shadow .45s ease,
        border-color .45s ease !important;
}


/* الحاوية الداخلية */

#mainnav .container {
    position: relative !important;
    z-index: 5 !important;

    background: transparent !important;
}


/* =========================================================
   03 — HEADER ROW
   ========================================================= */

#mainnav .container > .flex {
    position: relative !important;

    width: 100% !important;

    min-height: 76px !important;

    display: flex !important;
    align-items: center !important;
}


/* =========================================================
   04 — TRUE CENTERED MEROS LOGO
   ========================================================= */

#mainnav .navbar-brand,
#mainnav [data-testid="store-header-logo"] {

    position: absolute !important;

    left: 50% !important;
    right: auto !important;

    top: 50% !important;

    transform: translate(-50%, -50%) !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 50 !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    float: none !important;
}


/* صورة الشعار */

#mainnav .navbar-brand img,
#mainnav [data-testid="store-header-logo"] img {

    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 180px !important;
    max-height: 48px !important;

    margin: 0 auto !important;

    object-fit: contain !important;

    transition:
        filter .4s cubic-bezier(.22,.61,.36,1),
        opacity .4s ease,
        transform .4s ease !important;
}


/* =========================================================
   05 — NORMAL HEADER COLORS
   ========================================================= */

#mainnav,
#mainnav a,
#mainnav button,
#mainnav i,
#mainnav svg,
#mainnav .header-btn__icon {

    color: #ffffff !important;
}


/* بعض أيقونات رائد */

#mainnav .header-btn__icon {
    border-color: rgba(255,255,255,0.18) !important;
}


/* =========================================================
   06 — FIX THE RAED SCROLL HIDE BEHAVIOR
   ========================================================= */

/*
   رائد افتراضيًا يخفي .inner مؤقتًا عبر translateY(-100%).
   نحن نلغي هذه المرحلة بالكامل.
*/

#mainnav.fixed-pinned .inner,
#mainnav.fixed-header .inner {

    position: fixed !important;

    top: 0 !important;
    right: 0 !important;
    left: 0 !important;

    width: 100% !important;

    z-index: 999 !important;

    transform: translate3d(0, 0, 0) !important;

    opacity: 1 !important;
    visibility: visible !important;
}


/* =========================================================
   07 — GLASS STATE ON SCROLL
   ========================================================= */

#mainnav.fixed-pinned .inner,
#mainnav.fixed-header .inner {

    /*
       Pearl glass شبه شفاف.
       كلما قل الرقم أصبح أكثر شفافية.
    */

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0.68) 0%,
            rgba(249,249,247,0.58) 38%,
            rgba(242,244,244,0.51) 70%,
            rgba(255,255,255,0.62) 100%
        ) !important;


    /* أهم جزء: Blur للمحتوى الموجود خلف الهيدر */

    -webkit-backdrop-filter:
        blur(26px)
        saturate(160%)
        contrast(102%) !important;

    backdrop-filter:
        blur(26px)
        saturate(160%)
        contrast(102%) !important;


    border-bottom:
        1px solid rgba(255,255,255,0.65) !important;


    box-shadow:
        0 8px 30px rgba(0,0,0,0.055),
        inset 0 1px 0 rgba(255,255,255,0.78),
        inset 0 -1px 0 rgba(255,255,255,0.20) !important;


    isolation: isolate !important;
}


/* =========================================================
   08 — LIQUID GLASS LIGHT REFLECTION
   ========================================================= */

/*
   هذه ليست خلفية ملونة.
   هي فقط انعكاسات ضوء ناعمة داخل الزجاج.
*/

#mainnav.fixed-pinned .inner::before,
#mainnav.fixed-header .inner::before {

    content: "" !important;

    position: absolute !important;

    inset: 0 !important;

    z-index: 0 !important;

    pointer-events: none !important;


    background:

        radial-gradient(
            ellipse 42% 140% at 14% -55%,
            rgba(255,255,255,0.80) 0%,
            rgba(255,255,255,0.20) 45%,
            transparent 70%
        ),

        radial-gradient(
            ellipse 38% 130% at 77% 160%,
            rgba(198,220,228,0.14) 0%,
            transparent 67%
        ),

        linear-gradient(
            105deg,
            rgba(255,255,255,0.10) 0%,
            transparent 35%,
            transparent 67%,
            rgba(255,255,255,0.14) 100%
        ) !important;


    opacity: 0.75 !important;
}


/* محتويات الهيدر فوق الزجاج */

#mainnav.fixed-pinned .container,
#mainnav.fixed-header .container {

    position: relative !important;

    z-index: 5 !important;

    background: transparent !important;
}


/* =========================================================
   09 — ULTRA SUBTLE MEROS GLASS EDGE
   ========================================================= */

#mainnav.fixed-pinned .inner::after,
#mainnav.fixed-header .inner::after {

    content: "" !important;

    position: absolute !important;

    left: 6% !important;
    right: 6% !important;
    bottom: 0 !important;

    height: 1px !important;

    z-index: 6 !important;

    pointer-events: none !important;


    background:
        linear-gradient(
            90deg,

            transparent 0%,

            rgba(157,215,226,0.00) 8%,

            rgba(157,215,226,0.26) 25%,

            rgba(197,187,226,0.30) 48%,

            rgba(231,204,219,0.22) 67%,

            rgba(161,211,220,0.18) 83%,

            transparent 100%
        ) !important;


    opacity: 0.8 !important;
}


/* =========================================================
   10 — LOGO BECOMES BLACK ON SCROLL
   ========================================================= */

/*
   لا نضع مستطيلاً أسود فوق الشعار.
   نحول الشعار نفسه إلى الأسود مع الحفاظ على شفافيته.
*/

#mainnav.fixed-pinned .navbar-brand img,
#mainnav.fixed-pinned [data-testid="store-header-logo"] img,

#mainnav.fixed-header .navbar-brand img,
#mainnav.fixed-header [data-testid="store-header-logo"] img {

    filter:
        brightness(0)
        saturate(100%) !important;

    opacity: 0.96 !important;
}


/* =========================================================
   11 — ICONS BECOME BLACK
   ========================================================= */

#mainnav.fixed-pinned,
#mainnav.fixed-header,

#mainnav.fixed-pinned a,
#mainnav.fixed-header a,

#mainnav.fixed-pinned button,
#mainnav.fixed-header button,

#mainnav.fixed-pinned i,
#mainnav.fixed-header i,

#mainnav.fixed-pinned svg,
#mainnav.fixed-header svg,

#mainnav.fixed-pinned .header-btn__icon,
#mainnav.fixed-header .header-btn__icon {

    color: #070707 !important;
}


/* حدود الأيقونات */

#mainnav.fixed-pinned .header-btn__icon,
#mainnav.fixed-header .header-btn__icon {

    border-color: rgba(0,0,0,0.14) !important;
}


/* =========================================================
   12 — CART TEXT
   ========================================================= */

#mainnav.fixed-pinned .s-cart-summary-total,
#mainnav.fixed-header .s-cart-summary-total {

    color: #070707 !important;
}


/* =========================================================
   13 — SMOOTH TRANSITIONS
   ========================================================= */

#mainnav a,
#mainnav button,
#mainnav i,
#mainnav svg,
#mainnav .header-btn__icon,
#mainnav .s-cart-summary-total {

    transition:
        color .35s ease,
        border-color .35s ease,
        opacity .35s ease !important;
}


/* =========================================================
   14 — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    #mainnav .container > .flex {

        min-height: 66px !important;
    }


    #mainnav .navbar-brand img,
    #mainnav [data-testid="store-header-logo"] img {

        max-width: 125px !important;
        max-height: 38px !important;
    }


    #mainnav.fixed-pinned .inner,
    #mainnav.fixed-header .inner {

        background:
            rgba(248,248,246,0.61) !important;

        -webkit-backdrop-filter:
            blur(22px)
            saturate(150%) !important;

        backdrop-filter:
            blur(22px)
            saturate(150%) !important;
    }
}


/* =========================================================
   15 — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    #mainnav,
    #mainnav .inner,
    #mainnav img,
    #mainnav a,
    #mainnav button {

        transition: none !important;
    }
}
/* =========================================
   MEROS — ARABIC TYPOGRAPHY FEATURES
   ========================================= */

html[lang="ar"] body,
html[dir="rtl"] body {
    /* الربط العربي والبدائل السياقية */
    font-variant-ligatures:
        common-ligatures
        contextual;

    font-feature-settings:
        "rlig" 1,   /* Required Ligatures */
        "liga" 1,   /* Standard Ligatures */
        "calt" 1,   /* Contextual Alternates */
        "kern" 1,   /* Kerning */
        "salt" 1;   /* Stylistic Alternates */
}


/* =========================================
   العناوين — بدائل أكثر تعبيرًا
   ========================================= */

html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] .section-title,
html[dir="rtl"] .s-block__title {
    font-feature-settings:
        "rlig" 1,
        "liga" 1,
        "calt" 1,
        "kern" 1,
        "salt" 1,
        "swsh" 1,
        "cswh" 1;

    letter-spacing: 0 !important;
}


/* =========================================
   النصوص العربية الطويلة
   يسمح للمتصفح باختيار أفضل تسويغ متاح
   ========================================= */

html[dir="rtl"] p,
html[dir="rtl"] .description,
html[dir="rtl"] .product-description {
    text-justify: auto;

    font-feature-settings:
        "rlig" 1,
        "liga" 1,
        "calt" 1,
        "kern" 1;
}
/* =========================================================
   MEROS — GLOBAL ARABIC OPENTYPE SYSTEM
   Ligatures + Contextual Alternates + Swashes
   ========================================================= */


/* ---------------------------------------------------------
   01 — Global Arabic typography
   --------------------------------------------------------- */

html[dir="rtl"],
html[dir="rtl"] body,
html[lang="ar"],
html[lang="ar"] body {
    font-variant-ligatures:
        common-ligatures
        contextual
        discretionary-ligatures !important;

    font-feature-settings:
        "rlig" 1,
        "liga" 1,
        "dlig" 1,
        "calt" 1,
        "kern" 1,
        "salt" 1,
        "swsh" 1,
        "cswh" 1 !important;
}


/* ---------------------------------------------------------
   02 — Apply to normal text elements
   --------------------------------------------------------- */

html[dir="rtl"] :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    button,
    label,
    strong,
    b,
    small,
    div
) {
    font-feature-settings:
        "rlig" 1,
        "liga" 1,
        "dlig" 1,
        "calt" 1,
        "kern" 1,
        "salt" 1,
        "swsh" 1,
        "cswh" 1 !important;

    font-variant-ligatures:
        common-ligatures
        contextual
        discretionary-ligatures !important;
}


/* =========================================================
   03 — SALLA HOME BLOCKS
   ========================================================= */

html[dir="rtl"] :where(
    .s-block,
    .s-block *,
    .s-block__title,
    .s-block__description,
    .section-title,
    .section-header,
    .section-header *,
    .home-block,
    .home-block *,
    .container
) {
    font-feature-settings:
        "rlig" 1,
        "liga" 1,
        "dlig" 1,
        "calt" 1,
        "kern" 1,
        "salt" 1,
        "swsh" 1,
        "cswh" 1 !important;
}


/* =========================================================
   04 — MOVING / SLIDER BANNERS
   ========================================================= */

html[dir="rtl"] :where(
    salla-slider,
    salla-slider *,
    salla-carousel,
    salla-carousel *,
    .s-slider-block,
    .s-slider-block *,
    .swiper,
    .swiper *,
    .swiper-slide,
    .swiper-slide *,
    .slider,
    .slider *,
    .carousel,
    .carousel *
) {
    font-feature-settings:
        "rlig" 1,
        "liga" 1,
        "dlig" 1,
        "calt" 1,
        "kern" 1,
        "salt" 1,
        "swsh" 1,
        "cswh" 1 !important;

    font-variant-ligatures:
        common-ligatures
        contextual
        discretionary-ligatures !important;
}


/* =========================================================
   05 — STATIC BANNERS
   ========================================================= */

html[dir="rtl"] :where(
    .banner,
    .banner *,
    [class*="banner"],
    [class*="banner"] *,
    [class*="banners"],
    [class*="banners"] *,
    [class*="slider"],
    [class*="slider"] *,
    [class*="carousel"],
    [class*="carousel"] *
) {
    font-feature-settings:
        "rlig" 1,
        "liga" 1,
        "dlig" 1,
        "calt" 1,
        "kern" 1,
        "salt" 1,
        "swsh" 1,
        "cswh" 1 !important;
}


/* =========================================================
   06 — BUTTONS / CTA INSIDE BANNERS
   ========================================================= */

html[dir="rtl"] :where(
    .banner a,
    .banner button,
    [class*="banner"] a,
    [class*="banner"] button,
    .swiper-slide a,
    .swiper-slide button,
    salla-slider a,
    salla-slider button
) {
    font-feature-settings:
        "rlig" 1,
        "liga" 1,
        "calt" 1,
        "salt" 1,
        "swsh" 1,
        "cswh" 1 !important;

    letter-spacing: 0 !important;
}


/* =========================================================
   07 — PRODUCT / CATEGORY TITLES
   ========================================================= */

html[dir="rtl"] :where(
    .s-product-card-entry,
    .s-product-card-entry *,
    [class*="product-card"],
    [class*="product-card"] *,
    [class*="category"],
    [class*="category"] *,
    .product-title,
    .product-name
) {
    font-feature-settings:
        "rlig" 1,
        "liga" 1,
        "calt" 1,
        "kern" 1,
        "salt" 1,
        "swsh" 1,
        "cswh" 1 !important;
}


/* =========================================================
   08 — Avoid Arabic spacing distortion
   ========================================================= */

html[dir="rtl"] :where(
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    span,
    a,
    button,
    label
) {
    letter-spacing: 0 !important;
}

/* =========================================================
   MEROS / SALLA
   EXTENDED ARABIC LETTERS CONTROL
   ========================================================= */


/* =========================================================
   01 — DEFAULT:
   تعطيل الحروف المرسلة في الموقع بالكامل
   ========================================================= */

html body,
html body * {
    font-feature-settings:
        "salt" 0,
        "swsh" 0,
        "cswh" 0,
        "dlig" 0,
        "ss01" 0,
        "ss02" 0,
        "ss03" 0,
        "ss04" 0,
        "ss05" 0,
        "ss06" 0,
        "ss07" 0,
        "ss08" 0,
        "ss09" 0,
        "ss10" 0 !important;

    -webkit-font-feature-settings:
        "salt" 0,
        "swsh" 0,
        "cswh" 0,
        "dlig" 0,
        "ss01" 0,
        "ss02" 0,
        "ss03" 0,
        "ss04" 0,
        "ss05" 0,
        "ss06" 0,
        "ss07" 0,
        "ss08" 0,
        "ss09" 0,
        "ss10" 0 !important;
}


/* =========================================================
   02 — ENABLE ONLY FOR REAL EDITORIAL HEADINGS
   العناوين التي نسمح لها بالحروف المرسلة
   ========================================================= */

html body :is(

    /* عناوين الأقسام في سلة */
    .s-block__title,
    .s-block__title h2,
    .s-block__title h3,

    .s-slider-block__title,
    .s-slider-block__title h2,
    .s-slider-block__title h3,

    .section-title,
    .section-heading,
    .section-header h1,
    .section-header h2,
    .section-header h3,

    /* عناوين الصفحات */
    .page-title,
    .page-header h1,

    /* عناوين البلوكات والمحتوى */
    .block-title,
    .block-heading,
    .widget-title,

    /* عناوين مخصصة تضيفها أنت */
    .extended-title,
    .meros-title,
    .meros-heading

) {
    font-feature-settings:
        "salt" 1,
        "swsh" 1,
        "cswh" 1,
        "ss01" 1 !important;

    -webkit-font-feature-settings:
        "salt" 1,
        "swsh" 1,
        "cswh" 1,
        "ss01" 1 !important;
}


/* =========================================================
   03 — PRODUCT NAMES
   أسماء المنتجات ممنوعة تماماً من الحروف المرسلة
   حتى لو كانت H2 أو H3
   ========================================================= */

html body :is(

    .product-title,
    .product-name,
    .product__title,

    .s-product-card-entry__title,
    .s-product-card-entry__title a,

    .s-product-card-entry h2,
    .s-product-card-entry h3,
    .s-product-card-entry h4,

    .product-entry__title,
    .product-entry__title a,

    .product-card__title,
    .product-card__title a,

    .product-card h2,
    .product-card h3,
    .product-card h4,

    [class*="product"][class*="title"],
    [class*="product"][class*="name"]

) {
    font-feature-settings:
        "salt" 0,
        "swsh" 0,
        "cswh" 0,
        "dlig" 0,
        "ss01" 0,
        "ss02" 0,
        "ss03" 0,
        "ss04" 0,
        "ss05" 0,
        "ss06" 0,
        "ss07" 0,
        "ss08" 0,
        "ss09" 0,
        "ss10" 0 !important;

    -webkit-font-feature-settings:
        "salt" 0,
        "swsh" 0,
        "cswh" 0,
        "dlig" 0,
        "ss01" 0,
        "ss02" 0,
        "ss03" 0,
        "ss04" 0,
        "ss05" 0,
        "ss06" 0,
        "ss07" 0,
        "ss08" 0,
        "ss09" 0,
        "ss10" 0 !important;
}


/* =========================================================
   04 — BODY / DESCRIPTIONS / UI
   تأكيد إضافي أن النصوص الاعتيادية طبيعية
   ========================================================= */

html body :is(

    p,
    li,
    label,
    input,
    textarea,
    select,
    option,
    button,

    .description,
    .product-description,
    .product-details,
    .content-entry,

    .price,
    .product-price,

    .breadcrumb,
    .breadcrumbs,

    .s-button-element,
    .s-button-text,

    .s-product-card-entry__price,
    .s-product-card-entry__sub-title

) {
    font-feature-settings:
        "salt" 0,
        "swsh" 0,
        "cswh" 0,
        "dlig" 0,
        "ss01" 0,
        "ss02" 0,
        "ss03" 0,
        "ss04" 0,
        "ss05" 0 !important;

    -webkit-font-feature-settings:
        "salt" 0,
        "swsh" 0,
        "cswh" 0,
        "dlig" 0,
        "ss01" 0,
        "ss02" 0,
        "ss03" 0,
        "ss04" 0,
        "ss05" 0 !important;
}


/* =========================================================
   05 — MANUAL OVERRIDE
   تستخدمها لأي عنوان تريد إجباره على الحروف المرسلة
   ========================================================= */

.extended-title {
    font-feature-settings:
        "salt" 1,
        "swsh" 1,
        "cswh" 1,
        "ss01" 1 !important;

    -webkit-font-feature-settings:
        "salt" 1,
        "swsh" 1,
        "cswh" 1,
        "ss01" 1 !important;
}


/* =========================================================
   06 — MANUAL NORMAL
   تستخدمها لأي عنصر تريد إجباره على الشكل الطبيعي
   ========================================================= */

.no-extended-letters {
    font-feature-settings:
        "salt" 0,
        "swsh" 0,
        "cswh" 0,
        "dlig" 0,
        "ss01" 0,
        "ss02" 0,
        "ss03" 0,
        "ss04" 0,
        "ss05" 0 !important;

    -webkit-font-feature-settings:
        "salt" 0,
        "swsh" 0,
        "cswh" 0,
        "dlig" 0,
        "ss01" 0,
        "ss02" 0,
        "ss03" 0,
        "ss04" 0,
        "ss05" 0 !important;
}

/* =========================================================
   MEROS — COMPACT HERO & AZURE / EMBER
   ========================================================= */

/* Remove the gap between the header and the first hero */
.s-block--bundle-clean-hero {
    margin-top: 0 !important;
}

/* =========================================================
   MEROS — SIGNATURE FOOTER & COMPACT MOBILE HEADER
   ========================================================= */

/* ---------- Footer: pure black editorial system ---------- */
.store-footer {
    position: relative !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    background: #000000 !important;
    color: #a7a7ac !important;
    border-top: 1px solid transparent !important;
    border-image: linear-gradient(90deg, rgba(153,238,255,.12), rgba(225,190,255,.78), rgba(181,255,238,.45), rgba(255,255,255,.12)) 1 !important;
}

.store-footer,
.store-footer__inner,
.store-footer > .container {
    background-color: #000000 !important;
}

.store-footer__inner {
    padding: 72px 0 54px !important;
    border-bottom: 1px solid rgba(255,255,255,.09) !important;
}

.store-footer__inner > .container {
    align-items: start !important;
    column-gap: 44px !important;
    row-gap: 36px !important;
}

.store-footer h3,
.store-footer .s-contacts-title {
    margin: 0 0 22px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    letter-spacing: .08em !important;
}

/* Brand mark: remove the MEROS word and show the symbol only */
.store-footer__inner > .container > div:first-child > a {
    width: 74px !important;
    height: 74px !important;
    margin: 0 0 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 20px !important;
    background: #050505 !important;
    box-shadow: 0 0 0 1px rgba(177,232,255,.03), 0 16px 50px rgba(165,205,255,.07) !important;
}

.store-footer__inner > .container > div:first-child > a h3 {
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23fff'%3E%3Cpath d='M50 46C39 41 36 26 42 11C55 18 60 34 50 46Z'/%3E%3Cpath d='M50 46C39 41 36 26 42 11C55 18 60 34 50 46Z' transform='rotate(45 50 50)'/%3E%3Cpath d='M50 46C39 41 36 26 42 11C55 18 60 34 50 46Z' transform='rotate(90 50 50)'/%3E%3Cpath d='M50 46C39 41 36 26 42 11C55 18 60 34 50 46Z' transform='rotate(135 50 50)'/%3E%3Cpath d='M50 46C39 41 36 26 42 11C55 18 60 34 50 46Z' transform='rotate(180 50 50)'/%3E%3Cpath d='M50 46C39 41 36 26 42 11C55 18 60 34 50 46Z' transform='rotate(225 50 50)'/%3E%3Cpath d='M50 46C39 41 36 26 42 11C55 18 60 34 50 46Z' transform='rotate(270 50 50)'/%3E%3Cpath d='M50 46C39 41 36 26 42 11C55 18 60 34 50 46Z' transform='rotate(315 50 50)'/%3E%3C/g%3E%3Ccircle cx='50' cy='50' r='8' fill='%23000'/%3E%3C/svg%3E") !important;
    filter: drop-shadow(0 0 11px rgba(203,225,255,.22)) !important;
}

.store-footer__inner > .container > div:first-child > .max-w-sm {
    max-width: 390px !important;
    margin-bottom: 28px !important;
    color: #8f8f95 !important;
    font-size: 14px !important;
    line-height: 2 !important;
}

.store-footer .s-menu-footer-list {
    display: grid !important;
    gap: 4px !important;
}

.store-footer .s-menu-footer-item,
.store-footer .s-contacts-item {
    width: fit-content !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    color: #9b9ba1 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    transition: color .25s ease, transform .25s ease !important;
}

.store-footer .s-menu-footer-item:hover,
.store-footer .s-contacts-item:hover {
    color: #ffffff !important;
    transform: translateX(-4px) !important;
}

.store-footer .s-contacts-list {
    gap: 8px !important;
}

.store-footer .s-contacts-icon {
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-inline-end: 10px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
}

.store-footer .s-contacts-icon svg {
    width: 14px !important;
    height: 14px !important;
    fill: currentColor !important;
}

.store-footer .s-social-list {
    gap: 10px !important;
}

.store-footer .s-social-link a {
    width: 38px !important;
    height: 38px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    border-radius: 50% !important;
    color: #ffffff !important;
    background: #050505 !important;
    transition: border-color .25s ease, background .25s ease, transform .25s ease !important;
}

.store-footer .s-social-link a:hover {
    border-color: rgba(210,225,255,.6) !important;
    background: #101014 !important;
    transform: translateY(-3px) !important;
}

.store-footer .s-social-icon svg {
    width: 16px !important;
    height: 16px !important;
    fill: currentColor !important;
}

.store-footer .s-trust-badges-wrapper {
    padding: 12px 14px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 14px !important;
    background: #050505 !important;
}

.store-footer .s-trust-badges-image {
    width: 38px !important;
    height: 38px !important;
    object-fit: contain !important;
}

.store-footer .s-trust-badges-label {
    color: #7f7f85 !important;
    font-size: 11px !important;
}

.store-footer .s-trust-badges-number {
    color: #ffffff !important;
    font-size: 12px !important;
}

.store-footer > .container {
    min-height: 82px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

.store-footer .copyright-text,
.store-footer .copyright-text p {
    color: #717177 !important;
    font-size: 11px !important;
    letter-spacing: .02em !important;
}

.store-footer .copyright-text a {
    display: none !important;
}

.store-footer .s-payments-list {
    gap: 7px !important;
}

.store-footer .s-payments-list-item {
    height: 28px !important;
    min-width: 43px !important;
    padding: 4px 7px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 7px !important;
    background: #ffffff !important;
    opacity: .88 !important;
}

/* ---------- Mobile header: smaller and better spaced ---------- */
@media (max-width: 767px) {
    #mainnav,
    #mainnav .inner {
        height: 60px !important;
        min-height: 60px !important;
    }

    #mainnav .container {
        padding-inline: 12px !important;
    }

    #mainnav .container > .flex {
        height: 60px !important;
        min-height: 60px !important;
        align-items: center !important;
    }

    #mainnav [data-testid="store-header-logo"] {
        width: 104px !important;
        max-width: 104px !important;
    }

    #mainnav [data-testid="store-header-logo"] img {
        width: 104px !important;
        height: auto !important;
        max-height: 25px !important;
        object-fit: contain !important;
    }

    #mainnav [data-testid="store-header-mobile-toggle"] {
        width: 30px !important;
        height: 30px !important;
        margin: 0 !important;
        display: grid !important;
        place-items: center !important;
    }

    #mainnav [data-testid="store-header-mobile-toggle"] i {
        font-size: 20px !important;
    }

    #mainnav .container > .flex > div:last-child {
        height: 34px !important;
        margin: 0 !important;
        gap: 10px !important;
        align-items: center !important;
    }

    #mainnav [data-testid="store-header-user-menu"] {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !important;
    }

    #mainnav [data-testid="store-header-user-menu"] .s-user-menu-login-btn,
    #mainnav [data-testid="store-header-user-menu"] button {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        min-height: 30px !important;
        padding: 5px !important;
        display: grid !important;
        place-items: center !important;
    }

    #mainnav [data-testid="store-header-user-menu"] svg {
        width: 19px !important;
        height: 19px !important;
    }

    #mainnav [data-testid="store-header-cart"] {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !important;
        margin: 0 !important;
    }

    #mainnav [data-testid="store-header-cart"] .s-cart-summary-wrapper {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        padding: 0 !important;
        display: grid !important;
        place-items: center !important;
    }

    #mainnav [data-testid="store-header-cart"] #s-cart-icon,
    #mainnav [data-testid="store-header-cart"] .header-btn__icon {
        width: 20px !important;
        height: 20px !important;
        font-size: 20px !important;
        line-height: 20px !important;
    }

    #mainnav [data-testid="store-header-cart"] .s-cart-summary-content {
        display: none !important;
    }

    #mainnav [data-testid="store-header-cart"] .s-cart-summary-count {
        top: -3px !important;
        right: -4px !important;
        min-width: 15px !important;
        height: 15px !important;
        padding: 0 3px !important;
        font-size: 9px !important;
        line-height: 15px !important;
    }

    .store-footer__inner {
        padding: 46px 0 34px !important;
    }

    .store-footer__inner > .container {
        row-gap: 30px !important;
    }

    .store-footer__inner > .container > div:first-child > a {
        width: 64px !important;
        height: 64px !important;
        margin-bottom: 20px !important;
        border-radius: 17px !important;
    }

    .store-footer__inner > .container > div:first-child > a h3 {
        width: 42px !important;
        height: 42px !important;
    }

    .store-footer__inner > .container > div:first-child > .max-w-sm {
        margin-bottom: 22px !important;
        font-size: 13px !important;
        line-height: 1.9 !important;
    }

    .store-footer h3,
    .store-footer .s-contacts-title {
        margin-bottom: 16px !important;
    }

    .store-footer > .container {
        min-height: 0 !important;
        padding-top: 20px !important;
        padding-bottom: 22px !important;
        gap: 14px !important;
    }
}


/* MEROS — enforce compact cart host dimensions on mobile */
@media (max-width: 767px) {
    #mainnav salla-cart-summary[data-testid="store-header-cart"] {
        width: 30px !important;
        min-width: 30px !important;
        max-width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        max-height: 30px !important;
        overflow: visible !important;
    }
}


/* =========================================================
   MEROS — FOOTER / SURFER CORRECTION
   ========================================================= */

/* Use the original MEROS symbol from the approved brand logo */
.store-footer__inner > .container > div:first-child > a h3 {
    background-image: url("https://cdn.files.salla.network/other/842394365/dae88cf5-6f6c-44db-a5d3-a5f9afafaf8e-original.webp") !important;
    background-size: auto 100% !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    filter: none !important;
}

/* Tighter informational links */
.store-footer .s-menu-footer-list {
    gap: 0 !important;
    row-gap: 0 !important;
}

.store-footer .s-menu-footer-item {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 4px 0 !important;
    line-height: 1.5 !important;
}

.store-footer h3,
.store-footer .s-contacts-title {
    margin-bottom: 14px !important;
}

.store-footer__inner {
    padding-top: 52px !important;
    padding-bottom: 40px !important;
}

.store-footer__inner > .container {
    row-gap: 24px !important;
}

.store-footer__inner > .container > div:first-child > .max-w-sm {
    margin-bottom: 20px !important;
    line-height: 1.75 !important;
}

.store-footer .s-contacts-list {
    gap: 2px !important;
}


.store-footer {
    position: relative !important;
    z-index: 5 !important;
    isolation: isolate !important;
}

@media (max-width: 767px) {
  
    .store-footer__inner {
        padding-top: 36px !important;
        padding-bottom: 26px !important;
    }

    .store-footer__inner > .container {
        row-gap: 20px !important;
    }

    .store-footer .s-menu-footer-item {
        padding: 3px 0 !important;
        font-size: 12px !important;
    }

    .store-footer__inner > .container > div:first-child > .max-w-sm {
        margin-bottom: 16px !important;
        line-height: 1.7 !important;
    }
}

@media (max-width: 767px) {

.store-footer__inner {
    padding-top: 36px !important;
    padding-bottom: 30px !important;
}

    .store-footer__inner {
        padding-top: 28px !important;
        padding-bottom: 20px !important;
    }

    .store-footer__inner > .container {
        row-gap: 16px !important;
    }

    .store-footer__inner > .container > div:first-child > a {
        width: 56px !important;
        height: 56px !important;
        margin-bottom: 14px !important;
        border-radius: 15px !important;
    }

    .store-footer__inner > .container > div:first-child > a h3 {
        width: 36px !important;
        height: 36px !important;
    }

    .store-footer__inner > .container > div:first-child > .max-w-sm {
        margin-bottom: 12px !important;
        line-height: 1.6 !important;
    }

    .store-footer h3,
    .store-footer .s-contacts-title {
        margin-bottom: 10px !important;
    }

    .store-footer > .container {
        padding-top: 14px !important;
        padding-bottom: 16px !important;
    }
}

/* MEROS — animated footer mark */
.store-footer__inner > .container > div:first-child > a h3 {
  background-image: url("https://res.cloudinary.com/ffmyxgav/image/upload/v1789251256/ezgif-4fab21659bec082c.gif") !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
/* MEROS — Compact add-to-cart button on mobile */
@media (max-width: 767px) {

  salla-product-card .s-product-card-add-button,
  salla-product-card .s-button-element,
  salla-product-card salla-add-product-button,
  .s-product-card-entry .s-product-card-add-button,
  .s-product-card-entry .s-button-element {
    width: 100% !important;
    min-width: 0 !important;

    height: 38px !important;
    min-height: 38px !important;

    padding-left: 7px !important;
    padding-right: 7px !important;

    font-size: 11px !important;
    line-height: 1 !important;

    gap: 4px !important;
    border-radius: 10px !important;
  }

  salla-product-card .s-product-card-add-button span,
  salla-product-card .s-button-text,
  .s-product-card-entry .s-button-text {
    font-size: 11px !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }

  salla-product-card .s-product-card-add-button svg,
  salla-product-card .s-product-card-add-button i,
  salla-product-card .s-button-element svg,
  salla-product-card .s-button-element i {
    width: 14px !important;
    height: 14px !important;
    font-size: 14px !important;
    margin: 0 !important;
  }
}
/* =========================================================
   MEROS — FORCE NORMAL ARABIC FOR PRODUCT NAMES
   FINAL OVERRIDE
   ========================================================= */

html[dir="rtl"] salla-product-card :is(
  .s-product-card-content-title,
  .s-product-card-content-title *,
  .s-product-card-entry__title,
  .s-product-card-entry__title *,
  .product-title,
  .product-title *,
  .product-name,
  .product-name *
),

html[dir="rtl"] .s-product-card-entry :is(
  h2,
  h2 *,
  h3,
  h3 *,
  h4,
  h4 *,
  .s-product-card-content-title,
  .s-product-card-content-title *
),

html[dir="rtl"] :is(
  [class*="product-card"] h2,
  [class*="product-card"] h2 *,
  [class*="product-card"] h3,
  [class*="product-card"] h3 *,
  [class*="product-card"] h4,
  [class*="product-card"] h4 *,
  [class*="product-card"][class*="title"],
  [class*="product-card"] [class*="title"]
) {
  font-feature-settings:
    "rlig" 1,
    "liga" 1,
    "calt" 1,
    "kern" 1,

    "salt" 0,
    "swsh" 0,
    "cswh" 0,
    "dlig" 0,

    "ss01" 0,
    "ss02" 0,
    "ss03" 0,
    "ss04" 0,
    "ss05" 0,
    "ss06" 0,
    "ss07" 0,
    "ss08" 0,
    "ss09" 0,
    "ss10" 0 !important;

  -webkit-font-feature-settings:
    "rlig" 1,
    "liga" 1,
    "calt" 1,
    "kern" 1,

    "salt" 0,
    "swsh" 0,
    "cswh" 0,
    "dlig" 0,

    "ss01" 0,
    "ss02" 0,
    "ss03" 0,
    "ss04" 0,
    "ss05" 0,
    "ss06" 0,
    "ss07" 0,
    "ss08" 0,
    "ss09" 0,
    "ss10" 0 !important;

  font-variant-ligatures:
    common-ligatures
    contextual !important;

  letter-spacing: 0 !important;
  word-spacing: normal !important;

  text-align: right !important;
  text-align-last: right !important;

  font-stretch: normal !important;
}
/* =========================================================
   MEROS — HEADER PROFILE + CART CLEANUP
   Remove circles + force correct icon colors
   ========================================================= */


/* ---------------------------------------------------------
   01 — REMOVE CIRCLES / BACKGROUNDS
   --------------------------------------------------------- */

#mainnav [data-testid="store-header-user-menu"],
#mainnav [data-testid="store-header-cart"],

#mainnav [data-testid="store-header-user-menu"] button,
#mainnav [data-testid="store-header-user-menu"] .s-user-menu-login-btn,
#mainnav [data-testid="store-header-user-menu"] .s-user-menu-trigger,

#mainnav [data-testid="store-header-cart"] .s-cart-summary-wrapper,

#mainnav .header-btn__icon {
    background: transparent !important;

    border: 0 !important;
    border-width: 0 !important;
    border-color: transparent !important;

    box-shadow: none !important;
    outline: none !important;

    border-radius: 0 !important;
}


/* إزالة أي خلفية داخلية قد يضيفها رائد */

#mainnav [data-testid="store-header-user-menu"] button::before,
#mainnav [data-testid="store-header-user-menu"] button::after,
#mainnav [data-testid="store-header-cart"] .s-cart-summary-wrapper::before,
#mainnav [data-testid="store-header-cart"] .s-cart-summary-wrapper::after,
#mainnav .header-btn__icon::before,
#mainnav .header-btn__icon::after {
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}


/* ---------------------------------------------------------
   02 — NORMAL BLACK HEADER
   PROFILE + CART = WHITE
   --------------------------------------------------------- */

#mainnav:not(.fixed-pinned):not(.fixed-header)
[data-testid="store-header-user-menu"],

#mainnav:not(.fixed-pinned):not(.fixed-header)
[data-testid="store-header-user-menu"] button,

#mainnav:not(.fixed-pinned):not(.fixed-header)
[data-testid="store-header-user-menu"] i,

#mainnav:not(.fixed-pinned):not(.fixed-header)
[data-testid="store-header-cart"],

#mainnav:not(.fixed-pinned):not(.fixed-header)
[data-testid="store-header-cart"] i,

#mainnav:not(.fixed-pinned):not(.fixed-header)
.header-btn__icon {
    color: #ffffff !important;
}


/* أهم إصلاح لأيقونة البروفايل SVG */

#mainnav:not(.fixed-pinned):not(.fixed-header)
[data-testid="store-header-user-menu"] svg {
    color: #ffffff !important;

    filter:
        brightness(0)
        invert(1) !important;
}


/* Cart SVG إن وجد */

#mainnav:not(.fixed-pinned):not(.fixed-header)
[data-testid="store-header-cart"] svg {
    color: #ffffff !important;

    filter:
        brightness(0)
        invert(1) !important;
}


/* ---------------------------------------------------------
   03 — GLASS / SCROLLED HEADER
   PROFILE + CART = BLACK
   --------------------------------------------------------- */

#mainnav.fixed-pinned
[data-testid="store-header-user-menu"],

#mainnav.fixed-header
[data-testid="store-header-user-menu"],

#mainnav.fixed-pinned
[data-testid="store-header-user-menu"] button,

#mainnav.fixed-header
[data-testid="store-header-user-menu"] button,

#mainnav.fixed-pinned
[data-testid="store-header-user-menu"] i,

#mainnav.fixed-header
[data-testid="store-header-user-menu"] i,

#mainnav.fixed-pinned
[data-testid="store-header-cart"],

#mainnav.fixed-header
[data-testid="store-header-cart"],

#mainnav.fixed-pinned
[data-testid="store-header-cart"] i,

#mainnav.fixed-header
[data-testid="store-header-cart"] i,

#mainnav.fixed-pinned .header-btn__icon,
#mainnav.fixed-header .header-btn__icon {
    color: #070707 !important;
}


/* SVG profile — black on glass */

#mainnav.fixed-pinned
[data-testid="store-header-user-menu"] svg,

#mainnav.fixed-header
[data-testid="store-header-user-menu"] svg {
    color: #070707 !important;

    filter:
        brightness(0)
        saturate(100%) !important;
}


/* SVG cart — black on glass */

#mainnav.fixed-pinned
[data-testid="store-header-cart"] svg,

#mainnav.fixed-header
[data-testid="store-header-cart"] svg {
    color: #070707 !important;

    filter:
        brightness(0)
        saturate(100%) !important;
}


/* ---------------------------------------------------------
   04 — KEEP MOBILE ICONS CLEAN + COMPACT
   --------------------------------------------------------- */

@media (max-width: 767px) {

    #mainnav [data-testid="store-header-user-menu"] button,
    #mainnav [data-testid="store-header-user-menu"] .s-user-menu-login-btn,
    #mainnav [data-testid="store-header-user-menu"] .s-user-menu-trigger,
    #mainnav [data-testid="store-header-cart"] .s-cart-summary-wrapper {

        background: transparent !important;

        border: none !important;
        box-shadow: none !important;

        width: 30px !important;
        height: 30px !important;

        min-width: 30px !important;
        min-height: 30px !important;

        padding: 4px !important;
    }


    #mainnav [data-testid="store-header-user-menu"] svg,
    #mainnav [data-testid="store-header-cart"] svg {

        width: 20px !important;
        height: 20px !important;
    }
}
/* =========================================================
   MEROS — GLOBAL WARM IVORY STOREFRONT
   Background: #F7F4EE
   ========================================================= */

:root {
    --meros-ivory: #F7F4EE;
}


/* =========================================================
   01 — PAGE ROOT
   ========================================================= */

html,
body {
    background-color: var(--meros-ivory) !important;
}


/* =========================================================
   02 — MAIN SALLA PAGE WRAPPERS
   ========================================================= */

#app,
.app-inner,
.store-home,
.page-wrapper,
main,
main#main-content,
.main-content,
.content,
.page-container {
    background-color: var(--meros-ivory) !important;
}


/* =========================================================
   03 — HOMEPAGE / SALLA BLOCK AREA
   نجعل الأقسام العادية شفافة حتى يظهر العاجي خلفها
   ========================================================= */

main .s-block,
.store-home .s-block,
main .home-block {
    background-color: transparent !important;
}


/* الحاويات الداخلية لا تعيد الخلفية البيضاء */

main .s-block > .container,
.store-home .s-block > .container,
main .home-block > .container {
    background-color: transparent !important;
}


/* =========================================================
   04 — COMMON PAGE BACKGROUNDS
   صفحات المنتجات / التصنيفات / البحث وغيرها
   ========================================================= */

body.product-single,
body.products-list,
body.category-page,
body.search-page,
body.cart-page,
body.profile-page,

.products-page,
.category-page,
.search-page,
.product-page,
.product-details,
.products-container,
.category-container {
    background-color: var(--meros-ivory) !important;
}


/* =========================================================
   05 — GENERAL SALLA CONTENT WRAPPERS
   ========================================================= */

.container-fluid,
.page-content,
.content-wrapper,
.main-wrapper {
    background-color: transparent !important;
}


/* =========================================================
   06 — DO NOT CHANGE PRODUCT CARDS
   البطاقات تحتفظ بتصميمها الخاص
   ========================================================= */

.s-product-card-entry,
salla-product-card,
.product-card,
[class*="product-card"] {
    /* intentionally untouched */
}


/* =========================================================
   07 — KEEP HEADER INDEPENDENT
   لا تجعل اللون العاجي يتدخل في الهيدر
   ========================================================= */

#mainnav {
    background-color: #000000 !important;
}

#mainnav .inner {
    background-color: #000000 !important;
}


/* الحالة الزجاجية تبقى كما هي في كودك الحالي */

#mainnav.fixed-pinned .inner,
#mainnav.fixed-header .inner {
    background:
        rgba(248, 248, 246, 0.61) !important;
}


/* =========================================================
   08 — KEEP FOOTER BLACK
   ========================================================= */

.store-footer,
.store-footer__inner,
.store-footer > .container,
.store-footer__inner > .container {
    background-color: #000000 !important;
}


/* =========================================================
   09 — CUSTOM HERO
   لا نفرض العاجي على محتوى الهيرو الداخلي
   ========================================================= */

.s-block--bundle-clean-hero {
    background-color: var(--meros-ivory) !important;
}


/* =========================================================
   10 — COLLECTION SURFER
   الخلفية الخارجية عاجية، لكن محتوى العنصر يبقى كما صُمم
   ========================================================= */

.s-block--bundle-collection-surfer {
    background-color: var(--meros-ivory) !important;
}


/* =========================================================
   11 — REMOVE ACCIDENTAL WHITE GAPS BETWEEN SECTIONS
   ========================================================= */

main > section,
main > .s-block,
.store-home > section,
.store-home > .s-block {
    border-color: transparent;
}


/* =========================================================
   12 — MOBILE
   ========================================================= */

@media (max-width: 767px) {

    html,
    body,
    #app,
    .app-inner,
    main,
    .store-home,
    .page-wrapper {
        background-color: var(--meros-ivory) !important;
    }

}


/* =========================================================
   13 — FALLBACK
   يمنع ظهور الأبيض في المساحات الفارغة بين الأقسام
   ========================================================= */

body::before {
    background-color: var(--meros-ivory) !important;
}
/* =========================================================
   MEROS — PREMIUM FROSTED GLASS PRODUCT CARDS
   Ivory Glass + Animated Luminous Edge
   ========================================================= */

:root {
    --meros-card-radius: 22px;
    --meros-glass-bg: rgba(255,255,255,.34);
    --meros-glass-border: rgba(255,255,255,.62);
}


/* =========================================================
   01 — MAIN PRODUCT CARD
   ========================================================= */

.s-product-card-entry {
    position: relative !important;
    isolation: isolate !important;

    overflow: hidden !important;

    border-radius: var(--meros-card-radius) !important;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.46) 0%,
            rgba(255,255,255,.25) 42%,
            rgba(245,243,239,.18) 100%
        ) !important;

    border:
        1px solid rgba(255,255,255,.58) !important;

    -webkit-backdrop-filter:
        blur(22px)
        saturate(145%)
        contrast(102%) !important;

    backdrop-filter:
        blur(22px)
        saturate(145%)
        contrast(102%) !important;

    box-shadow:
        0 12px 35px rgba(20,20,20,.055),
        inset 0 1px 0 rgba(255,255,255,.78),
        inset 0 -1px 0 rgba(255,255,255,.20) !important;

    transition:
        transform .45s cubic-bezier(.22,.61,.36,1),
        box-shadow .45s ease,
        border-color .45s ease !important;
}


/* =========================================================
   02 — PEARL GLASS LIGHT INSIDE CARD
   ========================================================= */

.s-product-card-entry::after {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: -1 !important;
    pointer-events: none !important;

    border-radius: inherit !important;

    background:

        radial-gradient(
            circle at 12% 5%,
            rgba(255,255,255,.72) 0%,
            rgba(255,255,255,.18) 25%,
            transparent 46%
        ),

        radial-gradient(
            circle at 92% 82%,
            rgba(190,226,236,.12) 0%,
            transparent 38%
        ),

        radial-gradient(
            circle at 55% 115%,
            rgba(218,200,235,.12) 0%,
            transparent 42%
        ) !important;

    opacity: .9 !important;
}


/* =========================================================
   03 — ANIMATED GLASS EDGE
   ========================================================= */

.s-product-card-entry::before {
    content: "" !important;

    position: absolute !important;
    inset: 0 !important;

    z-index: 5 !important;
    pointer-events: none !important;

    border-radius: inherit !important;

    padding: 1.25px !important;

    background:
        conic-gradient(
            from 0deg,
            rgba(255,255,255,.10),
            rgba(177,232,255,.70),
            rgba(213,196,244,.72),
            rgba(255,218,231,.56),
            rgba(184,239,226,.66),
            rgba(255,255,255,.16),
            rgba(177,232,255,.70)
        ) !important;

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0) !important;

    -webkit-mask-composite: xor !important;

    mask-composite: exclude !important;

    opacity: .50 !important;

    animation:
        merosGlassEdge 8s linear infinite !important;
}


/* =========================================================
   04 — MOVING LIGHT REFLECTION
   ========================================================= */

.s-product-card-entry .s-product-card-image::after {
    content: "" !important;

    position: absolute !important;

    top: -30% !important;
    bottom: -30% !important;

    left: -75% !important;
    width: 38% !important;

    z-index: 4 !important;

    pointer-events: none !important;

    transform:
        skewX(-18deg)
        translateX(0) !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.03) 20%,
            rgba(255,255,255,.34) 50%,
            rgba(255,255,255,.06) 76%,
            transparent 100%
        ) !important;

    filter: blur(3px) !important;

    animation:
        merosGlassSweep 7s
        cubic-bezier(.55,.05,.25,1)
        infinite !important;
}


/* =========================================================
   05 — IMAGE AREA
   ========================================================= */

.s-product-card-entry .s-product-card-image {
    position: relative !important;

    overflow: hidden !important;

    background:
        rgba(255,255,255,.14) !important;

    border-radius:
        calc(var(--meros-card-radius) - 2px)
        calc(var(--meros-card-radius) - 2px)
        14px
        14px !important;
}


.s-product-card-entry .s-product-card-image img {
    transition:
        transform .55s cubic-bezier(.22,.61,.36,1),
        filter .45s ease !important;
}


/* =========================================================
   06 — PRODUCT CONTENT
   ========================================================= */

.s-product-card-entry .s-product-card-content {
    position: relative !important;
    z-index: 2 !important;

    background: transparent !important;
}


/* =========================================================
   07 — TITLE
   ========================================================= */

.s-product-card-entry .s-product-card-content-title,
.s-product-card-entry .s-product-card-content-title a {
    color: #151515 !important;
}


/* =========================================================
   08 — PRICE
   ========================================================= */

.s-product-card-entry .s-product-card-price {
    color: #080808 !important;
}


/* =========================================================
   09 — ADD TO CART BUTTON
   Glass button inside glass card
   ========================================================= */

.s-product-card-entry .s-product-card-add-button,
.s-product-card-entry .s-button-element {
    border:
        1px solid rgba(255,255,255,.62) !important;

    background:
        rgba(255,255,255,.40) !important;

    color: #0b0b0b !important;

    -webkit-backdrop-filter:
        blur(16px)
        saturate(140%) !important;

    backdrop-filter:
        blur(16px)
        saturate(140%) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.70),
        0 5px 18px rgba(0,0,0,.04) !important;

    transition:
        background .3s ease,
        border-color .3s ease,
        transform .3s ease !important;
}


.s-product-card-entry .s-product-card-add-button:hover,
.s-product-card-entry .s-button-element:hover {
    background:
        rgba(255,255,255,.62) !important;

    border-color:
        rgba(255,255,255,.92) !important;

    transform:
        translateY(-1px) !important;
}


/* =========================================================
   10 — DESKTOP HOVER
   ========================================================= */

@media (hover:hover) and (min-width: 768px) {

    .s-product-card-entry:hover {
        transform:
            translateY(-5px) !important;

        border-color:
            rgba(255,255,255,.82) !important;

        box-shadow:
            0 22px 55px rgba(20,20,20,.085),
            inset 0 1px 0 rgba(255,255,255,.90),
            inset 0 -1px 0 rgba(255,255,255,.24) !important;
    }

    .s-product-card-entry:hover::before {
        opacity: .86 !important;
    }

    .s-product-card-entry:hover .s-product-card-image img {
        transform:
            scale(1.018) !important;
    }
}


/* =========================================================
   11 — MOBILE
   أخف حتى لا تصبح البطاقات مبالغًا فيها
   ========================================================= */

@media (max-width: 767px) {

    .s-product-card-entry {
        --meros-card-radius: 16px;

        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.40),
                rgba(255,255,255,.20)
            ) !important;

        -webkit-backdrop-filter:
            blur(16px)
            saturate(135%) !important;

        backdrop-filter:
            blur(16px)
            saturate(135%) !important;

        box-shadow:
            0 7px 24px rgba(15,15,15,.055),
            inset 0 1px 0 rgba(255,255,255,.66) !important;
    }


    .s-product-card-entry::before {
        padding: 1px !important;
        opacity: .48 !important;
    }


    .s-product-card-entry .s-product-card-add-button,
    .s-product-card-entry .s-button-element {
        background:
            rgba(255,255,255,.38) !important;
    }
}


/* =========================================================
   12 — ANIMATIONS
   ========================================================= */

@keyframes merosGlassEdge {

    0% {
        filter:
            hue-rotate(0deg)
            brightness(1);
    }

    50% {
        filter:
            hue-rotate(18deg)
            brightness(1.12);
    }

    100% {
        filter:
            hue-rotate(0deg)
            brightness(1);
    }
}


@keyframes merosGlassSweep {

    0%,
    18% {
        left: -75%;
        opacity: 0;
    }

    26% {
        opacity: .8;
    }

    48% {
        left: 145%;
        opacity: 0;
    }

    100% {
        left: 145%;
        opacity: 0;
    }
}


/* =========================================================
   13 — ACCESSIBILITY / REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .s-product-card-entry::before,
    .s-product-card-entry .s-product-card-image::after {
        animation: none !important;
    }

}
/* =========================================================
   MEROS — PRODUCT PAGE GLASS SYSTEM
   Apply glass styling to product details page elements
   ========================================================= */

:root {
  --meros-glass-bg: rgba(255, 255, 255, 0.34);
  --meros-glass-bg-soft: rgba(255, 255, 255, 0.22);
  --meros-glass-border: rgba(255, 255, 255, 0.60);
  --meros-glass-shadow: 0 14px 38px rgba(15, 15, 15, 0.06);
  --meros-glass-radius: 22px;
}


/* =========================================================
   01 — MAIN PRODUCT DETAILS PANEL
   ========================================================= */

.product-details,
.product-single,
.product-single .container,
.product-page,
.product-page .container {
  background: transparent !important;
}

.product-single .product-details,
.product-page .product-details,
.product-single__info,
.product-single .product-form,
.product-form,
.product-info,
.product-entry__content,
.s-product-details-main,
.s-product-details-section,
.product-details__content {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.42) 0%,
    rgba(255,255,255,0.26) 45%,
    rgba(245,243,239,0.18) 100%
  ) !important;

  border: 1px solid var(--meros-glass-border) !important;
  border-radius: var(--meros-glass-radius) !important;

  -webkit-backdrop-filter: blur(20px) saturate(145%) !important;
  backdrop-filter: blur(20px) saturate(145%) !important;

  box-shadow:
    var(--meros-glass-shadow),
    inset 0 1px 0 rgba(255,255,255,0.78),
    inset 0 -1px 0 rgba(255,255,255,0.18) !important;

  overflow: hidden !important;
}


/* =========================================================
   02 — PRODUCT TITLE / PRICE / META
   ========================================================= */

.product-title,
.product-title *,
.product-entry__title,
.product-entry__title *,
.s-product-details-title,
.s-product-details-title *,
.product-price,
.price-wrapper,
.s-product-price,
.product-formatted-price {
  color: #121212 !important;
}


/* =========================================================
   03 — OPTIONS / VARIANTS / SIZE SELECTORS
   ========================================================= */

.product-form select,
.product-form option,
.product-form .form-control,
.product-form .s-form-control,
.product-form .choices,
.product-form .choices__inner,
.product-form .dropdown-menu,
.product-form .option-item,
.product-form .variant-option,
.product-form .radio-label,
.product-form .btn-quantity,
.product-form .quantity-input,
.product-form input[type="number"],
.product-form input[type="text"] {
  background: rgba(255,255,255,0.34) !important;
  border: 1px solid rgba(255,255,255,0.62) !important;
  color: #111 !important;
  border-radius: 14px !important;

  -webkit-backdrop-filter: blur(14px) saturate(135%) !important;
  backdrop-filter: blur(14px) saturate(135%) !important;

  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65) !important;
}


/* =========================================================
   04 — ADD TO CART AREA
   ========================================================= */

.product-form .s-button-element,
.product-form .btn--add-to-cart,
.product-form .add-to-cart-btn,
.product-form button[type="submit"],
.product-form .s-product-card-add-button {
  background: rgba(255,255,255,0.42) !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  color: #0f0f0f !important;
  border-radius: 16px !important;

  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 7px 22px rgba(0,0,0,0.04) !important;

  transition:
    background .3s ease,
    border-color .3s ease,
    transform .25s ease !important;
}

.product-form .s-button-element:hover,
.product-form .btn--add-to-cart:hover,
.product-form .add-to-cart-btn:hover,
.product-form button[type="submit"]:hover,
.product-form .s-product-card-add-button:hover {
  background: rgba(255,255,255,0.60) !important;
  border-color: rgba(255,255,255,0.90) !important;
  transform: translateY(-1px) !important;
}


/* =========================================================
   05 — DESCRIPTION / SHIPPING / RETURN BLOCKS
   ========================================================= */

.product-tabs,
.product-tabs .tab-content,
.product-description,
.product-content,
.product-extra,
.product-specifications,
.product-reviews,
.accordion-item,
.accordion-body,
.accordion-button,
.s-product-details-block,
.s-product-info-block {
  background: linear-gradient(
    145deg,
    rgba(255,255,255,0.38),
    rgba(255,255,255,0.20)
  ) !important;

  border: 1px solid rgba(255,255,255,0.56) !important;
  border-radius: 18px !important;

  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
  backdrop-filter: blur(16px) saturate(135%) !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,0.04),
    inset 0 1px 0 rgba(255,255,255,0.68) !important;
}


/* =========================================================
   06 — MAIN PRODUCT IMAGE WRAPPER
   خفيف فقط — بدون إفراط
   ========================================================= */

.product-images,
.product-gallery,
.product-single__slider,
.s-product-slider,
.product-slider {
  background: rgba(255,255,255,0.14) !important;
  border: 1px solid rgba(255,255,255,0.38) !important;
  border-radius: 22px !important;

  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;

  box-shadow:
    0 10px 28px rgba(0,0,0,0.03),
    inset 0 1px 0 rgba(255,255,255,0.45) !important;
}


/* =========================================================
   07 — RECOMMENDED PRODUCTS BELOW
   ========================================================= */

.related-products,
.related-products .container,
.product-related,
.product-suggestions {
  background: transparent !important;
}


/* =========================================================
   08 — MOBILE
   أخف على الجوال
   ========================================================= */

@media (max-width: 767px) {

  .product-single .product-details,
  .product-page .product-details,
  .product-single__info,
  .product-single .product-form,
  .product-form,
  .product-info,
  .s-product-details-main,
  .s-product-details-section,
  .product-details__content {
    border-radius: 16px !important;

    -webkit-backdrop-filter: blur(15px) saturate(130%) !important;
    backdrop-filter: blur(15px) saturate(130%) !important;

    box-shadow:
      0 8px 24px rgba(0,0,0,0.045),
      inset 0 1px 0 rgba(255,255,255,0.62) !important;
  }

  .product-tabs,
  .product-description,
  .product-content,
  .product-extra,
  .product-specifications,
  .product-reviews,
  .accordion-item,
  .accordion-body,
  .accordion-button {
    border-radius: 14px !important;
  }

  .product-form .s-button-element,
  .product-form .btn--add-to-cart,
  .product-form .add-to-cart-btn,
  .product-form button[type="submit"] {
    border-radius: 14px !important;
  }
}


/* =========================================================
   09 — REDUCED MOTION SAFE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .product-form .s-button-element,
  .product-form .btn--add-to-cart,
  .product-form .add-to-cart-btn,
  .product-form button[type="submit"] {
    transition: none !important;
  }
}

/* MEROS — animated signature footer wordmark */
@font-face {
  font-family: "Meros Signature";
  src: url("https://www.componentry.fun/LastoriaBoldRegular.otf") format("opentype");
  font-display: swap;
}

.store-footer__inner > .container > div:first-child > a h3 {
  background: none !important;
  width: 150px !important;
  height: 58px !important;
  margin: 0 auto 12px !important;
  position: relative !important;
  overflow: hidden !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 1 !important;
  direction: ltr !important;
}

.store-footer__inner > .container > div:first-child > a h3::after {
  content: "Meros" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  color: #ffffff !important;
  font-family: "Meros Signature", "Brush Script MT", cursive !important;
  font-size: 46px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
  transform: rotate(-3deg) !important;
  transform-origin: center !important;
  clip-path: inset(0 100% 0 0);
  animation: meros-signature-write 5.8s cubic-bezier(.65,0,.35,1) infinite;
  will-change: clip-path, opacity;
}

@keyframes meros-signature-write {
  0%, 8% { clip-path: inset(0 100% 0 0); opacity: 0; }
  10% { opacity: 1; }
  52%, 84% { clip-path: inset(0 0 0 0); opacity: 1; }
  96%, 100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@media (max-width: 767px) {
  .store-footer__inner > .container > div:first-child > a h3 {
    width: 128px !important;
    height: 50px !important;
    margin-bottom: 10px !important;
  }

  .store-footer__inner > .container > div:first-child > a h3::after {
    font-size: 40px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .store-footer__inner > .container > div:first-child > a h3::after {
    clip-path: inset(0 0 0 0);
    animation: none !important;
    opacity: 1 !important;
  }
}


/* MEROS — keep the signature canvas compact and unclipped */
.store-footer__inner > .container > div:first-child > a {
  display: block !important;
  width: 150px !important;
  margin: 0 auto !important;
}

.store-footer__inner > .container > div:first-child > a h3 {
  display: block !important;
  width: 150px !important;
  min-width: 150px !important;
  max-width: 150px !important;
  flex: 0 0 150px !important;
}

@media (max-width: 767px) {
  .store-footer__inner > .container > div:first-child > a,
  .store-footer__inner > .container > div:first-child > a h3 {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    flex-basis: 128px !important;
  }
}

/* MEROS — signature without a surrounding badge */
.store-footer__inner > .container > div:first-child > a,
.store-footer__inner > .container > div:first-child > a h3 {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  background-color: transparent !important;
}


/* MEROS — footer signature alignment and calmer timing */
.store-footer__inner > .container > div:first-child > a {
  margin: 0 0 0 auto !important;
}

.store-footer__inner > .container > div:first-child > a h3 {
  margin: 0 0 12px auto !important;
}

.store-footer__inner > .container > div:first-child > a h3::after {
  animation-duration: 8s !important;
}

/* MEROS — enhanced glass product cards */
.s-product-card-entry {
  border: 1px solid rgba(255,255,255,.82) !important;
  background: linear-gradient(145deg, rgba(255,255,255,.54) 0%, rgba(255,255,255,.28) 48%, rgba(241,240,248,.20) 100%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(1.55) !important;
  backdrop-filter: blur(26px) saturate(1.55) !important;
  box-shadow: 0 14px 42px rgba(17,24,39,.075), 0 0 24px rgba(186,222,236,.12), inset 0 1px 0 rgba(255,255,255,.94), inset 0 -1px 0 rgba(214,201,235,.34), inset 1px 0 0 rgba(198,232,240,.30), inset -1px 0 0 rgba(245,211,225,.26) !important;
  animation: meros-card-drift 7.8s ease-in-out infinite alternate !important;
  will-change: transform, box-shadow;
}

.s-product-card-entry:nth-of-type(2n) { animation-delay: -2.6s !important; }
.s-product-card-entry:nth-of-type(3n) { animation-delay: -5.1s !important; }

.s-product-card-entry::before {
  opacity: .72 !important;
  filter: blur(.55px) saturate(1.18);
  animation-duration: 12s !important;
}

.s-product-card-entry::after {
  opacity: 1 !important;
  background: radial-gradient(circle at 8% 4%, rgba(255,255,255,.82) 0%, rgba(255,255,255,.20) 24%, transparent 46%), radial-gradient(circle at 96% 76%, rgba(181,228,239,.18) 0%, transparent 38%), radial-gradient(circle at 48% 112%, rgba(219,199,238,.18) 0%, transparent 42%) !important;
}

@keyframes meros-card-drift {
  0% { transform: translate3d(0,0,0); }
  100% { transform: translate3d(0,-3px,0); }
}

/* MEROS — glass surfaces inside product details */
body.product-single .details-slider,
body.product-single .product__description,
body.product-single .product-form .s-product-options-option-container,
body.product-single .product-form > section {
  position: relative !important;
  border: 1px solid rgba(255,255,255,.84) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.34) 52%, rgba(239,242,247,.24) 100%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  box-shadow: 0 16px 44px rgba(17,24,39,.07), 0 0 28px rgba(184,224,235,.12), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(211,197,235,.32), inset 1px 0 0 rgba(190,230,240,.28), inset -1px 0 0 rgba(247,211,226,.24) !important;
  animation: meros-detail-surface-drift 9.2s ease-in-out infinite alternate !important;
  will-change: transform, box-shadow;
}

body.product-single .product__description {
  padding: 18px 20px !important;
}

body.product-single .product-form .s-product-options-option-container {
  padding: 16px !important;
  margin-bottom: 14px !important;
}

body.product-single .product-form > section {
  overflow: visible !important;
  margin-top: 12px !important;
}

body.product-single .product__description { animation-delay: -2.3s !important; }
body.product-single .product-form .s-product-options-option-container { animation-delay: -4.6s !important; }
body.product-single .product-form > section { animation-delay: -6.8s !important; }

@keyframes meros-detail-surface-drift {
  0% { transform: translate3d(0,0,0); box-shadow: 0 16px 44px rgba(17,24,39,.07), 0 0 24px rgba(184,224,235,.10), inset 0 1px 0 rgba(255,255,255,.96), inset 0 -1px 0 rgba(211,197,235,.28); }
  100% { transform: translate3d(0,-2px,0); box-shadow: 0 19px 48px rgba(17,24,39,.085), 0 0 32px rgba(211,197,235,.15), inset 0 1px 0 rgba(255,255,255,1), inset 0 -1px 0 rgba(184,224,235,.34); }
}

@media (max-width: 767px) {
  .s-product-card-entry {
    animation-duration: 9s !important;
  }

  body.product-single .details-slider,
  body.product-single .product__description,
  body.product-single .product-form .s-product-options-option-container,
  body.product-single .product-form > section {
    border-radius: 17px !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.42) !important;
    backdrop-filter: blur(20px) saturate(1.42) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .s-product-card-entry,
  body.product-single .details-slider,
  body.product-single .product__description,
  body.product-single .product-form .s-product-options-option-container,
  body.product-single .product-form > section {
    animation: none !important;
    transform: none !important;
  }
}

/* =========================================================
   MEROS — EDITORIAL PAGES SYSTEM (2026)
   About · Size guide · Shipping · Returns · Privacy · Terms · Contact
   ========================================================= */

body.page-single {
  --meros-ink:#050505;
  --meros-paper:#f7f4ee;
  --meros-line:rgba(5,5,5,.10);
  --meros-cyan:#9ff8f1;
  --meros-lilac:#cfc4ff;
  --meros-pink:#ffc7e8;
  --meros-blue:#b8d7ff;
  background:
    radial-gradient(circle at 8% 8%,rgba(159,248,241,.28),transparent 23rem),
    radial-gradient(circle at 92% 30%,rgba(207,196,255,.24),transparent 24rem),
    linear-gradient(180deg,#fbfaf7 0%,#f3f0ea 100%) !important;
}

body.page-single #main-content {
  position:relative;
  padding:clamp(18px,3vw,42px) 0 clamp(56px,8vw,110px) !important;
  overflow:hidden;
}
body.page-single #main-content:before,
body.page-single #main-content:after {
  content:"";
  position:absolute;
  border:1px solid rgba(5,5,5,.09);
  border-radius:50%;
  pointer-events:none;
}
body.page-single #main-content:before {width:360px;height:360px;top:80px;right:-220px;}
body.page-single #main-content:after {width:260px;height:260px;bottom:80px;left:-170px;}
body.page-single #main-content>.container {max-width:1240px !important;padding-inline:clamp(14px,3vw,32px) !important;}

body.page-single .breadcrumbs {
  width:max-content;
  max-width:100%;
  margin:0 0 16px auto !important;
  padding:8px 13px !important;
  border:1px solid rgba(5,5,5,.08);
  border-radius:999px;
  background:rgba(255,255,255,.56);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  font-size:11px !important;
}
body.page-single #main-content>.container>.flex {display:block !important;}
body.page-single .content.content--single-page {
  width:100% !important;
  max-width:1160px !important;
  margin-inline:auto !important;
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
body.page-single .content.content--single-page>h1 {display:none !important;}

body.page-single .content-entry {
  --meros-a:159,248,241;
  --meros-b:207,196,255;
  --meros-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 8v48M8 32h48M15 15l34 34M49 15 15 49' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
  position:relative;
  isolation:isolate;
}
body.page-single .content-entry>div {
  position:relative;
  overflow:hidden;
  padding:clamp(14px,2.4vw,28px) !important;
  border:1px solid rgba(255,255,255,.88);
  border-radius:34px;
  background:rgba(247,244,238,.73) !important;
  box-shadow:0 28px 80px rgba(24,19,35,.10),inset 0 0 0 1px rgba(5,5,5,.035);
  -webkit-backdrop-filter:blur(22px) saturate(1.12);
  backdrop-filter:blur(22px) saturate(1.12);
}
body.page-single .content-entry>div:before,
body.page-single .content-entry>div:after {
  content:"";
  position:absolute;
  z-index:-1;
  border-radius:50%;
  filter:blur(18px);
  opacity:.62;
  pointer-events:none;
  animation:merosPageGlow 12s ease-in-out infinite alternate;
}
body.page-single .content-entry>div:before {width:280px;height:280px;top:-150px;right:-90px;background:rgba(var(--meros-a),.56);}
body.page-single .content-entry>div:after {width:250px;height:250px;bottom:-160px;left:-80px;background:rgba(var(--meros-b),.48);animation-delay:-5s;}
body.page-single .content-entry>div>div {max-width:100% !important;margin:0 !important;position:relative;z-index:1;}

/* Dark editorial hero */
body.page-single .content-entry>div>div>div:first-child {
  position:relative;
  min-height:clamp(285px,33vw,390px);
  margin:0 0 clamp(18px,2.4vw,28px) !important;
  padding:clamp(32px,6vw,76px) clamp(24px,6vw,72px) !important;
  display:flex !important;
  flex-direction:column;
  justify-content:flex-end;
  align-items:flex-start;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.13);
  border-radius:28px;
  color:#fff !important;
  background:
    radial-gradient(circle at 78% 15%,rgba(var(--meros-a),.22),transparent 28%),
    radial-gradient(circle at 18% 95%,rgba(var(--meros-b),.18),transparent 34%),
    #050505 !important;
  box-shadow:0 22px 55px rgba(0,0,0,.18);
}
body.page-single .content-entry>div>div>div:first-child:before {
  content:"";
  position:absolute;
  width:240px;height:240px;
  top:-122px;left:-82px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:44% 56% 48% 52%;
  transform:rotate(24deg);
  pointer-events:none;
}
body.page-single .content-entry>div>div>div:first-child:after {
  content:"";
  position:absolute;
  top:clamp(24px,4vw,48px);
  left:clamp(24px,4vw,48px);
  width:clamp(58px,7vw,86px);
  height:clamp(58px,7vw,86px);
  border:1px solid rgba(255,255,255,.24);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(var(--meros-a),.95),rgba(var(--meros-b),.92));
  -webkit-mask:var(--meros-icon) center/54% 54% no-repeat,linear-gradient(#000 0 0);
  mask:var(--meros-icon) center/54% 54% no-repeat,linear-gradient(#000 0 0);
  box-shadow:0 12px 34px rgba(var(--meros-a),.14);
  opacity:.92;
}
body.page-single .content-entry>div>div>div:first-child>* {position:relative;z-index:2;color:inherit !important;max-width:740px;}
body.page-single .content-entry>div>div>div:first-child>div:first-child {
  width:max-content !important;
  padding:7px 12px !important;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.08) !important;
  color:rgba(255,255,255,.72) !important;
  font-size:10px !important;
  letter-spacing:.17em !important;
  line-height:1 !important;
}
body.page-single .content-entry h1 {
  margin:18px 0 12px !important;
  color:#fff !important;
  font-size:clamp(34px,5.4vw,68px) !important;
  font-weight:750 !important;
  line-height:1.16 !important;
  letter-spacing:-.035em;
}
body.page-single .content-entry>div>div>div:first-child p {margin:0 !important;color:rgba(255,255,255,.72) !important;font-size:clamp(14px,1.7vw,18px) !important;line-height:1.95 !important;}

/* Content cards and groups */
body.page-single .content-entry>div>div>div:not(:first-child) {
  position:relative;
  margin-top:clamp(12px,1.8vw,20px) !important;
  border-radius:22px;
}
body.page-single .content-entry>div>div>div:not(:first-child):not([style*="display:grid"]):not([style*="display: grid"]) {
  padding:clamp(22px,3vw,36px) !important;
  border:1px solid rgba(5,5,5,.08) !important;
  background:rgba(255,255,255,.57) !important;
  box-shadow:0 12px 34px rgba(24,19,35,.055),inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
body.page-single .content-entry [style*="display:grid"],
body.page-single .content-entry [style*="display: grid"] {
  gap:clamp(12px,1.8vw,18px) !important;
}
body.page-single .content-entry [style*="display:grid"]>div,
body.page-single .content-entry [style*="display: grid"]>div {
  position:relative;
  overflow:hidden;
  min-width:0;
  padding:clamp(20px,2.5vw,30px) !important;
  border:1px solid rgba(5,5,5,.08) !important;
  border-radius:22px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.76),rgba(255,255,255,.40)) !important;
  box-shadow:0 12px 32px rgba(24,19,35,.055),inset 0 1px 0 rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(18px) saturate(1.08);
  backdrop-filter:blur(18px) saturate(1.08);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s ease,border-color .55s ease;
}
body.page-single .content-entry [style*="display:grid"]>div:after,
body.page-single .content-entry [style*="display: grid"]>div:after {
  content:"";
  position:absolute;
  width:100px;height:100px;
  left:-54px;bottom:-58px;
  border-radius:50%;
  background:rgba(var(--meros-a),.26);
  filter:blur(15px);
  pointer-events:none;
}
@media (hover:hover) {
  body.page-single .content-entry [style*="display:grid"]>div:hover,
  body.page-single .content-entry [style*="display: grid"]>div:hover {
    transform:translateY(-5px) rotate(.12deg);
    border-color:rgba(var(--meros-a),.62) !important;
    box-shadow:0 22px 45px rgba(24,19,35,.10),inset 0 1px 0 rgba(255,255,255,.96);
  }
}
body.page-single .content-entry h2 {
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px !important;
  color:var(--meros-ink) !important;
  font-size:clamp(19px,2.15vw,25px) !important;
  font-weight:750 !important;
  line-height:1.45 !important;
}
body.page-single .content-entry h2:before {
  content:"";
  flex:0 0 9px;
  width:9px;height:9px;
  border-radius:3px 50% 50%;
  background:linear-gradient(135deg,rgb(var(--meros-a)),rgb(var(--meros-b)));
  box-shadow:0 0 0 5px rgba(var(--meros-a),.16);
}
body.page-single .content-entry h3 {color:var(--meros-ink) !important;font-size:17px !important;line-height:1.55 !important;margin:0 0 9px !important;}
body.page-single .content-entry p,
body.page-single .content-entry li {color:#514f4b !important;font-size:14.5px !important;line-height:2 !important;}
body.page-single .content-entry p {margin-bottom:10px !important;}
body.page-single .content-entry ul,
body.page-single .content-entry ol {padding-right:22px !important;margin:10px 0 !important;}
body.page-single .content-entry a {color:#111 !important;text-decoration-thickness:1px;text-underline-offset:4px;}
body.page-single .content-entry hr {border:0 !important;height:1px;background:linear-gradient(90deg,transparent,rgba(5,5,5,.13),transparent);margin:24px 0 !important;}
body.page-single .content-entry table {width:100% !important;border-collapse:separate !important;border-spacing:0 !important;overflow:hidden;border:1px solid var(--meros-line);border-radius:16px;background:rgba(255,255,255,.55);}
body.page-single .content-entry th {background:#0a0a0a !important;color:#fff !important;}
body.page-single .content-entry th,body.page-single .content-entry td {padding:14px !important;border-bottom:1px solid var(--meros-line) !important;text-align:right !important;}

/* Page accents + bespoke line icons */
html:has(link[rel="canonical"][href*="page-2064767117"]) body.page-single .content-entry {--meros-a:159,248,241;--meros-b:207,196,255;--meros-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4' stroke-linejoin='round'%3E%3Cpath d='M32 5l7 17 17-7-7 17 17 7-17 7 7 17-17-7-7 17-7-17-17 7 7-17-17-7 17-7-7-17 17 7z'/%3E%3Ccircle cx='32' cy='32' r='7'/%3E%3C/g%3E%3C/svg%3E");}
html:has(link[rel="canonical"][href*="page-1425991566"]) body.page-single .content-entry {--meros-a:184,215,255;--meros-b:255,199,232;--meros-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 49 49 13l8 8-36 36z'/%3E%3Cpath d='m39 23 4 4m-10 2 4 4m-10 2 4 4m-10 2 4 4'/%3E%3C/g%3E%3C/svg%3E");}
html:has(link[rel="canonical"][href*="page-59321744"]) body.page-single .content-entry {--meros-a:159,248,241;--meros-b:184,215,255;--meros-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 15h31v31H7zM38 25h10l9 10v11H38z'/%3E%3Ccircle cx='18' cy='49' r='6'/%3E%3Ccircle cx='48' cy='49' r='6'/%3E%3Cpath d='M38 35h19'/%3E%3C/g%3E%3C/svg%3E");}
html:has(link[rel="canonical"][href*="page-1565936785"]) body.page-single .content-entry {--meros-a:255,199,232;--meros-b:207,196,255;--meros-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 20h27a13 13 0 0 1 0 26H25'/%3E%3Cpath d='m24 11-9 9 9 9M46 46l-7-7m7 7-7 7'/%3E%3C/g%3E%3C/svg%3E");}
html:has(link[rel="canonical"][href*="page-2031717011"]) body.page-single .content-entry {--meros-a:207,196,255;--meros-b:159,248,241;--meros-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 7 52 15v15c0 14-8 23-20 28C20 53 12 44 12 30V15z'/%3E%3Crect x='23' y='29' width='18' height='15' rx='3'/%3E%3Cpath d='M27 29v-5a5 5 0 0 1 10 0v5'/%3E%3C/g%3E%3C/svg%3E");}
html:has(link[rel="canonical"][href*="page-1256630684"]) body.page-single .content-entry {--meros-a:184,215,255;--meros-b:207,196,255;--meros-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 7h24l10 10v40H16zM40 7v12h10M24 30h18M24 39h18M24 48h12'/%3E%3C/g%3E%3C/svg%3E");}
html:has(link[rel="canonical"][href*="page-616810653"]) body.page-single .content-entry {--meros-a:255,199,232;--meros-b:159,248,241;--meros-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='black' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 11h46v34H29L16 55V45H9z'/%3E%3Cpath d='M20 24h24M20 33h16'/%3E%3C/g%3E%3C/svg%3E");}

/* Purpose-built layouts */
html:has(link[rel="canonical"][href*="page-2064767117"]) body.page-single .content-entry [style*="display:grid"],
html:has(link[rel="canonical"][href*="page-1425991566"]) body.page-single .content-entry [style*="display:grid"] {grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
html:has(link[rel="canonical"][href*="page-59321744"]) body.page-single .content-entry [style*="display:grid"],
html:has(link[rel="canonical"][href*="page-1565936785"]) body.page-single .content-entry [style*="display:grid"],
html:has(link[rel="canonical"][href*="page-2031717011"]) body.page-single .content-entry [style*="display:grid"],
html:has(link[rel="canonical"][href*="page-1256630684"]) body.page-single .content-entry [style*="display:grid"],
html:has(link[rel="canonical"][href*="page-616810653"]) body.page-single .content-entry [style*="display:grid"] {grid-template-columns:repeat(2,minmax(0,1fr)) !important;}

body.page-single .content-entry .meros-contact-links {display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:14px !important;}
body.page-single .content-entry .meros-contact-links>a {
  display:flex;flex-direction:column;align-items:flex-start;gap:5px;
  padding:22px !important;border:1px solid rgba(5,5,5,.08);border-radius:20px;
  background:rgba(255,255,255,.63);text-decoration:none !important;
  box-shadow:0 10px 28px rgba(24,19,35,.05);
  transition:transform .4s ease,border-color .4s ease;
}
body.page-single .content-entry .meros-contact-links>a:hover {transform:translateY(-4px);border-color:rgba(var(--meros-a),.7);}
body.page-single .content-entry .meros-contact-links strong {color:#080808;font-size:15px;}
body.page-single .content-entry .meros-contact-links span {color:#64615c;font-size:13px;direction:ltr;unicode-bidi:plaintext;}

@keyframes merosPageGlow {from{transform:translate3d(-8px,-6px,0) scale(.96)}to{transform:translate3d(12px,10px,0) scale(1.06)}}

@media (max-width:767px) {
  body.page-single #main-content {padding-top:10px !important;padding-bottom:58px !important;}
  body.page-single #main-content>.container {padding-inline:10px !important;}
  body.page-single .breadcrumbs {margin-bottom:10px !important;padding:6px 10px !important;font-size:10px !important;}
  body.page-single .content-entry>div {padding:8px !important;border-radius:24px;}
  body.page-single .content-entry>div>div>div:first-child {
    min-height:315px;
    padding:88px 22px 28px !important;
    border-radius:19px;
  }
  body.page-single .content-entry>div>div>div:first-child:after {top:20px;left:20px;width:56px;height:56px;border-radius:16px;}
  body.page-single .content-entry h1 {font-size:34px !important;line-height:1.2 !important;}
  body.page-single .content-entry>div>div>div:first-child p {font-size:13.5px !important;line-height:1.9 !important;}
  body.page-single .content-entry [style*="display:grid"],
  body.page-single .content-entry [style*="display: grid"],
  body.page-single .content-entry .meros-contact-links {grid-template-columns:1fr !important;gap:10px !important;}
  body.page-single .content-entry [style*="display:grid"]>div,
  body.page-single .content-entry [style*="display: grid"]>div,
  body.page-single .content-entry>div>div>div:not(:first-child):not([style*="display:grid"]):not([style*="display: grid"]) {padding:20px !important;border-radius:18px !important;}
  body.page-single .content-entry h2 {font-size:19px !important;}
  body.page-single .content-entry p,body.page-single .content-entry li {font-size:13.5px !important;line-height:1.9 !important;}
  body.page-single .content-entry table {display:block;overflow-x:auto;white-space:nowrap;}
}

@media (prefers-reduced-motion:reduce) {
  body.page-single .content-entry>div:before,
  body.page-single .content-entry>div:after {animation:none !important;}
  body.page-single .content-entry [style*="display:grid"]>div,
  body.page-single .content-entry [style*="display: grid"]>div {transition:none !important;}
}


/* MEROS pages — icon rendering and mobile card stack fix */
body.page-single .content-entry>div>div>div:first-child:after {
  background-image:var(--meros-icon),linear-gradient(135deg,rgba(var(--meros-a),.98),rgba(var(--meros-b),.94)) !important;
  background-position:center,center !important;
  background-size:54% 54%,cover !important;
  background-repeat:no-repeat !important;
  -webkit-mask:none !important;
  mask:none !important;
}
@media (max-width:767px) {
  html:has(link[rel="canonical"][href*="page-"]) body.page-single .content-entry [style*="display:grid"],
  html:has(link[rel="canonical"][href*="page-"]) body.page-single .content-entry [style*="display: grid"],
  html:has(link[rel="canonical"][href*="page-"]) body.page-single .content-entry .meros-contact-links {
    grid-template-columns:minmax(0,1fr) !important;
  }
}


/* MEROS contact — balanced three-card desktop row */
html:has(link[rel="canonical"][href*="page-616810653"]) body.page-single .content-entry [style*="display:grid"],
html:has(link[rel="canonical"][href*="page-616810653"]) body.page-single .content-entry [style*="display: grid"] {
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}
@media (max-width:767px) {
  html:has(link[rel="canonical"][href*="page-616810653"]) body.page-single .content-entry [style*="display:grid"],
  html:has(link[rel="canonical"][href*="page-616810653"]) body.page-single .content-entry [style*="display: grid"] {
    grid-template-columns:minmax(0,1fr) !important;
  }
}


/* MEROS About — shader-only hero */
html:has(link[rel="canonical"][href*="page-2064767117"]) body.page-single .content-entry .konvert-logo-shader{
  position:relative!important;display:block!important;width:100%!important;height:clamp(320px,42vw,520px)!important;min-height:320px!important;padding:0!important;overflow:hidden!important;background:#12171a!important;border-radius:28px!important;isolation:isolate;
}
html:has(link[rel="canonical"][href*="page-2064767117"]) body.page-single .content-entry .konvert-logo-shader:before,
html:has(link[rel="canonical"][href*="page-2064767117"]) body.page-single .content-entry .konvert-logo-shader:after{content:none!important;display:none!important;}
html:has(link[rel="canonical"][href*="page-2064767117"]) body.page-single .content-entry .konvert-logo-shader canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;display:block!important;}
@media(max-width:767px){html:has(link[rel="canonical"][href*="page-2064767117"]) body.page-single .content-entry .konvert-logo-shader{height:320px!important;min-height:320px!important;padding:0!important;border-radius:19px!important;}}

/* =========================================================
   MEROS ABOUT PAGE
========================================================= */

.meros-about-page{
  width:100% !important;

  background:#F7F4EE !important;
  background-color:#F7F4EE !important;

  color:#161616 !important;

  font-family:inherit !important;

  padding:
    clamp(36px,6vw,90px)
    20px !important;

  box-sizing:border-box !important;
}


.meros-about-inner{
  width:100% !important;

  max-width:920px !important;

  margin:0 auto !important;
}


/* =========================================================
   BLACK SHADER STAGE
========================================================= */

.meros-prism-stage{
  position:relative !important;

  width:100% !important;

  height:clamp(320px,42vw,520px) !important;
  min-height:320px !important;

  margin:
    0
    0
    20px
    0 !important;

  padding:0 !important;

  overflow:hidden !important;

  background:#000000 !important;
  background-color:#000000 !important;
  background-image:none !important;

  border-radius:28px !important;

  display:flex !important;

  align-items:center !important;
  justify-content:center !important;

  isolation:isolate !important;

  box-sizing:border-box !important;
}


.meros-prism-stage::before,
.meros-prism-stage::after{
  content:none !important;

  display:none !important;
}


/* =========================================================
   MEROS VECTOR PRISMATIC SYMBOL
========================================================= */

.meros-prism-logo{
  position:relative !important;

  display:block !important;

  width:min(68%,520px) !important;

  aspect-ratio:1 / 1 !important;

  flex:0 0 auto !important;


  /* MEROS SVG VECTOR MASK */

  -webkit-mask-image:
    url("https://res.cloudinary.com/ffmyxgav/image/upload/v1789261278/MEROS_symbol_high_fidelity.svg") !important;

  mask-image:
    url("https://res.cloudinary.com/ffmyxgav/image/upload/v1789261278/MEROS_symbol_high_fidelity.svg") !important;


  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;


  -webkit-mask-position:center !important;
  mask-position:center !important;


  -webkit-mask-size:contain !important;
  mask-size:contain !important;


  /* PRISMATIC CHROME */

  background:
    radial-gradient(
      circle at 24% 25%,
      rgba(255,255,255,1) 0%,
      rgba(218,245,255,.95) 8%,
      rgba(218,245,255,0) 28%
    ),

    radial-gradient(
      circle at 76% 68%,
      rgba(255,221,246,.95) 0%,
      rgba(213,191,255,.58) 17%,
      rgba(213,191,255,0) 38%
    ),

    radial-gradient(
      circle at 67% 21%,
      rgba(189,255,242,.95) 0%,
      rgba(165,226,255,.55) 18%,
      rgba(165,226,255,0) 40%
    ),

    linear-gradient(
      112deg,

      #202020 0%,

      #666A70 6%,

      #FAFAFA 13%,

      #A5EDFF 19%,

      #FFFFFF 26%,

      #757980 34%,

      #DCCEFF 41%,

      #FFFFFF 49%,

      #A3F5E4 57%,

      #74777D 65%,

      #FFFFFF 73%,

      #F6D2EA 81%,

      #878B91 88%,

      #FFFFFF 94%,

      #252525 100%
    ) !important;


  background-size:
    170% 170%,
    180% 180%,
    180% 180%,
    320% 320% !important;


  background-position:
    20% 25%,
    78% 70%,
    70% 22%,
    0% 50%;


  filter:
    contrast(1.18)
    saturate(1.12)
    brightness(1.06) !important;


  animation:
    merosPrismFlow
    9s
    ease-in-out
    infinite !important;

}


/* =========================================================
   MOVING SPECULAR LIGHT
========================================================= */

.meros-prism-logo::before{
  content:"" !important;

  position:absolute !important;

  inset:0 !important;


  -webkit-mask-image:
    url("https://res.cloudinary.com/ffmyxgav/image/upload/v1789261278/MEROS_symbol_high_fidelity.svg") !important;

  mask-image:
    url("https://res.cloudinary.com/ffmyxgav/image/upload/v1789261278/MEROS_symbol_high_fidelity.svg") !important;


  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;


  -webkit-mask-position:center !important;
  mask-position:center !important;


  -webkit-mask-size:contain !important;
  mask-size:contain !important;


  background:
    linear-gradient(
      108deg,

      transparent 12%,

      rgba(255,255,255,.04) 27%,

      rgba(255,255,255,.95) 44%,

      rgba(179,232,255,.78) 48%,

      rgba(255,213,245,.60) 53%,

      transparent 69%
    ) !important;


  background-size:
    280%
    100% !important;


  mix-blend-mode:screen !important;


  animation:
    merosMetalSweep
    6.5s
    cubic-bezier(.4,0,.2,1)
    infinite !important;

}


/* =========================================================
   GLOW
========================================================= */

.meros-prism-logo::after{
  content:"" !important;

  position:absolute !important;

  inset:-3% !important;

  z-index:-1 !important;


  -webkit-mask-image:
    url("https://res.cloudinary.com/ffmyxgav/image/upload/v1789261278/MEROS_symbol_high_fidelity.svg") !important;

  mask-image:
    url("https://res.cloudinary.com/ffmyxgav/image/upload/v1789261278/MEROS_symbol_high_fidelity.svg") !important;


  -webkit-mask-repeat:no-repeat !important;
  mask-repeat:no-repeat !important;


  -webkit-mask-position:center !important;
  mask-position:center !important;


  -webkit-mask-size:contain !important;
  mask-size:contain !important;


  background:
    linear-gradient(
      120deg,

      rgba(170,232,255,.8),

      rgba(255,255,255,.45),

      rgba(220,195,255,.7),

      rgba(255,210,240,.6)
    ) !important;


  filter:
    blur(22px) !important;


  opacity:.28;

  animation:
    merosGlow
    6s
    ease-in-out
    infinite !important;

}


/* =========================================================
   INTRO
========================================================= */

.meros-about-intro{
  display:block !important;

  visibility:visible !important;

  opacity:1 !important;

  margin:
    0
    0
    42px !important;

  padding:
    4px
    8px
    0 !important;
}


.meros-about-intro p{
  max-width:760px !important;

  margin:0 auto !important;

  padding:0 !important;

  font-size:15px !important;

  line-height:2.15 !important;

  color:#3D3D3D !important;

  text-align:center !important;
}


/* =========================================================
   IDEA
========================================================= */

.meros-about-section{
  border-top:
    1px
    solid
    #DCD6CC !important;

  padding-top:
    34px !important;

  margin-bottom:
    42px !important;
}


.meros-about-section h2{
  margin:
    0
    0
    14px !important;

  padding:0 !important;

  font-size:17px !important;

  color:#161616 !important;
}


.meros-about-section p{
  margin:0 !important;

  padding:0 !important;

  font-size:14px !important;

  line-height:2.1 !important;

  color:#444 !important;
}


/* =========================================================
   CARDS
========================================================= */

.meros-about-grid{
  display:grid !important;

  grid-template-columns:
    repeat(
      auto-fit,
      minmax(
        200px,
        1fr
      )
    ) !important;

  gap:12px !important;
}


.meros-about-card{
  min-height:130px !important;

  padding:24px !important;

  border:
    1px
    solid
    #DDD7CE !important;

  background:
    transparent !important;

  box-sizing:
    border-box !important;
}


.meros-about-icon{
  margin-bottom:
    22px !important;

  font-size:
    18px !important;

  color:
    #161616 !important;
}


.meros-about-card strong{
  display:block !important;

  font-size:
    13px !important;

  color:
    #161616 !important;
}


.meros-about-card p{
  margin:
    8px
    0
    0 !important;

  padding:0 !important;

  font-size:
    12px !important;

  line-height:
    1.9 !important;

  color:
    #666 !important;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes merosPrismFlow{

  0%{

    background-position:
      20% 25%,
      78% 70%,
      70% 22%,
      0% 50%;

  }


  33%{

    background-position:
      58% 20%,
      45% 78%,
      78% 45%,
      48% 50%;

  }


  68%{

    background-position:
      78% 55%,
      24% 35%,
      35% 72%,
      100% 50%;

  }


  100%{

    background-position:
      20% 25%,
      78% 70%,
      70% 22%,
      0% 50%;

  }

}


@keyframes merosMetalSweep{

  0%,
  15%{

    background-position:
      160%
      center;

    opacity:.25;

  }


  45%{

    opacity:1;

  }


  75%,
  100%{

    background-position:
      -160%
      center;

    opacity:.3;

  }

}


@keyframes merosGlow{

  0%,
  100%{

    opacity:.18;

    transform:
      scale(.985);

  }


  50%{

    opacity:.34;

    transform:
      scale(1.015);

  }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

  .meros-about-page{

    padding:
      36px
      14px
      60px !important;

  }


  .meros-prism-stage{

    height:
      320px !important;

    min-height:
      320px !important;

    border-radius:
      20px !important;

  }


  .meros-prism-logo{

    width:
      72% !important;

  }


  .meros-about-intro p{

    font-size:
      13.5px !important;

    line-height:
      2.05 !important;

  }


  .meros-about-grid{

    grid-template-columns:
      1fr !important;

  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media(prefers-reduced-motion:reduce){

  .meros-prism-logo,
  .meros-prism-logo::before,
  .meros-prism-logo::after{

    animation:
      none !important;

  }

}

/* =========================================================
   MEROS ABOUT — FINAL OVERRIDE
   MUST BE AT THE VERY END OF CUSTOM CSS
========================================================= */


/* =========================================================
   PAGE CONTAINER
========================================================= */

body.page-single .content-entry .meros-about-page {
  position: relative !important;

  width: 100% !important;
  max-width: none !important;

  margin: 0 !important;

  padding:
    clamp(14px,2.4vw,28px) !important;

  overflow: hidden !important;

  background:
    rgba(247,244,238,.73) !important;

  border:
    1px solid rgba(255,255,255,.88) !important;

  border-radius:
    34px !important;

  box-sizing:
    border-box !important;
}


body.page-single .content-entry .meros-about-inner {
  position: relative !important;

  z-index: 2 !important;

  width: 100% !important;
  max-width: 920px !important;

  margin: 0 auto !important;

  padding: 0 !important;

  background:
    transparent !important;

  border: 0 !important;

  box-shadow:
    none !important;

  overflow:
    visible !important;
}


/* =========================================================
   REMOVE OLD PAGE DECORATION FROM THIS CONTAINER
========================================================= */

body.page-single
.content-entry
.meros-about-page::before,

body.page-single
.content-entry
.meros-about-page::after {

  content: none !important;

  display: none !important;

}


/* =========================================================
   BLACK SHADER BOX
   OVERRIDES OLD "DARK EDITORIAL HERO"
========================================================= */

body.page-single
.content-entry
.meros-about-page
.meros-about-inner
.meros-prism-stage {

  position: relative !important;

  width: 100% !important;
  max-width: none !important;

  height:
    clamp(320px,42vw,520px) !important;

  min-height:
    320px !important;

  margin:
    0 0 24px 0 !important;

  padding:
    0 !important;

  display:
    flex !important;

  align-items:
    center !important;

  justify-content:
    center !important;

  flex-direction:
    row !important;

  overflow:
    hidden !important;

  background:
    #000000 !important;

  background-color:
    #000000 !important;

  background-image:
    none !important;

  border:
    0 !important;

  border-radius:
    28px !important;

  box-shadow:
    none !important;

  color:
    transparent !important;

  isolation:
    isolate !important;

  box-sizing:
    border-box !important;
}


/* Kill old hero pseudo-elements */

body.page-single
.content-entry
.meros-about-page
.meros-prism-stage::before,

body.page-single
.content-entry
.meros-about-page
.meros-prism-stage::after {

  content:
    none !important;

  display:
    none !important;

  background:
    none !important;

  border:
    0 !important;

  box-shadow:
    none !important;
}


/* =========================================================
   REAL SVG FALLBACK
   هذا يضمن ظهور الشعار حتى إذا رفض سلة الـ mask
========================================================= */

body.page-single
.content-entry
.meros-about-page
.meros-prism-stage
.meros-prism-base {

  position:
    absolute !important;

  left:
    50% !important;

  top:
    50% !important;

  width:
    min(68%,520px) !important;

  height:
    auto !important;

  max-width:
    68% !important;

  max-height:
    68% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  display:
    block !important;

  object-fit:
    contain !important;

  transform:
    translate(-50%,-50%) !important;

  filter:
    brightness(0)
    invert(1)
    brightness(.74)
    contrast(1.35) !important;

  opacity:
    .76 !important;

  z-index:
    1 !important;

  pointer-events:
    none !important;
}


/* =========================================================
   PRISMATIC VECTOR LAYER
========================================================= */

body.page-single
.content-entry
.meros-about-page
.meros-prism-stage
.meros-prism-logo {

  position:
    absolute !important;

  left:
    50% !important;

  top:
    50% !important;

  display:
    block !important;

  width:
    min(68%,520px) !important;

  height:
    min(68%,520px) !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  transform:
    translate(-50%,-50%) !important;

  z-index:
    3 !important;


  -webkit-mask-image:
    url("https://res.cloudinary.com/ffmyxgav/image/upload/v1789261278/MEROS_symbol_high_fidelity.svg") !important;

  mask-image:
    url("https://res.cloudinary.com/ffmyxgav/image/upload/v1789261278/MEROS_symbol_high_fidelity.svg") !important;


  -webkit-mask-repeat:
    no-repeat !important;

  mask-repeat:
    no-repeat !important;


  -webkit-mask-position:
    center !important;

  mask-position:
    center !important;


  -webkit-mask-size:
    contain !important;

  mask-size:
    contain !important;


  background:

    radial-gradient(
      circle at 22% 22%,
      rgba(255,255,255,1) 0%,
      rgba(205,242,255,.95) 10%,
      transparent 28%
    ),

    radial-gradient(
      circle at 76% 70%,
      rgba(255,210,242,.93) 0%,
      rgba(213,191,255,.64) 17%,
      transparent 39%
    ),

    radial-gradient(
      circle at 69% 22%,
      rgba(178,255,237,.92) 0%,
      rgba(155,218,255,.58) 20%,
      transparent 42%
    ),

    linear-gradient(
      112deg,

      #171717 0%,

      #676b72 7%,

      #ffffff 14%,

      #9feaff 20%,

      #ffffff 27%,

      #6d7279 34%,

      #d9caff 41%,

      #ffffff 49%,

      #9ff6e4 57%,

      #686d73 65%,

      #ffffff 73%,

      #f5cce8 81%,

      #7d8289 88%,

      #ffffff 95%,

      #181818 100%
    ) !important;


  background-size:

    180% 180%,

    190% 190%,

    180% 180%,

    320% 320% !important;


  filter:

    contrast(1.2)
    saturate(1.16)
    brightness(1.08) !important;


  animation:

    merosFinalPrism
    8s
    ease-in-out
    infinite !important;

}


/* =========================================================
   METALLIC SWEEP
========================================================= */

body.page-single
.content-entry
.meros-about-page
.meros-prism-stage
.meros-prism-logo::before {

  content:
    "" !important;

  position:
    absolute !important;

  inset:
    0 !important;


  -webkit-mask-image:
    url("https://res.cloudinary.com/ffmyxgav/image/upload/v1789261278/MEROS_symbol_high_fidelity.svg") !important;

  mask-image:
    url("https://res.cloudinary.com/ffmyxgav/image/upload/v1789261278/MEROS_symbol_high_fidelity.svg") !important;


  -webkit-mask-repeat:
    no-repeat !important;

  mask-repeat:
    no-repeat !important;


  -webkit-mask-position:
    center !important;

  mask-position:
    center !important;


  -webkit-mask-size:
    contain !important;

  mask-size:
    contain !important;


  background:

    linear-gradient(
      105deg,

      transparent 13%,

      rgba(255,255,255,.04) 29%,

      rgba(255,255,255,.96) 44%,

      rgba(176,235,255,.82) 48%,

      rgba(255,208,241,.82) 52%,
      transparent 70%
    ) !important;
}


/* Product page breathing room */
body.product-single [data-testid="store-product-price"] {
  margin-block: 0 24px !important;
  padding-block-end: 2px;
}
body.product-single [data-testid="store-product-description"] {
  margin-block-end: 28px !important;
}
body.product-single .product-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
body.product-single .product-form > section,
body.product-single .product-form > salla-product-options {
  margin-block-start: 0 !important;
}
body.product-single .s-product-options-wrapper {
  padding: 20px !important;
  border-radius: 22px;
}
@media (max-width: 767px) {
  body.product-single [data-testid="store-product-price"] { margin-block-end: 20px !important; }
  body.product-single [data-testid="store-product-description"] { margin-block-end: 22px !important; }
  body.product-single .product-form { gap: 14px; }
  body.product-single .s-product-options-wrapper { padding: 16px !important; }
}

/* Desktop collections button and floating panel */
#meros-collections-toggle,
#meros-collections-panel { display: none; }
@media (min-width: 1024px) {
  html.meros-desktop-menu-ready #mainnav custom-main-menu { display: none !important; }
  #mainnav .inner { position: relative; overflow: visible !important; }
  #meros-collections-toggle {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 16px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    color: inherit;
    background: rgba(255,255,255,.08);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
  }
  #meros-collections-toggle:hover,
  #meros-collections-toggle[aria-expanded="true"] {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.42);
    transform: translateY(-1px);
  }
  #meros-collections-toggle i { font-size: 16px; }
  #meros-collections-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 50%;
    z-index: 1000;
    width: min(760px, calc(100vw - 48px));
    padding: 22px;
    transform: translateX(50%);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(12,12,12,.97), rgba(27,25,23,.96));
    box-shadow: 0 24px 70px rgba(0,0,0,.34);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    color: #f7f3eb;
  }
  #meros-collections-panel:not([hidden]) {
    display: block;
    animation: merosMenuIn .24s ease both;
  }
  #meros-collections-panel[hidden] { display: none !important; }
  #meros-collections-panel .meros-menu-label {
    margin: 0 0 14px;
    color: rgba(247,243,235,.62);
    font-size: 12px;
    text-align: right;
  }
  #meros-collections-panel .meros-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  #mainnav #meros-collections-panel a {
    display: flex !important;
    align-items: center;
    gap: 13px;
    min-height: 76px;
    padding: 16px 18px !important;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 18px;
    color: #f7f3eb !important;
    background: rgba(255,255,255,.055);
    font-size: 15px;
    line-height: 1.5;
    transition: background .25s ease, border-color .25s ease, transform .25s ease;
  }
  #mainnav #meros-collections-panel a:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.28);
    transform: translateY(-2px);
  }
  #mainnav #meros-collections-panel a small {
    flex: 0 0 auto;
    color: #d5a65b;
    font: 600 11px/1 monospace;
  }
}
@keyframes merosMenuIn {
  from { opacity: 0; transform: translateX(50%) translateY(-8px) scale(.985); }
  to { opacity: 1; transform: translateX(50%) translateY(0) scale(1); }
}
/* Keep desktop collections panel above the page */
@media (min-width: 1024px) {
  .store-header { position: relative !important; z-index: 1100 !important; }
  #mainnav, #mainnav .inner { z-index: 1101 !important; }
  #meros-collections-panel { z-index: 1102 !important; }
}


/* =========================================================
   MEROS — PRODUCT DETAIL POLISH 2026-09-13
   ========================================================= */
body.product-single {
  background:
    radial-gradient(circle at 88% 12%, rgba(119, 190, 211, .15), transparent 32rem),
    radial-gradient(circle at 8% 48%, rgba(226, 181, 157, .13), transparent 30rem),
    #f7f6f2 !important;
}
body.product-single #main-content {
  overflow: clip;
}
body.product-single .container--product-details {
  max-width: 1360px !important;
  padding-top: 34px !important;
  padding-bottom: 76px !important;
}
body.product-single .container--product-details > [id^="product-"] {
  gap: clamp(24px, 3vw, 46px) !important;
  align-items: flex-start !important;
}

/* Gallery shell */
body.product-single .container--product-details .sidebar {
  margin: 0 !important;
  overflow: visible !important;
  padding: 16px !important;
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.42));
  box-shadow: 0 24px 70px rgba(34,50,62,.12), inset 0 1px 0 rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(24px) saturate(135%);
  backdrop-filter: blur(24px) saturate(135%);
  animation: none !important;
  transform: none !important;
}
body.product-single [data-testid="store-product-image-slider"] {
  display: block;
  border-radius: 25px;
}
body.product-single [data-testid="store-product-image-slider"] .s-slider-container {
  aspect-ratio: 1 / 1;
  height: auto !important;
  min-height: 0 !important;
  overflow: hidden;
  border: 1px solid rgba(31,70,91,.08);
  border-radius: 25px !important;
  background:
    radial-gradient(circle at 75% 15%, rgba(162,218,232,.22), transparent 35%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(239,242,241,.74));
}
body.product-single [data-testid="store-product-image-slider"] .homeslider__slide {
  height: 100% !important;
  padding: clamp(14px, 2vw, 28px);
  background: transparent !important;
}
body.product-single [data-testid="store-product-image-slider"] .homeslider__slide img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 18px;
}
body.product-single [data-testid="store-product-image-slider"] .s-slider-thumbs-container {
  margin-top: 14px !important;
  padding: 3px !important;
}
body.product-single [data-testid="store-product-image-slider"] .s-slider-thumbs-container .swiper-slide {
  overflow: hidden;
  opacity: .58;
  border: 2px solid transparent;
  border-radius: 16px;
  background: rgba(255,255,255,.52);
  transform: scale(.94);
  transition: opacity .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
body.product-single [data-testid="store-product-image-slider"] .s-slider-thumbs-container .swiper-slide:hover,
body.product-single [data-testid="store-product-image-slider"] .s-slider-thumbs-container .swiper-slide-thumb-active {
  opacity: 1;
  transform: scale(1);
  border-color: rgba(29,83,108,.48);
  box-shadow: 0 7px 20px rgba(30,74,94,.17);
}
body.product-single [data-testid="store-product-image-slider"] .s-slider-thumbs-container img {
  border-radius: 12px !important;
  background: rgba(255,255,255,.9) !important;
}
body.product-single [data-testid="store-product-image-slider"] .s-slider-prev,
body.product-single [data-testid="store-product-image-slider"] .s-slider-next {
  width: 44px !important;
  height: 44px !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.68) !important;
  color: #17394a !important;
  box-shadow: 0 8px 24px rgba(22,52,68,.14) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Details glass card */
body.product-single .container--product-details .main-content {
  margin: 0 !important;
  overflow: visible !important;
  padding: clamp(22px, 2.5vw, 34px) !important;
  border: 1px solid rgba(255,255,255,.8);
  border-radius: 32px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.43));
  box-shadow: 0 24px 70px rgba(34,50,62,.11), inset 0 1px 0 rgba(255,255,255,.94);
  -webkit-backdrop-filter: blur(26px) saturate(140%);
  backdrop-filter: blur(26px) saturate(140%);
  animation: none !important;
  transform: none !important;
}
body.product-single [data-testid="store-product-title"] {
  margin: 0 0 14px !important;
  color: #172f3b !important;
  font-size: clamp(1.55rem, 2vw, 2.05rem) !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
  letter-spacing: -.025em;
}
body.product-single [data-testid="store-product-price"] {
  display: inline-flex !important;
  width: auto !important;
  margin: 0 0 22px !important;
  padding: 10px 15px !important;
  border: 1px solid rgba(35,84,106,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  color: #1d536c !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  font-weight: 700;
}
body.product-single [data-testid="store-product-description"] {
  margin: 0 0 14px !important;
  padding: 21px 22px !important;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 22px;
  background: rgba(255,255,255,.5) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  color: #344853;
  line-height: 2 !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
body.product-single [data-testid="store-product-description"] #more-content {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.product-single #btn-show-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  margin: 0 0 18px !important;
  padding: 7px 15px;
  border: 1px solid rgba(29,83,108,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.5);
  color: #1d536c !important;
  font-weight: 600;
  transition: background .2s ease, transform .2s ease;
}
body.product-single #btn-show-more:hover { background: rgba(255,255,255,.88); transform: translateY(-1px); }
body.product-single .product-form {
  gap: 14px !important;
}
body.product-single [data-testid="store-product-options"],
body.product-single .product-form > section {
  margin: 0 !important;
  padding: 18px !important;
  border: 1px solid rgba(255,255,255,.82) !important;
  border-radius: 22px !important;
  background: rgba(255,255,255,.54) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 10px 28px rgba(42,64,75,.055);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
body.product-single [data-testid="store-product-options"] select,
body.product-single [data-testid="store-product-options"] .s-select-input,
body.product-single [data-testid="store-product-options"] button[role="combobox"] {
  min-height: 48px;
  border-color: rgba(29,83,108,.16) !important;
  border-radius: 14px !important;
  background: rgba(255,255,255,.72) !important;
}
body.product-single .sticky-product-bar {
  position: relative !important;
  inset: auto !important;
}
body.product-single .sticky-product-bar__quantity {
  margin-bottom: 14px !important;
}
body.product-single .product-form button:not(.s-quantity-input-button) {
  border-radius: 14px !important;
}
body.product-single .product-form salla-add-product-button button,
body.product-single .product-form button[type="submit"] {
  min-height: 52px !important;
  box-shadow: 0 12px 28px rgba(25,67,87,.18);
}
body.product-single salla-quantity-input {
  overflow: hidden;
  border: 1px solid rgba(29,83,108,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.72);
}
body.product-single [data-testid="store-product-image-slider"] button:focus-visible,
body.product-single .product-form button:focus-visible,
body.product-single #btn-show-more:focus-visible {
  outline: 3px solid rgba(75,154,187,.36) !important;
  outline-offset: 3px;
}

@media (min-width: 768px) {
  body.product-single .container--product-details .sidebar,
  body.product-single .container--product-details .main-content {
    top: 104px !important;
  }
}

@media (max-width: 767px) {
  body.product-single .container--product-details {
    padding: 18px 12px 52px !important;
  }
  body.product-single .container--product-details > [id^="product-"] {
    gap: 16px !important;
  }
  body.product-single .container--product-details .sidebar {
    position: relative !important;
    top: auto !important;
    padding: 10px !important;
    border-radius: 24px;
  }
  body.product-single [data-testid="store-product-image-slider"],
  body.product-single [data-testid="store-product-image-slider"] .s-slider-container {
    border-radius: 19px !important;
  }
  body.product-single [data-testid="store-product-image-slider"] .homeslider__slide {
    padding: 10px;
  }
  body.product-single [data-testid="store-product-image-slider"] .s-slider-thumbs-container {
    margin-top: 10px !important;
  }
  body.product-single [data-testid="store-product-image-slider"] .s-slider-thumbs-container .swiper-slide {
    border-radius: 12px;
  }
  body.product-single .container--product-details .main-content {
    position: relative !important;
    top: auto !important;
    padding: 20px 15px !important;
    border-radius: 26px;
  }
  body.product-single [data-testid="store-product-title"] {
    margin-bottom: 10px !important;
    font-size: 1.35rem !important;
    line-height: 1.6 !important;
  }
  body.product-single [data-testid="store-product-price"] {
    margin-bottom: 16px !important;
  }
  body.product-single [data-testid="store-product-description"] {
    padding: 17px !important;
    border-radius: 18px;
    line-height: 1.9 !important;
  }
  body.product-single [data-testid="store-product-options"],
  body.product-single .product-form > section {
    padding: 15px !important;
    border-radius: 18px !important;
  }
}
/* =========================================================
   MEROS — GRADUAL BOTTOM SCROLL BLUR
   CSS-ONLY / SALLA RAED
   ========================================================= */

:root {
    --meros-bottom-blur-height: 7rem;
    --meros-bottom-blur-soft: 7px;
    --meros-bottom-blur-strong: 18px;
}


/* =========================================================
   LAYER 01 — WIDE SOFT BLUR
   يبدأ التأثير تدريجيًا من الأعلى
   ========================================================= */

body::before {
    content: "" !important;

    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;
    height:
        calc(
            var(--meros-bottom-blur-height)
            + env(safe-area-inset-bottom)
        ) !important;

    pointer-events: none !important;

    z-index: 40 !important;

    /*
       Blur فعلي للمحتوى الموجود خلف الطبقة
    */
    -webkit-backdrop-filter:
        blur(var(--meros-bottom-blur-soft))
        saturate(108%) !important;

    backdrop-filter:
        blur(var(--meros-bottom-blur-soft))
        saturate(108%) !important;


    /*
       التدرج هو الذي يجعل الـ Blur يختفي تدريجيًا
       كلما صعدنا لأعلى الشاشة
    */
    -webkit-mask-image:
        linear-gradient(
            to top,
            #000 0%,
            rgba(0,0,0,.98) 12%,
            rgba(0,0,0,.86) 28%,
            rgba(0,0,0,.58) 48%,
            rgba(0,0,0,.28) 68%,
            rgba(0,0,0,.08) 84%,
            transparent 100%
        ) !important;

    mask-image:
        linear-gradient(
            to top,
            #000 0%,
            rgba(0,0,0,.98) 12%,
            rgba(0,0,0,.86) 28%,
            rgba(0,0,0,.58) 48%,
            rgba(0,0,0,.28) 68%,
            rgba(0,0,0,.08) 84%,
            transparent 100%
        ) !important;


    /*
       Tint أسود شبه معدوم
       فقط لدمج التأثير مع MEROS
    */
    background:
        linear-gradient(
            to top,
            rgba(5,5,5,.10) 0%,
            rgba(5,5,5,.045) 38%,
            transparent 80%
        ) !important;

    transform: translateZ(0);
    will-change: backdrop-filter;
}


/* =========================================================
   LAYER 02 — STRONGER LOWER BLUR
   يعطي العمق الموجود في GradualBlur الأصلي
   ========================================================= */

body::after {
    content: "" !important;

    position: fixed !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    width: 100% !important;

    height:
        calc(
            var(--meros-bottom-blur-height) * .62
            + env(safe-area-inset-bottom)
        ) !important;

    pointer-events: none !important;

    z-index: 41 !important;


    -webkit-backdrop-filter:
        blur(var(--meros-bottom-blur-strong))
        saturate(112%) !important;

    backdrop-filter:
        blur(var(--meros-bottom-blur-strong))
        saturate(112%) !important;


    -webkit-mask-image:
        linear-gradient(
            to top,
            #000 0%,
            rgba(0,0,0,.94) 22%,
            rgba(0,0,0,.62) 52%,
            rgba(0,0,0,.20) 78%,
            transparent 100%
        ) !important;

    mask-image:
        linear-gradient(
            to top,
            #000 0%,
            rgba(0,0,0,.94) 22%,
            rgba(0,0,0,.62) 52%,
            rgba(0,0,0,.20) 78%,
            transparent 100%
        ) !important;


    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.12),
            transparent 78%
        ) !important;

    transform: translateZ(0);
    will-change: backdrop-filter;
}


/* =========================================================
   MOBILE
   تأثير أخف وأقصر لعدم إخفاء المحتوى
   ========================================================= */

@media (max-width: 767px) {

    :root {
        --meros-bottom-blur-height: 5.5rem;
        --meros-bottom-blur-soft: 6px;
        --meros-bottom-blur-strong: 14px;
    }

}


/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1400px) {

    :root {
        --meros-bottom-blur-height: 8rem;
        --meros-bottom-blur-soft: 8px;
        --meros-bottom-blur-strong: 20px;
    }

}


/* =========================================================
   FALLBACK
   للمتصفحات التي لا تدعم backdrop-filter
   ========================================================= */

@supports not (
    (-webkit-backdrop-filter: blur(1px))
    or
    (backdrop-filter: blur(1px))
) {

    body::before {
        background:
            linear-gradient(
                to top,
                rgba(5,5,5,.48) 0%,
                rgba(5,5,5,.20) 45%,
                transparent 100%
            ) !important;
    }

    body::after {
        display: none !important;
    }
}
/* =========================================================
   MEROS — AZURE & EMBER
   FINAL COLLECTION SURFER HEIGHT FIX
   MUST STAY AT THE VERY END
   ========================================================= */


/* الحاوية الخارجية */
.s-block--bundle-collection-surfer {
    position: relative !important;

    width: 100% !important;

    height: min(78dvh, 760px) !important;
    min-height: 0 !important;
    max-height: 760px !important;

    margin-top: 0 !important;
    margin-bottom: 0 !important;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    overflow: hidden !important;
    overflow: clip !important;

    background: #000000 !important;

    isolation: isolate !important;
}


/* المكوّن نفسه */
.s-block--bundle-collection-surfer
> [component-name="collection-surfer"] {

    position: relative !important;

    display: block !important;

    width: 100% !important;

    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;
    overflow: clip !important;
}


/* منع الـ wrapper الداخلي من زيادة طول القسم */
.s-block--bundle-collection-surfer
> [component-name="collection-surfer"]
> * {

    max-height: 100% !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .s-block--bundle-collection-surfer {

        height: clamp(520px, 72dvh, 640px) !important;
        min-height: 0 !important;
        max-height: 640px !important;

    }

}

/* =========================================================
   MEROS — HOMEPAGE PRODUCT IMAGE CYCLER
   ========================================================= */

/* بطاقات منتجات أقسام الرئيسية فقط */
.s-block custom-salla-product-card .s-product-card-image > a:first-child,
.s-block custom-salla-product-card .s-product-card-image-full > a:first-child {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
}

/* طبقة الصورة التالية */
.s-block custom-salla-product-card img.meros-cycle-overlay {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    opacity: 0 !important;
    pointer-events: none !important;

    transition: opacity 280ms ease !important;
    will-change: opacity;
}

/* إظهار الصورة التالية */
.s-block custom-salla-product-card img.meros-cycle-overlay.is-visible {
    opacity: 1 !important;
}

@media (prefers-reduced-motion: reduce) {
    .s-block custom-salla-product-card img.meros-cycle-overlay {
        display: none !important;
    }
}

/* =========================================================
   MEROS — GLOBAL PAGE TRANSITION LOADER
   ========================================================= */

:root {
  --meros-loader-bg: #f7f4ee;
  --meros-loader-duration: 620ms;

  --meros-cyan: #dffcff;
  --meros-aqua: #9fe7e8;
  --meros-mint: #d7f3df;
  --meros-lavender: #d9cdf7;
  --meros-blush: #f3d5df;
}


/* =========================================================
   FULL SCREEN LAYER
   ========================================================= */

#meros-page-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483000;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at 20% 30%,
      rgba(159, 231, 232, .20),
      transparent 32%
    ),
    radial-gradient(
      circle at 78% 24%,
      rgba(217, 205, 247, .18),
      transparent 36%
    ),
    radial-gradient(
      circle at 58% 78%,
      rgba(243, 213, 223, .16),
      transparent 34%
    ),
    var(--meros-loader-bg);

  opacity: 1;
  visibility: visible;

  transition:
    opacity 480ms cubic-bezier(.22,.61,.36,1),
    visibility 480ms linear;

  overflow: hidden;
  pointer-events: all;

  isolation: isolate;
}


/* hidden state */
#meros-page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* =========================================================
   SOFT BLURRED AURORA
   ========================================================= */

#meros-page-loader::before {
  content: "";

  position: absolute;
  width: min(86vw, 760px);
  aspect-ratio: 1;

  border-radius: 50%;

  background:
    conic-gradient(
      from 30deg,
      rgba(223, 252, 255, .80),
      rgba(159, 231, 232, .72),
      rgba(215, 243, 223, .68),
      rgba(217, 205, 247, .72),
      rgba(243, 213, 223, .70),
      rgba(223, 252, 255, .80)
    );

  filter: blur(90px);
  opacity: .34;

  transform: scale(.8) rotate(0deg);

  animation:
    meros-loader-aurora 5.5s linear infinite;
}


/* =========================================================
   INNER CONTENT
   ========================================================= */

.meros-loader__inner {
  position: relative;
  z-index: 2;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 18px;

  transform-origin: center;

  animation:
    meros-loader-intro 720ms
    cubic-bezier(.16,1,.3,1)
    both;
}


/* =========================================================
   LOGO MASK
   ========================================================= */

.meros-loader__logo {
  position: relative;

  width: clamp(145px, 28vw, 245px);
  aspect-ratio: 4 / 1;

  background:
    linear-gradient(
      110deg,
      #111111 0%,
      #111111 20%,
      var(--meros-cyan) 36%,
      var(--meros-aqua) 47%,
      var(--meros-lavender) 61%,
      var(--meros-blush) 74%,
      #111111 88%,
      #111111 100%
    );

  background-size: 300% 100%;

  -webkit-mask-image: var(--meros-loader-logo);
  mask-image: var(--meros-loader-logo);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;

  animation:
    meros-loader-gradient 1.75s
    cubic-bezier(.65,0,.35,1)
    infinite;
}


/* subtle blurred twin */
.meros-loader__logo::after {
  content: "";

  position: absolute;
  inset: -12%;

  background: inherit;

  -webkit-mask-image: var(--meros-loader-logo);
  mask-image: var(--meros-loader-logo);

  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;

  -webkit-mask-position: center;
  mask-position: center;

  -webkit-mask-size: contain;
  mask-size: contain;

  filter: blur(18px);

  opacity: .16;

  z-index: -1;
}


/* =========================================================
   SMALL LINE UNDER LOGO
   ========================================================= */

.meros-loader__line {
  width: 46px;
  height: 1px;

  overflow: hidden;

  background: rgba(0,0,0,.10);
}

.meros-loader__line::after {
  content: "";

  display: block;

  width: 100%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      #111,
      transparent
    );

  transform: translateX(-120%);

  animation:
    meros-loader-line 1.25s ease-in-out infinite;
}


/* =========================================================
   EXIT MOTION
   ========================================================= */

#meros-page-loader.is-leaving .meros-loader__inner {
  animation:
    meros-loader-out 440ms
    cubic-bezier(.4,0,1,1)
    both;
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes meros-loader-intro {
  0% {
    opacity: 0;
    filter: blur(16px);
    transform: translateY(8px) scale(.965);
  }

  55% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0) scale(1);
  }
}


@keyframes meros-loader-out {
  0% {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }

  100% {
    opacity: 0;
    filter: blur(13px);
    transform: scale(1.025);
  }
}


@keyframes meros-loader-gradient {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}


@keyframes meros-loader-aurora {
  0% {
    transform: scale(.82) rotate(0deg);
  }

  50% {
    transform: scale(1.06) rotate(180deg);
  }

  100% {
    transform: scale(.82) rotate(360deg);
  }
}


@keyframes meros-loader-line {
  0% {
    transform: translateX(-120%);
  }

  100% {
    transform: translateX(120%);
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  #meros-page-loader::before,
  .meros-loader__logo,
  .meros-loader__inner,
  .meros-loader__line::after {
    animation: none !important;
  }
}