/* top thin Banner CSS */ 

.promo-banner {
    width: 100%;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  .promo-inner {
    max-width: 100%;
    margin: 0 auto;
    background: #A81D34;
    color: #ffffff;
    padding: 2px 14px 6px;
    text-align: center;
  }

  .promo-header {
    margin: 0 0 2px;
  }
    
    .promo-header-text {
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 2px;
  }

  .promo-subheader {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    margin: 0 0 0px;
  }

  /* Optional tweak for very small screens */
  @media (max-width: 480px) {
    .promo-header {
      font-size: 1.6rem;
    }
    .promo-subheader {
      font-size: 0.85rem;
    }
  }


/* homepage banner 2 to 1 column CSS */

    .homepage-promo-row {
      display: flex;
      gap: 0px;         /* space between columns */
      background-color: #ac233b;
      margin-bottom: 16px;
    }

    .homepage-promo-column {
      flex: 1;             /* each column takes equal space */
      box-sizing: border-box;
      padding: 0;
      background: #fff;
      border: 0px solid #ddd;
      border-radius: 4px;
      text-align: center;
    }

    /* On small screens, stack into one column */
    @media (max-width: 600px) {
      .homepage-promo-row {
        flex-direction: column;
      }
    }


    /* BLACK FRIDAY CSS Nov 24 2025 */

    .BFS-top-promo-banner {
    width: 100%;
    background: #26231F;
    color: #ffffff;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
  }

  .BFS-top-promo-inner {
    max-width: 800px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    text-align: center;
    padding: 2px 0 3px;
  }

  .BFS-promo-col {
    padding: 0px 7px;
    box-sizing: border-box;
    margin: 6px 0 8px;
  }
    
    #border {border-right-width: 1px; border-right-style: solid; padding-left: 0rem; padding-right: 0rem;}
    #add-padding {padding-left: 0rem; padding-right: 4rem; }
    #arrow-link {font-weight: 900; color: #fff; text-decoration: none; font-weight: 200;}

  /* Desktop layout */
  @media (min-width: 768px) {
    .BFS-top-promo-inner {
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
    }

    /* Vertical divider */
    .BFS-promo-divider {
      width: 2px;
      margin: 10px 0;
      height: calc(100% - 6px);
    }
      
    #border {border-right-width: 1px; border-right-style: solid; padding-left: 0rem; padding-right: 4rem;}
  }



/* BIG BANNER CSS */

  .BF-promo-banner {
    width: 100%;
    margin: 0;
    padding: 0;
    background-image: url("https://www.pennstateind.com/mm5/images/banners/2025-Cyber-Monday-Sale/chevron-bkgrd.webp");
    background-size: 75% auto;
  }

  .BF-promo-banner picture,
  .BF-promo-banner img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
  }
    
    
     /* On small screens, stack into one column */
    @media (max-width: 768px) {
      .BF-promo-banner {
        background-size: 100% auto;
      }
    }

/* SALE CATEGORIES BANNER CSS */

    .BFS-promo-grid-wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 16px;
    background: #ffffff; /* white background */
  }

  .BFS-promo-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;    /* 1 column mobile */
    gap: 12px;
  }

  .BFS-promo-item {
    background: #A81D34; /* red background */
    padding: 10px;
    box-sizing: border-box;
    border-radius: 16px;  /* optional – remove if not needed */
  }

  .BFS-promo-item img {
    display: block;
    width: 100%;
    height: auto;
    border: 0;
  }

  /* Desktop: 3 columns */
  @media (min-width: 768px) {
    .BFS-promo-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }