Product Category Page Template

Filterable and sortable product card grid.

				
					<header class="hro hro-img text-bg-primary bg-pos-rc bg-pos-xl-rc" style="--kb-bgimg-xs: url('../img/bg_hand_chips@xs.jpg'); --kb-bgimg-md: url('../img/bg_hand_chips@md.jpg'); --kb-bgimg-xl: url('../img/bg_hand_chips@xl.jpg');">
			  <a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>
			
			        <!-- [Navigation Area] -->
			        <nav class="kb-nav navbar kb-navbar-xl nav-fixed" ariaLabel="main" data-bs-theme="light">
			        
			            <div class="kb-user-nav">
			              <div class="container-fluid">
			                <ul class="navbar-nav navbar-nav-user justify-content-split">
			                  <li class="nav-item">
			                    <a href="" class="nav-link">Special Promotion CTA Copy</a>
			                  </li>
			                  <li class="nav-item">
			                    <a href="#" class="nav-link">
			                        <span class="fa-solid fa-cart-shopping" aria-hidden="true"></span><span class="visually-hidden">Cart</span>
			                    </a>
			                  </li>
			                </ul>
			              </div>
			            </div>
			          <div class="container-fluid">
			            <div class="nav-wrapper">
			              <a class="navbar-brand" href="#">
			                <img src="../../../../assets/img/herrs.png" class="brand-img-sm" alt="Herr's" width="320" height="179">
			                <img src="../../../../assets/img/herrs.png" class="brand-img-lg" alt="Herr's" width="320" height="179">
			              </a>
			              <ul class="navbar-nav navbar-nav-primary justify-content-center">
			                <li class="nav-item">
			                  <a href="#" class="nav-link">Shop Now</a>
			                </li>
			                <li class="nav-item">
			                  <a href="#" class="nav-link">Featured</a>
			                </li>
			                <li class="nav-item">
			                  <a href="#" class="nav-link">Merch</a>
			                </li>
			                <li class="nav-item">
			                  <a href="#" class="nav-link">About Herr&#x27;s</a>
			                </li>
			                <li class="nav-item">
			                  <a href="#" class="nav-link">Recipes</a>
			                </li>
			              </ul>
			              <ul class="navbar-nav navbar-nav-secondary justify-content-end">
			                <li class="nav-item">
			                  <a href="#" class="btn btn-cta">Visit Us</a>
			                </li>
			              </ul>
			            </div>
			        
			        
			            <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#navOffscreenContent" aria-controls="navOffscreenContent" aria-expanded="false" aria-label="Toggle navigation">
			              <span class="navbar-toggler-icon"></span>
			            </button>
			          </div>
			        
			          <div class="dropdown-bar">
			            <div class="dropdown-list">
			              <div class="dropdown-content">
			              </div>
			              <div class="bg-layer"></div>
			            </div>
			          </div>
			        
			        </nav>
			        
			        <!-- Offcanvas Menu: BEGIN -->
			        <div class="offcanvas offcanvas-end" tabindex="-1" id="navOffscreenContent" aria-label="Main Navigation">
			          <div class="offcanvas-header">
			            <button type="button" class="btn-close ms-auto me-3" data-bs-dismiss="offcanvas" aria-label="Close"></button>
			          </div>
			          <div class="offcanvas-body">
			        
			            <div class="accordion accordion-flush" id="accordionNavItems">
			              <div class="accordion-item">
			                <div class="accordion-header">
			                  <a href="#" class="btn btn-accordion-link">Shop Now</a>
			                </div>
			              </div>
			              <div class="accordion-item">
			                <div class="accordion-header">
			                  <a href="#" class="btn btn-accordion-link">Featured</a>
			                </div>
			              </div>
			              <div class="accordion-item">
			                <div class="accordion-header">
			                  <a href="#" class="btn btn-accordion-link">Merch</a>
			                </div>
			              </div>
			              <div class="accordion-item">
			                <div class="accordion-header">
			                  <a href="#" class="btn btn-accordion-link">About Herr&#x27;s</a>
			                </div>
			              </div>
			              <div class="accordion-item">
			                <div class="accordion-header">
			                  <a href="#" class="btn btn-accordion-link">Recipes</a>
			                </div>
			              </div>
			              <div class="accordion-item">
			                <div class="accordion-header">
			                  <a href="#" class="btn btn-accordion-link">Visit Us</a>
			                </div>
			              </div>
			            </div>
			        
			          </div>
			        </div>
			        <!-- Offcanvas Menu: END -->
			
			
			  <div class="container-xxl hro-content sec-spacing-lg sec-spacing-offset-lg">
			    <div class="row g-0">
			      <div class="col-md-8 col-xl-9 bg-accent1 bg-opacity-75 px-4 py-3 rounded-2 text-start">
			        <!-- BEGIN: Header Content -->
			        <h1>Herr's Potato Chips</h1>
			        <p class="h4">Herr's Potato Chips are always fresh, crisp, and tasty! Whether you like traditional, unique, or spicy flavors, we have a variety of potato chips for everyone!</p>
			        <!-- END: Header Content -->
			      </div>
			    </div>
			  </div>
			
			  <div class="overlay bg-opacity-0"></div>
			
			</header>
			
			
			<main id="main-content" tabindex="0">
			    <section class="sec-spacing bg-body-secondary">
			      <div class="container-xxl">
			        <div class="row">
			          <div class="col">
			
			            <h2>Products</h2>
			
			            <!-- Product Grid Filters -->
			            <div class="product-filters">
			              <fieldset class="radio-toggle-group">
			                <legend>Filter</legend>
			              
			                <div class="toggle-group">
			                  <div>
			                    <input type="radio" class="btn-check" name="prodFilter" id="prodFilter0" value="Potato_Chips" autocomplete="off" checked>
			                    <label class="btn btn-sm btn-outline-primary" for="prodFilter0">Potato Chips</label>
			                  </div>
			                  <div>
			                    <input type="radio" class="btn-check" name="prodFilter" id="prodFilter1" value="Kettle_Cooked" autocomplete="off">
			                    <label class="btn btn-sm btn-outline-primary" for="prodFilter1">Kettle Cooked</label>
			                  </div>
			                  <div>
			                    <input type="radio" class="btn-check" name="prodFilter" id="prodFilter2" value="Baked" autocomplete="off">
			                    <label class="btn btn-sm btn-outline-primary" for="prodFilter2">Baked</label>
			                  </div>
			                  <div>
			                    <input type="radio" class="btn-check" name="prodFilter" id="prodFilter3" value="Ripple" autocomplete="off">
			                    <label class="btn btn-sm btn-outline-primary" for="prodFilter3">Ripple</label>
			                  </div>
			                </div>
			              </fieldset>
			              <div class="form-spacer">
			                <label for="filterfcSort" class="form-label">Sort By</label>
			                <select class="form-select" id="filterfcSort">
			                     <option value="featured" selected>Featured</option>
			                     <option value="best_selling">Best Selling</option>
			                     <option value="alpha_a-z">Alphabetically, A-Z</option>
			                     <option value="alpha_z-a">Alphabetically, Z-A</option>
			                     <option value="price_low-high">Price, Low to High</option>
			                     <option value="price_high-low">Price, High to Low</option>
			                     <option value="date_new-old">Date, New to Old</option>
			                     <option value="date_old-new">Date, Old to New</option>
			                </select>
			              </div>
			            </div>
			
			            <!-- Product Grid -->
			            <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 row-cols-xl-4 row-flex-cols mb-5 g-2">
			                <div class="col">
			                  <div class="card dyn-crd-pdt">
			                    <div class="card-badges">
			                      <img src="../../../../assets/img/card-badge-ltf.svg" alt="Limited time flavor" class="img-fluid">
			                    </div>
			                    
			                    <figure class="figure">
			                        <img
			                          srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
			                                  ../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
			                                  ../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
			                          sizes="(max-width: 576px) 480px,
			                                 (max-width: 768px) 720px,
			                                 (max-width: 992px) 960px,"
			                          src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
			                          alt="Fried Pickles &amp; Ranch Kettle Cooked Potato Chips"
			                          class="figure-img"
			                        >
			                    </figure>
			                    
			                    <div class="card-body">
			                      <p class="card-title">Fried Pickles & Ranch Kettle Cooked Potato Chips</p>
			                      <span class="star-rating" role='img' aria-label="Rated 5 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i></span>
			                      <a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
			                    </div>
			                  </div>
			                </div>
			                <div class="col">
			                  <div class="card dyn-crd-pdt">
			                    <div class="card-badges">
			                      <img src="../../../../assets/img/card-badge-ltf.svg" alt="Limited time flavor" class="img-fluid">
			                    </div>
			                    
			                    <figure class="figure">
			                        <img
			                          srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
			                                  ../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
			                                  ../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
			                          sizes="(max-width: 576px) 480px,
			                                 (max-width: 768px) 720px,
			                                 (max-width: 992px) 960px,"
			                          src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
			                          alt="Steakhouse Fried Onion Kettle Cooked Potato Chips"
			                          class="figure-img"
			                        >
			                    </figure>
			                    
			                    <div class="card-body">
			                      <p class="card-title">Steakhouse Fried Onion Kettle Cooked Potato Chips</p>
			                      <span class="star-rating" role='img' aria-label="Rated 3 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star star-inactive" aria-hidden="true"></i><i class="fas fa-star star-inactive" aria-hidden="true"></i></span>
			                      <a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
			                    </div>
			                  </div>
			                </div>
			                <div class="col">
			                  <div class="card dyn-crd-pdt">
			                    <div class="card-badges">
			                      
			                    </div>
			                    
			                    <figure class="figure">
			                        <img
			                          srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
			                                  ../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
			                                  ../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
			                          sizes="(max-width: 576px) 480px,
			                                 (max-width: 768px) 720px,
			                                 (max-width: 992px) 960px,"
			                          src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
			                          alt="Crisp &#x27;N Tasty Potato Chips"
			                          class="figure-img"
			                        >
			                    </figure>
			                    
			                    <div class="card-body">
			                      <p class="card-title">Crisp 'N Tasty Potato Chips</p>
			                      <span class="star-rating" role='img' aria-label="Rated 5 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i></span>
			                      <a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
			                    </div>
			                  </div>
			                </div>
			                <div class="col">
			                  <div class="card dyn-crd-pdt">
			                    <div class="card-badges">
			                      
			                    </div>
			                    
			                    <figure class="figure">
			                        <img
			                          srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
			                                  ../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
			                                  ../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
			                          sizes="(max-width: 576px) 480px,
			                                 (max-width: 768px) 720px,
			                                 (max-width: 992px) 960px,"
			                          src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
			                          alt="Baby Back Ribs Potato Chips"
			                          class="figure-img"
			                        >
			                    </figure>
			                    
			                    <div class="card-body">
			                      <p class="card-title">Baby Back Ribs Potato Chips</p>
			                      <span class="star-rating" role='img' aria-label="Rated 4 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star star-inactive" aria-hidden="true"></i></span>
			                      <a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
			                    </div>
			                  </div>
			                </div>
			                <div class="col">
			                  <div class="card dyn-crd-pdt">
			                    <div class="card-badges">
			                      
			                    </div>
			                    
			                    <figure class="figure">
			                        <img
			                          srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
			                                  ../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
			                                  ../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
			                          sizes="(max-width: 576px) 480px,
			                                 (max-width: 768px) 720px,
			                                 (max-width: 992px) 960px,"
			                          src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
			                          alt="Old Bay® Potato Chips"
			                          class="figure-img"
			                        >
			                    </figure>
			                    
			                    <div class="card-body">
			                      <p class="card-title">Old Bay® Potato Chips</p>
			                      <span class="star-rating" role='img' aria-label="Rated 4 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star star-inactive" aria-hidden="true"></i></span>
			                      <a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
			                    </div>
			                  </div>
			                </div>
			                <div class="col">
			                  <div class="card dyn-crd-pdt">
			                    <div class="card-badges">
			                      
			                    </div>
			                    
			                    <figure class="figure">
			                        <img
			                          srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
			                                  ../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
			                                  ../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
			                          sizes="(max-width: 576px) 480px,
			                                 (max-width: 768px) 720px,
			                                 (max-width: 992px) 960px,"
			                          src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
			                          alt="Barbecue Potato Chips"
			                          class="figure-img"
			                        >
			                    </figure>
			                    
			                    <div class="card-body">
			                      <p class="card-title">Barbecue Potato Chips</p>
			                      <span class="star-rating" role='img' aria-label="Rated 5 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i></span>
			                      <a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
			                    </div>
			                  </div>
			                </div>
			                <div class="col">
			                  <div class="card dyn-crd-pdt">
			                    <div class="card-badges">
			                      
			                    </div>
			                    
			                    <figure class="figure">
			                        <img
			                          srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
			                                  ../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
			                                  ../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
			                          sizes="(max-width: 576px) 480px,
			                                 (max-width: 768px) 720px,
			                                 (max-width: 992px) 960px,"
			                          src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
			                          alt="Cheddar &amp; Sour Cream Ripple Potato Chips"
			                          class="figure-img"
			                        >
			                    </figure>
			                    
			                    <div class="card-body">
			                      <p class="card-title">Cheddar & Sour Cream Ripple Potato Chips</p>
			                      <span class="star-rating" role='img' aria-label="Rated 4 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star star-inactive" aria-hidden="true"></i></span>
			                      <a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
			                    </div>
			                  </div>
			                </div>
			                <div class="col">
			                  <div class="card dyn-crd-pdt">
			                    <div class="card-badges">
			                      
			                    </div>
			                    
			                    <figure class="figure">
			                        <img
			                          srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
			                                  ../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
			                                  ../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
			                          sizes="(max-width: 576px) 480px,
			                                 (max-width: 768px) 720px,
			                                 (max-width: 992px) 960px,"
			                          src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
			                          alt="Creamy Dill Pickle Ripple Potato Chips"
			                          class="figure-img"
			                        >
			                    </figure>
			                    
			                    <div class="card-body">
			                      <p class="card-title">Creamy Dill Pickle Ripple Potato Chips</p>
			                      <span class="star-rating" role='img' aria-label="Rated 5 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i></span>
			                      <a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
			                    </div>
			                  </div>
			                </div>
			                <div class="col">
			                  <div class="card dyn-crd-pdt">
			                    <div class="card-badges">
			                      
			                    </div>
			                    
			                    <figure class="figure">
			                        <img
			                          srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
			                                  ../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
			                                  ../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
			                          sizes="(max-width: 576px) 480px,
			                                 (max-width: 768px) 720px,
			                                 (max-width: 992px) 960px,"
			                          src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
			                          alt="Creamy Rand &amp; Habanero Potato Chips"
			                          class="figure-img"
			                        >
			                    </figure>
			                    
			                    <div class="card-body">
			                      <p class="card-title">Creamy Rand & Habanero Potato Chips</p>
			                      <span class="star-rating" role='img' aria-label="Rated 4 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star star-inactive" aria-hidden="true"></i></span>
			                      <a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
			                    </div>
			                  </div>
			                </div>
			                <div class="col">
			                  <div class="card dyn-crd-pdt">
			                    <div class="card-badges">
			                      
			                    </div>
			                    
			                    <figure class="figure">
			                        <img
			                          srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
			                                  ../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
			                                  ../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
			                          sizes="(max-width: 576px) 480px,
			                                 (max-width: 768px) 720px,
			                                 (max-width: 992px) 960px,"
			                          src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
			                          alt="Fire Roasted Sweet Corn Potato Chips"
			                          class="figure-img"
			                        >
			                    </figure>
			                    
			                    <div class="card-body">
			                      <p class="card-title">Fire Roasted Sweet Corn Potato Chips</p>
			                      <span class="star-rating" role='img' aria-label="Rated 5 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i></span>
			                      <a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
			                    </div>
			                  </div>
			                </div>
			                <div class="col">
			                  <div class="card dyn-crd-pdt">
			                    <div class="card-badges">
			                      
			                    </div>
			                    
			                    <figure class="figure">
			                        <img
			                          srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
			                                  ../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
			                                  ../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
			                          sizes="(max-width: 576px) 480px,
			                                 (max-width: 768px) 720px,
			                                 (max-width: 992px) 960px,"
			                          src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
			                          alt="Ghost Pepper Potato Chips"
			                          class="figure-img"
			                        >
			                    </figure>
			                    
			                    <div class="card-body">
			                      <p class="card-title">Ghost Pepper Potato Chips</p>
			                      <span class="star-rating" role='img' aria-label="Rated 4 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star star-inactive" aria-hidden="true"></i></span>
			                      <a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
			                    </div>
			                  </div>
			                </div>
			                <div class="col">
			                  <div class="card dyn-crd-pdt">
			                    <div class="card-badges">
			                      
			                    </div>
			                    
			                    <figure class="figure">
			                        <img
			                          srcset="../../../../assets/img/fpo/fpo-1-1@xs.jpg 480w,
			                                  ../../../../assets/img/fpo/fpo-1-1@md.jpg 720w,
			                                  ../../../../assets/img/fpo/fpo-1-1@lg.jpg 960w,"
			                          sizes="(max-width: 576px) 480px,
			                                 (max-width: 768px) 720px,
			                                 (max-width: 992px) 960px,"
			                          src="../../../../assets/img/fpo/fpo-1-1@md.jpg"
			                          alt="Honey BBQ Ripple Potato Chips"
			                          class="figure-img"
			                        >
			                    </figure>
			                    
			                    <div class="card-body">
			                      <p class="card-title">Honey BBQ Ripple Potato Chips</p>
			                      <span class="star-rating" role='img' aria-label="Rated 5 out of 5 stars"><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i><i class="fas fa-star" aria-hidden="true"></i></span>
			                      <a href="#" class="btn btn-primary btn-sm stretched-link">Select Options</a>
			                    </div>
			                  </div>
			                </div>
			            </div>
			
			            <!-- Product Grid Pagination -->
			            <nav aria-label="Product Grid">
			              <ul class="pagination justify-content-center">
			                <li class="page-item"><a class="page-link" ><span class="fa-solid fa-chevron-left" aria-hidden="true"></span><span class="visually-hidden">Previous</span>
			</a></li>
			
			                <li class="page-item active" aria-current="page"><span class="page-link">1</span></li>
			                <li class="page-item"><a class="page-link" href="#">2</a></li>
			                <li class="page-item"><a class="page-link" href="#">3</a></li>
			                <li class="page-item"><a class="page-link" href="#">4</a></li>
			                <li class="page-item"><a class="page-link" href="#">5</a></li>
			
			                <li class="page-item"><a class="page-link" href="#"><span class="fa-solid fa-chevron-right" aria-hidden="true"></span><span class="visually-hidden">Next</span>
			</a></li>
			              </ul>
			            </nav>
			
			          </div>
			        </div>
			      </div>
			    </section>
			
			
			</main>
			
			<footer class="fgr sec-spacing-top herrs-footer">
			    <div class="fgr-section">
			      <div class="container-xxl">
			        <div class="row">
			            <div class="col-md-12 col-xl-3">
			              <!-- BEGIN: Footer Content -->
			            <img class="footer-logo" src="../../../../assets/img/herrs.png" alt="Herr&#x27;s">
			            <p>271 Old Baltimore Pike <br>
			              Nottingham, PA 19362-9788</p>
			            <p>(610) 932-6400</p>
			
			            <ul class="list-social">
			              <li><a href="#"><span class="fa-brands fa-instagram" aria-hidden="true"></span><span class="visually-hidden">Instagram</span>
			</a></li>
			              <li><a href="#"><span class="fa-brands fa-facebook" aria-hidden="true"></span><span class="visually-hidden">Facebook</span>
			</a></li>
			              <li><a href="#"><span class="fa-brands fa-youtube" aria-hidden="true"></span><span class="visually-hidden">Youtube</span>
			</a></li>
			              <li><a href="#"><span class="fa-brands fa-tiktok" aria-hidden="true"></span><span class="visually-hidden">Tiktok</span>
			</a></li>
			              <li><a href="#"><span class="fa-brands fa-x-twitter" aria-hidden="true"></span><span class="visually-hidden">x-twitter</span>
			</a></li>
			            </ul>
			
			
			
			              <!-- END: Footer Content -->
			            </div>
			            <div class="col-md-4 col-xl-3">
			              <!-- BEGIN: Footer Content -->
			            <p class="footer-header">Our Company</p>
			            <ul class="link-list">
			              <li><a href="#">Our History</a></li>
			              <li><a href="#">Our Values</a></li>
			              <li><a href="#">Leadership Team</a></li>
			              <li><a href="#">Careers</a></li>
			            </ul>
			
			
			
			              <!-- END: Footer Content -->
			            </div>
			            <div class="col-md-4 col-xl-3">
			              <!-- BEGIN: Footer Content -->
			            <p class="footer-header">Contact Us</p>
			            <ul class="link-list">
			              <li><a href="#">Contact Us</a></li>
			              <li><a href="#">Sales &amp; Distribution</a></li>
			              <li><a href="#">Media Outreach</a></li>
			            </ul>
			
			
			
			              <!-- END: Footer Content -->
			            </div>
			            <div class="col-md-4 col-xl-3">
			              <!-- BEGIN: Footer Content -->
			            <p class="footer-header">Resources</p>
			            <ul class="link-list">
			              <li><a href="#">Employees</a></li>
			              <li><a href="#">Videos</a></li>
			              <li><a href="#">Business Review</a></li>
			            </ul>
			
			
			
			              <!-- END: Footer Content -->
			            </div>
			        </div>
			      </div>
			    </div>
			    <div class="fgr-section footer-wave">
			      <div class="container-xxl">
			        <div class="row">
			            <div class="col-md-12 col-xl-12">
			              <!-- BEGIN: Footer Content -->
			
			
			
			              <!-- END: Footer Content -->
			            </div>
			        </div>
			      </div>
			    </div>
			    <div class="fgr-section footer-secondary-links">
			      <div class="container-xxl">
			        <div class="row">
			            <div class="col-md-12 col-xl-12">
			              <!-- BEGIN: Footer Content -->
			
			            <ul class="link-list-horiz">
			              <li><a href="#">Terms of Use</a></li>
			              <li><a href="#">Privacy Policy</a></li>
			              <li><a href="#">California Privacy Notice</a></li>
			              <li><a href="#">Notice of Financial Incentive</a></li>
			              <li><a href="#">Shipping Policy</a></li>
			              <li><a href="#">Refund Policy</a></li>
			            </ul>
			
			
			              <!-- END: Footer Content -->
			            </div>
			        </div>
			      </div>
			    </div>
			    <div class="fgr-section subfooter">
			      <div class="container-xxl">
			        <div class="row justify-content-between align-items-center">
			            <div class="col-md-12 col-xl-auto text-white">
			              <!-- BEGIN: Footer Content -->
			
			
			            &copy;Herr Foods Inc.
			
			              <!-- END: Footer Content -->
			            </div>
			            <div class="col-md-12 col-xl-auto">
			              <!-- BEGIN: Footer Content -->
			
			
			            Handcrafted by Flylight Media
			
			              <!-- END: Footer Content -->
			            </div>
			        </div>
			      </div>
			    </div>
			</footer>