/* Filter Bar — Horizontal Tab Navigation */
    .filter-bar {
      background: var(--color-white);
      border-bottom: 2px solid var(--color-border);
      padding: 0;
      margin-bottom: var(--space-10);
      box-shadow: none;
      position: static;
    }
    .filter-row {
      display: flex;
      align-items: center;
      gap: var(--space-6);
      flex-wrap: wrap;
    }
    .filter-row + .filter-row {
      margin-top: 0;
      padding-top: var(--space-3);
      border-top: none;
    }
    .filter-label {
      font-size: var(--text-sm);
      font-weight: 700;
      color: var(--color-gray-500);
      white-space: nowrap;
      min-width: auto;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }
    .filter-tabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .filter-tab {
      padding: 10px 24px;
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--color-gray-600);
      background: var(--color-gray-50);
      border-radius: 30px;
      cursor: pointer;
      transition: all 0.3s ease;
      border: 1px solid var(--color-border);
    }
    .filter-tab:hover {
      color: var(--color-primary);
      background: var(--color-primary-50);
      border-color: var(--color-primary-200);
    }
    .filter-tab.active {
      color: var(--color-white);
      background: var(--color-accent);
      border-color: var(--color-accent);
    }
    /* Pagination */
    .pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: var(--space-2);
      margin-top: var(--space-10);
    }
    .pagination a,
    .pagination span {
      display: flex;
      align-items: center;
      justify-content: center;
      min-width: 40px;
      height: 40px;
      padding: 0 var(--space-3);
      font-size: var(--text-sm);
      font-weight: 600;
      color: var(--color-gray-600);
      background: var(--color-white);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      transition: all var(--transition-fast);
    }
    .pagination a:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
      background: var(--color-primary-light);
    }
    .pagination .active {
      background: var(--color-primary);
      color: var(--color-white);
      border-color: var(--color-primary);
    }
    .pagination .dots {
      border: none;
      background: none;
      color: var(--color-gray-400);
    }
    @media (max-width: 767px) {
      .filter-bar { position: static; border-bottom: 2px solid var(--color-border); }
      .filter-tabs { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0; }
      .filter-tab { white-space: nowrap; padding: var(--space-3) var(--space-4); font-size: var(--text-xs); }
      .filter-row { gap: var(--space-3); }
      .product-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }

    /* ── Product Card Video Hover ── */
    .product-card-vid__media {
      position: relative;
      overflow: hidden;
      background: #fff;                   /* default white */
      transition: background 0.35s ease;
    }
    .product-card-vid:hover .product-card-vid__media {
      background: #000;                   /* ★ black overlay during video hover */
    }
    .product-card-vid__img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: opacity .4s ease;
    }
    .product-card-vid__video {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity .4s ease;
    }
    .product-card-vid:hover .product-card-vid__img {
      opacity: 0;
    }
    .product-card-vid:hover .product-card-vid__video {
      opacity: 1;
    }
    /* Hide video if no data-video attribute */
    .product-card-vid:not([data-video]) .product-card-vid__img {
      opacity: 1 !important;
    }
    .product-card-vid__play-badge {
      position: absolute;
      bottom: 8px;
      right: 8px;
      width: 28px;
      height: 28px;
      background: rgba(0,0,0,.55);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      z-index: 2;
      pointer-events: none;
    }
    .product-card-vid:hover .product-card-vid__play-badge {
      opacity: 0;
      transition: opacity .2s ease .3s;
    }