/* FREE SHIPPING under $49 BANNER */

.top-promo {
    width: 100%;
    background: #A81D34;
    color: #fff;
    text-align: center;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    padding: 8px 16px 16px;
    box-sizing: border-box;
  }

  .headline {
    display: block;
    font-weight: 700;
    font-size: 1.7rem;
    text-transform: uppercase;
    line-height: 1.3;
  }

  .subline {
    display: block;
    font-weight: 300;
    font-size: 0.95rem;
    text-transform: uppercase;
    line-height: 1.1;
  }

  .subline a {
    color: #fff;
    text-decoration: none;
    text-transform: lowercase;
    margin-left: 6px;
    font-weight: 300;
    font-size: 0.75rem;
  }

  /* Larger screens: one line layout */
  @media (min-width: 768px) {
    .top-promo {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      padding: 8px 20px;
    }
    .headline,
    .subline {
      display: inline;
    }
    .headline {
      font-size: 1.7rem;
    }
    .subline {
      font-size: .95rem;
    }
    .subline a {
      margin-left: 10px;
      font-size: .75rem;
    }
  }

/* FREE SHIPPING under $49 BANNER */

/* FREE SHIPPING under $49 HOME BANNER  */


 #freeship-promo-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
  }

  .freeship-promo-banner {
    width: 100%;
    min-height: 170px; /* adjust if needed */
    background-image: url('https://www.pennstateind.com/mm5/images/banners/2025-Cyber-Monday-Sale/2025-free-shipping-mobile.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  @media (min-width: 600px) {
    .freeship-promo-banner {
      min-height: 240px;
    }
  }

  @media (min-width: 768px) {
    .freeship-promo-banner {
      min-height: 105px;
      background-image: url('https://www.pennstateind.com/mm5/images/banners/2025-Cyber-Monday-Sale/2025-free-shipping-full.png'); /* replace with your final desktop image */
    }
  }

  @media (min-width: 1200px) {
    .freeship-promo-banner {
      min-height: 180px;
    }
  }
    
@media (min-width: 1700px) {
    .freeship-promo-banner {
      min-height: 180px;
    }
  }


/* FREE SHIPPING under $49 HOME BANNER  */


/* 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;}
    #give-promo-trigger-space {position: relative; left: 1.5rem; text-decoration: underline !important;}

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

    /* 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 */

 .BlackF-promo-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
  }

  .BlackF-promo-banner {
    width: 100%;
    min-height: 340px; /* adjust if needed */
    background-image: url('https://www.pennstateind.com/mm5/images/banners/2025-Cyber-Monday-Sale/Black-Friday-Large-banner-mobile-image.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 14px;
  }

  @media (min-width: 600px) {
    .BlackF-promo-banner {
      min-height: 450px;
    }
  }

  @media (min-width: 768px) {
    .BlackF-promo-banner {
      min-height: 300px;
      background-image: url('https://www.pennstateind.com/mm5/images/banners/2025-Cyber-Monday-Sale/Black-Friday-Large-banner-image-1.webp'); /* replace with your final desktop image */
    }
  }

  @media (min-width: 1200px) {
    .BlackF-promo-banner {
      min-height: 420px;
    }
  }
    
@media (min-width: 1700px) {
    .BlackF-promo-banner {
      min-height: 430px;
    }
  }


/* 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);
    }
  }



/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/* 12 DAYS OF DEALS PAGE CSS */


 /* Header */
  .page-header {
    text-align: center;
    padding: 20px 0px 10px;
    font-size: 2.4rem;
    font-weight: 700;
    background: #ffffff;
  }
	
	#page-header-masthead {margin: 0 auto; width: 40%;}

  /* Grid wrapper */
  .grid-wrap {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns desktop */
    gap: 20px;
    padding: 0px 20px;
    max-width: 1400px;
    margin: 0 auto;
  }

  /* Grid items */
  .grid-item a {
    display: block;
    width: 100%;
    height: 100%;
  }

  .grid-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 6px;
    overflow: hidden;
  }

  /* Mobile: 1 column */
  @media (max-width: 768px) {
    .grid-wrap {
      grid-template-columns: 1fr;
	
    }
	  
	#page-header-masthead {width: 75%;}
  }
	
  /* Mobile  */
  @media (max-width: 440px) {
    .grid-wrap {
      grid-template-columns: 1fr;
	
    }
	  
	#page-header-masthead {width: 70%;}
  }


