/* ==========================================================================
   Allure Nails — Blush-inspired homepage
   Scoped entirely to body.blush-home, so booking/community/login/admin remain
   visually untouched. Design implementation uses Allure's existing data.
   ========================================================================== */

body.blush-home {
    --bh-pink: #f8dcdb;
    --bh-pink-soft: #fff3f1;
    --bh-black: #111111;
    --bh-gray: #545454;
    --bh-line: #e8e8e8;
    --bh-white: #ffffff;
    --bh-content: min(1100px, calc(100vw - 48px));
    --bh-ease: cubic-bezier(.22, 1, .36, 1);
    --bh-ease-power3: cubic-bezier(.16, 1, .3, 1);
    --bh-ease-back: cubic-bezier(.34, 1.56, .64, 1);
    --bh-from: -110%;
    background: #fff;
    color: var(--bh-black);
    /* القالب المرجعي: جسم النص Karla 15px / line-height 22px (=1.4667) / #545454 */
    font-size: 15px;
    line-height: 1.5;
}

/* الموقع RTL بالكامل: اتجاه دخول الأسطر/الأشرطة يحاكي اتجاه القراءة (من اليمين) */
body.blush-home[dir="rtl"],
body.blush-home [dir="rtl"] {
    --bh-from: 110%;
}

@keyframes bhSlideMask {
    from { transform: translateX(var(--bh-from, -110%)); }
    to   { transform: translateX(0); }
}

@keyframes bhPop {
    from { opacity: 0; transform: scale(.88); }
    to   { opacity: 1; transform: scale(1); }
}

/* دخول ديكور الشرائح القديم (.blush-hero__decor-item): تكبير خفيف فقط */
@keyframes bhDecorInLegacy {
    from { transform: scale(.9); }
    to   { transform: none; }
}

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

body.blush-home,
body.blush-home p,
body.blush-home a,
body.blush-home h1,
body.blush-home h2,
body.blush-home h3,
body.blush-home h4,
body.blush-home h5,
body.blush-home h6,
body.blush-home span,
body.blush-home div,
body.blush-home li {
    /* Tajawal يعطي العربية نفس الطابع الهندسي النظيف لخط Karla في Blush. */
    font-family: 'Tajawal', 'Cairo', sans-serif !important;
}

/* القالب المرجعي لا يعرض بانرات PWA/Push فوق الـ Hero؛ تبقى متاحة في بقية الصفحات. */
body.blush-home #smart-pwa-banner,
body.blush-home #allure-noti-banner {
    display: none !important;
}

body.blush-home .blush-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* --------------------------------------------------------------------------
   النافيجيشن بار (الهيدر) يبقى كما هو تماماً في الصفحة الرئيسية — بلا أي إعادة
   تنسيق. يُترك ليُعرض بتصميم الموقع الأصلي (menu.css / rose-theme.css) مثل بقية
   الصفحات، بناءً على طلب المستخدم. لا تُضِف هنا أي قاعدة تمسّ #header أو النافبار.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Shared building blocks
   -------------------------------------------------------------------------- */
.blush-main {
    /* عرض واضح إلزامي: الهيدر يحتوي عناصر float (الشعار + قائمة wsmenu) غير
       مُصفّرة بالكامل داخله؛ أي عنصر تالٍ له overflow!=visible سيدخل BFC جديد
       ويحاول "الالتفاف" حول ذلك الـ float فينكمش عرضه تلقائياً بلا سبب ظاهر.
       width:100% يُبطل حساب shrink-to-fit هذا ويضمن العرض الكامل دائماً. */
    width: 100%;
    overflow: hidden;
    background: #fff;
}

.blush-shell {
    width: var(--bh-content);
    margin-inline: auto;
}

.blush-kicker,
.blush-zigzag {
    display: inline-block;
    color: var(--bh-black);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
}

.blush-zigzag {
    font-size: 32px;
    line-height: .5;
    transform: rotate(180deg);
    margin-bottom: 18px;
}

.blush-zigzag--small {
    font-size: 22px;
    margin: 12px 0;
}

.blush-reveal--pending {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .65s var(--bh-ease), transform .65s var(--bh-ease);
}

.blush-reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

