(function() {
  // Only run on the wine shop test page or the wines category page
  const isWineShopTest = window.location.pathname.includes('wine-shop-test');
  if (!isWineShopTest) return;

  // ========== CONFIG ==========
  const HERO_IMAGE = 'https://images.unsplash.com/photo-1602967217650-b8b1d1343609?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHx2aW5leWFyZCUyMHdpbmVyeSUyMGxhbmRzY2FwZSUyMGdvbGRlbnxlbnwxfHx8fDE3NzMxNzkzNjR8MA&ixlib=rb-4.1.0&q=80&w=1080';

  const CATEGORIES = [
    { name: 'All Wines', slug: 'all' },
    { name: 'Red Wines', slug: 'red-wines' },
    { name: 'White Wines', slug: 'white-wines' },
    { name: 'Rosé', slug: 'rose-wines' },
    { name: 'Ice Wines', slug: 'ice-wines' },
    { name: 'Sparkling', slug: 'sparkling' }
  ];

  // Category mapping based on known product assignments
  const PRODUCT_CATEGORIES = {
    'cab franc 750': 'Red Wines',
    'cab merlot 750': 'Red Wines',
    'meritage 750': 'Red Wines',
    'petite noir 750': 'Red Wines',
    'rosso 1.5l': 'Red Wines',
    'dolci rosso 750': 'Red Wines',
    'tramonto 750': 'Red Wines',
    'bianco 1.5l': 'White Wines',
    'barrel fermented vidal- 50th anniv': 'White Wines',
    'chard-riesling 750': 'White Wines',
    'chardonnay clv 750': 'White Wines',
    'chardonnay vineyard hill 1.5l': 'White Wines',
    'chardonnay vineyard hill 750': 'White Wines',
    'dolce bianco 750': 'White Wines',
    'gewurztraminer 750': 'White Wines',
    'lilac hill 1.5l': 'White Wines',
    'lilac hill 750': 'White Wines',
    'lilac hill sparkling wine': 'White Wines',
    'pallido 1.5l': 'White Wines',
    'pallido 750': 'White Wines',
    'riesling 750': 'White Wines',
    'riesling dry 750': 'White Wines',
    'seyval blanc 750': 'White Wines',
    'tappo bianco 750': 'White Wines',
    'vidal blanc 750': 'White Wines',
    'vineyard hill white 750': 'White Wines',
    'dry rose of cab franc 750': 'Rosé',
    '2024 fiori vidal ice wine': 'Ice Wines',
    'fiori cab franc ice wine': 'Ice Wines',
    'iron smoke bourbon barrel ice wine': 'Ice Wines',
    'celebriamo sparkling wine': 'Sparkling'
  };

  function getCategory(productName) {
    const key = productName.toLowerCase().trim();
    return PRODUCT_CATEGORIES[key] || 'White Wines';
  }

  function getCategoryBadge(cat) {
    return cat.replace(' Wines', '').replace('é', 'e');
  }

  // ========== INJECT STYLES ==========
  const style = document.createElement('style');
  style.textContent = `
    @import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Nunito+Sans:wght@300;400;600;700&display=swap');

    /* Hide the default page title */
    .wine-shop-enhanced .entry-title,
    .wine-shop-enhanced .page-title,
    .wine-shop-enhanced .woocommerce-result-count,
    .wine-shop-enhanced .woocommerce-ordering,
    .wine-shop-enhanced .woocommerce-pagination,
    .wine-shop-enhanced .ast-woocommerce-container > .woocommerce-result-count,
    .wine-shop-enhanced .ast-woocommerce-container > .woocommerce-ordering {
      display: none !important;
    }

    /* Hero Banner */
    .ws-hero {
      position: relative;
      height: 300px;
      overflow: hidden;
      margin-bottom: 0;
      margin-top: -50px;
      padding-top: 140px;
    }
    @media (min-width: 768px) { .ws-hero { height: 380px; padding-top: 180px; } }
    .ws-hero-bg {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
    }
    .ws-hero-overlay {
      position: absolute;
      inset: 0;
      background: rgba(72, 40, 23, 0.55);
    }
    .ws-hero-content {
      position: relative;
      z-index: 10;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      text-align: center;
    }
    .ws-hero h1 {
      color: white;
      text-transform: uppercase;
      letter-spacing: 5px;
      margin-bottom: 12px;
      font-size: 36px;
      font-family: 'Libre Baskerville', serif;
      line-height: 1.2;
      font-weight: 400;
    }
    @media (min-width: 768px) { .ws-hero h1 { font-size: 44px; } }
    .ws-hero p {
      color: rgba(255,255,255,0.8);
      font-size: 16px;
      max-width: 500px;
      font-family: 'Nunito Sans', sans-serif;
      line-height: 1.6;
    }

    /* Breadcrumbs */
    .ws-breadcrumbs {
      max-width: 1200px;
      margin: 0 auto;
      padding: 16px 24px;
      font-family: 'Nunito Sans', sans-serif;
      font-size: 13px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .ws-breadcrumbs a {
      color: rgb(158,132,92);
      text-decoration: none;
      transition: color 0.2s;
    }
    .ws-breadcrumbs a:hover { color: rgb(72,40,23); }
    .ws-breadcrumbs .sep { color: rgb(180,175,165); }
    .ws-breadcrumbs .current { color: rgb(100,95,85); }

    /* Main Layout */
    .ws-main {
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 24px 64px;
      display: flex;
      gap: 48px;
    }

    /* Sidebar */
    .ws-sidebar {
      width: 220px;
      flex-shrink: 0;
    }
    @media (max-width: 1023px) { .ws-sidebar { display: none; } }
    .ws-sidebar h3 {
      text-transform: uppercase;
      letter-spacing: 2px;
      color: rgb(72,40,23);
      margin-bottom: 24px;
      font-size: 14px;
      font-family: 'Libre Baskerville', serif;
      font-weight: 400;
    }
    .ws-sidebar ul {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .ws-sidebar li button {
      width: 100%;
      text-align: left;
      padding: 10px 12px;
      border-radius: 6px;
      font-size: 14px;
      font-family: 'Nunito Sans', sans-serif;
      border: none;
      cursor: pointer;
      transition: all 0.2s;
      background: transparent;
      color: rgb(90,85,75);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .ws-sidebar li button:hover {
      background: rgb(248,246,240);
      color: rgb(72,40,23);
    }
    .ws-sidebar li button.active {
      background: rgb(72,40,23);
      color: white;
    }
    .ws-sidebar li button .count {
      font-size: 12px;
      color: rgb(170,165,155);
    }
    .ws-sidebar li button.active .count {
      color: rgba(255,255,255,0.7);
    }
    .ws-price-range {
      margin-top: 32px;
      padding-top: 24px;
      border-top: 1px solid rgb(230,225,215);
    }
    .ws-price-range h3 {
      text-transform: uppercase;
      letter-spacing: 2px;
      color: rgb(72,40,23);
      margin-bottom: 16px;
      font-size: 14px;
      font-family: 'Libre Baskerville', serif;
      font-weight: 400;
    }
    .ws-price-range span {
      font-size: 13px;
      color: rgb(90,85,75);
      font-family: 'Nunito Sans', sans-serif;
    }

    /* Content Area */
    .ws-content {
      flex: 1;
      min-width: 0;
    }

    /* Search Bar */
    .ws-search-bar {
      position: relative;
      margin-bottom: 20px;
    }
    .ws-search-bar input {
      width: 100%;
      padding: 12px 16px 12px 44px;
      border: 1px solid rgb(220,215,205);
      border-radius: 4px;
      font-family: 'Nunito Sans', sans-serif;
      font-size: 14px;
      color: rgb(60,55,45);
      background: rgb(255,255,255);
      outline: none;
      transition: border-color 0.2s;
    }
    .ws-search-bar input:focus {
      border-color: rgb(158,132,92);
    }
    .ws-search-bar input::placeholder {
      color: rgb(170,165,155);
    }
    .ws-search-icon {
      position: absolute;
      left: 14px;
      top: 50%;
      transform: translateY(-50%);
      pointer-events: none;
    }

    /* Toolbar */
    .ws-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
      gap: 16px;
    }
    .ws-result-count {
      font-size: 13px;
      color: rgb(120,115,105);
      font-family: 'Nunito Sans', sans-serif;
    }
    @media (max-width: 1023px) { .ws-result-count { display: none; } }
    .ws-sort-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-left: auto;
    }
    .ws-sort-wrap label {
      font-size: 13px;
      color: rgb(120,115,105);
      font-family: 'Nunito Sans', sans-serif;
    }
    @media (max-width: 640px) { .ws-sort-wrap label { display: none; } }
    .ws-sort-wrap select {
      border: 1px solid rgb(215,210,200);
      border-radius: 6px;
      padding: 8px 12px;
      font-size: 13px;
      color: rgb(72,40,23);
      background: white;
      font-family: 'Nunito Sans', sans-serif;
      cursor: pointer;
    }
    .ws-sort-wrap select:focus {
      outline: none;
      border-color: rgb(158,132,92);
    }

    /* Mobile filter button */
    .ws-mobile-filter-btn {
      display: none;
      align-items: center;
      gap: 8px;
      padding: 10px 16px;
      border: 1px solid rgb(215,210,200);
      border-radius: 6px;
      font-size: 13px;
      color: rgb(72,40,23);
      background: white;
      font-family: 'Nunito Sans', sans-serif;
      cursor: pointer;
      transition: background 0.2s;
    }
    .ws-mobile-filter-btn:hover { background: rgb(248,246,240); }
    @media (max-width: 1023px) { .ws-mobile-filter-btn { display: inline-flex; } }

    /* Mobile filters panel */
    .ws-mobile-filters {
      display: none;
      margin-bottom: 24px;
      padding: 16px;
      background: rgb(248,246,240);
      border: 1px solid rgb(230,225,215);
      border-radius: 6px;
    }
    .ws-mobile-filters.open { display: block; }
    @media (min-width: 1024px) { .ws-mobile-filters { display: none !important; } }
    .ws-mobile-filters-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .ws-mobile-filters-header h3 {
      text-transform: uppercase;
      letter-spacing: 2px;
      color: rgb(72,40,23);
      font-size: 13px;
      font-family: 'Libre Baskerville', serif;
      font-weight: 400;
      margin: 0;
    }
    .ws-mobile-filters-header button {
      background: none;
      border: none;
      color: rgb(120,115,105);
      cursor: pointer;
      padding: 4px;
    }
    .ws-mobile-filters-header button:hover { color: rgb(72,40,23); }
    .ws-mobile-pills {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .ws-mobile-pills button {
      padding: 8px 16px;
      border-radius: 999px;
      font-size: 13px;
      font-family: 'Nunito Sans', sans-serif;
      cursor: pointer;
      transition: all 0.2s;
      background: white;
      color: rgb(90,85,75);
      border: 1px solid rgb(215,210,200);
    }
    .ws-mobile-pills button:hover { border-color: rgb(72,40,23); }
    .ws-mobile-pills button.active {
      background: rgb(72,40,23);
      color: white;
      border-color: rgb(72,40,23);
    }

    /* Active filter tag */
    .ws-active-filter {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 24px;
    }
    .ws-active-filter .tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      background: rgb(248,246,240);
      border: 1px solid rgb(230,225,215);
      border-radius: 999px;
      font-size: 13px;
      color: rgb(72,40,23);
      font-family: 'Nunito Sans', sans-serif;
    }
    .ws-active-filter .tag button {
      background: none;
      border: none;
      cursor: pointer;
      color: rgb(72,40,23);
      padding: 0;
      display: flex;
      transition: color 0.2s;
    }
    .ws-active-filter .tag button:hover { color: rgb(158,132,92); }
    .ws-active-filter .count-text {
      font-size: 13px;
      color: rgb(120,115,105);
      font-family: 'Nunito Sans', sans-serif;
    }

    /* Product Grid */
    .ws-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 28px 20px;
    }
    @media (max-width: 767px) {
      .ws-grid { grid-template-columns: repeat(2, 1fr); gap: 24px 16px; }
    }

    /* Product Card */
    .ws-card {
      display: block;
      text-decoration: none !important;
      cursor: pointer;
    }
    .ws-card-image {
      position: relative;
      background: transparent;
      border-radius: 0;
      overflow: hidden;
      margin-bottom: 12px;
      aspect-ratio: 3/4;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      transition: box-shadow 0.3s;
    }
    @media (min-width: 640px) { .ws-card-image { padding: 32px; } }
    .ws-card:hover .ws-card-image { box-shadow: 0 8px 25px rgba(0,0,0,0.1); }
    .ws-card-image img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      transition: transform 0.3s;
    }
    .ws-card:hover .ws-card-image img { transform: scale(1.05); }
    .ws-card-overlay {
      position: absolute;
      inset: 0;
      background: rgba(72,40,23,0);
      transition: background 0.3s;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      padding-bottom: 16px;
      opacity: 0;
      transition: opacity 0.3s, background 0.3s;
    }
    .ws-card:hover .ws-card-overlay {
      background: rgba(72,40,23,0.04);
      opacity: 1;
    }
    .ws-card-overlay span {
      background: rgba(255,255,255,0.9);
      backdrop-filter: blur(4px);
      color: rgb(72,40,23);
      text-transform: uppercase;
      letter-spacing: 2px;
      font-size: 11px;
      padding: 8px 16px;
      border-radius: 2px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
      font-family: 'Nunito Sans', sans-serif;
    }
    .ws-card-badge {
      position: absolute;
      top: 12px;
      left: 12px;
      background: rgba(255,255,255,0.8);
      backdrop-filter: blur(4px);
      color: rgb(120,115,105);
      text-transform: uppercase;
      letter-spacing: 1px;
      font-size: 10px;
      padding: 4px 8px;
      border-radius: 2px;
      font-family: 'Nunito Sans', sans-serif;
    }
    .ws-card-info {
      text-align: center;
    }
    .ws-card-stars {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1px;
      margin-bottom: 6px;
    }
    .ws-card-stars .review-count {
      font-size: 11px;
      color: rgb(170,165,155);
      margin-left: 4px;
      font-family: 'Nunito Sans', sans-serif;
    }
    .ws-card-name {
      text-transform: uppercase;
      letter-spacing: 2px;
      color: rgb(72,40,23);
      margin-bottom: 4px;
      font-size: 12px;
      font-family: 'Libre Baskerville', serif;
      font-weight: 400;
      transition: color 0.2s;
      line-height: 1.4;
    }
    @media (min-width: 640px) { .ws-card-name { font-size: 13px; } }
    .ws-card:hover .ws-card-name { color: rgb(158,132,92); }
    .ws-card-price {
      color: rgb(158,132,92);
      font-size: 15px;
      font-family: 'Libre Baskerville', serif;
    }

    /* No results */
    .ws-no-results {
      text-align: center;
      padding: 64px 0;
    }
    .ws-no-results p {
      color: rgb(120,115,105);
      font-size: 16px;
      margin-bottom: 8px;
      font-family: 'Nunito Sans', sans-serif;
    }
    .ws-no-results button {
      color: rgb(158,132,92);
      background: none;
      border: none;
      cursor: pointer;
      font-size: 14px;
      text-decoration: underline;
      font-family: 'Nunito Sans', sans-serif;
      transition: color 0.2s;
    }
    .ws-no-results button:hover { color: rgb(72,40,23); }

    /* Hide original WooCommerce elements we're replacing */
    .wine-shop-enhanced .woocommerce-products-header,
    .wine-shop-enhanced .woocommerce-result-count,
    .wine-shop-enhanced .woocommerce-ordering,
    .wine-shop-enhanced .woocommerce-pagination,
    .wine-shop-enhanced ul.products {
      display: none !important;
    }
    .wine-shop-enhanced .ast-woocommerce-container {
      max-width: 100% !important;
      padding: 0 !important;
    }
    .wine-shop-enhanced #primary {
      max-width: 100% !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    .wine-shop-enhanced .site-content > .ast-container {
      max-width: 100% !important;
      padding: 0 !important;
    }
    .wine-shop-enhanced #content > .ast-container {
      max-width: 100% !important;
      padding: 0 !important;
    }
  `;
  document.head.appendChild(style);

  // ========== COLLECT PRODUCT DATA ==========
  function collectProducts() {
    const products = [];
    const items = document.querySelectorAll('ul.products li.product, .products .product');
    items.forEach(function(item) {
      const nameEl = item.querySelector('.woocommerce-loop-product__title, h2');
      const priceEl = item.querySelector('.price .woocommerce-Price-amount, .price ins .woocommerce-Price-amount, .price');
      const imgEl = item.querySelector('img');
      const linkEl = item.querySelector('a.woocommerce-LoopProduct-link, a');

      const name = nameEl ? nameEl.textContent.trim() : '';
      let priceText = '';
      if (priceEl) {
        // Get the last price amount (in case of sale price)
        const amounts = item.querySelectorAll('.woocommerce-Price-amount');
        if (amounts.length > 0) {
          priceText = amounts[amounts.length - 1].textContent.trim();
        } else {
          priceText = priceEl.textContent.trim();
        }
      }
      const priceNum = parseFloat(priceText.replace(/[^0-9.]/g, '')) || 0;
      const image = imgEl ? imgEl.src : '';
      const link = linkEl ? linkEl.href : '#';
      const category = getCategory(name);

      products.push({ name, price: priceText, priceNum, image, link, category });
    });
    return products;
  }

  // ========== BUILD UI ==========
  function buildUI(products) {
    document.body.classList.add('wine-shop-enhanced');

    let activeCategory = 'All Wines';
    let sortBy = 'featured';
    let searchTerm = '';
    let mobileFiltersOpen = false;

    // Count products per category
    function countCategory(cat) {
      if (cat === 'All Wines') return products.length;
      return products.filter(function(p) { return p.category === cat; }).length;
    }

    // Filter and sort
    function getFiltered() {
      let filtered = activeCategory === 'All Wines'
        ? products.slice()
        : products.filter(function(p) { return p.category === activeCategory; });

      // Search filter
      if (searchTerm) {
        var term = searchTerm.toLowerCase();
        filtered = filtered.filter(function(p) {
          return p.name.toLowerCase().indexOf(term) !== -1;
        });
      }

      switch (sortBy) {
        case 'price-low':
          filtered.sort(function(a, b) { return a.priceNum - b.priceNum; });
          break;
        case 'price-high':
          filtered.sort(function(a, b) { return b.priceNum - a.priceNum; });
          break;
        case 'name':
          filtered.sort(function(a, b) { return a.name.localeCompare(b.name); });
          break;
        default:
          break;
      }
      return filtered;
    }

    // Star SVG
    function starSVG(filled) {
      return '<svg width="12" height="12" viewBox="0 0 24 24" fill="' + (filled ? 'rgb(218,165,32)' : 'none') + '" stroke="rgb(218,165,32)" stroke-width="1.5"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>';
    }

    // Build product card HTML
    function cardHTML(wine) {
      return '<a class="ws-card" href="' + wine.link + '">' +
        '<div class="ws-card-image">' +
          '<img src="' + wine.image + '" alt="' + wine.name + '" loading="lazy">' +
          '<div class="ws-card-overlay"><span>View Details</span></div>' +
          '<span class="ws-card-badge">' + getCategoryBadge(wine.category) + '</span>' +
        '</div>' +
        '<div class="ws-card-info">' +
          '<div class="ws-card-name">' + wine.name + '</div>' +
          '<div class="ws-card-price">' + wine.price + '</div>' +
        '</div>' +
      '</a>';
    }

    // Find insertion point
    var container = document.querySelector('.ast-woocommerce-container') ||
                    document.querySelector('#primary .entry-content') ||
                    document.querySelector('#primary') ||
                    document.querySelector('.site-content');

    if (!container) return;

    // Build hero
    var heroHTML = '<div class="ws-hero">' +
      '<div class="ws-hero-bg" style="background-image:url(\'' + HERO_IMAGE + '\')"></div>' +
      '<div class="ws-hero-overlay"></div>' +
      '<div class="ws-hero-content">' +
        '<h1>Shop Wines</h1>' +
        '<p>Handcrafted wines from our Finger Lakes estate vineyard</p>' +
      '</div>' +
    '</div>';

    // Build breadcrumbs
    var breadcrumbsHTML = '<div class="ws-breadcrumbs">' +
      '<a href="/">Home</a>' +
      '<span class="sep">/</span>' +
      '<span class="current" id="ws-breadcrumb-current">Shop Wines</span>' +
    '</div>';

    // Build sidebar
    var sidebarHTML = '<aside class="ws-sidebar">' +
      '<h3>Categories</h3>' +
      '<ul id="ws-cat-list">';
    CATEGORIES.forEach(function(cat) {
      var count = countCategory(cat.name);
      sidebarHTML += '<li><button data-cat="' + cat.name + '" class="' + (cat.name === activeCategory ? 'active' : '') + '">' +
        '<span>' + cat.name + '</span>' +
        '<span class="count">' + count + '</span>' +
      '</button></li>';
    });
    sidebarHTML += '</ul>';
    sidebarHTML += '<div class="ws-price-range"><h3>Price Range</h3><span id="ws-price-range-text"></span></div>';
    sidebarHTML += '</aside>';

    // Build search bar
    var searchHTML = '<div class="ws-search-bar">' +
      '<svg class="ws-search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="rgb(158,132,92)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>' +
      '<input type="text" id="ws-search" placeholder="Search wines..." autocomplete="off">' +
    '</div>';

    // Build toolbar
    var toolbarHTML = '<div class="ws-toolbar">' +
      '<button class="ws-mobile-filter-btn" id="ws-mobile-filter-toggle">' +
        '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/></svg>' +
        'Filter' +
      '</button>' +
      '<p class="ws-result-count" id="ws-result-count"></p>' +
      '<div class="ws-sort-wrap">' +
        '<label>Sort by:</label>' +
        '<select id="ws-sort">' +
          '<option value="featured">Featured</option>' +
          '<option value="price-low">Price: Low to High</option>' +
          '<option value="price-high">Price: High to Low</option>' +
          '<option value="name">Name</option>' +
        '</select>' +
      '</div>' +
    '</div>';

    // Mobile filters
    var mobileFiltersHTML = '<div class="ws-mobile-filters" id="ws-mobile-filters">' +
      '<div class="ws-mobile-filters-header">' +
        '<h3>Categories</h3>' +
        '<button id="ws-mobile-close"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button>' +
      '</div>' +
      '<div class="ws-mobile-pills" id="ws-mobile-pills">';
    CATEGORIES.forEach(function(cat) {
      var count = countCategory(cat.name);
      mobileFiltersHTML += '<button data-cat="' + cat.name + '" class="' + (cat.name === activeCategory ? 'active' : '') + '">' + cat.name + ' (' + count + ')</button>';
    });
    mobileFiltersHTML += '</div></div>';

    // Active filter tag
    var activeFilterHTML = '<div class="ws-active-filter" id="ws-active-filter" style="display:none;">' +
      '<span class="tag"><span id="ws-active-cat-name"></span><button id="ws-clear-filter"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></button></span>' +
      '<span class="count-text" id="ws-active-count"></span>' +
    '</div>';

    // Product grid
    var gridHTML = '<div class="ws-grid" id="ws-grid"></div>';
    var noResultsHTML = '<div class="ws-no-results" id="ws-no-results" style="display:none;"><p>No wines found in this category.</p><button id="ws-view-all">View all wines</button></div>';

    // Assemble full HTML
    var fullHTML = heroHTML + breadcrumbsHTML +
      '<div class="ws-main">' +
        sidebarHTML +
        '<div class="ws-content">' +
          searchHTML +
          toolbarHTML +
          mobileFiltersHTML +
          activeFilterHTML +
          gridHTML +
          noResultsHTML +
        '</div>' +
      '</div>';

    // Insert before the WooCommerce container
    var wrapper = document.createElement('div');
    wrapper.id = 'ws-wrapper';
    wrapper.innerHTML = fullHTML;
    container.parentNode.insertBefore(wrapper, container);

    // ========== RENDER ==========
    function render() {
      var filtered = getFiltered();

      // Grid
      var grid = document.getElementById('ws-grid');
      var noResults = document.getElementById('ws-no-results');
      if (filtered.length > 0) {
        grid.style.display = '';
        noResults.style.display = 'none';
        grid.innerHTML = filtered.map(cardHTML).join('');
      } else {
        grid.style.display = 'none';
        noResults.style.display = '';
      }

      // Result count
      document.getElementById('ws-result-count').textContent = 'Showing ' + filtered.length + ' ' + (filtered.length === 1 ? 'wine' : 'wines');

      // Price range
      if (filtered.length > 0) {
        var minPrice = Math.min.apply(null, filtered.map(function(w) { return w.priceNum; }));
        var maxPrice = Math.max.apply(null, filtered.map(function(w) { return w.priceNum; }));
        document.getElementById('ws-price-range-text').textContent = '$' + minPrice.toFixed(2) + ' – $' + maxPrice.toFixed(2);
      }

      // Active filter tag
      var activeFilterEl = document.getElementById('ws-active-filter');
      if (activeCategory !== 'All Wines') {
        activeFilterEl.style.display = '';
        document.getElementById('ws-active-cat-name').textContent = activeCategory;
        document.getElementById('ws-active-count').textContent = filtered.length + ' ' + (filtered.length === 1 ? 'wine' : 'wines');
      } else {
        activeFilterEl.style.display = 'none';
      }

      // Breadcrumb
      var bc = document.getElementById('ws-breadcrumb-current');
      if (activeCategory !== 'All Wines') {
        bc.innerHTML = '<a href="/product-category/wines/" style="color:rgb(158,132,92);text-decoration:none;">Shop Wines</a> <span class="sep">/</span> ' + activeCategory;
      } else {
        bc.textContent = 'Shop Wines';
      }

      // Sidebar active states
      document.querySelectorAll('#ws-cat-list button').forEach(function(btn) {
        btn.classList.toggle('active', btn.dataset.cat === activeCategory);
      });

      // Mobile pills active states
      document.querySelectorAll('#ws-mobile-pills button').forEach(function(btn) {
        btn.classList.toggle('active', btn.dataset.cat === activeCategory);
      });
    }

    // ========== EVENT LISTENERS ==========
    // Sidebar category clicks
    document.querySelectorAll('#ws-cat-list button').forEach(function(btn) {
      btn.addEventListener('click', function() {
        activeCategory = this.dataset.cat;
        render();
      });
    });

    // Mobile filter toggle
    document.getElementById('ws-mobile-filter-toggle').addEventListener('click', function() {
      mobileFiltersOpen = !mobileFiltersOpen;
      document.getElementById('ws-mobile-filters').classList.toggle('open', mobileFiltersOpen);
    });

    // Mobile close
    document.getElementById('ws-mobile-close').addEventListener('click', function() {
      mobileFiltersOpen = false;
      document.getElementById('ws-mobile-filters').classList.remove('open');
    });

    // Mobile pills
    document.querySelectorAll('#ws-mobile-pills button').forEach(function(btn) {
      btn.addEventListener('click', function() {
        activeCategory = this.dataset.cat;
        mobileFiltersOpen = false;
        document.getElementById('ws-mobile-filters').classList.remove('open');
        render();
      });
    });

    // Sort
    document.getElementById('ws-sort').addEventListener('change', function() {
      sortBy = this.value;
      render();
    });

    // Search
    document.getElementById('ws-search').addEventListener('input', function() {
      searchTerm = this.value.trim();
      render();
    });

    // Clear filter
    document.getElementById('ws-clear-filter').addEventListener('click', function() {
      activeCategory = 'All Wines';
      render();
    });

    // View all (no results)
    document.getElementById('ws-view-all').addEventListener('click', function() {
      activeCategory = 'All Wines';
      render();
    });

    // Initial render
    render();
  }

  // ========== INIT ==========
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
      var products = collectProducts();
      if (products.length > 0) buildUI(products);
    });
  } else {
    var products = collectProducts();
    if (products.length > 0) buildUI(products);
  }
})();