/* 12 DAYS OF DEALS PAGE CSS */ /* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/



/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/* 12 DAYS OF DEALS TOP BANNER CSS */

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

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

  .DOD-promo-col {
    padding: 0px 7px;
    box-sizing: border-box;
    margin: 6px 0 8px;
  }
    
    #DOD-border {border-right-width: 1px; border-right-style: solid; padding-left: 0rem; padding-right: 0rem;}
    #DOD-add-padding {padding-left: 0rem; padding-right: 4rem; }
    #DOD-arrow-link {font-weight: 900; color: #fff; text-decoration: none; font-weight: 200;}
    #DOD-give-promo-trigger-space {position: relative; left: 1.2rem; text-decoration: underline !important;}
	#DOD-give-promo-trigger-space2 {position: relative; left: 1.2rem; text-decoration: underline !important;}
	

  /* Desktop layout */
  @media (min-width: 768px) {
    .DOD-top-promo-inner {
      grid-template-columns: 1fr auto 1fr;
      align-items: center;
    }
      
      #DOD-give-promo-trigger-space {left: 12%; }
	  #DOD-give-promo-trigger-space2 {left: 12%; }

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


/* 12 DAYS OF DEALS TOP BANNER CSS */ /* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/



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

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

.dayodeals-promo-header {
    margin: 0 0 2px;
  }
    
.dayodeals-promo-header-text {
    font-size: 1.7rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 2px;
  }
	
.dayodeals-promo-header-text2 {
    font-size: 1.5rem;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 20px 2px;
  }
	
.dayodeals-promo-header-text-links {
    font-size: 1.258rem;
    font-weight: 200;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 2px;
	color: #FFFF00;
  }

.dayodeals-promo-subheader {
    font-size: 11px !important; 
	  font: 100 normal !important; 
	  font-family: Roboto, Helvetica, Arial, sans-serif !important; 
	  padding-left: .5rem;
	  letter-spacing: normal;
  }

  /* Optional tweak for very small screens */
  @media (max-width: 480px) {
	  
.dayodeals-promo-header {
      font-size: 1.4rem;
    }
	  
.dayodeals-promo-header-text {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 12% 2px;
  }
	  
.dayodeals-promo-header-text2 {
	margin: 0 2% 0;
	
	  }
	  
.dayodeals-promo-header-link {
	margin: 0 2% 0;
	
	  }
	  
.dayodeals-promo-subheader {
      font-size: 16px;
    }
  }
	
	
  /* Optional tweak for very small screens */
  @media (max-width: 420px) {
	  
.dayodeals-promo-header {
      font-size: 1.4rem;
    }
	  
.dayodeals-promo-header-text {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 8% 2px;
  }
	  
.dayodeals-promo-header-text2 {
	margin: 0 2% 0;
	
	  }
	  
.dayodeals-promo-header-link {
	margin: 0 2% 0;
	
	  }
	  
.dayodeals-promo-subheader {
      font-size: 16px;
    }
  }


/* DAY 11 TOP BANNER */


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

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

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

  .dayodeals-dayeleven-promo-subheader {
    font-size: 12px !important; 
	  font: 100 normal !important; 
	  font-family: Roboto, Helvetica, Arial, sans-serif !important; 
	  padding-left: .5rem;
	  letter-spacing: normal;
  }

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



/*   DAY 6 TOP BANNER   */

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

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

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

  .dayodeals-six-promo-subheader {
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: normal;
    margin: 0 0 0px;
  }

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


/* DAY 7 HOME BANNER.  */



#daysofdeals-seven-promo-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
	  
  }

  /* Aspect-ratio box for auto height */
  .daysofdeals-seven-promo-banner {
    width: 100%;
    aspect-ratio: 1 / .55; /* adjust to match your image's shape */
    background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-dealer-home-banner-mobile-day7.gif');
    background-size: contain;   /* ensures entire image stays visible */
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  /* Swap to desktop image */
  @media (min-width: 600px) {
    .daysofdeals-seven-promo-banner {
      aspect-ratio: 1 / .18; /* desktop aspect ratio */
      background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-deals-home-banner-day7.gif');
      background-size: cover; /* optional: cover fills space more nicely */
    }
  }


/* DAY 8 HOME BANNER */



#daysofdeals-eight-promo-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
	  
  }

  /* Aspect-ratio box for auto height */
  .daysofdeals-eight-promo-banner {
    width: 100%;
    aspect-ratio: 1 / .55; /* adjust to match your image's shape */
    background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-dealer-home-banner-mobile-day8.gif');
    background-size: contain;   /* ensures entire image stays visible */
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  /* Swap to desktop image */
  @media (min-width: 600px) {
    .daysofdeals-eight-promo-banner {
      aspect-ratio: 1 / .18; /* desktop aspect ratio */
      background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-deals-home-banner-day008.gif');
      background-size: cover; /* optional: cover fills space more nicely */
    }
  }


/* DAY 9 HOME BANNER. */

#daysofdeals-nine-promo-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
	  
  }

  /* Aspect-ratio box for auto height */
  .daysofdeals-nine-promo-banner {
    width: 100%;
    aspect-ratio: 1 / .55; /* adjust to match your image's shape */
    background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-dealer-home-banner-mobile-day9.gif');
    background-size: contain;   /* ensures entire image stays visible */
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  /* Swap to desktop image */
  @media (min-width: 600px) {
    .daysofdeals-nine-promo-banner {
      aspect-ratio: 1 / .18; /* desktop aspect ratio */
      background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-deals-home-banner-day9.gif');
      background-size: cover; /* optional: cover fills space more nicely */
    }
  }


/* DAY 10 HOME BANNER */


#daysofdeals-ten-promo-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
	  
  }

  /* Aspect-ratio box for auto height */
  .daysofdeals-ten-promo-banner {
    width: 100%;
    aspect-ratio: 1 / .55; /* adjust to match your image's shape */
    background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-dealer-home-banner-mobile-day10.gif');
    background-size: contain;   /* ensures entire image stays visible */
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  /* Swap to desktop image */
  @media (min-width: 600px) {
    .daysofdeals-ten-promo-banner {
      aspect-ratio: 1 / .18; /* desktop aspect ratio */
      background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-deals-home-banner-day10.gif');
      background-size: cover; /* optional: cover fills space more nicely */
    }
  }


/* DAY 11 HOME BANNER */


#daysofdeals-eleven-promo-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
	  
  }

  /* Aspect-ratio box for auto height */
  .daysofdeals-eleven-promo-banner {
    width: 100%;
    aspect-ratio: 1 / .55; /* adjust to match your image's shape */
    background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-dealer-home-banner-mobile-day11.gif');
    background-size: contain;   /* ensures entire image stays visible */
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  /* Swap to desktop image */
  @media (min-width: 600px) {
    .daysofdeals-eleven-promo-banner {
      aspect-ratio: 1 / .18; /* desktop aspect ratio */
      background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-deals-home-banner-day11.gif');
      background-size: cover; /* optional: cover fills space more nicely */
    }
  }




/* DAY 12 HOME BANNER.  */



 #daysofdeals-twelve-promo-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
	  
  }

  /* Aspect-ratio box for auto height */
  .daysofdeals-twelve-promo-banner {
    width: 100%;
    aspect-ratio: 1 / .55; /* adjust to match your image's shape */
    background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-dealer-home-banner-mobile-day12.gif');
    background-size: contain;   /* ensures entire image stays visible */
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  /* Swap to desktop image */
  @media (min-width: 600px) {
    .daysofdeals-twelve-promo-banner {
      aspect-ratio: 1 / .18; /* desktop aspect ratio */
      background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-deals-home-banner-day012.gif');
      background-size: cover; /* optional: cover fills space more nicely */
    }
  }




/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
/* 12 DAYS OF DEALS HOME BANNER CSS */



#daysofdeals-promo-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
	  
  }

  /* Aspect-ratio box for auto height */
  .daysofdeals-promo-banner {
    width: 100%;
    aspect-ratio: 1 / .55; /* adjust to match your image's shape */
    background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-dealer-home-banner-mobile-day05new.gif');
    background-size: contain;   /* ensures entire image stays visible */
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  /* Swap to desktop image */
  @media (min-width: 600px) {
    .daysofdeals-promo-banner {
      aspect-ratio: 1 / .16; /* desktop aspect ratio */
      background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-deals-home-banner-day05new.gif');
      background-size: cover; /* optional: cover fills space more nicely */
    }
  }


/*.  DAY 6 HOME BANNER CSS   */

#daysofdeals-six-promo-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
	  
  }

  /* Aspect-ratio box for auto height */
  .daysofdeals-six-promo-banner {
    width: 100%;
    aspect-ratio: 1 / .55; /* adjust to match your image's shape */
    background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-dealer-home-banner-mobile-day6.gif');
    background-size: contain;   /* ensures entire image stays visible */
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  /* Swap to desktop image */
  @media (min-width: 600px) {
    .daysofdeals-six-promo-banner {
      aspect-ratio: 1 / .18; /* desktop aspect ratio */
      background-image: url('https://www.pennstateind.com/mm5/images/banners/12-days-of-deals-2025/12-days-of-deals-home-banner-day6.gif');
      background-size: cover; /* optional: cover fills space more nicely */
    }
  }






/* 12 DAYS OF DEALS MAIN BANNER CSS */ /* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/



/* 2025 END OF YEAR SALE STYLES */
/*///////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////*/




#end-of-year-sale-promo-banner-link {
    display: block;
    width: 100%;
    text-decoration: none;
	  
  }

  /* Aspect-ratio box for auto height */
  .end-of-year-sale-promo-banner {
    width: 100%;
    aspect-ratio: 1 / .64; /* adjust to match your image's shape */
    background-image: url('https://www.pennstateind.com/mm5/images/banners/BuyMoreSaveMore2026/BuyMoreSaveMore_header2026-mobile.webp');
    background-size: contain;   /* ensures entire image stays visible */
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 10px;
  }

  /* Swap to desktop image */
  @media (min-width: 600px) {
    .end-of-year-sale-promo-banner {
      aspect-ratio: 1 / .13; /* desktop aspect ratio */
      background-image: url('https://www.pennstateind.com/mm5/images/banners/BuyMoreSaveMore2026/BuyMoreSaveMore_header2026.webp');
      background-size: cover; /* optional: cover fills space more nicely */
    }
  }




