/* Meilijewelry Public Layout v4 — one responsive geometry for every public page.
 * Load AFTER meili-public-navbar.css and existing page CSS.
 * Presentation-only: no PHP, SQL, product calculation or JS behavior is changed.
 * The same shell/gutter tokens drive navbar AND visible page content.
 */
html.ml-luxury-ui {
  --ml-public-max: 1360px;
  --ml-public-gutter: 20px;
  --ml-public-section-gap: clamp(12px, 1.1vw, 18px);
  --ml-public-radius: 14px;
}

/* Global width contract.  No page-specific widths or Bootstrap breakpoint jumps. */
html.ml-luxury-ui nav.ml-global-nav.navbar {
  width: 100% !important;
  max-width: none !important;
  padding-block: 8px !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-shell,
html.ml-luxury-ui .container,
html.ml-luxury-ui main.app-shell {
  box-sizing: border-box !important;
  width: calc(100% - 2 * var(--ml-public-gutter)) !important;
  max-width: var(--ml-public-max) !important;
  margin-inline: auto !important;
}
/* Keep the outer edges of content panels aligned with the navbar shell.
 * Bootstrap row gutter columns still retain their own padding. */
html.ml-luxury-ui .container {
  padding-inline: 0 !important;
}
html.ml-luxury-ui main.app-shell {
  padding-inline: 0 !important;
}
html.ml-luxury-ui .container > .row {
  margin-inline: 0 !important;
}
html.ml-luxury-ui nav.ml-global-nav .ml-navbar-shell {
  margin-inline: auto !important;
}
/* Floating or nested dialog containers keep their own native dimensions. */
html.ml-luxury-ui .modal .container,
html.ml-luxury-ui .offcanvas .container {
  width: 100% !important;
  max-width: 100% !important;
}

/* Align shared vertical rhythm without changing internal form/product layouts. */
html.ml-luxury-ui nav.ml-global-nav + main.container,
html.ml-luxury-ui nav.ml-global-nav + main.app-shell,
html.ml-luxury-ui nav.ml-global-nav + section.container,
html.ml-luxury-ui nav.ml-global-nav + .container {
  margin-top: var(--ml-public-section-gap) !important;
}
html.ml-page-home nav.ml-global-nav + section.container {
  margin-top: 0 !important; /* existing homepage hero padding owns this rhythm */
}


/* Shared surface language: same corner geometry from homepage to search/details. */
html.ml-luxury-ui .top-banner,
html.ml-luxury-ui .hero-wrap,
html.ml-luxury-ui .hero-card,
html.ml-luxury-ui .hero-panel,
html.ml-luxury-ui .pos-hero,
html.ml-luxury-ui .section-card,
html.ml-luxury-ui .card {
  border-radius: var(--ml-public-radius) !important;
}

/* Important: index_product list mode historically caps product list at 1080px,
 * while the navbar stretches to a different width. Let it use the page shell. */
html.ml-page-index_product .list-wrap,
html.ml-page-speed_product .list-wrap {
  max-width: 100% !important;
}

/* Search page: the form is the primary page content, not a left-aligned sidebar.
 * All widths follow the same shell as navbar and category/product sections. */
html.ml-page-index_product_search main.app-shell .pos-hero,
html.ml-page-index_product_search main.app-shell .pos-search-panel,
html.ml-page-index_product_search main.app-shell #searchForm {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
}
html.ml-page-index_product_search main.app-shell .pos-hero > .row,
html.ml-page-index_product_search main.app-shell .pos-hero > .row > .col-12 {
  width: 100% !important;
  max-width: 100% !important;
}

/* Product detail remains a two-column composition.  Contain the large 3:4
 * photo so ultra-wide desktops do not create an excessively tall image. */
@media (min-width: 992px) {
  html.ml-page-index_product main.container > .row.g-3 > .col-lg-6:first-child > .card,
  html.ml-page-speed_product main.container > .row.g-3 > .col-lg-6:first-child > .card {
    max-width: 620px;
    margin-inline: auto;
  }
}
/* Preserve the compact navigation pattern on mobile and match its edges to
 * the same inset used by banner, cards and forms on every public route. */
@media (max-width: 991.98px) {
  html.ml-luxury-ui { --ml-public-gutter: 14px; }
}
@media (max-width: 575.98px) {
  html.ml-luxury-ui {
    --ml-public-gutter: 10px;
    --ml-public-radius: 12px;
    --ml-public-section-gap: 10px;
  }
  html.ml-luxury-ui nav.ml-global-nav.navbar { padding-block: 6px !important; }
}
@media (max-width: 390px) {
  html.ml-luxury-ui { --ml-public-gutter: 8px; }
}