From 9bd61b4236160e20aa7dbf4bc34cb33d5d1e895c Mon Sep 17 00:00:00 2001
From: FrontendDev <frontenddev@repa.ai>
Date: Sun, 3 May 2026 10:57:54 -0400
Subject: [PATCH] Fix mobile hamburger menu, designs page template, product tab
 styling, and stock field (REPA-78)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add mobile hamburger toggle button and full-screen nav drawer (≤1024px)
- Fix product tab styles: complete tab CSS without relying on WC parent selectors; explicit wc-single-product enqueue on product pages
- Fix STOCK field: conditionally hide when get_stock_quantity() returns null instead of showing '— units'
- Add page-designs.php template + template_include filter so /designs/ uses themed layout instead of raw WooCommerce output
- Align nav/footer terminology: 'Canvas' → 'Wall Decor' in nav fallback; correct broken category URL slugs (mugs→drinkware, canvas→wall-decor, planners→stationery, blog→the-memo); add 'Bulk / HR' to mobile drawer

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 theme/functions.php                  |  57 +++++++++++++-
 theme/js/rar.js                      |  20 +++++
 theme/page-designs.php               | 112 +++++++++++++++++++++++++++
 theme/style.css                      | 112 +++++++++++++++++++++++++++
 theme/woocommerce/single-product.php |   4 +-
 5 files changed, 303 insertions(+), 2 deletions(-)
 create mode 100644 theme/page-designs.php