/* الزر مطابق لـ .qodef-btn في القالب: 14px/600 uppercase، ارتفاع 56px،
   حشوة داخلية 13px عمودياً + 35px جهة النص و20px جهة الأيقونة، وفاصل رأسي
   قبل الأيقونة (هامش 29px ثم خط 1px ثم حشوة 19px). القيم مقيسة من الموقع الحي. */
.blush-button {
    display: inline-flex;
    align-items: center;
    padding-block: 13px;
    padding-inline: 35px 20px;
    border: 1px solid var(--bh-black);
    background: transparent;
    color: var(--bh-black);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    line-height: 28px;
    transition: color .3s var(--bh-ease), background .3s var(--bh-ease), border-color .3s var(--bh-ease);
}

.blush-button i {
    font-style: normal;
    font-size: 16px;
    line-height: 28px;
    margin-inline-start: 29px;
    padding-inline-start: 19px;
    border-inline-start: 1px solid currentColor;
}

.blush-button:hover {
    background: var(--bh-pink);
    border-color: var(--bh-pink);
    color: var(--bh-black);
}

.blush-button--dark {
    background: var(--bh-black);
    color: #fff;
}

.blush-button--dark:hover {
    background: var(--bh-pink);
    border-color: var(--bh-pink);
    color: var(--bh-black);
}

.blush-button--light {
    background: #fff;
    color: var(--bh-black);
}

.blush-button--light:hover {
    background: var(--bh-pink);
    border-color: var(--bh-pink);
}

/* --------------------------------------------------------------------------
   Main hero — 1:1 rebuild of the Blush Revolution Slider hero:
   real per-slide background + layered decor images + white "highlight bars"
   behind each headline line + per-line mask-reveal text animation.
   -------------------------------------------------------------------------- */
.blush-hero {
    width: 100%; /* انظري ملاحظة shrink-to-fit في .blush-main أعلاه */
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* نسبة الهيرو = شبكة تصميم القالب 1920×805 (=41.93%)، فتنطبق نِسَب مواضع
       الطبقات على الخلفية المركّبة تماماً كـ Revolution Slider. 671px@1600 مطابق. */
    height: clamp(460px, 41.93vw, 805px);
    background: #fff;
}

.blush-hero__stage {
    position: absolute;
    inset: 0;
}

.blush-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .5s ease;
}

.blush-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

