.elementor-3128 .elementor-element.elementor-element-76fcdfe:not(.elementor-motion-effects-element-type-background), .elementor-3128 .elementor-element.elementor-element-76fcdfe > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#767636;}.elementor-3128 .elementor-element.elementor-element-76fcdfe > .elementor-background-overlay{background-image:url("https://7of9juicein.com/wp-content/uploads/2026/01/juicein-menu.png");background-repeat:no-repeat;background-size:100% auto;opacity:1;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-3128 .elementor-element.elementor-element-76fcdfe .elementor-background-overlay{filter:brightness( 100% ) contrast( 100% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-3128 .elementor-element.elementor-element-76fcdfe{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:140px 0px 60px 0px;}.elementor-3128 .elementor-element.elementor-element-76fcdfe > .elementor-shape-top svg{height:120px;transform:translateX(-50%) rotateY(180deg);}.elementor-3128 .elementor-element.elementor-element-76fcdfe > .elementor-shape-bottom .elementor-shape-fill{fill:var( --e-global-color-d1c92a2 );}.elementor-3128 .elementor-element.elementor-element-eb27f23 > .elementor-background-overlay{background-image:url("https://7of9juicein.com/wp-content/uploads/2024/03/candy-cusrv-02-7.png");background-position:bottom left;background-repeat:repeat-x;background-size:contain;opacity:1;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-3128 .elementor-element.elementor-element-eb27f23{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:0px 0px 40px 0px;z-index:2;}.elementor-3128 .elementor-element.elementor-element-4c87ead{--display:flex;}@media(max-width:1540px){.elementor-3128 .elementor-element.elementor-element-eb27f23{padding:0px 0px 20px 0px;}}@media(max-width:1280px){.elementor-3128 .elementor-element.elementor-element-eb27f23{padding:0px 0px 0px 0px;}}@media(max-width:1024px){.elementor-3128 .elementor-element.elementor-element-76fcdfe > .elementor-background-overlay{background-position:top center;opacity:1;}}@media(max-width:767px){.elementor-3128 .elementor-element.elementor-element-76fcdfe > .elementor-background-overlay{background-image:url("https://7of9juicein.com/wp-content/uploads/2025/12/7of9-juicein-banner-test.png");background-position:top right;background-size:1000px auto;opacity:1;}.elementor-3128 .elementor-element.elementor-element-76fcdfe{padding:120px 0px 50px 0px;}}@media(max-width:479px){.elementor-3128 .elementor-element.elementor-element-76fcdfe > .elementor-background-overlay{background-image:url("https://7of9juicein.com/wp-content/uploads/2025/12/7of9-juicein-banner-test.png");background-size:475px auto;}.elementor-3128 .elementor-element.elementor-element-76fcdfe{padding:110px 0px 50px 0px;}}/* Start custom CSS for html, class: .elementor-element-b518b40 */<div class="menu-section" role="region" aria-labelledby="menuSectionTitle">
  <h2 class="title" id="menuSectionTitle">Menu</h2>
  <p class="subtitle">
    Browse fresh juices, smoothies, wellness shots &amp; snacks. Tap a category to build your order.
  </p>

  <div class="category-filters" aria-label="Menu categories">
    <button class="filter-btn active" type="button" data-filter="all" aria-pressed="true">All</button>
    <button class="filter-btn" type="button" data-filter="juice" aria-pressed="false">Juice</button>
    <button class="filter-btn" type="button" data-filter="smoothies" aria-pressed="false">Smoothies</button>
    <button class="filter-btn" type="button" data-filter="shots" aria-pressed="false">Wellness Shots</button>
    <button class="filter-btn" type="button" data-filter="snacks" aria-pressed="false">Snacks &amp; Sweets</button>
  </div>

  <div class="basket-indicator" aria-live="polite">
    Items in selection: <span id="basketCount">0</span>
  </div>

  <!-- PRODUCTS GRID -->
  <div class="products">
    <!-- JUICE -->
    <article
      class="product-card juice product-card--bestseller"
      data-id="juice-01"
      data-name="Pure Cane Classic"
      data-category="Juice"
      data-price="2500"
    >
      <div class="product-card__media">
        <span class="product-card__tag">Bestseller</span>
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Pure-Cane-Classic-juice.png"
          alt="Pure Cane Classic"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Pure Cane Classic</h3>
        <p class="product-card__desc">
          Pure sugarcane juice with clean, natural sweetness and a refreshing finish.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span> Sugarcane.
        </p>
        <p class="product-card__price">₦2,500</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <article
      class="product-card juice"
      data-id="juice-02"
      data-name="Pure Pineapple"
      data-category="Juice"
      data-price="2800"
    >
      <div class="product-card__media">
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Pure-Pineapple-juice.png"
          alt="Pure Pineapple"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Pure Pineapple</h3>
        <p class="product-card__desc">
          Freshly pressed pineapple juice, naturally sweet, bright, and bursting with tropical flavour.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span> Pineapple.
        </p>
        <p class="product-card__price">₦2,800</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <article
      class="product-card juice product-card--bestseller"
      data-id="juice-03"
      data-name="Ginger Cane Crush"
      data-category="Juice"
      data-price="2800"
    >
      <div class="product-card__media">
        <span class="product-card__tag">Customer Favourite</span>
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Ginger-Cane-Crush-juice.png"
          alt="Ginger Cane Crush"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Ginger Cane Crush</h3>
        <p class="product-card__desc">
          Naturally sweet sugarcane meets bold ginger for a warming, invigorating juice.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span> Sugarcane, ginger, lemon.
        </p>
        <p class="product-card__price">₦2,800</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <article
      class="product-card juice"
      data-id="juice-04"
      data-name="Cane Trio"
      data-category="Juice"
      data-price="2800"
    >
      <div class="product-card__media">
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Cane-Trio-juice.png"
          alt="Cane Trio"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Cane Trio</h3>
        <p class="product-card__desc">
          A bold fusion of fresh sugarcane, spicy ginger, and zesty lime for an energising, refreshing kick.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span> Sugarcane, ginger, lime.
        </p>
        <p class="product-card__price">₦2,800</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <article
      class="product-card juice"
      data-id="juice-05"
      data-name="Cucumber Lime Breeze"
      data-category="Juice"
      data-price="1800"
    >
      <div class="product-card__media">
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Cucumber-Lime-Breeze-juice.png"
          alt="Cucumber Lime Breeze"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Cucumber Lime Breeze</h3>
        <p class="product-card__desc">
          Cool, crisp, and beautifully zesty. Light, hydrating, and perfect for hot days or post-workout recovery.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span> Cucumber, lime.
        </p>
        <p class="product-card__price">₦1,800</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <article
      class="product-card juice"
      data-id="juice-06"
      data-name="Pure Orange"
      data-category="Juice"
      data-price="2500"
    >
      <div class="product-card__media">
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Pure-Orange-juice.png"
          alt="Pure Orange"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Pure Orange</h3>
        <p class="product-card__desc">
          Bright, juicy oranges pressed fresh for a naturally sweet and tangy classic.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span> Oranges.
        </p>
        <p class="product-card__price">₦2,500</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <article
      class="product-card juice"
      data-id="juice-07"
      data-name="Green Boost"
      data-category="Juice"
      data-price="3000"
    >
      <div class="product-card__media">
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Green-Boost-juice.png"
          alt="Green Boost"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Green Boost</h3>
        <p class="product-card__desc">
          A nutrient-rich blend of fresh green fruits and vegetables for natural energy and balance.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span>
          Apple, cucumber, spinach, lemon, ginger.
        </p>
        <p class="product-card__price">₦3,000</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <article
      class="product-card juice"
      data-id="juice-09"
      data-name="Pure Watermelon"
      data-category="Juice"
      data-price="2500"
    >
      <div class="product-card__media">
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Pure-Watermelon-juice.png"
          alt="Pure Watermelon"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Pure Watermelon</h3>
        <p class="product-card__desc">
          Light, juicy watermelon pressed fresh for ultimate hydration and refreshment.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span> Watermelon.
        </p>
        <p class="product-card__price">₦2,500</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <!-- SMOOTHIES -->
    <article
      class="product-card smoothies"
      data-id="smoothies-01"
      data-name="Pineapple Mango Cooler"
      data-category="Smoothie"
      data-price="3000"
    >
      <div class="product-card__media">
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Pineapple-Mango-Cooler-smoothies.png"
          alt="Pineapple Mango Cooler"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Pineapple Mango Cooler</h3>
        <p class="product-card__desc">
          A refreshing tropical blend of pineapple and mango with a bright, cooling finish.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span> Pineapple, mango (seasonal).
        </p>
        <p class="product-card__price">₦3,000</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <article
      class="product-card smoothies"
      data-id="smoothies-02"
      data-name="Tiger's Date"
      data-category="Smoothie"
      data-price="3000"
    >
      <div class="product-card__media">
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Tigers-Date-smoothies.png"
          alt="Tiger's Date"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Tiger's Date</h3>
        <p class="product-card__desc">
          A rich, creamy blend of naturally sweet dates and smooth coconut milk.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span> Dates, tigernut, coconut milk.
        </p>
        <p class="product-card__meta product-card__meta--allergy">
          Allergy: contains tigernut and coconut.
        </p>
        <p class="product-card__price">₦3,000</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <article
      class="product-card smoothies"
      data-id="smoothies-03"
      data-name="Melon Fresh"
      data-category="Smoothie"
      data-price="1500"
    >
      <div class="product-card__media">
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Melon-Fresh-smoothies.png"
          alt="Melon Fresh"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Melon Fresh</h3>
        <p class="product-card__desc">
          Pure watermelon blended into a light, juicy, ultra-refreshing smoothie.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span> Watermelon, lime.
        </p>
        <p class="product-card__price">₦1,500</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <article
      class="product-card smoothies"
      data-id="smoothies-04"
      data-name="Cucumber Pine Splash"
      data-category="Smoothie"
      data-price="1800"
    >
      <div class="product-card__media">
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Cucumber-Pine-Splash.png"
          alt="Cucumber Pine Splash"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Cucumber Pine Splash</h3>
        <p class="product-card__desc">
          A light, refreshing blend of cool cucumber and juicy pineapple with a crisp tropical finish.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span> Cucumber, pineapple, lemon.
        </p>
        <p class="product-card__price">₦1,800</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <article
      class="product-card smoothies"
      data-id="smoothies-05"
      data-name="Nutty Banana"
      data-category="Smoothie"
      data-price="2500"
    >
      <div class="product-card__media">
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Nutty-Banana-smoothies.png"
          alt="Nutty Banana"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Nutty Banana</h3>
        <p class="product-card__desc">
          Creamy banana blended with mixed nuts for a smooth, filling, and energizing drink.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span>
          Banana, mixed nuts (groundnut, cashew, almond), dates.
        </p>
        <p class="product-card__meta product-card__meta--allergy">Allergy: contains nuts.</p>
        <p class="product-card__price">₦2,500</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <article
      class="product-card smoothies"
      data-id="smoothies-06"
      data-name="Banana Mango Glow"
      data-category="Smoothie"
      data-price="2400"
    >
      <div class="product-card__media">
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Banana-Mango-Glow-smoothies.png"
          alt="Banana Mango Glow"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Banana Mango Glow</h3>
        <p class="product-card__desc">
          A bright, creamy tropical blend of ripe banana and mango for a smooth, glow-boosting sip.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span> Banana, mango (seasonal).
        </p>
        <p class="product-card__price">₦2,400</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <article
      class="product-card smoothies"
      data-id="smoothies-07"
      data-name="Seasonal Smoothie"
      data-category="Smoothie"
      data-price="4350"
    >
      <div class="product-card__media">
        <img
          src="https://via.placeholder.com/600x800?text=Smoothie+07"
          alt="Seasonal Smoothie"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Seasonal</h3>
        <p class="product-card__desc">
          Rotating blend based on the best fruits in season.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span>
          Seasonal mix of fresh fruits. Ask for today’s blend.
        </p>
        <p class="product-card__meta product-card__meta--allergy">
          Allergy: may contain nuts or coconut. Please confirm before ordering.
        </p>
        <p class="product-card__price">₦4,350</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <!-- WELLNESS SHOTS -->
    <article
      class="product-card shots"
      data-id="shots-01"
      data-name="Port Harcourt Detox"
      data-category="Wellness Shot"
      data-price="500"
    >
      <div class="product-card__media">
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Port-Harcourt-Detox-shots.png"
          alt="Port Harcourt Detox"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Port Harcourt Detox</h3>
        <p class="product-card__desc">
          A refreshing detox shot with ginger, lemon, and cucumber to cleanse, hydrate, and support digestion.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span>
          Ginger, lemon, cucumber. May contain a touch of honey.
        </p>
        <p class="product-card__price">₦500</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <article
      class="product-card shots"
      data-id="shots-02"
      data-name="Ginger Fire Shot"
      data-category="Wellness Shot"
      data-price="500"
    >
      <div class="product-card__media">
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Ginger-Fire-Shots.png"
          alt="Ginger Fire Shot"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Ginger Fire Shot</h3>
        <p class="product-card__desc">
          A fiery 60 ml wellness shot made from pure ginger for digestion, circulation, and immune support.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span> Ginger, lemon. May contain honey.
        </p>
        <p class="product-card__price">₦500</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <article
      class="product-card shots"
      data-id="shots-03"
      data-name="Immunity Booster"
      data-category="Wellness Shot"
      data-price="500"
    >
      <div class="product-card__media">
        <img
          src="https://7of9juicein.com/wp-content/uploads/2026/01/Immunity-Booster-shots.png"
          alt="Immunity Booster"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Immunity Booster</h3>
        <p class="product-card__desc">
          A powerful 60 ml wellness shot with ginger, lemon, and turmeric to support immunity and daily defense.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span>
          Ginger, turmeric, lemon, black pepper, honey.
        </p>
        <p class="product-card__price">₦500</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>

    <!-- SNACKS & SWEETS -->
    <article
      class="product-card snacks"
      data-id="snacks-01"
      data-name="Canesticks"
      data-category="Snack"
      data-price="200"
    >
      <div class="product-card__media">
        <img
          src="https://via.placeholder.com/600x800?text=Snack+01"
          alt="Canesticks"
          loading="lazy"
          decoding="async"
        />
      </div>
      <div class="product-card__body">
        <h3 class="product-card__title">Canesticks</h3>
        <p class="product-card__desc">
          Fresh peeled sugarcane sticks for chewing and natural sweetness.
        </p>
        <p class="product-card__meta">
          <span class="product-card__metaLabel">Ingredients:</span> Fresh sugarcane.
        </p>
        <p class="product-card__price">₦200</p>
        <button type="button" class="product-card__add">Add to order</button>
      </div>
    </article>
  </div><!-- /.products -->

  <!-- SIZES & STORAGE SECTION -->
  <section class="menu-sizes" aria-label="Drink sizes and storage">
    <h3 class="menu-sizes__title">Sizes &amp; Storage</h3>

    <div class="menu-sizes__grid">
      <div class="menu-sizes__item">
        <p class="menu-sizes__label">300 ml sealed smoothie cups</p>
        <p class="menu-sizes__text">
          Ideal for single servings and on-the-go smoothies. Comes with a sealed lid to reduce spills.
        </p>
      </div>

      <div class="menu-sizes__item">
        <p class="menu-sizes__label">60 ml wellness shots</p>
        <p class="menu-sizes__text">
          Perfect for a quick daily boost — designed as a one-sip, functional shot that fits easily into your
          everyday wellness routine. Best served chilled.
        </p>
      </div>

      <div class="menu-sizes__item">
        <p class="menu-sizes__label">500 ml bottles</p>
        <p class="menu-sizes__text">
          Standard bottle size for juices and some smoothies; great for everyday hydration and meal prep.
        </p>
      </div>

      <div class="menu-sizes__item">
        <p class="menu-sizes__label">Storage &amp; freshness</p>
        <p class="menu-sizes__text">
          Keep chilled between 0–4°C. Best enjoyed within 48–72 hours. Shake well before drinking and do not consume
          if the seal is broken, the taste changes, or the smell is off.
        </p>
      </div>
    </div>
  </section>

  <!-- SWEETENERS SECTION -->
  <section class="menu-sweeteners" aria-label="Sweeteners we use">
    <h3 class="menu-sweeteners__title">How we sweeten our drinks</h3>
    <p class="menu-sweeteners__lead">
      We avoid refined sugar and artificial sweeteners. We only use clean, natural options.
    </p>

    <div class="menu-sweeteners__grid">
      <div class="menu-sweeteners__item">
        <p class="menu-sweeteners__label">Dates</p>
        <p class="menu-sweeteners__text">
          Used to add gentle, caramel-like sweetness to smoothies and nut-based blends.
        </p>
      </div>

      <div class="menu-sweeteners__item">
        <p class="menu-sweeteners__label">Honey</p>
        <p class="menu-sweeteners__text">
          Added in small amounts to some shots and drinks for a smooth, rounded finish.
        </p>
      </div>

      <div class="menu-sweeteners__item">
        <p class="menu-sweeteners__label">Sugarcane</p>
        <p class="menu-sweeteners__text">
          Naturally sweet and refreshing — used as a base in cane juices and canesticks.
        </p>
      </div>

      <div class="menu-sweeteners__item">
        <p class="menu-sweeteners__label">Coconut</p>
        <p class="menu-sweeteners__text">
          Coconut milk and water add mild sweetness and creaminess in selected drinks.
        </p>
      </div>
    </div>

    <p class="menu-sweeteners__note">
      Prefer it less sweet? Tell us on WhatsApp or in your order note and we’ll adjust where possible.
    </p>
  </section>

  <!-- PAGINATION BAR -->
  <div class="menu-pagination" id="menuPagination" aria-label="Menu pagination">
    <button type="button" class="menu-pagination__btn" id="menuPagePrev">Prev</button>
    <span>Page <span id="menuPageCurrent">1</span> of <span id="menuPageTotal">1</span></span>
    <button type="button" class="menu-pagination__btn" id="menuPageNext">Next</button>
  </div>

  <!-- ORDER SUMMARY -->
  <div class="basket-panel" id="basketPanel">
    <h3 class="basket-panel__title">Your Selection</h3>

    <div class="basket-panel__body">
      <div class="basket-empty">No items added yet.</div>
      <ul class="basket-list" id="basketList"></ul>
      <div class="basket-total" id="basketTotal"></div>
    </div>

    <div class="basket-panel__actions">
      <button type="button" class="basket-clear" id="basketClear">Clear</button>
      <a
        href="#"
        target="_blank"
        rel="noopener"
        class="basket-send"
        id="basketSend"
      >
        Send via WhatsApp
      </a>
    </div>

    <p class="basket-note">
      Orders are confirmed on WhatsApp. Final pricing and delivery or pickup will be agreed with you.
    </p>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
  const buttons = Array.from(document.querySelectorAll('.filter-btn'));
  const cards = Array.from(document.querySelectorAll('.product-card'));
  const title = document.getElementById('menuSectionTitle');

  const basketCount = document.getElementById('basketCount');
  const basketList = document.getElementById('basketList');
  const basketTotal = document.getElementById('basketTotal');
  const basketClear = document.getElementById('basketClear');
  const basketSend = document.getElementById('basketSend');
  const emptyEl = document.querySelector('.basket-empty');

  const pagination = document.getElementById('menuPagination');
  const pagePrev = document.getElementById('menuPagePrev');
  const pageNext = document.getElementById('menuPageNext');
  const pageCurrentEl = document.getElementById('menuPageCurrent');
  const pageTotalEl = document.getElementById('menuPageTotal');

  const phone = '2348125320865';

  // Basket state: { id: { id, name, price, qty } }
  const basket = {};

  // Pagination state
  let currentCat = 'all';
  let currentPage = 1;

  // Per-category page size
  const pageSizeByCat = {
    all: 6,
    juice: 9,
    smoothies: 9,
    shots: 3,
    snacks: 9,
  };

  function shuffle(arr) {
    const a = arr.slice();
    for (let i = a.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [a[i], a[j]] = [a[j], a[i]];
    }
    return a;
  }

  function getCardsForCategory(cat) {
    if (cat === 'all') return cards.slice();
    return cards.filter((card) => card.classList.contains(cat));
  }

  function updateView() {
    const catCards = getCardsForCategory(currentCat);

    // ALL: show 6 random items (no pagination)
    if (currentCat === 'all') {
      const limit = pageSizeByCat.all || 6;
      const visibleSet = new Set(shuffle(catCards).slice(0, limit));

      cards.forEach((card) => {
        card.style.display = visibleSet.has(card) ? '' : 'none';
      });

      if (pagination) pagination.style.display = 'none';
      return;
    }

    // Other categories: paginated
    const pageSize = pageSizeByCat[currentCat] || 9;
    const totalPages = Math.max(1, Math.ceil(catCards.length / pageSize));

    currentPage = Math.min(Math.max(1, currentPage), totalPages);

    const start = (currentPage - 1) * pageSize;
    const end = start + pageSize;
    const visibleSubset = new Set(catCards.slice(start, end));

    cards.forEach((card) => {
      card.style.display = visibleSubset.has(card) ? '' : 'none';
    });

    // Pagination UI
    if (!pagination) return;

    if (totalPages <= 1) {
      pagination.style.display = 'none';
    } else {
      pagination.style.display = 'flex';
      if (pageCurrentEl) pageCurrentEl.textContent = String(currentPage);
      if (pageTotalEl) pageTotalEl.textContent = String(totalPages);
      if (pagePrev) pagePrev.disabled = currentPage <= 1;
      if (pageNext) pageNext.disabled = currentPage >= totalPages;
    }
  }

  /* ---------- CARD SELECTED STATE ---------- */
  function syncCardStates() {
    cards.forEach((card) => {
      const id = card.getAttribute('data-id');
      const btn = card.querySelector('.product-card__add');
      if (!id || !btn) return;

      const item = basket[id];

      if (item && item.qty > 0) {
        card.classList.add('product-card--selected');
        btn.classList.add('product-card__add--selected');
        btn.textContent = 'Added';
      } else {
        card.classList.remove('product-card--selected');
        btn.classList.remove('product-card__add--selected');
        btn.textContent = 'Add to order';
      }
    });
  }

  /* ---------- FILTER BUTTONS ---------- */
  buttons.forEach((btn) => {
    btn.addEventListener('click', (e) => {
      e.preventDefault();

      buttons.forEach((b) => {
        b.classList.remove('active');
        b.setAttribute('aria-pressed', 'false');
      });

      btn.classList.add('active');
      btn.setAttribute('aria-pressed', 'true');

      currentCat = btn.getAttribute('data-filter') || 'all';
      currentPage = 1;

      if (title) {
        title.textContent =
          currentCat === 'all' ? 'Menu' : btn.textContent.trim();
      }

      updateView();
    });
  });

  /* ---------- PAGINATION BUTTONS ---------- */
  if (pagePrev) {
    pagePrev.addEventListener('click', () => {
      if (currentCat === 'all') return;
      currentPage--;
      updateView();
    });
  }

  if (pageNext) {
    pageNext.addEventListener('click', () => {
      if (currentCat === 'all') return;
      currentPage++;
      updateView();
    });
  }

  /* ---------- BASKET ---------- */
  function formatNaira(n) {
    return '₦' + n.toLocaleString('en-NG');
  }

  function updateBasketCount() {
    const totalQty = Object.keys(basket).reduce(
      (sum, id) => sum + basket[id].qty,
      0
    );
    if (basketCount) {
      basketCount.textContent = totalQty;
    }
  }

  function updateWhatsAppLink() {
    const items = Object.keys(basket).map((id) => basket[id]);

    if (!basketSend) return;

    if (!items.length) {
      basketSend.href =
        'https://wa.me/' +
        phone +
        '?text=' +
        encodeURIComponent(
          'Hi 7OF9 JuiceIN! I would like to place an order.'
        );
      return;
    }

    const lines = items
      .map(
        (item) =>
          `• ${item.name} x${item.qty} (${formatNaira(item.price)} each)`
      )
      .join('\n');

    const total = items.reduce(
      (sum, item) => sum + item.price * item.qty,
      0
    );

    const message =
      'Hi 7OF9 JuiceIN!\n\n' +
      'Here is my order:\n' +
      lines +
      '\n\n' +
      'Estimated total: ' +
      formatNaira(total) +
      '\n\n' +
      'Name: [Your Name]\n' +
      'Date: [Preferred Date]\n' +
      'Location: [Delivery / Pickup]';

    basketSend.href =
      'https://wa.me/' + phone + '?text=' + encodeURIComponent(message);
  }

  function renderBasket() {
    const ids = Object.keys(basket);

    if (!basketList || !basketTotal) return;

    if (!ids.length) {
      basketList.innerHTML = '';
      basketTotal.textContent = '';
      if (emptyEl) emptyEl.style.display = '';
      updateBasketCount();
      updateWhatsAppLink();
      syncCardStates();
      return;
    }

    if (emptyEl) emptyEl.style.display = 'none';
    basketList.innerHTML = '';

    let total = 0;

    ids.forEach((id) => {
      const item = basket[id];
      total += item.price * item.qty;

      const li = document.createElement('li');
      li.className = 'basket-item';

      li.innerHTML =
        `<div class="basket-item__name">${item.name}</div>` +
        `<div class="basket-item__controls">` +
        `<button type="button" class="basket-item__btn" data-id="${item.id}" data-change="-1">-</button>` +
        `<button type="button" class="basket-item__btn" data-id="${item.id}" data-change="1">+</button>` +
        `</div>` +
        `<div class="basket-item__qty">x${item.qty}</div>`;

      basketList.appendChild(li);
    });

    basketTotal.textContent = 'Estimated total: ' + formatNaira(total);
    updateBasketCount();
    updateWhatsAppLink();
    syncCardStates();
  }

  // Add to basket
  cards.forEach((card) => {
    const btn = card.querySelector('.product-card__add');
    if (!btn) return;

    btn.addEventListener('click', () => {
      const id = card.getAttribute('data-id');
      const name = card.getAttribute('data-name') || 'Item';
      const price = parseInt(card.getAttribute('data-price'), 10) || 0;
      if (!id) return;

      if (!basket[id]) basket[id] = { id, name, price, qty: 0 };
      basket[id].qty += 1;
      renderBasket();
    });
  });

  // Basket controls (+ / -)
  if (basketList) {
    basketList.addEventListener('click', (e) => {
      const btn = e.target.closest('.basket-item__btn');
      if (!btn) return;

      const id = btn.getAttribute('data-id');
      const change = parseInt(btn.getAttribute('data-change'), 10) || 0;

      const item = basket[id];
      if (!item) return;

      item.qty += change;
      if (item.qty <= 0) delete basket[id];
      renderBasket();
    });
  }

  // Clear basket
  if (basketClear) {
    basketClear.addEventListener('click', () => {
      Object.keys(basket).forEach((id) => delete basket[id]);
      renderBasket();
    });
  }

  // Init
  updateView();
  renderBasket();
});
</script>/* End custom CSS */