/* ==========================================================
   Brew Unit — Brand palette overrides for the Lune theme
   Brand: cobalt #0741AD (from the logo) + ink black + white.
   Paste into: Theme editor > Custom CSS
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600&family=Noto+Kufi+Arabic:wght@400;500;600;700&display=swap');

/* ---------- 1. Global tokens ---------- */
:root:root {
  --brand: #0741AD;        /* logo cobalt */
  --brand-deep: #052F7E;   /* hover */
  --brand-tint: #E8EEFB;   /* soft blue wash */
  --ink: #0B1220;          /* near-black, slightly blue */
  --mist: #F3F5F9;         /* alt section background */
  --line: #DCE1EB;
  --muted: #5B6475;

  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: var(--mist);
  --accent: var(--brand);
  --accent-hover: var(--brand-deep);
  --text: var(--ink);
  --text-muted: var(--muted);
  --border: var(--line);

  --btn-bg: var(--brand);
  --btn-text: #FFFFFF;
  --btn-border: var(--brand);
  --btn-hover-bg: var(--ink);
  --btn-hover-text: #FFFFFF;
  --btn2-bg: transparent;
  --btn2-text: var(--brand);
  --btn2-border: var(--brand);
  --btn2-hover-bg: var(--brand);
  --btn2-hover-text: #FFFFFF;
  --btn-radius: 2px;

  --input-bg: #FFFFFF;
  --input-border: var(--line);
  --input-hover-bg: var(--mist);
  --variant-bg: #FFFFFF;
  --variant-text: var(--ink);
  --variant-border: var(--line);
  --variant-selected-bg: var(--ink);
  --variant-selected-text: #FFFFFF;

  /* header colours (--header-bg, --header-text, --transparent-header-text) are intentionally NOT set here:
     they come from the theme editor so changes there take effect */
  --mobile-menu-bg: #FFFFFF;
  --mobile-menu-card-bg: var(--mist);
  --mobile-menu-text: var(--ink);
  --mobile-menu-accent: var(--brand);
  --mobile-menu-border: var(--line);
  --footer-bg: var(--ink);
  --footer-text: #D5DBE8;

  --font-heading: 'Noto Kufi Arabic', 'IBM Plex Sans Arabic', sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
  --size-h1: 44px;
  --size-h2: 32px;
  --size-h3: 24px;
}

/* ---------- 1b. Section colour schemes ----------
   Every section carries .cs-1/.cs-2/.cs-3 which re-declare the variables,
   so they must be overridden here (this is what caused dark-on-navy text). */
