/* Cool porcelain surfaces and an editorial rhythm for Mahmalji. */
:root {
  --page-surface: #f3f6f8;
  --surface-line: #d8e3ea;
  --text-reading: #485e6d;
  --text-accent: #22678f;
}
html body {
  background-color: var(--page-surface);
  background-image: radial-gradient(ellipse 80% 640px at 100% 5%, #dfebf3 0%, transparent 80%);
  color: #253642;
}
html body header { background: #fff; border-bottom: 1px solid #dbe5eb; }
html body #nav a { color: #4f606c; }
html body #nav a:hover, html body #nav a[aria-current='page'] { color: #174d6c; }
html body .notice { background: #eaf0f4; color: #5b6c79; }
html body #app .section { padding-block: 52px; }
html body #app .section-title { margin-bottom: 30px; }
html body #app .eyebrow { color: #22678f; font-size: 12px; }
html body #app :is(.model,.crumb,.filter-summary,.category-number) { color: #526a79; }
html body #app .signature-hero .eyebrow { color: #d4ecfa; }
html body #app .brand-showcase { margin-block: 58px; }
html body #app .showcase-stage {
  background: #ebf1f5;
  border: 1px solid #d3e0e9;
  border-inline-start: 3px solid #338dc3;
  box-shadow: 0 14px 38px #21435a08;
}
html body #app .showcase-slide { background: transparent; }
html body #app .showcase-orbit { background: linear-gradient(135deg, #d1e3ee, #e4edf2); }
html body #app .showcase-copy p { color: #4c606e; }
html body #app .showcase-tabs button { color: #4f6573; border-color: #cedce5; font-size: 14px; }
html body #app .showcase-tabs button[aria-pressed='true'] { color: #1c4159; border-color: #e94743; }
html body #app :is(.showcase-counter,.showcase-tab-number) { color: #526a79; font-size: 12px; }
html body #app .showcase-controls button { width: 40px; height: 40px; background: #fff; }
html body #app .category-discovery {
  background: linear-gradient(112deg, #dbeaf3, #edf4f8 68%);
  border-color: #cbdfe9;
  padding-block: 38px;
}
html body #app .category-discovery h2 { color: #204c67; }
html body #app .category-discovery .discovery-links a { border-color: #c8dce8; min-height: 60px; }
html body #app .discovery-links small { color: #506779; font-size: 12px; }
html body #app .home-brands {
  margin: 48px 3% 0;
  padding: 48px 3%;
  border: 1px solid #dce5eb;
  border-radius: 20px;
  background: #ffffffb8;
}
html body #app .brand-photo-grid { gap: 22px !important; }
html body #app .brand-photo-grid .brand { border-color: #d7e1e8; box-shadow: 0 5px 16px #193d5305; }
html body #app .brand-photo-grid .brand-cover { background: linear-gradient(140deg, #eaf0f4, #f5f7f8); }
html body #app .brand-photo-grid .brand:after { display: none; }
html body #app .brand-photo-grid .brand small { font-size: 12px; color: #246b93; }
html body #app .home-collection {
  margin: 48px 3% 0;
  padding: 44px 3% 20px;
  border-top: 1px solid #cadbe6;
  border-bottom: 1px solid #cadbe6;
  background: linear-gradient(120deg, #e4eef5, #eef3f6 72%);
  border-radius: 20px;
}
html body #app .home-collection .product { border-bottom-color: #c9d9e4; }
html body #app .home-collection .warranty-badge { background: #f6fafe; border-color: #c7dce9; color: #256384; }
html body #app .support { margin-block: 48px 0; padding: 34px 38px; background: #214961; border-radius: 16px; }
html body #app .support h2 { color: #fff; }
/* One pair of manufacturer photographs, with clear captions instead of busy overlays. */
.home-lifestyle { margin: 54px 6%; }
.lifestyle-heading { display: flex; justify-content: space-between; align-items: end; gap: 30px; margin-bottom: 26px; }
html body #app .lifestyle-heading h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 400; margin: 10px 0 0; color: #24495f; }
.lifestyle-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 22px; }
.lifestyle-story { display: flex; flex-direction: column; min-width: 0; border-radius: 16px; overflow: hidden; background: #214961; color: #fff; box-shadow: 0 12px 30px #213e5110; }
.lifestyle-photo { height: clamp(240px, 27vw, 360px); overflow: hidden; background: #dbe5e9; }
.lifestyle-story img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s ease; }
.lifestyle-story-haier img { object-position: 55% center; }
.lifestyle-story-smeg img { object-position: center 65%; }
.lifestyle-story:hover img { transform: scale(1.025); }
.lifestyle-story:focus-visible { outline: 3px solid #297caa; outline-offset: 5px; }
.lifestyle-caption { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 26px; }
.lifestyle-caption .lifestyle-brand { color: #b9ddf2; font-size: 12px; font-weight: 600; letter-spacing: .13em; }
html body #app .lifestyle-caption h3 { color: #fff; font-size: clamp(21px, 2.1vw, 28px); font-weight: 400; margin: 6px 0 0; }
.lifestyle-caption > span { border: 1px solid #b5d1e366; border-radius: 50%; display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; font-size: 20px; }
/* Consistent spacing, readable supporting copy, and quieter white surfaces. */
html body #app .pagehead { padding-bottom: 22px; }
html body #app .pagehead:has(+ :is(.about-story,.care-page,.contact-content)) {
  background: linear-gradient(110deg, #dcebf4, #eef4f8);
  border-color: #ccdfeb;
}
html body #app .about-story { padding-top: 8px; padding-bottom: 26px; }
html body #app .about-story .empty { background: transparent; padding: 0; }
html body #app .contact-team { background: #fff; border: 1px solid #d7e3eb; border-bottom: 3px solid #338dc3; box-shadow: 0 12px 30px #21415708; }
html body #app .care-page { padding-top: 12px; padding-bottom: 20px; }
html body #app .care-warranty-card { background: #fff; border-color: #d5e2eb; }
html body #app .care-location-grid article { background: #e7eff5; }
html body #app .care-call { background: #e1edf5; border-color: #bfd7e6; }
html body #app .contact-content { padding-top: 8px; padding-bottom: 16px; }
html body #app .contact-follow-primary { margin-bottom: 28px; }
html body #app .contact-follow-primary .social-brand { border-color: #d5e2ea; }
html body #app .contact-info p span { background: #e1ebf2; color: #35566b; }
html body #app .contact-info, html body #app .contact-hours { border-color: #d1dfe8; }
html body #app .retailer-entry { background: #e4edf4; border-color: #c9dce9; }
html body #app .catalog-tools { background: #e9f0f5; border-color: #d3e0e8; }
html body #app .category-links a { background: #ffffffb8; }
html body #app .filter-summary button { color: #246b93; }
html body #footer { margin-top: 48px; }
html body #footer .company-footer-bottom { font-size: 12px; color: #bcd0de; }
html[lang='ar'] body #app .lifestyle-caption .lifestyle-brand { letter-spacing: 0; font-size: 15px; }
html[lang='ar'] body #app .eyebrow { font-size: 14px; letter-spacing: 0; }
html[lang='ar'] body #app .signature-hero .eyebrow { color: #d4ecfa; }
@media (max-width: 850px) {
  html body #app .section { padding-block: 38px; }
  html body #app :is(.home-brands,.home-collection) { padding: 32px 3%; }
  .lifestyle-heading { align-items: start; flex-direction: column; gap: 14px; }
  .lifestyle-caption { padding: 20px; }
  html body #nav { align-items: center; flex-wrap: wrap; justify-content: center; gap: 4px 20px; font-size: 14px; }
  html body #nav a { display: inline-flex; align-items: center; min-height: 40px; }
}
@media (max-width: 650px) {
  html body #app .brand-showcase { margin-block: 38px; }
  .home-lifestyle { margin-block: 38px; }
  .lifestyle-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .lifestyle-photo { height: auto; aspect-ratio: 1.5; }
  html body #app .home-collection { margin-top: 36px; padding-bottom: 10px; }
  html body #app .brand-photo-grid { gap: 12px !important; }
  html body #app .support { margin-top: 36px; padding: 28px; }
  html body #app .about-story { padding-top: 8px; padding-bottom: 20px; }
  html body #app .care-page { padding-top: 12px; padding-bottom: 16px; }
  html body #app .contact-content { padding-top: 8px; padding-bottom: 16px; }
  html body #footer { margin-top: 36px; }
}
@media (prefers-reduced-motion: reduce) { .lifestyle-story img { transition: none; } .lifestyle-story:hover img { transform: none; } }