/* ==========================================================================
   Similius Shipping Service — width only
   Target:  https://us.similius.com/shipping-service/   (page ID 40, Brizy)
   Model:   https://urenus.com/en-us/pages/shipping-service

   Loaded by the Similius Styles plugin on page 40 only.

   SCOPE OF THIS FILE: the max-width, nothing else.

   The page is a Brizy rebuild of the Urenus shipping widget and is already
   the right design — same tiles, same carrier colours, same copy. The only
   thing out of step was how wide it ran on large screens. Measured content
   width before this file:

       viewport 1440 -> 1262px   (contact page: 1264px — already matching)
       viewport 1920 -> 1694px   (contact page: 1520px)
       viewport 2560 -> 1880px   (contact page: 1520px)

   Brizy caps its root container at 1900px, far wider than the rest of the
   ported pages. This applies the contact page measure instead, so the two
   agree at every width.

   NO MARKUP CHANGE. The tile grid, its gaps and its colours all stay exactly
   as Brizy builds them.
   ========================================================================== */


/* --- The contact page container formula, applied to Brizy ---------------- */
/* Lifted verbatim from .uc-container in similius-contact-page.css:
       width: min(calc(100% - clamp(2rem, 5vw, 6rem)), 1520px)
   Brizy root container has its own 1900px cap plus auto side margins that a
   plain override loses to, hence !important on those — the same trap as the
   contact and about pages. */

body.page-id-40 [class*="brz-root__container"] {
  width: 100% !important;
  max-width: none !important;
  margin-inline: 0 !important;
}

/* The page gutter. On the contact page the container measures its 100%
   INSIDE #sim-contact-page, which carries padding-inline: min(2.6vw, 38px).
   Brizy has no equivalent wrapper, so without this the same formula resolves
   against the full viewport and comes out 74px wider — measured 1338px at a
   1440 viewport where the contact page gives 1264px. */
body.page-id-40 .brz-section__content {
  width: 100%;
  max-width: none;
  padding-inline: min(2.6vw, 38px);
}

body.page-id-40 .brz-container {
  width: min(calc(100% - clamp(2rem, 5vw, 6rem)), 1520px);
  max-width: none;
  margin-inline: auto;
}


/* --- Recover the 25px Brizy spends on outer gutters ---------------------- */
/* Brizy puts 10px on the outer .brz-row and 15px on the outer
   .brz-column__items. Left alone the tiles sit 25px inside the 1520px
   container and never quite line up with the contact page.

   The child combinators matter: these must hit ONLY the outermost row and
   column. The nested .brz-row--inner rows and their columns are what create
   the gaps BETWEEN the tiles — zeroing those would butt the tiles together. */

body.page-id-40 .brz-container > .brz-row__container > .brz-row,
body.page-id-40 .brz-container > .brz-row__container > .brz-row > .brz-columns > .brz-column__items {
  padding-inline: 0 !important;
}


/* --- Match the contact page breakpoints --------------------------------- */
/* Same two overrides .uc-container carries, so the pages agree on tablet
   and phone as well as desktop. */

@media (max-width: 900px) {
  body.page-id-40 .brz-container { width: min(calc(100% - 2rem), 760px); }
}

@media (max-width: 640px) {
  body.page-id-40 .brz-container { width: calc(100% - 1.25rem); }
}