html .cs-1 {                       /* light / white */
  --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: var(--mist);
  --accent: var(--brand); --accent-hover: var(--brand-deep);
  --text: var(--ink); --text-muted: var(--muted); --border: var(--line);
  --btn-bg: var(--brand); --btn-text: #FFFFFF; --btn-border: var(--brand);
  --btn-hover-bg: var(--ink); --btn-hover-text: #FFFFFF;
  --btn2-bg: transparent; --btn2-text: var(--brand); --btn2-border: var(--brand);
  --btn2-hover-bg: var(--brand); --btn2-hover-text: #FFFFFF;
  --input-bg: #FFFFFF; --input-border: var(--line); --input-hover-bg: var(--mist);
  --variant-bg: #FFFFFF; --variant-text: var(--ink); --variant-border: var(--line);
  --variant-selected-bg: var(--ink); --variant-selected-text: #FFFFFF;
}
html .cs-2 {                       /* dark / ink */
  --bg: var(--ink); --surface: var(--ink); --surface-2: #121C33;
  --accent: #6C97F2; --accent-hover: #9DB9F7;
  --text: #FFFFFF; --text-muted: #A9B3C7; --border: #26324D;
  --btn-bg: #FFFFFF; --btn-text: var(--ink); --btn-border: #FFFFFF;
  --btn-hover-bg: var(--brand); --btn-hover-text: #FFFFFF;
  --btn2-bg: transparent; --btn2-text: #FFFFFF; --btn2-border: rgba(255,255,255,.55);
  --btn2-hover-bg: #FFFFFF; --btn2-hover-text: var(--ink);
  --input-bg: rgba(255,255,255,.08); --input-border: transparent; --input-hover-bg: #121C33;
  --variant-bg: #121C33; --variant-text: #FFFFFF; --variant-border: #26324D;
  --variant-selected-bg: #FFFFFF; --variant-selected-text: var(--ink);
}
html .cs-3 {                       /* soft / mist */
  --bg: var(--mist); --surface: var(--mist); --surface-2: var(--brand-tint);
  --accent: var(--brand); --accent-hover: var(--brand-deep);
  --text: var(--ink); --text-muted: var(--muted); --border: var(--line);
  --btn-bg: var(--ink); --btn-text: #FFFFFF; --btn-border: var(--ink);
  --btn-hover-bg: var(--brand); --btn-hover-text: #FFFFFF;
  --btn2-bg: transparent; --btn2-text: var(--ink); --btn2-border: var(--ink);
  --btn2-hover-bg: var(--ink); --btn2-hover-text: #FFFFFF;
  --input-bg: #FFFFFF; --input-border: var(--line); --input-hover-bg: #FFFFFF;
  --variant-bg: #FFFFFF; --variant-text: var(--ink); --variant-border: var(--line);
  --variant-selected-bg: var(--ink); --variant-selected-text: #FFFFFF;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4,
.section__heading, .hero-banner__heading, .image-with-text__heading {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;               /* never add letter-spacing to Arabic */
}

/* ---------- 2. Header (theme's own nav, restyled only) ---------- */
.site-header-wrap.scrolled { box-shadow: 0 6px 24px rgba(11,18,32,.10); }
.header__nav-link { font-weight: 500; font-size: 15px; white-space: nowrap; position: relative; }
.header__nav-link::after {
  content: ''; position: absolute; inset-inline: 0; bottom: -6px; height: 2px;
  background: var(--brand); transform: scaleX(0); transition: transform .3s ease;
}
body.header-transparent .site-header-wrap:not(.scrolled) .header__nav-link::after { background: var(--transparent-header-text, #fff); }
.header__nav-link:hover::after { transform: scaleX(1); }
.header__nav-submenu {
  background: #FFFFFF; border: 1px solid var(--line); border-top: 2px solid var(--brand);
  border-radius: 0; box-shadow: 0 18px 40px rgba(11,18,32,.14);
}
.header__nav-submenu-link { color: var(--ink); }
.header__nav-submenu-link:hover { background: var(--mist); color: var(--brand); }
.cart-badge, .wishlist-badge { background: var(--brand); color: #fff; }
/* Keep the desktop menu on ONE row at every width (tested 1024 / 1100 / 1280 / 1440 / 1920) */
@media (min-width: 1024px) {
  .header__inner { gap: clamp(10px, 1.6vw, 24px) !important; padding-inline: clamp(20px, 4vw, 57.6px) !important; }
  .header__nav { flex-wrap: nowrap !important; gap: 0 clamp(2px, .5vw, 8px) !important; min-width: 0; }
  .header__nav-link { white-space: nowrap !important; font-size: clamp(11.5px, .92vw, 15px) !important; padding-inline: clamp(1px, .2vw, 2px) !important; }
  .header__nav-dropdown { flex: 0 0 auto; }
}
/* narrower laptops: drop the little chevrons, then Home / All products (still reachable via logo + categories) */
@media (min-width: 1024px) and (max-width: 1279px) { .header__nav .nav-chevron { display: none; } }
@media (min-width: 1024px) and (max-width: 1199px) { .header__nav > a.header__nav-link:first-child { display: none; } }
@media (min-width: 1024px) and (max-width: 1099px) { .header__nav > a.header__nav-link:nth-child(2) { display: none; } }

/* ---------- 3. Buttons ---------- */
.btn { font-family: var(--font-body); font-weight: 500; letter-spacing: 0; border-radius: 2px; transition: all .25s ease; }
.hero-banner .btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; }
.hero-banner .btn-primary:hover { background: #fff; border-color: #fff; color: var(--brand); }
.hero-banner .btn-outline { background: transparent; border-color: rgba(255,255,255,.7); color: #fff; }
.hero-banner .btn-outline:hover { background: #fff; border-color: #fff; color: var(--ink); }

/* ---------- 4. Hero ---------- */
/* Premium hero typography: restrained size, light weight, short brand rule, soft entrance */
.hero-banner__inner { max-width: 560px; padding-bottom: clamp(24px, 5vh, 64px); }
.hero-banner__heading {
  color: #FFFFFF; font-size: clamp(28px, 2.9vw, 44px); line-height: 1.35; font-weight: 500;
  letter-spacing: 0; margin: 0 0 14px;
  text-shadow: 0 2px 28px rgba(11,18,32,.45);
}
.hero-banner__heading::before {                 /* short cobalt rule above the title */
  content: ''; display: block; width: 48px; height: 3px; background: var(--brand); margin: 0 0 22px;
}
.hero-banner--center .hero-banner__heading::before { margin-inline: auto; }
.hero-banner__subheading {
  color: rgba(255,255,255,.88); font-weight: 300; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.9;
  max-width: 480px; margin: 0 0 28px; text-shadow: 0 1px 18px rgba(11,18,32,.5);
}
.hero-banner__actions { gap: 12px; }
.hero-banner .btn, .hero-banner .btn--lg {
  padding: 13px 28px; min-height: 0; font-size: 14.5px; font-weight: 500; line-height: 1.5;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-banner__heading, .hero-banner__subheading, .hero-banner__actions {
    animation: bu-rise .9s cubic-bezier(.2,.7,.2,1) both;
  }
  .hero-banner__subheading { animation-delay: .12s; }
  .hero-banner__actions { animation-delay: .24s; }
}
@keyframes bu-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 5. Section headings: short cobalt rule ---------- */
.section__header { text-align: center; margin-bottom: 40px; }
.section__heading::after {
  content: ''; display: block; width: 44px; height: 3px;
  background: var(--accent); margin: 14px auto 0;
}
.section__subheading { color: var(--text-muted); font-weight: 300; }

/* ---------- 6. Category cards ---------- */
.category-card { border-radius: 2px; overflow: hidden; position: relative; }
.category-card__image { transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.category-card:hover .category-card__image { transform: scale(1.06); }
.category-card__overlay {
  background: linear-gradient(180deg, rgba(11,18,32,0) 40%, rgba(11,18,32,.85) 100%) !important;
}
.category-card__label {
  font-family: var(--font-heading); font-weight: 500; color: #FFFFFF;
  border-bottom: 2px solid transparent; padding-bottom: 4px; transition: border-color .3s;
}
.category-card:hover .category-card__label { border-color: #FFFFFF; }

/* ---------- 7. Brands bar ---------- */
.brands-bar { background: #FFFFFF; border-block: 1px solid var(--line); padding-block: 40px; }
/* title: same treatment as the other section headings */
.brands-bar__heading {
  font-family: var(--font-heading); font-size: var(--size-h3); font-weight: 600; line-height: 1.35;
  color: var(--text) !important; text-align: center; margin: 0 0 36px;
}
.brands-bar__heading::after {
  content: ''; display: block; width: 44px; height: 3px; background: var(--accent); margin: 14px auto 0;
}
.brands-bar__item img { filter: grayscale(1); opacity: .65; transition: all .35s ease; }
.brands-bar__item:hover img { filter: none; opacity: 1; }
/* desktop: 8 logos in view instead of 9 (each slot = 1/8 of the strip width) */
@media (min-width: 1024px) {
  .brands-bar__track-wrap { container-type: inline-size; }
  .brands-bar__track { gap: 0; }
  .brands-bar__item { flex: 0 0 calc(100cqw / 8); display: flex; align-items: center; justify-content: center; padding-inline: 16px; box-sizing: border-box; }
  .brands-bar__item img { max-width: 100%; object-fit: contain; }
}

/* ---------- 8. Product cards ---------- */
.product-card { background: transparent; border: 0; }
.product-card__media { background: #FFFFFF; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.product-card__image { transition: transform .6s ease; mix-blend-mode: multiply; }
.product-card:hover .product-card__image { transform: scale(1.04); }
.product-card__name, .product-card__name a { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--accent); }
.product-card__short-desc { color: var(--text-muted); font-weight: 300; }
.product-card__price, .product-card__price .price-current { font-weight: 600; color: var(--accent); }
.product-card__cta-btn { border-radius: 2px; }
.badge { border-radius: 2px; background: var(--brand); color: #fff; font-weight: 500; }
.carousel-btn { border-radius: 0; border: 1px solid var(--line); background: #fff; color: var(--ink); }
.carousel-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }

/* ---------- 8b. Featured products with a side banner (every default "featured products" section) ----------
   Banner image + badge + heading + text are generated with CSS (::before / ::after).
   Each section sets its own banner through 4 variables in section 8c below:
     --bn-img (url), --bn-badge, --bn-title, --bn-text (quoted strings). */
.featured-products {
  --bn-img: url("https://media.zid.store/1ec758d1-2a4e-44da-a97d-aab1582f8898/8548af5a-954e-44cc-8485-c66fdb84613b.jpg");
  --bn-badge: "عرض الأسبوع";
  --bn-title: "خصومات تصل إلى 50%";
  --bn-text: "تشكيلة مختارة من المنتجات الأكثر طلباً بأسعار مخفّضة لفترة محدودة.";
  padding-block: clamp(48px, 6vw, 80px); border-top: 1px solid var(--line);
}
.featured-products .container::before {
  content: ""; display: block; height: 220px; margin-bottom: 20px; border-radius: 2px;
  background:
    linear-gradient(to top, rgba(11,18,32,.88) 0%, rgba(11,18,32,.45) 55%, rgba(11,18,32,0) 100%),
    var(--bn-img) var(--bn-pos, center) / cover no-repeat;
}
.featured-products .section__header { text-align: start; margin-bottom: 24px; }
.featured-products .section__heading { font-size: var(--size-h3); }
.featured-products .section__heading::after { margin: 14px 0 0; }
.featured-products .section__footer { margin: 24px 0 0; }
/* "عرض الكل" as a cobalt text link instead of an outlined button */
.featured-products .section__footer .btn {
  background: transparent; border: 0; padding: 0; min-height: 0; height: auto;
  color: var(--brand); font-size: 14px; font-weight: 500;
}
.featured-products .section__footer .btn:hover { color: var(--brand-deep); background: transparent; }
@media (min-width: 1024px) {
  .featured-products .container {
    --gut: max(32px, 4vw);                              /* the theme's own container padding */
    --bn-w: calc((100% - 2 * var(--gut)) * .24);        /* banner column width */
    position: relative; display: grid; grid-template-columns: 24% minmax(0, 1fr); column-gap: 20px; align-items: start;
  }
  .featured-products .container::before { grid-column: 1; grid-row: 1 / span 2; height: auto; min-height: 420px; margin: 0; align-self: stretch; }
  .featured-products .section__header { grid-column: 2; grid-row: 1; justify-self: start; }
  .featured-products .carousel-wrapper { grid-column: 2; grid-row: 2; min-width: 0; }
  .featured-products .section__footer { grid-column: 2; grid-row: 1; justify-self: end; align-self: end; margin: 0 0 6px; }
  /* banner text, laid over the banner (positioned against .container; none of these three parents is positioned/transformed) */
  .featured-products .section__header::before {            /* badge */
    content: var(--bn-badge); position: absolute; z-index: 2; top: 12px; inset-inline-start: calc(var(--gut) + 12px);
    padding: 5px 12px; border-radius: 2px; background: var(--brand); color: #FFFFFF;
    font-family: var(--font-body); font-size: 12px; font-weight: 600; line-height: 1.4;
  }
  .featured-products .section__header::after {             /* heading, with the short cobalt line above it */
    content: var(--bn-title); position: absolute; z-index: 2; bottom: 113px;
    inset-inline-start: calc(var(--gut) + 22px); inline-size: calc(var(--bn-w) - 44px); padding-top: 17px;
    font-family: var(--font-heading); font-size: clamp(19px, 1.6vw, 24px); font-weight: 600; line-height: 1.4; color: #FFFFFF;
    background: linear-gradient(var(--brand), var(--brand)) top right / 40px 3px no-repeat;
  }
  html[dir="ltr"] .featured-products .section__header::after { background-position: top left; }
  .featured-products .section__footer::before {            /* paragraph (bottom-anchored, up to 3 lines) */
    content: var(--bn-text); position: absolute; z-index: 2; bottom: 24px;
    inset-inline-start: calc(var(--gut) + 22px); inline-size: calc(var(--bn-w) - 44px);
    display: flex; align-items: flex-end; min-height: 75px;
    font-family: var(--font-body); font-size: 14px; font-weight: 300; line-height: 25px; color: rgba(255,255,255,.88);
  }
}

/* ---------- 8c. Banner per products section ----------
   One rule per section, matched by the section's id ([section-id="..."]).
   To change a banner: edit its --bn-img url, or its --bn-badge / --bn-title / --bn-text. */

/* 1. معدات تحضير الإسبريسو */
[section-id="e19340ca-14a8-407f-aee3-1ecdcdbdab7a"] { /* آلات الإسبريسو */
  --bn-img: url("https://media.zid.store/1ec758d1-2a4e-44da-a97d-aab1582f8898/e646c312-995b-4597-b926-5e17562dc4d4.jpg");
  --bn-badge: "الأكثر طلباً"; --bn-title: "مكائن تصنع الفرق";
  --bn-text: "مكائن إسبريسو احترافية من أفضل العلامات الإيطالية لثبات الجودة في كل كوب.";
}
[section-id="951bec3e-753d-4cb3-a023-fead331de884"] { /* مطاحن الإسبريسو */
  --bn-img: url("https://media.zid.store/1ec758d1-2a4e-44da-a97d-aab1582f8898/64d40eeb-9376-4e59-b5e4-476c025e89e0.jpg");
  --bn-badge: "دقة الطحن"; --bn-title: "طحن ثابت لكل جرعة";
  --bn-text: "مطاحن احترافية تمنحك تحكماً دقيقاً بحجم الطحن وثباتاً في الاستخلاص.";
}
[section-id="3dd48988-71ce-4e7a-8e85-88b43b80f9e8"] { /* حلول القهوة الذكية (المكابس) */
  --bn-img: url("https://media.zid.store/1ec758d1-2a4e-44da-a97d-aab1582f8898/5d8b2348-4104-4a9f-be46-a51aacec27dd.jpg");
  --bn-badge: "تقنية ذكية"; --bn-title: "كبس مثالي بلمسة واحدة";
  --bn-text: "مكابس أوتوماتيكية تضمن ضغطاً متساوياً وتوفر الوقت في أوقات الذروة.";
}

/* 2. معدات تقطير القهوة (ملحقات مكائن التقطير has 0 products, so no section for it) */
[section-id="eba1fbb5-bb82-4f83-83ce-17f23ff45fc4"] { /* مكائن تقطير القهوة الاحترافية */
  --bn-img: url("https://media.zid.store/1ec758d1-2a4e-44da-a97d-aab1582f8898/06d628a8-016f-4c4c-973f-2516aee305ca.jpg");
  --bn-badge: "للطلبات العالية"; --bn-title: "قهوة مقطرة بكميات كبيرة";
  --bn-text: "أجهزة تقطير احترافية بتحكم رقمي بالحرارة لنتائج ثابتة طوال اليوم.";
}
[section-id="24920c4d-2e52-465f-ae12-9766061db1ca"] { /* مطاحن القهوة المقطرة */
  --bn-img: url("https://media.zid.store/1ec758d1-2a4e-44da-a97d-aab1582f8898/0c263471-24ba-46f7-96ae-0dc5a100b146.jpg");
  --bn-badge: "طحن للفلتر"; --bn-title: "نكهة أوضح في كل كوب";
  --bn-text: "مطاحن مخصصة للقهوة المقطرة بطحن متجانس يبرز تفاصيل المحصول.";
}

/* 3. معدات الحلويات والسخانات */
[section-id="0ba29d91-9105-4408-989b-c56811bb5327"] { /* اجهزة تسخين الشوكولاتة */
  --bn-img: url("https://media.zid.store/1ec758d1-2a4e-44da-a97d-aab1582f8898/966090af-ea90-4ec9-b9ab-defaf6e8504b.jpg");
  --bn-badge: "للحلويات"; --bn-title: "شوكولاتة جاهزة دائماً";
  --bn-text: "أجهزة تسخين تحافظ على قوام الشوكولاتة وحرارتها المثالية طوال اليوم.";
}
[section-id="7f7689dc-9030-4103-8c88-d54b96b72366"] { /* اجهزة الوافل وألبان كيك */
  --bn-img: url("https://media.zid.store/1ec758d1-2a4e-44da-a97d-aab1582f8898/b2062aec-0379-4894-bb17-276f0fbe02d4.jpg");
  --bn-badge: "للمقاهي والحلويات"; --bn-title: "وافل وبان كيك";
  --bn-text: "صانعات تجارية متينة لإنتاج ثابت وجودة عالية في كل دفعة.";
}

/* 4. صانعات الثلج و معدات التبريد */
[section-id="f948d66b-2eff-4cc0-9f3c-b9788cbbe5ff"] { /* معدات الآيس كريم */
  --bn-img: url("https://media.zid.store/1ec758d1-2a4e-44da-a97d-aab1582f8898/355901c2-b598-438c-adff-100d83b6beac.jpg");
  --bn-badge: "سوفت سيرف"; --bn-title: "آيس كريم بقوام مثالي";
  --bn-text: "مكائن آيس كريم احترافية لإنتاج مستمر في المواسم المزدحمة.";
}
[section-id="6ba01309-abc8-4ac0-9463-2482119c8ab9"] { /* موزعات العصير والسلاش */
  --bn-img: url("https://media.zid.store/1ec758d1-2a4e-44da-a97d-aab1582f8898/84b31643-9a2e-4f65-96c0-441938fd1673.jpg");
  --bn-badge: "مشروبات باردة"; --bn-title: "انتعاش يجذب عملاءك";
  --bn-text: "موزعات تحافظ على برودة المشروب وتعرضه بشكل جذاب أمام العميل.";
}
[section-id="3d5599f2-591a-404f-b42e-2f44c8e03c18"] { /* صانعات الثلج */
  --bn-img: url("https://media.zid.store/1ec758d1-2a4e-44da-a97d-aab1582f8898/cdc91e90-c3f6-4184-9d8d-fc8fe7b2ef0e.jpg");
  --bn-badge: "إنتاج يومي"; --bn-title: "ثلج صافٍ لكل مشروب";
  --bn-text: "صانعات ثلج احترافية بأشكال وأحجام تناسب كل مشروب.";
}
[section-id="243c1f9d-7648-4aff-99ec-0c72c21b0d88"] { /* معدات التبريد اسفل الكونتر */
  --bn-img: url("https://media.zid.store/1ec758d1-2a4e-44da-a97d-aab1582f8898/986de821-9cb5-4e9a-8fc6-c8edc7fde8b6.jpg");
  --bn-badge: "توفير المساحة"; --bn-title: "تبريد تحت يدك";
  --bn-text: "ثلاجات أسفل الكاونتر تمنحك مساحة عمل إضافية وتبريداً قريباً.";
}
[section-id="3d46546d-6fff-4672-92f2-ed15391dc297"] { /* ثلاجات العرض */
  --bn-img: url("https://media.zid.store/1ec758d1-2a4e-44da-a97d-aab1582f8898/8453b035-7e20-4a08-bdaa-fdcb100dafe3.webp"); --bn-pos: 72% center;
  --bn-badge: "عرض جذاب"; --bn-title: "اعرض منتجاتك بأناقة";
  --bn-text: "ثلاجات عرض بإضاءة واضحة تحافظ على المنتجات وتزيد المبيعات.";
}
[section-id="e1bfb933-c718-47a8-9786-3705c4d0d590"] { /* معدات التبريد القائمة */
  --bn-img: url("https://media.zid.store/1ec758d1-2a4e-44da-a97d-aab1582f8898/19656984-421d-42f8-ac1f-b9de6147d683.jpg");
  --bn-badge: "سعة كبيرة"; --bn-title: "تخزين أبرد بسعة أكبر";
  --bn-text: "ثلاجات قائمة من الستانلس ستيل للمطابخ والمقاهي المزدحمة.";
}

/* ---------- 9. Image + text blocks ---------- */
.image-with-text { background: var(--bg); }
.image-with-text__img { border-radius: 2px; }
.image-with-text__heading { font-weight: 600; color: var(--text); }
.image-with-text__body { color: var(--text-muted); font-weight: 300; line-height: 1.9; }
.image-with-text.cs-2 .image-with-text__body { color: rgba(255,255,255,.78); }

/* ---------- 10. FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item__question { font-family: var(--font-heading); font-weight: 500; color: var(--text); }

/* ---------- 11. Footer ---------- */
.site-footer { border-top: 3px solid var(--brand); }
.footer__nav-title, .footer__contact-title, .footer__newsletter-title { color: #FFFFFF; font-family: var(--font-heading); font-weight: 500; }
.footer__nav-link, .footer__contact-link { color: rgba(213,219,232,.78); transition: color .2s; }
.footer__nav-link:hover, .footer__contact-link:hover { color: #FFFFFF; }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.12); }

/* ---------- 12. Mobile ---------- */
@media (max-width: 767px) {
  :root:root { --size-h1: 30px; --size-h2: 24px; }
  .hero-banner__subheading { font-size: 15px; }
  .brands-bar { padding-block: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}