.blush-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.blush-hero__decor {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

/* عكس أفقي للشرائح التي يكون فيها الموديل أصلاً على اليمين (1 و3) لنقله لليسار.
   نعكس الخلفية وحاوية الديكور معاً فقط (تبقى مواضع الديكور متطابقة مع الموديل
   المعكوس)، بينما يبقى النص (blush-hero__content) بلا عكس ليظل مقروءاً. */
.blush-hero__slide--flip .blush-hero__bg,
.blush-hero__slide--flip .blush-hero__decor {
    transform: scaleX(-1);
}

.blush-hero__decor-item {
    position: absolute;
    z-index: var(--z, 4);
    left: var(--dl, auto);
    right: var(--dr, auto);
    top: var(--dt, auto);
    bottom: var(--db, auto);
    width: var(--dw, 160px);
    display: block;
    /* مرئي افتراضياً لضمان المتانة؛ حركة الدخول (bhPop) مجرد تحسين فوق ذلك.
       نتفادى إبقاءها opacity:0 المعتمد على fill-mode أثناء دورة replay السلايدر. */
    opacity: 1;
    transform: none;
    animation-duration: .8s;
    animation-timing-function: var(--bh-ease);
    animation-fill-mode: both;
    animation-delay: var(--delay, 0ms);
    animation-name: none;
}

.blush-hero__slide.bh-play .blush-hero__decor-item { animation-name: bhDecorInLegacy; }

.blush-hero__decor-item img {
    display: block;
    width: 100%;
    height: auto;
}

/* المحتوى (عنوان/نص/زر) مثبّت بموضع طبقة النص في القالب: --c-left/--c-top نِسَب
   من الشبكة، --c-w عرض الكتلة. النص عربي محاذى لليمين داخل الكتلة. */
.blush-hero__content {
    position: absolute;
    top: var(--c-top, 20%);
    left: var(--c-left, 20%);
    width: var(--c-w, 27%);
    z-index: 20;
    padding: 0;
    /* الترتيب المعكوس المطلوب: النص على اليمين والموديل على اليسار في كل الشرائح.
       النص عربي محاذى لليمين (direction:rtl طبيعي) في كل الشرائح. */
    text-align: right;
}

.blush-hero__content--right,
.blush-hero__content--left { right: auto; }

.blush-hero__bars {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.bh-bar {
    position: absolute;
    background: #fff;
    opacity: .95;
    transform: translateX(var(--bh-from, -110%));
    animation-duration: 1s;
    animation-timing-function: var(--bh-ease-back);
    animation-fill-mode: forwards;
    animation-delay: var(--bh-delay, 0ms);
    animation-name: none;
}

.blush-hero__slide.bh-play .bh-bar { animation-name: bhSlideMask; }

/* عنوان الهيرو مطابق لكابشن Revolution Slider: 92px@1600 / 70px@1280 / وزن 700
   / line-height ضيق (~0.85 بالأصل؛ نرفعه قليلاً لسلامة الحروف العربية). */
.blush-hero__title {
    position: relative;
    z-index: 1;
    margin: 0 0 18px;
    color: #000;
    font-weight: 700;
    font-size: clamp(42px, 5.8vw, 92px);
    line-height: 1;
    letter-spacing: normal;
}

.blush-hero__text {
    position: relative;
    z-index: 1;
    margin: 0 0 26px;
    max-width: 400px;
    margin-inline: 0;
    color: #545454;
    font-size: 15px;
    line-height: 1.5;
}

.bh-line-mask {
    display: block;
    overflow: hidden;
    line-height: inherit;
}

.bh-line-inner {
    display: inline-block;
    transform: translateX(var(--bh-from, -110%));
    animation-duration: .9s;
    animation-timing-function: var(--bh-ease-power3);
    animation-fill-mode: forwards;
    animation-delay: var(--bh-delay, 0ms);
    animation-name: none;
}

.blush-hero__slide.bh-play .bh-line-inner { animation-name: bhSlideMask; }

.blush-hero__cta {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding-block: 13px;
    padding-inline: 35px 20px;
    border: 1px solid var(--bh-black);
    background: #fff;
    color: var(--bh-black);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    line-height: 28px;
    opacity: 0;
    transform: translateY(14px);
    animation-duration: .7s;
    animation-timing-function: var(--bh-ease-power3);
    animation-fill-mode: forwards;
    animation-delay: 1.05s;
    animation-name: none;
    transition: background .3s var(--bh-ease), color .3s var(--bh-ease), border-color .3s var(--bh-ease);
}

.blush-hero__slide.bh-play .blush-hero__cta { animation-name: bhFadeUp; }

.blush-hero__cta:hover { background: var(--bh-pink); border-color: var(--bh-pink); color: var(--bh-black); }
.blush-hero__cta i {
    font-style: normal;
    font-size: 16px;
    line-height: 28px;
    margin-inline-start: 29px;
    padding-inline-start: 19px;
    border-inline-start: 1px solid currentColor;
}

.blush-hero__arrow {
    position: absolute;
    top: 50%;
    z-index: 4;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(0,0,0,.45);
    border-radius: 0;
    background: rgba(255,255,255,.35);
    color: var(--bh-black);
    cursor: pointer;
    transition: background .25s ease, border-color .25s ease;
}

.blush-hero__arrow:hover {
    background: #fff;
    border-color: var(--bh-black);
}

.blush-hero__arrow svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
}

.blush-hero__arrow--prev { left: 18px; }
.blush-hero__arrow--next { right: 18px; }

.blush-hero__dots {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 24px;
    display: flex;
    gap: 9px;
    transform: translateX(-50%);
}

.blush-hero__dots button {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 1px solid rgba(0,0,0,.6);
    border-radius: 50%;
    background: rgba(255,255,255,.5);
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}

.blush-hero__dots button.is-active {
    background: var(--bh-black);
    transform: scale(1.12);
}

/* --------------------------------------------------------------------------
   Editorial image/text split
   -------------------------------------------------------------------------- */
.blush-split {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: clamp(66px, 9vw, 120px) 0;
    background: #fff;
}

.blush-split--intro {
    background: #fff; /* خلفية بيضا بالكامل — بلا ألوان (الألوان من الديكور فقط) */
}

/* الباراالاكس الرمادي خلف قسم "عن الصالون" مُعطّل ليبقى القسم أبيض نقياً */
body.blush-home .blush-parallax-bg { display: none !important; }

.blush-split__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(300px, 4fr);
    align-items: center;
    gap: clamp(38px, 7vw, 100px);
}

