/* =========================================================================
   QUICK JUMPSTART - inner alignment corrections

   Loaded only on three pages: About Us (548), Services (549) and Car Brands
   We Serve (550). Every selector below is additionally scoped to that page's
   body class, so nothing here can reach any other page even if the file were
   ever enqueued more widely.

   This file changes no content, no section padding and no section spacing.
   It corrects one class of defect that shows up on all three pages: a flex
   child that carries no width and no flex basis sizes itself to its own
   content. Where those children are a row of cards, each one ends up a
   different width and the row wraps into a ragged stack.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. SERVICES - the four service cards

   .elementor-element-svcgrid's inner container is already a wrapping flex
   row, but none of the four cards carries a flex basis, so each sized to its
   own content - 717px, 735px, 771px, 788px - and every one wrapped onto its
   own line. The result was four cards of four different widths stacked down
   the left half of the page.

   Switching the inner container to a two-track grid gives the cards one
   shared width and one shared height per row, and lets the existing gap
   carry over untouched. The cards themselves are not restyled.
   ------------------------------------------------------------------------- */
.page-id-549 .elementor-element-svcgrid > .e-con-inner{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.page-id-549 .elementor-element-svcgrid > .e-con-inner > .e-con{
  width:auto!important;
  max-width:none!important;
  min-width:0;
}
@media(max-width:1024px){
  .page-id-549 .elementor-element-svcgrid > .e-con-inner{
    grid-template-columns:minmax(0,1fr);
  }
}

/* -------------------------------------------------------------------------
   2. FOUR-BOX FEATURE ROWS - Services and About Us

   Services "Why Are We The #1 Choice" (.elementor-element-svcwhyrow) and
   About Us "Our Values" (.elementor-element-c8d50234) are both four-box
   rows with the same fault as above: no basis on the boxes, so they sized
   to their own text. Services came out 904 / 717 / 702 / 744px on four
   separate lines; About Us came out 559 / 532 / 514 / 524px over two.

   A four-track grid puts them in one row at one width, stretched to a
   common height. The 24px gap each row already declares is reused as the
   grid gap, so the spacing between boxes does not change.
   ------------------------------------------------------------------------- */
.page-id-549 .elementor-element-svcwhyrow,
.page-id-548 .elementor-element-c8d50234{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr));
  align-items:stretch;
}
.page-id-549 .elementor-element-svcwhyrow > .e-con,
.page-id-549 .elementor-element-svcwhyrow > .elementor-widget,
.page-id-548 .elementor-element-c8d50234 > .e-con,
.page-id-548 .elementor-element-c8d50234 > .elementor-widget{
  width:auto!important;
  max-width:none!important;
  min-width:0;
}

/* The Services boxes centre their heading and description, but the icon sits
   in a block-level wrapper, so text-align never moved it and it stayed hard
   left of the centred text above it. Auto side margins line the icon up with
   the copy. The About Us boxes place the icon beside the text and are
   already consistent, so they are left alone. */
.page-id-549 .elementor-element-svcwhyrow .elementor-icon-box-icon{
  margin-inline:auto;
}

@media(max-width:1024px){
  .page-id-549 .elementor-element-svcwhyrow,
  .page-id-548 .elementor-element-c8d50234{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:767px){
  .page-id-549 .elementor-element-svcwhyrow,
  .page-id-548 .elementor-element-c8d50234{
    grid-template-columns:minmax(0,1fr);
  }
}

/* -------------------------------------------------------------------------
   3. CAR BRANDS - "Why Are We The #1 Choice for All Car Brands"

   The same four-box fault, but the markup differs from the other two pages:
   the boxes are split across two row wrappers (cbwr1 and cbwr2) with a 24px
   spacer widget between them. None of the four carries a usable width, so
   they sized to their own text - 910 / 723 / 709 / 750px - and each wrapped
   onto its own line down the left side of the section.

   On desktop the two wrappers are dissolved with display:contents so their
   boxes become items of one four-track grid, and the spacer is taken out of
   flow because it existed only to separate two box rows that no longer
   exist. Nothing is deleted and no markup changes - display:contents simply
   stops the wrappers generating boxes of their own. Both wrappers carry no
   padding, background or border, so there is nothing to lose.

   row-gap stays 0 so the heading keeps its own 26px margin as the only gap
   above the cards, exactly as before. column-gap is the 24px the wrappers
   already declared.

   Below 1025px the original two-row structure is left completely alone -
   wrappers, spacer and spacing all behave as they always did - and each row
   simply becomes an even two-track grid so the boxes stop being ragged.
   ------------------------------------------------------------------------- */
@media(min-width:1025px){
  .page-id-550 .elementor-element-cbwhysec > .e-con-inner{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr));
    column-gap:24px;
    row-gap:0;
    align-items:stretch;
  }
  .page-id-550 .elementor-element-cbwhyh1{
    grid-column:1 / -1;
  }
  .page-id-550 .elementor-element-cbwr1,
  .page-id-550 .elementor-element-cbwr2{
    display:contents!important;
  }
  .page-id-550 .elementor-element-cbwsp{
    display:none!important;
  }
}

