/* Home presentation only. Keep the original controls, nine category buttons,
   advertisement layers and navigation handlers; text may be RTL, geometry is LTR. */
html:has(body:not(.post-detail-open) > .app-shell > #homeScreen:not([hidden])) { scrollbar-gutter:auto; }
html:has(body:not(.post-detail-open) > .app-shell > #homeScreen:not([hidden])),
body:not(.post-detail-open):has(> .app-shell > #homeScreen:not([hidden])) {
  inline-size:100%;max-inline-size:100%;block-size:var(--zagros-viewport-block,100dvh);
  margin:0;padding-block:0;overflow:hidden;
}
body:has(> .app-shell > #homeScreen:not([hidden])) > .app-shell {
  box-sizing:border-box;inline-size:min(100%,510px);min-inline-size:0;max-inline-size:100%;margin-inline:auto;padding-inline:0;
}
.app-shell:has(#homeScreen:not([hidden])) {
  --home-safe-top:max(env(safe-area-inset-top,0px),var(--zagros-home-safe-top,0px));
  --home-safe-right:max(env(safe-area-inset-right,0px),var(--zagros-home-safe-right,0px));
  --home-safe-bottom:max(env(safe-area-inset-bottom,0px),var(--zagros-home-safe-bottom,0px));
  --home-safe-left:max(env(safe-area-inset-left,0px),var(--zagros-home-safe-left,0px));
  --home-green:#006243;
  --home-inline-rail:max(9px,var(--home-safe-left),var(--home-safe-right));
  --home-shell-inline-size:min(100%,510px);
  --home-shell-inline-offset:max(0px,calc((100% - var(--home-shell-inline-size))/2));
  --home-surface-inline-inset:calc(var(--home-shell-inline-offset) + var(--home-inline-rail));
  --home-grid-gap:clamp(6px,1.8vw,9px);
  --home-row-gap:min(var(--home-grid-gap),calc(var(--zagros-viewport-block,100dvh)*.009));
  --home-nav-control-height:68px;
  --home-nav-content-height:58px;
  /* Reserve the unchanged navigation and its raised Post Ad control first.
     The remaining height sizes the existing hero and five category rows. */
  --home-nav-reserve:calc(var(--home-nav-control-height) + max(10px,var(--home-safe-bottom)) + 18px);
  --home-available-height:calc(var(--zagros-viewport-block,100dvh) - var(--home-nav-reserve) - var(--home-safe-top));
  --home-hero-media-height:min(calc(min(100vw,510px)/2.1),calc(var(--home-available-height)*.3));
  --home-hero-height:calc(var(--home-safe-top) + var(--home-hero-media-height));
  --home-grid-width:calc(min(100vw,510px) - var(--home-inline-rail)*2);
  --home-card-width:calc((var(--home-grid-width) - var(--home-grid-gap))/2);
  --home-grid-natural-height:calc(var(--home-grid-width)/3.86 + var(--home-card-width)/1.86*4 + var(--home-row-gap)*4);
  --home-grid-height:min(var(--home-grid-natural-height),calc(var(--home-available-height) - var(--home-hero-media-height) - var(--home-row-gap)));
  --home-card-height:calc((var(--home-grid-height) - var(--home-row-gap)*4)/4.982);
  --home-showroom-height:calc(var(--home-card-height)*.982);
  --home-photo-cell-height:calc(var(--home-card-width)*1041/1511);
  box-sizing:border-box;position:relative;display:block;direction:ltr;
  block-size:var(--zagros-viewport-block,100dvh);min-block-size:var(--zagros-viewport-block,100dvh);max-block-size:var(--zagros-viewport-block,100dvh);
  padding:0 0 var(--home-nav-reserve);
  overflow:hidden;overscroll-behavior-y:none;scrollbar-width:none;
  background:#f7f9fb;border-radius:0;box-shadow:none;
}
.app-shell:has(#homeScreen:not([hidden]))::-webkit-scrollbar { display:none; }
.app-shell:has(#homeScreen:not([hidden])) > .status-bar,
.app-shell:has(#homeScreen:not([hidden])) .search-row { display:none!important; }

/* The existing header is over the photograph, with an optically centered logo.
   Native/browser safe-area values keep the actual controls below the status bar. */
.app-shell:has(#homeScreen:not([hidden])) > .top-header {
  position:absolute;inset:calc(var(--home-safe-top) + 10px) max(10px,var(--home-safe-right)) auto max(10px,var(--home-safe-left));
  z-index:8;display:grid;grid-template-columns:42px minmax(0,1fr) 30px 58px;gap:6px;align-items:center;direction:ltr;
  inline-size:auto;block-size:58px;margin:0;padding:0;pointer-events:none;background:transparent;border:0;box-shadow:none;
}
.app-shell:has(#homeScreen:not([hidden])) > .top-header > * { pointer-events:auto; }
.app-shell:has(#homeScreen:not([hidden])) .top-header .brand {
  position:absolute;top:0;left:50%;right:auto;transform:translateX(-50%);
  inline-size:min(40vw,160px,calc(100% - 192px));min-inline-size:0;block-size:58px;
  margin:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;
}
.app-shell:has(#homeScreen:not([hidden])) .top-header .brand-logo {
  display:block;inline-size:100%;max-inline-size:none;block-size:100%;object-fit:contain;object-position:center;
  background:transparent;border:0;filter:none;
}
.app-shell:has(#homeScreen:not([hidden])) .top-header .menu-button,
.app-shell:has(#homeScreen:not([hidden])) .top-header .notification-button {
  position:static;inset:auto;display:grid;place-items:center;min-inline-size:0;min-block-size:40px;block-size:40px;
  margin:0;padding:0;color:white;border:1px solid #ffffff70;background:#23344766;border-radius:12px;
  box-shadow:0 2px 7px #10233015;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);text-shadow:0 1px 2px #0005;
}
.app-shell:has(#homeScreen:not([hidden])) .top-header .menu-button { grid-column:1;grid-row:1;inline-size:40px;font-size:23px; }
/* Retain the existing notification action; it needs no additional header row. */
.app-shell:has(#homeScreen:not([hidden])) .top-header .notification-button { grid-column:3;grid-row:1;inline-size:30px;font-size:17px;border:0;background:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none; }
.app-shell:has(#homeScreen:not([hidden])) .top-header .notification-dot { top:5px;right:0;left:auto;inline-size:8px;block-size:8px;border:1px solid white;color:transparent;font-size:0; }
.app-shell:has(#homeScreen:not([hidden])) .top-header > .global-language-control {
  position:relative;grid-column:4;grid-row:1;inline-size:58px;max-inline-size:58px;min-inline-size:0;block-size:34px;
  margin:0;padding:0 7px;color:white;border:1px solid #ffffff80!important;border-radius:22px!important;
  background:#25334570!important;box-shadow:none!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.app-shell:has(#homeScreen:not([hidden])) .global-language-trigger { justify-content:space-between;inline-size:100%;block-size:100%;min-block-size:0;padding:0;gap:6px; }
.app-shell:has(#homeScreen:not([hidden])) .global-language-trigger > span:first-of-type { display:none!important; }
.app-shell:has(#homeScreen:not([hidden])) .global-language-trigger > span:last-of-type { display:block;font-size:18px;line-height:1; }
.app-shell:has(#homeScreen:not([hidden])) .global-language-trigger .language-flag { inline-size:24px;min-inline-size:24px;block-size:18px;object-fit:contain; }
.app-shell:has(#homeScreen:not([hidden])) .global-language-menu { top:calc(100% + 8px);right:0;left:auto; }

#homeScreen:not([hidden]) { box-sizing:border-box;display:flex;flex-direction:column;inline-size:100%;block-size:100%;min-inline-size:0;min-block-size:0;margin:0;padding:0;direction:ltr; }
#homeScreen:not([hidden]) .hero,
#homeScreen:not([hidden]) .hero.has-home-ad {
  position:relative;box-sizing:border-box;inline-size:calc(100% - var(--home-inline-rail)*2);block-size:var(--home-hero-height)!important;
  min-block-size:var(--home-hero-height)!important;max-block-size:var(--home-hero-height)!important;aspect-ratio:auto!important;
  flex:none;margin:0 var(--home-inline-rail);overflow:hidden;isolation:isolate;border:0;border-radius:0 0 22px 22px;background:#dce9f4;box-shadow:none;
}
#homeScreen:not([hidden]) .hero > .hero-image { inline-size:100%;block-size:100%;object-fit:cover;object-position:center; }
#homeScreen:not([hidden]) :is(.hero-overlay,.hero-copy,.home-hero-brand,.home-reference-tagline,.home-reference-promise,.hero-pill) { display:none; }
#homeScreen:not([hidden]) .slider-dots {
  position:absolute;z-index:6;left:50%;right:auto;bottom:7px;display:flex;gap:6px;margin:0;transform:translateX(-50%);direction:ltr;
}
#homeScreen:not([hidden]) .slider-dots * { inline-size:9px;block-size:9px;background:#fffffff0;box-shadow:0 1px 3px #0002; }
#homeScreen:not([hidden]) .slider-dots b { inline-size:9px;background:var(--home-green); }
#homeScreen:not([hidden]) .home-fallback-ticker { top:calc(var(--home-safe-top) + min(100px,calc(var(--home-hero-media-height) - 64px))); }
#homeScreen:not([hidden]) .home-ad-layer > .advertisement-label { top:calc(var(--home-safe-top) + 60px); }
#homeScreen:not([hidden]) :is(.section-heading,.shortcut-bar,.stats-strip,.home-stats,.statistics-strip) { display:none!important; }

/* One full-width showroom card, followed by the same eight route buttons.
   Height comes from the available viewport, never the images or text. */
#homeScreen:not([hidden]) .category-grid {
  display:grid!important;box-sizing:border-box;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:var(--home-showroom-height) repeat(4,minmax(0,1fr));
  column-gap:var(--home-grid-gap);row-gap:var(--home-row-gap);flex:none;align-self:stretch;inline-size:auto;min-inline-size:0;max-inline-size:none;
  block-size:var(--home-grid-height);min-block-size:0;
  margin:var(--home-row-gap) var(--home-inline-rail) 0;justify-items:stretch;direction:ltr;isolation:isolate;
}
#homeScreen:not([hidden]) .category-card {
  position:relative;display:block!important;visibility:visible!important;opacity:1!important;box-sizing:border-box;
  inline-size:100%;min-inline-size:0;max-inline-size:100%;justify-self:stretch;
  height:100%;min-height:0;max-height:none;block-size:100%;min-block-size:0;max-block-size:none;aspect-ratio:auto;
  margin:0;padding:0;overflow:hidden;isolation:isolate;color:white;text-align:left;
  border:0;border-radius:14px;background:#dce5eb!important;box-shadow:0 2px 3px #15263712;
  transition:transform .18s ease,box-shadow .18s ease;
}
#homeScreen:not([hidden]) .category-card:hover,
#homeScreen:not([hidden]) .category-card:focus-visible { outline:2px solid #006243;outline-offset:2px;box-shadow:0 3px 9px #10233024; }
#homeScreen:not([hidden]) .category-card[data-category='showroom'] {
  order:-1;grid-column:1/-1;grid-row:1;aspect-ratio:auto;align-self:stretch;flex:none!important;
  inline-size:100%!important;min-inline-size:0!important;max-inline-size:100%!important;
  height:100%!important;min-height:0!important;max-height:none!important;block-size:100%!important;min-block-size:0!important;max-block-size:none!important;
  margin:0;padding:0!important;border-radius:14px;background:#dce5eb!important;
}
#homeScreen:not([hidden]) .home-category-photo {
  position:absolute;z-index:1;inset:0;display:block!important;visibility:visible!important;opacity:1!important;
  inline-size:100%;block-size:100%;background-image:url('/assets/home-category-photos.png');
  background-repeat:no-repeat;background-size:300% auto;background-position:var(--photo-x) var(--photo-y);
}
/* Center each atlas photo even when a shorter viewport reduces card height. */
#homeScreen:not([hidden]) :is([data-category='buySell'],[data-category='rental']) .home-category-photo { background-position-y:calc((var(--home-card-height) - var(--home-photo-cell-height))/2); }
#homeScreen:not([hidden]) [data-category='showroom'] .home-category-photo { background-position-y:calc((var(--home-showroom-height) - var(--home-grid-width)*1041/1511)/2); }
#homeScreen:not([hidden]) :is([data-category='parts'],[data-category='service'],[data-category='recovery']) .home-category-photo { background-position-y:calc((var(--home-card-height) - var(--home-photo-cell-height)*5)/2); }
/* Managed media IDs/files stay untouched. Only Customer Home display fitting
   changes; Business Home and the default sprite retain their own contracts. */
#homeScreen:not([hidden]) .home-category-photo[style*='background-image'] { background-size:cover!important;background-position:center!important; }
#homeScreen:not([hidden]) .home-category-photo::after,
#homeScreen:not([hidden]) .category-card::before,
#homeScreen:not([hidden]) .category-card::after { display:none!important;content:none!important; }
#homeScreen:not([hidden]) :is(.card-text,.category-number) { display:none!important; }
#homeScreen:not([hidden]) .home-category-label {
  position:absolute;z-index:4;top:10px;right:24px;bottom:auto;left:12px;display:block;
  color:white;background:transparent;border-color:transparent;box-shadow:none;
  text-align:left;text-shadow:0 1px 4px #0009;pointer-events:none;
}
#homeScreen:not([hidden]) .home-category-label b {
  display:block;overflow:visible;color:inherit;font-size:clamp(15px,4.4vw,22px);font-weight:750;letter-spacing:-.035em;line-height:1.12;
  text-align:left;text-overflow:clip;text-shadow:inherit;white-space:normal;
}
#homeScreen:not([hidden]) :is([data-category='service'],[data-category='recovery']) .home-category-label b { font-size:clamp(13px,3.8vw,19px); }
#homeScreen:not([hidden]) .category-card[data-category='showroom'] .home-category-label b { font-size:clamp(18px,4.8vw,25px); }
#homeScreen:not([hidden]) .home-category-label small { display:none!important; }
#homeScreen:not([hidden]) .card-arrow {
  position:absolute;z-index:4;top:11px;right:10px;bottom:auto;left:auto;display:grid!important;
  color:white;background:transparent;border-color:transparent;box-shadow:none;
  font-size:13px;text-shadow:0 1px 3px #0007;transform:rotate(180deg);direction:ltr;
}

/* Keep the same five existing actions in their physical reference order. */
.app-shell:has(#homeScreen:not([hidden])) .bottom-nav {
  position:fixed;z-index:7;right:var(--home-surface-inline-inset);left:var(--home-surface-inline-inset);bottom:max(10px,var(--home-safe-bottom));
  display:flex;align-items:center;justify-content:initial;box-sizing:border-box;inline-size:auto;max-inline-size:none;
  block-size:var(--home-nav-control-height);min-block-size:var(--home-nav-control-height);margin:0;padding:5px 0;transform:none;direction:ltr;
  border:0;border-radius:18px;background:#fffffff7;box-shadow:0 2px 18px #2334510d;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px);
}
.app-shell:has(#homeScreen:not([hidden])) .bottom-nav > button {
  position:relative;display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;
  min-inline-size:0;block-size:var(--home-nav-content-height);min-block-size:48px;padding:5px 0 2px;
  color:#50566b;background:transparent;font-size:10px;font-weight:500;line-height:1.1;
}
.app-shell:has(#homeScreen:not([hidden])) .bottom-nav > button > i { display:block;margin:0 0 4px;color:#50566b;font-size:23px; }
.app-shell:has(#homeScreen:not([hidden])) .bottom-nav > [data-action='home'] { order:0;color:var(--home-green); }
.app-shell:has(#homeScreen:not([hidden])) .bottom-nav > [data-action='home'] > i { color:var(--home-green); }
.app-shell:has(#homeScreen:not([hidden])) .bottom-nav > [data-action='home']::after { content:'';display:block;position:absolute;bottom:0;left:20%;right:20%;height:2px;border-radius:2px;background:var(--home-green); }
.app-shell:has(#homeScreen:not([hidden])) .bottom-nav > .home-favorites-nav { display:flex!important;order:1; }
.app-shell:has(#homeScreen:not([hidden])) .bottom-nav > [data-action='post'] { order:2;padding-top:31px;color:#50566b; }
.app-shell:has(#homeScreen:not([hidden])) .bottom-nav > [data-action='messages'] { order:3; }
.app-shell:has(#homeScreen:not([hidden])) .bottom-nav > [data-action='profile'] { order:4; }
.app-shell:has(#homeScreen:not([hidden])) .bottom-nav > [data-action='post'] > i {
  top:-16px;inline-size:48px;block-size:48px;margin:0;color:white;border:3px solid white;
  background:#005942;box-shadow:0 3px 7px #163e2e25;font-size:24px;
}
.app-shell:has(#homeScreen:not([hidden])) .bottom-nav .nav-messages em { top:0;right:calc(50% - 20px);inline-size:14px;block-size:14px;border:2px solid white;background:#e9434c;color:white;font-size:8px; }
@media(min-width:600px) {
  .app-shell:has(#homeScreen:not([hidden])) { border-radius:24px; }
}
@media(max-width:350px) {
  #homeScreen:not([hidden]) .home-category-label { top:8px;left:10px;right:22px; }
  #homeScreen:not([hidden]) .home-category-label b { font-size:14px; }
  #homeScreen:not([hidden]) :is([data-category='service'],[data-category='recovery']) .home-category-label b { font-size:12px; }
  #homeScreen:not([hidden]) .card-arrow { top:9px;right:8px;font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { #homeScreen:not([hidden]) .category-card { transition:none; } }