/* --------------------------------------------------------------------------
   خلفية باراالاكس: نفس أسلوب القالب (يعيد استخدام صور الهيرو كخلفية شفّافة
   خلف قسمي intro/services بسرعة تمرير مختلفة عن المحتوى الأمامي)
   -------------------------------------------------------------------------- */
.blush-parallax-bg {
    position: absolute;
    inset: -18% 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.blush-parallax-bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.05);
    opacity: .22;
    transform: translateY(0) scale(1.08);
    will-change: transform;
}

body.blush-home.blush-parallax-ready .blush-parallax-bg img {
    transition: none; /* الحركة تُضبط بالجافاسكريبت بالإطار (rAF) لا بـ CSS transition */
}

.blush-split__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* عناوين الأقسام مطابقة للقالب: 38px ديسكتوب / 26px موبايل، وزن 700، لون أسود
   خالص، line-height ضيق. نُبطل letter-spacing الموجب المتسرّب من ثيم الموقع
   لأنه يفكّك وصل الحروف العربية (القالب الأصلي يستخدم تباعداً سالباً لاتينياً). */
.blush-split__copy h2,
.blush-feature__copy h2,
.blush-booking-banner__copy h2,
.blush-hours__copy h2,
.blush-section-heading h2 {
    margin: 0 0 12px;
    color: #000;
    font-weight: 700;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.1;
    letter-spacing: normal;
}

.blush-split__copy p,
.blush-feature__copy p,
.blush-booking-banner__copy p,
.blush-hours__copy p,
.blush-section-heading p {
    margin: 0 0 25px;
    color: var(--bh-gray);
    font-size: 15px;
    line-height: 1.5;
}

.blush-feature-list {
    padding: 0;
    margin: 0 0 26px;
    list-style: none;
}

.blush-feature-list li {
    position: relative;
    padding-inline-start: 17px;
    margin-bottom: 8px;
    color: var(--bh-black);
    font-size: 14px;
    font-weight: 700;
}

.blush-feature-list li::before {
    content: '•';
    position: absolute;
    inset-inline-start: 0;
    color: #e95f80;
}

/* --------------------------------------------------------------------------
   Gray/pink featured block (same arrangement as template's second feature)
   -------------------------------------------------------------------------- */
.blush-feature {
    width: 100%; /* انظري ملاحظة shrink-to-fit في .blush-main */
    position: relative;
    overflow: hidden;
    padding: clamp(60px, 9vw, 120px) 0;
    background: #fff;
}

.blush-feature__texture {
    display: none; /* بلا خلفية/تكستشر ملوّن — القسم أبيض نقي */
}

.blush-feature__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr);
    align-items: center;
    gap: clamp(40px, 7vw, 96px);
}

.blush-feature__copy {
    padding-inline-start: clamp(0px, 3vw, 45px);
}

.blush-feature__media {
    position: relative;
}

.blush-feature__media::after {
    content: '';
    position: absolute;
    inset: 9% 8%;
    border: 1px solid rgba(255,255,255,.65);
    pointer-events: none;
}

.blush-feature__media img {
    display: block;
    width: 100%;
    height: auto;
}

/* --------------------------------------------------------------------------
   Five-image strip
   -------------------------------------------------------------------------- */
.blush-look-strip {
    width: 100%; /* انظري ملاحظة shrink-to-fit في .blush-main */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    overflow: hidden;
}

.blush-look-strip__item {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #eee;
}

.blush-look-strip__item img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .65s var(--bh-ease);
}

.blush-look-strip__item:hover img { transform: scale(1.08); }

/* --------------------------------------------------------------------------
   Pricing table — three minimal tables like the template
   -------------------------------------------------------------------------- */
.blush-pricing {
    position: relative;
    padding: clamp(72px, 10vw, 125px) 0;
    background: #fff;
}

.blush-pricing::before { display: none; }

.blush-pricing > .blush-shell { position: relative; }

.blush-section-heading {
    max-width: 670px;
    margin: 0 auto clamp(35px, 5vw, 60px);
    text-align: center;
}

.blush-price-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}

.blush-price-card {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--bh-black);
    min-height: 100%;
}

