Bundle Builder
Bundle builder template.
<header class="hro hro-mini text-bg-accent1">
<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'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'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 -->
</header>
<main id="main-content" tabindex="0">
<!-- Product Information -->
<section class="sec-spacing-bottom-lg sec-spacing-top bg-accent1">
<div class="container-xxl">
<div class="row gy-3">
<div class="col-12">
<a href="#" class="h5 link-light text-uppercase">Back to Products</a>
</div>
<div class="col-12">
<div class="bundle-builder-container text-bg-light rounded-4">
<div class="row gy-4">
<!-- Product Photos -->
<div class="col-md-12 col-lg-9">
<div class="ratio bg-black rounded-2 banner-pack"
style="
--kb-banner-pack-bg-blurred: url('/assets/img/variety-pack-background-blurred.jpg');
--kb-banner-pack-product: url('/assets/img/bundle-box-84.png');
">
<div class="d-flex flex-column justify-content-start align-items-start p-4 text-white">
<p class="h4 text-capitalize fw-bold mb-2">Build your own variety pack</p>
<h1 class="text-capitalize w-md-75 w-xl-50">Choose your own variety pack</h1>
<p class="h2 text-capitalize mt-auto fw-bold m-0">84 Single Serve Bags</p>
</div>
</div>
<div class="d-none d-md-block my-4">
<p class="mb-1">
<span class="h5 fw-extrabold text-primary">23</span> <span class="small">out of 84 Bags</span>
</p>
<div class="progress" role="progressbar" aria-label="Basic example" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 25%"></div>
</div>
<div class="mt-3">
<div class="form-spacer">
<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>
</div>
<div class="row overflow-y-auto align-content-start" style="max-height: 50vh;">
<div class="bundle-builder-list-item col-md-6 py-3 border-bottom border-1">
<div class="d-flex gap-2">
<div class="w-35 flex-shrink-0">
<div class="bg-body-secondary w-100 ratio ratio-1x1 d-flex align-items-center justify-content-center rounded">
<img class="bundle-builder-list-item-img w-auto h-auto object-fit-contain" src="../../../../assets/img/products/popcorn.png" alt="Product Title 1">
</div>
</div>
<div class="flex-grow-1 d-flex flex-column">
<div class="d-flex">
<div class="bg-body-secondary d-flex d-md-none align-items-center justify-content-center">
<img class="w-75" src="../../../../assets/img/products/popcorn.png" alt="Product Title 1">
</div>
<h5 class="m-0">Original popcorn</h5>
</div>
<div class="d-flex gap-4 justify-content-between mt-auto">
<fieldset class="w-50 m-0">
<div class="input-group border border-2 rounded-2 border-dark" style="max-width: 10rem;">
<button class="btn btn-sm btn-link px-2 bg-white" type="button"><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input id="prodQty" type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="8" aria-label="Product Quantity">
<button class="btn btn-sm btn-link px-2 bg-white" type="button"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<a href="#" class="w-50 px-0 btn btn-primary btn-sm bundle-builder-cta">Add</a>
</div>
<div class="d-flex mt-2 justify-content-between">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark">Product Details</a>
</div>
</div>
</div>
</div>
<div class="bundle-builder-list-item col-md-6 py-3 border-bottom border-1">
<div class="d-flex gap-2">
<div class="w-35 flex-shrink-0">
<div class="bg-body-secondary w-100 ratio ratio-1x1 d-flex align-items-center justify-content-center rounded">
<img class="bundle-builder-list-item-img w-auto h-auto object-fit-contain" src="../../../../assets/img/products/popcorn.png" alt="Product Title 1">
</div>
</div>
<div class="flex-grow-1 d-flex flex-column">
<div class="d-flex">
<div class="bg-body-secondary d-flex d-md-none align-items-center justify-content-center">
<img class="w-75" src="../../../../assets/img/products/popcorn.png" alt="Product Title 1">
</div>
<h5 class="m-0">Fried Pickles & Ranch Kettle Cooked potato Chips</h5>
</div>
<div class="d-flex gap-4 justify-content-between mt-auto">
<fieldset class="w-50 m-0">
<div class="input-group border border-2 rounded-2 border-dark" style="max-width: 10rem;">
<button class="btn btn-sm btn-link px-2 bg-white" type="button"><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input id="prodQty" type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="8" aria-label="Product Quantity">
<button class="btn btn-sm btn-link px-2 bg-white" type="button"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<a href="#" class="w-50 px-0 btn btn-primary btn-sm bundle-builder-cta">Add</a>
</div>
<div class="d-flex mt-2 justify-content-between">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark">Product Details</a>
</div>
</div>
</div>
</div>
<div class="bundle-builder-list-item col-md-6 py-3 border-bottom border-1">
<div class="d-flex gap-2">
<div class="w-35 flex-shrink-0">
<div class="bg-body-secondary w-100 ratio ratio-1x1 d-flex align-items-center justify-content-center rounded">
<img class="bundle-builder-list-item-img w-auto h-auto object-fit-contain" src="../../../../assets/img/products/popcorn.png" alt="Product Title 1">
</div>
</div>
<div class="flex-grow-1 d-flex flex-column">
<div class="d-flex">
<div class="bg-body-secondary d-flex d-md-none align-items-center justify-content-center">
<img class="w-75" src="../../../../assets/img/products/popcorn.png" alt="Product Title 1">
</div>
<h5 class="m-0">Jalapeno poppers</h5>
</div>
<div class="d-flex gap-4 justify-content-between mt-auto">
<fieldset class="w-50 m-0">
<div class="input-group border border-2 rounded-2 border-dark" style="max-width: 10rem;">
<button class="btn btn-sm btn-link px-2 bg-white" type="button"><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input id="prodQty" type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="8" aria-label="Product Quantity">
<button class="btn btn-sm btn-link px-2 bg-white" type="button"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<a href="#" class="w-50 px-0 btn btn-primary btn-sm bundle-builder-cta">Add</a>
</div>
<div class="d-flex mt-2 justify-content-between">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark">Product Details</a>
</div>
</div>
</div>
</div>
<div class="bundle-builder-list-item col-md-6 py-3 border-bottom border-1">
<div class="d-flex gap-2">
<div class="w-35 flex-shrink-0">
<div class="bg-body-secondary w-100 ratio ratio-1x1 d-flex align-items-center justify-content-center rounded">
<img class="bundle-builder-list-item-img w-auto h-auto object-fit-contain" src="../../../../assets/img/products/popcorn.png" alt="Product Title 1">
</div>
</div>
<div class="flex-grow-1 d-flex flex-column">
<div class="d-flex">
<div class="bg-body-secondary d-flex d-md-none align-items-center justify-content-center">
<img class="w-75" src="../../../../assets/img/products/popcorn.png" alt="Product Title 1">
</div>
<h5 class="m-0">Fried Pickles & Ranch Kettle Cooked potato Chips</h5>
</div>
<div class="d-flex gap-4 justify-content-between mt-auto">
<fieldset class="w-50 m-0">
<div class="input-group border border-2 rounded-2 border-dark" style="max-width: 10rem;">
<button class="btn btn-sm btn-link px-2 bg-white" type="button"><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input id="prodQty" type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="8" aria-label="Product Quantity">
<button class="btn btn-sm btn-link px-2 bg-white" type="button"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<a href="#" class="w-50 px-0 btn btn-primary btn-sm bundle-builder-cta">Add</a>
</div>
<div class="d-flex mt-2 justify-content-between">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark">Product Details</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Product Options -->
<div class="col-12 col-lg-3 d-none d-md-block">
<div class="bundle-wrapper d-flex flex-column h-100">
<h2 class="bundle-wrapper-title">Your Variety Pack</h2>
<ul class="list-unstyled overflow-y-auto mb-4" style="max-height: 60vh;" data-bundle-builder-demo>
<li class="bundle-wrapper-list-item py-3 border-bottom border-1" data-bundle-item>
<div data-bundle-summary>
<h5 class="mb-2">Original popcorn</h5>
<div class="d-flex gap-3 justify-content-between align-items-center">
<p class="fs-5 m-0 me-auto fw-bold">Qty: <span data-bundle-qty>8</span></p>
<button class="bundle-wrapper-item-cta btn btn-link link-dark p-0 fs-6 text-capitalize" type="button" data-bundle-action="edit">Edit Qty</button>
<button class="bundle-wrapper-item-cta btn btn-link link-dark p-0 fs-6 text-capitalize" type="button" data-bundle-action="remove">Remove</button>
</div>
</div>
<div class="d-none" data-bundle-editor>
<div class="d-flex justify-content-end mb-3">
<button class="btn btn-close p-0 fs-6" type="button" aria-label="Close" data-bundle-action="close"></button>
</div>
<div class="d-flex gap-4 align-items-start">
<div class="bg-body-secondary d-flex align-items-center justify-content-center flex-shrink-0 rounded-2" style="width: 9rem; height: 9rem;">
<img class="bundle-builder-list-item-img w-auto h-auto object-fit-contain" src="../../../../assets/img/products/popcorn.png" alt="Original popcorn">
</div>
<h4 class="mb-0 fw-light">Original popcorn</h4>
</div>
<div class="d-flex gap-3 align-items-center mt-3">
<div class="input-group border border-2 rounded-2 border-dark" style="max-width: 11rem;">
<button class="btn btn-sm btn-link px-3 fs-4" type="button" data-bundle-action="delete"><span class="fa-solid fa-trash-can" aria-hidden="true"></span><span class="visually-hidden">Delete Item</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="8" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-3 fs-4" type="button" data-bundle-action="increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</div>
</div>
</li>
<li class="bundle-wrapper-list-item py-3 border-bottom border-1" data-bundle-item>
<div data-bundle-summary>
<h5 class="mb-2">Fried Pickles & Ranch Kettle Cooked potato Chips</h5>
<div class="d-flex gap-3 justify-content-between align-items-center">
<p class="fs-5 m-0 me-auto fw-bold">Qty: <span data-bundle-qty>8</span></p>
<button class="bundle-wrapper-item-cta btn btn-link link-dark p-0 fs-6 text-capitalize" type="button" data-bundle-action="edit">Edit Qty</button>
<button class="bundle-wrapper-item-cta btn btn-link link-dark p-0 fs-6 text-capitalize" type="button" data-bundle-action="remove">Remove</button>
</div>
</div>
<div class="d-none" data-bundle-editor>
<div class="d-flex justify-content-end mb-3">
<button class="btn btn-close p-0 fs-6" type="button" aria-label="Close" data-bundle-action="close"></button>
</div>
<div class="d-flex gap-4 align-items-start">
<div class="bg-body-secondary d-flex align-items-center justify-content-center flex-shrink-0 rounded-2" style="width: 9rem; height: 9rem;">
<img class="bundle-builder-list-item-img w-auto h-auto object-fit-contain" src="../../../../assets/img/products/popcorn.png" alt="Fried Pickles & Ranch Kettle Cooked potato Chips">
</div>
<h4 class="mb-0 fw-light">Fried Pickles & Ranch Kettle Cooked potato Chips</h4>
</div>
<div class="d-flex gap-3 align-items-center mt-3">
<div class="input-group border border-2 rounded-2 border-dark" style="max-width: 11rem;">
<button class="btn btn-sm btn-link px-3 fs-4" type="button" data-bundle-action="delete"><span class="fa-solid fa-trash-can" aria-hidden="true"></span><span class="visually-hidden">Delete Item</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="8" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-3 fs-4" type="button" data-bundle-action="increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</div>
</div>
</li>
<li class="bundle-wrapper-list-item py-3 border-bottom border-1" data-bundle-item>
<div data-bundle-summary>
<h5 class="mb-2">Jalapeno poppers</h5>
<div class="d-flex gap-3 justify-content-between align-items-center">
<p class="fs-5 m-0 me-auto fw-bold">Qty: <span data-bundle-qty>8</span></p>
<button class="bundle-wrapper-item-cta btn btn-link link-dark p-0 fs-6 text-capitalize" type="button" data-bundle-action="edit">Edit Qty</button>
<button class="bundle-wrapper-item-cta btn btn-link link-dark p-0 fs-6 text-capitalize" type="button" data-bundle-action="remove">Remove</button>
</div>
</div>
<div class="d-none" data-bundle-editor>
<div class="d-flex justify-content-end mb-3">
<button class="btn btn-close p-0 fs-6" type="button" aria-label="Close" data-bundle-action="close"></button>
</div>
<div class="d-flex gap-4 align-items-start">
<div class="bg-body-secondary d-flex align-items-center justify-content-center flex-shrink-0 rounded-2" style="width: 9rem; height: 9rem;">
<img class="bundle-builder-list-item-img w-auto h-auto object-fit-contain" src="../../../../assets/img/products/popcorn.png" alt="Jalapeno poppers">
</div>
<h4 class="mb-0 fw-light">Jalapeno poppers</h4>
</div>
<div class="d-flex gap-3 align-items-center mt-3">
<div class="input-group border border-2 rounded-2 border-dark" style="max-width: 11rem;">
<button class="btn btn-sm btn-link px-3 fs-4" type="button" data-bundle-action="delete"><span class="fa-solid fa-trash-can" aria-hidden="true"></span><span class="visually-hidden">Delete Item</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="8" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-3 fs-4" type="button" data-bundle-action="increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</div>
</div>
</li>
<li class="bundle-wrapper-list-item py-3 border-bottom border-1" data-bundle-item>
<div data-bundle-summary>
<h5 class="mb-2">Fried Pickles & Ranch Kettle Cooked potato Chips</h5>
<div class="d-flex gap-3 justify-content-between align-items-center">
<p class="fs-5 m-0 me-auto fw-bold">Qty: <span data-bundle-qty>8</span></p>
<button class="bundle-wrapper-item-cta btn btn-link link-dark p-0 fs-6 text-capitalize" type="button" data-bundle-action="edit">Edit Qty</button>
<button class="bundle-wrapper-item-cta btn btn-link link-dark p-0 fs-6 text-capitalize" type="button" data-bundle-action="remove">Remove</button>
</div>
</div>
<div class="d-none" data-bundle-editor>
<div class="d-flex justify-content-end mb-3">
<button class="btn btn-close p-0 fs-6" type="button" aria-label="Close" data-bundle-action="close"></button>
</div>
<div class="d-flex gap-4 align-items-start">
<div class="bg-body-secondary d-flex align-items-center justify-content-center flex-shrink-0 rounded-2" style="width: 9rem; height: 9rem;">
<img class="bundle-builder-list-item-img w-auto h-auto object-fit-contain" src="../../../../assets/img/products/popcorn.png" alt="Fried Pickles & Ranch Kettle Cooked potato Chips">
</div>
<h4 class="mb-0 fw-light">Fried Pickles & Ranch Kettle Cooked potato Chips</h4>
</div>
<div class="d-flex gap-3 align-items-center mt-3">
<div class="input-group border border-2 rounded-2 border-dark" style="max-width: 11rem;">
<button class="btn btn-sm btn-link px-3 fs-4" type="button" data-bundle-action="delete"><span class="fa-solid fa-trash-can" aria-hidden="true"></span><span class="visually-hidden">Delete Item</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="8" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-3 fs-4" type="button" data-bundle-action="increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</div>
</div>
</li>
</ul>
<div class="bundle-summary mt-auto px-3 py-2 pb-4 rounded">
<div class="d-flex justify-content-between align-items-center">
<p class="fs-5 fw-bold">Subtotal:</p>
<p class="fs-4 fw-bold">$68.00</p>
</div>
<button class="btn btn-cta bundle-summary-cta m-auto w-100">Add to Cart</button>
<p class="fs-6 fw-bold text-center m-0 mt-4 lh-1">Finish Your Variety Pack to Add to Cart</p>
</div>
</div>
</div>
<div class="d-md-none">
<p>23 out of 84</p>
<a href="#" class="btn btn-outline-dark" data-bs-target="#bundleSummaryPopup" data-bs-toggle="modal">View Bundle</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Associated Products -->
<section class="lst-grid-sec sec-spacing bg-body-secondary">
<div class="container-xxl">
<div class="row">
<div class="col-12 sec-heading">
<h2>
You May Also Like
</h2>
</div>
<div class="col-12">
<div class="lst-grid row gy-3 gx-3 row-cols-1 row-cols-md-2 row-cols-xl-3">
<!-- BEGIN: Column Loop -->
<div class="col">
<div class="card dyn-crd-pdt">
<div class="card-badges">
</div>
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-5-4@xs.jpg 480w,
../../../../assets/img//fpo/fpo-5-4@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-5-4@md.jpg"
alt="Ripple Potato Chips"
class="figure-img"
>
</figure>
<div class="card-body">
<p class="card-title">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-5-4@xs.jpg 480w,
../../../../assets/img//fpo/fpo-5-4@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-5-4@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 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">
<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-5-4@xs.jpg 480w,
../../../../assets/img//fpo/fpo-5-4@md.jpg 720w,"
sizes="(max-width: 576px) 480px,
(max-width: 768px) 720px,"
src="../../../../assets/img//fpo/fpo-5-4@md.jpg"
alt="Sour Cream & Onion"
class="figure-img"
>
</figure>
<div class="card-body">
<p class="card-title">Sour Cream & Onion</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>
<!-- END: Column Loop -->
</div>
</div>
</div>
</div>
</section>
<!-- Product Reviews -->
<section class="sec-spacing-top-lg sec-spacing-bottom">
<div class="container-xxl">
<div class="row gy-3">
<div class="col-12">
<h2>Product Reviews</h2>
<!-- Reviews Controls -->
<div class="d-flex flex-column flex-md-row align-items-md-start gap-2">
<input type="search" class="form-control w-md-35 w-lg-50" id="SearchcfSearchReviews" placeholder="Search Reviews" aria-label="Search Reviews">
<fieldset class="radio-toggle-group d-flex gap-2 ms-md-auto">
<legend>Sort By</legend>
<div class="toggle-group">
<div>
<input type="radio" class="btn-check" name="sortby" id="reviewSort0" value="rating" autocomplete="off" checked>
<label class="btn btn-sm btn-outline-primary" for="reviewSort0">Rating</label>
</div>
<div>
<input type="radio" class="btn-check" name="sortby" id="reviewSort1" value="age" autocomplete="off">
<label class="btn btn-sm btn-outline-primary" for="reviewSort1">Age</label>
</div>
<div>
<input type="radio" class="btn-check" name="sortby" id="reviewSort2" value="gender" autocomplete="off">
<label class="btn btn-sm btn-outline-primary" for="reviewSort2">Gender</label>
</div>
<div>
<input type="radio" class="btn-check" name="sortby" id="reviewSort3" value="locale" autocomplete="off">
<label class="btn btn-sm btn-outline-primary" for="reviewSort3">Locale</label>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<!-- Review Ratings -->
<div class="row mb-4">
<div class="col-sm-5 col-md-6 order-sm-last text-sm-end">
<p class="h5 mb-0">Overall Rating</p>
<p class="h1 mb-0 lh-1">4.3</p>
<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></p>
</div>
<div class="col-sm-7 col-md-6">
<ul class="list-unstyled">
<li>
<a href="#" class="d-flex gap-2 align-items-center small">
<span>5 Stars</span>
<div class="progress flex-grow-1" role="progressbar" aria-label="85 percent of reviews have 5 stars" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 85%"></div>
</div>
<span>100</span>
</a>
</li>
<li>
<a href="#" class="d-flex gap-2 align-items-center small">
<span>4 Stars</span>
<div class="progress flex-grow-1" role="progressbar" aria-label="6 percent of reviews have 4 stars" aria-valuenow="6" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 6%"></div>
</div>
<span>6</span>
</a>
</li>
<li>
<a href="#" class="d-flex gap-2 align-items-center small">
<span>3 Stars</span>
<div class="progress flex-grow-1" role="progressbar" aria-label="2 percent of reviews have 3 stars" aria-valuenow="2" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 2%"></div>
</div>
<span>2</span>
</a>
</li>
<li>
<a href="#" class="d-flex gap-2 align-items-center small">
<span>2 Stars</span>
<div class="progress flex-grow-1" role="progressbar" aria-label="0 percent of reviews have 2 stars" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 0%"></div>
</div>
<span>0</span>
</a>
</li>
<li>
<a href="#" class="d-flex gap-2 align-items-center small">
<span>1 Star</span>
<div class="progress flex-grow-1" role="progressbar" aria-label="0 percent of reviews have 1 star" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
<div class="progress-bar" style="width: 0%"></div>
</div>
<span>0</span>
</a>
</li>
</ul>
</div>
</div>
<div class="row g-2">
<div class="col-md-6">
<p class="h6">108 Reviews</p>
</div>
<div class="col-md-6 text-md-end">
<a href="#" class="h6">Write a Review <span class="fa-solid fa-pen-to-square" aria-hidden="true"></span>
</a>
</div>
</div>
<!-- Reviews -->
<div class="row row-flex-cols row-cols-1 row-cols-md-2 gy-4 mb-4">
<div class="col">
<div class="card card-review border-2 border-primary flex-fill" style="--kb-card-spacer-y: 2rem; --kb-card-spacer-x: 2.5rem;">
<div class="card-body">
<div class="d-flex align-itmes-center">
<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>
<span class="h6 text-uppercase ms-auto small">A Year Ago</span>
</div>
<p class="h4">Crispy and yummy!</p>
<p>These Crisp 'n Tasty potato chips are crispy and tasty. I like original flavor in my chips and I enjoyed this one very much. I did not share with anyone, I keep it to myself. The chips had good size, big. The quality and taste are all good too, light, crispy and tasty.</p>
<div class="d-flex flex-wrap gap-2">
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-review border-2 border-primary flex-fill" style="--kb-card-spacer-y: 2rem; --kb-card-spacer-x: 2.5rem;">
<div class="card-body">
<div class="d-flex align-itmes-center">
<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>
<span class="h6 text-uppercase ms-auto small">A Year Ago</span>
</div>
<p class="h4">Delicious!</p>
<p>Herr's Crisp N Tasty Potato Chips are an agreed upon favorite in our home. They're crisp, full of flavor and delicious. They're perfect to snack on any time we need a salty snack fix, and never disappoint.</p>
<div class="d-flex flex-wrap gap-2">
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-review border-2 border-primary flex-fill" style="--kb-card-spacer-y: 2rem; --kb-card-spacer-x: 2.5rem;">
<div class="card-body">
<div class="d-flex align-itmes-center">
<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>
<span class="h6 text-uppercase ms-auto small">A Year Ago</span>
</div>
<p class="h4">Perfectly Crispy!</p>
<p>These potato chips taste great and have the perfect amount of crunch to them. They have a substantial thickness to them so they do not break easily and work well with a dip. Additionally, the chips are not overly salty - they taste as they should and are not overpowered...</p>
<div class="d-flex flex-wrap gap-2">
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
</div>
</div>
</div>
</div>
<div class="col">
<div class="card card-review border-2 border-primary flex-fill" style="--kb-card-spacer-y: 2rem; --kb-card-spacer-x: 2.5rem;">
<div class="card-body">
<div class="d-flex align-itmes-center">
<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>
<span class="h6 text-uppercase ms-auto small">A Year Ago</span>
</div>
<p class="h4">Thin and crispy</p>
<p>I recently tried Herr's crisp and tasty potato chips for the first time. They were thin and crisp. I don't think that they were greasy or overly salty. They paired great with veggie burgers on the grill. I would definitely eat them again!</p>
<div class="d-flex flex-wrap gap-2">
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
<div style="max-width: 8.438rem;">
<figure class="figure">
<img
srcset="../../../../assets/img//fpo/fpo-1-1@xs.jpg 480w,"
sizes="(max-width: 576px) 480px,"
src="../../../../assets/img//fpo/fpo-1-1@xs.jpg"
alt="Image description"
class="figure-img"
>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Review Pagination -->
<div class="row">
<div class="col">
<nav aria-label="Review">
<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>
<div class="modal ks-popup" id="productDetailsPopup" tabindex="-1" aria-label="" aria-hidden="true" data-bs-theme="light" data-popup-delay="4" data-popup-expire="1">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content d-none d-md-flex bg-white">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-xxl">
<div class="row">
<div class="col-6">
<div class="d-flex align-items-center justify-content-center">
<div class="overflow-hidden">
<!-- Product Image -->
<div id="productDetailsCarousel" class="glide glide__products bundle-builder-product-carousel">
<div class="glide__track" data-glide-el="track">
<ul class="glide__slides">
<li class="glide__slide">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-1-1@xl.jpg" alt="Product Title 1">
</li>
<li class="glide__slide">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-1-1@xl.jpg" alt="Product Title 1">
</li>
<li class="glide__slide">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-1-1@xl.jpg" alt="Product Title 1">
</li>
</ul>
</div>
<div class="glide__arrows" data-glide-el="controls">
<button class="glide__arrow glide__arrow--left" data-glide-dir="<" aria-label="Previous Slide">
<span class="fa-solid fa-chevron-left" aria-hidden="true"></span>
</button>
<button class="glide__arrow glide__arrow--right" data-glide-dir=">" aria-label="Next Slide">
<span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</button>
</div>
<div class="glide__bullets" data-glide-el="controls[nav]">
<button class="glide__bullet" data-glide-dir="=0">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-1-1@xs.jpg" alt="Product Title 1">
</button>
<button class="glide__bullet" data-glide-dir="=1">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-1-1@xs.jpg" alt="Product Title 1">
</button>
<button class="glide__bullet" data-glide-dir="=2">
<img class="img-fluid" src="../../../../assets/img/fpo/fpo-1-1@xs.jpg" alt="Product Title 1">
</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="d-flex flex-column h-100">
<h2>Fried Pickles & Ranch Kettle Cooked Chips</h2>
<p>The name speaks for itself! Every bag of Herr’s Crisp and Tasty Potato Chips is a celebration of what Herr’s does best. We start with premium potatoes, crafted into golden, crispy chips. Then, we season them to perfection so you can enjoy a tantalizing snack experience every time. As a family-owned company since 1946, behind every bag is our commitment to bringing you the finest ingredients. Herr’s potato chips make a delicious gluten free snack food right out of the bag. Pack some for picnics or school lunches. Serve some as a tasty sidekick to hot dogs, beef burgers, and more. Break out a bag (or two) for a backyard BBQ or tailgating party. Reach for Herr’s Crisp and Tasty Potato Chips as a way to flavor up life’s celebrations, big and small.</p>
<p class="fw-bold fs-5 mt-auto mb-2">Quantity</p>
<div class="d-flex gap-4">
<fieldset class="m-0">
<div class="input-group border border-2 rounded-2 border-dark" style="max-width: 10rem;">
<button class="btn btn-sm btn-link px-2 bg-white" type="button"><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input id="prodQty" type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="" aria-label="Product Quantity">
<button class="btn btn-sm btn-link px-2 bg-white" type="button"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<a href="#" class="w-35 btn btn-primary btn-sm">Add</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-content d-flex d-md-none">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h2>Popup Modal Example</h2>
<div class="d-flex">
<div class="bg-body-secondary d-flex align-items-center justify-content-center">
<img class="w-75" src="../../../../assets/img/products/popcorn.png" alt="Product Title 1">
</div>
<div>
<p class="fs-4">$68.00</p>
<span class="fw-medium">Size: 1oz</span>
<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></p>
</div>
</div>
<p>The name speaks for itself! Every bag of Herr’s Crisp and Tasty Potato Chips is a celebration of what Herr’s does best. We start with premium potatoes, crafted into golden, crispy chips. Then, we season them to perfection so you can enjoy a tantalizing snack experience every time. As a family-owned company since 1946, behind every bag is our commitment to bringing you the finest ingredients. Herr’s potato chips make a delicious gluten free snack food right out of the bag. Pack some for picnics or school lunches. Serve some as a tasty sidekick to hot dogs, beef burgers, and more. Break out a bag (or two) for a backyard BBQ or tailgating party. Reach for Herr’s Crisp and Tasty Potato Chips as a way to flavor up life’s celebrations, big and small.</p>
<p class="fw-bold">Quantity</p>
<div class="d-flex">
<fieldset>
<div class="input-group border border-2 rounded-2 border-dark" style="max-width: 10rem;">
<button class="btn btn-sm btn-link" type="button"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input id="prodQty" type="text" class="form-control border-0 text-center" value="1" aria-label="Product Quantity">
<button class="btn btn-sm btn-link" type="button"><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<a href="#" class="btn btn-primary btn-sm">Add</a>
</div>
<a href="#" class="btn btn-outline-dark">Close</a>
</div>
</div>
</div>
</div>
<div class="modal ks-popup" id="bundleSummaryPopup" tabindex="-1" aria-label="" aria-hidden="true" data-bs-theme="light" data-popup-delay="4" data-popup-expire="1">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content d-flex d-md-none">
<div class="modal-header">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h2>Bundle Summary</h2>
<div class="d-flex justify-content-between align-items-center">
<p class="fs-5">Subtotal:</p>
<p class="fs-4">$68.00</p>
</div>
<ul class="list-unstyled overflow-y-auto" style="max-height: 375px;">
<li class="py-3 border-bottom border-1">
<p class="fs-6">Original popcorn</p>
<div class="d-flex gap-3 justify-content-between align-items-center">
<p class="fs-5 me-auto">Qty: 8</p>
<a href="#" class="btn-link">Edit Qty</a>
<a href="#" class="btn-link">Remove</a>
</div>
</li>
<li class="py-3 border-bottom border-1">
<p class="fs-6">Fried Pickles & Ranch Kettle Cooked potato Chips</p>
<div class="d-flex gap-3 justify-content-between align-items-center">
<p class="fs-5 me-auto">Qty: 8</p>
<a href="#" class="btn-link">Edit Qty</a>
<a href="#" class="btn-link">Remove</a>
</div>
</li>
<li class="py-3 border-bottom border-1">
<p class="fs-6">Jalapeno poppers</p>
<div class="d-flex gap-3 justify-content-between align-items-center">
<p class="fs-5 me-auto">Qty: 8</p>
<a href="#" class="btn-link">Edit Qty</a>
<a href="#" class="btn-link">Remove</a>
</div>
</li>
<li class="py-3 border-bottom border-1">
<p class="fs-6">Original popcorn</p>
<div class="d-flex gap-3 justify-content-between align-items-center">
<p class="fs-5 me-auto">Qty: 8</p>
<a href="#" class="btn-link">Edit Qty</a>
<a href="#" class="btn-link">Remove</a>
</div>
</li>
<li class="py-3 border-bottom border-1">
<p class="fs-6">Fried Pickles & Ranch Kettle Cooked potato Chips</p>
<div class="d-flex gap-3 justify-content-between align-items-center">
<p class="fs-5 me-auto">Qty: 8</p>
<a href="#" class="btn-link">Edit Qty</a>
<a href="#" class="btn-link">Remove</a>
</div>
</li>
<li class="py-3 border-bottom border-1">
<p class="fs-6">Jalapeno poppers</p>
<div class="d-flex gap-3 justify-content-between align-items-center">
<p class="fs-5 me-auto">Qty: 8</p>
<a href="#" class="btn-link">Edit Qty</a>
<a href="#" class="btn-link">Remove</a>
</div>
</li>
</ul>
<a href="#" class="btn btn-outline-dark">Close</a>
</div>
</div>
</div>
</div>
</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'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 & 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 -->
©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>
<script src="../../../../assets/scripts/pages/bundle-builder-demo.js"></script>