/* ========================================================================
   P-UI01 — Global Design System + Shared Components
   Goal: one frontend shell, one 1280px desktop axis, shared spacing/radius/
   surfaces/buttons across Home, Taxonomy, Local Hub, Listing, News, Shop.
   Page-specific industry templates remain free to define their inner content.
   ======================================================================== */
:root{
  --mbr-container:1280px;
  --mbr-gutter-desktop:16px;
  --mbr-gutter-mobile:12px;
  --mbr-surface:#fff;
  --mbr-surface-soft:#f7f9fc;
  --mbr-border:#e5e7eb;
  --mbr-text:#172033;
  --mbr-muted:#667085;
  --mbr-radius-sm:10px;
  --mbr-radius-md:16px;
  --mbr-radius-lg:22px;
  --mbr-shadow-sm:0 6px 20px rgba(15,23,42,.05);
  --mbr-shadow-md:0 12px 34px rgba(15,23,42,.08);
  --mbr-section-gap:24px;
}

/* One canonical desktop x-axis. 1280px is the CONTENT width, not 1280 incl. padding. */
@media (min-width:992px){
  body.w11-pro-site :is(
    .mbr-ui-container,
    .lm-wrap,
    .mbr-wrap,
    .lh-wrap,
    .lidx,
    .dt-news-wrap,
    .dt-news-container,
    .news-container,
    .news-page-container,
    .search-page-shell,
    .market-search-page,
    .ct5-container,
    .ctcat-container,
    .wt-container,
    .wt2-container,
    .wt-market-container,
    .wt-detail-container,
    .wt-page-container,
    .wt-shop-container,
    .w2-commerce-container,
    .industry-shop-container,
    .site-container,
    .page-container,
    .front-container,
    .listing-page-container,
    .shop-page-container,
    .user-page-container,
    .alogiare-container
  ){
    width:calc(100% - 32px)!important;
    max-width:1280px!important;
    margin-left:auto!important;
    margin-right:auto!important;
    box-sizing:border-box!important;
  }

  /* Internal wrappers that previously shrink the usable axis to 1180/1200/1240. */
  body.w11-pro-site .lm-wrap,
  body.w11-pro-site .mbr-wrap,
  body.w11-pro-site .lh-wrap,
  body.w11-pro-site .lidx,
  body.w11-pro-site .dt-news-wrap,
  body.w11-pro-site .dt-dark-interest > .dt-block-heading,
  body.w11-pro-site .dt-dark-interest > .dt-interest-layout,
  body.w11-pro-site .dt-dark-interest > .dt-dark-card-row{
    max-width:1280px!important;
  }
}

@media (max-width:991.98px){
  body.w11-pro-site :is(.mbr-ui-container,.lm-wrap,.mbr-wrap,.lh-wrap,.lidx){
    width:calc(100% - 24px)!important;
    max-width:100%!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Global shell: home now uses the exact same ALO header/footer as every inner page. */
body.w11-pro-site .w11-pro-main{min-width:0;overflow-x:clip}
body.w11-pro-site .alogiare-global-navbar-root{position:relative;z-index:1000}
body.w11-pro-site footer{margin-left:0;margin-right:0}

/* Shared primitives for upcoming page-template work. */
.mbr-ui-section{padding:32px 0}
.mbr-ui-section--soft{background:var(--mbr-surface-soft)}
.mbr-ui-card{background:var(--mbr-surface);border:1px solid var(--mbr-border);border-radius:var(--mbr-radius-md);box-shadow:var(--mbr-shadow-sm)}
.mbr-ui-panel{background:var(--mbr-surface);border:1px solid var(--mbr-border);border-radius:var(--mbr-radius-lg);box-shadow:var(--mbr-shadow-md)}
.mbr-ui-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.mbr-ui-heading h2{margin:0;color:var(--mbr-text);font-size:clamp(22px,2.2vw,30px);line-height:1.2}
.mbr-ui-heading p{margin:5px 0 0;color:var(--mbr-muted);font-size:13px;line-height:1.6}
.mbr-ui-btn{min-height:44px;padding:0 16px;border-radius:var(--mbr-radius-sm);display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none;font-weight:800;border:1px solid #d0d5dd;background:#fff;color:#344054}
.mbr-ui-btn--primary{background:var(--alo-ui-primary-button-bg,#DA251D);border-color:var(--alo-ui-primary-button-bg,#DA251D);color:#fff}
.mbr-ui-btn--primary:hover{color:#fff;filter:brightness(.95)}

/* Home body keeps its own visual identity but shares the global chrome and 1280 axis. */
body.lm-home .lm-page{width:100%;max-width:none;margin:0}
body.lm-home .lm-top,body.lm-home .lm-footer{display:none!important}
body.lm-home .lm-hero{margin-top:0}
body.lm-home .lm-wrap{width:calc(100% - 32px);max-width:1280px}

/* Legacy SEO landing no longer owns a second header/footer/mobile bar. */
body.mbr-seo-landing-page .mbr-header,
body.mbr-seo-landing-page .mbr-footer,
body.mbr-seo-landing-page .mbr-mobile-bar{display:none!important}
body.mbr-seo-landing-page .mbr-wrap{width:calc(100% - 32px);max-width:1280px}

/* Normalize common page spacing without flattening industry-specific UI. */
body.w11-pro-site main.w11-pro-main > :first-child{scroll-margin-top:16px}
body.w11-pro-site .breadcrumb,
body.w11-pro-site .mbr-breadcrumb,
body.w11-pro-site .lh-bc{font-size:13px}

@media (max-width:767.98px){
  .mbr-ui-section{padding:22px 0}
  .mbr-ui-heading{align-items:flex-start;flex-direction:column;gap:8px}
  body.lm-home .lm-wrap,
  body.mbr-seo-landing-page .mbr-wrap{width:calc(100% - 22px)!important}
}