/* END OF 2025 END OF YEAR SALE STYLES */
/*///////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////*/






      /*///////////////////////////////////////////////////////////////////////////
//////////////////////////        20 OFF WHEN YOU SPEND 100        ///////////////////
/////////////////////////////////////////////////////////////////////////////////////////
///////////////////////       DATE: JUNE 8 2026 >>> JUNE 15 2026      ///////////////////
//////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////*/


.psi-20off-top-promo {
  background: #26231f;
  text-align: center;
  padding: 7px 12px;
  line-height: 1;
}

.psi-20off-promo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: inherit;
  text-decoration: none;
  flex-wrap: wrap;
}

.psi-20off-promo-amount {
  color: #ffd15a;
  font-family: Open Sans, "Arial Black", sans-serif;
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000;
}

.psi-20off-promo-condition {
  background: #d8d8d8;
  color: #1f1f1f;
  font-family: Open Sans, "Arial Black", sans-serif;
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 900;
  letter-spacing: 1px;
  padding: 5px 12px 4px;
  box-shadow: 2px 2px 0 #000;
}

.psi-20off-promo-details {
  color: #ffffff;
  font-size: 12px;
  text-decoration: underline;
  opacity: 0.85;
  align-self: flex-end;
  margin-bottom: 5px;
}