.blush-price-card h3 {
    margin: 0;
    padding: 16px 19px;
    border-bottom: 1px solid var(--bh-black);
    color: #000;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: normal;
}

.blush-price-card ul {
    list-style: none;
    padding: 0 19px;
    margin: 0;
}

.blush-price-card li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid var(--bh-line);
    color: var(--bh-gray);
    font-size: 13px;
}

.blush-price-card li:last-child { border-bottom: 0; }
.blush-price-card strong { color: var(--bh-black); font-size: 13px; white-space: nowrap; }
.blush-pricing__action { margin-top: 38px; text-align: center; }

/* --------------------------------------------------------------------------
   Existing Allure services mapped to the template's three editorial cards
   -------------------------------------------------------------------------- */
.blush-services {
    width: 100%;
    position: relative;
    overflow: hidden;
    padding: clamp(70px, 9vw, 115px) 0;
    background: #fff;
}

.blush-services > .blush-shell {
    position: relative;
    z-index: 1;
}

.blush-service-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

.blush-service-card {
    border: 1px solid var(--bh-line);
    background: #fff;
    transition: transform .35s var(--bh-ease), box-shadow .35s var(--bh-ease);
}

.blush-service-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--bh-shadow-md);
}

.blush-service-card > img {
    display: block;
    width: 100%;
    aspect-ratio: 1.48 / 1;
    object-fit: cover;
}

