/* =========================
   HOMEPAGE — QUICK OVERRIDES
   ========================= */

/* 1) Promo slider → give bottom space so the next section isn’t cramped */
@media (min-width:1025px){
  .promo-carousel-container{
    max-width: 1200px !important;     /* slightly wider on desktop */
    margin-bottom: clamp(28px,4vw,56px) !important;
  }
  .promo-carousel-container .promo-banner{
    height: 240px !important;          /* modestly taller = nicer visual balance */
  }
  .promo-carousel-container .promo-content{ flex-basis: 440px !important; }
}

/* 2) “YOUR PHOTO, OUR DESIGN” — widen, loosen gaps, scale type slightly */
@media (min-width:1025px){
  .pp-home-gallery{
    max-width: none !important;
    width: min(1280px, 96vw) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .pp-home-gallery h2{
    font-size: clamp(34px, 2.6vw, 46px) !important;
    letter-spacing: .02em;
    margin-bottom: .5rem !important;
  }

  .pp-home-gallery > p{
    font-size: 18px !important;
    margin-bottom: 1.25rem !important;
  }

  /* Order tiles: wider grid + bigger tiles and gaps */
  .pp-order-tiles{
    width: min(1280px, 96vw) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
    margin: 16px auto 28px !important;
  }
  .pp-order-tile{
    padding: 18px 16px !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 26px rgba(0,0,0,.08) !important;
  }
  .pp-order-emoji{ font-size: 28px !important; }
  .pp-order-title{ font-size: 18px !important; }
  .pp-order-sub{ font-size: 14px !important; }

  /* Gallery strip: slightly bigger gutters so the row can “breathe” */
  .pp-gallery__strip{ gap: 16px !important; }
  .pp-gallery__item{
    flex: 0 0 calc((100% - (16px * 4)) / 5) !important;
    max-width: calc((100% - (16px * 4)) / 5) !important;
    border-radius: 14px !important;
  }

  /* Button spacing under the gallery */
  .pp-home-gallery .pp-gallery__cta{ margin-top: 16px !important; }
}

/* 3) Announcement bar — thinner & remove any stray gaps (desktop only) */
@media (min-width:1025px){
  .promo-rotator{
    margin: 0 !important;                 /* kill stray gaps above/below */
    line-height: 1.25 !important;
    border-bottom-width: 0 !important;     /* keep it visually light */
  }
  .promo-rotator .promo-item{
    min-height: 34px !important;           /* was taller; make it sleeker */
    padding: 0.45rem 0.9rem 0.5rem !important;
  }
  .promo-rotator .promo-track{ will-change: transform; }

  /* Ensure the section above doesn’t add bottom margin that re-creates a gap */
  .card-categories,
  .category-carousel{ margin-bottom: 0 !important; }
}

/* 4) Small desktop/tablet (just ease spacing a bit) */
@media (min-width:900px) and (max-width:1024px){
  .pp-order-tiles{ gap: 16px !important; }
  .pp-order-title{ font-size: 17px !important; }
  .pp-order-sub{ font-size: 13px !important; }
}

/* 5) Safety: keep the announcement bar from collapsing on very wide screens */
@media (min-width:1440px){
  .promo-rotator{ font-size: 14px !important; }
}