@media (max-width: 600px) {
  .psi-20off-top-promo {
    padding: 10px 8px;
  }

  .psi-20off-promo-link {
    gap: 6px 10px;
  }

  .psi-20off-promo-amount {
    width: 100%;
    font-size: 34px;
  }

  .psi-20off-promo-condition {
    font-size: 18px;
  }

  .psi-20off-promo-details {
    font-size: 11px;
    margin-bottom: 3px;
  }
}


 .psi-20off-promo-group {
        background-color: #ac233b;
        margin-bottom: 10px
    }
    .psi-20off-promo-left {
        float: left;
        width: 50%;
    }
    .psi-20off-promo-right {
        float: right;
        width: 50%;
    }
    .psi-20off-promo-img {
        max-width: 100%;
        height: auto;
        margin: 0px;
        padding: 0px;
    }
    .psi-20off-group:after {
        content:"";
        display: table;
        clear: both;
    }
    @media screen and (max-width: 480px) {
        .psi-20off-promo-left, .psi-20off-promo-right {
            float: none;
            width: auto;
        }
    }



/*//////////////////////////////////////////////////////////////////////////////////
    ///////////////      EMD OF $20 OFF WHEN YOU SPEND $100      ///////////////
//////////////////////////////////////////////////////////////////////////////////*/






