/* =========================================================
   NAVIGA PROMOTIONS — GRID DROP-IN (HARD OVERRIDE)
   Desktop (>=1025): 3 columns
   Tablet (769–1024): 2 columns (Annual left, Monthly right, Delivery bottom-left)
   Mobile (<=768): 1 column full width + reorder (Annual -> Monthly -> Delivery)

   Note: nth-child targets assume delimiters exist in DOM:
   Monthly = child 1, Annual = child 3, Delivery = child 5
   ========================================================= */

/* ------------------------------
   Optional tweaks
   ------------------------------ */
.pheader_logo { background-color: rgb(244, 245, 244); }

.promotion__wrapper_rounded{
  border-radius: 60px !important;
  overflow: hidden;
}

.page__title{
  padding-top: 56px !important;
  padding-bottom: 0 !important;
}

.p1 span{ font-size: 46px !important; }

.landings__head{ display: none !important; }

/* ------------------------------
   Base layout: GRID container
   ------------------------------ */
.landing_tiles .promotions{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 45px !important;

  width: 100% !important;
  max-width: calc(66.666% + 45px) !important;
  margin: 0 auto !important;

  justify-items: stretch !important;
  align-items: stretch !important;
}

/* Hide delimiters (still count in nth-child) */
.landing_tiles .promotions > .promotion-delimeter{
  display: none !important;
}

/* ------------------------------
   Promo tiles (items)
   ------------------------------ */
.landing_tiles .promotions > .promotion{
  /* Kill legacy column behavior that causes tablet wrap */
  float: none !important;
  clear: none !important;

  /* Beat injected inline widths (ex: width:31.25%) */
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;

  /* If parent ever gets flipped to flex by site CSS, prevent wrapping weirdness */
  flex: 0 0 auto !important;

  box-sizing: border-box !important;
  justify-self: stretch !important;
  align-self: stretch !important;

  background: none !important;
  position: relative;
}

/* Equal-height internals */
.landing_tiles .promotion__wrapper,
.landing_tiles .promotion__container{
  height: 100%;
}

.landing_tiles .promotion__body{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.landing_tiles .promotion__body-header{
  flex: 1 1 auto;
}

.landing_tiles .promotion__content{
  border-top: none !important;
  padding-top: 0 !important;
}

.landing_tiles .promotion_default .promotion__body {
    background: white !important;
}

/* Banner positioning */
.landing_tiles .promotion.active .promotion__banner{
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  min-height: auto !important;
}

/* ---------------------------------------------------------
   TABLET (iPad-ish): 2 COLUMNS + FIXED PLACEMENT
   Keeps 2-up stable through ~989/992px where frameworks often flip layout
   --------------------------------------------------------- */
@media (min-width: 769px) and (max-width: 1024px){

  .landing_tiles .promotions{
    display: grid !important; /* re-assert grid */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;

    /* extra stomps in case another CSS sets flex */
    flex-wrap: nowrap !important;

    gap: 45px !important;
    width: 100% !important;
  }

  /* Reset placement first so our explicit placement always wins */
  .landing_tiles .promotions > .promotion{
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Annual (child 3) -> row 1 col 1 */
  .landing_tiles .promotions > .promotion:nth-child(3){
    grid-row: 1 !important;
    grid-column: 1 !important;
  }

  /* Monthly (child 1) -> row 1 col 2 */
  .landing_tiles .promotions > .promotion:nth-child(1){
    grid-row: 1 !important;
    grid-column: 2 !important;
  }

  /* Delivery (child 5) -> row 2 col 1 */
  .landing_tiles .promotions > .promotion:nth-child(5){
    grid-row: 2 !important;
    grid-column: 1 !important;
  }
}

/* ---------------------------------------------------------
   MOBILE: 1 COLUMN + CENTERED + EXTRA PADDING + REORDER
   --------------------------------------------------------- */
@media (max-width: 768px){

  .landing_tiles .promotions{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;

    /* FIX: avoid 100vw offset on mobile */
    width: 100% !important;
    max-width: 100% !important;

    /* Center it + add breathing room */
    margin: 0 auto !important;
    padding: 0 16px 18px !important; /* left/right padding + a little bottom */

    justify-items: stretch !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
  }

  .landing_tiles .promotions > .promotion{
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  /* Order: Annual -> Monthly -> Delivery */
  .landing_tiles .promotions > .promotion:nth-child(3){ grid-row: 1 !important; } /* Annual */
  .landing_tiles .promotions > .promotion:nth-child(1){ grid-row: 2 !important; } /* Monthly */
  .landing_tiles .promotions > .promotion:nth-child(5){ grid-row: 3 !important; } /* Delivery */
}

@media (max-width: 768px){
  .landing_tiles .promotions{
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }

  .p1 span {
    padding: 0px 20px;
}
}


.landing_tiles .pheader{
  min-height: 0 !important;
  padding: 0 !important;
  border-bottom: none !important;
  background: rgb(244, 245, 244) !important;
}

.pheader{
  background-color: rgb(244, 245, 244) !important;
}

body {
    background-color: rgb(244, 245, 244) !important;
}

.btn {
  border-radius: 25px !important;
}