.blush-service-card__body { padding: 24px 22px 22px; }
/* عنوان البطاقة مطابق لـ h3 بالقالب: 24px ديسكتوب / 22px موبايل، وزن 700، lh 1.16 */
.blush-service-card h3 { margin: 0; color: #000; font-size: clamp(22px, 2vw, 24px); font-weight: 700; line-height: 1.16; letter-spacing: normal; }
.blush-service-card p { margin: 8px 0 18px; color: var(--bh-gray); font-size: 14px; line-height: 1.5; }
.blush-service-card a { color: var(--bh-black); font-size: 13px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; text-decoration: none; }
.blush-service-card a:hover { color: #e95f80; }

/* --------------------------------------------------------------------------
   Booking banner — replaces the template newsletter with a real action
   -------------------------------------------------------------------------- */
.blush-booking-banner {
    width: 100%; /* انظري ملاحظة shrink-to-fit في .blush-main */
    overflow: hidden;
    padding: clamp(64px, 8vw, 105px) 0;
    background: #fff;
}

.blush-booking-banner__grid {
    display: grid;
    grid-template-columns: minmax(280px, 5fr) minmax(0, 6fr);
    align-items: center;
    gap: clamp(35px, 7vw, 90px);
}

.blush-booking-banner__copy { padding-inline-start: clamp(0px, 4vw, 55px); }
.blush-booking-banner__media img { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Working hours
   -------------------------------------------------------------------------- */
.blush-hours {
    padding: clamp(70px, 9vw, 120px) 0;
    background: #fff;
}

.blush-hours__grid {
    display: grid;
    grid-template-columns: minmax(260px, 4fr) minmax(300px, 6fr);
    align-items: start;
    gap: clamp(40px, 8vw, 110px);
}

.blush-hours__table { border-top: 1px solid var(--bh-black); }
.blush-hours__row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px;
    align-items: baseline;
    padding: 16px 0;
    border-bottom: 1px solid var(--bh-line);
}

.blush-hours__row strong { color: var(--bh-black); font-size: 15px; }
.blush-hours__row span { border-bottom: 2px dotted #d7d7d7; }
.blush-hours__row time { color: var(--bh-gray); font-size: 13px; direction: ltr; }

/* --------------------------------------------------------------------------
   Brand logos
   -------------------------------------------------------------------------- */
.blush-brands {
    padding: 42px 0;
    background: #fff;
    border-top: 1px solid var(--bh-line);
    border-bottom: 1px solid var(--bh-line);
}

.blush-brands p {
    margin: 0 0 25px;
    color: var(--bh-gray);
    font-size: 13px;
    text-align: center;
}

.blush-brands__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    align-items: center;
    gap: 18px;
}

.blush-brands__grid div {
    display: grid;
    place-items: center;
    min-height: 52px;
}

.blush-brands__grid img {
    max-width: 100%;
    max-height: 38px;
    filter: grayscale(1);
    opacity: .63;
    transition: filter .3s ease, opacity .3s ease;
}

.blush-brands__grid div:hover img { filter: grayscale(0); opacity: 1; }

/* --------------------------------------------------------------------------
   Existing Allure gallery
   -------------------------------------------------------------------------- */
.blush-gallery {
    padding: clamp(66px, 8vw, 108px) 0 0;
    background: #fff;
}

.blush-gallery .blush-section-heading { margin-bottom: 40px; }
.blush-gallery__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.blush-gallery__grid a {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #eee;
}

.blush-gallery__grid img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .65s var(--bh-ease);
}

.blush-gallery__grid a:hover img { transform: scale(1.07); }

/* --------------------------------------------------------------------------
   Footer adaptation — keep existing footer functionality, align visual tone
   -------------------------------------------------------------------------- */
body.blush-home .footer {
    background: #fff;
    border-top: 1px solid var(--bh-line);
}

body.blush-home .footer a { color: var(--bh-black); }
body.blush-home .footer a:hover { color: #e95f80; }

/* --------------------------------------------------------------------------
   إصلاح حرج: قالب wsmenu (menu.css) يجمّد html بـ overflow:hidden;height:100%
   لكل الشاشات ≤991px بشكل دائم (وليس فقط عند فتح المنيو — تلك حالتها محمية
   أصلاً بـ body.wsactive{overflow:hidden} منفصلة). نتيجة ذلك: html لا يتمرّر
   أبداً و body يصبح هو الحاوية الفعلية للتمرير، فتتعطل كل الأكواد التي تعتمد
   على window.scrollY / حدث scroll على window (وهذا سبب غياب الباراالاكس على
   الموبايل تحديداً). نُبطل هذا القفل فقط داخل صفحتنا (body.blush-home) دون
   لمس menu.css نفسها حتى لا تتأثر صفحات أخرى.
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    html:has(body.blush-home) {
        overflow: visible !important;
        height: auto !important;
    }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    body.blush-home { --bh-content: min(100% - 40px, 820px); }
    .blush-split__grid,
    .blush-feature__grid,
    .blush-booking-banner__grid,
    .blush-hours__grid {
        grid-template-columns: 1fr;
    }

    .blush-feature__media { order: -1; }
    .blush-hero__content { --c-w: min(46%, 520px); }
    .blush-gallery__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 767px) {
    body.blush-home { --bh-content: calc(100% - 34px); }

    /* ارتفاع الهيرو على الجوال مطابق للقالب تماماً (قِيس 520px عند 414px عرض) */
    .blush-hero { height: 520px; }

    .blush-hero__content,
    .blush-hero__content--right,
    .blush-hero__content--left { z-index: 3; }

    /* بؤرة كل صورة على وجه الموديل (صورنا مركّبة: الموديل+الوردي في JPG واحد،
       بخلاف القالب الذي يفصل الوردي كطبقة مسطحة، لذا نُبرز الموديل ونضع لوحاً
       فاتحاً موضعياً خلف النص يقوم مقام "منطقة الوردي" الفاتحة في القالب). */
    /* القالب يُظهر بعض طبقات الصور على الجوال (data-vbility) ويُخفي الباقي:
       نُظهر ذوات mob=1 بمواضعها الخاصة بالجوال (--md*)، ونُخفي ذوات mob=0 (--nomob). */
    .blush-hero__decor-item--nomob { display: none; }
    .blush-hero__decor-item {
        width: var(--mdw, var(--dw));
        left: var(--mdl, var(--dl, auto));
        right: var(--mdr, var(--dr, auto));
        top: var(--mdt, var(--dt, auto));
        bottom: var(--mdb, var(--db, auto));
    }
    /* الخلفية على الجوال مطابقة تماماً لكانفس القالب: قِيس أن القالب يرسم الصورة
       المركّبة بأسلوب cover/center داخل موديول 390×520 (تحقّقنا بمطابقة البكسل مع
       كانفس القالب الحقيقي). نعرض نفس الوسم <img> بـ object-fit:cover مع بؤرة مركزية
       نتجاوز بها بؤرة الديسكتوب (المضبوطة inline لكل شريحة). */
    .blush-hero__slide { background-color: #fff; }
    /* بؤرة الخلفية على الجوال لكل شريحة (--mobjpos): تضع الموديل يساراً والمنطقة
       الفاتحة/الوردية يميناً (تحت النص) بعد منطق العكس، مطابقةً لأسلوب التمبليت. */
    .blush-hero__bg { object-position: var(--mobjpos, 22% 26%) !important; }

    /* القالب على الجوال يضع نص كل الشرائح أعلى اليسار بقياسات ثابتة (قِيست من القالب:
       العنوان عند x=30,y=90 / الوصف y=224 / الزر y=372 داخل موديول 390×520). */
    .blush-hero__content,
    .blush-hero__content--right,
    .blush-hero__content--left {
        width: min(285px, calc(100% - 46px));
        top: 90px;
        bottom: auto;
        left: auto;
        right: 30px;
        transform: none;
        text-align: right;
        padding: 0;
    }

    .blush-hero__title { color: #000; }
    .blush-hero__text {
        margin-inline: 0;
        max-width: none;
        margin-bottom: 20px;
        color: #545454;
        font-size: 16px;
        line-height: 1.55;
    }

    /* عنوان القالب على الجوال 50px بارتفاع سطر ~0.83؛ نُبقي line-height أوسع قليلاً
       لسلامة الحروف العربية مع الحفاظ على الحجم البصري نفسه. */
    .blush-hero__title {
        margin-bottom: 14px;
        font-size: clamp(38px, 12.8vw, 50px);
        line-height: 1;
        letter-spacing: normal;
    }

    /* الأشرطة البيضاء خلف العنوان مُفعّلة على الجوال أيضاً كما في القالب */
    .bh-bar { opacity: .92; }

    .blush-hero__arrow { display: none; }
    .blush-hero__dots { bottom: 16px; z-index: 5; }
    .blush-hero__dots button { border-color: rgba(0,0,0,.5); background: rgba(255,255,255,.6); }
    .blush-hero__dots button.is-active { background: #000; }

    .blush-split__grid,
    .blush-feature__grid,
    .blush-booking-banner__grid,
    .blush-hours__grid { gap: 32px; }

    .blush-price-grid,
    .blush-service-grid { grid-template-columns: 1fr; }
    .blush-look-strip { grid-template-columns: repeat(3, 1fr); }
    .blush-look-strip__item:nth-child(n+4) { display: none; }
    .blush-gallery__grid { grid-template-columns: repeat(3, 1fr); }
    .blush-hours__row { grid-template-columns: auto 1fr; }
    .blush-hours__row span { display: none; }
    .blush-hours__row time { grid-column: 2; }
}

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

    .blush-hero__decor-item,
    .bh-bar,
    .bh-line-inner,
    .blush-hero__cta,
    body.blush-home .blush-hero.blush-has-deco .blush-deco img {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ==========================================================================
   إضافات النسخة الحية: ديكوريشنز الأقسام + أسعار عمودين + وسائط الساعات +
   صورة إنستغرام مفردة + kicker. كلها مقيّدة داخل body.blush-home.
   ========================================================================== */

/* ديكوريشنز تتداخل مع الكتابة (قابلة للتحكم من الأدمن) */
body.blush-home .blush-has-deco { position: relative; }
body.blush-home .blush-deco-layer {
    position: absolute;
    inset: 0;
    /* z-index:auto مقصود: حتى لا تُنشئ سياق تكديس يحبس عناصر «فوق الكتابة».
       المحتوى z-index:1 يبقى فوق الديكور الخلفي، وديكور «فوق» يرتفع لـ z-index:3. */
    z-index: auto;
    pointer-events: none;
    overflow: hidden;
}
body.blush-home .blush-deco {
    position: absolute;
    display: block;
}
/* ديكور «فوق الكتابة»: يرتفع فوق المحتوى (z-index:1) ويسمح بمرور النقر خلاله */
body.blush-home .blush-deco--front { z-index: 3; pointer-events: none; }
body.blush-home .blush-deco img { display: block; width: 100%; height: auto; }

/* ديكور الهيرو: فوق الخلفية وتحت/حول النص */
body.blush-home .blush-hero.blush-has-deco .blush-deco-layer { z-index: 2; }
body.blush-home .blush-hero.blush-has-deco .blush-deco--front { z-index: 4; }

/* دخول ديكور الهيرو — scale .9→1 مع تأخير متدرج (Rev Slider st:200..600, sp:700) */
body.blush-home .blush-hero.blush-has-deco .blush-deco img {
    opacity: 0;
    transform: scale(.9);
    animation-duration: 700ms;
    animation-timing-function: var(--bh-ease);
    animation-fill-mode: both;
    animation-delay: var(--bh-deco-delay, 0ms);
    animation-name: none;
}
/* الحركة مربوطة بتفعيل كل شريحة (bh-play يُعاد عند كل تبديل) فتُعاد حركة
   ديكور الشريحة النشطة تلقائياً — كل شريحة لها ديكوريشناتها الخاصة. */
body.blush-home .blush-hero__slide.bh-play .blush-deco img {
    animation-name: bhDecorIn;
}
@keyframes bhDecorIn {
    from { opacity: 0; transform: scale(.9); }
    to   { opacity: 1; transform: none; }
}

/* نضمن ظهور محتوى الأقسام فوق الديكور */
body.blush-home .blush-has-deco .blush-shell,
body.blush-home .blush-has-deco .blush-section-heading { position: relative; z-index: 1; }

/* عنوان تمهيدي صغير (kicker) */
body.blush-home .blush-kicker {
    display: block;
    margin-bottom: 10px;
    color: #c56b86;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .6px;
}

/* الأسعار — عمودان بنمط Blush النظيف */
body.blush-home .blush-price-2col {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
    max-width: 980px;
    margin-inline: auto;
}
body.blush-home .blush-price-card ul { list-style: none; padding: 0 20px; margin: 0; }
body.blush-home .blush-price-card li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 0;
    border-bottom: 1px solid var(--bh-line);
    color: var(--bh-gray);
    font-size: 14px;
}
body.blush-home .blush-price-card li:last-child { border-bottom: 0; }
body.blush-home .blush-price-name { color: var(--bh-black); font-weight: 600; white-space: nowrap; }
body.blush-home .blush-price-dots { flex: 1 1 auto; border-bottom: 2px dotted #e2c9d1; transform: translateY(-4px); }
body.blush-home .blush-price-card strong { color: var(--bh-black); font-size: 14px; white-space: nowrap; }

/* وسائط قسم الساعات (صورتان) */
body.blush-home .blush-hours__media {
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 12px;
    margin: 22px 0 26px;
}
body.blush-home .blush-hours__media img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 230px;
    object-fit: cover;
    border-radius: 4px;
}

/* إنستغرام — صورة واحدة كبيرة بدل الجريد */
body.blush-home .blush-insta { width: 100%; overflow: hidden; }
body.blush-home .blush-insta__card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 6;
    overflow: hidden;
    text-decoration: none;
}
body.blush-home .blush-insta__card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .8s var(--bh-ease);
}
body.blush-home .blush-insta__card:hover img { transform: scale(1.05); }
body.blush-home .blush-insta__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: #fff;
    background: linear-gradient(180deg, rgba(30,10,18,.10), rgba(30,10,18,.42));
}
body.blush-home .blush-insta__label { font-size: clamp(20px, 3vw, 34px); font-weight: 800; letter-spacing: .5px; }
body.blush-home .blush-insta__handle {
    font-size: clamp(14px, 1.5vw, 18px);
    font-weight: 700;
    padding: 8px 20px;
    border: 1px solid rgba(255,255,255,.85);
    border-radius: 2px;
    transition: background .3s var(--bh-ease), color .3s var(--bh-ease);
}
body.blush-home .blush-insta__card:hover .blush-insta__handle { background: #fff; color: var(--bh-black); }

@media (max-width: 767px) {
    body.blush-home .blush-price-2col { grid-template-columns: 1fr; }
    body.blush-home .blush-insta__card { aspect-ratio: 4 / 3; }
    /* على الجوال: نُخفي كل ديكور الهيرو عدا الأول لكل شريحة (data-vbility بالقالب).
       الديكور الظاهر يُصغَّر ويُزوّى أسفل اليسار بعيداً عن وجه الموديل والنص. */
    body.blush-home .blush-hero .blush-deco--nomob { display: none !important; }
    body.blush-home .blush-hero .blush-deco:not(.blush-deco--nomob) {
        width: 30% !important;
        top: auto !important;
        bottom: 5% !important;
        left: 3% !important;
        right: auto !important;
        transform: none !important;
        opacity: .92;
    }
    /* ديكور الأقسام الأخرى يبقى بسلوكه الأصلي على الجوال */
    body.blush-home .blush-deco--nomob { display: none !important; }
}