/*//////////////////////////////////////////////////////////////////////////////////
    ///////////////      START OF NEXT ORDER FREE     ///////////////
//////////////////////////////////////////////////////////////////////////////////*/


.psi-next-free-banner,
.psi-next-free-banner * {
  box-sizing: border-box;
}

.psi-next-free-banner {
  width: 100%;
  background: #A6192E;
  color: #fff;
  font-family: Inter, Arial, Helvetica, sans-serif;
}

.psi-next-free-inner {
  max-width: 1120px;
  min-height: 84px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: auto 1px minmax(190px, 1fr) 1px minmax(190px, 1fr) auto;
  align-items: center;
  column-gap: 34px;
}

.psi-next-free-title {
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.psi-next-free-title span {
  color: #ffc928;
}

.psi-next-free-break {
  display: none;
}

.psi-next-free-divider {
  width: 1px;
  height: 38px;
  background: rgba(255, 255, 255, 0.85);
}

.psi-next-free-item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.psi-next-free-item img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: block;
}

.psi-next-free-item p {
  margin: 0;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 400;
}

.psi-next-free-details {
  color: #fff;
  font-size: 12px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.psi-next-free-details:hover {
  text-decoration: underline;
}


/* Tablet */
@media (min-width: 641px) and (max-width: 980px) {
  .psi-next-free-inner {
    max-width: none;
    min-height: 98px;
    padding: 18px 40px 12px;
    grid-template-columns: 205px 1px minmax(170px, 1fr) 1px minmax(200px, 1fr);
    grid-template-rows: auto auto;
    column-gap: 28px;
    row-gap: 8px;
    align-items: center;
  }

  .psi-next-free-title {
    grid-column: 1;
    grid-row: 1 / span 2;
    font-size: 22px;
    line-height: 0.98;
    white-space: normal;
  }

  .psi-next-free-break {
    display: block;
  }

  .psi-next-free-divider:nth-of-type(1) {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .psi-next-free-refund {
    grid-column: 3;
    grid-row: 1;
  }

  .psi-next-free-divider:nth-of-type(2) {
    grid-column: 4;
    grid-row: 1 / span 2;
  }

  .psi-next-free-date {
    grid-column: 5;
    grid-row: 1;
  }

  .psi-next-free-details {
    grid-column: 5;
    grid-row: 2;
    justify-self: end;
    align-self: start;
  }

  .psi-next-free-item {
    gap: 12px;
  }

  .psi-next-free-item img {
    width: 30px;
    height: 30px;
    flex-basis: 30px;
  }

  .psi-next-free-item p {
    font-size: 12px;
  }
}


/* Mobile */
@media (max-width: 640px) {
  .psi-next-free-inner {
    max-width: 375px;
    min-height: 236px;
    padding: 15px 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 19px;
  }

  .psi-next-free-title {
    font-size: 29px;
    line-height: 1.02;
    text-align: center;
    white-space: normal;
  }

  .psi-next-free-break {
    display: block;
  }

  .psi-next-free-divider {
    display: none;
  }

  .psi-next-free-item {
    width: 255px;
    gap: 11px;
    align-items: flex-start;
  }

  .psi-next-free-item img {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
  }

  .psi-next-free-item p {
    font-size: 13px;
    line-height: 1.25;
	text-align: center;
  }

  .psi-next-free-details {
    width: 255px;
    font-size: 12px;
    margin-top: 1px;
  }
}


/*//////////////////////////////////////////////////////////////////////////////////
    ///////////////      EMD OF NEXT ORDER FREE       ///////////////
//////////////////////////////////////////////////////////////////////////////////*/