/* ------------------------------------------
   Global & Layout
   ------------------------------------------ */

/* soften the card corners */
.card {
    border-radius: 1rem;
  }
  
  /* give a bit more vertical spacing in forms */
  .card form .form-control,
  .card form .form-select {
    margin-bottom: 1.25rem;
  }
  
  /* reset body padding to allow banner flush with navbar */
  body {
    padding-top: 0;
    margin-top: 0;
  }
  
  /* make sure scrollbar width doesn’t introduce horizontal scroll */
  html, body {
    overflow-x: hidden;
  }
  
  /* ------------------------------------------
     Quantity Selector
     ------------------------------------------ */
  
  /* inline-flex container to align buttons and input */
  .quantity-selector {
    display: inline-flex;
    align-items: baseline; /* align bottoms of typography */
  }
  
  .quantity-selector .btn {
    width: 2rem;
    height: 2rem;
    padding: 0;
    line-height: 1;
  }
  
  .quantity-selector input {
    width: 3rem;
    height: 2rem;
    line-height: 2rem;
    padding: 0;
    margin: 0 0.25rem;
    text-align: center;
  }
  
  /* ------------------------------------------
     Hero Banner (Homepage)
     ------------------------------------------ */
  
  /* full-width hero banner touching the navbar */
  .hero-banner {
    width: 100vw;            /* span the entire viewport width */
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 60vh;
    min-height: 400px;
    background: url("/static/img/banner.png") center/cover no-repeat;
    overflow: hidden;
  }
  
  /* dark overlay for better text readability */
  .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
  }
  
  /* ensure inner content sits above the overlay */
  .hero-banner .container {
    position: relative;
    z-index: 1;
    color: #fff;
  }
  
  /* ------------------------------------------
     Utility & Overrides
     ------------------------------------------ */
  
  /* prevent cards from overflowing on narrow screens */
  .container, .hero-banner {
    max-width: 100%;
  }
  
  /* other custom overrides can go here */
  /* Ensure all .btn links have no underline */
.btn {
    text-decoration: none !important;
  }
  
  /* If you have nav-links you want to look like buttons: */
  .navbar-nav .nav-link {
    /* remove the underline */
    text-decoration: none;
    /* give them button padding & borders if you like */
    padding: 0.375rem 0.75rem;
    border-radius: 0.375rem;
    background-color: #0d6efd;    /* bootstrap primary */
    color: #fff !important;
    transition: background-color 0.2s;
  }
  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    text-decoration: none;
    background-color: #0b5ed7;    /* a darker hover */
  }