/* ========================================================= LAFIIT — BRAND FONTS ========================================================= */ @import url("https://fonts.googleapis.com/css2?family=El+Messiri:wght@600;700&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap"); /* ========================================================= LAFIIT — MAIN HERO NATIONAL DAY MESSAGE ========================================================= */ .s-block--fixed-banner { position: relative !important; } /* ========================================================= MAIN HERO ONLY ========================================================= */ .s-block--fixed-banner:first-of-type::after { content: "يا وطن الطيب.. دامك أمان\Aودام لقلوبنا سكينة ذكرك"; white-space: pre-line !important; position: absolute !important; z-index: 20 !important; left: 50% !important; bottom: 45% !important; transform: translateX(-50%) !important; width: min(90%, 760px) !important; margin: 0 !important; padding: 10px 20px !important; direction: rtl !important; text-align: center !important; font-family: "El Messiri", sans-serif !important; font-size: clamp(21px, 3vw, 38px) !important; font-weight: 600 !important; line-height: 1.65 !important; letter-spacing: 0 !important; color: #F8F4EC !important; text-shadow: 0 2px 10px rgba(13, 31, 20, 0.45), 0 1px 3px rgba(13, 31, 20, 0.35) !important; pointer-events: none !important; } /* ========================================================= MOBILE — MAIN HERO NATIONAL DAY MESSAGE ========================================================= */ @media (max-width: 767px) { .s-block--fixed-banner:first-of-type::after { bottom: 20% !important; left: 50% !important; width: 90% !important; padding: 5px 8px !important; font-family: "El Messiri", sans-serif !important; font-size: clamp(17px, 4.6vw, 21px) !important; font-weight: 600 !important; line-height: 1.7 !important; text-align: center !important; color: #F8F4EC !important; text-shadow: 0 2px 9px rgba(13, 31, 20, 0.5), 0 1px 3px rgba(13, 31, 20, 0.35) !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .s-block--fixed-banner:first-of-type::after { bottom: 20% !important; width: 92% !important; padding: 4px 6px !important; font-size: 17px !important; line-height: 1.75 !important; } } /* ========================================================= LAFIIT — STORE TYPOGRAPHY ========================================================= */ /* الخط الأساسي */ html, body, body.theme-rad, .app-inner, #app, main#main-content { font-family: "IBM Plex Sans Arabic", sans-serif !important; } /* ========================================================= النصوص العامة ========================================================= */ body p, body span, body a, body li, body label, body small, body strong { font-family: "IBM Plex Sans Arabic", sans-serif !important; } /* ========================================================= HEADINGS ========================================================= */ body h1, body h2, body h3, body h4, body h5, body h6 { font-family: "El Messiri", sans-serif !important; font-weight: 600 !important; } /* ========================================================= HEADER / NAVIGATION ========================================================= */ header.store-header *, header.store-header a, header.store-header span, header.store-header button, #mainnav *, #mainnav a { font-family: "IBM Plex Sans Arabic", sans-serif !important; } /* ========================================================= PRODUCT CARDS ========================================================= */ .s-product-card-entry *, .s-product-card-content *, .s-product-card-price, .s-product-card-price *, .s-product-card-content-footer * { font-family: "IBM Plex Sans Arabic", sans-serif !important; } /* عناوين المنتجات */ .s-product-card-content-title, .s-product-card-content-title a { font-family: "El Messiri", sans-serif !important; font-weight: 600 !important; } /* ========================================================= BUTTONS ========================================================= */ button, button *, .s-button *, .s-button-btn *, .s-button-element *, salla-button *, salla-add-product-button * { font-family: "IBM Plex Sans Arabic", sans-serif !important; } /* ========================================================= FOOTER ========================================================= */ .store-footer *, footer.store-footer * { font-family: "IBM Plex Sans Arabic", sans-serif !important; } .store-footer h1, .store-footer h2, .store-footer h3, .store-footer h4, footer.store-footer h1, footer.store-footer h2, footer.store-footer h3, footer.store-footer h4 { font-family: "El Messiri", sans-serif !important; font-weight: 600 !important; } /* ========================================================= INPUTS ========================================================= */ input, textarea, select, input::placeholder, textarea::placeholder { font-family: "IBM Plex Sans Arabic", sans-serif !important; } /* ========================================================= LAFIIT 96 — TYPOGRAPHY ========================================================= */ .lafiit-96-html-section, .lafiit-96-html-section p, .lafiit-96-html-section span, .lafiit-96-html-support, .lafiit-96-html-tamara { font-family: "IBM Plex Sans Arabic", sans-serif !important; } .lafiit-96-html-title, .lafiit-96-html-highlight, .lafiit-96-html-price { font-family: "El Messiri", sans-serif !important; } /* ========================================================= NATIONAL DAY HERO TEXT ========================================================= */ .s-block--fixed-banner:first-of-type::after { font-family: "El Messiri", sans-serif !important; font-weight: 600 !important; } /* ========================================================= LAFIIT 96 — OFFER SECTION ========================================================= */ .lafiit-96-html-section { --lafiit-96-cream: #F8F4EC; --lafiit-96-cream-light: #FBF8F2; --lafiit-96-dark-green: #16281D; --lafiit-96-deep-green: #0D1F14; --lafiit-96-gold: #AD8748; --lafiit-96-text: #22201A; --lafiit-96-text-soft: #625F57; --lafiit-96-border: #E2DCCB; position: relative !important; display: block !important; width: 100% !important; margin: 0 !important; padding: 48px 28px !important; background: #F8F4EC !important; direction: rtl !important; text-align: right !important; color: var(--lafiit-96-text) !important; font-family: "IBM Plex Sans Arabic", sans-serif !important; box-sizing: border-box !important; } /* ========================================================= RESET INSIDE OFFER ========================================================= */ .lafiit-96-html-section *, .lafiit-96-html-section *::before, .lafiit-96-html-section *::after { box-sizing: border-box !important; } /* ========================================================= MAIN OFFER SHELL ========================================================= */ .lafiit-96-html-shell { position: relative !important; width: 100% !important; max-width: 1160px !important; min-height: 500px !important; margin: 0 auto !important; display: grid !important; grid-template-columns: 47% 53% !important; direction: ltr !important; overflow: hidden !important; background: #F8F4EC !important; border: 1px solid #E2DCCB !important; border-radius: 28px !important; box-shadow: 0 24px 60px -34px rgba(13, 31, 20, 0.35) !important; } /* ========================================================= IMAGE SIDE ========================================================= */ .lafiit-96-html-visual { position: relative !important; order: 1 !important; min-width: 0 !important; width: 100% !important; display: flex !important; align-items: stretch !important; justify-content: stretch !important; padding: 20px !important; background: radial-gradient( 120% 90% at 70% 10%, rgba(173, 135, 72, 0.14), transparent 60% ), linear-gradient( 180deg, #FBF8F2 0%, #F2ECE0 100% ) !important; } /* ========================================================= IMAGE FRAME ========================================================= */ .lafiit-96-html-image-frame { position: relative !important; width: 100% !important; height: 100% !important; min-height: 460px !important; overflow: hidden !important; border-radius: 20px !important; background: #EFE9DD !important; } /* ========================================================= PRODUCT IMAGE ========================================================= */ .lafiit-96-html-image { display: block !important; position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; object-fit: cover !important; object-position: center center !important; } /* ========================================================= CONTENT SIDE ========================================================= */ .lafiit-96-html-content { order: 2 !important; min-width: 0 !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; gap: 14px !important; padding: 42px 48px !important; direction: rtl !important; text-align: right !important; background: #F8F4EC !important; } /* ========================================================= EYEBROW ========================================================= */ .lafiit-96-html-eyebrow { display: inline-flex !important; align-items: center !important; width: fit-content !important; margin: 0 0 2px !important; padding: 7px 14px !important; border: 1px solid rgba(173, 135, 72, 0.25) !important; border-radius: 999px !important; background: rgba(173, 135, 72, 0.07) !important; color: #AD8748 !important; font-family: "IBM Plex Sans Arabic", sans-serif !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.4 !important; } /* ========================================================= TITLE ========================================================= */ .lafiit-96-html-title { margin: 0 !important; padding: 0 !important; font-family: "El Messiri", sans-serif !important; font-size: clamp(36px, 4vw, 52px) !important; font-weight: 600 !important; line-height: 1.25 !important; letter-spacing: -0.5px !important; color: #0D1F14 !important; } .lafiit-96-html-title span { color: #AD8748 !important; font-weight: 700 !important; } /* ========================================================= LEAD TEXT ========================================================= */ .lafiit-96-html-lead { max-width: 520px !important; margin: 2px 0 0 !important; padding: 0 !important; font-family: "IBM Plex Sans Arabic", sans-serif !important; font-size: clamp(16px, 1.7vw, 19px) !important; font-weight: 400 !important; line-height: 1.9 !important; color: #22201A !important; } /* ========================================================= HIGHLIGHT ========================================================= */ .lafiit-96-html-highlight { display: block !important; width: 100% !important; max-width: 520px !important; margin: 4px 0 2px !important; padding: 14px 18px !important; border: 1px solid rgba(173, 135, 72, 0.42) !important; border-radius: 14px !important; background: rgba(173, 135, 72, 0.08) !important; color: #0D1F14 !important; font-family: "El Messiri", sans-serif !important; font-size: clamp(17px, 2vw, 21px) !important; font-weight: 600 !important; line-height: 1.65 !important; text-align: right !important; } /* ========================================================= SUPPORT TEXT ========================================================= */ .lafiit-96-html-support { max-width: 500px !important; margin: 0 !important; padding: 0 !important; color: #625F57 !important; font-family: "IBM Plex Sans Arabic", sans-serif !important; font-size: 14.5px !important; font-weight: 400 !important; line-height: 1.9 !important; } /* ========================================================= PRICE ========================================================= */ .lafiit-96-html-price { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; margin: 4px 0 2px !important; padding: 0 !important; color: #0D1F14 !important; font-family: "El Messiri", sans-serif !important; font-size: clamp(38px, 4vw, 50px) !important; font-weight: 700 !important; line-height: 1.1 !important; } /* ========================================================= PRICE NOTE ========================================================= */ .lafiit-96-html-price small { display: block !important; margin-top: 5px !important; color: #625F57 !important; font-family: "IBM Plex Sans Arabic", sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.5 !important; opacity: 0.8 !important; } /* ========================================================= CTA ========================================================= */ .lafiit-96-html-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 360px !important; min-height: 58px !important; margin: 2px 0 0 !important; padding: 14px 26px !important; border: 1px solid transparent !important; border-radius: 14px !important; background: #0D1F14 !important; color: #F8F4EC !important; font-family: "IBM Plex Sans Arabic", sans-serif !important; font-size: 16px !important; font-weight: 600 !important; line-height: 1.4 !important; text-align: center !important; text-decoration: none !important; cursor: pointer !important; box-shadow: 0 14px 28px -18px rgba(13, 31, 20, 0.9) !important; transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease !important; } .lafiit-96-html-cta:hover { background: #16281D !important; color: #F8F4EC !important; transform: translateY(-2px) !important; box-shadow: 0 18px 34px -18px rgba(13, 31, 20, 0.95) !important; } /* ========================================================= TAMARA ========================================================= */ .lafiit-96-html-tamara { margin: -3px 0 0 !important; padding: 0 !important; color: #625F57 !important; font-family: "IBM Plex Sans Arabic", sans-serif !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.5 !important; opacity: 0.9 !important; } /* ========================================================= TABLET — OFFER ========================================================= */ @media (min-width: 768px) and (max-width: 1023px) { .lafiit-96-html-section { padding: 36px 20px !important; } .lafiit-96-html-shell { grid-template-columns: 48% 52% !important; min-height: 460px !important; border-radius: 24px !important; } .lafiit-96-html-visual { padding: 16px !important; } .lafiit-96-html-image-frame { min-height: 420px !important; border-radius: 16px !important; } .lafiit-96-html-content { padding: 34px 30px !important; gap: 12px !important; } .lafiit-96-html-title { font-size: 40px !important; } .lafiit-96-html-lead { font-size: 16px !important; } .lafiit-96-html-highlight { font-size: 18px !important; } } /* ========================================================= MOBILE — OFFER ========================================================= */ @media (max-width: 767px) { .lafiit-96-html-section { padding: 24px 14px !important; } .lafiit-96-html-shell { display: flex !important; flex-direction: column !important; width: 100% !important; min-height: 0 !important; border-radius: 22px !important; overflow: hidden !important; } .lafiit-96-html-visual { order: 1 !important; width: 100% !important; padding: 12px !important; } .lafiit-96-html-image-frame { width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 1 / 0.82 !important; border-radius: 16px !important; } .lafiit-96-html-content { order: 2 !important; width: 100% !important; padding: 28px 22px 30px !important; align-items: stretch !important; justify-content: flex-start !important; gap: 12px !important; text-align: right !important; } .lafiit-96-html-eyebrow { align-self: flex-start !important; font-size: 12px !important; padding: 6px 12px !important; } .lafiit-96-html-title { font-size: clamp(30px, 9vw, 40px) !important; line-height: 1.3 !important; } .lafiit-96-html-lead { max-width: none !important; font-size: 15px !important; line-height: 1.85 !important; } .lafiit-96-html-highlight { max-width: none !important; padding: 12px 14px !important; font-size: 17px !important; line-height: 1.65 !important; } .lafiit-96-html-support { max-width: none !important; font-size: 13.5px !important; line-height: 1.85 !important; } .lafiit-96-html-price { margin-top: 3px !important; font-size: 38px !important; line-height: 1.1 !important; } .lafiit-96-html-price small { margin-top: 4px !important; font-size: 10.5px !important; opacity: 0.75 !important; } .lafiit-96-html-cta { width: 100% !important; max-width: none !important; min-height: 56px !important; font-size: 15px !important; border-radius: 13px !important; } .lafiit-96-html-tamara { text-align: right !important; font-size: 11.5px !important; } } /* ========================================================= SMALL MOBILE — OFFER ========================================================= */ @media (max-width: 380px) { .lafiit-96-html-section { padding: 20px 10px !important; } .lafiit-96-html-visual { padding: 9px !important; } .lafiit-96-html-content { padding: 24px 18px 26px !important; } .lafiit-96-html-title { font-size: 29px !important; } .lafiit-96-html-highlight { font-size: 16px !important; } .lafiit-96-html-cta { min-height: 53px !important; font-size: 14px !important; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .lafiit-96-html-cta { transition: none !important; } } /* ========================================================= حجز مساحة البانرات قبل التحميل — يمنع تنطيط الصفحة ========================================================= */ img[src*="6ee1e468-d395-41e9-81b1"] { aspect-ratio: 1440 / 803; } img[src*="d1e283a4-fe98-4781-8fc1"] { aspect-ratio: 1440 / 481; } img[src*="66e83281-5740-41bf-ad7a"] { aspect-ratio: 400 / 336; }