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" data-bundle-builder data-bundle-max="84">
<div class="row gy-4">
<div class="col-12 col-lg-8 col-xl-9 d-flex flex-column gap-4">
<!-- Product Photos -->
<div class="order-1">
<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>
<div class="d-flex flex-column gap-3 order-3 order-md-2">
<div class="order-2 order-md-1">
<p class="mb-1">
<span class="h5 fw-extrabold text-primary" data-bundle-progress-current>0</span> <span class="small">out of <span data-bundle-progress-max>84</span> Bags</span>
</p>
<div class="progress" role="progressbar" aria-label="Selected products" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" data-bundle-progress>
<div class="progress-bar" style="width: 0%" data-bundle-progress-bar></div>
</div>
</div>
<div class="order-1 order-md-2" data-bundle-category-filter>
<select class="form-select" id="filterfcSort" aria-label="Filter products by category">
<option value="all-products" selected>All Products</option>
<option value="potato-chips">Potato Chips</option>
<option value="cheese-snacks">Cheese Snacks</option>
<option value="pretzels">Pretzels</option>
<option value="popcorn">Popcorn</option>
<option value="other">Other</option>
</select>
</div>
<button type="button" class="order-3 btn btn-outline-dark d-md-none w-100" data-bs-target="#bundleSummaryPopup" data-bs-toggle="modal">View Bundle</button>
</div>
<div class="order-2 order-md-3">
<div class="row overflow-y-auto align-content-start" style="max-height: 50vh;">
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="popcorn" data-bundle-product-id="product-0" data-bundle-product-title="Original popcorn" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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="Original popcorn">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Original popcorn</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="potato-chips" data-bundle-product-id="product-1" data-bundle-product-title="Fried Pickles & Ranch Kettle Cooked potato Chips" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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/herrs-crunchy-cheesy-chomz-cheddaboom-1oz-bag_6eb233e8-ee07-425f-9f4a-68598dcdb971.png" alt="Fried Pickles & Ranch Kettle Cooked potato Chips">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Fried Pickles & Ranch Kettle Cooked potato Chips</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="cheese-snacks" data-bundle-product-id="product-2" data-bundle-product-title="Jalapeno poppers" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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/HotNHoneyCheeseCurls.png" alt="Jalapeno poppers">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Jalapeno poppers</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="pretzels" data-bundle-product-id="product-3" data-bundle-product-title="Salt & Vinegar Potato Chips" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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/herrs-crunchy-cheesy-chomz-cheddaboom-1oz-bag_6eb233e8-ee07-425f-9f4a-68598dcdb971.png" alt="Salt & Vinegar Potato Chips">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Salt & Vinegar Potato Chips</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="other" data-bundle-product-id="product-4" data-bundle-product-title="Original popcorn" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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="Original popcorn">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Original popcorn</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="cheese-snacks" data-bundle-product-id="product-5" data-bundle-product-title="Fried Pickles & Ranch Kettle Cooked potato Chips" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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/HotNHoneyCheeseCurls.png" alt="Fried Pickles & Ranch Kettle Cooked potato Chips">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Fried Pickles & Ranch Kettle Cooked potato Chips</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="popcorn" data-bundle-product-id="product-6" data-bundle-product-title="Jalapeno poppers" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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="Jalapeno poppers">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Jalapeno poppers</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="potato-chips" data-bundle-product-id="product-7" data-bundle-product-title="Salt & Vinegar Potato Chips" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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="Salt & Vinegar Potato Chips">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Salt & Vinegar Potato Chips</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="pretzels" data-bundle-product-id="product-8" data-bundle-product-title="Original popcorn" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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="Original popcorn">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Original popcorn</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="other" data-bundle-product-id="product-9" data-bundle-product-title="Fried Pickles & Ranch Kettle Cooked potato Chips" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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/herrs-crunchy-cheesy-chomz-cheddaboom-1oz-bag_6eb233e8-ee07-425f-9f4a-68598dcdb971.png" alt="Fried Pickles & Ranch Kettle Cooked potato Chips">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Fried Pickles & Ranch Kettle Cooked potato Chips</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="cheese-snacks" data-bundle-product-id="product-10" data-bundle-product-title="Jalapeno poppers" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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/HotNHoneyCheeseCurls.png" alt="Jalapeno poppers">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Jalapeno poppers</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="potato-chips" data-bundle-product-id="product-11" data-bundle-product-title="Salt & Vinegar Potato Chips" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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/herrs-crunchy-cheesy-chomz-cheddaboom-1oz-bag_6eb233e8-ee07-425f-9f4a-68598dcdb971.png" alt="Salt & Vinegar Potato Chips">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Salt & Vinegar Potato Chips</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="popcorn" data-bundle-product-id="product-12" data-bundle-product-title="Original popcorn" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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="Original popcorn">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Original popcorn</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="pretzels" data-bundle-product-id="product-13" data-bundle-product-title="Fried Pickles & Ranch Kettle Cooked potato Chips" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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/HotNHoneyCheeseCurls.png" alt="Fried Pickles & Ranch Kettle Cooked potato Chips">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Fried Pickles & Ranch Kettle Cooked potato Chips</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="other" data-bundle-product-id="product-14" data-bundle-product-title="Jalapeno poppers" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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="Jalapeno poppers">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Jalapeno poppers</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<div class="bundle-wrapper-list-item col-md-6 col-lg-12 col-xl-6 py-3 border-bottom border-1" data-bundle-product data-bundle-product-category="potato-chips" data-bundle-product-id="product-15" data-bundle-product-title="Salt & Vinegar Potato Chips" data-bundle-product-size="1oz" data-bundle-product-image="/assets/img/products/popcorn.png">
<div class="d-flex flex-wrap flex-md-nowrap gap-3 align-items-center align-items-md-stretch h-100">
<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="Salt & Vinegar Potato Chips">
</div>
</div>
<div class="bundle-builder-product-content d-md-flex flex-column gap-3 gap-md-0">
<h4 class="bundle-builder-product-title m-0">Salt & Vinegar Potato Chips</h4>
<div class="d-flex flex-md-column flex-lg-row gap-4 gap-md-2 gap-lg-4 w-100 mt-md-3">
<fieldset class="bundle-builder-product-selector m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="product">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="px-0 btn btn-primary btn-sm bundle-builder-cta" type="button" data-bundle-action="add-product">Add</button>
</div>
<div class="d-flex gap-2 w-100 justify-content-between align-items-center mt-md-2">
<span class="fw-medium">Size: 1oz</span>
<a href="#" data-bs-toggle="modal" data-bs-target="#productDetailsPopup" class="btn-link link-dark text-end" data-bundle-action="open-details">Product Details <span class="fa-solid fa-chevron-right" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Product Options -->
<div class="col-12 col-lg-4 col-xl-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>
<p class="mb-4" data-bundle-empty-message>Variety pack is currently empty.</p>
<ul class="bundle-wrapper-list list-unstyled flex-grow-1 flex-shrink-1 overflow-y-auto mb-4" data-bundle-summary-list></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" type="button" disabled data-bundle-add-to-cart>Add to Cart</button>
<p class="fs-6 fw-bold m-0 mt-4 lh-1">Finish Your Variety Pack to Add to Cart</p>
</div>
</div>
</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-labelledby="productDetailsTitle" aria-hidden="true" data-bs-theme="light">
<div class="modal-dialog modal-dialog-centered modal-xl">
<div class="modal-content bg-white" data-bundle-product-details>
<div class="modal-header d-none d-md-flex">
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="container-xxl px-0 px-lg-3">
<div class="d-flex flex-column flex-lg-row gap-lg-4">
<div class="product-details-gallery overflow-hidden mb-3 order-1 order-lg-0">
<div id="productDetailsCarousel" class="glide glide__product-details 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 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>
<div class="glide__bullets d-none d-lg-flex" 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 class="bundle-builder-product-content d-lg-flex flex-column order-lg-1">
<h2 id="productDetailsTitle" class="product-details-title" data-bundle-details-title>Fried Pickles & Ranch Kettle Cooked Chips</h2>
<p class="order-2 mb-0 mb-md-3" tabindex="0" aria-label="Product description">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>
<div class="product-details-actions order-3 mt-5 mt-md-auto">
<p class="fw-bold fs-5 mb-2">Quantity</p>
<div class="d-flex gap-3 gap-md-4">
<fieldset class="product-details-quantity m-0">
<div class="input-group border border-2 rounded-2 border-dark" data-bundle-quantity-control data-bundle-quantity-scope="details">
<button class="btn btn-sm btn-link px-2 bg-white" type="button" disabled data-bundle-action="quantity-decrease" data-bundle-decrease-btn><span class="fa-solid fa-minus" aria-hidden="true"></span><span class="visually-hidden">Reduce Quantity</span>
</button>
<input type="text" class="form-control border-0 text-center text-bg-light fw-bold p-0 fs-4" value="1" min="1" max="84" aria-label="Product Quantity" data-bundle-qty-input>
<button class="btn btn-sm btn-link px-2 bg-white" type="button" data-bundle-action="quantity-increase"><span class="fa-solid fa-plus" aria-hidden="true"></span><span class="visually-hidden">Increase Quantity</span>
</button>
</div>
</fieldset>
<button class="product-details-add w-35 btn btn-primary btn-sm" type="button" data-bundle-action="add-product">Add</button>
</div>
</div>
<button type="button" class="btn btn-outline-dark order-4 d-md-none w-100 mt-4" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal ks-popup" id="bundleSummaryPopup" tabindex="-1" aria-labelledby="bundleSummaryPopupTitle" aria-hidden="true" data-bs-theme="light">
<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 class="bundle-wrapper-title text-primary mb-5 lh-sm" id="bundleSummaryPopupTitle">Your Variety Pack</h2>
<p data-bundle-empty-message>Variety pack is currently empty.</p>
<ul class="list-unstyled mb-4" data-bundle-summary-list></ul>
<div class="bundle-summary rounded px-3 py-2 pb-4">
<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 w-100 mt-3" type="button" disabled data-bundle-add-to-cart>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>
</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>