/* Neutral white and light-grey surfaces inspired by the Haier reference. */
body{background:#fff;background-image:none}
header{background:#fff;border-bottom-color:#e5e5e5}
header .company-logo{mix-blend-mode:multiply}
footer{background:#ededed;border-top-color:#dedede}
body .hero,body .showcase-stage,body .showcase-slide{background:#f5f5f5;border-color:#e8e8e8}
body .hero .scene{background:linear-gradient(135deg,#eeeeee,#f8f8f8)}
body .showcase-orbit{background:linear-gradient(135deg,#e6e6e6,#f0f0f0)}
body .brand-photo-grid .brand-cover{background:#f5f5f5}
body .contact-team,body .catalog-tools,body .retailer-entry{background:#f5f5f5;border-color:#e5e5e5}
/* Restrained accents drawn from the Mahmalji logo. */
body .hero{border-top:3px solid #338dc3;box-shadow:0 12px 35px #253c4d08}
body .hero .copy{background:radial-gradient(ellipse at 0 0,#338dc30c,transparent 65%)}
body .hero .btn{background:#267fb3;border:1px solid #267fb3;box-shadow:0 5px 15px #267fb318;transition:background .2s,transform .2s}
body .hero .btn:hover{background:#206c99;transform:translateY(-2px)}
body .showcase-stage{border-inline-start:3px solid #338dc3}
body .showcase-heading h2:after,body .pagehead h1:after{content:'';display:block;width:48px;height:3px;background:#e94743;margin-top:19px;border-radius:2px}
body .brand-photo-grid .brand{position:relative;transition:border-color .2s,box-shadow .2s,transform .2s}
body .brand-photo-grid .brand:hover{border-color:#338dc3;box-shadow:0 10px 28px #338dc314}
body .brand-photo-grid .brand small{color:#287ead}
body .brand-photo-grid .brand:after{content:'';position:absolute;bottom:0;inset-inline-start:calc(50% - 20px);height:2px;width:40px;background:#e94743}
body .category-number{color:#338dc3}
body .contact-team{border-bottom:3px solid #338dc3}
body footer{border-top:2px solid #338dc3;background:#f5f5f5}
@media(prefers-reduced-motion:reduce){body .hero .btn,body .brand-photo-grid .brand{transition:none}}
/* More readable Arabic typography, without affecting the English layout. */
html[lang="ar"] body{font-family:"Segoe UI",Tahoma,Arial,sans-serif;font-size:17px;line-height:1.85}
html[lang="ar"] body h1,html[lang="ar"] body h2,html[lang="ar"] body h3{font-family:"Segoe UI",Tahoma,Arial,sans-serif;letter-spacing:0;line-height:1.55;font-weight:600}
html[lang="ar"] body nav{font-size:16px}
html[lang="ar"] body .sub,html[lang="ar"] body .copy p,html[lang="ar"] body .empty,html[lang="ar"] body .contact-info p,html[lang="ar"] body .contact-hours p,html[lang="ar"] body .contact-team p,html[lang="ar"] body .showcase-copy p{font-size:17px;line-height:1.95;color:#4d5962}
html[lang="ar"] body .contact-social a,html[lang="ar"] body .btn,html[lang="ar"] body .showcase-link,html[lang="ar"] body .discovery-links a{font-size:16px}
html[lang="ar"] body .eyebrow,html[lang="ar"] body .brand-photo-grid .brand small,html[lang="ar"] body footer{font-size:13px;letter-spacing:0;line-height:1.8}
html[lang="ar"] body .product h3{font-size:18px;line-height:1.6}
html[lang="ar"] body .catalog-tools label{font-size:14px}
html[lang="ar"] body .catalog-tools input,html[lang="ar"] body .catalog-tools select{font-family:inherit;font-size:16px}
html[lang="ar"] body .spec-list,html[lang="ar"] body .details p{font-size:17px;line-height:1.9}
html[lang="ar"] body .language button{font-family:inherit;font-size:14px}
@media(max-width:650px){html[lang="ar"] body nav{font-size:14px;gap:8px;flex-wrap:wrap}html[lang="ar"] body .copy h1{font-size:36px}html[lang="ar"] body .contact-grid h2{font-size:30px}}
html[lang="ar"] body .pagehead p.sub{font-family:Tahoma,Arial,sans-serif;font-size:18px;font-weight:400;line-height:1.8;color:#424c55;margin-top:12px;letter-spacing:0;max-width:680px}
html[lang="ar"] body .pagehead h1{margin-bottom:12px}
html[lang="ar"] body .pagehead h1:after{margin-top:12px}
/* Lighter, more balanced Arabic display headings. */
html[lang="ar"] body .pagehead h1{font-size:36px;font-weight:500;line-height:1.5}
html[lang="ar"] body .copy h1{font-size:38px;font-weight:500;line-height:1.5}
html[lang="ar"] body h2,html[lang="ar"] body .contact-grid h2,html[lang="ar"] body .showcase-heading h2{font-size:27px;font-weight:500;line-height:1.6}
html[lang="ar"] body .showcase-copy h3{font-size:30px;font-weight:500;line-height:1.5}
@media(max-width:650px){html[lang="ar"] body .pagehead h1,html[lang="ar"] body .copy h1{font-size:30px}html[lang="ar"] body h2,html[lang="ar"] body .contact-grid h2,html[lang="ar"] body .showcase-heading h2{font-size:24px}}

/* A pale-blue pause between the white home collections. */
body #app .category-discovery {
  margin-inline: 3%;
  padding: 44px 3%;
  background: #edf5fb;
  border: 1px solid #e0edf6;
  border-radius: 18px;
}
body #app .category-discovery .discovery-links a { border-bottom-color: #d7e5ef; }
body #app .category-discovery .small-appliance-entry { background: transparent; }
@media (max-width: 530px) {
  body #app .category-discovery { padding: 30px 4%; border-radius: 14px; }
}

/* Soft blue introductions for the company and support pages. */
html body #app .pagehead:has(+ :is(.about-story, .care-page, .contact-content)) {
  margin: 24px 3% 20px;
  padding: 28px 3% 30px;
  background: linear-gradient(110deg, #eaf3fa 0%, #f3f8fc 100%);
  border: 1px solid #e0edf6;
  border-radius: 18px;
}
html body #app .pagehead:has(+ :is(.about-story, .care-page, .contact-content)) h1 {
  color: #214b64;
  margin-block: 14px 14px;
}
html body #app .pagehead:has(+ :is(.about-story, .care-page, .contact-content)) h1:after {
  background: #e94743;
  width: 40px;
  height: 2px;
  margin-top: 16px;
}
html body #app .pagehead:has(+ :is(.about-story, .care-page, .contact-content)) .sub { color: #445b6a; }
html body #app .pagehead:has(+ :is(.about-story, .care-page, .contact-content)) .crumb { color: #526d7e; }
html body #app .pagehead:has(+ .contact-content) { margin-bottom: 12px; }
html[lang='ar'] body #app .pagehead:has(+ :is(.about-story, .care-page, .contact-content)) {
  background: linear-gradient(250deg, #eaf3fa 0%, #f3f8fc 100%);
}
@media (max-width: 530px) {
  html body #app .pagehead:has(+ :is(.about-story, .care-page, .contact-content)) {
    margin-top: 18px;
    padding: 22px 4% 24px;
    border-radius: 14px;
  }
}