diff --git a/theme/functions.php b/theme/functions.php
index 8ac4bd1..e53a22b 100644
--- a/theme/functions.php
+++ b/theme/functions.php
@@ -127,7 +127,7 @@ function rar_nav() {
                         ['Shop',        $shop_url],
                         ['Designs',     home_url('/designs/')],
                         ['Mugs',        home_url('/product-category/drinkware/')],
-                        ['Canvas',      home_url('/product-category/wall-decor/')],
+                        ['Wall Decor',  home_url('/product-category/wall-decor/')],
                         ['Planners',    home_url('/product-category/stationery/')],
                         ['Apparel',     home_url('/product-category/apparel/')],
                         ['The Memo',    home_url('/the-memo/')],
@@ -162,8 +162,45 @@ function rar_nav() {
                 </svg>
                 Cart (<?php echo esc_html($cart_count); ?>)
             </a>
+            <button class="rar-nav__toggle" id="rar-nav-toggle" type="button"
+                onclick="rarToggleNav()" aria-label="Open navigation menu" aria-expanded="false" aria-controls="rar-nav-drawer">
+                <svg class="icon-open" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M3 6h18M3 12h18M3 18h18"></path>
+                </svg>
+                <svg class="icon-close" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M18 6L6 18M6 6l12 12"></path>
+                </svg>
+            </button>
         </div>
     </nav>
+
+    <!-- Mobile navigation drawer -->
+    <div class="rar-nav__drawer" id="rar-nav-drawer" role="dialog" aria-label="Navigation menu" aria-modal="true">
+        <button class="rar-nav__drawer-close" onclick="rarToggleNav()" aria-label="Close navigation">✕</button>
+        <?php
+        wp_nav_menu([
+            'theme_location' => 'primary',
+            'container'      => false,
+            'items_wrap'     => '%3$s',
+            'fallback_cb'    => function() use ($shop_url) {
+                $links = [
+                    ['Shop',        $shop_url],
+                    ['Designs',     home_url('/designs/')],
+                    ['Mugs',        home_url('/product-category/drinkware/')],
+                    ['Wall Decor',  home_url('/product-category/wall-decor/')],
+                    ['Planners',    home_url('/product-category/stationery/')],
+                    ['Apparel',     home_url('/product-category/apparel/')],
+                    ['The Memo',    home_url('/the-memo/')],
+                    ['About',       home_url('/about/')],
+                    ['Bulk / HR',   home_url('/bulk/')],
+                ];
+                foreach ($links as [$label, $url]) {
+                    echo '<a href="' . esc_url($url) . '">' . esc_html($label) . '</a>';
+                }
+            },
+        ]);
+        ?>
+    </div>
     <div class="rar-search-overlay" id="rar-search-overlay" hidden>
         <form class="rar-search-form" action="<?php echo esc_url(home_url('/')); ?>" method="get">
             <input type="hidden" name="post_type" value="product" />
@@ -308,6 +345,24 @@ function rar_ajax_add_to_cart() {
     wp_send_json_error();
 }
 
+// ─── Ensure WooCommerce single-product tab JS loads on product pages ─────────
+add_action('wp_enqueue_scripts', function() {
+    if (is_singular('product')) {
+        wp_enqueue_script('wc-single-product');
+    }
+}, 20);
+
+// ─── Force designs page to use page-designs.php template ─────────────────────
+add_filter('template_include', function($template) {
+    if (is_page('designs')) {
+        $custom = get_theme_file_path('page-designs.php');
+        if (file_exists($custom)) {
+            return $custom;
+        }
+    }
+    return $template;
+});
+
 // ─── Customizer settings ─────────────────────────────────────────────────────
 add_action('customize_register', function($wp_customize) {
     $wp_customize->add_section('rar_options', [
diff --git a/theme/js/rar.js b/theme/js/rar.js
index 09fd6c3..3e1f6cc 100644
--- a/theme/js/rar.js
+++ b/theme/js/rar.js
@@ -176,6 +176,26 @@
     } catch (e) {}
   }
 
+  // ─── Mobile nav drawer toggle ────────────────────────────────────────────────
+  window.rarToggleNav = function () {
+    var nav = document.getElementById('rar-nav');
+    var drawer = document.getElementById('rar-nav-drawer');
+    var toggle = document.getElementById('rar-nav-toggle');
+    if (!drawer) return;
+    var isOpen = drawer.classList.contains('is-open');
+    drawer.classList.toggle('is-open', !isOpen);
+    if (nav) nav.classList.toggle('is-open', !isOpen);
+    if (toggle) toggle.setAttribute('aria-expanded', isOpen ? 'false' : 'true');
+    document.body.style.overflow = isOpen ? '' : 'hidden';
+  };
+
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') {
+      var drawer = document.getElementById('rar-nav-drawer');
+      if (drawer && drawer.classList.contains('is-open')) { rarToggleNav(); }
+    }
+  });
+
   // ─── Search overlay toggle ───────────────────────────────────────────────────
   window.rarToggleSearch = function () {
     var overlay = document.getElementById('rar-search-overlay');
diff --git a/theme/page-designs.php b/theme/page-designs.php
new file mode 100644
index 0000000..1916ced
--- /dev/null
+++ b/theme/page-designs.php
@@ -0,0 +1,112 @@
+<?php
+/**
+ * Template Name: Designs Index
+ * Themed product listing for the /designs/ page.
+ */
+defined('ABSPATH') || exit;
+
+get_header();
+
+$paged = max(1, get_query_var('paged'));
+
+$designs_query = new WP_Query([
+    'post_type'      => 'product',
+    'posts_per_page' => 12,
+    'paged'          => $paged,
+    'post_status'    => 'publish',
+]);
+?>
+
+<div class="rar-breadcrumb">
+    <a href="<?php echo esc_url(home_url('/')); ?>">Shop</a> /
+    <span>Designs</span>
+</div>
+
+<div class="rar-cat-hero">
+    <div class="rar-folder-tab">DEPT. DESIGNS · COLLECTION</div>
+    <div class="rar-cat-hero__inner">
+        <div>
+            <h1>
+                Designs.<br>
+                <em style="color:var(--stamp);font-style:italic;">Art for the quietly suffering.</em>
+            </h1>
+        </div>
+        <div>
+            <p style="font-size:14px;line-height:1.6;color:var(--ink-muted);margin:0 0 18px;max-width:380px;">
+                Print-on-demand wall art and stickers for the desk-bound. Corporate in format, passive-aggressive in spirit.
+            </p>
+            <div class="rar-cat-hero__stats">
+                <span><?php echo esc_html($designs_query->found_posts); ?> ITEMS</span>
+                <span>·</span>
+                <span>FREE SHIP OVER $40</span>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="rar-toolbar">
+    <div class="rar-toolbar__left">
+        Showing <?php echo esc_html(($paged - 1) * 12 + 1); ?>–<?php echo esc_html(min($paged * 12, $designs_query->found_posts)); ?>
+        of <?php echo esc_html($designs_query->found_posts); ?> designs
+    </div>
+</div>
+
+<div class="rar-products" style="padding-top:0;">
+    <div class="rar-products__grid" id="rar-product-grid">
+        <?php if ($designs_query->have_posts()) : while ($designs_query->have_posts()) : $designs_query->the_post();
+            global $product;
+            if (!$product) $product = wc_get_product(get_the_ID());
+            if (!$product) continue;
+
+            $img_id  = $product->get_image_id();
+            $img_url = $img_id ? wp_get_attachment_image_url($img_id, 'rar-product-card') : '';
+            $sku     = $product->get_sku() ?: 'SKU-' . $product->get_id();
+            $cats    = get_the_terms(get_the_ID(), 'product_cat');
+            $catname = $cats ? $cats[0]->name : '';
+            $stock   = $product->get_stock_status();
+            $stock_label = $stock === 'instock' ? 'IN STOCK' : ($stock === 'onbackorder' ? 'BACKORDER' : 'OUT OF STOCK');
+            $stock_color = $stock === 'instock' ? 'var(--olive-dark)' : 'var(--ink-faint)';
+            ?>
+            <a href="<?php echo esc_url(get_permalink()); ?>" class="rar-card">
+                <div class="rar-card__media">
+                    <div class="rar-card__sku">SKU <?php echo esc_html($sku); ?></div>
+                    <?php if ($img_url) : ?>
+                        <img src="<?php echo esc_url($img_url); ?>" alt="<?php echo esc_attr($product->get_name()); ?>" />
+                    <?php else : ?>
+                        <div class="rar-placeholder__label"><?php echo esc_html(strtoupper($catname ?: $product->get_name())); ?></div>
+                    <?php endif; ?>
+                </div>
+                <div class="rar-card__body">
+                    <?php if ($catname) : ?><div class="rar-card__cat"><?php echo esc_html($catname); ?></div><?php endif; ?>
+                    <div class="rar-card__title"><?php echo esc_html($product->get_name()); ?></div>
+                    <div class="rar-card__row">
+                        <span class="rar-card__price"><?php echo wp_kses_post($product->get_price_html()); ?></span>
+                        <span style="color:<?php echo esc_attr($stock_color); ?>;font-family:var(--mono);font-size:9px;letter-spacing:0.18em;"><?php echo esc_html($stock_label); ?></span>
+                    </div>
+                </div>
+            </a>
+        <?php endwhile; wp_reset_postdata();
+        else : ?>
+            <p style="font-family:var(--serif);font-size:18px;font-style:italic;color:var(--ink-muted);grid-column:1/-1;">
+                No designs found. The creative department is on a deadline.
+            </p>
+        <?php endif; ?>
+    </div>
+
+    <?php if ($designs_query->max_num_pages > 1) : ?>
+    <div class="rar-pagination">
+        <div class="rar-page-btns">
+            <?php
+            echo paginate_links([
+                'total'     => $designs_query->max_num_pages,
+                'current'   => $paged,
+                'prev_text' => '‹',
+                'next_text' => '›',
+            ]);
+            ?>
+        </div>
+    </div>
+    <?php endif; ?>
+</div>
+
+<?php get_footer(); ?>
diff --git a/theme/style.css b/theme/style.css
index ff48bb4..e3ce1d4 100644
--- a/theme/style.css
+++ b/theme/style.css
@@ -1056,6 +1056,117 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
 /* Notices */
 .woocommerce-store-notice { background: var(--stamp) !important; color: var(--manila) !important; }
 
+/* ───────── Mobile nav hamburger ───────── */
+.rar-nav__toggle {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid rgba(245, 241, 232, 0.35);
+  color: var(--manila);
+  cursor: pointer;
+  padding: 6px 10px;
+  border-radius: 2px;
+  transition: border-color 0.15s;
+}
+.rar-nav__toggle:hover { border-color: var(--stamp); color: var(--stamp); }
+.rar-nav__toggle svg { display: block; }
+/* hamburger → × swap */
+.rar-nav__toggle .icon-close { display: none; }
+.rar-nav.is-open .rar-nav__toggle .icon-open { display: none; }
+.rar-nav.is-open .rar-nav__toggle .icon-close { display: block; }
+
+/* Mobile drawer */
+.rar-nav__drawer {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--ink);
+  z-index: 99;
+  flex-direction: column;
+  padding: 80px 32px 40px;
+  overflow-y: auto;
+}
+.rar-nav__drawer.is-open { display: flex; }
+.rar-nav__drawer a {
+  font-family: var(--mono);
+  font-size: 14px;
+  letter-spacing: 0.2em;
+  text-transform: uppercase;
+  color: var(--manila);
+  text-decoration: none;
+  padding: 18px 0;
+  border-bottom: 1px solid rgba(245, 241, 232, 0.12);
+  transition: color 0.15s;
+}
+.rar-nav__drawer a:hover { color: var(--stamp); }
+.rar-nav__drawer .rar-nav__drawer-close {
+  position: absolute;
+  top: 16px;
+  right: 20px;
+  background: none;
+  border: none;
+  color: var(--manila);
+  cursor: pointer;
+  font-size: 22px;
+  padding: 8px;
+  line-height: 1;
+}
+
+/* ───────── WooCommerce product tabs ───────── */
+.woocommerce-tabs.wc-tabs-wrapper { padding: 0; }
+.woocommerce-tabs ul.tabs,
+.woocommerce div.product .woocommerce-tabs ul.tabs {
+  list-style: none !important;
+  padding: 0 !important;
+  margin: 0 0 0 !important;
+  display: flex !important;
+  border-bottom: 2px solid var(--hairline-strong) !important;
+}
+.woocommerce-tabs ul.tabs::before,
+.woocommerce div.product .woocommerce-tabs ul.tabs::before { border: none !important; }
+.woocommerce-tabs ul.tabs li,
+.woocommerce div.product .woocommerce-tabs ul.tabs li {
+  background: transparent !important;
+  border: none !important;
+  border-bottom: 3px solid transparent !important;
+  margin-bottom: -2px !important;
+  padding: 0 !important;
+  border-radius: 0 !important;
+}
+.woocommerce-tabs ul.tabs li::before,
+.woocommerce-tabs ul.tabs li::after,
+.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
+.woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none !important; }
+.woocommerce-tabs ul.tabs li.active,
+.woocommerce div.product .woocommerce-tabs ul.tabs li.active {
+  border-bottom-color: var(--stamp) !important;
+  background: transparent !important;
+}
+.woocommerce-tabs ul.tabs li a,
+.woocommerce div.product .woocommerce-tabs ul.tabs li a {
+  font-family: var(--mono) !important;
+  font-size: 11px !important;
+  letter-spacing: 0.16em !important;
+  text-transform: uppercase !important;
+  color: var(--ink-soft) !important;
+  padding: 12px 20px !important;
+  display: block !important;
+}
+.woocommerce-tabs ul.tabs li.active a,
+.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--stamp) !important; }
+.woocommerce-Tabs-panel,
+.woocommerce div.product .woocommerce-Tabs-panel {
+  padding: 28px 0 !important;
+  border: none !important;
+  font-size: 14px !important;
+  line-height: 1.7 !important;
+  color: var(--ink-soft) !important;
+}
+
 /* ───────── Responsive ───────── */
 @media (max-width: 1024px) {
   .rar-hero__grid, .rar-product-detail, .rar-cart-page { grid-template-columns: 1fr; }
@@ -1064,6 +1175,7 @@ button { font-family: inherit; cursor: pointer; border: none; background: none;
   .rar-cat-layout { grid-template-columns: 1fr; }
   .rar-filter-sidebar { display: none; }
   .rar-nav__links { display: none; }
+  .rar-nav__toggle { display: flex; }
   .rar-editorial__press { gap: 24px; }
   .rar-metrics { grid-template-columns: repeat(2, 1fr); }
   .rar-about-hero { grid-template-columns: 1fr; }
diff --git a/theme/woocommerce/single-product.php b/theme/woocommerce/single-product.php
index fb43154..5927f77 100644
--- a/theme/woocommerce/single-product.php
+++ b/theme/woocommerce/single-product.php
@@ -147,10 +147,12 @@ $stock_color = $stock === 'instock' ? 'var(--olive-dark)' : ($stock === 'onbacko
                 <div class="rar-shipping-item__key">Origin</div>
                 <div class="rar-shipping-item__val">Cleveland, OH</div>
             </div>
+            <?php $stock_qty = $product->get_stock_quantity(); if ($stock_qty !== null): ?>
             <div class="rar-shipping-item">
                 <div class="rar-shipping-item__key">Stock</div>
-                <div class="rar-shipping-item__val"><?php echo esc_html($product->get_stock_quantity() ?? '—'); ?> units</div>
+                <div class="rar-shipping-item__val"><?php echo esc_html($stock_qty); ?> units</div>
             </div>
+            <?php endif; ?>
         </div>
     </div>
 </div>