@media(max-width:1024px){
  .page-id-550 .elementor-element-cbwr1,
  .page-id-550 .elementor-element-cbwr2{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:stretch;
  }
}
@media(max-width:767px){
  .page-id-550 .elementor-element-cbwr1,
  .page-id-550 .elementor-element-cbwr2{
    grid-template-columns:minmax(0,1fr);
  }
}

/* At every width the four boxes stop sizing to their own text, and the card
   inside each one fills the height the grid row gives it so all four finish
   level. */
.page-id-550 .elementor-element-cbwh0,
.page-id-550 .elementor-element-cbwh1,
.page-id-550 .elementor-element-cbwh2,
.page-id-550 .elementor-element-cbwh3{
  width:auto!important;
  max-width:none!important;
  min-width:0;
}
.page-id-550 .elementor-element-cbwh0c,
.page-id-550 .elementor-element-cbwh1c,
.page-id-550 .elementor-element-cbwh2c,
.page-id-550 .elementor-element-cbwh3c{
  height:100%;
}

/* -------------------------------------------------------------------------
   4. CAR BRANDS - the brand chip grids

   .qjs-brandgrid is repeat(auto-fill,minmax(202px,1fr)), which is correct.
   The problem sits one level up: each of the three brand rows is a 1240px
   flex row, but the columns inside it are shrink-to-fit, so every grid
   collapsed to a single 202-274px track. Nine, seven and fourteen brands
   each rendered as one long single-file column with most of the row empty,
   and no two grids ended up the same width.

   The basis is 50% rather than 0 on purpose. With a zero basis the free
   space is shared equally, but a padded sibling - the navy "don't see your
   brand" card - keeps its padding on top of that share and ends up wider,
   which left the fourth grid 17px narrower than the other three. A definite
   basis makes both columns resolve to the same width whatever they contain.
   ------------------------------------------------------------------------- */
.page-id-550 .elementor-element-de7b23e1 > .e-con,
.page-id-550 .elementor-element-da4303cf > .e-con,
.page-id-550 .elementor-element-f808a1fc > .e-con{
  flex:1 1 50%!important;
  min-width:0;
  max-width:none!important;
}

/* the grid widget and the grid itself should use the column they are given */
.page-id-550 .elementor-element-fe81670a,
.page-id-550 .elementor-element-aa4a09b8,
.page-id-550 .elementor-element-40bbc904,
.page-id-550 .elementor-element-aeb00ef4{
  width:100%;
}
.page-id-550 .qjs-brandgrid{
  width:100%;
  align-items:stretch;
}

/* Cards in a row share a height. Peugeot currently ships without a logo
   image, which left its card shorter than its neighbours; stretching the
   row keeps the grid even until that logo is supplied. */
.page-id-550 .qjs-brandgrid > .qjs-brand{
  height:100%;
}

/* Below the tablet breakpoint the rows stack. Two of the three rows align
   their children to flex-start, so once stacked the columns went back to
   shrink-to-fit and the grids collapsed again - 263px, 168px and 210px on a
   504px screen. Taking the full width of the stacked row lets each grid use
   its own narrow-screen track sizing instead. */
@media(max-width:1024px){
  .page-id-550 .elementor-element-de7b23e1,
  .page-id-550 .elementor-element-da4303cf,
  .page-id-550 .elementor-element-f808a1fc{
    flex-wrap:wrap;
    align-items:stretch;
  }
  .page-id-550 .elementor-element-de7b23e1 > .e-con,
  .page-id-550 .elementor-element-da4303cf > .e-con,
  .page-id-550 .elementor-element-f808a1fc > .e-con{
    flex-basis:auto!important;
    width:100%!important;
  }
}