/* ==========================================================================
   GrainCo — responsive overrides
   Bootstrap 5 grid handles most layout; this file adds the custom,
   breakpoint-specific polish beyond Bootstrap defaults.
   ========================================================================== */

/* ---- Mobile (< 576px) ---- */
@media (max-width: 575.98px) {
  .grn-hero {
    padding-block: 2.5rem;
  }
  .grn-nav-search {
    max-width: none;
    width: 100%;
    margin-bottom: 0.75rem;
  }

  .grn-cart-row {
    padding: 1rem;
  }
  .grn-cart-row .grn-cart-thumb {
    width: 64px;
    height: 64px;
  }
  .grn-price-box {
    flex-direction: column;
    align-items: flex-start;
  }
  .grn-price-box-meta {
    text-align: left;
  }
  .grn-spec-grid {
    grid-template-columns: 1fr;
  }
  .grn-gallery-thumbs {
    grid-template-columns: repeat(4, 1fr);
  }
  .grn-checkout-section {
    padding: 1.25rem;
  }
}

/* ---- Tablet (576px – 991.98px) ---- */
@media (min-width: 576px) and (max-width: 991.98px) {
  .grn-hero {
    padding-block: 3.25rem;
  }
}

/* ---- Desktop and up (>= 992px) ---- */
@media (min-width: 992px) {
  .grn-sticky-summary {
    position: sticky;
    top: 96px;
  }
}

/* Sticky order summary/checkout should not stick on small screens where
   vertical space is already tight and content stacks. */
@media (max-width: 991.98px) {
  .grn-sticky-summary {
    position: static;
  }
}

/* Collapsed navbar spacing on mobile/tablet */
@media (max-width: 991.98px) {
  .navbar-nav {
    padding-top: 0.5rem;
  }
  .navbar-nav .nav-link {
    padding-block: 0.5rem;
  }
}

/* Product grid column counts beyond Bootstrap's row-cols utilities are
   already handled inline via row-cols-* classes in markup:
   1 col mobile / 2-3 col tablet / 4 col desktop. */